> For the complete documentation index, see [llms.txt](https://mozi-1.gitbook.io/mozi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mozi-1.gitbook.io/mozi/resources/wallet-integration.md).

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

```bash
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:​

```typescript
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](https://www.npmjs.com/package/%40mozi-dev/wallet-sdk)

```typescript
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](https://www.npmjs.com/package/%40mozi-dev/wallet-sdk)

```typescript
// 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:​

```typescript
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(),
  },
});
```