> ## Documentation Index
> Fetch the complete documentation index at: https://developer.tailwind.zone/llms.txt
> Use this file to discover all available pages before exploring further.

# With Wagmi

> Wagmi is an Ethereum Viem-based React library which can be used with MetaMask or TAILWIND.

# Support TAILWIND in 5 minutes

<Steps>
  <Step title="Download TAILWIND extension">
    Download the [extension](https://chromewebstore.google.com/detail/dpnfollacokcbkeiidhplhjpafkbfacj)
    and create an account. If needed, you can follow the onboarding guide [here](https://support.tailwind.zone/get-tailwind).
  </Step>

  <Step title="Download TAILWIND wallet adapter">
    ```bash
    yarn add @tailwindzone/connect-wagmi
    ```
  </Step>

  <Step title="Copy Viem chain information for sei">
    <CodeGroup>
      ```typescript Library import 
      import { seimainnet } from "@tailwindzone/connect-wagmi/chains"
      ```

      ```typescript Sei mainnet (pacific-1)
      import { defineChain } from "viem"

      const seimainnet = defineChain({
        id: 1329,
        name: 'Sei Mainnet',
        nativeCurrency: { name: 'Sei', symbol: 'SEI', decimals: 18 },
        rpcUrls: {
          default: {
            http: ['https://evm-rpc.sei-apis.com'],
          },
        },
      })
      ```

      ```typescript atlantic-2
      import { defineChain } from "viem"

      const seiatlantic2 = defineChain({
        id: 1328,
        name: 'Sei Atlantic-2 Testnet',
        nativeCurrency: { name: 'Sei', symbol: 'SEI', decimals: 18 },
        rpcUrls: {
          default: {
            http: ['https://evm-rpc.atlantic-2.seinetwork.io'],
          },
        },
      })
      ```

      ```typescript artic-1
      import { defineChain } from "viem"

      const seiartic1 = defineChain({
        id: 713715,
        name: 'Sei Artic-1 Testnet',
        nativeCurrency: { name: 'Sei', symbol: 'SEI', decimals: 18 },
        rpcUrls: {
          default: {
            http: ['https://evm-rpc-arctic-1.sei-apis.com'],
          },
        },
      })
      ```
    </CodeGroup>
  </Step>

  <Step title="Use TAILWIND as an Ethereum Provider">
    Tailwind has the same API as MetaMask.

    ```tsx
    import { tailwindConnector } from "@tailwindzone/connect-wagmi";
    import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
    import { createConfig } from "wagmi";
    import { http } from "viem";

    const config = createConfig({
      chains: [seimainnet],
      connectors: [
        tailwindConnector(),
        // other connectors metaMask(), coinbaseWallet() here
      ],
      transports: {
        [seimainnet.id]: http(),
      }
    })

    function Provider() {
      const queryClient = new QueryClient()
      return (
        <WagmiProvider config={config}>
          <QueryClientProvider client={queryClient}>
            { /* Your App goes here */ }
            <App />
          </QueryClientProvider>
        </WagmiProvider>
      ) 
    }
    ```
  </Step>

  <Step title="Sign a sample transaction">
    Inside your React app, you can use Wagmi hooks for TAILWIND as
    a provider like MetaMask or any other Ethereum wallet.

    ```tsx
    function App() {
      const { account, chainId, sendTransaction } = useWagmi()
      const handleClick = async () => {
        const result = await sendTransaction(config, {
          to: "0x332Ef165ee102525f943F267B2AbE08B93eD7D13",
          value: parseEther('0.01'),
        }) 
        // display result hash here
        // console.log(result)
      }

      return (
        <div>
          <button onClick={handleClick}>Send Transaction</button>
        </div>
      )
    }
    ```
  </Step>

  <Step title="Done!">
    You just supported a universal USDC gas wallet.
    Prepare to get more users!
  </Step>
</Steps>