Wallet Integration

Introduction

The MOZI Wallet SDK enables developers to integrate wallet connectivity into their applications, supporting various wallet providers and enhancing user experience. It offers seamless interoperability with libraries like RainbowKit and Wagmi, making it a versatile choice for modern web3 applications.​

https://www.npmjs.com/package/@mozi-dev/wallet-sdk

Installation

To begin, install the MOZI Wallet SDK using npm:

npm install @mozi-dev/wallet-sdk

Setting Up MOZI Wallet

After installation, you can set up the MOZI Wallet for use with RainbowKit or Wagmi.​

Using RainbowKit

Create a file at libs/moziWallet.ts with the following content:​

import { WalletTgSdk } from '@mozi-dev/wallet-sdk';
import type { EIP1193Provider } from 'viem';
import type { WalletConnectParameters } from 'wagmi/connectors';
import type { Wallet } from '@rainbow-me/rainbowkit';
import { createConnector } from 'wagmi';
import { injected } from 'wagmi/connectors';

export interface DefaultWalletOptions {
  projectId: string;
  walletConnectParameters?: RainbowKitWalletConnectParameters;
}

export type RainbowKitWalletConnectParameters = Omit<
  WalletConnectParameters,
  'showQrModal' | 'projectId'
>;

// Simple wallet use with RainbowKit
export const moziWallet = ({
  walletConnectParameters,
}: DefaultWalletOptions): Wallet => {
  let provider: unknown | EIP1193Provider;
  const sdk = new WalletTgSdk({
    metaData: {
      icon: walletConnectParameters?.metadata?.icons?.[0],
      name: walletConnectParameters?.metadata?.name,
      description: walletConnectParameters?.metadata?.description,
      url: walletConnectParameters?.metadata?.url,
    },
  });
  return {
    id: 'moziWallet',
    name: 'MOZI Wallet',
    iconUrl: sdk.getAppInfo().logo,
    installed: true,
    iconBackground: '#000000',
    createConnector: (walletDetails) => {
      return createConnector((config) => ({
        ...injected()(config),
        ...walletDetails,
        getProvider: async () => {
          if (provider) return provider;
          provider = sdk.ethereum;
          return provider;
        },
      }));
    },
  };
};

Then, configure RainbowKit to include the MOZI Wallet:​npm+1docs.metamask.io+1

import { moziWallet } from '~~/libs/moziWallet';
import { connectorsForWallets, createConfig } from '@rainbow-me/rainbowkit';
import { mainnet } from 'wagmi/chains';
import { http } from 'viem';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [moziWallet({ projectId: 'YOUR_PROJECT_ID' }), /* other wallets */],
    },
  ],
  {
    appName: 'YOUR_APP_NAME',
    projectId: 'YOUR_PROJECT_ID',
  }
);

const config = createConfig({
  connectors,
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
});

Using Wagmi

For Wagmi integration, update libs/moziWallet.ts to include the connector:​npm+1docs.metamask.io+1

// Only use Wagmi for wallet connect
export const moziWalletConnector = createConnector((config) => {
  const sdk = new WalletTgSdk();
  const app = sdk.getAppInfo();

  return {
    ...injected({
      target: () => ({
        id: app.id,
        name: app.name,
        icon: app.logo,
        provider: sdk.ethereum as EIP1193Provider,
      }),
    })(config),
  };
});

Then, configure Wagmi to use the MOZI Wallet connector:​

import { moziWalletConnector } from '~~/libs/moziWallet';
import { createConfig } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { http } from 'viem';
import { injected } from 'wagmi/connectors';

const config = createConfig({
  connectors: [moziWalletConnector, injected()],
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
});