Wallets connection in your DApp - RainbowKit

Integrating a Universal Tool for Interacting with Various Types of Cryptocurrency Wallets in DApp: Key Features.

Introduction

One Ring to rule them all...

Over the past few years, the active development of the blockchain sphere has seen the emergence of a multitude of diverse technologies in this field, including various forms of user cryptocurrency wallets, each with its unique integration features into DApps. Hence, to expedite the market launch of an application, it is advantageous to utilize a service that inherently can interact with a vast array of different wallet types. This approach allows us, as developers, to employ only universal standardized levers for wallet interaction, irrespective of its kind. One such tool that serves this purpose is RainbowKit, which will be the focus of this article.

Why RainbowKit?

In the past, many of our projects involved handling interactions with each cryptocurrency wallet individually, depending on the specific needs of the project. This meant dealing separately with MetaMask, with its injected providers, with WalletConnect, with its unique features, and so on. However, with WalletConnect transitioning to version 2 and ceasing support for version 1, we faced a stark reality. Specifically, we found it challenging and resource-intensive to maintain the seamless operation of each connection method separately.

Given this context, there was a desire to shift this task and responsibility onto a specialized service. Such a service would be updated with sufficient regularity to stay relevant for an extended period and would not require under-the-hood adjustments after each update of any specific wallet service. The objective was to alleviate the burden of keeping up with the individual nuances and updates of each wallet type, allowing for more streamlined and efficient project development.

It's worth noting right off the bat that transitioning to a universal service for wallet interactions wasn’t a panacea for us. Some developers still prefer to control wallet interactions within their applications at the most granular level, avoiding the use of high-level tools. And there is a rationale behind this preference. In the case of highly specialized tasks within a project, a universal tool might not always provide the leeway needed to address certain issues, as universal tools are designed for general tasks.

Therefore, such considerations need to be contemplated during the planning stage of the application. Developers should weigh whether it is worthwhile to invest time in writing low-level handlers for each wallet, thereby having complete control over every nuance and process, or whether it is more advantageous to save time and allocate it to developing other features, albeit with the trade-off of not having full control and potentially facing difficulties in specialized tasks.

In this balancing act, it’s essential to assess the project's unique requirements and decide which approach aligns best with the goals and constraints of the development process, ensuring an optimal balance between control, efficiency, and adaptability.

The second point to highlight, and finally answering the question posed in the title of this section, is why exactly RainbowKit? Currently, the market offers several good and evolving solutions besides RainbowKit, for instance, Web3Modal from the developers of WalletConnect, which also stands as a promising, forward-looking, and versatile tool. However, at this stage, our choice has leaned towards RainbowKit, thanks to its minimalistic approach, yet extensive customization possibilities and the ability for individual adaptation of functionality to meet the specific needs of a particular project.

In an industry where balancing usability with adaptability is key, RainbowKit stands out by offering a blend of simplicity and expansive customization options, allowing developers to tailor the tool to the unique requirements of each project. This adaptability, coupled with a user-friendly interface, makes RainbowKit a compelling choice for integrating various wallet types into DApp, addressing the challenges of the ever-evolving blockchain landscape.

DApp in a few clicks

We started our work with DApp projects for Ethereum networks at a time when Web3 and window.ethereum were our only main working tools. Later on, there were libraries for React, providing certain convenient unified hooks and a provider, but still requiring quite labor-intensive integration of different types of providers separately: injected provider, wallet-connect provider, etc. And then came the powerful combination of three libraries: viem + wagmi + rainbowKit, which henceforth and forever, takes on the handling of all these issues, relieving us developers of this headache.

Creating a DApp application on React has never been as simple as it is now. Let me show you with an example how, with just a couple of lines of code, you can turn your basic React application into a basic DApp React application.

And so, bend your fingers:

1. Create react app

npx create-react-app my-awesome-dapp --template typescript

1. Implement RainbowKit

npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query

1. Setup the RainbowKit's and Wagmi's providers

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import "@rainbow-me/rainbowkit/styles.css";

import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { mainnet } from "wagmi/chains";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

const queryClient = new QueryClient();

const config = getDefaultConfig({
  appName: "My RainbowKit App",
  projectId: "YOUR_WALLET_CONNECT_PROJECT_KEY",
  chains: [mainnet],
});

root.render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <App />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>
);

1. Add default RainbowKit button

import React from "react";
import logo from "./logo.svg";
import "./App.css";

import { ConnectButton } from "@rainbow-me/rainbowkit";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <ConnectButton />
      </header>
    </div>
  );
}

export default App;

And voila! We now have a basic DApp application ready! We can already connect any wallet, change the network, and even display the balance of the native currency!

Of course, you shouldn't implement this library exactly as I showed in this example; it's just an example. Instead, all this should be beautifully and functionally distributed throughout the application so that scaling functionality in the future occurs without any problems. This example simply proves that creating a multifunctional, powerful DApp application has never been as simple and understandable as it is now, thanks to the latest and most powerful tools.

A few details and pitfalls

In principle, integrating RainbowKit should not create any problems as the flow is crystal clear, easy, and excellently described in the documentation. I will only say that it's not necessary to work with the standard button (although it is, by the way, customizable), and you can directly use the RainbowKit hooks with your custom components, depending on design requirements.

I will not dwell on the specifics of working with the wagmi and viem libraries, upon which, incidentally, further blockchain work is built (RainbowKit itself only covers the processes of wallet connection, network switching, and disconnection) right now, as that's a topic for a separate article, which I will definitely share with you since these are currently the best blockchain libraries I have encountered.

What else should you pay attention to? The RainbowKit library is actively growing and updating, just like all blockchain-related technologies, so the integration example described above may already be outdated. The best way is to refer directly to the documentation. Another point - the library is demanding regarding the versions of Node and React; we had problems with this, which were resolved by running on Node 18 and React 18, but I know this can be problematic for projects that would like to update but have a lot of functionality tailored and time-tested under older versions of React and Node, so keep that in mind. Also, during one of the projects, we encountered a build issue caused by the viem library and the incorrect operation of BigInt on older browsers, which was resolved by disabling support for old browsers:

"browserslist": {
    "production": [
      "chrome >= 67",
      "edge >= 79",
      "firefox >= 68",
      "opera >= 54",
      "safari >= 14"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

It's quite possible that in the next versions of RainbowKit, this issue has been resolved, and there is no longer a need to disable browsers with such a "hack". I think that's essentially all the most important things worth mentioning. I wish everyone good luck and until next time!

Need assistance with your DApp?

Book a quick sync up with our CTO if you need a helping hand or visit our website:

Idealogic Dev: Custom Software Development Solutions

Or just drop a message: [e-mail]