Asigna
WebStacksClarity
  • Introduction
    • About Asigna
    • Supported Wallets
    • Supported Networks
    • Verification Tool
    • Source Code
    • Official Links
  • Bitcoin multisig
    • Technical Specifications
    • Quickstart
      • Connecting to Asigna
      • Setting up your Vault
      • Managing your Vault
        • Permissions
        • Sub-Accounts
        • Settings
      • Vault Balance
        • Runes
        • BRC-20s
        • Ordinals
        • Rare Sats
      • Embedded Apps
      • UTXO Management
      • Batch Transactions
    • Recovery
      • Software Wallet Setup in Sparrow
      • Ledger Setup in Sparrow
      • Ledger Setup in Caravan
  • Stacks multisig
    • Native Stacks approach
    • Quickstart
      • Connecting to Asigna
      • Setting up your Vault
      • Managing your Vault
        • Permissions
        • Sub-Accounts
        • Settings
      • Vault Balance
        • SIP-10s
        • NFTs
        • STX20
      • Nonce, queue and conflict transactions
      • Interacting with Apps
  • EVM MULTISIG
    • About
    • Networks and Contracts
    • Quickstart
      • Connect to Asigna
      • Setup Multisig
      • Funding Multisig
      • Batched transactions
      • dApps
  • FRACTAL MULTISIG
    • Technical specifications
  • Developers
    • Integrate Asigna Multisig into your App
      • Stacks
      • Bitcoin
      • EVM
    • Multisig SDK
      • Bitcoin SDK
      • Stacks SDK
      • EVM SDK
  • Appendix
    • Contact us
    • Asigna Audits
    • Privacy Policy
    • Terms of Use
Powered by GitBook
On this page
  1. Developers
  2. Integrate Asigna Multisig into your App

EVM

PreviousBitcoinNextMultisig SDK

Last updated 11 days ago

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:

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. Select the Apps tab.

  2. Choose Manage Apps → Add Custom App.

  3. 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.

Navigate to Asigna EVM ().

Safe React Hooks Documentation
Safe Apps Developer Tools Monorepo
https://evm.asigna.io