How to Use Dynamic in a Safe App

​

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/[email protected]

​

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.