Skip to content

refactor: remove RainbowKit and replace with custom wagmi wallet modal #96

Description

@kushbosamiya

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

  • npm run lint passes with 0 errors
  • No imports from @rainbow-me/rainbowkit remain anywhere
  • Connect → approve → address shows correctly
  • Reject in wallet → modal stays open, error shown inline
  • Switch chain from UI → wallet prompts → UI updates reactively
  • Switch to unsupported chain from wallet → "Wrong Network" renders
  • Switch to unknown chain → "Unknown Network" renders with chain ID
  • All wallet events log in [WALLET][EVENT_NAME] format in dev
  • Pool interaction, buy/sell, and rebalance flows are unaffected
  • No Framer Motion style conflicts remain

References

  • Related PR in IdentityTokens: StabilityNexus/IdentityTokens-EVM-Frontend#92
  • wagmi docs: https://wagmi.sh

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions