useGnosis

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

import { useGnosis } from "@thirdweb-dev/react/evm/connectors/gnosis-safe";

Usage

First, configure your ThirdwebProvider's walletConnectors prop to include the Gnosis Safe connector:

import { ThirdwebProvider } from "@thirdweb-dev/react";
import { GnosisSafeConnector } from "@thirdweb-dev/react/evm/connectors/gnosis-safe";

function MyApp() {
  const gnosisSafeConnector = new GnosisSafeConnector({});

  return (
    <ThirdwebProvider
      activeChain={"ethereum"}
      // Configure the connectors you want to use, including your gnosisSafeConnector
      walletConnectors={[gnosisSafeConnector]}
    >
      {/* 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 useNetwork).

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

import { ChainId } from "@thirdweb-dev/react";
import { useGnosis } from "@thirdweb-dev/react/evm/connectors/gnosis-safe";

const Home = () => {
  const connectWithGnosis = useGnosis();

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

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

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

const Home = () => {
  // Detect if the Gnosis connector is connected
  const [connector] = useConnect();
  const activeConnector = connector.data.connector;
  const gnosisConnector = connector.data.connectors.find(
    (c) => c.id === "gnosis",
  );
  const isGnosisConnectorConnected =
    activeConnector?.id === gnosisConnector?.id;
};

Full Example

A template repository is available for you to use, which includes the full setup for:

1. Connecting user’s personal wallets
2. Enforcing the correct network connection
3. Connecting user’s Gnosis Safe wallets
4. Displaying the user’s connected wallet address
5. Disconnecting user’s wallets

Template: Gnosis Safe Wallet Connection