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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions