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

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

const safeWalletConfig = safeWallet();

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

import {
  safeWallet,
  metamaskWallet,
  coinbaseWallet,
  walletConnect,
} from "@thirdweb-dev/react";

<ThirdwebProvider
  supportedWallets={[
    safeWallet({
      // this is the default
      personalWallets: [
        metamaskWallet(),
        coinbaseWallet(),
        walletConnect(),
      ],
    }),
  ]}
  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 Safe Wallet. Make sure personal wallet is on the same network as the Safe Wallet.

const safeWalletConfig = safeWallet();

function App() {
  const connect = useConnect();

  const handleConnect = async () => {
    await connect(safeWalletConfig, connectOptions);
  };

  return <div> ... </div>;
}

import type { Chain } from "@thirdweb-dev/chains";
import type { EVMWallet } from "@thirdweb-dev/wallets";

type ConnectOptions = {
  chain: Chain;
  personalWallet: EVMWallet;
  safeAddress: string;
};