With web3-react

Web3 React is a Uniswap-maintained wallet connect library useable with MetaMask and TAILWIND.

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

   Library import 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