Connecting Wallets
There are two ways you connect user's wallet to your application using thirdweb's React SDK
- Using the ConnectWallet component for a quick, easy and customizable UI
- Create a completely custom UI using wallet connection hooks
Supported Wallets
1. ConnectWallet component
ConnectWallet component renders a button which when clicked opens a modal to allow users to connect to wallets specified in the ThirdwebProvider
's supportedWallets prop.
If supportedWallets
is not configured in the ThirdwebProvider
, the ConnectWallet Modal shows the below shown default wallets:
Try out ConnectWallet in action on ConnectWallet Playground!
import {
ThirdwebProvider,
ConnectWallet,
// import the wallets you want
metamaskWallet,
coinbaseWallet,
walletConnect,
} from "@thirdweb-dev/react";
// wrap your App with ThirdwebProvider and set supportedWallets prop
function Page() {
return (
<ThirdwebProvider
supportedWallets={[metamaskWallet(), coinbaseWallet(), walletConnect()]}
activeChain="mumbai"
clientId="your-client-id"
>
<App />
</ThirdwebProvider>
);
}
// render ConnectWallet component in your App - that's it!
function App() {
return (
<div>
<ConnectWallet />
</div>
);
}
2. Create a completely custom UI to connect wallets
Connecting a wallet involves a few steps:
- Create a wallet instance
- Call the
connect
method on the wallet instance - Set the connected wallet instance as "connected wallet"
If you just want to connect a wallet as mentioned above - there's a simple way to do it using the useConnect hook which does all the above steps for you.
Using useConnect
hook
But if you need to create wallet instance and call some methods on the wallet instance before connecting the wallet, you can do these steps manually as shown below using the useCreateWalletInstance, useSetConnectionStatus and useSetConnectedWallet hooks.
Manually creating wallet instance and connecting
Once the wallet is connected, you can use React SDK's 100+ hooks to show connected wallet's details, send transactions, interact with smart contracts, sign messages and utilize common standards such as tokens, NFTs, marketplaces; all with built-in caching, RPC URLs, IPFS gateways, and more!
Here is a list of few hooks that will be useful when creating custom UI
Hook | Description |
---|---|
useAddress | get connected wallet's account address |
useDisconnect | disconnect the connected wallet |
useWallet | get connected wallet instance |
useWalletConfig | get connected wallet's config |
useConnectionStatus | get status of wallet connection |
useSigner | get signer of connected wallet |