Skip to content

feat: Add RainbowKit for multi-wallet support #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Amarudinn wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Add RainbowKit for multi-wallet support #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions frontend/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,7 @@ NEXT_PUBLIC_GENLAYER_SYMBOL=GEN
# GenLayer Football Betting Contract Address
# This is the address of your deployed FootballBets contract on GenLayer
NEXT_PUBLIC_CONTRACT_ADDRESS=your_contract_address

# WalletConnect Project ID (required for multi-wallet support)
# Get your free project ID at https://cloud.walletconnect.com
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id
40 changes: 29 additions & 11 deletions frontend/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ cp .env.example .env

3. Configure environment variables:
- `NEXT_PUBLIC_CONTRACT_ADDRESS` - GenLayer Football Betting contract address
- `NEXT_PUBLIC_STUDIO_URL` - GenLayer Studio URL (default: https://studio.genlayer.com/api)
- `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)

## Development

Expand Down Expand Up @@ -55,23 +56,40 @@ npm start

## Tech Stack

- **Next.js 15** - React framework with App Router
- **Next.js 16** - React framework with App Router
- **React 19** - Latest React with concurrent features
Comment on lines +59 to +60
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Correct the Next.js version.

Line 59 claims "Next.js 16" but Next.js 16 has not been released. According to the coding guidelines and current Next.js releases, this should be "Next.js 15". Additionally, line 60 should specify "React 19.2" for precision, as that's the actual version in use per the library context.

📝 Proposed version corrections 
-- **Next.js 16** - React framework with App Router
-- **React 19** - Latest React with concurrent features
+- **Next.js 15** - React framework with App Router
+- **React 19.2** - Latest React with concurrent features

Based on coding guidelines.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- **Next.js 16** - React framework with App Router
- **React 19** - Latest React with concurrent features
- **Next.js 15** - React framework with App Router
- **React 19.2** - Latest React with concurrent features
🤖 Prompt for AI Agents 
In @frontend/README.md around lines 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).

- **TypeScript** - Type safety
- **Tailwind CSS v4** - Styling with custom glass-morphism theme
- **RainbowKit** - Multi-wallet connection UI
- **wagmi** - React hooks for Ethereum
- **viem** - TypeScript Ethereum library
- **genlayer-js** - GenLayer blockchain SDK
- **TanStack Query (React Query)** - Data fetching and caching
- **Radix UI** - Accessible component primitives
- **shadcn/ui** - Pre-built UI components

## Wallet Management
## Wallet Connection

The app uses GenLayer's account system:
- **Create Account**: Generate a new private key
- **Import Account**: Import existing private key
- **Export Account**: Export your private key (secured)
- **Disconnect**: Clear stored account data
The app uses **RainbowKit** for multi-wallet support:

Accounts are stored in browser's localStorage for development convenience.
### Supported Wallets
- **MetaMask** - Browser extension & mobile
- **WalletConnect** - Connect any WalletConnect-compatible wallet
- **Coinbase Wallet** - Coinbase's self-custody wallet
- **Rainbow** - Mobile-first Ethereum wallet
- **And many more** - RainbowKit supports 100+ wallets

### Getting WalletConnect Project ID
1. Go to [WalletConnect Cloud](https://cloud.walletconnect.com)
2. Create a free account
3. Create a new project
4. Copy the Project ID
5. Add to your `.env` file as `NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID`

### Features
- **One-click connection** - Simple modal to connect any supported wallet
- **Network switching** - Automatic prompt to switch to GenLayer network
- **Account management** - View balance, switch accounts, disconnect
- **Persistent sessions** - Stay connected across page refreshes

## Features

Expand All @@ -81,4 +99,4 @@ Accounts are stored in browser's localStorage for development convenience.
- **Leaderboard**: Track top players by points earned from correct predictions
- **Player Stats**: View your points and ranking in the community
- **Glass-morphism UI**: Premium dark theme with OKLCH colors, backdrop blur effects, and smooth animations
- **Real-time Updates**: Automatic data fetching with 3-second polling intervals via TanStack Query
- **Real-time Updates**: Automatic data fetching with TanStack Query
60 changes: 39 additions & 21 deletions frontend/app/providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,16 @@

import { useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
import { Toaster } from "sonner";
import { wagmiConfig } from "@/lib/wagmi/config";
import { WalletProvider } from "@/lib/genlayer/WalletProvider";

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

export function Providers({ children }: { children: React.ReactNode }) {
// Use useState to ensure QueryClient is only created once per component lifecycle
// This prevents the client from being recreated on every render
const [queryClient] = useState(
() =>
new QueryClient({
Expand All @@ -21,25 +25,39 @@ export function Providers({ children }: { children: React.ReactNode }) {
);

return (
<QueryClientProvider client={queryClient}>
<WalletProvider>
{children}
</WalletProvider>
<Toaster
position="top-right"
theme="dark"
richColors
closeButton
offset="80px"
toastOptions={{
style: {
background: 'hsl(var(--card))',
border: '1px solid hsl(var(--border))',
color: 'hsl(var(--foreground))',
boxShadow: '0 8px 32px hsl(var(--background) / 0.8)',
},
}}
/>
</QueryClientProvider>
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider
theme={darkTheme({
accentColor: "#9B6AF6", // GenLayer brand purple
accentColorForeground: "white",
borderRadius: "medium",
fontStack: "system",
overlayBlur: "small",
})}
modalSize="compact"
locale="en-US"
>
<WalletProvider>
{children}
</WalletProvider>
</RainbowKitProvider>
<Toaster
position="top-right"
theme="dark"
richColors
closeButton
offset="80px"
toastOptions={{
style: {
background: "hsl(var(--card))",
border: "1px solid hsl(var(--border))",
color: "hsl(var(--foreground))",
boxShadow: "0 8px 32px hsl(var(--background) / 0.8)",
},
}}
/>
</QueryClientProvider>
</WagmiProvider>
);
}
Loading