Skip to main content

​
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-web3-react
3

Import or instantiate TAILWIND connector

import { tailwindConnector } from '@tailwindzone/connect-web3-react'
4

Use TAILWIND as a Provider

Tailwind has the same API as MetaMask.
import { MetaMask } from "@web3-react/metamask"

const metaMaskConnector = initializeConnector(
  actions => new MetaMask({ actions })
);

const connectors = [
  metaMaskConnector,
  tailwindConnector
];

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Web3ReactProvider
      connectors={connectors}
    >
      { /* Your app goes here */ } 
      <App />
    </Web3ReactProvider>
  </React.StrictMode>,
);
5

Sign a sample transaction

Inside your React app, you can use web3-react hooks to request connection and sign transactions.
import { useWeb3React } from "@web3-react/core"

function App() {
  const {
    connector,
    provider
  } = useWeb3React()

  return (
    <>
      <button onClick={() => {
        const [tailwind] = tailwindConnector
        tailwind.connectEagerly().catch(console.error)
      }}>
        Connect to TAILWIND
      </button>

      {connector && (<button onClick={async () => {
        // send transaction to JSON RPC
        await provider.sendTransaction(tx);
      }}>
        Sign Transaction
      </button>)}
    </>
 );
}
6

Done!

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

​
Troubleshooting