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:
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:
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:
For broader simplicity (less secure, suitable mostly for testing environments), you may use:
Step 4: Testing Your Integration
Test your integration by adding your application's URL as a custom app within the Asigna interface:
Navigate to Asigna EVM (https://evm.asigna.io).
Select the Apps tab.
Choose Manage Apps → Add Custom App.
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.
Last updated