useSafe

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

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

Usage

First, configure your ThirdwebProvider's supportedWallets prop to include the safeWallet:

import { ThirdwebProvider, safeWallet } from "@thirdweb-dev/react";

function MyApp() {
  return (
    <ThirdwebProvider
      activeChain={"ethereum"}
      supportedWallets={[safeWallet()]}
    >
      {/* Rest of your app here */}
      <YourApp />
    </ThirdwebProvider>
  );
}

Before connecting their Gnosis Safe wallet, user’s must first:

1. Connect a personal wallet to your dApp (use Connect Wallet Button).
2. Switch to the network the Gnosis Safe wallet is deployed to (use useSwitchChain).

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

const Home = () => {
  const connectWithGnosis = useSafe();
  const personalWallet = useWallet();

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

Then use the useWallet hook to determine if the Gnosis wallet is connected:

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

const Home = () => {
  const wallet = useWallet();
  const isSafeConnected = wallet && wallet.walletId === "Safe";
};