Wallet Connect Kit

Open-source Next.js starter for Ethereum wallet connections — built with wagmi, viem, and WalletConnect.

From SolveMotive.

Features

• Injected wallets, MetaMask, and WalletConnect (QR / mobile)
• Chains: Ethereum Mainnet, Base, Sepolia
• App Router + SSR-safe session via cookie storage
• Balance display and chain switching
• Clean UI you can fork into client dApps

Stack

Layer	Choice
Framework	Next.js (App Router)
Wallet	wagmi + viem
Mobile / QR	WalletConnect (Reown Cloud)
Styling	Tailwind CSS

Getting started

Prerequisites

• Node.js 20+
• npm
• A free WalletConnect Project ID from cloud.reown.com (optional for injected/MetaMask only)

Setup

git clone https://github.com/solvemotive/wallet-connect-kit.git
cd wallet-connect-kit
cp .env.example .env.local
npm install
npm run dev

Open http://localhost:3000.

Environment

Variable	Required	Description
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID	for WalletConnect	Project ID from Reown Cloud

Without a Project ID, injected and MetaMask connectors still work.

Scripts

Command	Purpose
npm run dev	Local development
npm run build	Production build
npm run start	Serve production build
npm run lint	Lint

Project layout

src/
  app/                 # App Router pages
  components/
    providers.tsx      # Wagmi + React Query
    connect-wallet.tsx # Connect / disconnect UI
  lib/
    wagmi.ts           # Chains, connectors, transports

Notes

• Use dedicated RPC URLs (Alchemy, Infura, etc.) before production traffic
• Never commit private keys or secret RPC tokens
• This kit is frontend-only; it does not custody funds

License

MIT © SolveMotive