@mozi-dev/wallet-sdk

MOZI Wallet SDK

Installation

To install the MOZI Wallet SDK, use the following command:

npm install @mozi-dev/wallet-sdk

Usage

create file at libs/moziWallet.ts

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 rainbowkit
export const moziWallet = ({
  walletConnectParameters,
}: DefaultWalletOptions): Wallet => {
  let provider: unknown | EIP1193Provider;
  const sdk = new WalletTgSdk({
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    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({
          // shimDisconnect: false
        })(config),
        ...walletDetails,
        getProvider: async () => {
          if (provider) return provider;
          provider = sdk.ethereum;
          return provider;
        },
      }));
    },
  };
};

// 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),
  };
});

Using MOZI Wallet with RainbowKit

import { moziWallet } from '~~/libs/moziWallet';

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

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

Using MOZI Wallet with Wagmi

import { moziWalletConnector } from '~~/libs/moziWallet';

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

NextJS

If you facing build failed on NextJS, try import only in the browser

const isBrowser = typeof window !== 'undefined';
// Safely import or include moziWallet only in the browser
const moziWallet = isBrowser
  ? require('~~/libs/moziWallet').moziWallet
  : undefined;

const wallets = [
  metaMaskWallet,
  ...(moziWallet ? [moziWallet] : []), // Include moziWallet only if running in the browser
];

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

MetaMask Standard Wallet Integration (Beta)

MOZI Wallet now integrates with MetaMask's standard wallet API. Establishing a connection is straightforward and requires just a single line of code.

Current Features:

• Standard API mode support
• Partial MetaMask feature compatibility (full feature support in progress)
• Future enhancements planned for broader functionality

Integration Example:

import { WalletTgSdk } from '@mozi-dev/wallet-sdk';
const { ethereum } = new WalletTgSdk({
  injected: true, // Whether ethereum is injected into the window; if MetaMask is present, it will not be injected.
});

// Trigger Mozi Wallet
ethereum;
// use window.ethereum to interact with the wallet
window.ethereum;

Note: This beta version focuses on core connectivity. Community feedback is welcome to help improve functionality.

Ethereum Provider API

Supported Chains

Chain	ChainID
MonadTestnet	110143

Request API

The request method is used to make RPC requests to the connected wallet. It takes an object with the following properties:

• id (optional): A number or string that identifies the request.
• method: The RPC method to request.
• params (optional): An array or object of parameters for the RPC method.

The method returns a Promise that resolves with the result of the RPC method call.

• json-rpc-api from metamask
• json-rpc-api from ethereum.org

interface RequestArguments {
  id?:number | string
  /** The RPC method to request. */
  method: string;

  /** The params of the RPC method, . */
  params?: Array<unknown> | object;
}

ethereum.request = (args: RequestArguments): Promise<any>

Supported RPC Methods

eth_requestAccounts

connect to the wallet and return the address of the connected wallet.

ethereum.request({ method: 'eth_requestAccounts' });

eth_accounts

return the address of the connected wallet.

ethereum.request({ method: 'eth_accounts' });

eth_chainId

return the chainId of the connected wallet.

ethereum.request({ method: 'eth_chainId' });

wallet_switchEthereumChain

switch the connected wallet to the specified chainId.

try {
  await ethereum.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: '0xf00' }],
  });
} catch (switchError) {
  // This error code indicates that the chain has not been added to Mozi Wallet.
}

eth_sendTransaction

send a transaction to the connected wallet.

const accounts = await ethereum.request({
  method: 'eth_accounts',
  params: [{}],
});
const fromAddress = ethereum.selectedAddress;
const transactionParameters = {
  nonce: '0x00', // ignored by Mozi Wallet
  gasPrice: '0x09184e72a000', // customizable by user during Mozi Wallet confirmation.
  gas: '0x2710', // customizable by user during Mozi Wallet confirmation.
  to: '0x0000000000000000000000000000000000000000', // Required except during contract publications.
  from: fromAddress || accounts[0], // must match user's active address.
  value: '0x00', // Only required to send ether to the recipient from the initiating external account.
  data: '0x7f7465737432000000000000000000000000000000000000000000000000000000600057', // Optional, but used for defining smart contract creation and interaction.
  chainId: '0x3', // Used to prevent transaction reuse across blockchains. Auto-filled by Mozi Wallet.
};

ethereum.request({
  method: 'eth_sendTransaction',
  params: [transactionParameters],
});

SignData API

Sign a message with the connected wallet.

• personal_sign
• eth_signTypedData_v4

You can refer to docs signing-data-with-metamask eth-sig-util

personal_sign

ethereum.request({
  method: 'personal_sign',
  params: ['hello', '0x1234567890'],
});

eth_signTypedData_v4

 ethereum.request({ method: 'eth_signTypedData_v4', params: [{}] })

Event listeners

Notify when address and network change. Uses eventemitter3.

accountChanged

 ethereum.on('accountsChanged', handler: (accounts: Array<string>) => void);

 ethereum.on('accountChanged', (accounts) => {
    console.log(accounts || [])
})

chainChanged

ethereum.on('chainChanged', (chainId) => {
  console.log(chainId);
});

// remove all event listeners
ethereum.removeAllListeners();

function handleAccountsChainChanged() {
  ethereum.on('accountsChanged', ([address]) => {
    // Handle the new accounts, or lack thereof.
    // "accounts" will always be an array, but it can be empty.
    alert('address changed');
  });
  ethereum.on('chainChanged', async (chainId) => {
    // Handle the new chain.
    // Correctly handling chain changes can be complicated.
    // We recommend reloading the page unless you have good reason not to.
    alert('chainid changed');
  });
}

// add event listener
function handleAccountsChanged(accounts) {
  // ...
}
//remove
ethereum.removeListener('accountsChanged', handleAccountsChanged); // only remove one
ethereum.on('accountsChanged', handleAccountsChanged);