diff --git a/docs/hooks/useScaffoldContract.md b/docs/hooks/useScaffoldContract.md
index 37806c8..5a0a550 100644
--- a/docs/hooks/useScaffoldContract.md
+++ b/docs/hooks/useScaffoldContract.md
@@ -4,6 +4,10 @@ sidebar_position: 6
# useScaffoldContract
+:::caution
+This hook currently only works to read contracts. We apologize for the inconvenience and will work on a fix.
+:::
+
Use this hook to get your contract instance by providing the contract name. It enables you to interact with your contract methods.
For reading data or sending transactions, it's recommended to use `useScaffoldReadContract` and `useScaffoldWriteContract`.
diff --git a/docs/hooks/useScaffoldEthBalance.md b/docs/hooks/useScaffoldEthBalance.md
index 0476443..dca8a51 100644
--- a/docs/hooks/useScaffoldEthBalance.md
+++ b/docs/hooks/useScaffoldEthBalance.md
@@ -34,26 +34,26 @@ This example demonstrates how to use the `useScaffoldEthBalance` hook to display
## Configuration
-| Parameter | Type | Description |
-| :------------- | :--------------------- | :---------------------------------------------------------------------------------------------- |
-| **address** | `Address \| string` | The Ethereum address to fetch the balance for. If not provided, the balance of the contract is used.|
+| Parameter | Type | Description |
+| :---------- | :------------------ | :--------------------------------------------------------------------------------------------------- |
+| **address** | `Address \| string` | The Ethereum address to fetch the balance for. If not provided, the balance of the contract is used. |
## Return Values
-| Parameter | Type | Description |
-| :--------------- | :------------ | :------------------------------------------------------------------------------------------------------------- |
-| **value** | `bigint` | The raw balance fetched from the contract as a `bigint`. |
-| **decimals** | `number` | Number of decimals for the token. Defaults to `18` for ETH. |
-| **symbol** | `string` | The token symbol. For this contract, it will return `"ETH"`. |
-| **formatted** | `string` | The balance formatted into a human-readable string using ethers' `formatUnits`. Defaults to `"0"` if no balance. |
+| Parameter | Type | Description |
+| :------------ | :------- | :--------------------------------------------------------------------------------------------------------------- |
+| **value** | `bigint` | The raw balance fetched from the contract as a `bigint`. |
+| **decimals** | `number` | Number of decimals for the token. Defaults to `18` for ETH. |
+| **symbol** | `string` | The token symbol. For this contract, it will return `"ETH"`. |
+| **formatted** | `string` | The balance formatted into a human-readable string using ethers' `formatUnits`. Defaults to `"0"` if no balance. |
## Call Object Configuration
-| Parameter | Type | Description |
-| :------------------ | :---------- | :--------------------------------------------------------------------------------------------------------------- |
-| **functionName** | `string` | Name of the function to call (in this case, `balance_of`). |
-| **args** (optional) | `unknown[]` | Arguments to pass to the function, such as the target address. |
-| **blockIdentifier** | `BlockNumber`| Specifies the block to query the contract from, set as `"pending"` by default. |
+| Parameter | Type | Description |
+| :------------------ | :------------ | :----------------------------------------------------------------------------- |
+| **functionName** | `string` | Name of the function to call (in this case, `balance_of`). |
+| **args** (optional) | `unknown[]` | Arguments to pass to the function, such as the target address. |
+| **blockIdentifier** | `BlockNumber` | Specifies the block to query the contract from, set as `"pending"` by default. |
You can also pass other arguments accepted by [useReadContract from starknet-react](https://starknet-react.com/docs/hooks/queries/usecontractread).
@@ -64,15 +64,17 @@ You can also pass other arguments accepted by [useReadContract from starknet-rea
- **`symbol`**: The token symbol ("ETH").
- The object also includes properties from the `useReadContract` hook. You can check the [useContractRead return values](https://starknet-react.com/docs/hooks/queries/usecontractread) for additional details.
-
## Best Practices
+
- Use this hook in any component where you need to display the ETH balance of a specific address.
- Ensure that the component using this hook is wrapped in a StarkNet React provider for seamless integration with the blockchain context.
- For a smooth user experience, handle loading and error states in the component using this hook.
- Consider using the formatted balance for display purposes as it is easier for users to understand compared to the raw bigint value.
## Error Handling
+
The hook does not handle errors explicitly, but the `useReadContract` hook from StarkNet React includes an `error` property in the return object. You can leverage this to manage errors in your component like this:
+
```tsx
const { value, formatted, symbol, error } = useScaffoldEthBalance({ address });
diff --git a/docs/hooks/useScaffoldEventHistory.md b/docs/hooks/useScaffoldEventHistory.md
index 84cd7e5..fe82ed4 100644
--- a/docs/hooks/useScaffoldEventHistory.md
+++ b/docs/hooks/useScaffoldEventHistory.md
@@ -20,7 +20,7 @@ const { data, isLoading, error } = useScaffoldEventHistory({
});
```
-This example configures the hook to read events from the YourEvent event of the YourContract smart contract, starting from block 0. It includes block data, but excludes transaction and receipt data. The hook will watch for new events and refresh the data.
+This example configures the hook to read events from the `YourEvent` event of the `YourContract` smart contract, starting from block 0. It includes block data, but excludes transaction and receipt data. The hook will watch for new events and refresh the data.
## Configuration
diff --git a/docs/hooks/useScaffoldMultiWriteContract.md b/docs/hooks/useScaffoldMultiWriteContract.md
index 37afbc0..d7f7fbf 100644
--- a/docs/hooks/useScaffoldMultiWriteContract.md
+++ b/docs/hooks/useScaffoldMultiWriteContract.md
@@ -4,7 +4,7 @@ sidebar_position: 2
# useScaffoldMultiWriteContract
-Use this hook to write to state-changing functions of your smart contract.
+Use this hook to batch-write multiple transactions to your smart contract.
```ts
const { sendAsync } = useScaffoldMultiWriteContract({
@@ -48,7 +48,7 @@ This example demonstrates how to use the `sendAsync`function to send multiple tr
| Parameter | Type | Description |
| :--------------------- | :------------------- | :---------------------------------------------------------------------------------------------------------------------------- |
-| **calls** | `Array` | Array of configuration objects for the contract calls. Each object should contain `contractName`, `functionName`, and `args`. |
+| **calls** | `Calldata[]` | Array of configuration objects for the contract calls. Each object should contain `contractName`, `functionName`, and `args`. |
| **options** (optional) | `InvocationsDetails` | Additional options for the transactions. |
## Call Object Configuration
@@ -59,10 +59,8 @@ This example demonstrates how to use the `sendAsync`function to send multiple tr
| **functionName** | `string` | Name of the function to call. |
| **args** (optional) | `unknown[]` | Array of arguments to pass to the function (if any). Types are inferred from the contract's function parameters. |
-You can also pass other arguments accepted by [writeContractAsync from starknet-react](https://starknet-react.com/hooks/mutation/usecontractwrite).
+You can also pass other arguments accepted by [useSendTransaction#sendAsync from starknet-react](https://www.starknet-react.com/docs/hooks/use-send-transaction#sendasync).
## Return Values
-- `writeContractAsync` function sends the transaction to the smart contract.
-- `isMining` property indicates whether the transaction is currently being mined.
-- The extended object includes properties inherited from the useContractWrite hook from starknet-react. You can check the [useContractWrite return values](https://starknet-react.com/hooks/mutation/usecontractwrite) for the types.
+- `sendAsync` function sends the transaction(s) to the smart contract.
diff --git a/docs/hooks/useScaffoldReadContract.md b/docs/hooks/useScaffoldReadContract.md
index 6ca44b8..b672c7c 100644
--- a/docs/hooks/useScaffoldReadContract.md
+++ b/docs/hooks/useScaffoldReadContract.md
@@ -27,9 +27,9 @@ This example retrieves the data returned by the `userGreetingCounter` function o
| **watch** (optional) | `boolean` | Watches and refreshes data on new blocks. (default : `true`) |
| Other arguments | `various` | You can pass other arguments accepted by the useContractRead hook from @starknet-react/core. |
-You can also pass other arguments accepted by [useContractRead from Starknet-react](https://starknet-react.com/hooks/query/usecontractread).
+You can also pass other arguments accepted by [starknet-react useReadContract](https://www.starknet-react.com/docs/hooks/use-read-contract).
## Return Values
- The retrieved data is stored in the `data` property of the returned object.
-- The extended object includes properties inherited from the useContractRead hook of starknet-react. You can check the [useContractRead return values](https://starknet-react.com/hooks/query/usecontractread) documentation for the types.
+- The extended object includes properties inherited from the `useReadContract` hook of starknet-react. You can check the [useReadContract return values](https://www.starknet-react.com/docs/hooks/use-read-contract) documentation for the types.
diff --git a/docs/hooks/useScaffoldWriteContract.md b/docs/hooks/useScaffoldWriteContract.md
index a68dbbf..687b053 100644
--- a/docs/hooks/useScaffoldWriteContract.md
+++ b/docs/hooks/useScaffoldWriteContract.md
@@ -40,16 +40,13 @@ In this example, the updateGreeting function of the YourContract is called with
## Configuration
-| Parameter | Type | Description |
-| :-------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------- |
-| **contractName** | `string` | Name of the contract to write to. |
-| **functionName** | `string` | Name of the function to call. |
-| **args** (optional) | `unknown[]` | Array of arguments to pass to the function (if any). Types are inferred from the contract's function parameters. |
-| **option** (optional) | `object` | Additional options for the transaction, such as gas and value. |
-
-You can also pass other arguments accepted by [useContractWrite from Starknet-react](https://starknet-react.com/hooks/mutation/usecontractwrite).
+| Parameter | Type | Description |
+| :------------------ | :---------- | :--------------------------------------------------------------------------------------------------------------- |
+| **contractName** | `string` | Name of the contract to write to. |
+| **functionName** | `string` | Name of the function to call. |
+| **args** (optional) | `unknown[]` | Array of arguments to pass to the function (if any). Types are inferred from the contract's function parameters. |
## Return Values
-- The sendAsync method is used to send the write transaction. It returns a promise that resolves when the transaction is confirmed.
-- The extended object includes properties inherited from the useContractWrite hook of starknet-react. You can check the [useContractWrite return values](https://starknet-react.com/hooks/mutation/usecontractwrite) documentation for the types.
+- The `sendAsync` method is used to send the write transaction. It returns a promise that resolves when the transaction is confirmed.
+- The extended object includes properties inherited from the `useSendTransaction` hook of starknet-react. You can check their [documentation](https://www.starknet-react.com/docs/hooks/use-send-transaction#sendasync) for the the sepcific return values.
diff --git a/docs/quick-start/accessing-block-explorers.mdx b/docs/quick-start/accessing-block-explorers.mdx
index c97e086..7372ee8 100644
--- a/docs/quick-start/accessing-block-explorers.mdx
+++ b/docs/quick-start/accessing-block-explorers.mdx
@@ -8,30 +8,26 @@ Starknet block explorers provide users with an interface to access, track, and v
### Features:
-| Feature | Description |
-|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------|
-| **Transaction Tracking** | View and track transactions, including hashes, sender/recipient addresses, and amounts. |
-| **Smart Contract Inspection** | Analyze smart contracts, their code, balances, and transaction history. |
-| **Block Data Access** | Retrieve block-level information like block numbers, timestamps, and transaction counts. |
-| **Address Lookup** | Look up specific addresses to view transaction history, balances, and other on-chain details. |
+| Feature | Description |
+| ----------------------------- | --------------------------------------------------------------------------------------------- |
+| **Transaction Tracking** | View and track transactions, including hashes, sender/recipient addresses, and amounts. |
+| **Smart Contract Inspection** | Analyze smart contracts, their code, balances, and transaction history. |
+| **Block Data Access** | Retrieve block-level information like block numbers, timestamps, and transaction counts. |
+| **Address Lookup** | Look up specific addresses to view transaction history, balances, and other on-chain details. |
## How to Access Starknet Block Explorers:
-1. Navigate to the [Scaffold-Stark web app](https://scaffold-stark-demo.vercel.app/) and locate the "Block Explorer" button at the bottom left of the page.
-
- 
-2. Click the "Block Explorer" button to open a list of available block explorers.
+- Navigate your Scaffold Stark project and locate the "Block Explorer" button at the bottom left of the page.
- 
+
-3. Select your preferred block explorer from the list below:
- - [Starkscan](https://starkscan.co)
- - [Voyager](https://voyager.online)
- - [StarkCompass](https://starkcompass.com/)
+- Click the "Block Explorer" button to open a list of available block explorers.
-4. Based on the chain set in the `Scaffold.config` file, the respective explorers for Sepolia or Mainnet will be provided.
-5. You'll be redirected to the chosen block explorer, where you can search for transactions, smart contracts, or addresses using the search bar.
-6. Utilize the tabs and filters to further explore and analyze blockchain data.
+
+
+- Based on the chain set in the `Scaffold.config` file, the respective explorers for Sepolia or Mainnet will be provided.
+- You'll be redirected to the chosen block explorer, where you can search for transactions, smart contracts, or addresses using the search bar.
+- Utilize the tabs and filters to further explore and analyze blockchain data.
For a comprehensive list of all available Starknet explorers, check out [Block explorers](https://docs.starknet.io/documentation/tools/ref_block_explorers/).
diff --git a/docs/quick-start/configure-contracts.mdx b/docs/quick-start/configure-contracts.mdx
index ab57b0c..1434541 100644
--- a/docs/quick-start/configure-contracts.mdx
+++ b/docs/quick-start/configure-contracts.mdx
@@ -1,12 +1,13 @@
---
sidebar_position: 4
-description: How to import other Contracts.
+description: How to import existing Smart Contracts.
---
-# Importing other contracts
+# Importing existing Smart Contracts
-The `Configure Contracts` page allows you to pull existing contracts from the Starknet network and incorporate them into your `Scaffold-Stark 2` project.
-It generates a configuration file that can be used to replace or append to your local predeployedContracts.ts or configExternalContracts.ts file, enabling contract debugging in the `/debug` page of your Scaffold-Stark project.
+There may be cases where you want to bring in existing smart contracts deployed on the network. This section will cover how you can easily bring existing contracts into your debug UI and use the Scaffold Hooks with it.
+
+The `Configure Contracts` page allows you to pull existing contracts from the Starknet network and incorporate them into your `Scaffold-Stark 2` project. It generates a configuration file that can be used to replace or append to your local `predeployedContracts.ts` or `configExternalContracts.ts` file, enabling contract debugging in the `/debug` page of your Scaffold-Stark project.
### **Getting Started**:
@@ -18,36 +19,34 @@ To access the page, navigate to the bottom of the screen and click on Configure
### How to Use the Configure Contracts Page
-#### 1. Chain Selection in `scaffold.config.ts`
-
-The contracts pulled from the network are determined by the chain configured in the `scaffold.config.ts` file. This configuration decides whether you are interacting with the Sepolia or Mainnet network.
+#### 1. Chain configuration
-- If `Sepolia` is configured, contracts will be fetched from the `Sepolia testnet`.
-- If `Mainnet` is configured, contracts will be fetched from the `Mainnet network`.
+The contracts pulled from the network are determined by the chain configured in the `scaffold.config.ts` file.
-**Note:**
-While some contracts may have the same address on both `Sepolia and Mainnet`, this is not always guaranteed. Always double-check you are on the correct network based on the contract's intended usage.
+:::caution
+While some contracts may have the same address on both `sepolia` and `mainnet`, this is not always guaranteed. Always double-check you are on the correct network based on the contract's intended usage.
+:::
```ts
const scaffoldConfig = {
targetNetworks: [chains.devnet],
+ // other config
+};
```
#### 2. Enter the Contract Address and Name
-- Once on the page, in the designated input fields, enter the contract address and contract name.
-
-- These values are required to locate the contract on the network and pull the relevant details (ABI, address, classHash).
+Enter the contract address and contract name. These values are required to locate the contract on the network and pull the relevant details (ABI, address, classHash).
+:::tip
Always make sure the contract address is correct and that you are searching on the right network.
+:::
#### 3. Click the "Download Contract File" Button
-After entering the details, click the `Download Contract File` button.
-
-This will fetch the contract information (ABI, address, and classHash) from the configured network (either Sepolia or Mainnet, as set in the scaffold.config.ts file).
+After entering the details, click the **Download Contract File** button. This will fetch the contract information (ABI, address, and classHash) from the configured network (either Sepolia or Mainnet, as set in the scaffold.config.ts file).
#### 4. Generate and Download the Configuration File
@@ -55,7 +54,7 @@ The tool will generate a configuration file that includes:
- Contract ABI
- Contract Address
-- Class Hash
+- Contract Class Hash
```ts
export const externalContracts = [
@@ -73,8 +72,8 @@ export const externalContracts = [
Alternatively, if you're working with pre-deployed contracts, you can modify the `predeployedContracts.ts` file.
-#### 6. Use the /debug Page
+#### 6. Use the "Debug Contracts" page
-- With the updated contract configuration file, navigate to the `/debug page` in your project.
+- With the updated contract configuration file, navigate to the `/debug` page in your project.
-You can interact with and test the contract using the `Scaffold-Stark hooks` and `utilities` here.
+You can interact with and test the contract using the Scaffold-Stark hooks and utilities here.
diff --git a/docs/quick-start/environment.mdx b/docs/quick-start/environment.mdx
index 38358c2..87f0a4e 100644
--- a/docs/quick-start/environment.mdx
+++ b/docs/quick-start/environment.mdx
@@ -35,7 +35,7 @@ The command also will create a file called `packages/nextjs/contracts/deployedCo
:::tip
-Note that `yarn deploy` does not reset the generated `deployedContracts.ts` file, meaning that any changes that you made to the contract name or any deletion will not be taken into account, as it will only make the new deployment on top of the existing API. To completely start from a fresh state of deployment, you can run (do run with caution):
+Note that `yarn deploy` resets the generated `deployedContracts.ts` file be default. To keep the existing deployments and `deployedContracts.ts`, you can run:
```
yarn deploy:reset
@@ -60,4 +60,4 @@ Visit your app on: `http://localhost:3000`. You can interact with your smart con
- Edit your deployment scripts in `packages/snfoundry/script-ts/deploy.ts`.
- Edit your smart contract test in: `packages/snfoundry/contracts/src/test`. To run test use `yarn test`.
-see more detail at [customize-your-own-dApp](./customize-your-own-dApp) to customize your own dApp.
+See more details at the [Customize Your Own dApp](./customize-your-own-dApp) page!
diff --git a/docs/quick-start/installation.mdx b/docs/quick-start/installation.mdx
index c3efa12..d6aceac 100644
--- a/docs/quick-start/installation.mdx
+++ b/docs/quick-start/installation.mdx
@@ -127,19 +127,21 @@ curl --location 'https://starknet-sepolia.public.blastapi.io/rpc/v0_7' \
## Compatible versions
-- scarb - v2.8.2
-- cairo - v2.8.2
-- starknet - v2.5.4
-- sierra - v1.4.0
-- rpc - v0.7.1
-- starknet-devnet - v0.2.0
-- snforge - v0.30.0
+| Dependency | Version |
+| --------------- | ------- |
+| scarb | v2.8.2 |
+| cairo | v2.8.2 |
+| starknet | v2.5.4 |
+| sierra | v1.4.0 |
+| rpc | v0.7.1 |
+| starknet-devnet | v0.2.0 |
+| snforge | v0.30.0 |
## Setup
To get started with Scaffold-Stark, you have two options:
-1. Follow readme to clone the repository.
+1. Follow `README.md` to clone the repository.
2. Use the npx command: ` npx create-stark@latest` to bootstrap the project directly.
### Option 1: Setup using `git clone`
diff --git a/docs/recipes/ReadContractData.md b/docs/recipes/ReadContractData.md
deleted file mode 100644
index 93bdf75..0000000
--- a/docs/recipes/ReadContractData.md
+++ /dev/null
@@ -1,145 +0,0 @@
----
-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}
}
-
-
Contract Data
- {isLoading ? (
-
- ) : (
-
{contractData ? contractData.toString() : "No data available"}
- )}
-
-
Contract Data
-
- {isLoading ? (
-
- ) : (
-
- Data: {contractData ? contractData.toString() : "No data available"}
-
- )}
-
-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}
}
-
-
Contract Data
- {isLoading ? (
-
- ) : (
-
{contractData ? contractData.toString() : "No data available"}
- )}
-
-
Contract Data
-
- {isLoading ? (
-
- ) : (
-
- Data: {contractData ? contractData.toString() : "No data available"}
-
- )}
-
-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}
}
-
-
Contract Data
- {isLoading ? (
-
- ) : (
-
{contractData ? contractData.toString() : "No data available"}
- )}
-
-
Contract Data
-
- {isLoading ? (
-
- ) : (
-
- Data: {contractData ? contractData.toString() : "No data available"}
-
- )}
-