Docs

Connecting Wallets

The SDK supports 350+ wallets out of the box, all you need to pass is their id.

Using Components

You can use ConnectButton or ConnectEmbed component for a quick, easy and customizable UI.

These components provide a beautiful UI for connecting various wallets and take care of a lot of wallet-specific edge cases - so you can focus on building your app.

These components support over 300+ wallets, including support in-app wallets and account abstraction.

It also automatically shows all installed EIP-6963 compliant wallet extensions installed by the user.

Using Hooks

You can build a completely custom UI for connecting the wallet using the useConnect hook to connect any of support wallets.

Refer to createWallet and injectedProvider for more information.

import { createThirdwebClient } from "thirdweb";
import { useConnect } from "thirdweb/react";
import { createWallet, injectedProvider } from "thirdweb/wallets";
const client = createThirdwebClient({ clientId });
function Example() {
const { connect, isConnecting, error } = useConnect();
return (
<button
onClick={() =>
connect(async () => {
const metamask = createWallet("io.metamask"); // pass the wallet id
// if user has metamask installed, connect to it
if (injectedProvider("io.metamask")) {
await metamask.connect({ client });
}
// open wallet connect modal so user can scan the QR code and connect
else {
await metamask.connect({
client,
walletConnect: { showQrModal: true },
});
}
// return the wallet
return wallet;
})
}
>
Connect
</button>
);
}

Post Connection

Once the wallet is connected, you can use the Wallet Connection hooks to get information about the connected wallet like getting the address, account, etc