From 951335b6c9dccf0c118bfb0ab459fa91ea24f5ef Mon Sep 17 00:00:00 2001
From: suhas-sensei <suhas.ghosal2002@gmail.com>
Date: Tue, 17 Dec 2024 15:56:14 +0530
Subject: [PATCH 1/6] docs recipe #60

---
 docs/recipes/DevelopingOnFork.md | 201 +++++++++++++++++++++++++++++++
 1 file changed, 201 insertions(+)
 create mode 100644 docs/recipes/DevelopingOnFork.md

diff --git a/docs/recipes/DevelopingOnFork.md b/docs/recipes/DevelopingOnFork.md
new file mode 100644
index 0000000..41983fc
--- /dev/null
+++ b/docs/recipes/DevelopingOnFork.md
@@ -0,0 +1,201 @@
+---
+sidebar_position: 6
+title: Working with a Forked Network
+description: Learn how to develop and test your dApp using a fork of mainnet network with custom wallets.
+---
+
+# Working with a Forked Network
+This recipe shows how to run a local fork of mainnet and interact with it using Scaffold Stark's contract hooks.
+
+<details open>
+<summary>Here is the complete code for interacting with a forked network:</summary>
+
+```tsx title="components/ForkNetworkInteraction.tsx"
+import { useAccount } from "@starknet-react/core";
+import { useScaffoldContract, useScaffoldWriteContract } from "~~/hooks/scaffold-stark";
+import { notification } from "~~/utils/scaffold-stark";
+
+export const ForkNetworkInteraction = () => {
+  const { address } = useAccount();
+  
+  // Get contract instance
+  const { data: contract, isLoading: isContractLoading } = useScaffoldContract({
+    contractName: "YourContract",
+  });
+
+  // Set up write function
+  const { sendAsync: setGreeting, isPending } = useScaffoldWriteContract({
+    contractName: "YourContract",
+    functionName: "set_greeting",
+    args: ["Testing Fork!"],
+  });
+
+  const handleSetGreeting = async () => {
+    try {
+      await setGreeting();
+      notification.success("Greeting updated!");
+    } catch (error) {
+      console.error("Error:", error);
+      notification.error("Failed to update greeting");
+    }
+  };
+
+  return (
+    <div className="bg-base-300 p-6 rounded-lg max-w-md mx-auto mt-6">
+      <h2 className="text-lg font-bold mb-4">Fork Network Interaction</h2>
+      <div className="space-y-4">
+        <div className="text-sm">
+          <p>Network: Starknet Devnet (Fork)</p>
+          <p>Your Address: {address}</p>
+          <p>Contract: {contract?.address}</p>
+        </div>
+        <button 
+          className="btn btn-primary"
+          onClick={handleSetGreeting}
+          disabled={isPending || isContractLoading}
+        >
+          {isPending ? "Sending..." : "Test Greeting"}
+        </button>
+      </div>
+    </div>
+  );
+};
+```
+</details>
+
+## Implementation Guide
+
+### Step 1: Start the Fork Network
+First, start a local fork of mainnet:
+
+```bash title="terminal"
+# Start fork
+yarn chain --fork-network https://starknet-mainnet.public.blastapi.io/rpc/v0_7
+
+# In a new terminal, deploy contracts
+yarn deploy
+
+# Start frontend
+yarn start
+```
+
+### Step 2: Create Network Interaction Component
+Create a new component to interact with your forked network:
+
+```tsx title="components/ForkNetworkInteraction.tsx"
+import { useAccount } from "@starknet-react/core";
+import { useScaffoldContract } from "~~/hooks/scaffold-stark";
+
+export const ForkNetworkInteraction = () => {
+  const { address } = useAccount();
+  const { data: contract } = useScaffoldContract({
+    contractName: "YourContract",
+  });
+  // ... rest of the component
+};
+```
+
+### Step 3: Implement Write Functions
+Add contract interactions using `useScaffoldWriteContract`:
+
+```tsx title="components/ForkNetworkInteraction.tsx"
+const { sendAsync: setGreeting, isPending } = useScaffoldWriteContract({
+  contractName: "YourContract",
+  functionName: "set_greeting",
+  args: ["Testing Fork!"],
+});
+
+const handleSetGreeting = async () => {
+  try {
+    await setGreeting();
+    notification.success("Greeting updated!");
+  } catch (error) {
+    notification.error("Failed to update greeting");
+  }
+};
+```
+
+### Step 4: Add to Your App Page
+Import and use the component in your app:
+
+```tsx title="app/page.tsx"
+import { ForkNetworkInteraction } from "../components/ForkNetworkInteraction";
+
+export default function Home() {
+  return (
+    <div className="container mx-auto">
+      <ForkNetworkInteraction />
+    </div>
+  );
+}
+```
+### Step 5: Testing with Different Wallets
+
+#### Using Burner Wallets
+```tsx title="components/BurnerWalletTest.tsx"
+import { useBurnerWallet } from "~~/hooks/scaffold-stark";
+
+export const BurnerWalletTest = () => {
+  const { connect } = useBurnerWallet();
+  
+  return (
+    <button onClick={connect}>
+      Use Burner Wallet
+    </button>
+  );
+};
+```
+
+#### Connecting External Wallets
+For Argent/Braavos wallets:
+
+```tsx title="components/ExternalWalletConnection.tsx"
+import { useConnect } from "@starknet-react/core";
+
+export const ExternalWalletConnection = () => {
+  const { connect, connectors } = useConnect();
+
+  return (
+    <div>
+      {connectors.map((connector) => (
+        <button
+          key={connector.id}
+          onClick={() => connect({ connector })}
+        >
+          Connect {connector.name}
+        </button>
+      ))}
+    </div>
+  );
+};
+```
+## Testing Different Wallet Types
+
+### 1. Using Burner Wallet
+- Automatically funded with test ETH and STRK to cover gas fees.
+- Perfect for quick testing
+- No external wallet needed
+
+### 2. Using Argent/Braavos
+To connect external wallets to your local fork:
+1. Open Argent/Braavos wallet
+2. Add Custom Network:
+   - Network URL: http://localhost:5050
+   - Chain ID: 501 (fork network ID)
+   - Name: Localhost Fork
+3. Connect wallet through the dApp interface
+
+## Using the Fork Environment
+
+Your forked environment provides:
+1. A local copy of mainnet for testing
+2. Contract read/write capabilities using Scaffold Stark hooks
+3. Error handling and transaction notifications
+4. Network state verification
+
+### Testing Different Operations
+
+You can test:
+- Contract reads using `useScaffoldContract`
+- Contract writes using `useScaffoldWriteContract`
+- Error cases and network state.
\ No newline at end of file

From 5ca3f710dc8d6e6dbb69ad1c34e92782b797605a Mon Sep 17 00:00:00 2001
From: suhas-sensei <suhas.ghosal2002@gmail.com>
Date: Tue, 17 Dec 2024 16:08:49 +0530
Subject: [PATCH 2/6] typo

---
 docs/recipes/DevelopingOnFork.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/recipes/DevelopingOnFork.md b/docs/recipes/DevelopingOnFork.md
index 41983fc..3866834 100644
--- a/docs/recipes/DevelopingOnFork.md
+++ b/docs/recipes/DevelopingOnFork.md
@@ -75,7 +75,7 @@ yarn chain --fork-network https://starknet-mainnet.public.blastapi.io/rpc/v0_7
 # In a new terminal, deploy contracts
 yarn deploy
 
-# Start frontend
+# Start frontend on another terminal
 yarn start
 ```
 

From 4f7c06a45b1fa63a3f2dcb83a3630d8e5c12422b Mon Sep 17 00:00:00 2001
From: suhas-sensei <suhas.ghosal2002@gmail.com>
Date: Sun, 22 Dec 2024 19:56:56 +0530
Subject: [PATCH 3/6] requested changes

---
 docs/recipes/DevelopingOnFork.md | 234 +++++++------------------------
 1 file changed, 49 insertions(+), 185 deletions(-)

diff --git a/docs/recipes/DevelopingOnFork.md b/docs/recipes/DevelopingOnFork.md
index 3866834..204a580 100644
--- a/docs/recipes/DevelopingOnFork.md
+++ b/docs/recipes/DevelopingOnFork.md
@@ -1,201 +1,65 @@
----
-sidebar_position: 6
-title: Working with a Forked Network
-description: Learn how to develop and test your dApp using a fork of mainnet network with custom wallets.
----
+```markdown
+# Developing on Fork
 
-# Working with a Forked Network
-This recipe shows how to run a local fork of mainnet and interact with it using Scaffold Stark's contract hooks.
+This guide shows how to run and interact with a local fork of Starknet mainnet.
 
-<details open>
-<summary>Here is the complete code for interacting with a forked network:</summary>
+## Setup
 
-```tsx title="components/ForkNetworkInteraction.tsx"
-import { useAccount } from "@starknet-react/core";
-import { useScaffoldContract, useScaffoldWriteContract } from "~~/hooks/scaffold-stark";
-import { notification } from "~~/utils/scaffold-stark";
-
-export const ForkNetworkInteraction = () => {
-  const { address } = useAccount();
-  
-  // Get contract instance
-  const { data: contract, isLoading: isContractLoading } = useScaffoldContract({
-    contractName: "YourContract",
-  });
-
-  // Set up write function
-  const { sendAsync: setGreeting, isPending } = useScaffoldWriteContract({
-    contractName: "YourContract",
-    functionName: "set_greeting",
-    args: ["Testing Fork!"],
-  });
-
-  const handleSetGreeting = async () => {
-    try {
-      await setGreeting();
-      notification.success("Greeting updated!");
-    } catch (error) {
-      console.error("Error:", error);
-      notification.error("Failed to update greeting");
-    }
-  };
-
-  return (
-    <div className="bg-base-300 p-6 rounded-lg max-w-md mx-auto mt-6">
-      <h2 className="text-lg font-bold mb-4">Fork Network Interaction</h2>
-      <div className="space-y-4">
-        <div className="text-sm">
-          <p>Network: Starknet Devnet (Fork)</p>
-          <p>Your Address: {address}</p>
-          <p>Contract: {contract?.address}</p>
-        </div>
-        <button 
-          className="btn btn-primary"
-          onClick={handleSetGreeting}
-          disabled={isPending || isContractLoading}
-        >
-          {isPending ? "Sending..." : "Test Greeting"}
-        </button>
-      </div>
-    </div>
-  );
-};
-```
-</details>
-
-## Implementation Guide
-
-### Step 1: Start the Fork Network
-First, start a local fork of mainnet:
-
-```bash title="terminal"
-# Start fork
+1. Start the fork:
+```bash
 yarn chain --fork-network https://starknet-mainnet.public.blastapi.io/rpc/v0_7
-
-# In a new terminal, deploy contracts
-yarn deploy
-
-# Start frontend on another terminal
-yarn start
-```
-
-### Step 2: Create Network Interaction Component
-Create a new component to interact with your forked network:
-
-```tsx title="components/ForkNetworkInteraction.tsx"
-import { useAccount } from "@starknet-react/core";
-import { useScaffoldContract } from "~~/hooks/scaffold-stark";
-
-export const ForkNetworkInteraction = () => {
-  const { address } = useAccount();
-  const { data: contract } = useScaffoldContract({
-    contractName: "YourContract",
-  });
-  // ... rest of the component
-};
 ```
 
-### Step 3: Implement Write Functions
-Add contract interactions using `useScaffoldWriteContract`:
-
-```tsx title="components/ForkNetworkInteraction.tsx"
-const { sendAsync: setGreeting, isPending } = useScaffoldWriteContract({
-  contractName: "YourContract",
-  functionName: "set_greeting",
-  args: ["Testing Fork!"],
-});
-
-const handleSetGreeting = async () => {
-  try {
-    await setGreeting();
-    notification.success("Greeting updated!");
-  } catch (error) {
-    notification.error("Failed to update greeting");
-  }
-};
-```
-
-### Step 4: Add to Your App Page
-Import and use the component in your app:
-
-```tsx title="app/page.tsx"
-import { ForkNetworkInteraction } from "../components/ForkNetworkInteraction";
-
-export default function Home() {
-  return (
-    <div className="container mx-auto">
-      <ForkNetworkInteraction />
-    </div>
-  );
-}
-```
-### Step 5: Testing with Different Wallets
-
-#### Using Burner Wallets
-```tsx title="components/BurnerWalletTest.tsx"
-import { useBurnerWallet } from "~~/hooks/scaffold-stark";
-
-export const BurnerWalletTest = () => {
-  const { connect } = useBurnerWallet();
-  
-  return (
-    <button onClick={connect}>
-      Use Burner Wallet
-    </button>
-  );
+2. Update scaffold.config.ts:
+```typescript
+const mainnetFork = {
+  id: BigInt("0x534e5f4d41494e"),
+  network: "devnet",
+  name: "Starknet Fork",
+  nativeCurrency: {
+    address: "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+    name: "Ether",
+    symbol: "ETH",
+    decimals: 18,
+  },
+  testnet: true,
+  rpcUrls: {
+    default: {
+      http: ["http://127.0.0.1:5050/rpc"],
+    },
+    public: {
+      http: ["http://127.0.0.1:5050/rpc"],
+    },
+  },
+} as Chain;
+
+const scaffoldConfig = {
+  targetNetworks: [mainnetFork],
+  // ... other config options remain the same
 };
 ```
 
-#### Connecting External Wallets
-For Argent/Braavos wallets:
-
-```tsx title="components/ExternalWalletConnection.tsx"
-import { useConnect } from "@starknet-react/core";
-
-export const ExternalWalletConnection = () => {
-  const { connect, connectors } = useConnect();
+## Wallet Configuration
 
-  return (
-    <div>
-      {connectors.map((connector) => (
-        <button
-          key={connector.id}
-          onClick={() => connect({ connector })}
-        >
-          Connect {connector.name}
-        </button>
-      ))}
-    </div>
-  );
-};
-```
-## Testing Different Wallet Types
+### Using Argent/Braavos
+1. Open your wallet
+2. Add Custom Network:
+   - RPC URL: http://127.0.0.1:5050/rpc
+   - Chain ID: 0x534e5f4d41494e
+   - Name: Starknet Fork
 
-### 1. Using Burner Wallet
-- Automatically funded with test ETH and STRK to cover gas fees.
-- Perfect for quick testing
-- No external wallet needed
+![image](https://github.com/user-attachments/assets/511b84a1-e232-46b3-a4a4-82c44ad03969)
 
-### 2. Using Argent/Braavos
-To connect external wallets to your local fork:
-1. Open Argent/Braavos wallet
-2. Add Custom Network:
-   - Network URL: http://localhost:5050
-   - Chain ID: 501 (fork network ID)
-   - Name: Localhost Fork
-3. Connect wallet through the dApp interface
 
-## Using the Fork Environment
+similiarly for braavos.
+if you correctly connected with the devnet correctly, it should show
+![image](https://github.com/user-attachments/assets/a684c853-35ed-4042-a415-86744efb36d2)
 
-Your forked environment provides:
-1. A local copy of mainnet for testing
-2. Contract read/write capabilities using Scaffold Stark hooks
-3. Error handling and transaction notifications
-4. Network state verification
 
-### Testing Different Operations
+## Interaction
+Navigate to `/debug-ui` to interact with your contracts
 
-You can test:
-- Contract reads using `useScaffoldContract`
-- Contract writes using `useScaffoldWriteContract`
-- Error cases and network state.
\ No newline at end of file
+## Notes
+- Make sure your contract deployment is complete before testing
+- The burner wallet is automatically configured with test ETH
+- External wallets need to be configured with the correct network settings
\ No newline at end of file

From 4a3bc5d630fa3a3414b4195d0173085f7461b5f0 Mon Sep 17 00:00:00 2001
From: Suhas Ghosal <63814211+suhas-sensei@users.noreply.github.com>
Date: Mon, 23 Dec 2024 18:54:48 +0000
Subject: [PATCH 4/6] added isFork validation check

---
 docs/recipes/DevelopingOnFork.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/recipes/DevelopingOnFork.md b/docs/recipes/DevelopingOnFork.md
index 204a580..94821c6 100644
--- a/docs/recipes/DevelopingOnFork.md
+++ b/docs/recipes/DevelopingOnFork.md
@@ -35,6 +35,7 @@ const mainnetFork = {
 
 const scaffoldConfig = {
   targetNetworks: [mainnetFork],
+  isFork: true,  // handles forked network validation, else might show wrong network.
   // ... other config options remain the same
 };
 ```

From ec1db926e61a1f79b46ed6f4d48b614e3b10af37 Mon Sep 17 00:00:00 2001
From: Suhas Ghosal <63814211+suhas-sensei@users.noreply.github.com>
Date: Mon, 23 Dec 2024 19:27:55 +0000
Subject: [PATCH 5/6] docs refactor

---
 docs/recipes/DevelopingOnFork.md | 34 +++++++++-----------------------
 1 file changed, 9 insertions(+), 25 deletions(-)

diff --git a/docs/recipes/DevelopingOnFork.md b/docs/recipes/DevelopingOnFork.md
index 94821c6..6103b98 100644
--- a/docs/recipes/DevelopingOnFork.md
+++ b/docs/recipes/DevelopingOnFork.md
@@ -10,36 +10,20 @@ This guide shows how to run and interact with a local fork of Starknet mainnet.
 yarn chain --fork-network https://starknet-mainnet.public.blastapi.io/rpc/v0_7
 ```
 
-2. Update scaffold.config.ts:
+2. Update `scaffoldConfig` in scaffold.config.ts as:
 ```typescript
-const mainnetFork = {
-  id: BigInt("0x534e5f4d41494e"),
-  network: "devnet",
-  name: "Starknet Fork",
-  nativeCurrency: {
-    address: "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
-    name: "Ether",
-    symbol: "ETH",
-    decimals: 18,
-  },
-  testnet: true,
-  rpcUrls: {
-    default: {
-      http: ["http://127.0.0.1:5050/rpc"],
-    },
-    public: {
-      http: ["http://127.0.0.1:5050/rpc"],
-    },
-  },
-} as Chain;
-
 const scaffoldConfig = {
-  targetNetworks: [mainnetFork],
-  isFork: true,  // handles forked network validation, else might show wrong network.
-  // ... other config options remain the same
+  targetNetworks: [chains.mainnetFork],
+  isFork: true,  // handles forked network validation
+  // ... other config options
 };
 ```
 
+3. Create a `.env` file from the `.env.example` template and configure it accordingly
+```
+NEXT_PUBLIC_PROVIDER_URL=http://127.0.0.1:5050
+```
+
 ## Wallet Configuration
 
 ### Using Argent/Braavos

From 5d47895864d23312cc1339024b726093d2076d7a Mon Sep 17 00:00:00 2001
From: Suhas Ghosal <63814211+suhas-sensei@users.noreply.github.com>
Date: Mon, 23 Dec 2024 19:29:00 +0000
Subject: [PATCH 6/6] typo

---
 docs/recipes/DevelopingOnFork.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/recipes/DevelopingOnFork.md b/docs/recipes/DevelopingOnFork.md
index 6103b98..09490ed 100644
--- a/docs/recipes/DevelopingOnFork.md
+++ b/docs/recipes/DevelopingOnFork.md
@@ -1,4 +1,3 @@
-```markdown
 # Developing on Fork
 
 This guide shows how to run and interact with a local fork of Starknet mainnet.