Wallet Integration

This integration document serves as a reference for developers building dApps that utilize RainbowKit and intend to support the E Money Wallet. While RainbowKit provides a foundation, some UI Kits might have additional considerations.

Prerequisites

This integration guide assumes you have a RainbowKit (https://www.rainbowkit.com/docs/introduction) project set up in your application.

You can use any other alternative to the RainbowKit.

Installation

Bash

npm install @rainbow-me/rainbowkit @rainbow-me/rainbowkit/wallets 
wagmi @tanstack/react-query

Define the EMoney Testnet Chain

The code utilizes a custom chain definition for the EMoney Testnet. You'll need to create a similar definition for your desired EMoney Network (Mainnet, Testnet, etc.) following this structure:

JavaScript

import { defineChain } from "viem";

export const emoneyTestnet = defineChain({
  id: 4544,
  name: "EMoney Testnet",
  network: "emoney-testnet",
  // ... other chain properties
});

Create the EMoney Wallet Definition

Define a Wallet object representing the EMoney Wallet in your application. This object specifies details like the wallet's ID, name, icons, mobile/extension integration instructions, and the connector creation function.

EMoney Provider: (enkrypt.providers.ethereum)

The provided code checks for injected EMoney providers and uses the WalletConnect connector as a fallback. You can adjust this logic based on your preference.

JavaScript

import { getInjectedConnector, hasInjectedProvider } from "@/lib/rainbowUtils";
import { getWalletConnectConnector, Wallet } from "@rainbow-me/rainbowkit";

export const EMoney = ({ projectId }: MyWalletOptions): Wallet => ({
  // ... wallet properties (refer to code for details)
  createConnector: shouldUseWalletConnect
    ? getWalletConnectConnector({
        projectId,
      })
 : getInjectedConnector({
        namespace: "enkrypt.providers.ethereum",
      }),
});

Configure RainbowKit

• Import the necessary functions from RainbowKit.

• Define your RainbowKit configuration object (rainbowConfig).

• Include the custom emoneyTestnet chain and the EMoney wallet in the configuration.

• Set your projectId obtained from RainbowKit.

JavaScript

import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { emoneyTestnet, EMoney } from "./"; // Assuming this file holds your definitions

const rainbowConfig = getDefaultConfig({
  appName: "Recommended",
  projectId: "YOUR_RAINBOWKIT_PROJECT_ID",
  chains: [emoneyTestnet, holesky], // Add your desired chains
  ssr: true,
  wallets: [
    {
      groupName: "Installed",
      wallets: [EMoney],
    },
  ],
});

Wrap your Application with Providers

Create a component named Providers that wraps your application with the necessary providers:

WagmiProvider: Provides a context for Wagmi functionalities.

QueryClientProvider: Manages data fetching with React Query.

RainbowKitProvider: Initializes RainbowKit with your configuration.

JavaScript

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactNode } from "react";
import { WagmiProvider } from "wagmi";

const queryClient = new QueryClient();

const Providers = ({ children }: { children: ReactNode }) => {
  return (
    <WagmiProvider config={rainbowConfig as any}>
<QueryClientProvider client={queryClient}>
        <RainbowKitProvider>{children}</RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

export default Providers;

Usage in your Application

Import the Providers component and wrap your application with it to enable RainbowKit and the EMoney Wallet integration.

JavaScript

import Providers from "./Providers";

function MyDApp() {
  // ... your application logic
}

function App() {
  return (
    <Providers>
      <MyDApp />
    </Providers>
  );
}

Congratulations! You've integrated the E Money Wallet.

(Successful E Money Wallet integration might require further customizations tailored to your specific application logic.)

For any questions or if you require further assistance, please don't hesitate to contact E Money support at [email protected]