### Clone and Start Ant Design Web3 Project

Source: https://github.com/ant-design/ant-design-web3/blob/main/README.md

Clone the Ant Design Web3 repository from GitHub, install dependencies using pnpm, and start the development server.

```bash
$ git clone git@github.com:ant-design/ant-design-web3.git
$ cd ant-design-web3
$ pnpm i
$ pnpm start
```

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

### Install @ant-design/web3-sui

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/sui/README.md

Install the required packages using npm.

```bash
npm install @ant-design/web3 @ant-design/web3-sui --save
```

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

### Install Project Dependencies

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/dev-init.md

Navigate into the project directory and install all required npm packages after project creation.

```bash
cd ant-design-web3-demo
npm i
```

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

### Install Dependencies

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/tron/README.md

Install the necessary packages for @ant-design/web3 and its TRON adapter.

```bash
npm install @ant-design/web3 @ant-design/web3-tron --save
```

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

### Install Dependencies

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/ton/README.md

Install the necessary packages for Ant Design Web3 and the TON adapter.

```bash
npm install @ant-design/web3 @ant-design/web3-ton --save
```

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

### Install @ant-design/web3 and @ant-design/web3-solana

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/solana/README.md

Install the necessary packages for Ant Design Web3 and its Solana adapter using npm.

```bash
npm install @ant-design/web3 @ant-design/web3-solana --save
```

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

### Install @ant-design/web3

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/README.md

Use npm to install the package as a dependency in your project.

```bash
npm install @ant-design/web3
```

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

### Install @ant-design/web3 and @ant-design/web3-bitcoin

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/bitcoin/README.md

Install the necessary packages for Bitcoin integration with Ant Design Web3.

```bash
npm install @ant-design/web3 @ant-design/web3-bitcoin
```

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

### Install Ant Design Web3 dependencies

Source: https://context7.com/ant-design/ant-design-web3/llms.txt

Install the core library along with the Ethereum adapter and required peer dependencies.

```bash
npm install antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query
```

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

### Install viem Dependency

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/dev-call-contract.md

Install the required viem library which provides low-level utilities for wagmi.

```bash
npm install viem
```

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

### DefaultGuide API

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/connect-modal/index.md

Configuration for the newbie guide panel within the ConnectModal.

```APIDOC
## DefaultGuide

### Parameters
#### Request Body
- **title** (string) - Optional - Guide title
- **infos** (GuideInfo[]) - Optional - Guide info list
- **moreLink** (string) - Optional - More link
- **getWalletBtnText** (string) - Optional - Get wallet button text
- **moreLinkText** (string) - Optional - More link text
```

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

### Install Solana Web3 dependencies

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/advanced-call-contract-solana.md

Install the required @solana/web3.js library version 1.x for blockchain interaction.

```shell
npm install @solana/web3.js@1
```

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

### Install Ant Design Web3 Dependencies

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/guide/quick-start.zh-CN.md

Install the necessary Ant Design Web3 packages using npm or pnpm. Ensure Node.js v18 or higher is installed.

```bash
npm install antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save
```

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

### Quick Connect Configuration

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/connect-button/index.zh-CN.md

Enables direct display of installed wallets and protocols on the button.

```tsx
<code src="./demos/quick-connect"></code>
```

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

### Quick Connect Configuration

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/connect-button/index.md

Enables display of installed wallets and universal protocols directly on the button.

```tsx
<code src="./demos/quick-connect.tsx"></code>
```

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

### Install Dependencies

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/dev-connect.md

Install necessary packages for wagmi integration with Ant Design Web3. This includes `@ant-design/web3-wagmi`, `wagmi`, `viem`, and `@tanstack/react-query`.

```shell
npm i @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save
```

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

### Custom Guide Panel

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/connect-modal/index.zh-CN.md

Provides custom content for the onboarding guide panel.

```tsx
<code src="./demos/customGuide.tsx"></code>
```

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

### Install @ant-design/web3-icons

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/icons/README.md

Use npm to add the icon library to your project dependencies.

```bash
npm install @ant-design/web3-icons --save
```

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

### Check Node.js and npm Versions

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/dev-init.md

Verify that Node.js and npm are installed and meet the minimum version requirements for the project.

```bash
node -v # => v20.0.0+
npm -v # => 10.0.0+
npx -v # => 10.0.0+
```

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

### Recommended Configuration

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/ethereum/index.md

Standard setup for DApps including EIP6963, ENS support, default wallets, WalletConnect, and quick connection.

```tsx
<code src="./demos/recommend.tsx"></code>
```

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

### Install Web3 Icons

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/icons/index.md

Install the @ant-design/web3-icons package to use icons in your project. This command saves the package to your dependencies.

```bash
npm install @ant-design/web3-icons --save
# or
yarn add @ant-design/web3-icons
```

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

### Install Ant Design Web3

Source: https://github.com/ant-design/ant-design-web3/blob/main/README.md

Install Ant Design Web3 and its peer dependency antd using npm.

```shell
npm i antd @ant-design/web3 --save
```

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

### Install web3js Dependencies

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/ethereum-web3js/index.md

Install the necessary packages for using the web3js adapter with Ant Design Web3. This includes the core web3 package and the specific adapter.

```bash
npm install @ant-design/web3 @ant-design/web3-eth-web3js web3 --save
```

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

### Configure WagmiWeb3ConfigProvider with Imports

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/dev-connect.md

Import `WagmiWeb3ConfigProvider` and other necessary wagmi components to set up the Ethereum adapter. This example shows the basic structure before adding components.

```typescript
import { createConfig, http } from "wagmi";
import { mainnet } from "wagmi/chains";
import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";
import { Address } from "@ant-design/web3";

export default function Web3() {
  return (
      <WagmiWeb3ConfigProvider>
        <div
          style={{
            height: "100vh",
            padding: 64,
          }}
        >
          <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
        </div>
     </WagmiWeb3ConfigProvider>
  );
};
```

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

### Basic Icon Usage

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/icons/index.md

Demonstrates the basic usage of icons from the @ant-design/web3-icons package. Ensure the package is installed before using.

```tsx
import { HeartFilled } from "@ant-design/web3-icons";

const App = () => (
  <>
    <HeartFilled />
  </>
);
```

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

### Basic Web3ConfigProvider Usage

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/web3-config-provider/index.md

Demonstrates the fundamental setup of Web3ConfigProvider to enable global configuration and state management for Ant Design Web3 components.

```typescript
import React from 'react';
import { Web3ConfigProvider } from '@ant-design/web3';

const App = () => (
  <Web3ConfigProvider>
    {/* Your application components */}
  </Web3ConfigProvider>
);

export default App;
```

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

### Basic Solana Usage

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/solana/index.md

Demonstrates the basic setup for connecting to Solana using Ant Design Web3 components. Ensure you have the necessary providers configured.

```typescript
import {
  SolanaWeb3ConfigProvider,
  useAccount,
  useConnectWallet,
} from '@ant-design/web3-solana';
import { Button, ConnectButton } from '@ant-design/web3';

const App = () => {
  return (
    <SolanaWeb3ConfigProvider>
      <ConnectButton />
      <AccountProfile />
    </SolanaWeb3ConfigProvider>
  );
};

const AccountProfile = () => {
  const { address } = useAccount();
  const { connect, disconnect, connecting, connected } = useConnectWallet();

  return (
    <Button
      onClick={async () => {
        if (connecting) return;
        if (connected) {
          await disconnect();
          return;
        }
        await connect();
      }}
    >
      {connecting
        ? 'Connecting'
        : connected
        ? 'Disconnect'
        : 'Connect Wallet'}
    </Button>
  );
};

export default App;

```

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

### Using NFTImage with wagmi

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/nft-image/index.md

Integration example for fetching and displaying NFT data using wagmi hooks.

```tsx
<code src="./demos/wagmi.tsx"></code>
```

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

### Integrate Ant Design Web3 with Wagmi

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/guide/ant-design-web3.md

Example demonstrating the usage of Ant Design Web3 components with the Wagmi adapter.

```tsx
<code compact src="./demos/try-it-out/index.tsx"></code>
```

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

### Basic CryptoPrice Usage

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/crypto-price/index.md

Demonstrates the fundamental usage of the CryptoPrice component. No specific setup or imports are required beyond standard React and Ant Design Web3 integration.

```typescript
import { CryptoPrice } from '@ant-design/web3';

export default () => {
  return (
    <CryptoPrice value={1000000000000000000} />
  );
};
```

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

### Solana Transaction Without Wallet

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/advanced-call-contract-solana.md

This example demonstrates how to send a Solana transaction, including a transfer and a memo instruction, by signing with a private key. It's useful for debugging on test networks. Ensure you have test tokens or sufficient balance.

```typescript
import {
  Keypair,
  Transaction,
  SystemProgram,
  sendAndConfirmTransaction,
} from "@solana/web3.js";

const writeMemo = async () => {
  // 1. Generate a new keypair
  const keypair = Keypair.generate();
  const publicKey = keypair.publicKey;
  const privateKey = keypair.secretKey;

  // 2. Obtain test tokens (optional, if account has no balance)
  // const connection = new Connection(clusterApiUrl("devnet"));
  // await connection.requestAirdrop(publicKey, 2 * LAMPORTS_PER_SOL);
  // await confirmTransaction(connection, signature, "confirmed");

  // 3. Create a transfer instruction
  const transferInstruction = SystemProgram.transfer({
    fromPubkey: publicKey,
    toPubkey: new PublicKey("61QgmBmUw1Nekq7wGXtA7CCETUcbmTBJPjDWGLSrPqRK"), // Replace with a valid recipient
    lamports: 100000000, // 0.1 SOL
  });

  // 4. Create a memo instruction
  const memoInstruction = new TransactionInstruction({
    keys: [{ pubkey: publicKey, isSigner: true, isWritable: false }],
    programId: new PublicKey("MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr"), // Memo program ID
    data: Buffer.from("Hello Ant Design Web3!"),
  });

  // 5. Create a transaction and add instructions
  const transaction = new Transaction().add(transferInstruction, memoInstruction);

  // 6. Send and confirm the transaction
  try {
    const signature = await sendAndConfirmTransaction(connection, transaction, [keypair]);
    console.log("Transaction sent and confirmed:", signature);
    // You can view the transaction details on a blockchain explorer:
    // console.log(`https://solscan.io/tx/${signature}?cluster=devnet`);
  } catch (error) {
    console.error("Transaction failed:", error);
  }
};

// To run this example, you would need to:
// 1. Install @solana/web3.js and @ant-design/web3-solana
// 2. Set up a Solana connection (e.g., to devnet)
// 3. Uncomment and configure the airdrop part if needed
// 4. Call the writeMemo() function

```

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

### Supporting Multiple Solana Networks

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/solana/index.md

Configure support for different Solana networks by defining the `chains` property in `SolanaWeb3ConfigProvider`. This example includes the Solana mainnet.

```typescript
import {
  SolanaWeb3ConfigProvider,
  useAccount,
  useConnectWallet,
} from '@ant-design/web3-solana';
import { Button, ConnectButton } from '@ant-design/web3';
import { mainnet } from '@solana/web3.js'; // Import Solana mainnet

const App = () => {
  return (
    <SolanaWeb3ConfigProvider 
      chains={[
        {
          // Solana mainnet beta
          name: 'Solana Mainnet',
          chain: mainnet.chain,
          rpcUrl: 'https://rpc.ankr.com/solana',
          explorerUrl: 'https://explorer.solana.com',
        }
        // Add other chains here if needed
      ]}
    >
      <ConnectButton />
      <AccountProfile />
    </SolanaWeb3ConfigProvider>
  );
};

const AccountProfile = () => {
  const { address } = useAccount();
  const { connect, disconnect, connecting, connected } = useConnectWallet();

  return (
    <Button
      onClick={async () => {
        if (connecting) return;
        if (connected) {
          await disconnect();
          return;
        }
        await connect();
      }}
    >
      {connecting
        ? 'Connecting'
        : connected
        ? 'Disconnect'
        : 'Connect Wallet'}
    </Button>
  );
};

export default App;

```

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

### Sui Web3 Component Examples

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/sui/index.md

Demonstrates the usage of various Ant Design Web3 components adapted for the Sui blockchain.

```tsx
import {
  SuiWeb3ConfigProvider,
  ConnectButton,
  WalletInfo,
  BalanceDisplay,
  SuiComponentsConfigProvider,
} from '@ant-design/web3-sui';

export default () => (
  <SuiWeb3ConfigProvider>
    <ConnectButton />
    <WalletInfo />
    <BalanceDisplay />
    <SuiComponentsConfigProvider>
      {/* More Sui specific components */}
    </SuiComponentsConfigProvider>
  </SuiWeb3ConfigProvider>
);
```

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

### Basic Address Usage

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/address/index.zh-CN.md

Demonstrates the fundamental usage of the Address component. No specific setup is required beyond importing the component.

```tsx
import React from 'react';
import { Address } from '@ant-design/web3';

const App: React.FC = () => (
  <Address address="0x1234567890abcdef1234567890abcdef12345678" />
);
```

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

### Basic WagmiWeb3ConfigProvider Setup

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/dev-connect.md

Integrate `WagmiWeb3ConfigProvider` into your React application to adapt wagmi for Ant Design Web3. This provider automatically creates a wagmi configuration.

```typescript
import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
import { Address } from "@ant-design/web3";

export default function Web3() {
  return (
    <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
  );
};
```

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

### Install Ant Design Web3 Dependencies

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/dev-init.md

Add the core Ant Design Web3 package and its related components to your project's dependencies.

```bash
npm i @ant-design/web3 --save
```

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

### Using Built-in Language Packs

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/guide/intl.zh-CN.md

Utilize the pre-built language packs provided by `@ant-design/web3` for common languages. This simplifies setup for supported locales.

```typescript
import { Web3ConfigProvider } from '@ant-design/web3';
import { enUS } from 'date-fns/locale';

const App = () => (
  <Web3ConfigProvider locale={enUS}>
    {/* Your application components */}
  </Web3ConfigProvider>
);
```

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

### Customizing Wallet Information

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/solana/index.md

Allows customization of wallet information when built-in wallets don't meet requirements. This example shows a basic structure for a custom wallet.

```typescript
import {
  SolanaWeb3ConfigProvider,
  useAccount,
  useConnectWallet,
} from '@ant-design/web3-solana';
import { Button, ConnectButton } from '@ant-design/web3';
import { Wallet } from '@ant-design/web3';

// Define your custom wallet structure
interface CustomWallet extends Wallet {
  // Add custom properties if needed
}

const myCustomWallet: CustomWallet = {
  name: 'My Custom Wallet',
  icon: 'url_to_your_icon.png',
  // Implement necessary methods like connect, disconnect, etc.
  // This is a simplified example; actual implementation will depend on the wallet's SDK
  connect: async () => { console.log('Connecting custom wallet...'); return { address: 'custom_address' }; },
  disconnect: async () => { console.log('Disconnecting custom wallet...'); },
  // ... other required methods like getAccounts, signMessage, etc.
};

const App = () => {
  return (
    <SolanaWeb3ConfigProvider 
      wallets={{
        add: [
          {
            instance: myCustomWallet
          }
        ]
      }}
    >
      <ConnectButton />
      <AccountProfile />
    </SolanaWeb3ConfigProvider>
  );
};

const AccountProfile = () => {
  const { address } = useAccount();
  const { connect, disconnect, connecting, connected } = useConnectWallet();

  return (
    <Button
      onClick={async () => {
        if (connecting) return;
        if (connected) {
          await disconnect();
          return;
        }
        await connect();
      }}
    >
      {connecting
        ? 'Connecting'
        : connected
        ? 'Disconnect'
        : 'Connect Wallet'}
    </Button>
  );
};

export default App;

```

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

### Implement USDT/USDC Payments with Ant Design Web3 Adapter

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/guide/payment-in-usdt.md

Use this adapter to connect to various blockchains and support USDT/USDC payments simultaneously. Ensure you have the necessary dependencies installed.

```typescript
import { ConnectButton, useAccount, useBalance, useChainId } from '@ant-design/web3';
import { useState, useEffect } from 'react';
import { message, Spin } from 'antd';
import { formatUnits } from 'ethers';
import { useUSDT } from '@ant-design/web3/es/hooks/useUSDT';

const USDT_ADDRESS = {
  1: '0xdAC17F95823f0E192317472194A3247049841761',
  5: '0x912CE595472E507f989312016773063391175795',
};

const Page = () => {
  const { address, chain } = useAccount();
  const { data: balance, isLoading: balanceLoading } = useBalance();
  const chainId = useChainId();
  const { getUSDTContract } = useUSDT();

  const [usdtBalance, setUsdtBalance] = useState<string>('0');
  const [usdtLoading, setUsdtLoading] = useState<boolean>(false);

  useEffect(() => {
    const fetchUSDTBalance = async () => {
      if (!address || !chainId) return;
      setUsdtLoading(true);
      try {
        const usdtAddress = USDT_ADDRESS[chainId as keyof typeof USDT_ADDRESS];
        if (!usdtAddress) {
          message.error('Unsupported chain');
          setUsdtLoading(false);
          return;
        }
        const usdtContract = getUSDTContract(usdtAddress);
        const res = await usdtContract.balanceOf(address);
        setUsdtBalance(formatUnits(res));
      } catch (error) {
        message.error('Failed to fetch USDT balance');
        console.error(error);
      } finally {
        setUsdtLoading(false);
      }
    };
    fetchUSDTBalance();
  }, [address, chainId, getUSDTContract]);

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '16px',
        padding: '20px',
        border: '1px solid #eee',
        borderRadius: '8px',
        maxWidth: '400px',
        margin: '20px auto',
      }}
    >
      <ConnectButton />
      {address && (
        <div>
          <p>Account: {address}</p>
          <p>
            Balance:
            {balanceLoading ? (
              <Spin size="small" />
            ) : (
              `${balance?.formatted} ${balance?.symbol}`
            )}
          </p>
          <p>
            USDT Balance:
            {usdtLoading ? (
              <Spin size="small" />
            ) : (
              `${usdtBalance} USDT`
            )}
          </p>
        </div>
      )}
    </div>
  );
};

export default Page;

```

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

### Create Next.js Project

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/dev-init.md

Initialize a new Next.js project with a specific version of create-next-app to ensure tutorial compatibility. This command sets up the basic structure for a React application.

```bash
npx create-next-app@14.0.4 # We specify the version of create-next-app as 14.0.4 to avoid the differences caused by the upgrade affecting the details of the tutorial
```

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

### EIP6963 Wallet Discovery

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/ethereum/index.md

Enables automatic wallet detection to prevent conflicts when multiple wallets are installed.

```tsx
<code src="./demos/eip6963.tsx"></code>
```

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

### Configure Bitcoin Web3 Provider and Connect Button

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/bitcoin/README.md

Set up the BitcoinWeb3ConfigProvider with desired wallets and render the ConnectButton for Bitcoin connections.

```tsx
import { ConnectButton, Connector } from '@ant-design/web3';
import {
  BitcoinWeb3ConfigProvider,
  OkxWallet,
  UnisatWallet,
  XverseWallet,
} from '@ant-design/web3-bitcoin';

const App: React.FC = () => {
  return (
    <BitcoinWeb3ConfigProvider wallets={[XverseWallet(), UnisatWallet(), OkxWallet()]}>
      <Connector>
        <ConnectButton />
      </Connector>
    </BitcoinWeb3ConfigProvider>
  );
};

export default App;
```

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

### NFTCard with Wagmi Integration

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/nft-card/index.md

Integrates NFTCard with wagmi for blockchain data fetching. Requires wagmi setup.

```tsx
import { NFTCard } from '@ant-design/web3';
import { useAccount } from 'wagmi';

const App = () => {
  const { address } = useAccount();
  return (
    <NFTCard
      address="0x4477744777447774477744777447774477744777"
      tokenId={1}
      // You can use the connected address if needed
      // address={address}
    />
  );
};
```

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

### 执行 changeset 命令

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/guide/changelog.zh-CN.md

在项目根目录下运行 changeset 命令以启动变更记录流程。

```bash
MacBook-Pro ant-design-web3 % pnpm changeset

> @ant-design/web3-docs@0.0.0 changeset ant-design-web3
> changeset
```

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

### Recommended Solana Configuration

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/solana/index.md

Use this configuration for a rich set of features including automatic wallet detection, balance display, default wallet support (Phantom, OKX) with download guidance, quick connection, simplified UI, and custom RPC.

```typescript
import {
  SolanaWeb3ConfigProvider,
  useAccount,
  useConnectWallet,
} from '@ant-design/web3-solana';
import { Button, ConnectButton } from '@ant-design/web3';
import { notification } from 'antd';

const App = () => {
  return (
    <SolanaWeb3ConfigProvider 
      wallets={{
        // Add Phantom and OKX wallets by default
        // If the user has not installed the wallet, provide download guidance
        // Automatically add detected plugin wallets
        autoAddRegisteredWallets: true,
        // Add Phantom and OKX wallets by default
        // If the user has not installed the wallet, provide download guidance
        add: [
          {
            instance: new PhantomWallet() // Phantom wallet
          },
          {
            instance: new OkxWallet() // OKX wallet
          }
        ]
      }}
      // Display balance
      balance={true}
      // Configure quickConnect to provide quick connection entry to simplify user operations
      quickConnect={true}
      // Use simple mode and disable group to simplify the interface
      simple={true}
      // Use a custom RPC provider to provide a better node connection experience
      rpcProvider={async (chain) => {
        // You can use the chain information to configure the RPC URL
        // For example, you can use the chain ID to select the RPC URL
        // Or you can use the chain name to select the RPC URL
        // For more information, please refer to the Solana documentation
        // https://solana-labs.github.io/solana-web3.js/v1.x/classes/Connection.html#constructor
        return 'https://rpc.ankr.com/solana';
      }}
    >
      <ConnectButton />
      <AccountProfile />
    </SolanaWeb3ConfigProvider>
  );
};

const AccountProfile = () => {
  const { address } = useAccount();
  const { connect, disconnect, connecting, connected } = useConnectWallet();

  return (
    <Button
      onClick={async () => {
        if (connecting) return;
        if (connected) {
          await disconnect();
          return;
        }
        const result = await connect();
        if (result.error) {
          notification.error({ message: result.error.message });
        }
      }}
    >
      {connecting
        ? 'Connecting'
        : connected
        ? 'Disconnect'
        : 'Connect Wallet'}
    </Button>
  );
};

export default App;

```

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

### 创建 Next.js 项目

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/dev-init.zh-CN.md

使用指定版本的 create-next-app 初始化项目。

```bash
npx create-next-app@14.0.4 # 我们指定 create-next-app 的版本为 14.0.4，避免升级带来的差异影响教程的细节
```

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

### Recommended Sui Configuration

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/sui/index.md

Use this configuration for most Sui dApps to automatically detect wallets, display balances and SNS, and simplify connection with quickConnect in simple mode.

```tsx
import { SuiWeb3ConfigProvider } from '@ant-design/web3-sui';

export default () => (
  <SuiWeb3ConfigProvider>
    {/* Your app content */}
  </SuiWeb3ConfigProvider>
);
```

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

### Customizing NFT Metadata Fetching

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/nft-image/index.md

Example of providing a custom getNFTMetadata function to handle specific metadata requirements.

```tsx
<code src="./demos/customGetNFTMetadata.tsx"></code>
```

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

### Get Ethereum network chain ID

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/intro-call-contract.md

Retrieves the current network ID via the injected window.ethereum provider.

```js
await window.ethereum.request({ method: 'eth_chainId' }); // 0x1 represents the Ethereum mainnet
```

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

### Adding More Solana Wallets

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/solana/index.md

Manually configure additional wallets by importing them from `@solana/wallet-adapter-ADAPTER_YOUR_NEED`. This helps reduce package size.

```typescript
import {
  SolanaWeb3ConfigProvider,
  useAccount,
  useConnectWallet,
} from '@ant-design/web3-solana';
import { Button, ConnectButton } from '@ant-design/web3';
import { PhantomWallet, OkxWallet } from '@solana/wallet-adapter-wallets'; // Example wallets

const App = () => {
  return (
    <SolanaWeb3ConfigProvider 
      wallets={{
        add: [
          {
            instance: new PhantomWallet() // Phantom wallet
          },
          {
            instance: new OkxWallet() // OKX wallet
          }
          // Add more wallets here
        ]
      }}
    >
      <ConnectButton />
      <AccountProfile />
    </SolanaWeb3ConfigProvider>
  );
};

const AccountProfile = () => {
  const { address } = useAccount();
  const { connect, disconnect, connecting, connected } = useConnectWallet();

  return (
    <Button
      onClick={async () => {
        if (connecting) return;
        if (connected) {
          await disconnect();
          return;
        }
        await connect();
      }}
    >
      {connecting
        ? 'Connecting'
        : connected
        ? 'Disconnect'
        : 'Connect Wallet'}
    </Button>
  );
};

export default App;

```

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

### Ethers.js v5 Compatibility

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/ethereum-ethersjs/index.md

Instructions and code example for using Ant Design Web3 with legacy versions of Ethers.js (v5.x).

```APIDOC
## Ethers.js v5 Compatibility

### Description
If you are a user of `ethers@5.x`, you can manually install the v5 version of ethers and modify the adapter import method. Versions prior to v5 are no longer supported. It is recommended to use after upgrading to the latest version.

### Installation
```bash
npm install @ant-design/web3 @ant-design/web3-ethers-v5 ethers@legacy-v5
# or
yarn add @ant-design/web3 @ant-design/web3-ethers-v5 ethers@legacy-v5
```

### Usage
```tsx
import { EthersWeb3ConfigProvider, useEthersProvider } from '@ant-design/web3-ethers-v5'; // importing the adapter for ethers@5.x

const Component = () => {
  const provider = useEthersProvider();
  // do something with provider
  return (
    <div>
      Provider: {provider ? 'Available' : 'Not Available'}
    </div>
  );
};

const App = () => {
  return (
    <EthersWeb3ConfigProvider>
      <Component />
    </EthersWeb3ConfigProvider>
  );
};

export default App;
```
```

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

### Using TipLink Wallet

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/solana/index.md

Integrates the TipLink wallet using the built-in `TipLinkWallet`. This provides a lightweight wallet solution.

```typescript
import {
  SolanaWeb3ConfigProvider,
  useAccount,
  useConnectWallet,
  TipLinkWallet,
} from '@ant-design/web3-solana';
import { Button, ConnectButton } from '@ant-design/web3';

const App = () => {
  return (
    <SolanaWeb3ConfigProvider 
      wallets={{
        add: [
          {
            instance: new TipLinkWallet() // TipLink wallet
          }
        ]
      }}
    >
      <ConnectButton />
      <AccountProfile />
    </SolanaWeb3ConfigProvider>
  );
};

const AccountProfile = () => {
  const { address } = useAccount();
  const { connect, disconnect, connecting, connected } = useConnectWallet();

  return (
    <Button
      onClick={async () => {
        if (connecting) return;
        if (connected) {
          await disconnect();
          return;
        }
        await connect();
      }}
    >
      {connecting
        ? 'Connecting'
        : connected
        ? 'Disconnect'
        : 'Connect Wallet'}
    </Button>
  );
};

export default App;

```

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

### Configure Bitcoin Connection with BitcoinWeb3ConfigProvider

Source: https://context7.com/ant-design/ant-design-web3/llms.txt

Enable Bitcoin wallet connections including Xverse, Unisat, OKX, and Phantom using the BitcoinWeb3ConfigProvider.

```tsx
import { ConnectButton, Connector } from '@ant-design/web3';
import {
  BitcoinWeb3ConfigProvider,
  OkxWallet,
  PhantomWallet,
  UnisatWallet,
  XverseWallet,
} from '@ant-design/web3-bitcoin';

const App: React.FC = () => {
  return (
    <BitcoinWeb3ConfigProvider
      wallets={[XverseWallet(), UnisatWallet(), OkxWallet(), PhantomWallet()]}
      balance
    >
      <Connector modalProps={{ group: false, mode: 'simple' }}>
        <ConnectButton />
      </Connector>
    </BitcoinWeb3ConfigProvider>
  );
};

export default App;
```

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

### Create a Custom Wallet Adapter

Source: https://context7.com/ant-design/ant-design-web3/llms.txt

Use Web3ConfigProvider to create custom blockchain adapters or manage connection state manually. Define connection logic, available wallets, and NFT metadata fetching.

```tsx
import React, { useState } from 'react';
import { ConnectButton, Connector, Web3ConfigProvider } from '@ant-design/web3';

const App: React.FC = () => {
  const [account, setAccount] = useState<{ address: string }>();

  return (
    <Web3ConfigProvider
      account={account}
      availableWallets={[
        { name: 'Custom Wallet', key: 'custom', icon: '🔗' },
      ]}
      connect={async (wallet) => {
        // Custom connection logic
        setAccount({ address: '0x1234567890123456789012345678901234567890' });
      }}
      disconnect={async () => {
        setAccount(undefined);
      }}
      getNFTMetadata={async ({ address, tokenId }) => {
        // Custom NFT metadata fetching
        return { name: 'NFT', image: '', description: '' };
      }}
    >
      <Connector>
        <ConnectButton />
      </Connector>
    </Web3ConfigProvider>
  );
};

export default App;
```

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

### Basic TRON Web3 Configuration

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/tron/README.md

Configure the TronWeb3ConfigProvider with available TRON wallets and render a ConnectButton. Ensure necessary imports are included.

```tsx
import { ConnectButton, Connector } from '@ant-design/web3';
import {
  BitgetWallet,
  BybitWallet,
  OkxTronWallet,
  TronlinkWallet,
  TronWeb3ConfigProvider,
} from '@ant-design/web3-tron';

const Basic = () => {
  return (
    <TronWeb3ConfigProvider wallets={[TronlinkWallet, OkxTronWallet, BitgetWallet, BybitWallet]}>
      <Connector>
        <ConnectButton />
      </Connector>
    </TronWeb3ConfigProvider>
  );
};

export default Basic;
```

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

### Implement a custom Web3 adapter

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/guide/adapter.md

A basic implementation of an adapter using Web3ConfigProvider to supply blockchain interaction functions to UI components.

```tsx
<code src="./demos/adapter.tsx"></code>
```

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

### React Icon Component Implementation

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/guide/contribute-icons.md

This is an example of a generated React component for an icon. It uses Ant Design's `AntdIcon` and `ConfigProvider` for styling and integrates the SVG component.

```tsx
import * as React from 'react';
import AntdIcon from '@ant-design/icons';
import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
import { ConfigProvider } from 'antd';
import classnames from 'classnames';

import SVGComponent from '../svgs/aave-circle-colorful.svg';

export const AAVECircleColorful = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => {
  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('web3-icon-aave-circle-colorful');
  return (
    <AntdIcon
      {...props}
      className={classnames(prefixCls, props.className)}
      ref={ref}
      component={SVGComponent}
    />
  );
});
AAVECircleColorful.displayName = 'AAVECircleColorful';
```

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

### Implement Sign-In with Ethereum (SIWE)

Source: https://context7.com/ant-design/ant-design-web3/llms.txt

Integrate SIWE for authentication using Ethereum wallet signatures. Requires backend endpoints for nonce retrieval and message verification. Configure with WagmiWeb3ConfigProvider.

```tsx
import { ConnectButton, Connector } from '@ant-design/web3';
import {
  MetaMask,
  Sepolia,
  WagmiWeb3ConfigProvider,
  WalletConnect,
} from '@ant-design/web3-wagmi';
import { QueryClient } from '@tanstack/react-query';
import { createSiweMessage } from 'viem/siwe';
import { http } from 'wagmi';

const queryClient = new QueryClient();

// Mock API functions - implement these on your backend
const getNonce = async (address: string) => {
  const response = await fetch(`/api/siwe/nonce?address=${address}`);
  return response.text();
};

const verifyMessage = async (message: string, signature: string) => {
  const response = await fetch('/api/siwe/verify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message, signature }),
  });
  return response.ok;
};

const App: React.FC = () => {
  return (
    <WagmiWeb3ConfigProvider
      siwe={{
        getNonce,
        createMessage: (props) => createSiweMessage({ ...props, statement: 'Sign in to App' }),
        verifyMessage,
      }}
      ens
      chains={[Sepolia]}
      transports={{ [Sepolia.id]: http() }}
      wallets={[MetaMask(), WalletConnect()]}
      queryClient={queryClient}
    >
      <Connector modalProps={{ mode: 'simple' }}>
        <ConnectButton />
      </Connector>
    </WagmiWeb3ConfigProvider>
  );
};

export default App;
```

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

### Define Custom Adapter with Web3ConfigProvider

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/web3-config-provider/index.md

Illustrates how to define a custom wallet adapter by extending Web3ConfigProvider, allowing for tailored blockchain interactions within your application.

```typescript
import React from 'react';
import { Web3ConfigProvider, useConnectWallet } from '@ant-design/web3';
import type { Wallet } from '@ant-design/web3';

const MyCustomWallet: Wallet = {
  id: 'my-custom-wallet',
  name: 'My Custom Wallet',
  icon: '...', // Replace with your wallet icon URL
  connect: async () => {
    // Your custom connection logic
    console.log('Connecting with custom wallet...');
    return {
      account: '0x123...', // Replace with actual account
      chainId: '0x1', // Replace with actual chain ID
    };
  },
  disconnect: async () => {
    // Your custom disconnection logic
    console.log('Disconnecting custom wallet...');
  },
  // Add other required methods like switchChain, getBalance, etc.
};

const App = () => (
  <Web3ConfigProvider
    availableWallets={[MyCustomWallet]}
    // You might also want to configure availableChains, etc.
  >
    <ConnectButton />
  </Web3ConfigProvider>
);

const ConnectButton = () => {
  const { connect, account } = useConnectWallet();

  return (
    <button onClick={() => connect?.(MyCustomWallet)} disabled={!!account}>
      {account ? 'Connected' : 'Connect Custom Wallet'}
    </button>
  );
};

export default App;
```

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

### Calling Wallet Methods (Sign Message)

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/solana/index.md

Demonstrates how to call wallet methods, specifically signing a message, using the `useSignMessage` hook provided by Ant Design Web3.

```typescript
import {
  SolanaWeb3ConfigProvider,
  useAccount,
  useConnectWallet,
  useSignMessage,
} from '@ant-design/web3-solana';
import { Button, ConnectButton } from '@ant-design/web3';

const App = () => {
  return (
    <SolanaWeb3ConfigProvider>
      <ConnectButton />
      <SignMessageComponent />
    </SolanaWeb3ConfigProvider>
  );
};

const SignMessageComponent = () => {
  const { address } = useAccount();
  const { signMessage } = useSignMessage();
  const { connected } = useConnectWallet();

  const handleSignMessage = async () => {
    if (!address || !signMessage || !connected) return;
    try {
      const message = 'Hello Ant Design Web3!';
      const signature = await signMessage(message);
      console.log('Message signed:', message, 'Signature:', signature);
      // You can now use the signature for verification or other purposes
    } catch (error) {
      console.error('Failed to sign message:', error);
    }
  };

  return (
    <Button onClick={handleSignMessage} disabled={!address || !connected}>
      Sign Message
    </Button>
  );
};

export default App;

```

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

### ethers.js v5 Compatibility with Ant Design Web3

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/ethereum-ethersjs/index.md

Shows how to configure Ant Design Web3 to work with legacy ethers.js v5. Requires installing the specific v5 adapter and importing from '@ant-design/web3-ethers-v5'.

```tsx
import { EthersWeb3ConfigProvider, useEthersProvider } from '@ant-design/web3-ethers-v5'; // importing the adapter for ethers@5.x

const Component = () => {
  const provider = useEthersProvider();
  // do something with provider
};

const App = () => {
  return (
    <EthersWeb3ConfigProvider>
      <Component />
    </EthersWeb3ConfigProvider>
  );
};
```

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

### Basic TokenSelect Usage

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/token-select/index.md

Demonstrates the fundamental usage of the TokenSelect component for selecting a single token. Ensure the `options` prop is provided with a list of `Token` objects.

```tsx
import { TokenSelect } from '@ant-design/web3';

const App = () => (
  <TokenSelect
    options={[
      {
        label: 'Ethereum',
        value: 'ethereum',
        icon: 'https://assets.coingecko.com/coins/images/279/large/ethereum.png?1595348510',
      },
      {
        label: 'Bitcoin',
        value: 'bitcoin',
        icon: 'https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579',
      },
    ]}
  />
);
```

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

### Call Contract with Wallet - Solana Tx

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/advanced-call-contract-solana.md

Use the `useWallet` hook to get the `sendTransaction` method for signing and sending transactions. This method abstracts away keypair management and directly interacts with the user's wallet.

```typescript
import {
  TransactionInstruction,
  TransferParams,
  sendAndConfirmTransaction,
} from "@solana/web3.js";
import { useWallet } from "@solana/wallet-adapter-react";
import { useMemo } from "react";

export const useMemoSender = () => {
  const { publicKey, sendTransaction } = useWallet();

  const writeMemo = useMemo(
    () =>
      (message: string, to: string) =>
      {
        if (!publicKey) return;

        const programId = new PublicKey(
          "9xQeWvG816bUx9EPjHmaT23yvVM27i59r5Ykzvz1gZf"
        );
        const instruction = new TransactionInstruction({
          keys: [
            {
              pubkey: publicKey,
              isSigner: true,
              isWritable: true,
            },
          ],
          programId,
          data: Buffer.from(message), // The message to be written
        });

        const lamports = 1000; // Minimum lamports for a transaction
        const transaction = new Transaction().add(instruction);

        return sendTransaction(transaction, connection);
      },
    [publicKey, sendTransaction]
  );

  return writeMemo;
};

```

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

### Basic TON Web3 Configuration

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/ton/README.md

Configure the TonWeb3ConfigProvider with TON wallets and render the ConnectButton. Ensure wallets are correctly imported and passed to the provider.

```tsx
import { ConnectButton, Connector } from '@ant-design/web3';
import { okxTonWallet, tonkeeper, TonWeb3ConfigProvider } from '@ant-design/web3-ton';

const Basic = () => {
  return (
    <TonWeb3ConfigProvider wallets={[tonkeeper, okxTonWallet, { key: 'safepalwallet' }]}>
      <Connector>
        <ConnectButton />
      </Connector>
    </TonWeb3ConfigProvider>
  );
};

export default Basic;
```

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

### Solidity Contract Structure

Source: https://github.com/ant-design/ant-design-web3/blob/main/docs/course/contract-init.zh-CN.md

Explains the basic structure of a Solidity smart contract, including license, version pragma, imports, contract definition, constructor, and functions. Ensure the Solidity version pragma is compatible with your compiler.

```Solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract MyToken is ERC721, Ownable {
    constructor(string memory name, string memory symbol) 
        ERC721(name, symbol)
    {
    }

    function safeMint(address to, uint256 tokenId) public onlyOwner {
        _safeMint(to, tokenId);
    }
}
```

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

### 多链切换基本使用

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/multi-chain-switch/index.zh-CN.md

当项目中有多个链的 Provider 时，使用 `ignoreConfig` 属性控制哪个 Provider 的配置生效。只有激活的 Provider 不应设置 `ignoreConfig` 为 `true`。

```typescript
import React from 'react';
import { WagmiWeb3ConfigProvider, Chain, http, createConfig } from '@ant-design/web3-wagmi';
import { mainnet, sepol } from 'viem/chains';
import { ConnectButton } from '@ant-design/web3';

const chains: Chain[] = [
  {
    ...mainnet,
    id: 1,
    name: 'Ethereum',
    nativeCurrency: {
      name: 'Ether',
      symbol: 'ETH',
      decimals: 18,
    },
    rpcUrls: {
      default: {
        http: ['https://cloudflare-eth.com'],
      },
    },
  },
  {
    ...sepol,
    id: 11155111,
    name: 'Sepolia',
    nativeCurrency: {
      name: 'Sepolia Ether',
      symbol: 'ETH',
      decimals: 18,
    },
    rpcUrls: {
      default: {
        http: ['https://rpc.sepolia.org'],
      },
    },
  },
];

const config = createConfig({
  chains,
  transports: {
    [mainnet.id]: http('https://cloudflare-eth.com'),
    [sepol.id]: http('https://rpc.sepolia.org'),
  },
});

const App: React.FC = () => {
  return (
    <WagmiWeb3ConfigProvider wagmiConfig={config} chains={chains}>
      <WagmiWeb3ConfigProvider wagmiConfig={config} chains={chains} ignoreConfig={true}>
        <ConnectButton />
      </WagmiWeb3ConfigProvider>
    </WagmiWeb3ConfigProvider>
  );
};

export default App;

```

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

### Basic Usage with useWeb3js Hook

Source: https://github.com/ant-design/ant-design-web3/blob/main/packages/web3/src/ethereum-web3js/index.md

Demonstrates the basic integration of the web3js adapter using the `useWeb3js` React hook. This hook provides access to web3 instances for on-chain operations within your components.

```tsx
import React from 'react';
import { useWeb3js } from '@ant-design/web3-react';

function BasicUsage() {
  const { web3 } = useWeb3js();

  const getBlockNumber = async () => {
    if (web3) {
      const blockNumber = await web3.eth.getBlockNumber();
      console.log('Current block number:', blockNumber);
    }
  };

  return (
    <button onClick={getBlockNumber} disabled={!web3}>
      Get Block Number
    </button>
  );
}

export default BasicUsage;
```