+ );
+};
```
diff --git a/docs/recipes/ReadUintFromContract.md b/docs/recipes/ReadUintFromContract.md
index 6d733c6..5bb6252 100644
--- a/docs/recipes/ReadUintFromContract.md
+++ b/docs/recipes/ReadUintFromContract.md
@@ -6,51 +6,57 @@ description: Learn how to read from contract functions which accept arguments /
# Read a `uint` from a contract
-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.
+This recipe demonstrates how to read data from contract functions and display it on the UI. We'll showcase an example that accepts arguments (parameters) and another with no arguments at all.
-Here is the full code, which we will be implementing in the guide below:
+Here is the full code, which we will implement in the guide below:
-```tsx title="components/GreetingsCount.tsx"
-import { useAccount } from "@starknet-react/core";
+```tsx title="components/Greetings.tsx"
+"use client";
+
+import { useScaffoldContract } from "~~/hooks/scaffold-stark/useScaffoldContract";
import { useScaffoldReadContract } from "~~/hooks/scaffold-stark/useScaffoldReadContract";
-export const GreetingsCount = () => {
- const { account: connectedAddress } = useAccount();
+const Greetings = () => {
+ const { data: YourContract } = useScaffoldContract({ contractName: "YourContract" });
- const { data: totalCounter, isLoading: isTotalCounterLoading } = useScaffoldReadContract({
+ const { data: currentGreeting, isLoading: isCurrentGreetingLoading } = useScaffoldReadContract({
contractName: "YourContract",
- functionName: "totalCounter",
+ functionName: "greeting",
});
- const { data: connectedAddressCounter, isLoading: isConnectedAddressCounterLoading } = useScaffoldReadContract({
- contractName: "YourContract",
- functionName: "userGreetingCounter",
- args: [connectedAddress], // passing args to function
+ const { data: ethBalance, isLoading: isEthBalanceLoading } = useScaffoldReadContract({
+ contractName: "Eth",
+ functionName: "balance_of",
+ args: [YourContract?.address],
});
return (
-
-
-
Greetings Count
-
-
Total Greetings count:
- {isTotalCounterLoading ? (
+
+
+
Greetings
+
+
Balance ETH in YourContract:
+ {isEthBalanceLoading ? (
) : (
-
{totalCounter ? totalCounter.toString() : 0}
+
{ethBalance ? (Number(ethBalance) / 10 ** 18).toFixed(6) : "0.000000"} ETH
{currentGreeting ? currentGreeting.toString() : "No greeting"}
)}
);
};
+
+export default Greetings;
```
@@ -59,137 +65,118 @@ export const GreetingsCount = () => {
### Step 1: Create a new Component
-Begin by creating a new component in the "components" folder of your application.
+Begin by creating a new component in the `components` folder of your application.
-```tsx title="components/GreetingsCount.tsx"
-export const GreetingsCount = () => {
+```tsx title="components/Greetings.tsx"
+const Greetings = () => {
return (
-
Total Greetings count:
-
Your Greetings count:
+
Balance ETH in YourContract:
+
New Greeting:
);
};
+export default Greetings;
```
-### Step 2: Retrieve total greetings count
+### Step 2: Retrieve New Greetings
-Initialize the [useScaffoldReadContract](/hooks/useScaffoldReadContract) hook to read from the contract. This hook provides the `data` which contains the return value of the function.
+Initialize the [`useScaffoldReadContract`](/hooks/useScaffoldReadContract) hook to read from the contract. This hook provides the `data` which contains the return value of the function.
-```tsx title="components/GreetingsCount.tsx"
+```tsx title="components/Greetings.tsx"
import { useScaffoldReadContract } from "~~/hooks/scaffold-stark/useScaffoldReadContract";
-// highlight-end
-export const GreetingsCount = () => {
- // highlight-start
- const { data: totalCounter } = useScaffoldReadContract({
+const Greetings = () => {
+ const { data: currentGreeting } = useScaffoldReadContract({
contractName: "YourContract",
- functionName: "totalCounter",
+ functionName: "greeting",
});
- // highlight-end
return (
-
Total Greetings count:
- //highlight-start
-
{totalCounter ? totalCounter.toString() : 0}
- //highlight-end
-
Your Greetings count:
+
New Greeting:
+
{currentGreeting ? currentGreeting.toString() : "No greeting"}
);
};
```
-In the line `const {data: totalCounter} = useScaffoldReadContract({...})` we are using [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to assign `data` to a new name `totalCounter`.
+In the line `const {data: currentGreeting} = useScaffoldReadContract({...})`, we use [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to extract the `data` field and rename it as `currentGreeting`.
-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()`.
+The contract function returns a `uint`, which is represented as a [`BigInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) in JavaScript. You can convert it to a readable string using `.toString()`.
-### Step 3: Retrieve connected address greetings count
+### Step 3: Retrieve ETH Balance in YourContract
-We can get the connected address using the [useAccount](https://starknet-react.com/hooks/account/useaccount) hook and pass it to `args` key in the `useScaffoldReadContract` hook configuration. This will be used as an argument to read the contract function.
+We can retrieve the ETH balance of the contract by first getting its address using `useScaffoldContract`. Then, we pass this address as an argument (`args`) to `useScaffoldReadContract`, which will call the contract function.
-```tsx title="components/GreetingsCount.tsx"
-import { useScaffoldReadContract } from "~~/hooks/scaffold-stark";
-//highlight-start
-import { useAccount } from "@starknet-react/core";
-//highlight-end
+```tsx title="components/Greetings.tsx"
+import { useScaffoldContract } from "~~/hooks/scaffold-stark/useScaffoldContract";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-stark/useScaffoldReadContract";
-export const GreetingsCount = () => {
- //highlight-start
- const { account: connectedAddress } = useAccount();
- //highlight-end
+const Greetings = () => {
+ const { data: YourContract } = useScaffoldContract({ contractName: "YourContract" });
- const { data: totalCounter } = useScaffoldReadContract({
- contractName: "YourContract",
- functionName: "totalCounter",
+ const { data: ethBalance } = useScaffoldReadContract({
+ contractName: "Eth",
+ functionName: "balance_of",
+ args: [YourContract?.address],
});
- //highlight-start
- const { data: connectedAddressCounter } = useScaffoldReadContract({
- contractName: "YourContract",
- functionName: "userGreetingCounter",
- args: [connectedAddress], // passing args to function
- });
- //highlight-end
-
return (
);
};
+
+export default SetGreeting;
```
@@ -58,158 +56,141 @@ export const SetName = () => {
### Step 1: Set Up Your Component
-Create a new component in the "components" folder. The component will show a button that will allow users to interact with your smart contract.
+Create a new component in the `components` folder. This component will display an input field and a button to interact with your smart contract.
```tsx title="components/ContractInteraction.tsx"
-export const SetName = () => {
+"use client";
+
+const SetGreeting = () => {
return (
- <>
-
-
-
+