feat: Add RainbowKit for multi-wallet support by Amarudinn · Pull Request #18 · genlayerlabs/genlayer-project-boilerplate

Amarudinn · 2026-01-10T11:01:54Z

This PR replaces the MetaMask-only wallet connection with RainbowKit, enabling support for 100+ wallets including MetaMask, WalletConnect, Coinbase Wallet, Rainbow, and more

Summary by CodeRabbit

New Features
- Added multi-wallet support—users can now connect using various wallet providers instead of a single option.
- Introduced WalletConnect integration for enhanced wallet connectivity.
- Streamlined wallet connection flow with one-click connection, network switching, and account management.
- Enabled persistent wallet sessions, maintaining connection across browser sessions.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-10T11:02:14Z

📝 Walkthrough

Walkthrough

Migrates wallet integration from custom MetaMask implementation to RainbowKit and Wagmi-based multi-wallet support, introducing automated GenLayer chain configuration, simplified UI components, and consolidated wallet state management via wagmi hooks.

Changes

Cohort / File(s)	Summary
Configuration & Build Setup `frontend/.env.example`, `frontend/next.config.ts`, `frontend/package.json`	Added NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID environment variable; switched build system from Turbopack to Webpack with fallback and externals configuration; added RainbowKit dependency and updated dev/build scripts to use Turbopack/Webpack flags respectively.
Wallet Infrastructure & Chain Configuration `frontend/lib/wagmi/config.ts`, `frontend/lib/genlayer/WalletProvider.tsx`, `frontend/lib/genlayer/client.ts`, `frontend/lib/genlayer/wallet.ts`	Introduced new wagmi/RainbowKit configuration with custom GenLayer chain definition; replaced manual MetaMask state management with wagmi hooks (useAccount, useChainId, useDisconnect) and RainbowKit modals; removed 15+ MetaMask-specific utilities; simplified createGenLayerClient to inject address when provided; changed WalletState.chainId from string\|null to number\|null and connectWallet from Promise to void.
Provider Setup `frontend/app/providers.tsx`	Added WagmiProvider and RainbowKitProvider composition with dark theme configuration and CSS imports; reordered providers to nest WalletProvider inside RainbowKitProvider for proper context availability.
UI Components `frontend/components/AccountPanel.tsx`, `frontend/components/BetsTable.tsx`, `frontend/components/CreateBetModal.tsx`	Replaced custom wallet connection dialogs with RainbowKit's ConnectButton.Custom integration; removed manual wallet state handlers; updated error handling to trigger connectWallet instead of showing error toasts when address is missing.
Utilities & Hooks `frontend/lib/utils/toast.ts`, `frontend/lib/hooks/useFootballBets.ts`	Removed options parameter from toast.promise function signature (simplifying toast API); removed config error toast from useFootballBets contract initialization.
Documentation `frontend/README.md`	Updated environment variables (renamed NEXT_PUBLIC_STUDIO_URL to NEXT_PUBLIC_GENLAYER_RPC_URL, added NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID); documented tech stack upgrades (Next.js 16, React 19, RainbowKit, wagmi, viem); added wallet connection flow sections with RainbowKit integration details and WalletConnect setup instructions.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant RainbowKit as RainbowKit UI
    participant Wagmi as Wagmi Hooks
    participant WalletProvider
    participant GenLayerClient as GenLayer Client
    participant RPC as GenLayer RPC

    User->>RainbowKit: Click Connect Wallet
    RainbowKit->>User: Show wallet options modal
    User->>RainbowKit: Select wallet (MetaMask, WalletConnect, etc.)
    RainbowKit->>Wagmi: Initiate connection
    Wagmi->>Wagmi: useAccount hook updates
    Wagmi->>WalletProvider: Provide address & chain info
    WalletProvider->>GenLayerClient: Initialize with address
    GenLayerClient->>GenLayerClient: Inject address into config
    GenLayerClient->>RPC: Ready for GenLayer RPC calls
    GenLayerClient-->>WalletProvider: Client ready
    WalletProvider-->>RainbowKit: Connection complete
    RainbowKit-->>User: Display connected wallet & balance

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~55 minutes

Possibly related PRs

feat: migrate to Next.js with latest genlayer-js SDK #14: Introduces Wagmi/RainbowKit configuration that requires NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID environment variable, directly complementing this PR's multi-wallet integration setup.

Suggested reviewers

JoaquinBN

Poem

🐰 Hops with joy, whiskers twitching bright
From MetaMask chains to wagmi's light,
Multi-wallets bloom like garden beds,
RainbowKit buttons in rainbow threads!
One config, one truth, connection flows free, 🌈✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding RainbowKit for multi-wallet support, which aligns with the PR's core objective of replacing MetaMask-only connectivity with RainbowKit's 100+ wallet support.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

frontend/lib/hooks/useFootballBets.ts (1)

17-31: Add error feedback for read-only contract queries.

The useFootballBetsContract() hook silently returns null when NEXT_PUBLIC_CONTRACT_ADDRESS is not configured. While mutation operations (useCreateBet, useResolveBet) do provide error feedback via the error toast, read-only queries (useBets, useLeaderboard, usePlayerPoints) return empty data without notifying users that the contract is misconfigured. Users viewing the app initially will see an empty leaderboard and bets list without understanding why.

Consider adding a provider-level validation or initialization check that displays a setup warning when the contract address is missing, ensuring users are aware of the configuration issue regardless of which operation they attempt.
frontend/lib/genlayer/client.ts (1)
41-48: Silent fallback may mask account configuration issues.

When client creation fails with an address, the catch block returns a client without the account. The caller has no indication that the address wasn't applied, which could lead to confusing transaction failures.

Consider either re-throwing the error or returning a discriminated result so callers can handle the degraded state appropriately.
♻️ Alternative: Let errors propagate
   try {
     return createClient(config);
   } catch (error) {
     console.error("Error creating GenLayer client:", error);
-    return createClient({
-      chain: studionet,
-    });
+    throw error; // Let caller decide how to handle
   }

🤖 Fix all issues with AI agents

In @frontend/lib/utils/toast.ts:
- Around line 83-96: Restore the original promise signature to accept an
optional options parameter and ensure defaultOptions are applied like the other
toast helpers: update the export const promise<T>(promiseArg: Promise<T>,
messages: { loading: string; success: string | ((result: T) => string); error:
string | ((error: any) => string); }, options?: ToastOptions) => { ... } so you
pass merged options (e.g., { ...defaultOptions, ...options }) into
sonnerToast.promise; reference the promise function and defaultOptions variable
to locate where to merge and pass these options so existing callers and styling
remain unchanged.

In @frontend/lib/wagmi/config.ts:
- Around line 31-37: The fallback WALLETCONNECT_PROJECT_ID uses an invalid
placeholder ("demo-project-id") which breaks WalletConnect; update the
initialization so that when WALLETCONNECT_PROJECT_ID is missing or equals the
placeholder you either log a clear runtime warning or throw in development;
modify the code around the WALLETCONNECT_PROJECT_ID constant and the
getDefaultConfig call (where wagmiConfig is created) to validate the project id
at startup and abort or warn accordingly so misconfiguration is surfaced early.

In @frontend/package.json:
- Around line 7-8: The dev and build NPM scripts in package.json use different
bundlers ("dev": "next dev --turbopack" vs "build": "next build --webpack"),
which is inconsistent and can hide bundler-specific bugs; pick one bundler for
both or document the reason: either set "build" to use Turbopack (e.g., change
the build script to use next build or next build --turbopack) or change "dev" to
use Webpack (next dev --webpack) if you rely on Webpack-only features, or add a
clear comment in package.json explaining why the discrepancy is necessary
(mention the "dev" and "build" script entries when making the change).

In @frontend/README.md:
- Around line 59-60: The README incorrectly lists "Next.js 16" and imprecisely
"React 19"; update the version strings in the README: change the "Next.js 16"
entry to "Next.js 15" and change the "React 19" entry to "React 19.2" (locate
the lines containing the literal strings "Next.js 16" and "React 19" and replace
them accordingly).

🧹 Nitpick comments (6)

frontend/README.md (1)
26-27: Format URLs as markdown links.

The bare URLs should be formatted as proper markdown links for better readability and to pass linting.
📝 Proposed markdown formatting
-   - `NEXT_PUBLIC_GENLAYER_RPC_URL` - GenLayer RPC URL (default: https://studio.genlayer.com/api)
-   - `NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID` - WalletConnect Project ID (get free at https://cloud.walletconnect.com)
+   - `NEXT_PUBLIC_GENLAYER_RPC_URL` - GenLayer RPC URL (default: <https://studio.genlayer.com/api>)
+   - `NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID` - WalletConnect Project ID (get free at <https://cloud.walletconnect.com>)
Based on static analysis hints.
frontend/next.config.ts (1)
5-11: LGTM - Standard webpack fixes for RainbowKit/WalletConnect compatibility.

The fallbacks and externals configuration correctly handle Node.js-only modules that cause issues in browser/SSR contexts. This is a well-known pattern for wallet library integration.

Minor note: config.externals.push assumes externals is an array. This is the default in Next.js, but if you want to be defensive:
♻️ Optional defensive check
  webpack: (config) => {
    config.resolve.fallback = { fs: false, net: false, tls: false };
-   config.externals.push("pino-pretty", "lokijs", "encoding");
+   if (Array.isArray(config.externals)) {
+     config.externals.push("pino-pretty", "lokijs", "encoding");
+   } else {
+     config.externals = ["pino-pretty", "lokijs", "encoding"];
+   }
    return config;
  },
frontend/lib/wagmi/config.ts (3)
7-7: Add radix parameter to parseInt.

While parseInt defaults to base 10 for numeric strings, explicitly specifying the radix improves clarity and avoids edge cases with strings that might start with "0".
♻️ Suggested fix
-const GENLAYER_CHAIN_ID = parseInt(process.env.NEXT_PUBLIC_GENLAYER_CHAIN_ID || "61999");
+const GENLAYER_CHAIN_ID = parseInt(process.env.NEXT_PUBLIC_GENLAYER_CHAIN_ID || "61999", 10);
16-19: Consider using a descriptive name for nativeCurrency.name.

Currently both name and symbol use GENLAYER_SYMBOL. Wallet UIs typically display the name as a human-readable label (e.g., "GenLayer Token") while symbol is the ticker (e.g., "GEN").
♻️ Optional improvement
+const GENLAYER_CURRENCY_NAME = process.env.NEXT_PUBLIC_GENLAYER_CURRENCY_NAME || "GenLayer Token";
+
 nativeCurrency: {
-  name: GENLAYER_SYMBOL,
+  name: GENLAYER_CURRENCY_NAME,
   symbol: GENLAYER_SYMBOL,
   decimals: 18,
 },
35-36: Consider making appName configurable for boilerplate reuse.

The hardcoded app name "GenLayer Football Betting" is project-specific. For a boilerplate, consider sourcing this from an environment variable.
♻️ Optional improvement
+const APP_NAME = process.env.NEXT_PUBLIC_APP_NAME || "GenLayer App";
+
 export const wagmiConfig = getDefaultConfig({
-  appName: "GenLayer Football Betting",
+  appName: APP_NAME,
frontend/lib/genlayer/client.ts (1)
32-48: Avoid any type and ensure consistent RPC configuration.

Two concerns:

Type safety: Using any for config defeats TypeScript's benefits. The ClientConfig type should be used instead.

RPC configuration inconsistency: The function uses the studionet chain but does not explicitly set the endpoint parameter, while getStudioUrl() is defined in this same file and used elsewhere (e.g., useFootballBets.ts). For consistency with the environment-configured RPC URL, the endpoint should be explicitly set.
♻️ Suggested improvement
+import type { ClientConfig } from "genlayer-js";
+
 export function createGenLayerClient(address?: string) {
-  const config: any = {
+  const config: ClientConfig = {
     chain: studionet,
+    endpoint: getStudioUrl(),
   };

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2164ec6 and 4b2f2e5.

⛔ Files ignored due to path filters (2)

frontend/public/genlayer-icon.svg is excluded by !**/*.svg
package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (14)

frontend/.env.example
frontend/README.md
frontend/app/providers.tsx
frontend/components/AccountPanel.tsx
frontend/components/BetsTable.tsx
frontend/components/CreateBetModal.tsx
frontend/lib/genlayer/WalletProvider.tsx
frontend/lib/genlayer/client.ts
frontend/lib/genlayer/wallet.ts
frontend/lib/hooks/useFootballBets.ts
frontend/lib/utils/toast.ts
frontend/lib/wagmi/config.ts
frontend/next.config.ts
frontend/package.json

💤 Files with no reviewable changes (1)

frontend/lib/genlayer/wallet.ts

🧰 Additional context used

📓 Path-based instructions (4)

frontend/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Frontend should be implemented with Next.js 15, React 19, TypeScript, Tailwind CSS, TanStack Query, and Wagmi/Viem for wallet integration

Files:

frontend/components/AccountPanel.tsx
frontend/next.config.ts
frontend/lib/utils/toast.ts
frontend/app/providers.tsx
frontend/lib/genlayer/WalletProvider.tsx
frontend/lib/wagmi/config.ts
frontend/components/CreateBetModal.tsx
frontend/lib/hooks/useFootballBets.ts
frontend/components/BetsTable.tsx
frontend/lib/genlayer/client.ts

frontend/lib/genlayer/WalletProvider.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

Maintain wallet context provider in frontend/lib/genlayer/WalletProvider.tsx

Files:

frontend/lib/genlayer/WalletProvider.tsx

frontend/lib/hooks/use*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Store React hooks for contract interactions in frontend/lib/hooks/ directory with naming pattern use<ContractName>.ts

Files:

frontend/lib/hooks/useFootballBets.ts

frontend/lib/genlayer/client.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Maintain GenLayer client initialization in frontend/lib/genlayer/client.ts

Files:

frontend/lib/genlayer/client.ts

🧠 Learnings (8)

📓 Common learnings

Learnt from: CR
Repo: genlayerlabs/genlayer-project-boilerplate PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-10T12:30:13.640Z
Learning: Applies to frontend/lib/genlayer/WalletProvider.tsx : Maintain wallet context provider in `frontend/lib/genlayer/WalletProvider.tsx`

Learnt from: CR
Repo: genlayerlabs/genlayer-project-boilerplate PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-10T12:30:13.640Z
Learning: Applies to frontend/**/*.{ts,tsx} : Frontend should be implemented with Next.js 15, React 19, TypeScript, Tailwind CSS, TanStack Query, and Wagmi/Viem for wallet integration