From 664823beca6341bfa7de4610cd14858ec62b7061 Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Mon, 1 Jan 2024 23:05:14 +0530 Subject: [PATCH 01/11] add initial iteration for read unit from contract recipe --- docs/recipes/ReadUintFromContract.md | 197 +++++++++++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 docs/recipes/ReadUintFromContract.md diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md new file mode 100644 index 0000000..d51bb16 --- /dev/null +++ b/docs/recipes/ReadUintFromContract.md @@ -0,0 +1,197 @@ +--- +sidebar_position: 3 +title: Read a uint from a contract +description: Learn how to read from contract functions which accepts arguments / no arguments and display them on UI. +--- + +This recipe demonstrates how to read data from contract functions that accepts some arguments / no arguments and display it on the UI. + +
+Here is the full code, which we will be implementing in the guide below: + +```tsx title="components/GreetingsCount.tsx" +import { useAccount } from "wagmi"; +import { useScaffoldContractRead } from "~~/hooks/scaffold-eth"; + +export const GreetingsCount = () => { + const { address: connectedAddress } = useAccount(); + + const { data: totalCounter, isLoading: isTotalCounterLoading } = useScaffoldContractRead({ + contractName: "YourContract", + functionName: "totalCounter", + watch: true, + }); + + const { data: connectedAddressCounter, isLoading: isConnectedAddressCounterLoading } = useScaffoldContractRead({ + contractName: "YourContract", + functionName: "userGreetingCounter", + args: [connectedAddress], // passing args to function + watch: true, + }); + + return ( +
+
+

Greetings Count

+
+

Total Greetings count:

+ {isTotalCounterLoading ? ( + + ) : ( +

{totalCounter ? totalCounter.toString() : 0}

+ )} +

Your Greetings count:

+ {isConnectedAddressCounterLoading ? ( + + ) : ( +

{connectedAddressCounter ? connectedAddressCounter.toString() : 0}

+ )} +
+
+
+ ); +}; +``` + +
+ +## Implementation guide + +### Step 1: Create a new Component + +Begin by creating a new component in the "components" folder of your application. + +```tsx title="components/GreetingsCount.tsx" +export const GreetingsCount = () => { + return ( +
+

Total Greetings count:

+

Your Greetings count:

+
+ ); +}; +``` + +### Step 2: Retrieve total greetings count + +Initialize the [useScaffoldContractRead](/hooks/scaffold-eth#usescaffoldcontractread) hook to read from contract. This hook provides the `data` which contains the return value of the function. + +```tsx title="components/GreetingsCount.tsx" +//highlight-start +import { useScaffoldContractRead } from "~~/hooks/scaffold-eth"; +// highlight-end + +export const GreetingsCount = () => { + // highlight-start + const { data: totalCounter } = useScaffoldContractRead({ + contractName: "YourContract", + functionName: "totalCounter", + watch: true, + }); + // highlight-end + + return ( +
+

Total Greetings count:

+ //highlight-start +

{totalCounter ? totalCounter.toString() : 0}

+ //highlight-end +

Your Greetings count:

+
+ ); +}; +``` + +`const {data: totalCounter} = useScaffoldContractRead({...})` here we are using [destructuring asssignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to assign `data` to new name `totalCounter`. + +`totalCounter` in contract returns an `uint` value, which is represented as [`BigInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) in javascript and can be converted to readable string using `.toString()`. + +### Step 3: Retrieve connected address greetings count + +We can access connected address using [useAccount](https://wagmi.sh/react/hooks/useAccount) hook and pass it to `args` key in `useScaffoldContractRead` hooks configuration which will be used as an argument to the read contract function. + +```tsx title="components/GreetingsCount.tsx" +import { useScaffoldContractRead } from "~~/hooks/scaffold-eth"; +//highlight-start +import { useAccount } from "wagmi"; +//highlight-end + +export const GreetingsCount = () => { + //highlight-start + const { address: connectedAddress } = useAccount(); + //highlight-end + + const { data: totalCounter } = useScaffoldContractRead({ + contractName: "YourContract", + functionName: "totalCounter", + watch: true, + }); + + //highlight-start + const { data: connectedAddressCounter } = useScaffoldContractRead({ + contractName: "YourContract", + functionName: "userGreetingCounter", + args: [connectedAddress], // passing args to function + watch: true, + }); + //highlight-end + + return ( +
+

Total Greetings count:

+

{totalCounter ? totalCounter.toString() : 0}

+

Your Greetings count:

+ //highlight-start +

{connectedAddressCounter ? connectedAddressCounter.toString() : 0}

+ //highlight-end +
+ ); +}; +``` + +### Step 4: Bonus adding loading state + +We can use `isLoading` returned from [`useScaffoldContractRead`](/hooks/scaffold-eth#usescaffoldcontractread) which is set to `true` while fetching the data from contract. + +```tsx title="components/GreetingsCount.tsx" +import { useScaffoldContractRead } from "~~/hooks/scaffold-eth"; +import { useAccount } from "wagmi"; + +export const GreetingsCount = () => { + const { address: connectedAddress } = useAccount(); + + // highlight-start + const { data: totalCounter, isLoading: isTotalCounterLoading } = useScaffoldContractRead({ + // highlight-end + contractName: "YourContract", + functionName: "totalCounter", + watch: true, + }); + + // highlight-start + const { data: connectedAddressCounter, isLoading: isConnectedAddressCounterLoading } = useScaffoldContractRead({ + // highlight-end + contractName: "YourContract", + functionName: "userGreetingCounter", + args: [connectedAddress], // passing args to function + watch: true, + }); + + return ( +
+

Total Greetings count:

+ // highlight-start + {isTotalCounterLoading ? "Loading..." :

{totalCounter ? totalCounter.toString() : 0}

} + // highlight-end +

Your Greetings count:

+ // highlight-start + {isConnectedAddressCounterLoading ? ( + "Loading..." + ) : ( +

{connectedAddressCounter ? connectedAddressCounter.toString() : 0}

+ )} + // highlight-end +
+ ); +}; +``` From 3bcaae3b6fc5ee6b69de9552ec53e83a5a9d2a99 Mon Sep 17 00:00:00 2001 From: "Shiv Bhonde | shivbhonde.eth" Date: Tue, 2 Jan 2024 14:24:35 +0530 Subject: [PATCH 02/11] update starting description Co-authored-by: Eda Akturk --- docs/recipes/ReadUintFromContract.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md index d51bb16..40ec9f7 100644 --- a/docs/recipes/ReadUintFromContract.md +++ b/docs/recipes/ReadUintFromContract.md @@ -4,7 +4,7 @@ title: Read a uint from a contract description: Learn how to read from contract functions which accepts arguments / no arguments and display them on UI. --- -This recipe demonstrates how to read data from contract functions that accepts some arguments / no arguments and display it on the UI. +This recipe demonstrates how to read data from contract functions that accept some arguments (parameters) or no arguments at all and displays it on the UI.
Here is the full code, which we will be implementing in the guide below: From 9e7a62fe84e9dbb870454ca8c1b365fda479c3b3 Mon Sep 17 00:00:00 2001 From: "Shiv Bhonde | shivbhonde.eth" Date: Tue, 2 Jan 2024 14:26:19 +0530 Subject: [PATCH 03/11] update step 2 description Co-authored-by: Eda Akturk --- docs/recipes/ReadUintFromContract.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md index 40ec9f7..ab5991f 100644 --- a/docs/recipes/ReadUintFromContract.md +++ b/docs/recipes/ReadUintFromContract.md @@ -74,7 +74,7 @@ export const GreetingsCount = () => { ### Step 2: Retrieve total greetings count -Initialize the [useScaffoldContractRead](/hooks/scaffold-eth#usescaffoldcontractread) hook to read from contract. This hook provides the `data` which contains the return value of the function. +Initialize the [useScaffoldContractRead](/hooks/scaffold-eth#usescaffoldcontractread) hook to read from the contract. This hook provides the `data` which contains the return value of the function. ```tsx title="components/GreetingsCount.tsx" //highlight-start From 66ceb438cfbcd88b0f5cabf974f89ea0ccc7d3d6 Mon Sep 17 00:00:00 2001 From: "Shiv Bhonde | shivbhonde.eth" Date: Tue, 2 Jan 2024 14:27:20 +0530 Subject: [PATCH 04/11] improve step 2 note 1 wordings Co-authored-by: Eda Akturk --- docs/recipes/ReadUintFromContract.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md index ab5991f..4a26228 100644 --- a/docs/recipes/ReadUintFromContract.md +++ b/docs/recipes/ReadUintFromContract.md @@ -102,7 +102,7 @@ export const GreetingsCount = () => { }; ``` -`const {data: totalCounter} = useScaffoldContractRead({...})` here we are using [destructuring asssignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to assign `data` to new name `totalCounter`. +In the line `const {data: totalCounter} = useScaffoldContractRead({...})` we are using [destructuring asssignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to assign `data` to a new name `totalCounter`. `totalCounter` in contract returns an `uint` value, which is represented as [`BigInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) in javascript and can be converted to readable string using `.toString()`. From bd5da5f98534eb7eec3830dd2d608f6133cf38a7 Mon Sep 17 00:00:00 2001 From: "Shiv Bhonde | shivbhonde.eth" Date: Tue, 2 Jan 2024 14:27:35 +0530 Subject: [PATCH 05/11] improve step 2 note 2 wordings Co-authored-by: Eda Akturk --- docs/recipes/ReadUintFromContract.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md index 4a26228..f2b5e8f 100644 --- a/docs/recipes/ReadUintFromContract.md +++ b/docs/recipes/ReadUintFromContract.md @@ -104,7 +104,7 @@ export const GreetingsCount = () => { In the line `const {data: totalCounter} = useScaffoldContractRead({...})` we are using [destructuring asssignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to assign `data` to a new name `totalCounter`. -`totalCounter` in contract returns an `uint` value, which is represented as [`BigInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) in javascript and can be converted to readable string using `.toString()`. +In the contract, `totalCounter` returns an `uint` value, which is represented as a [`BigInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) in javascript and can be converted to a readable string using `.toString()`. ### Step 3: Retrieve connected address greetings count From 61594a6129ebe00e8b716cef85e32a9d25f36f32 Mon Sep 17 00:00:00 2001 From: "Shiv Bhonde | shivbhonde.eth" Date: Tue, 2 Jan 2024 14:30:48 +0530 Subject: [PATCH 06/11] improve step 4 description Co-authored-by: Eda Akturk --- docs/recipes/ReadUintFromContract.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md index f2b5e8f..298234d 100644 --- a/docs/recipes/ReadUintFromContract.md +++ b/docs/recipes/ReadUintFromContract.md @@ -151,7 +151,7 @@ export const GreetingsCount = () => { ### Step 4: Bonus adding loading state -We can use `isLoading` returned from [`useScaffoldContractRead`](/hooks/scaffold-eth#usescaffoldcontractread) which is set to `true` while fetching the data from contract. +We can use `isLoading` returned from the [`useScaffoldContractRead`](/hooks/scaffold-eth#usescaffoldcontractread) hook. This variable is set to `true` while fetching data from the contract. ```tsx title="components/GreetingsCount.tsx" import { useScaffoldContractRead } from "~~/hooks/scaffold-eth"; From 77690fe10d3a712ad431b6c1db6a1fd28ec640fc Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Tue, 2 Jan 2024 14:34:23 +0530 Subject: [PATCH 07/11] imporve step 3 descripition --- docs/recipes/ReadUintFromContract.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md index 298234d..66fe4c6 100644 --- a/docs/recipes/ReadUintFromContract.md +++ b/docs/recipes/ReadUintFromContract.md @@ -108,7 +108,7 @@ In the contract, `totalCounter` returns an `uint` value, which is represented as ### Step 3: Retrieve connected address greetings count -We can access connected address using [useAccount](https://wagmi.sh/react/hooks/useAccount) hook and pass it to `args` key in `useScaffoldContractRead` hooks configuration which will be used as an argument to the read contract function. +We can get the connected address using the [useAccount](https://wagmi.sh/react/hooks/useAccount) hook and pass it to `args` key in the `useScaffoldContractRead` hooks configuration. This will be used as an argument to read the contract function. ```tsx title="components/GreetingsCount.tsx" import { useScaffoldContractRead } from "~~/hooks/scaffold-eth"; From 831f768fa7dc24ca258d7c2aaeb14c72e8643337 Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Tue, 2 Jan 2024 19:57:58 +0530 Subject: [PATCH 08/11] add h1 title to recipe --- docs/recipes/ReadUintFromContract.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md index 66fe4c6..a0111bb 100644 --- a/docs/recipes/ReadUintFromContract.md +++ b/docs/recipes/ReadUintFromContract.md @@ -4,6 +4,8 @@ title: Read a uint from a contract description: Learn how to read from contract functions which accepts arguments / no arguments and display them on UI. --- +# Read a `uint` from a contract + This recipe demonstrates how to read data from contract functions that accept some arguments (parameters) or no arguments at all and displays it on the UI.
From c1c6a7fc789bd884415db2e8d271bfc5f63e2592 Mon Sep 17 00:00:00 2001 From: "Shiv Bhonde | shivbhonde.eth" Date: Tue, 2 Jan 2024 20:00:41 +0530 Subject: [PATCH 09/11] fix link to useScaffoldContractRead Co-authored-by: Pablo Alayeto <55535804+Pabl0cks@users.noreply.github.com> --- docs/recipes/ReadUintFromContract.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md index a0111bb..2e00acf 100644 --- a/docs/recipes/ReadUintFromContract.md +++ b/docs/recipes/ReadUintFromContract.md @@ -76,7 +76,7 @@ export const GreetingsCount = () => { ### Step 2: Retrieve total greetings count -Initialize the [useScaffoldContractRead](/hooks/scaffold-eth#usescaffoldcontractread) hook to read from the contract. This hook provides the `data` which contains the return value of the function. +Initialize the [useScaffoldContractRead](/hooks/useScaffoldContractRead) hook to read from the contract. This hook provides the `data` which contains the return value of the function. ```tsx title="components/GreetingsCount.tsx" //highlight-start From 501f0ca22978011a8088ef7c860823ef5137043d Mon Sep 17 00:00:00 2001 From: "Shiv Bhonde | shivbhonde.eth" Date: Tue, 2 Jan 2024 20:05:25 +0530 Subject: [PATCH 10/11] fix hooks -> hook at step 3 Co-authored-by: Pablo Alayeto <55535804+Pabl0cks@users.noreply.github.com> --- docs/recipes/ReadUintFromContract.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md index 2e00acf..0203f46 100644 --- a/docs/recipes/ReadUintFromContract.md +++ b/docs/recipes/ReadUintFromContract.md @@ -110,7 +110,7 @@ In the contract, `totalCounter` returns an `uint` value, which is represented as ### Step 3: Retrieve connected address greetings count -We can get the connected address using the [useAccount](https://wagmi.sh/react/hooks/useAccount) hook and pass it to `args` key in the `useScaffoldContractRead` hooks configuration. This will be used as an argument to read the contract function. +We can get the connected address using the [useAccount](https://wagmi.sh/react/hooks/useAccount) hook and pass it to `args` key in the `useScaffoldContractRead` hook configuration. This will be used as an argument to read the contract function. ```tsx title="components/GreetingsCount.tsx" import { useScaffoldContractRead } from "~~/hooks/scaffold-eth"; From ebdfa4d3d51cf3ed98d64b0e2866317f26b207cd Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Tue, 2 Jan 2024 20:10:44 +0530 Subject: [PATCH 11/11] update recipe description --- docs/recipes/ReadUintFromContract.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md index 0203f46..4cb56fe 100644 --- a/docs/recipes/ReadUintFromContract.md +++ b/docs/recipes/ReadUintFromContract.md @@ -6,7 +6,7 @@ description: Learn how to read from contract functions which accepts arguments / # Read a `uint` from a contract -This recipe demonstrates how to read data from contract functions that accept some arguments (parameters) or no arguments at all and displays it on the UI. +This recipe demonstrates how to read data from contract functions and display it on the UI. We'll showcase an example that accepts some arguments (parameters), and another with no arguments at all.
Here is the full code, which we will be implementing in the guide below: