Overview
Remove @rainbow-me/rainbowkit and all related third-party wallet modal UI
dependencies from the Fate EVM Frontend. Replace with a fully custom,
lightweight wallet connection system built directly on wagmi primitives to
fix Framer Motion style overrides, reduce bundle weight, and give full UI
control over the connect/disconnect/network-switching experience.
Problem
@rainbow-me/rainbowkit injects global CSS that conflicts with Framer Motion
animations used elsewhere in the app.
- The RainbowKit modal overrides layout styles and introduces unpredictable
z-index and positioning bugs.
- Heavy bundle footprint from an opinionated UI library for a use case we
can own entirely with wagmi hooks.
- No control over modal design, connector ordering, or network mismatch UX.
Solution
Replace RainbowKit with a local custom wallet UI that:
- Uses wagmi hooks directly (
useAccount, useConnect, useDisconnect,
useChainId, useSwitchChain)
- Renders a fully custom animated connect modal with local wallet logos
- Handles all wallet states — disconnected, connecting, connected,
wrong network, unknown network
- Implements explicit chain switching from both UI and wallet side
- Adds structured event logging for every wallet interaction
Changes
| Area |
Change |
package.json |
Remove @rainbow-me/rainbowkit and related packages |
providers/providers.tsx |
Remove RainbowKitProvider wrapper |
app/layout.tsx |
Remove RainbowKit stylesheet import |
lib/wallets.ts |
Add connector → logo/name mapping utility |
lib/chains.ts |
Add supported chain registry and validation helpers |
lib/walletLogger.ts |
Add structured wallet event logger |
hooks/useWalletConnection.ts |
Add unified wallet state + actions hook |
hooks/useChainChangeWatcher.ts |
Add external chain change detection hook |
components/ui/ConnectBtn.tsx |
Rebuild with custom modal, all wallet states |
components/ui/ChainSwitcher.tsx |
Add network switcher UI component |
public/wallets/ |
Add local wallet logo assets |
Wallet States Covered
- Disconnected — Connect Wallet button, animated connector list modal
- Connecting — Per-row loading spinner, inline error on rejection
- Connected / Correct Network — Address badge, chain name, account modal
- Connected / Wrong Network — Warning badge, switch network CTA
- Connected / Unknown Network — "Unknown Network" label, chain ID display
Acceptance Criteria
References
- Related PR in IdentityTokens:
StabilityNexus/IdentityTokens-EVM-Frontend#92
- wagmi docs: https://wagmi.sh
Overview
Remove
@rainbow-me/rainbowkitand all related third-party wallet modal UIdependencies from the Fate EVM Frontend. Replace with a fully custom,
lightweight wallet connection system built directly on wagmi primitives to
fix Framer Motion style overrides, reduce bundle weight, and give full UI
control over the connect/disconnect/network-switching experience.
Problem
@rainbow-me/rainbowkitinjects global CSS that conflicts with Framer Motionanimations used elsewhere in the app.
z-index and positioning bugs.
can own entirely with wagmi hooks.
Solution
Replace RainbowKit with a local custom wallet UI that:
useAccount,useConnect,useDisconnect,useChainId,useSwitchChain)wrong network, unknown network
Changes
package.json@rainbow-me/rainbowkitand related packagesproviders/providers.tsxRainbowKitProviderwrapperapp/layout.tsxlib/wallets.tslib/chains.tslib/walletLogger.tshooks/useWalletConnection.tshooks/useChainChangeWatcher.tscomponents/ui/ConnectBtn.tsxcomponents/ui/ChainSwitcher.tsxpublic/wallets/Wallet States Covered
Acceptance Criteria
npm run lintpasses with 0 errors@rainbow-me/rainbowkitremain anywhere[WALLET][EVENT_NAME]format in devReferences
StabilityNexus/IdentityTokens-EVM-Frontend#92