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

# 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**&#x20;

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**&#x20;

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**&#x20;

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.&#x20;

**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**&#x20;

* Import the necessary functions from RainbowKit.&#x20;
* Define your RainbowKit configuration object (rainbowConfig).&#x20;
* Include the custom emoneyTestnet chain and the EMoney wallet in the configuration.&#x20;
* 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**&#x20;

Create a component named Providers that wraps your application with the necessary providers:&#x20;

WagmiProvider: Provides a context for Wagmi functionalities.&#x20;

QueryClientProvider: Manages data fetching with React Query.&#x20;

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 <support@emoney.com>
