SmartWallet

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,
});

walletConfig

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()

factoryAddress

The address of the Smart Wallet Factory contract.

Must be a string.

gasless

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.

walletConnectReceiver

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 = {
  walletConnectReceiver?:
    | {
        walletConnectWalletMetadata?: WCMetadata;
        walletConnectV2ProjectId?: string;
        walletConnectV2RelayUrl?: string;
      }
    | true;
};

walletConnectV2ProjectId

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.

walletConnectV2RelayUrl

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

walletConnectWalletMetadata

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: "https://thirdweb.com",
  icons: string[]; // defaults to: ["https://thirdweb.com/favicon.ico"],
};

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 {
  smartWallet,
  metamaskWallet,
  coinbaseWallet,
  walletConnect,
} from "@thirdweb-dev/react-native";

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

<ThirdwebProvider
  supportedWallets={[
    smartWallet(metamaskWallet(), config),
    smartWallet(coinbaseWallet(), config),
    smartWallet(walletConnect(), config),
  ]}
  clientId="your-client-id"
>
  <YourApp />
</ThirdwebProvider>;

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 {
  useConnect,
  smartWallet,
  metamaskWallet,
} 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>;
}

connectOptions

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

type ConenctOptions = {
  personalWallet: EVMWallet;
  chainId?: number;
};

personalWallet

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

chainId

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 />
    </ThirdwebProvider>
  );
}