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.

enableConnectApp

Whether to turn on or off the ability to connect your SmartWallet to an app using WalletConnect.

• If set to true, a new Connect App field will show up in the SmartWallet details modal. It allows you to paste a wc:// link or scan one with your mobile app.
• If set to false (default), the Connect App field will not show up.

Must be a boolean and it has the following dependencies:

• "react-native-camera": "^4.2.1"
  - Add `missingDimensionStrategy 'react-native-camera', 'general'` in `android/app/build.gradle` under `defaultConfig`

walletConnectV2ProjectId

The WalletConnect 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.

walletConnectWalletMetadata

The metadata the connected app will show when connected to your Smart Wallet:

{
  name: string;
  description: string;
  url: string;
  icons: string[];
};

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