From 4752572a57606376033fdc4e2d60e397e1249fb0 Mon Sep 17 00:00:00 2001 From: "Shiv Bhonde | shivbhonde.eth" Date: Wed, 24 Jul 2024 10:14:39 +0900 Subject: [PATCH] add separate externalContracts section tweaks (#74) --- docs/contributing/contributing.md | 2 +- docs/deploying/_category_.json | 2 +- docs/disable-type-linting-error-checks.md | 2 +- docs/external-contracts/external-contracts.md | 36 ++++++++++++++++ docs/hooks/hooks.md | 42 ++++++------------- docs/hooks/useScaffoldWatchContractEvent.md | 4 ++ docs/recipes/_category_.json | 2 +- 7 files changed, 56 insertions(+), 34 deletions(-) create mode 100644 docs/external-contracts/external-contracts.md diff --git a/docs/contributing/contributing.md b/docs/contributing/contributing.md index fad7bf7..3defc98 100644 --- 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 index b959244..c991b5f 100644 --- 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 index 50d3a12..d9bdce9 100644 --- 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 new file mode 100644 index 0000000..8504a3c --- /dev/null +++ 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 index c5d513a..39ae47a 100644 --- 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 index 54b14f2..96f36d6 100644 --- 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 index 8ba59eb..b77eccf 100644 --- 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",