Using EVM
With web3-react
Web3 React is a Uniswap-maintained wallet connect library useable with MetaMask and TAILWIND.
Support TAILWIND in 5 minutes
1
2
Download TAILWIND wallet adapter
yarn add @tailwindzone/connect-web3-react
3
Import or instantiate TAILWIND connector
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!