From 86a5b2b30c5d2a7f98fda601a8d93a0d127304fb Mon Sep 17 00:00:00 2001
From: hunter001 <zechariahconvenant@gmail.com>
Date: Sun, 6 Oct 2024 20:10:00 +0100
Subject: [PATCH 1/4] docs: add recipe for Read Contracts

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

diff --git a/docs/recipes/ReadContractDataFromNetwork.md b/docs/recipes/ReadContractDataFromNetwork.md
new file mode 100644
index 0000000..87220a8
--- /dev/null
+++ b/docs/recipes/ReadContractDataFromNetwork.md
@@ -0,0 +1,144 @@
+---
+sidebar_position: 6
+title: Read a uint from a contract
+description: Learn how to read from contract functions which accept arguments / no arguments and display them on UI.
+---
+
+# Read Data from a Contract on the Network
+
+This recipe demonstrates how to read data from a smart contract deployed on a network using the [`useScaffoldReadContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) hook. You will learn how to read contract data and display it in your dApp's UI.
+
+<details open><summary>Here is the full code, which we will be implementing in the guide below:</summary>
+
+```tsx title="components/GetContractData.tsx"
+import { useScaffoldReadContract } from "~~/hooks/scaffold-stark";
+import { useAccount } from "@starknet-react/core";
+
+export const ContractReader = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress], // Passing connected account as an argument
+  });
+
+  return (
+    <div className="bg-base-300 p-6 rounded-lg max-w-md mx-auto mt-6">
+      <h2 className="text-lg font-bold mb-2">Contract Data</h2>
+
+      {isLoading ? (
+        <span className="loading loading-spinner"></span>
+      ) : (
+        <div className="text-sm font-semibold">
+          Data: <span>{contractData ? contractData.toString() : "No data available"}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+```
+</details>
+
+## Implementation Guide
+
+### Step 1: Set Up the Component
+Start by creating a new component in your `component` folder of your application. This component will handle the reading of contract data and display it.
+
+```tsx title="components/GetContractData.tsx"
+export const ContractReader = () => {
+  return (
+    <div>
+      <h2>Contract Data</h2>
+    </div>
+  );
+};
+
+```
+
+### Step 2: Use the [`useScaffoldReactContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) Hook
+
+To read data from the contract, you will use the `useScaffoldReadContract` hook. This hook interacts with the contract, fetches data from a specific function, and can be configured to pass arguments (such as the connected user's account address).
+
+```tsx title="components/GetContractData.tsx"
+import { useScaffoldReadContract } from "~~/hooks/scaffold-stark";
+import { useAccount } from "@starknet-react/core";
+
+export const ContractReader = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress], // Passing connected account as an argument
+  });
+
+  return (
+    <div>
+      <h2>Contract Data</h2>
+      {isLoading ? <span>Loading...</span> : <p>{contractData}</p>}
+    </div>
+  );
+};
+```
+
+### Step 3: Display the Contract Data
+
+Once you've fetched the data from the contract, you can display it in the UI. You can check if the data is loading using the isLoading variable and render a spinner or message while the data is being retrieved.
+
+```tsx title="components/GetContractData.tsx"
+export const ContractReader = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress],
+  });
+
+  return (
+    <div>
+      <h2>Contract Data</h2>
+      {isLoading ? (
+        <span className="loading loading-spinner"></span>
+      ) : (
+        <p>{contractData ? contractData.toString() : "No data available"}</p>
+      )}
+    </div>
+  );
+};
+
+```
+
+### Step 4: Add Styling and Final Touches
+
+Enhance your component’s appearance with some basic styling to make the UI more user-friendly. You can also format the data and improve its readability.
+
+```tsx title="components/GetContractData.tsx"
+export const ContractReader = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress],
+  });
+
+  return (
+    <div className="bg-base-300 p-6 rounded-lg max-w-md mx-auto mt-6">
+      <h2 className="text-lg font-bold mb-2">Contract Data</h2>
+
+      {isLoading ? (
+        <span className="loading loading-spinner"></span>
+      ) : (
+        <div className="text-sm font-semibold">
+          Data: <span>{contractData ? contractData.toString() : "No data available"}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+By following this guide, you have successfully implemented a contract reader in your dApp that fetches and displays data from a deployed contract using the [`useScaffoldReactContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) hook.

From ccca8bca94dde9dbc69ddc083bbee31b0464f427 Mon Sep 17 00:00:00 2001
From: hunter001 <zechariahconvenant@gmail.com>
Date: Mon, 7 Oct 2024 08:49:49 +0100
Subject: [PATCH 2/4] fix: implement requested changes

---
 docs/recipes/ReadContractDataFromNetwork.md | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/docs/recipes/ReadContractDataFromNetwork.md b/docs/recipes/ReadContractDataFromNetwork.md
index 87220a8..8206d63 100644
--- a/docs/recipes/ReadContractDataFromNetwork.md
+++ b/docs/recipes/ReadContractDataFromNetwork.md
@@ -1,20 +1,21 @@
 ---
 sidebar_position: 6
-title: Read a uint from a contract
-description: Learn how to read from contract functions which accept arguments / no arguments and display them on UI.
+title: Read Data from a Contract
+description: Learn how to read data from a deployed smart contract using the useScaffoldReadContract hook and display it in your UI.
 ---
 
 # Read Data from a Contract on the Network
 
 This recipe demonstrates how to read data from a smart contract deployed on a network using the [`useScaffoldReadContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) hook. You will learn how to read contract data and display it in your dApp's UI.
 
-<details open><summary>Here is the full code, which we will be implementing in the guide below:</summary>
+<details open>
+<summary>Here is the full code, which we will be implementing in the guide below:</summary>
 
 ```tsx title="components/GetContractData.tsx"
 import { useScaffoldReadContract } from "~~/hooks/scaffold-stark";
 import { useAccount } from "@starknet-react/core";
 
-export const ContractReader = () => {
+export const GetContractData = () => {
   const { address: connectedAddress } = useAccount();
 
   const { data: contractData, isLoading } = useScaffoldReadContract({
@@ -41,7 +42,7 @@ export const ContractReader = () => {
 ```
 </details>
 
-## Implementation Guide
+## Implementation guide
 
 ### Step 1: Set Up the Component
 Start by creating a new component in your `component` folder of your application. This component will handle the reading of contract data and display it.
@@ -57,9 +58,9 @@ export const ContractReader = () => {
 
 ```
 
-### Step 2: Use the [`useScaffoldReactContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) Hook
+### Step 2: Use the `useScaffoldReadContract` Hook to read data
 
-To read data from the contract, you will use the `useScaffoldReadContract` hook. This hook interacts with the contract, fetches data from a specific function, and can be configured to pass arguments (such as the connected user's account address).
+To read data from the contract, you will use the [`useScaffoldReactContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) hook. This hook interacts with the contract, fetches data from a specific function, and can be configured to pass arguments (such as the connected user's account address).
 
 ```tsx title="components/GetContractData.tsx"
 import { useScaffoldReadContract } from "~~/hooks/scaffold-stark";
@@ -140,5 +141,3 @@ export const ContractReader = () => {
   );
 };
 ```
-
-By following this guide, you have successfully implemented a contract reader in your dApp that fetches and displays data from a deployed contract using the [`useScaffoldReactContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) hook.

From 394d237bbb5a3844a88d9b5fd4691df078f3c1a7 Mon Sep 17 00:00:00 2001
From: hunter001 <zechariahconvenant@gmail.com>
Date: Mon, 7 Oct 2024 16:43:32 +0100
Subject: [PATCH 3/4] fix: rename document

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

diff --git a/docs/recipes/ReadContractData.md b/docs/recipes/ReadContractData.md
new file mode 100644
index 0000000..93bdf75
--- /dev/null
+++ b/docs/recipes/ReadContractData.md
@@ -0,0 +1,145 @@
+---
+sidebar_position: 6
+title: Read Data from a Contract
+description: Learn how to read data from a deployed smart contract using the useScaffoldReadContract hook and display it in your UI.
+---
+
+# Read Data from a Contract on the Network
+
+This recipe demonstrates how to read data from a smart contract deployed on a network using the [`useScaffoldReadContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) hook. You will learn how to read contract data and display it in your dApp's UI.
+
+<details open>
+<summary>Here is the full code, which we will be implementing in the guide below:</summary>
+
+```tsx title="components/GetContractData.tsx"
+import { useScaffoldReadContract } from "~~/hooks/scaffold-stark";
+import { useAccount } from "@starknet-react/core";
+
+export const GetContractData = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress], // Passing connected account as an argument
+  });
+
+  return (
+    <div className="bg-base-300 p-6 rounded-lg max-w-md mx-auto mt-6">
+      <h2 className="text-lg font-bold mb-2">Contract Data</h2>
+
+      {isLoading ? (
+        <span className="loading loading-spinner"></span>
+      ) : (
+        <div className="text-sm font-semibold">
+          Data: <span>{contractData ? contractData.toString() : "No data available"}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+```
+</details>
+
+## Implementation guide
+
+### Step 1: Set Up the Component
+Start by creating a new component in your `component` folder of your application. This component will handle the reading of contract data and display it.
+
+```tsx title="components/GetContractData.tsx"
+export const ContractReader = () => {
+  return (
+    <div>
+      <h2>Contract Data</h2>
+    </div>
+  );
+};
+
+```
+
+### Step 2: Use the `useScaffoldReadContract` Hook to read data
+
+To read data from the contract, you will use the [`useScaffoldReactContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) hook. This hook interacts with the contract, fetches data from a specific function, and can be configured to pass arguments (such as the connected user's account address).
+
+```tsx title="components/GetContractData.tsx"
+import { useScaffoldReadContract } from "~~/hooks/scaffold-stark";
+import { useAccount } from "@starknet-react/core";
+
+export const ContractReader = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress], // Passing connected account as an argument
+  });
+
+  return (
+    <div>
+      <h2>Contract Data</h2>
+      {isLoading ? <span>Loading...</span> : <p>{contractData}</p>}
+    </div>
+  );
+};
+```
+
+### Step 3: Display the Contract Data
+
+Once you've fetched the data from the contract, you can display it in the UI. You can check if the data is loading using the isLoading variable and render a spinner or message while the data is being retrieved.
+
+```tsx title="components/GetContractData.tsx"
+export const ContractReader = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress],
+  });
+
+  return (
+    <div>
+      <h2>Contract Data</h2>
+      {isLoading ? (
+        <span className="loading loading-spinner"></span>
+      ) : (
+        <p>{contractData ? contractData.toString() : "No data available"}</p>
+      )}
+    </div>
+  );
+};
+
+```
+
+### Step 4: Add Styling and Final Touches
+
+Enhance your component’s appearance with some basic styling to make the UI more user-friendly. You can also format the data and improve its readability.
+
+```tsx title="components/GetContractData.tsx"
+export const ContractReader = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress],
+  });
+
+  return (
+    <div className="bg-base-300 p-6 rounded-lg max-w-md mx-auto mt-6">
+      <h2 className="text-lg font-bold mb-2">Contract Data</h2>
+
+      {isLoading ? (
+        <span className="loading loading-spinner"></span>
+      ) : (
+        <div className="text-sm font-semibold">
+          Data: <span>{contractData ? contractData.toString() : "No data available"}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+By following this guide, you have successfully implemented a contract reader in your dApp that fetches and displays data from a deployed contract using the [`useScaffoldReactContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) hook.

From b75dcdf8e08b9160e4f408ec7760491c61945597 Mon Sep 17 00:00:00 2001
From: hunter001 <zechariahconvenant@gmail.com>
Date: Tue, 8 Oct 2024 03:49:56 +0100
Subject: [PATCH 4/4] chore: rename file to align with file naming convention

---
 docs/recipes/read-contract-data.md | 145 +++++++++++++++++++++++++++++
 1 file changed, 145 insertions(+)
 create mode 100644 docs/recipes/read-contract-data.md

diff --git a/docs/recipes/read-contract-data.md b/docs/recipes/read-contract-data.md
new file mode 100644
index 0000000..93bdf75
--- /dev/null
+++ b/docs/recipes/read-contract-data.md
@@ -0,0 +1,145 @@
+---
+sidebar_position: 6
+title: Read Data from a Contract
+description: Learn how to read data from a deployed smart contract using the useScaffoldReadContract hook and display it in your UI.
+---
+
+# Read Data from a Contract on the Network
+
+This recipe demonstrates how to read data from a smart contract deployed on a network using the [`useScaffoldReadContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) hook. You will learn how to read contract data and display it in your dApp's UI.
+
+<details open>
+<summary>Here is the full code, which we will be implementing in the guide below:</summary>
+
+```tsx title="components/GetContractData.tsx"
+import { useScaffoldReadContract } from "~~/hooks/scaffold-stark";
+import { useAccount } from "@starknet-react/core";
+
+export const GetContractData = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress], // Passing connected account as an argument
+  });
+
+  return (
+    <div className="bg-base-300 p-6 rounded-lg max-w-md mx-auto mt-6">
+      <h2 className="text-lg font-bold mb-2">Contract Data</h2>
+
+      {isLoading ? (
+        <span className="loading loading-spinner"></span>
+      ) : (
+        <div className="text-sm font-semibold">
+          Data: <span>{contractData ? contractData.toString() : "No data available"}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+```
+</details>
+
+## Implementation guide
+
+### Step 1: Set Up the Component
+Start by creating a new component in your `component` folder of your application. This component will handle the reading of contract data and display it.
+
+```tsx title="components/GetContractData.tsx"
+export const ContractReader = () => {
+  return (
+    <div>
+      <h2>Contract Data</h2>
+    </div>
+  );
+};
+
+```
+
+### Step 2: Use the `useScaffoldReadContract` Hook to read data
+
+To read data from the contract, you will use the [`useScaffoldReactContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) hook. This hook interacts with the contract, fetches data from a specific function, and can be configured to pass arguments (such as the connected user's account address).
+
+```tsx title="components/GetContractData.tsx"
+import { useScaffoldReadContract } from "~~/hooks/scaffold-stark";
+import { useAccount } from "@starknet-react/core";
+
+export const ContractReader = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress], // Passing connected account as an argument
+  });
+
+  return (
+    <div>
+      <h2>Contract Data</h2>
+      {isLoading ? <span>Loading...</span> : <p>{contractData}</p>}
+    </div>
+  );
+};
+```
+
+### Step 3: Display the Contract Data
+
+Once you've fetched the data from the contract, you can display it in the UI. You can check if the data is loading using the isLoading variable and render a spinner or message while the data is being retrieved.
+
+```tsx title="components/GetContractData.tsx"
+export const ContractReader = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress],
+  });
+
+  return (
+    <div>
+      <h2>Contract Data</h2>
+      {isLoading ? (
+        <span className="loading loading-spinner"></span>
+      ) : (
+        <p>{contractData ? contractData.toString() : "No data available"}</p>
+      )}
+    </div>
+  );
+};
+
+```
+
+### Step 4: Add Styling and Final Touches
+
+Enhance your component’s appearance with some basic styling to make the UI more user-friendly. You can also format the data and improve its readability.
+
+```tsx title="components/GetContractData.tsx"
+export const ContractReader = () => {
+  const { address: connectedAddress } = useAccount();
+
+  const { data: contractData, isLoading } = useScaffoldReadContract({
+    contractName: "YourContract",
+    functionName: "yourFunction",
+    args: [connectedAddress],
+  });
+
+  return (
+    <div className="bg-base-300 p-6 rounded-lg max-w-md mx-auto mt-6">
+      <h2 className="text-lg font-bold mb-2">Contract Data</h2>
+
+      {isLoading ? (
+        <span className="loading loading-spinner"></span>
+      ) : (
+        <div className="text-sm font-semibold">
+          Data: <span>{contractData ? contractData.toString() : "No data available"}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+By following this guide, you have successfully implemented a contract reader in your dApp that fetches and displays data from a deployed contract using the [`useScaffoldReactContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldReadContract.ts) hook.