Add RainbowKit multi-wallet support — benchmark from Dropcast

[realproject7]

Problem

PlotLink only supports MetaMask via `injected()` connector. Users with Coinbase Wallet, Trust Wallet, Rainbow, or WalletConnect cannot connect. Dropcast already has production-ready multi-wallet support via RainbowKit.

Requirements

1. Install RainbowKit

```bash
npm install @rainbow-me/rainbowkit
```

Important: Check compatibility with PlotLink's current `wagmi@^3.5.0`. RainbowKit v2 targets wagmi v2. If incompatible, either:

• Downgrade wagmi to v2 (match Dropcast: `wagmi@^2.15.4`)
• Or use RainbowKit v3 if available for wagmi v3

2. Update wagmi config (`lib/wagmi.ts`)

Benchmark from `~/Projects/dropcast/lib/wagmi.ts`:

```typescript
import { farcasterMiniApp } from '@farcaster/miniapp-wagmi-connector'
import { connectorsForWallets } from '@rainbow-me/rainbowkit'
import { metaMaskWallet, baseAccount, trustWallet, rainbowWallet, walletConnectWallet } from '@rainbow-me/rainbowkit/wallets'

const walletConnectors = connectorsForWallets([{
groupName: 'Recommended',
wallets: [
metaMaskWallet, // MetaMask
baseAccount, // Coinbase Smart Wallet (Base Account)
trustWallet, // Trust Wallet
rainbowWallet, // Rainbow
walletConnectWallet // WalletConnect (catch-all for others)
],
}], {
appName: 'PlotLink',
projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || '',
})

// Farcaster FIRST — auto-connects when inside Farcaster app
const connectors = [farcasterMiniApp(), ...walletConnectors]
```

Key: `farcasterMiniApp()` must be the FIRST connector. This ensures automatic wallet connection when the app is opened inside Warpcast or any Farcaster client — no user action needed.

3. Update providers (`src/app/providers.tsx`)

Add RainbowKitProvider with PlotLink-themed styling. Benchmark: `~/Projects/dropcast/components/providers/WagmiProvider.tsx`

```tsx
import { RainbowKitProvider, type Theme } from '@rainbow-me/rainbowkit'
import '@rainbow-me/rainbowkit/styles.css'

const plotlinkTheme: Theme = {
blurs: { modalOverlay: 'blur(0px)' },
colors: {
accentColor: 'var(--accent)', // PlotLink brown accent
accentColorForeground: 'var(--bg)', // Cream background
actionButtonBorder: 'var(--border)',
actionButtonBorderMobile: 'var(--border)',
actionButtonSecondaryBackground: 'transparent',
closeButton: 'var(--text)',
closeButtonBackground: 'transparent',
connectButtonBackground: 'transparent',
connectButtonBackgroundError: 'transparent',
connectButtonInnerBackground: 'transparent',
connectButtonText: 'var(--text)',
connectButtonTextError: 'var(--text)',
connectionIndicator: 'var(--accent)',
downloadBottomCardBackground: 'var(--bg)',
downloadTopCardBackground: 'var(--accent)',
error: '#dc2626',
generalBorder: 'var(--border)',
generalBorderDim: 'var(--border)',
menuItemBackground: 'var(--bg)',
modalBackdrop: 'rgba(0, 0, 0, 0.5)',
modalBackground: 'var(--bg)', // Cream modal background
modalBorder: 'var(--border)',
modalText: 'var(--text)',
modalTextDim: 'var(--text-muted)',
modalTextSecondary: 'var(--text-muted)',
profileAction: 'var(--bg)',
profileActionHover: 'var(--accent)',
profileForeground: 'var(--bg)',
selectedOptionBorder: 'var(--accent)',
standby: 'var(--accent)',
},
fonts: {
body: 'var(--font-mono), monospace', // Terminal monospace aesthetic
},
radii: {
actionButton: '4px',
connectButton: '4px',
menuButton: '4px',
modal: '8px',
modalMobile: '8px', // Mobile-friendly rounded corners
},
shadows: {
connectButton: 'none',
dialog: 'none', // Minimal — no heavy shadows
profileDetailsAction: 'none',
selectedOption: 'none',
selectedWallet: 'none',
walletLogo: 'none',
},
}
```

Provider structure:
```tsx



{children}



```

Use `modalSize="compact"` for mobile-first minimal design (not "wide" like Dropcast).

Also add optimized QueryClient config:
```typescript
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 60_000,
gcTime: 5 * 60_000,
retry: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
},
},
})
```

4. Update ConnectWallet (`src/components/ConnectWallet.tsx`)

Replace manual wallet logic with `ConnectButton.Custom` from RainbowKit. Benchmark: `~/Projects/dropcast/components/layout/Header.tsx`

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit'

<ConnectButton.Custom>
{({ account, chain, openConnectModal, openAccountModal, mounted }) => {
const ready = mounted
const connected = ready && account && chain

if (!connected) {
  return <button onClick={openConnectModal}>Connect Wallet</button>
}

return (
  // Show Farcaster PFP + username + truncated address
  // Keep existing onNavigate callback for mobile nav close
)

}}
</ConnectButton.Custom>
```

Keep existing features:

• Farcaster PFP + username display (via `useConnectedIdentity`)
• Truncated wallet address next to username
• Disconnect button
• `onNavigate` callback for mobile nav close

5. Farcaster auto-connect behavior

The `farcasterMiniApp()` connector as the first entry in the connectors array handles auto-connect automatically:

• Inside Farcaster app (Warpcast): Wallet connects immediately on page load — no modal, no user action
• Outside Farcaster (browser): Falls through to RainbowKit modal — user picks from wallet list
• Existing `useConnectedIdentity` hook: Should continue working since it listens to `useAccount` which wagmi handles regardless of connector

6. Mobile responsive design

• `modalSize="compact"` — smaller modal, better for mobile screens
• `modalMobile: '8px'` radius — consistent with PlotLink's minimal borders
• No heavy shadows or blurs — matches terminal aesthetic
• Wallet icons render at appropriate sizes on mobile
• Modal backdrop closes on tap

7. Environment variable

Add to `.env.example` and Vercel:
```
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id
```

Get a project ID from https://cloud.walletconnect.com — free tier is fine.

Reference files

Dropcast (benchmark)	PlotLink (to update)
`~/Projects/dropcast/lib/wagmi.ts`	`lib/wagmi.ts`
`~/Projects/dropcast/components/providers/WagmiProvider.tsx`	`src/app/providers.tsx`
`~/Projects/dropcast/components/layout/Header.tsx`	`src/components/ConnectWallet.tsx`

Branch

`task/669-rainbowkit-wallets`

Self-Verification (T3)

• RainbowKit modal opens with 5 wallet options (MetaMask, Base Account, Trust, Rainbow, WalletConnect)
• MetaMask connection works
• Coinbase / WalletConnect connection works
• Farcaster miniapp auto-connect works — open in Warpcast, wallet connects automatically without modal
• Outside Farcaster — clicking "Connect Wallet" opens RainbowKit modal
• Connected state shows Farcaster PFP + username + truncated address
• Disconnect works
• Mobile nav close on profile navigation still works
• RainbowKit theme matches PlotLink aesthetic — cream background, monospace font, minimal shadows, no heavy UI
• Modal is compact and mobile-friendly — test at 375px viewport
• `npm run build` passes
• No visual regressions on desktop or mobile