Safe Apps Web3Modal

This is a wrapper around web3modal that adds Safe Apps support.

If the app using the wrapper is run as a Safe App the connect method will automatically connect to the Safe App.

How to use

• Install the package and its dependencies

npm i @safe-global/safe-apps-web3modal @safe-global/safe-apps-sdk web3modal

yarn add @safe-global/safe-apps-web3modal @safe-global/safe-apps-sdk web3modal

• Setup Safe App

  • See https://docs.safe.global/safe-core-aa-sdk/safe-apps

• Use SafeAppWeb3Modal

import { SafeAppWeb3Modal } from '@safe-global/safe-apps-web3modal';
const modal = new SafeAppWeb3Modal(web3modalOptions);

• Connect to the Safe

const provider = await modal.requestProvider();

This will connect to the Safe if it is available. Otherwise, it will fall back to web3modal's connect method and show a modal with available wallets.

• Check if loaded as a Safe app

const loadedAsSafeApp = await modal.isSafeApp();

Know issues

NextJs

Is you use a server side rendering solution remember to instantiate the modal inside an useEffect to avoid NextJS to process this server side where the window object does not exist.

  const [provider, setProvider] = useState(null);

  useEffect(() => {
    (async () => {
      const modal = new SafeAppWeb3Modal();
      const provider = await modal.requestProvider();
      setProvider(provider);
    })();
  }, []);