### Launch NextJS Application

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/environment

Starts the NextJS application, typically accessible at `http://localhost:3000`. Users can interact with the smart contract via the Debug Contracts page or the example UI.

```bash
yarn start
```

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

### Create Scaffold-Stylus Project

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/installation

Use the npx command to create a new Scaffold-Stylus project interactively. This command guides you through setting up your project name and can include extensions.

```bash
npx create-stylus@latest

```

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

```

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

### Scaffold-Stylus Extension Installation Guide

Source: https://arb-stylus.github.io/scaffold-stylus-docs/extensions

This guide explains what extensions are and how to use them in your Scaffold-Stylus project. It covers the process of integrating these modular add-ons to enhance your dApp development.

```markdown
## 📄️ How to Install Extensions
This guide explains what are extensions and how to use them in your Scaffold-Stylus project.
```

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

### Install Scaffold-Stylus Extension

Source: https://arb-stylus.github.io/scaffold-stylus-docs/extensions/howToInstall

Command to install a specific extension when creating a new Scaffold-Stylus project. Replace {extension-name} with the desired extension, for example, 'erc20'.

```bash
npx create-stylus@latest -e {extension-name}
```

```bash
npx create-stylus@latest -e erc20
```

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

### Clone Scaffold-Stylus Repository

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/installation

Clone the Scaffold-Stylus GitHub repository locally to have full access to the source code and configuration. This includes installing dependencies and initializing submodules.

```bash
git clone https://github.com/Arb-Stylus/scaffold-stylus.git
cd scaffold-stylus
yarn install
git submodule update --init --recursive

```

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

### Install Stylus CLI with Cargo

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/installation

Install the Stylus CLI tool and the cargo-stylus-check utility using Cargo. This requires a specific Rust toolchain and the addition of a build target.

```bash
cargo install --force cargo-stylus cargo-stylus-check

```

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

### Verify Stylus Installation

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/troubleshooting

Checks if the `stylus` command-line tool is installed and accessible by displaying its version. This command is used after installing `pkg-config` and `libssl-dev`.

```bash
cargo stylus --version
```

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

### Initialize Local Blockchain

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/environment

Starts a local Arbitrum network using the Nitro dev node for testing and development. The configuration can be customized in `packages/stylus/nitro-devnode`.

```bash
yarn chain
```

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

### Start Local Stylus Network

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying/deploy-smart-contracts

Starts a local Stylus-compatible network using the Nitro dev node script. This is essential for local development and testing of Stylus smart contracts.

```bash
yarn chain
```

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

### Scaffold App Configuration Example

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying/deploy-nextjs-app

Example of extending the ScaffoldConfig type with a custom parameter `tokenIcon`.

```typescript
tokenIcon:"💎",
```

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

### Configure Rust Toolchain for Stylus

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/installation

Set the default Rust toolchain to match the project's requirements and add the `wasm32-unknown-unknown` build target for compiling Stylus contracts.

```bash
rustup default 1.89
rustup target add wasm32-unknown-unknown --toolchain 1.89

```

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

### useScaffoldContract Hook Example

Source: https://arb-stylus.github.io/scaffold-stylus-docs/hooks/useScaffoldContract

Demonstrates how to use the useScaffoldContract hook to get a contract instance and interact with its read and write methods. It shows how to call contract methods for reading data and sending transactions, including the necessary imports and configurations.

```javascript
import { useWalletClient } from "wagmi";

const { data: yourContract } = useScaffoldContract({
  contractName: "YourContract",
});

// Returns the greeting and can be called in any function, unlike useScaffoldReadContract
await yourContract?.read.greeting();

const { data: walletClient } = useWalletClient();
const { data: yourContract } = useScaffoldContract({
  contractName: "YourContract",
  chainId: 31337,
  walletClient,
});

const setGreeting = async () => {
  // Call the method in any function
  await yourContract?.write.setGreeting(["the greeting here"]);
};
```

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

### Basic Usage of EtherInput

Source: https://arb-stylus.github.io/scaffold-stylus-docs/components/EtherInput

Shows a basic example of using the EtherInput component with React state management.

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

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

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

### Install pkg-config and SSL for Stylus

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/troubleshooting

Resolves the 'stylus' command not recognized error by ensuring necessary system packages are installed. This involves updating the package list and installing `pkg-config` and `libssl-dev`.

```bash
sudo apt-get update && sudo apt-get install -y pkg-config libssl-dev
```

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

### Deploy NextJS App

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying

Guide on deploying a NextJS application to Vercel or IPFS.

```APIDOC
Deploy NextJS App:
  Deployment Targets: Vercel or IPFS.
  Prerequisites: Successfully deployed Stylus Smart Contracts.
```

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

### Restart Local Development Environment

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/troubleshooting

Restarts the local development setup by stopping and restarting Docker containers. This can help resolve issues with ABI generation.

```shell
yarn run dev
```

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

### Basic Usage of AddressInput

Source: https://arb-stylus.github.io/scaffold-stylus-docs/components/AddressInput

Shows a basic example of using the AddressInput component in a React application with state management.

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

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

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

### Install and Use dos2unix for Line Endings

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/troubleshooting

Fixes CRLF line endings in shell scripts for WSL environments. It involves installing `dos2unix`, converting the script, making it executable, and then running it.

```shell
sudo apt install dos2unix
```

```shell
dos2unix run-dev-node.sh
```

```shell
chmod +x run-dev-node.sh
```

```shell
bash run-dev-node.sh
```

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

### Example Stylus Contract Interface

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying/deploy-smart-contracts

A Solidity interface automatically generated by Stylus for a Rust program, representing the contract's functions and their signatures. This interface is typically exported to `packages/nextjs/contracts/deployedContracts.ts`.

```APIDOC
/**
 * This file was automatically generated by Stylus and represents a Rust program.
 * For more information, please see [The Stylus SDK](https://github.com/OffchainLabs/stylus-sdk-rs).
 */

// SPDX-License-Identifier: MIT-OR-APACHE-2.0
pragma solidity ^0.8.23;

interface ICounter {
  function number() external view returns(uint256);
  function setNumber(uint256 new_number) external;
  function increment() external;
}
```

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

### useTransactor Hook Example

Source: https://arb-stylus.github.io/scaffold-stylus-docs/hooks/useTransactor

Demonstrates how to use the useTransactor hook to send a transaction, including specifying the recipient address and value. It also shows how to await the transaction and the expected UI feedback for success.

```javascript
const transactor = useTransactor();
const writeTx = transactor({
  to: "0x97843608a00e2bbc75ab0C1911387E002565DEDE", // address of buidlguidl.eth
  value: 1000000000000000000n,
});
await writeTx();
```

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

### Basic Component Structure for Contract Interaction

Source: https://arb-stylus.github.io/scaffold-stylus-docs/recipes/WriteToContractWriteAsyncButton

This snippet outlines the initial setup for a React component designed to interact with a smart contract. It includes a basic input field and a button, serving as a placeholder before integrating the write functionality.

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

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

### Basic Usage of InputBase

Source: https://arb-stylus.github.io/scaffold-stylus-docs/components/InputBase

Demonstrates the basic usage of the InputBase component, including state management for its value and an onChange handler.

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

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

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

### Import InputBase Component

Source: https://arb-stylus.github.io/scaffold-stylus-docs/components/InputBase

Shows how to import the InputBase component from the Scaffold-ETH components library.

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

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

### Deploy Smart Contract

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/environment

Deploys a test smart contract to the local network. The contract and deployment script are located in `packages/stylus/your-contract/src` and `packages/stylus/scripts/deploy.ts` respectively.

```bash
yarn deploy
```

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

### Deploy Stylus Smart Contracts

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying

Instructions for deploying Stylus smart contracts to Arbitrum networks, including necessary adjustments.

```APIDOC
Deploy Stylus Smart Contracts:
  Purpose: Deploy Stylus smart contracts to Arbitrum networks.
  Adjustments: Requires specific configuration changes for Arbitrum deployment.
  Next Steps: Deploy Your NextJS App.
```

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

### Get Balance of Connected Account

Source: https://arb-stylus.github.io/scaffold-stylus-docs/recipes

Learn how to retrieve and display the ETH balance of the connected account in your dApp using Scaffold-Stylus.

```en
## 📄️ Get balance of the connected account
Learn how to retrieve and display the ETH balance of the connected account in your dApp.
```

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

### Run Smart Contract Tests

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/environment

Executes smart contract tests. Refer to the test documentation for more guidance on writing and running tests.

```bash
yarn stylus:test
```

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

### Deploy to IPFS CLI

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying/deploy-nextjs-app

Command to build and deploy your NextJS app to IPFS using the Scaffold-Stylus CLI.

```bash
yarn ipfs
```

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

### Sending a Transaction with writeContractAsync

Source: https://arb-stylus.github.io/scaffold-stylus-docs/hooks/useScaffoldWriteContract

An example of calling the writeContractAsync function (aliased as writeYourContractAsync) to send a transaction to a smart contract's 'setGreeting' function, including arguments and value.

```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);
    }
  }}
>
  SetGreeting
</button>
```

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

### Import AddressInput Component

Source: https://arb-stylus.github.io/scaffold-stylus-docs/components/AddressInput

Demonstrates how to import the AddressInput component from the scaffold-eth library.

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

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

### Contributing Guidelines

Source: https://arb-stylus.github.io/scaffold-stylus-docs/contributing

General guidelines for contributing to Scaffold-Stylus, including how to report issues, submit pull requests, and maintain code formatting.

```markdown
# 🙏 Contributing to Scaffold-Stylus

We welcome contributions to Scaffold-Stylus! This section aims to provide an overview of the contribution workflow to help us make the contribution process effective for everyone involved.

The project is under active development. You can view the open Issues, follow the development process, and contribute to the project.

## Getting Started​

You can contribute to this repo in many ways:
  * Solve open issues
  * Report bugs or feature requests
  * Improve the documentation

Contributions are made via Issues and Pull Requests (PRs). A few general guidelines for contributions:
  * Search for existing Issues and PRs before creating your own.
  * Contributions should only fix/add the functionality in the issue OR address style issues, _not both_.
  * If you're running into an error, please give context. Explain what you're trying to do and how to reproduce the error.
  * Please use the same formatting in the code repository. You can configure your IDE to do this by using the prettier / linting config files included in each package.
  * If applicable, please edit the README.md file to reflect changes.
```

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

### Import EtherInput Component

Source: https://arb-stylus.github.io/scaffold-stylus-docs/components/EtherInput

Demonstrates how to import the EtherInput component from the Scaffold-Stylus library.

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

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

### useScaffoldWriteContract Hook Usage

Source: https://arb-stylus.github.io/scaffold-stylus-docs/hooks/useScaffoldWriteContract

Example of how to use the useScaffoldWriteContract hook to write to a smart contract. It demonstrates initializing the hook with a contract name and then calling the returned async function to send a transaction.

```javascript
const { writeContractAsync: writeYourContractAsync } = useScaffoldWriteContract({
  contractName: "YourContract"
});
```

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

### Set Rust Toolchain for WASM Compilation

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/troubleshooting

Ensures the correct Rust toolchain version (1.87) is installed and configured for WASM compilation. This is crucial for contract deployment and compilation errors.

```rust
rustup default 1.87
```

```rust
rustup target add wasm32-unknown-unknown --toolchain 1.87
```

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

### Frontend Configuration for Target Networks

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying/deploy-smart-contracts

Update the `scaffold.config.ts` file to include your target chain in the `targetNetworks` array. This ensures the frontend connects to the correct network and generates the necessary ABI.

```typescript
import*as chains from"viem/chains";
// ...
targetNetworks:[chains.arbitrumSepolia],

```

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

### Scaffold-Stylus Extensions Overview

Source: https://arb-stylus.github.io/scaffold-stylus-docs/extensions

Extensions are modular add-ons for Scaffold-Stylus that provide additional functionality or serve as examples for specific features. They allow for quick addition of new features, pages, contracts, or components during project creation, ensuring seamless integration with Scaffold-Stylus core functionality.

```markdown
# 🔌 Extensions
Extensions are modular add-ons for Scaffold-Stylus that provide additional functionality or serve as examples for specific features. They allow you to quickly add new features, pages, contracts, or components during project creation, ensuring seamless integration with Scaffold-Stylus core functionality.
```

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

### Import IntegerInput Component

Source: https://arb-stylus.github.io/scaffold-stylus-docs/components/IntergerInput

Demonstrates how to import the IntegerInput component from the Scaffold-Stylus library.

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

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

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

Source: https://arb-stylus.github.io/scaffold-stylus-docs/recipes/GetCurrentBalanceFromAccount

Fetches and displays the ETH balance of the currently connected account using wagmi's useAccount hook and Scaffold-Stylus's Address and Balance components. This component provides a clear view of the user's balance and address.

```typescript
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>
  );
};
```

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

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

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

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

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

### Deploying and Estimating Gas

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying/deploy-smart-contracts

Commands to deploy your dApp to a specified network and to estimate gas costs before deployment. Replace `<network>` with your target network's identifier.

```shell
yarn deploy --network <network>

```

```shell
yarn deploy --network <network> --estimate-gas

```

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

### Environment Variable Configuration for Networks

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying/deploy-smart-contracts

Configure your target network's RPC endpoint and your wallet's private key using environment variables. The system uses default public RPC URLs if none are provided. Ensure your private key is kept secure.

```shell
RPC_URL_SEPOLIA=https://your-network-rpc-url

```

```shell
PRIVATE_KEY_SEPOLIA=your_private_key_here

```

```shell
ACCOUNT_ADDRESS_SEPOLIA=your_account_address_here

```

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

### View Supported Networks

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying/deploy-smart-contracts

Retrieves information about supported Arbitrum and Orbit networks, including their RPC URLs. This helps in configuring deployment targets.

```bash
yarn info:networks
```

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

### Deploy to Vercel CLI

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying/deploy-nextjs-app

Commands to deploy your NextJS app to Vercel using the Vercel CLI. Includes options for production deployment, preview deployment, and skipping type checks.

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

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

### BlockieAvatar Component Import

Source: https://arb-stylus.github.io/scaffold-stylus-docs/components/BlockieAvatar

Imports the BlockieAvatar component from the scaffold-eth components directory.

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

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

### BlockieAvatar Component Usage

Source: https://arb-stylus.github.io/scaffold-stylus-docs/components/BlockieAvatar

Demonstrates how to use the BlockieAvatar component, passing the address and size props.

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

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

### Import RainbowKitCustomConnectButton

Source: https://arb-stylus.github.io/scaffold-stylus-docs/components/RainbowKitCustomConnectButton

Demonstrates how to import the RainbowKitCustomConnectButton component from the Scaffold-Eth components library.

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

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

### Scaffold-Stylus Overview

Source: https://arb-stylus.github.io/scaffold-stylus-docs/index

Provides an introduction to Scaffold-Stylus, highlighting its purpose as a toolkit for building decentralized applications on Arbitrum. It details the core features and the technology stack used.

```en
Scaffold-Stylus is everything you need to get started building decentralized applications on Arbitrum! 🚀
⚙️ Built using NextJS, RainbowKit, Hardhat, Foundry, Wagmi, and TypeScript.

Scaffold-Stylus is an open-source, up-to-date toolkit for building decentralized applications (dapps) on the Arbitrum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.

Key Features:
  * Contract Hot Reload: Your frontend auto-adapts to your smart contract as you edit it.
  * Burner Wallet & Local Faucet: Quickly test your application with a burner wallet and local faucet.
  * Integration with Wallet Providers: Connect to different wallet providers and interact with the Arbitrum network.
```

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

### Deploy Stylus Contract

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying/deploy-smart-contracts

Deploys a Stylus smart contract to a specified network. Supports options for network selection, gas estimation, and setting maximum fees.

```bash
yarn deploy [...options]

Available Options:
  --network <network>: Specify which network to deploy to
  --estimate-gas: Only perform gas estimation without deploying
  --max-fee=<maxFee>: Set maximum fee per gas in gwei
```

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

### useTransactor API Documentation

Source: https://arb-stylus.github.io/scaffold-stylus-docs/hooks/useTransactor

Provides detailed documentation for the useTransactor hook and its associated callback function, including parameter types, descriptions, optional configurations, and return values.

```APIDOC
useTransactor

Description:
Use this hook to interact with the chain and give UI feedback on the transaction status. Any error will instead show a popup with a nice error message.

Parameters:
* _walletClient (optional): `WalletClient` - The wallet client that should sign the transaction. Defaults to the connected wallet client, and is only needed if the transaction is not already sent using `writeContractAsync`.

Returns:
* The callback function that is used to initialize the UI feedback flow.

callback function

Description:
This function is used to initialize the UI feedback flow for transactions.

Parameters:
* tx: `sendTransaction`-parameters or `Promise<Hash>` - Either valid parameters for `sendTransaction`-parameters or a promise that resolves with the transaction hash, e.g. Wagmi's `writeContractAsync` function.
* options (optional): `object` - Additional options for the confirmation.
  * blockConfirmations (optional): `number` - The number of block confirmations to wait for before resolving. Defaults to 1.
  * onBlockConfirmation (optional): `function` - A callback function that is called once all `blockConfirmations` is reached.

Returns:
* A promise that resolves with the transaction hash once the transaction is mined.
```

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

### Fix Access Denied for ABI Generation

Source: https://arb-stylus.github.io/scaffold-stylus-docs/quick-start/troubleshooting

Resolves 'access denied' errors during ABI generation by changing ownership of the `target` directory to the current user. This ensures the user has the necessary permissions to write files.

```shell
sudo chown -R $USER:$USER target
```

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

### Deploy Test Contract Locally

Source: https://arb-stylus.github.io/scaffold-stylus-docs/deploying/deploy-smart-contracts

Deploys a test smart contract to the local Stylus-compatible network. The contract is located in `packages/stylus/your-contract/src` and can be customized.

```bash
yarn deploy
```