# Zapps Compatible

This guide provides step-by-step instructions on how to make your existing application Zapps compatible. By following these steps, you can ensure that your app can be seamlessly used within both Safe Global ecosystem and Zapps Multisig as well.

### Prerequisites

Before you begin, ensure you have the following packages installed in your project:

* `@safe-global/safe-apps-react-sdk`
* `@safe-global/safe-apps-provider`

You can install these packages using npm or yarn:

```bash
npm install @safe-global/safe-apps-react-sdk @safe-global/safe-apps-provider
# or
yarn add @safe-global/safe-apps-react-sdk @safe-global/safe-apps-provider
```

### Step 1: Wrap Your App with Safe Provider

You need to wrap your application with the `SafeProvider` component. This ensures that your app can interact with the Safe Global environment.

```javascript
import SafeProvider from "@safe-global/safe-apps-provider";

const App = () => {
  // Your existing app code here

  return (
    <SafeProvider>
      <YourApp>
        {/* Your app content */}
      </YourApp>
    </SafeProvider>
  );
};
```

Make sure to insert this `SafeProvider` component at the root of your application component hierarchy.

### Step 2: Update manifest.json

To provide essential information about your app, update the `manifest.json` file. This information is necessary to display your app correctly.

```json
{
  "name": "YourAppName",
  "description": "A description of what your app does",
  "iconPath": "myAppIcon.svg"
}
```

* `"name"`: Replace with your app's name.
* `"description"`: Provide a concise description of your app's functionality.
* `"iconPath"`: Specify the path to your app's icon image.

### Step 3: Implement Safe App Provider

To integrate your app as zApps you need to use the `SafeAppProvider` from the `@safe-global/safe-apps-provider` package.&#x20;

```javascript
import React, { useMemo } from 'react';
import { ethers } from 'ethers';
import { useSafeAppsSDK } from '@safe-global/safe-apps-react-sdk';
import { SafeAppProvider } from '@safe-global/safe-apps-provider';

const App = () => {
  const { sdk, safe } = useSafeAppsSDK();
  const web3Provider = useMemo(() => new ethers.providers.Web3Provider(new SafeAppProvider(safe, sdk)), [sdk, safe]);

  // Use the web3Provider to interact with blockchain contracts

  return (
    // Your app's UI and functionality here
  );
};

export default App;
```

### Step 4: Add Gnosis wallet connector/adapter

We can setup the Gnosis Safe Connector using following method:

For wagmi:

```javascript
import { SafeConnector } from 'wagmi/connectors/safe'
 
const connector = new SafeConnector({
  chains,
  options: {
    allowedDomains: [/gnosis-safe.io$/, /app.safe.global$/],
    debug: false,
  },
})

```

For third web:

<pre class="language-javascript"><code class="lang-javascript">// npx thirdweb create --template gnosis-safe
<strong>
</strong><strong>function MyApp({ Component, pageProps }: AppProps) {
</strong>  const gnosisSafeConnector = new GnosisSafeConnector({});

  return (
    &#x3C;ThirdwebProvider walletConnectors={[gnosisSafeConnector]}>
      &#x3C;Component {...pageProps} />
    &#x3C;/ThirdwebProvider>
  );
}
</code></pre>

If you want to learn more about Safe Global's "safe-apps", it's advisable to visit their official [safe global website](https://safe.global/) or [documentation](https://docs.safe.global/safe-core-aa-sdk/safe-apps/get-started) portal.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zebec.io/zebec-evm/zapps-compatible.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.