# 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](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/safe-apps-react-sdk)

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](https://github.com/safe-global/safe-apps-sdk)

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