Skip to main content


A wallet configurator for Smart Wallet which allows integrating the wallet with React

import { smartWallet, metamaskWallet } from "@thirdweb-dev/react-native";

const walletConfig = metamaskWallet(); // or use any other wallet

const smartWalletConfig = smartWallet(walletConfig, {
factoryAddress: "0x...",
gasless: true,


Provide a WalletConfig object to use as the personal wallet for the Smart Wallet. You can get this object by calling a wallet configurator function such as metamaskWallet()


The address of the Smart Wallet Factory contract.

Must be a string.


Whether to turn on or off gasless transactions.

  • If set to true, all gas fees will be paid by a paymaster.
  • If set to false, all gas fees will be paid by the Smart Wallet itself (needs to be funded).

Must be a boolean.


Enables the wallet to be available to listen for WalletConnect events.

Note that to fully support this there needs to be a UI component to handle WalletConnect uris (wc://) and pass it to the wallet.

Defaults to undefined.

export type WalletConnectReceiverConfig = {
| {
walletConnectWalletMetadata?: WCMetadata;
walletConnectV2ProjectId?: string;
walletConnectV2RelayUrl?: string;
| true;

The WalletConnect V2 projectId. You can get one in the WalletConnect portal.

Defaults to a common projectId set by thirdweb. This should be ok for testing but note that if you want to deploy your mobile app it may make sense to create your own as WalletConnect may throttle traffic coming from the same projectId.


Define a custom Relay Server URL. Defaults to "wss://"


Metadata that will be displayed in the dApp once your SmartWallet is connected to it.

name: string; // defaults to: "Thirdweb Smart Wallet",
description: string; // defaults to: "Thirdweb Smart Wallet",
url: string: // defaults to: "",
icons: string[]; // defaults to: [""],

Usage with ConnectWallet

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

import {
} from "@thirdweb-dev/react-native";

const config = {
factoryAddress: "0x...",
gasless: true,

smartWallet(metamaskWallet(), config),
smartWallet(coinbaseWallet(), config),
smartWallet(walletConnect(), config),
<YourApp />

Usage with useConnect

you can use the useConnect hook to programmatically connect to the wallet without using the ConnectWallet component.

The wallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

You need to connect to a personal wallet first, You can use the useConnect hook to connect to a personal wallet first and then connect to the Smart Wallet. Make sure personal wallet is on the same network as the Smart Wallet.

import {
} from "@thirdweb-dev/react-native";
import { Goerli } from "@thirdweb-dev/chains";

const personalWalletConfig = metamaskWallet(); // or use any other wallet

const smartWalletConfig = smartWallet(personalWalletConfig, {
factoryAddress: "0x...",
gasless: true,

function App() {
const connect = useConnect();

const handleConnect = async () => {
// 1. connect the personal wallet first on the network that the smart wallet is deployed to
const personalWallet = await connect(personalWalletConfig, {
chainId: Goerli.chainId,

// 2. connect to smart wallet
const smartWallet = await connect(smartWalletConfig, {
chainId: Goerli.chainId,
personalWallet: personalWallet,

console.log("connected to", smartWallet);

return <div> ... </div>;


import type { EVMWallet } from "@thirdweb-dev/wallets";

type ConnectOptions = {
personalWallet: EVMWallet;
chainId?: number;

The instance of a personal wallet that can sign transactions on the Smart Wallet


The chainId of network that the Smart Wallet is deployed to.

Chain object corresponding to this chainId from @thirdweb-dev/chains package must be specified in ThirdwebProvider's supportedChains prop as shown below

import { Polygon } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react-native";

export function YourApp() {
return (
<ThirdwebProvider supportedChains={[Polygon]} clientId="your-client-id">
<App />