How to Use Dynamic in a Safe App

This is an enterprise feature and access is gated. Please let us know in Slack if you’d like access.

Implementation

In this guide, you’ll learn how to integrate Dynamic with the Safe App environment. By using Dynamic’s Safe EVM wallet connector, you can enable seamless wallet integration for Safe users. Whether your app is set to connect-only mode or requires a Sign-In with Ethereum (SIWE) signature, Dynamic’s SDK allows you to quickly and securely connect users. Follow the steps below to get started and deploy your app on Safe.

Step 1: Install Safe EVM Wallet Connector

Ensure you’re using SDK version 3.4.3 or higher.

Install the Dynamic Safe EVM wallet connector with the following command:

npm install @dynamic-labs-connectors/safe-evm@3.0.0-alpha.0

Step 2: Import the Safe Connector

In your project, import the SafeEvmWalletConnectors from the Dynamic Labs Safe EVM package:

import { SafeEvmWalletConnectors } from "@dynamic-labs-connectors/safe-evm";

Step 3: Add the Connector to Dynamic

Add the Safe EVM wallet connector into your DynamicContextProvider as a walletConnectors option:

 <DynamicContextProvider
    settings={{
      walletConnectors: [EthereumWalletConnectors, SafeEvmWalletConnectors],
      initialAuthenticationMode: 'connect-only',
    }}
  >
    { /* Your app code here */ }
  </DynamicContextProvider>

Step 4: Update manifest.json

Update the manifest.json file in your project (usually located in public/manifest.json) to include an app name, description, and icon.

Example:

{
  "short_name": "Safe App Test",
  "name": "Safe App Test",
  "description": "This is a safe app test",
  "iconPath": "https://demo.dynamic.xyz/logo.png",
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Note: you can see the full guide here.

Step 5: Testing Your Safe App

To test your Safe app, follow these steps:

1. Navigate to Safe Apps.
2. Add your app as a custom app by pasting the app’s URL.
3. Your app will automatically log you in if you’re using connect-only mode, or it will ask for a Sign-In with Ethereum (SIWE) signature if you’re using connect-and-sign mode.

That’s it! Your Dynamic-powered Safe App should now be ready to use.

Troubleshooting

Safe not auto-connecting/asking for signature

This can be because of two things:

1. You have not been granted access to the feature on the environment ID you’re using, please let us know in Slack.
2. You have mismatched Dynamic packages installed - if you have a V4 of the safe-evm connector lib, your other packages must also be on V4.