Skip to content

refactor: Migrate to zero-dependency wagmi wallet adapter and remove RainbowKit #25

Description

@kushbosamiya

Remove RainbowKit and replace with native wagmi wallet layer

Problem

@rainbow-me/rainbowkit (v2.2.8) is currently the wallet layer for this app — wired in through providers/WalletProvider.tsx and importing third-party styles into app/globals.css. It's doing more than needed and taking control away from us in the places where we need it most: unrecognized chains, stale cached sessions, and connection state edge cases.

Beyond the bloat, this directly conflicts with the zero-dependency stance already in place across the ecosystem. Both Fate-EVM-Frontend and OrbOracle-EVM-Frontend have already dropped RainbowKit in favor of custom wagmi/viem connection flows. This repo is the odd one out.

What needs to change

  • Uninstall @rainbow-me/rainbowkit and remove the stylesheet import from globals.css
  • Tear down the RainbowKitProvider wrapper and the theme injection in WalletProvider.tsx
  • Replace with a useWalletConnection hook using useAccount, useConnect, and useDisconnect directly
  • Port the ConnectBtn and ChainSwitcher components over from Fate-EVM-Frontend — these already handle network verification at runtime

Acceptance criteria

  • @rainbow-me/rainbowkit fully removed from package.json and the lockfile
  • Connect, disconnect, and chain switching all work through native wagmi hooks
  • No regressions in signature/transaction submission across existing forms
  • npm run dev and npm run build pass with zero hydration warnings or missing-style errors

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