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


---

# 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://mozi-1.gitbook.io/mozi/resources/wallet-integration.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.