smartWallet

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

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

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

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

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";

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

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

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";
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 ConenctOptions = {
  personalWallet: EVMWallet;
  chainId?: number;
};

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

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