Skip to main content


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

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


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 (
// Configure the connectors you want to use, including your gnosisSafeConnector
{/* Rest of your app here */}
<YourApp />

Before connecting their Gnosis Safe wallet, users 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 (
onClick={() =>
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

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 =;
const gnosisConnector =
(c) => === "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 users personal wallets
  2. Enforcing the correct network connection
  3. Connecting users Gnosis Safe wallets
  4. Displaying the users connected wallet address
  5. Disconnecting users wallets