Merge pull request #35 from Scaffold-Stark/docs/eth-stark

Docs/eth stark

README.md

@@ -38,7 +38,7 @@ If you find anything that is confusing or can be improved in an existing documen
 
 ### New content
 
-When **adding a new page**, you need to fork the repository, create a new branch, and make all changes necessary in your repository. Once you are done with your changes, create a PR to Scaffold-ETH 2 Documentation repository.
+When **adding a new page**, you need to fork the repository, create a new branch, and make all changes necessary in your repository. Once you are done with your changes, create a PR to Scaffold-Stark-2 Documentation repository.
 
 Add the new pages to the `docs` folder, placing them in the specific directory where you want the page to be shown.  
 **Siderbar** link will get **autogenerated** under your specific folder, in the **position** that you specify in your document header. Example:
@@ -63,7 +63,7 @@ TODO: Explain _category_.json
 
 For contributions to the Website Code, we follow the ["fork-and-pull" Git workflow](https://github.com/susam/gitpr).
 
-Fork the repository, create a new branch, and make all changes necessary in your repository. Once you are done with your changes, create a PR to Scaffold-Start-2 Documentation repository.
+Fork the repository, create a new branch, and make all changes necessary in your repository. Once you are done with your changes, create a PR to Scaffold-Stark-2 Documentation repository.
 
 ### Configuration
 

docs/eth-stark/eth-stark.md

@@ -0,0 +1,29 @@
+---
+sidebar_position: 6
+---
+
+# 🚩 Using Scaffold Stark with Ethereum Contracts
+
+[Scaffold-ETH-Stark](https://github.com/Scaffold-Stark/scaffold-eth-stark) is an innovative toolkit that combines the capabilities of Scaffold-Stark and Scaffold-ETH, providing a unified solution for building decentralized applications (dapps) on both Starknet and EVM-compatible blockchains.
+
+## What is Scaffold-ETH-Stark?
+
+Scaffold-ETH-Stark is an open-source, up-to-date toolkit designed to simplify the process of creating and deploying smart contracts, as well as building user interfaces that interact with these contracts across multiple networks. It leverages the strengths of both Scaffold Stark and Scaffold-ETH 2 to offer a comprehensive development environment for developers.
+
+### Key Features
+
+1. **Multi-Chain Support**: Develop and deploy contracts on both Starknet and EVM-compatible chains from a single project.
+
+2. **Unified React Hooks**: Scaffold-ETH-Stark provides a collection of custom React hooks that wrap around both Starknet-React and Wagmi, offering a consistent interface for interacting with smart contracts on different networks.
+
+3. **Integrated Development Environment**: Combines the tools and workflows from both Scaffold Stark and Scaffold-ETH 2, including Starknet Foundry for Starknet development and Foundry for Ethereum development.
+
+4. **Flexible Wallet Integration**: Connect to various wallet providers for both Starknet and EVM networks, enhancing the user experience across different blockchains.
+
+5. **TypeScript Support**: Enjoy strong typing and autocompletion for both Starknet and Ethereum contract interactions.
+
+## Getting Started with Scaffold-ETH-Stark
+
+To begin using Scaffold-ETH-Stark, you'll need to set up your development environment to support both Starknet and Ethereum development. This includes installing the necessary tools and dependencies for both ecosystems.
+
+For detailed installation instructions and usage guidelines, please refer to the [Scaffold-ETH-Stark GitHub repository](https://github.com/Scaffold-Stark/scaffold-eth-stark).

docs/eth-stark/useDynamicAccount.md

@@ -0,0 +1,20 @@
+---
+sidebar_position: 6
+---
+
+# useDynamicAccount
+
+This is the hook that wraps the `useAccount` hook from starknet-react and wagmi. Use this hook to get your account details.
+
+```ts
+const { address } = useDynamicAccount();
+```
+
+## Return Value
+
+- `address`: Address of the account.
+- `chainId` : Chain id of the account.
+- `isConnected` : Boolean indicating if the account is connected.
+- `isConnecting` : Boolean indicating if the account is connecting.
+- `isDisconnected` : Boolean indicating if the account is disconnected.
+- `isReconnecting` : Boolean indicating if the account is reconnecting.

docs/eth-stark/useDynamicContract.md

@@ -0,0 +1,68 @@
+---
+sidebar_position: 5
+---
+
+# useDynamicContract
+
+This is the hook that wraps the `useScaffoldContract` hook from Scaffold-Stark and Scaffold-ETH for both Starknet and Ethereum. Use this hook to get your contract instance by providing the contract name. It enables you to interact with your contract methods.
+For reading data or sending transactions, it's recommended to use `useDynamicReadContract` and `useDynamicWriteContract`.
+
+```ts
+const { data: yourContract, isLoading: yourContractLoading } = useDynamicContract({
+  eth: {
+    contractName: "YourContract",
+  },
+  strk: {
+    contractName: "YourContract",
+  },
+});
+
+// Returns the greeting and can be called in any function, unlike useDynamicReadContract
+
+// for eth contract
+await yourContract?.read.greeting();
+
+// for starknet contract
+await yourContract?.greeting();
+
+// Used to write to a contract and can be called in any function
+import { useAccount } from "@starknet-react/core";
+import { useWalletClient } from "wagmi";
+
+const { account } = useAccount();
+const { data: walletClient } = useWalletClient();
+
+const { data: yourContract, isLoading: yourContractLoading } = useDynamicContract({
+  eth: {
+    contractName: "YourContract",
+    walletClient: walletClient,
+  },
+  strk: {
+    contractName: "YourContract",
+    walletClient: account,
+  },
+});
+
+const setGreeting = async () => {
+  // Call the method in any function
+  // for eth contract
+  await yourContract?.write.setGreeting(["the greeting here"]);
+
+  // for starknet contract
+  await yourContract?.setGreeting(["the greeting here"]);
+};
+```
+
+This example uses the `useDynamicContract` hook to obtain a contract instance for the `YourContract` smart contract.
+
+## Configuration
+
+| Parameter        | Type     | Description           |
+| :--------------- | :------- | :-------------------- |
+| **contractName** | `string` | Name of the contract. |
+
+## Return Value
+
+- `data`: An instance of the contract, which can be used to call `read` and `write` methods of the contract.
+
+- `isLoading` : Boolean indicating if the contract is being loaded.

docs/eth-stark/useDynamicDeployContract.md

@@ -0,0 +1,30 @@
+---
+sidebar_position: 4
+---
+
+# useDynamicDeployContract
+
+This is the hook that wraps the `useDeployedContractInfo` hook from Scaffold-Stark and Scaffold-ETH for both Starknet and Ethereum. Use this hook to fetch details about a deployed smart contract, including the ABI and address.
+
+```ts
+const {
+  data: deployedContractInfo,
+  isLoading: deployedContractLoading,
+  error: deployedContractError,
+} = useDynamicDeployContract({
+  eth: { contractName: "YourContract" },
+  strk: { contractName: "YourContract" },
+});
+```
+
+This example retrieves the details of the deployed contract with the specified name and stores the details in the `deployedContractData` object.
+
+## Parameters
+
+| Parameter        | Type     | Description           |
+| :--------------- | :------- | :-------------------- |
+| **contractName** | `string` | Name of the contract. |
+
+### Return Value
+
+- `data`: Object containing `address` and `abi` of contract.

docs/eth-stark/useDynamicEventHistory.md

@@ -0,0 +1,48 @@
+---
+sidebar_position: 3
+---
+
+# useDynamicEventHistory
+
+This is the hook that wraps the `useScaffoldEventHistory` hook from Scaffold-Stark and Scaffold-ETH for both Starknet and Ethereum. This hook allows you to read events from a deployed smart contract.
+
+```ts
+const { data, isLoading, error } = useDynamicEventHistory({
+  strk: {
+    contractName: "YourContract",
+    eventName: "contracts::YourContract::YourContract::GreetingChanged",
+    fromBlock: 1n,
+    enabled: true,
+    watch: true,
+  },
+  eth: {
+    contractName: "YourContract",
+    eventName: "GreetingChange",
+    fromBlock: 1n,
+    enabled: true,
+    watch: true,
+  },
+});
+```
+
+This example configures the hook to read events from the `GreetingChange` event of the `YourContract` smart contract, starting from block 1. The hook will watch for new events and refresh the data.
+
+## Configuration
+
+| Parameter                      | Type                  | Description                                                                                                                                                    |
+| :----------------------------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **contractName**               | `string`              | Name of the deployed contract to read events from.                                                                                                             |
+| **eventName**                  | `string`              | Name of the event to listen for.                                                                                                                               |
+| **fromBlock**                  | `bigint`              | The block number to start reading events from.                                                                                                                 |
+| **filters** (optional)         | `Record<string, any>` | Filters to be applied to the event `{ [parameterName]: value }`.                                                                                               |
+| **blockData** (optional)       | `boolean`             | If true, returns the block data for each event (default: false).                                                                                               |
+| **transactionData** (optional) | `boolean`             | If true, returns the transaction data for each event (default: false).                                                                                         |
+| **receiptData** (optional)     | `boolean`             | If true, returns the receipt data for each event (default: false).                                                                                             |
+| **watch** (optional)           | `boolean`             | If true, the events will be refetched every [`pollingInterval`](/deploying/deploy-nextjs-app#--pollinginterval) set at `scaffold.config.ts`. (default: false). |
+| **enabled** (optional)         | `boolean`             | If false, disables the hook from running (default: true).                                                                                                      |
+
+## Return Values
+
+- `data` The event history data, including optional block, transaction, and receipt data if specified.
+- `isLoading` A boolean indicating whether the data is currently being loaded.
+- `error` An error message if an error occurred while fetching the data.

docs/eth-stark/useDynamicReadContract.md

@@ -0,0 +1,36 @@
+---
+sidebar_position: 1
+---
+
+# useDynamicReadContract
+
+This is the hook that wraps the `useScaffoldReadContract` hook from Scaffold-Stark and Scaffold-ETH for both Starknet and Ethereum. Use this hook to read public variables and get data from read-only functions of your Starknet and Ethereum smart contracts.
+
+```ts
+const { data: totalCounter } = useDynamicReadContract({
+  strk: {
+    contractName: "YourContract",
+    functionName: "userGreetingCounter",
+    args: ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045"],
+  },
+  eth: {
+    contractName: "YourContract",
+    functionName: "userGreetingCounter",
+    args: ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045"],
+  },
+});
+```
+
+This example retrieves the data returned by the `userGreetingCounter` function of the `YourContract` smart contract. Whenever you switch between Starknet and Ethereum networks, the hook will automatically switch between the corresponding contracts. Therefore, the `data` will be updated accordingly.
+
+## Configuration
+
+| Parameter | Type     | Description                                                                                                                                                                                                                        |
+| :-------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **strk**  | `object` | Object containing the contractName, functionName, args, and other optional parameters for Starknet. A more detailed description is available [here](https://docs.scaffoldstark.com/hooks/useScaffoldReadContract).                 |
+| **eth**   | `object` | Object containing the contractName, functionName, args, and other optional parameters for Ethereum smart contracts. A more detailed description is available [here](https://docs.scaffoldstark.com/hooks/useScaffoldReadContract). |
+
+## Return Values
+
+- The retrieved data is stored in the `data` property of the returned object.
+- The extended object includes properties inherited from the `useScaffoldReadContract` hook. You can check the [Scaffold-Stark useScaffoldReadContract return values](https://docs.scaffoldstark.com/hooks/useScaffoldReadContract#return-values) and [Scaffold-ETH useScaffoldReadContract return values](https://docs.scaffoldeth.io/hooks/useScaffoldReadContract#return-values) for the types.

docs/eth-stark/useDynamicTargetNetwork.md

@@ -0,0 +1,15 @@
+---
+sidebar_position: 7
+---
+
+# useDynamicTargetNetwork
+
+This is the hook that wraps the `useTargetNetwork` hook from Scaffold-Stark and Scaffold-ETH. Use this hook to get the current connected network.
+
+```ts
+const targetNetwork = useDynamicTargetNetwork();
+```
+
+## Return Value
+
+- `targetNetwork`: Current connected network with details such as chainId, name, nativeCurrency, rpcUrls, blockExplorers, etc.

docs/eth-stark/useDynamicWriteContract.md

@@ -0,0 +1,76 @@
+---
+sidebar_position: 2
+---
+
+# useDynamicWriteContract
+
+This is the hook that wraps the `useScaffoldWriteContract` hook from Scaffold-Stark and Scaffold-ETH for both Starknet and Ethereum. Use this hook to write to your smart contract by calling state-mutating functions.
+
+```ts
+const { writeAsync, isPending: greetingPending } = useDynamicWriteContract({
+  strk: {
+    contractName: "YourContract",
+    functionName: "updateGreeting",
+    args: ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045", "Hello, world!"],
+  },
+  eth: {
+    contractName: "YourContract",
+    functionName: "updateGreeting",
+    args: ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045", "Hello, world!"],
+  },
+});
+```
+
+This example calls the updateGreeting function of the YourContract smart contract.
+
+## Usage Example
+
+```tsx
+const { writeAsync, isPending: isUpdateGreetingPending } = useDynamicWriteContract({
+  strk: {
+    contractName: "YourContract",
+    functionName: "updateGreeting",
+    args: ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045", "Hello, world!"],
+  },
+  eth: {
+    contractName: "YourContract",
+    functionName: "updateGreeting",
+    args: ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045", "Hello, world!"],
+  },
+});
+
+async function handleClick() {
+  try {
+    await writeAsync();
+  } catch (error) {
+    console.error(error);
+  }
+}
+```
+
+In this example, the updateGreeting function of the YourContract is called with the specified arguments. The transaction is sent using the `writeAsync` method, which handles the logic for sending the transaction and returns a promise
+
+## Configuration for Starknet
+
+| Parameter                | Type        | Description                                                                                                      |
+| :----------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------- |
+| **contractName**         | `string`    | Name of the contract to write to.                                                                                |
+| **functionName**         | `string`    | Name of the function to call.                                                                                    |
+| **args** (optional)      | `unknown[]` | Array of arguments to pass to the function (if any). Types are inferred from the contract's function parameters. |
+| **onSuccess** (optional) | `function`  | Function to call on successful transaction.                                                                      |
+| **onError** (optional)   | `function`  | Function to call on error.                                                                                       |
+
+## Configuration for Ethereum
+
+| Parameter              | Type        | Description                                                                                                          |
+| :--------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------- |
+| **contractName**       | `string`    | Name of the contract to write to.                                                                                    |
+| **functionName**       | `string`    | Name of the function to call.                                                                                        |
+| **args** (optional)    | `unknown[]` | Array of arguments to pass to the function (if accepts any). Types are inferred from contract's function parameters. |
+| **options** (optional) | `object`    | Additional options for the transaction, such as gas and value.                                                       |
+| **hooks** (optional)   | `object`    | Additional hooks for handling the transaction such as `onSuccess`, `onError`, `onSettled`.                           |
+
+## Return Values
+
+- The writeAsync method is used to send the write transaction. It returns a promise that resolves when the transaction is confirmed.
+- The extended object includes properties inherited from the `useScaffoldWriteContract` hook. You can check the [Scaffold-Stark useScaffoldWriteContract return values](https://docs.scaffoldstark.com/hooks/useScaffoldWriteContract#return-values) and [Scaffold-ETH useScaffoldWriteContract return values](https://docs.scaffoldeth.io/hooks/useScaffoldWriteContract#return-values) for the types.