useSafe

Hook that allows users to connect their Safe wallet to your dApp.

Before connecting Safe wallet, a personal wallet must be connected and should be on the same network which Safe wallet is deployed to

You can connect to a personal wallet using either useConnect hook or wallet specific hook - for example: useMetamask

From this state, you are ready to use the useSafe hook in your app:

import { Goerli } from "@thirdweb-dev/chains";
import { useSafe, useWallet } from "@thirdweb-dev/react";
import { SafeWallet } from "@thirdweb-dev/wallets";

const Home = () => {
  const connectToSafe = useSafe();
  const wallet = useWallet();
  const connectToMetamask = useMetamask(); // using metamask as personal wallet

  if (!wallet) {
    return (
      <button
        onClick={() => {
          connectToMetamask({
            chainId: Goerli.chainId,
          });
        }}
      >
        Connect personal wallet
      </button>
    );
  }

  if (wallet instanceof SafeWallet) {
    return <div>Safe wallet is connected</div>;
  }

  return (
    <button
      onClick={async () =>
        await connectToSafe({
          safeAddress: "0x...", // Smart contract address of the Safe wallet
          chain: Goerli, // Chain the Safe wallet is deployed to
          personalWallet: wallet,
        })
      }
    >
      Connect Safe
    </button>
  );
};

The safeWallet (with all personalWallets configured) need to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

Configuration

safeAddress

Smart contract address of the Safe wallet

chain

An object of type Chain from @thirdweb-dev/chains package.

It should be the same chain the Safe wallet is deployed to

personalWallet

a connected wallet instance of type WalletInstance from @thirdweb-dev/react package

Configuration​

Configuration