Zebec Network
  • 💰Zebec Network
  • ➡️ZBC to ZBCN Migration Guide
  • 🗞️Zebec Network white Paper
  • 📈ZBCN Tokemonics
  • 🥳Getting Started
    • How to get started?
    • Benefits of Using Zebec Protocol
    • Deposit
    • Start Streaming
    • Withdraw Funds
  • 👾Safe
    • Create Safe
    • Deposit in Safe
    • Sending a Transaction
    • Zapps
    • Signing a Transaction
  • ZEBEC SOLANA
    • 🖥️Zebec Solana Sdk
      • 🖱️Streaming
        • Initialize Zebec Stream
        • Create Fee Vault
        • Update Fee Vault
        • Collect Fees
        • Deposit
        • Withdraw Deposited Token
        • Start Streaming
        • Pause Stream
        • Resume Stream
        • Cancel Stream
        • Withdraw Streamed Token
  • ZEBEC SILVER CARD
    • 💳Silver Card Sdk
      • 🔧Installation
      • 👨‍🚀Quick Start
      • ✉️Fetch Quote
      • ⚖️Configuration Parameters
      • 📦Recipient Fields
      • 🔁Responses
      • 🔢Environment Variables
      • 🌎Supported Countries
  • Zebec Bridge
    • Bridge Sdk
      • Creating clients
      • Initialize Proxy Account
      • Initialize Token Account
      • Deposit
        • Token Transfer
        • Deposit to Zebec
      • Withdraw Deposited
        • Withdraw From Zebec
        • Token Transfer
      • Init Stream
      • Pause/Resume Stream
      • Cancel Stream
      • Update Stream
  • Zebec Near
    • Zebec Near Sdk
      • Normal Stream
        • Initialize Near Stream
        • Initialize Token Stream
        • Pause/Resume Stream
        • Withdraw Stream
        • Update Stream
        • Cancel Stream
        • Claim Stream
        • View methods
      • Multisig Factory
        • Create Multisig Account
      • Multisig Stream
        • Initialize Near Stream
        • Initialize Token Stream
        • Pause/Resume Stream
        • Withdraw Stream
        • Update Stream
        • Cancel Stream
        • Claim Stream
        • View methods
  • ZEBEC EVM
    • Zebec Evm Sdk
      • Zebec Stream Client
        • Creating Clients
        • Whitelisting Tokens
        • Deposit into Zebec Wallet
        • Withdraw from Zebec Wallet
        • Initiating a Stream
        • Pause/Resume/Cancel Stream
        • Updating a Stream
        • Withdraw Streamed Tokens
        • Getting Stream Details
        • Whitelisted Tokens on BSC and Nautilus
      • Zebec Bulk Client
        • Bulk Instant Transfer
      • Zebec Multisig Stream
        • NFT
    • Zapps Compatible
Powered by GitBook
On this page
  • Prerequisites
  • Step 1: Wrap Your App with Safe Provider
  • Step 2: Update manifest.json
  • Step 3: Implement Safe App Provider
  • Step 4: Add Gnosis wallet connector/adapter
  1. ZEBEC EVM

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>
  );
}
PreviousNFT

Last updated 1 year ago

If you want to learn more about Safe Global's "safe-apps", it's advisable to visit their official or portal.

safe global website
documentation