Comment on page

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:
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.
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.
{
  "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. 
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:
import { SafeConnector } from 'wagmi/connectors/safe'
 
const connector = new SafeConnector({
  chains,
  options: {
    allowedDomains: [/gnosis-safe.io$/, /app.safe.global$/],
    debug: false,
  },
})
​
For third web:
// npx thirdweb create --template gnosis-safe
​
function MyApp({ Component, pageProps }: AppProps) {
  const gnosisSafeConnector = new GnosisSafeConnector({});
​
  return (
    <ThirdwebProvider walletConnectors={[gnosisSafeConnector]}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}
If you want to learn more about Safe Global's "safe-apps", it's advisable to visit their official safe global website or documentation portal. 

NFT

Last modified 1mo ago