diff --git a/docs/components/Balance.md b/docs/components/Balance.md
index 077ba8c..8048ec9 100644
--- a/docs/components/Balance.md
+++ b/docs/components/Balance.md
@@ -4,7 +4,13 @@ sidebar_position: 2
# Balance
-Displays the balance of a given address in both ether (ETH) and US dollars (USD).
+The `Balance` component displays the balance of a given Ethereum (ETH) or Starknet (STRK) address in both its native currency and US dollars (USD). It allows toggling between these two modes and also handles potential errors or loading states.
+
+## Features
+
+- **ETH & STRK Balances:** Shows both Ethereum and Starknet balances for a given address.
+- **USD Conversion:** Option to toggle and display balance in USD, provided the exchange rates are available.
+- **Error & Loading States:** Handles network issues, loading delays, and empty address scenarios gracefully.
@@ -26,3 +32,25 @@ import { Balance } from "~~/components/scaffold-stark";
| ------------------------ | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- |
| **address** | `string` | `undefined` | Address in `0x___` format, it will resolve its Starknet Domain if it has one associated(coming soon). |
| **className** (optional) | `string` | `""` | Prop to pass additional CSS styling to the component. You can use Tailwind / daisyUI classes like `text-3xl` for styling. |
+| **usdMode** (optional) | `boolean` | `false` | If true, the balance is displayed in USD. Otherwise, it defaults to ETH/STRK. |
+
+
+## Example
+
+The `Balance` component can be easily customized using Tailwind or daisyUI classes. Here’s a more detailed example of its usage:
+
+```tsx
+
+```
+
+This example showcases how to apply additional styling to the component and enables the USD display mode.
+
+
+:::info
+- The component automatically handles loading states, showing a skeleton loader when the balance is being fetched.
+- If the address is invalid or no balance is found, it will show an error message.
+:::
\ No newline at end of file
diff --git a/docs/deploying/deploy-faucets.mdx b/docs/deploying/deploy-faucets.mdx
new file mode 100644
index 0000000..2996954
--- /dev/null
+++ b/docs/deploying/deploy-faucets.mdx
@@ -0,0 +1,45 @@
+---
+sidebar_position: 3
+toc_max_heading_level: 5
+---
+
+# Faucets
+
+Faucets for deployment of smart contracts can be requested from the website.
+
+- The button is at the bottom left of the [Demo app](https://scaffold-stark-demo.vercel.app/)
+
+
+
+
+ - On clicking on it, You will get a pop up
+
+
+
+
+## Starknet Sepolia faucets
+
+You can get your faucets in the following websites :
+
+- [Starknet Foundation](https://starknet-faucet.vercel.app/)
+
+- [Alchemy](https://www.alchemy.com/faucets/starknet-sepolia)
+
+- [Blast](https://blastapi.io/faucets/starknet-sepolia-eth)
+
+
+## Devnet Faucets
+
+- To mint tokens, either to an existing address or a new one, use the following command:
+
+```
+curl -d '{"amount":1000000000000000000, "address":"0x064b48806902a367c8598f4f95c305e8c1a1acba5f082d294a43793113115691"}' -H "Content-Type: application/json" -X POST http://localhost:5050/mint
+
+```
+
+- You can also transfer faucets as shown below
+
+- This is made possible following the installation procedures in the Readme file in [Scaffold-stark-2](https://github.com/Scaffold-Stark/scaffold-stark-2)
+
+
+
\ No newline at end of file
diff --git a/docs/recipes/MultiWriteFeature.md b/docs/recipes/MultiWriteFeature.md
new file mode 100644
index 0000000..7d1f48c
--- /dev/null
+++ b/docs/recipes/MultiWriteFeature.md
@@ -0,0 +1,189 @@
+---
+sidebar_position: 5
+title: Batching multiple writes to a single transaction
+description: Learn how to perform multiple write operations to StarkNet smart contracts simultaneously.
+---
+
+# Starknet Multi-Write Feature Recipe
+
+This recipe shows how to perform multiple contract write operations in a single transaction using the [`useScaffoldMultiWriteContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldMultiWriteContract.ts) hook from Scaffold-Stark.
+
+## Overview
+In this guide, we will implement a feature that allows writing to multiple contracts or executing multiple transactions in a single action. This is particularly useful when your decentralized application (dApp) requires multiple state changes at once.
+
+This documentation will walk through the code and steps necessary to create a button that triggers the multi-write contract interaction.
+
+
+Here is full implementation of the mult-write feature:
+
+```tsx title="components/MultiContractInteraction.tsx"
+import { useState } from "react";
+import { useScaffoldMultiWriteContract } from "~~/hooks/scaffold-stark";
+import { notification } from "~~/utils/scaffold-stark";
+
+export const MultiSetData = () => {
+ const [name, setName] = useState("");
+ const [age, setAge] = useState(0);
+
+ const { sendAsync, isPending } = useScaffoldMultiWriteContract({
+ calls: [
+ {
+ contractName: "ProfileContract",
+ functionName: "setName",
+ args: [name],
+ },
+ {
+ contractName: "ProfileContract",
+ functionName: "setAge",
+ args: [age],
+ },
+ ],
+ });
+
+ const handleSetData = async () => {
+ try {
+ await sendAsync();
+ notification("Multi-write successful!", "success");
+ } catch (e) {
+ console.error("Error in multi-write", e);
+ notification("Multi-write failed.", "error");
+ }
+ };
+
+ return (
+
+ );
+};
+
+```
+
+
+## Implementation Guide
+
+### Step 1: Create a New Component
+
+Create a new component in your `component` folder, named `MultiContractInteraction.tsx`. This component will handle multiple write operations on different contracts
+
+
+```tsx title="components/MultiContractInteraction.tsx"
+export const MultiContractInteraction = () => {
+ return
Your MultiContractInteraction
+}
+```
+
+### Step 2: Import Required Hooks and Utilities
+
+- import the [`useScaffoldMultiWriteContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldMultiWriteContract.ts) from scaffold-stark package to handle multiple contract function calls.
+- Use [`
+`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/utils/scaffold-stark/notification.tsx) utility to display success or error messages.
+
+```tsx title="components/MultiContractInteraction.tsx"
+import { useScaffoldMultiWriteContract } from "~~/hooks/scaffold-stark";
+import { notification } from "~~/utils/scaffold-stark";
+```
+
+### Step 3: Set Up State Variables
+
+- Use the `useState` hook to track user inputs, `name` and `age`.
+
+```tsx title="components/MultiContractInteraction.tsx"
+const [name, setName] = useState("");
+const [age, setAge] = useState(0);
+```
+
+### Step 4: Configure the [`useScaffoldMultiWriteContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldMultiWriteContract.ts) Hook
+
+- Configure the hook with the necessary contract calls. Here, we call the `setName` and `setAge` functions of `ProfileContract` in sequence.
+
+```tsx title="components/MultiContractInteraction.tsx"
+const { sendAsync, isPending } = useScaffoldMultiWriteContract({
+ calls: [
+ {
+ contractName: "ProfileContract",
+ functionName: "setName",
+ args: [name],
+ },
+ {
+ contractName: "ProfileContract",
+ functionName: "setAge",
+ args: [age],
+ },
+ ],
+});
+
+```
+
+- The `isPending` variable will manage the loading state of the button, and `sendAsync` will handle the contract transaction.
+
+### Step 5: Handle Submission
+- Create a `handleSetData` function that triggers the multi-write action. If successful, display a success notification; otherwise, log the error and display a failure message.
+
+```tsx title="components/MultiContractInteraction.tsx"
+const handleSetData = async () => {
+ try {
+ await sendAsync();
+ notification("Multi-write successful!", "success");
+ } catch (e) {
+ console.error("Error in multi-write", e);
+ notification("Multi-write failed.", "error");
+ }
+};
+```
+
+### Step 6: Create the UI
+- Add inputs for `name` and `age`, and a button to submit the data.
+- Disable the button while the transaction is pending.
+
+```tsx
+return (
+
+);
+```
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.
+
+
+Here is the full code, which we will be implementing in the guide below:
+
+```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 (
+
+
Contract Data
+
+ {isLoading ? (
+
+ ) : (
+
+ Data: {contractData ? contractData.toString() : "No data available"}
+
+ )}
+
+ );
+};
+
+```
+
+
+## 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 (
+
+
Contract Data
+
+ );
+};
+
+```
+
+### 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 (
+
+
Contract Data
+ {isLoading ? Loading... :
{contractData}
}
+
+ );
+};
+```
+
+### 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 (
+
+
Contract Data
+ {isLoading ? (
+
+ ) : (
+
{contractData ? contractData.toString() : "No data available"}
+ )}
+
+ );
+};
+
+```
+
+### 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 (
+
+
Contract Data
+
+ {isLoading ? (
+
+ ) : (
+
+ Data: {contractData ? contractData.toString() : "No data available"}
+
+ )}
+
+ );
+};
+```
+
+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.
diff --git a/docs/recipes/ReadContractDataFromNetwork.md b/docs/recipes/ReadContractDataFromNetwork.md
new file mode 100644
index 0000000..8206d63
--- /dev/null
+++ b/docs/recipes/ReadContractDataFromNetwork.md
@@ -0,0 +1,143 @@
+---
+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.
+
+
+Here is the full code, which we will be implementing in the guide below:
+
+```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 (
+
+
Contract Data
+
+ {isLoading ? (
+
+ ) : (
+
+ Data: {contractData ? contractData.toString() : "No data available"}
+
+ )}
+
+ );
+};
+
+```
+
+
+## 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 (
+
+
Contract Data
+
+ );
+};
+
+```
+
+### 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 (
+
+
Contract Data
+ {isLoading ? Loading... :
{contractData}
}
+
+ );
+};
+```
+
+### 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 (
+
+
Contract Data
+ {isLoading ? (
+
+ ) : (
+
{contractData ? contractData.toString() : "No data available"}
+ )}
+
+ );
+};
+
+```
+
+### 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 (
+
+
Contract Data
+
+ {isLoading ? (
+
+ ) : (
+
+ Data: {contractData ? contractData.toString() : "No data available"}
+
+ )}
+
+ );
+};
+```
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.
+
+
+Here is the full code, which we will be implementing in the guide below:
+
+```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 (
+
+
Contract Data
+
+ {isLoading ? (
+
+ ) : (
+
+ Data: {contractData ? contractData.toString() : "No data available"}
+
+ )}
+
+ );
+};
+
+```
+
+
+## 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 (
+
+
Contract Data
+
+ );
+};
+
+```
+
+### 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 (
+
+
Contract Data
+ {isLoading ? Loading... :
{contractData}
}
+
+ );
+};
+```
+
+### 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 (
+
+
Contract Data
+ {isLoading ? (
+
+ ) : (
+
{contractData ? contractData.toString() : "No data available"}
+ )}
+
+ );
+};
+
+```
+
+### 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 (
+
+
Contract Data
+
+ {isLoading ? (
+
+ ) : (
+
+ Data: {contractData ? contractData.toString() : "No data available"}
+
+ )}
+
+ );
+};
+```
+
+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.
diff --git a/static/img/Balance.gif b/static/img/Balance.gif
index 5daee0c..3f3220a 100644
Binary files a/static/img/Balance.gif and b/static/img/Balance.gif differ
diff --git a/static/img/Sepolia.jpg b/static/img/Sepolia.jpg
new file mode 100644
index 0000000..a18b321
Binary files /dev/null and b/static/img/Sepolia.jpg differ
diff --git a/static/img/faucets.jpg b/static/img/faucets.jpg
new file mode 100644
index 0000000..7fe6f98
Binary files /dev/null and b/static/img/faucets.jpg differ
diff --git a/static/img/getFaucets.jpg b/static/img/getFaucets.jpg
new file mode 100644
index 0000000..579b94a
Binary files /dev/null and b/static/img/getFaucets.jpg differ