​
Support TAILWIND in 5 minutes

1

Download TAILWIND extension

Download the extension and create an account. If needed, you can follow the onboarding guide here.

2

Download TAILWIND wallet adapter

yarn add @tailwindzone/connect-wagmi
3

Copy Viem chain information for sei

4

Use TAILWIND as an Ethereum Provider

Tailwind has the same API as MetaMask.

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>
  ) 
}
5

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.

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>
  )
}
6

Done!

You just supported a universal USDC gas wallet. Prepare to get more users!

With ViemWith RainbowKit