add separate externalContracts section tweaks (#74)

scaffold-eth · Jul 24, 2024 · 4752572 · 4752572
1 parent e3d84b3
commit 4752572
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 34 deletions.
diff --git a/docs/contributing/contributing.md b/docs/contributing/contributing.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 7
+sidebar_position: 9
 ---
 
 # 🙏 Contributing to Scaffold-ETH 2

diff --git a/docs/deploying/_category_.json b/docs/deploying/_category_.json
@@ -1,6 +1,6 @@
 {
   "label": "🛳 Shipping Your dApp",
-  "position": 5,
+  "position": 7,
   "link": {
     "type": "generated-index",
     "slug": "deploying",

diff --git a/docs/disable-type-linting-error-checks.md b/docs/disable-type-linting-error-checks.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 8
 ---
 
 # ✅ Disabling Type and Linting Error Checks

diff --git a/docs/external-contracts/external-contracts.md b/docs/external-contracts/external-contracts.md
@@ -0,0 +1,36 @@
+---
+sidebar_position: 5
+---
+
+# 📡 Interacting with External Contracts
+
+If you need to interact with external contracts (i.e. not deployed with your SE-2 instance, e.g [`DAI`](https://etherscan.io/token/0x6b175474e89094c44da98b954eedeac495271d0f#code) contract) you can add external contract data to your `packages/nextjs/contracts/externalContracts.ts` file, which would let you use Scaffold-ETH 2 [custom hooks](/hooks).
+
+To achieve this, include the contract name, its `address`, and `abi` in `externalContracts.ts` for each chain ID. Ensure to update the [`targetNetworks`](/deploying/deploy-nextjs-app#--targetnetworks) in `scaffold.config.ts` to your preferred chains to enable hooks typescript autocompletion.
+
+This is the structure of `externalContracts` object:
+
+```ts
+const externalContracts = {
+  1: {
+    DAI: {
+      address: "0x...",
+      abi: [...],
+    },
+    WETH: {
+      address: "0x...",
+      abi: [...],
+    },
+  },
+  5: {
+    DAI: {
+      address: "0x...",
+      abi: [...],
+    },
+    WETH: {
+      address: "0x...",
+      abi: [...],
+    },
+  },
+} as const;
+```
diff --git a/docs/hooks/hooks.md b/docs/hooks/hooks.md
@@ -6,36 +6,18 @@ sidebar_position: 4
 
 Scaffold-ETH 2 provides a collection of custom React hooks designed to simplify interactions with your deployed smart contracts. These hooks are wrappers around Wagmi, an easy-to-use interface with typescript autocompletions for reading from, writing to, and monitoring events emitted by your smart contracts.
 
-If you need to interact with external contracts (i.e. not deployed with your SE-2 instance) you can add external contract data to your `packages/nextjs/contracts/externalContracts.ts` file, which would let you use Scaffold-ETH 2 hooks.
-
-To achieve this, include the contract name, its `address`, and `abi` in `externalContracts.ts` for each chain ID. Ensure to update the [`targetNetworks`](/deploying/deploy-nextjs-app#--targetnetworks) in `scaffold.config.ts` to your preferred chains to enable hooks typescript autocompletion.
-
-This is the structure of `externalContracts` object:
-
-```ts
-const externalContracts = {
-  1: {
-    DAI: {
-      address: "0x...",
-      abi: [...],
-    },
-    WETH: {
-      address: "0x...",
-      abi: [...],
-    },
-  },
-  5: {
-    DAI: {
-      address: "0x...",
-      abi: [...],
-    },
-    WETH: {
-      address: "0x...",
-      abi: [...],
-    },
-  },
-} as const;
-```
+To ensure autocompletions function correctly, always update the [`targetNetworks` ](/deploying/deploy-nextjs-app#--targetnetworks) in `scaffold.config.ts` to include the relevant network/chain whenever you deploy your contract using [`yarn deploy --network`](/deploying/deploy-smart-contracts#3-deploy-your-smart-contracts).
+
+:::info
+The custom hooks rely on three main files for their functionality and TypeScript autocompletion:
+
+- `packages/nextjs/contracts/deployedContracts.ts`
+- [`packages/nextjs/contracts/externalContracts.ts`](/external-contracts)
+- `scaffold.config.ts`
+
+The `deployedContracts.ts` file is auto-generated/updated whenever you run `yarn deploy --network`. It organizes contract addresses and abi's based on chainId.
+
+:::
 
 :::note
 

diff --git a/docs/hooks/useScaffoldWatchContractEvent.md b/docs/hooks/useScaffoldWatchContractEvent.md
@@ -26,6 +26,10 @@ This example subscribes to the `GreetingChange` event emitted by the `YourContra
 
 This hook is a wrapper around wagmi's [useWatchContractEvent](https://wagmi.sh/react/api/hooks/useWatchContractEvent).
 
+:::note
+Due to shortcomings of some RPC providers, this hook may or may not fire events always [checkout this discussion](https://github.com/wevm/wagmi/issues/3883) for more details. To update the RPC link checkout [this section](/deploying/deploy-nextjs-app#--alchemyapikey)
+:::
+
 ## Configuration
 
 | Parameter        | Type       | Description                                                                                                                                                                                                                                                                                                                                                                           |

diff --git a/docs/recipes/_category_.json b/docs/recipes/_category_.json
@@ -1,6 +1,6 @@
 {
   "label": "🧪 Recipes",
-  "position": 4,
+  "position": 6,
   "link": {
     "type": "generated-index",
     "slug": "recipes",