EVM

Integrate Your React Application with Asigna EVM

Asigna EVM is based on Safe Global's infrastructure, so integrating your React-based application follows a similar workflow to Safe. Below you'll find clear instructions for embedding your app into the Asigna interface seamlessly.

Step 1: Use Safe React Hooks

Utilize the Safe React hooks provided by Safe Global to easily manage multisig interactions within your React application:

• Safe React Hooks Documentation

These hooks simplify common actions such as obtaining wallet info, interacting with contracts, and managing transactions.

Step 2: Choose Appropriate Libraries from Safe Developer Tools

Explore the Safe Apps Developer Tools monorepo to identify and include suitable libraries tailored to your application's specific use cases:

• Safe Apps Developer Tools Monorepo

Step 3: Adjust HTTP Headers for Embedding

To embed your React app within the Asigna EVM interface (iframe), adjust your server's HTTP headers as follows:

• Content-Security-Policy (CSP):

Content-Security-Policy: frame-ancestors 'self' https://evm.asigna.io;

• X-Frame-Options:

To ensure broader browser compatibility, it’s recommended to remove this header completely or configure it carefully as shown:

X-Frame-Options: ALLOW-FROM https://evm.asigna.io

(Note: The ALLOW-FROM directive may have limited support, thus removal is preferred.)

• Access-Control-Allow-Origin:

Allow Asigna to load your application smoothly by setting:

Access-Control-Allow-Origin: https://evm.asigna.io

For broader simplicity (less secure, suitable mostly for testing environments), you may use:

Access-Control-Allow-Origin: *

Step 4: Testing Your Integration

Test your integration by adding your application's URL as a custom app within the Asigna interface:

1. Navigate to Asigna EVM (https://evm.asigna.io).

2. Select the Apps tab.

3. Choose Manage Apps → Add Custom App.

4. Enter your app’s URL.

Ensure your app loads without CSP, framing, or cross-origin related errors in the browser console.

Summary

By following this integration guide, your React-based app will seamlessly embed into Asigna EVM, providing a smooth and secure user experience tailored specifically for multisig operations.