### Scaffold-ETH 2 Project Setup using npx

Source: https://docs.scaffoldeth.io/quick-start/installation

This command initiates the Scaffold-ETH 2 project setup process. It interactively guides the user through naming the project and selecting a Solidity framework (Hardhat or Foundry). An optional '-e' flag can be used to include extensions.

```bash
npx create-eth@latest

```

```bash
npx create-eth@latest -e extension-name

```

--------------------------------

### Launch NextJS Application with Yarn

Source: https://docs.scaffoldeth.io/quick-start/environment

Starts the NextJS frontend application, typically accessible at http://localhost:3000. This allows interaction with the deployed smart contract through the provided UI components.

```bash
yarn start
```

--------------------------------

### Initialize Local Blockchain with Yarn

Source: https://docs.scaffoldeth.io/quick-start/environment

Starts a local Ethereum network using Hardhat or Foundry. This network is crucial for testing and development. Network configuration can be customized in specific files depending on the chosen framework.

```bash
yarn chain
```

--------------------------------

### Clone and Install Scaffold-ETH 2 Repository

Source: https://docs.scaffoldeth.io/extensions/createExtensions

This snippet demonstrates how to clone the Scaffold-ETH 2 repository and install its dependencies using yarn. This is the initial step for developing extensions.

```bash
git clone https://github.com/scaffold-eth/create-eth.git
cd create-eth
yarn install
```

--------------------------------

### Smart Contract Testing Commands

Source: https://docs.scaffoldeth.io/quick-start/environment

Provides the commands to run tests for smart contracts, with separate commands for Hardhat and Foundry environments. Ensuring tests pass is a critical step before deployment.

```bash
yarn hardhat:test
yarn foundry:test
```

--------------------------------

### Navigate to Project Directory

Source: https://docs.scaffoldeth.io/quick-start/installation

After the Scaffold-ETH 2 project has been successfully set up using the 'create-eth' command, this command is used to change the current directory to the newly created project folder.

```bash
cd project-name

```

--------------------------------

### Smart Contract and Deployment Script Locations

Source: https://docs.scaffoldeth.io/quick-start/environment

Specifies the file paths for smart contracts and deployment scripts, differentiating between Hardhat and Foundry setups. This allows developers to easily locate and modify these core components of the dApp.

```plaintext
packages/hardhat/contracts
packages/hardhat/deploy
packages/foundry/contracts
packages/foundry/script
```

--------------------------------

### Build Scaffold-ETH 2 Development CLI

Source: https://docs.scaffoldeth.io/extensions/createExtensions

This command builds the development version of the Scaffold-ETH 2 CLI, generating essential JavaScript files for extension development. Ensure you have run 'yarn install' first.

```bash
yarn build:dev
```

--------------------------------

### Deploy Smart Contract with Yarn

Source: https://docs.scaffoldeth.io/quick-start/environment

Deploys a test smart contract to the local network. The contract and its deployment script can be modified to suit project needs. Paths to these files differ based on whether Hardhat or Foundry is used.

```bash
yarn deploy
```

--------------------------------

### Use InputBase Component (React)

Source: https://docs.scaffoldeth.io/components/InputBase

Shows a basic example of using the InputBase component within a React application. It illustrates how to manage the input's state using useState and pass it as props.

```jsx
const [url, setUrl] = useState<string>();

<InputBase name="url" placeholder="url" value={url} onChange={setUrl} />
```

--------------------------------

### Use Balance Component (React)

Source: https://docs.scaffoldeth.io/components/Balance

This example demonstrates how to use the Balance component in a React application. It requires an Ethereum address as a prop to display the balance.

```jsx
<Balance address="0x34aA3F359A9D614239015126635CE7732c18fDF3" />
```

--------------------------------

### Deploy NextJS App to Vercel CLI

Source: https://docs.scaffoldeth.io/deploying/deploy-nextjs-app

Commands to deploy your NextJS application to Vercel using the CLI. This includes initial deployment, login, production deployment, and deployment without type checking. Assumes Vercel CLI is installed and configured.

```bash
yarn vercel
yarn vercel:login
yarn vercel --prod
yarn vercel:yolo --prod
```

--------------------------------

### Basic Contract Interaction Button Setup (TypeScript)

Source: https://docs.scaffoldeth.io/recipes/WagmiContractWriteWithFeedback

This is a foundational component for contract interaction, setting up a basic button. It serves as the initial step before configuring wagmi hooks for actual contract calls.

```typescript
import * as React from "react";

export const ContractInteraction = () => {
  return <button>Send</button>;
};

```

--------------------------------

### Use IntegerInput Component for State Management

Source: https://docs.scaffoldeth.io/components/IntergerInput

This example demonstrates how to use the IntegerInput component within a React component. It shows how to manage the input's value using React's useState hook and how to update the state when the input changes.

```javascript
const [txValue, setTxValue] = useState<string | bigint>("");

<IntegerInput
  value={txValue}
  onChange={updatedTxValue => {
    setTxValue(updatedTxValue);
  }}
  placeholder="value (wei)"
/>
```

--------------------------------

### Create Basic Component Structure (React/TypeScript)

Source: https://docs.scaffoldeth.io/recipes/GetCurrentBalanceFromAccount

A basic React component structure that can be expanded upon. This serves as a starting point for creating new UI elements within a Scaffold-ETH 2 application.

```tsx
export const ConnectedAddressBalance = () => {
  return (
    <div>
      <h2>Your Ethereum Balance</h2>
    </div>
  );
};
```

--------------------------------

### Use BlockieAvatar Component with Address and Size

Source: https://docs.scaffoldeth.io/components/BlockieAvatar

This example demonstrates the basic usage of the BlockieAvatar component. It takes an address and a size prop to render a blockie icon for the specified address with the given dimensions.

```javascript
<BlockieAvatar address="0x34aA3F359A9D614239015126635CE7732c18fDF3" size={24} />
```

--------------------------------

### Use AddressInput Component (React)

Source: https://docs.scaffoldeth.io/components/AddressInput

This example demonstrates how to use the AddressInput component in a React application. It includes state management for the input value and a placeholder for user guidance. The component handles address validation and ENS resolution.

```javascript
const [address, setAddress] = useState("");

<AddressInput onChange={setAddress} value={address} placeholder="Input your address" />
```

--------------------------------

### Add Loading State to Contract Reads (TypeScript)

Source: https://docs.scaffoldeth.io/recipes/ReadUintFromContract

Enhances the previous example by incorporating loading states for contract data retrieval. It utilizes the `isLoading` property returned by `useScaffoldReadContract` to display a spinner while data is being fetched. This provides immediate feedback to the user about ongoing operations.

```typescript
import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
import { useAccount } from "wagmi";

export const GreetingsCount = () => {
  const { address: connectedAddress } = useAccount();

  const { data: totalCounter, isLoading: isTotalCounterLoading } = useScaffoldReadContract({
    contractName: "YourContract",
    functionName: "totalCounter",
  });

  const { data: connectedAddressCounter, isLoading: isConnectedAddressCounterLoading } = useScaffoldReadContract({
    contractName: "YourContract",
    functionName: "userGreetingCounter",
    args: [connectedAddress], // passing args to function
  });

  return (
    <div>
      <h2>Total Greetings count:</h2>
      {isTotalCounterLoading ? (
        <span className="loading loading-spinner"></span>
      ) : (
        <p className="m-0">{totalCounter ? totalCounter.toString() : 0}</p>
      )}
      <h2>Your Greetings count:</h2>
      {isConnectedAddressCounterLoading ? (
        <span className="loading loading-spinner"></span>
      ) : (
        <p className="m-0">{connectedAddressCounter ? connectedAddressCounter.toString() : 0}</p>
      )}
    </div>
  );
};

```

--------------------------------

### Basic Component Structure for Contract Interaction (TypeScript/React)

Source: https://docs.scaffoldeth.io/recipes/WriteToContractWriteAsyncButton

This is a foundational React component structure for interacting with a smart contract. It includes an input field for user-provided data and a button to trigger an action. This snippet serves as a starting point before integrating specific contract interaction logic.

```typescript
export const Greetings = () => {
  return (
    <>
      <input type="text" placeholder="Write your greeting" className="input border border-primary" />
      <button>Send</button>
    </>
  );
};

```

--------------------------------

### Initialize and Publish Scaffold-ETH 2 Extension to GitHub

Source: https://docs.scaffoldeth.io/extensions/createExtensions

This snippet outlines the steps to initialize a Git repository for your extension, commit changes, add a remote origin, and push the extension to GitHub for sharing.

```bash
cd create-eth/externalExtensions/${extensionName}
git init
git add .
git commit -m "Initial commit of my extension"
git remote add origin <remote-repo-url>
git push -u origin main
```

--------------------------------

### Run Scaffold-ETH 2 CLI for New Instance

Source: https://docs.scaffoldeth.io/extensions/createExtensions

Executes the Scaffold-ETH 2 CLI to create a new base project instance. The input provided for 'Your project name' will be used as the extension name.

```bash
yarn cli
```

--------------------------------

### useScaffoldReadContract Hook

Source: https://docs.scaffoldeth.io/hooks/useScaffoldReadContract

This hook is used to read public variables and get data from read-only functions of your smart contract. It simplifies the process of interacting with your contract's state.

```APIDOC
## useScaffoldReadContract

### Description
Use this hook to read public variables and get data from read-only functions of your smart contract.

### Method
N/A (This is a React hook, not a direct HTTP endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Configuration

| Parameter      | Type     | Description                                                                 |
| -------------- | -------- | --------------------------------------------------------------------------- |
| **contractName** | `string` | Name of the contract to read from.                                          |
| **functionName** | `string` | Name of the function to call.                                               |
| **args** (optional) | `unknown[]` | Array of arguments to pass to the function (if accepts any). Types are inferred from contract's function parameters. |
| **watch** (optional) | `boolean` | Watches and refreshes data on new blocks. (default : `true`)               |
| **chainId** (optional) | `string` | Id of the chain the contract lives on. Defaults to [`targetNetworks[0].id`](/deploying/deploy-nextjs-app#--targetnetworks) |

You can also pass other arguments accepted by [useReadContract wagmi hook](https://wagmi.sh/react/api/hooks/useReadContract#parameters).

### Return Values

* The retrieved data is stored in the `data` property of the returned object.
* You can refetch the data by calling the `refetch` function.
* The extended object includes properties inherited from wagmi useReadContract. You can check the [useReadContract return values](https://wagmi.sh/react/api/hooks/useReadContract#return-type) documentation to check the types.

### Request Example
```javascript
const { data: totalCounter } = useScaffoldReadContract({
  contractName: "YourContract",
  functionName: "userGreetingCounter",
  args: ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045"],
});
```

### Response
#### Success Response (200)
* **data** (any) - The data returned from the smart contract function call.

#### Response Example
```json
{
  "data": "10"
}
```
```

--------------------------------

### Use Published Scaffold-ETH 2 Extension

Source: https://docs.scaffoldeth.io/extensions/createExtensions

Demonstrates how other developers can utilize your published extension by referencing its GitHub repository and branch name via npx.

```bash
npx create-eth@latest -e {github-username}/{extension-repo-name}:{branch-name}
```

--------------------------------

### Run Scaffold-ETH 2 CLI in Development Mode for Extension Testing

Source: https://docs.scaffoldeth.io/extensions/createExtensions

This command runs the Scaffold-ETH 2 CLI with the --dev flag, enabling local testing of your extension by symlinking it to the instance project. The extensionName must correspond to a directory in 'create-eth/externalExtensions/'.

```bash
yarn cli -e {extensionName} --dev
```

--------------------------------

### Send Transaction with useScaffoldWriteContract

Source: https://docs.scaffoldeth.io/hooks/useScaffoldWriteContract

Example of how to use the writeContractAsync function returned by useScaffoldWriteContract to send a transaction. This involves calling the function with the desired function name, arguments, and optionally, the value to send.

```javascript
<button
  className="btn btn-primary"
  onClick={async () => {
    try {
      await writeYourContractAsync({
        functionName: "setGreeting",
        args: ["The value to set"],
        value: parseEther("0.1"),
      });
    } catch (e) {
      console.error("Error setting greeting:", e);
    }
  }}
>
  Set Greeting
</button>
```

--------------------------------

### Deploy Smart Contracts (Hardhat/Foundry)

Source: https://docs.scaffoldeth.io/deploying/deploy-smart-contracts

Deploys all smart contracts from the 'packages/hardhat/contracts' folder to a specified network. The default network can be configured in 'packages/hardhat/hardhat.config.ts' or 'packages/foundry/foundry.toml'. Use the '--network' flag to specify a target network.

```bash
yarn deploy --network network_name

eg: yarn deploy --network sepolia
```

--------------------------------

### Deploy Specific Contracts (Hardhat/Foundry)

Source: https://docs.scaffoldeth.io/deploying/deploy-smart-contracts

Allows deployment of individual contracts by adding tags to deploy scripts (Hardhat) or creating separate script files (Foundry). Use the '--tags' flag for tagged deployments in Hardhat or the '--file' flag for specific script files in Foundry.

```bash
# Hardhat: Add tags to deploy scripts, e.g., deployMyContract.tags = ["tagExample"];
yarn deploy --tags tagExample

# Foundry: Create separate script files, e.g., DeployMyContract.s.sol
yarn deploy --file DeployMyContract.s.sol
```

--------------------------------

### Create Scaffold-ETH 2 Extension

Source: https://docs.scaffoldeth.io/extensions/createExtensions

This command generates a new extension based on changes made within a project instance. It collects modifications and places them in the 'create-eth/externalExtensions' directory.

```bash
yarn create-extension {projectName}
```

--------------------------------

### Verify Contract with Constructor Args (Hardhat)

Source: https://docs.scaffoldeth.io/deploying/deploy-smart-contracts

An alternative method for contract verification in Hardhat using the 'hardhat-verify' plugin. This allows specifying the contract address and constructor arguments directly in the command.

```bash
yarn hardhat-verify --network network_name contract_address "Constructor arg 1"
```

--------------------------------

### Configure Hardhat Network - Scaffold-ETH 2

Source: https://docs.scaffoldeth.io/deploying/deploy-smart-contracts

This snippet shows how to add a custom network configuration for Hardhat within the Scaffold-ETH 2 project. It demonstrates adding the 'base' network with its RPC URL and account configuration. Ensure you replace 'deployerPrivateKey' with your actual private key.

```typescript
networks: {
    // ... other networks
    base: {
        url: "https://mainnet.base.org",
        accounts: [deployerPrivateKey]
    },
}
```

--------------------------------

### Import Scaffold Configuration - JavaScript

Source: https://docs.scaffoldeth.io/deploying/deploy-nextjs-app

Demonstrates how to import the `scaffoldConfig` object from its default location (`~~/scaffold.config`) into any other file within your application. This allows you to access and utilize the defined configuration values across your dapp.

```javascript
import scaffoldConfig from "~~/scaffold.config";
```

--------------------------------

### Initialize useTransactor Hook for Contract Writes (React)

Source: https://docs.scaffoldeth.io/recipes/WagmiContractWriteWithFeedback

Initializes the `useTransactor` hook and uses it to wrap a contract writing function (`writeContractAsyncWithParams`) obtained from `useWriteContract`. This setup allows for displaying transaction status feedback to the user. It requires `react`, `viem`, `wagmi`, and Scaffold-ETH specific hooks and contract definitions.

```javascript
import * as React from "react";
import { parseEther } from "viem";
import { useWriteContract } from "wagmi";
import DeployedContracts from "~~/contracts/deployedContracts";
import { useTransactor } from "~~/hooks/scaffold-eth";

export const ContractInteraction = () => {
  const { writeContractAsync } = useWriteContract();

  const writeContractAsyncWithParams = () =>
    writeContractAsync({
      address: DeployedContracts[31337].YourContract.address,
      abi: DeployedContracts[31337].YourContract.abi,
      functionName: "setGreeting",
      value: parseEther("0.01"),
      args: ["Hello world!"],
    });

  const writeTx = useTransactor();

  return <button onClick={() => writeTx(writeContractAsyncWithParams, { blockConfirmations: 1 })}>Send</button>;
};

```

--------------------------------

### Commit and Push Tweaked Extension Changes

Source: https://docs.scaffoldeth.io/extensions/createExtensions

After making modifications to your extension during local testing, this snippet shows how to stage, commit, and push the updated changes to your GitHub repository.

```bash
cd create-eth/externalExtensions/${extensionName}
git add .
git commit -m "some changes"
git push
```

--------------------------------

### Add Loading State to Transaction Button (React)

Source: https://docs.scaffoldeth.io/recipes/WriteToContractWriteAsyncButton

This snippet enhances the previous example by incorporating a loading state for the transaction button. It uses the `isPending` property returned by `useScaffoldWriteContract` to disable the button and display a spinner while the transaction is being processed, providing better user feedback. The `useState` hook manages the input value.

```javascript
import { useState } from "react";
import { parseEther } from "viem";
import { useScaffoldWriteContract } from "~~/hooks/scaffold-eth";

export const Greetings = () => {
  const [newGreeting, setNewGreeting] = useState("");
  const { writeContractAsync, isPending } = useScaffoldWriteContract("YourContract");

  const handleSetGreeting = async () => {
    try {
      await writeContractAsync(
        {
          functionName: "setGreeting",
          args: [newGreeting],
          value: parseEther("0.01"),
        },
        {
          onBlockConfirmation: txnReceipt => {
            console.log("📦 Transaction blockHash", txnReceipt.blockHash);
          },
        },
      );
    } catch (e) {
      console.error("Error setting greeting", e);
    }
  };

  return (
    <>
      <input
        type="text"
        placeholder="Write your greeting"
        className="input border border-primary"
        onChange={e => setNewGreeting(e.target.value)}
      />

      <button
        className="btn btn-primary"
        onClick={handleSetGreeting}
        disabled={isPending}
      >
        {isPending ? <span className="loading loading-spinner loading-sm"></span> : "Send"}
      </button>
    </>
  );
};

```

--------------------------------

### Basic Usage of EtherInput Component

Source: https://docs.scaffoldeth.io/components/EtherInput

Demonstrates the basic implementation of the EtherInput component. It utilizes the `useState` hook to manage the input value and passes it along with a change handler to the EtherInput component.

```javascript
const [ethAmount, setEthAmount] = useState("");

<EtherInput value={ethAmount} onChange={amount => setEthAmount(amount)} />
```

--------------------------------

### Create Basic Component Structure (TypeScript/React)

Source: https://docs.scaffoldeth.io/recipes/ReadUintFromContract

Creates a basic React component structure for displaying contract data. This is a foundational step before integrating with Scaffold-ETH hooks. It includes placeholder elements for displaying greetings counts.

```typescript
export const GreetingsCount = () => {
  return (
    <div>
      <h2 className="font-bold m-0">Total Greetings count:</h2>
      <h2 className="font-bold m-0">Your Greetings count:</h2>
    </div>
  );
};

```

--------------------------------

### Import IntegerInput Component

Source: https://docs.scaffoldeth.io/components/IntergerInput

This snippet shows how to import the IntegerInput component from the scaffold-eth library. It is a prerequisite for using the component in your React application.

```javascript
import { IntegerInput } from "~~/components/scaffold-eth";
```

--------------------------------

### Integrate Account and Balance Display (React/TypeScript)

Source: https://docs.scaffoldeth.io/recipes/GetCurrentBalanceFromAccount

Integrates the wagmi `useAccount` hook to retrieve the connected address and uses Scaffold-ETH 2's `Address` and `Balance` components to display it. This snippet demonstrates how to connect wallet information to UI elements.

```tsx
import { useAccount } from "wagmi";
import { Address, Balance } from "~~/components/scaffold-eth";

export const ConnectedAddressBalance = () => {
  const { address: connectedAddress } = useAccount();

  return (
    <div>
      <h2>Your Ethereum Balance</h2>
      Address: <Address address={connectedAddress} />
      Balance: <Balance address={connectedAddress} />
    </div>
  );
};
```

--------------------------------

### Verify Smart Contracts (Hardhat/Foundry)

Source: https://docs.scaffoldeth.io/deploying/deploy-smart-contracts

Verifies deployed smart contracts on Etherscan for the specified network. This command works for both Hardhat and Foundry. For Hardhat, it utilizes 'hardhat-deploy' or 'hardhat-verify' plugins. Foundry uses a dedicated script.

```bash
yarn verify --network network_name

eg: yarn verify --network sepolia
```

--------------------------------

### Import BlockieAvatar Component

Source: https://docs.scaffoldeth.io/components/BlockieAvatar

This snippet shows how to import the BlockieAvatar component from the Scaffold-ETH 2 components library. This is the first step required to use the component in your dApp.

```javascript
import { BlockieAvatar } from "~~/components/scaffold-eth";
```

--------------------------------

### Import InputBase Component (TypeScript)

Source: https://docs.scaffoldeth.io/components/InputBase

Demonstrates how to import the InputBase component from the Scaffold-ETH 2 library into your TypeScript project. This component serves as a base for creating various input fields.

```typescript
import { InputBase } from "~~/components/scaffold-eth";
```

--------------------------------

### Define Custom Chain with viem (TypeScript)

Source: https://docs.scaffoldeth.io/recipes/add-custom-chain

Demonstrates how to define a custom blockchain network using viem's `defineChain` function. This is the first step in adding a new chain to your project, specifying its ID, name, native currency, RPC URLs, and block explorers.

```typescript
import { defineChain } from "viem";

// Base chain
export const base = defineChain({
  id: 8453,
  name: "Base",
  nativeCurrency: { name: "Base", symbol: "ETH", decimals: 18 },
  rpcUrls: {
    default: {
      http: ["https://mainnet.base.org"],
    },
  },
  blockExplorers: {
    default: {
      name: "Basescan",
      url: "https://basescan.org",
    },
  },
});

```

--------------------------------

### Configure Foundry Network - Scaffold-ETH 2

Source: https://docs.scaffoldeth.io/deploying/deploy-smart-contracts

This snippet illustrates how to add a custom RPC endpoint for a network in Foundry's configuration file. It shows the addition of the 'base' network with its corresponding RPC URL. This configuration is essential for Foundry to interact with the specified blockchain network.

```toml
[rpc_endpoints]
...other chains
base = "https://mainnet.base.org"
```

--------------------------------

### Import Balance Component (JavaScript/TypeScript)

Source: https://docs.scaffoldeth.io/components/Balance

This snippet shows how to import the Balance component from the Scaffold-ETH 2 library. It's a prerequisite for using the component in your dApp.

```javascript
import { Balance } from "~~/components/scaffold-eth";
```

--------------------------------

### Import EtherInput Component

Source: https://docs.scaffoldeth.io/components/EtherInput

This snippet shows how to import the EtherInput component from the Scaffold-ETH 2 library. It is a prerequisite for using the component in your React application.

```javascript
import { EtherInput } from "~~/components/scaffold-eth";
```

--------------------------------

### useScaffoldContract Hook

Source: https://docs.scaffoldeth.io/hooks/useScaffoldContract

This hook provides a contract instance by its name, allowing you to interact with its read and write methods. It's recommended to use `useScaffoldReadContract` and `useScaffoldWriteContract` for specific read/write operations.

```APIDOC
## useScaffoldContract Hook

### Description
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`.

### Method
`useScaffoldContract`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Configuration
- **contractName** (`string`) - Required - Name of the contract.
- **walletClient** (`WalletClient`) - Optional - Wallet client must be passed in order to call `write` methods of the contract.
- **chainId** (`string`) - Optional - Id of the chain the contract lives on. Defaults to `targetNetworks[0].id`.

### Request Example
```javascript
const { data: yourContract } = useScaffoldContract({
  contractName: "YourContract",
});

// To interact with write methods:
import { useWalletClient } from "wagmi";
const { data: walletClient } = useWalletClient();
const { data: yourContract } = useScaffoldContract({
  contractName: "YourContract",
  chainId: 31337,
  walletClient,
});
```

### Response
#### Return Value
- `data` (Object) - Represents viem's [contract instance](https://viem.sh/docs/contract/getContract.html#return-value). Can be used to call `read` and `write` methods of the contract.
- `isLoading` (Boolean) - Indicates if the contract is being loaded.

#### Response Example
```javascript
// Example of contract instance usage:
await yourContract?.read.greeting();
const setGreeting = async () => {
  await yourContract?.write.setGreeting(["the greeting here"]);
};
```
```

--------------------------------

### Basic Usage of Address Component (JSX)

Source: https://docs.scaffoldeth.io/components/Address

Demonstrates the basic usage of the Address component, rendering a given Ethereum address. The component will display the address, potentially resolve its ENS name, and show an avatar if available.

```jsx
<Address address="0x34aA3F359A9D614239015126635CE7732c18fDF3" />
```

--------------------------------

### Import RainbowKitCustomConnectButton in React

Source: https://docs.scaffoldeth.io/components/RainbowKitCustomConnectButton

This code snippet shows how to import the RainbowKitCustomConnectButton component from the Scaffold-ETH 2 library into your React application. Ensure the '~~/components/scaffold-eth' path is correctly aliased in your project.

```javascript
import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
```

--------------------------------

### useScaffoldWriteContract Return Values

Source: https://docs.scaffoldeth.io/hooks/useScaffoldWriteContract

This hook provides functions and properties to interact with smart contracts, including sending transactions and checking mining status.

```APIDOC
## `writeContractAsync` Function

### Description
Sends a transaction to the smart contract.

### Method
`writeContractAsync`

### Parameters
(Refer to wagmi `useWriteContract` documentation for detailed parameter information)

### Response
Returns a transaction hash upon successful submission.

## `isMining` Property

### Description
Indicates whether the transaction is currently being mined.

### Type
`boolean`

## Extended Properties

### Description
Includes properties inherited from wagmi's `useWriteContract` hook.

### Documentation
Refer to the [wagmi useWriteContract return values](https://wagmi.sh/react/api/hooks/useWriteContract#return-type) documentation for a complete list of types and properties.
```

--------------------------------

### Implement Button to Write to Contract with writeContractAsync (TypeScript/React)

Source: https://docs.scaffoldeth.io/recipes/WriteToContractWriteAsyncButton

This code snippet demonstrates how to create a React component that includes an input field and a button to write data to a smart contract. It utilizes the `useScaffoldWriteContract` hook to handle the transaction, including setting the function name, arguments, and value. It also includes basic error handling and logs the transaction block hash upon confirmation. Dependencies include React, viem, and Scaffold-ETH hooks.

```typescript
import { useState } from "react";
import { parseEther } from "viem";
import { useScaffoldWriteContract } from "~~/hooks/scaffold-eth";

export const Greetings = () => {
  const [newGreeting, setNewGreeting] = useState("");

  const { writeContractAsync, isPending } = useScaffoldWriteContract("YourContract");

  const handleSetGreeting = async () => {
    try {
      await writeContractAsync(
        {
          functionName: "setGreeting",
          args: [newGreeting],
          value: parseEther("0.01"),
        },
        {
          onBlockConfirmation: txnReceipt => {
            console.log("📦 Transaction blockHash", txnReceipt.blockHash);
          },
        },
      );
    } catch (e) {
      console.error("Error setting greeting", e);
    }
  };

  return (
    <>
      <input
        type="text"
        placeholder="Write your greeting"
        className="input border border-primary"
        onChange={e => setNewGreeting(e.target.value)}
      />
      <button className="btn btn-primary" onClick={handleSetGreeting} disabled={isPending}>
        {isPending ? <span className="loading loading-spinner loading-sm"></span> : "Send"}
      </button>
    </>
  );
};

```

--------------------------------

### Display Connected Account ETH Balance (React/TypeScript)

Source: https://docs.scaffoldeth.io/recipes/GetCurrentBalanceFromAccount

Fetches and displays the ETH balance of the currently connected account using the `useAccount` hook from wagmi and Scaffold-ETH 2's `Address` and `Balance` components. This component requires wagmi to be configured and the user to be connected to a wallet.

```tsx
import { useAccount } from "wagmi";
import { Address, Balance } from "~~/components/scaffold-eth";

export const ConnectedAddressBalance = () => { 
  const { address: connectedAddress } = useAccount();

  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">Your Ethereum Balance</h2>

      <div className="text-sm font-semibold mb-2">
        Address: <Address address={connectedAddress} />
      </div>

      <div className="text-sm font-semibold">
        Balance: <Balance address={connectedAddress} />
      </div>
    </div>
  );
};
```