feat(bridge): migrate rainbowkit to reown by chrstph-dvx · Pull Request #293 · OffchainLabs/arbitrum-portal

chrstph-dvx · 2026-04-21T20:57:25Z

Summary

Steps to test

vercel · 2026-04-21T20:57:29Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
arbitrum-portal	Ready	Preview	Apr 22, 2026 7:20pm

Copilot

Pull request overview

This PR migrates wallet-connection UX and configuration from RainbowKit to Reown AppKit across both the bridge UI and the main app shell, along with related dependency/config updates.

Changes:

Replace RainbowKit usage (ConnectButton, useConnectModal, wallet lists/config) with Reown AppKit + WagmiAdapter, and introduce a shared useWalletModal hook.
Refactor chain/network setup and wallet analytics tagging to use AppKit (useWalletInfo) and updated wagmi/viem versions.
Update TypeScript target to es2020 and adjust app layouts/providers to remove RainbowKit styling/providers.

Reviewed changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
yarn.lock	Updates/realigns dependency graph for AppKit + wagmi/viem changes.
tsconfig.base.json	Bumps TS compilation target to ES2020.
packages/arb-token-bridge-ui/src/wallet/hooks/useWalletModal.ts	Adds AppKit-based connect modal helper.
packages/arb-token-bridge-ui/src/util/walletConnectUtils.ts	Removes WalletConnect v2 disconnect cleanup helper.
packages/arb-token-bridge-ui/src/util/wagmi/wagmiAdditionalNetworks.ts	Switches `Chain` typing to `viem`.
packages/arb-token-bridge-ui/src/util/wagmi/setup.ts	Replaces RainbowKit config with AppKit + WagmiAdapter initialization and exports `wagmiConfig`.
packages/arb-token-bridge-ui/src/util/AnalyticsUtils.ts	Loosens wallet name typing for connect event payload.
packages/arb-token-bridge-ui/src/hooks/useAccountType.ts	Adds optional chainId override for account type resolution.
packages/arb-token-bridge-ui/src/hooks/useAccountMenu.ts	Removes RainbowKit/WC disconnect integration.
packages/arb-token-bridge-ui/src/components/Widget/WidgetHeaderAccountButton.tsx	Uses `useWalletModal` + `disconnectAsync` instead of RainbowKit modal.
packages/arb-token-bridge-ui/src/components/TransferPanel/ConnectWalletButton.tsx	Uses `useWalletModal` instead of RainbowKit.
packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRowAction.tsx	Replaces RainbowKit `ConnectButton.Custom` with AppKit modal hook.
packages/arb-token-bridge-ui/src/components/App/useSyncConnectedChainToQueryParams.ts	Refactors SCW chain-sync behavior; removes disconnect/reload path.
packages/arb-token-bridge-ui/src/components/App/useSyncConnectedChainToAnalytics.ts	Uses AppKit wallet metadata instead of wagmi connector name mapping.
packages/arb-token-bridge-ui/package.json	Swaps RainbowKit dependency for AppKit + updates wagmi/viem.
packages/app/src/components/earn/YourHoldingsEmptyState.tsx	Uses bridge `useWalletModal` for connect action.
packages/app/src/components/earn/EarnActionPanel/EarnActionSubmitButton.tsx	Uses `useWalletModal` instead of RainbowKit `ConnectButton.Custom`.
packages/app/src/components/AppShell/providers/wagmi/setup.ts	Removes now-obsolete re-export shim.
packages/app/src/components/AppShell/providers/AppProviders.tsx	Drops RainbowKit provider/theme; uses bridge `wagmiConfig`.
packages/app/src/components/AppShell/components/NavWallet.tsx	Replaces RainbowKit `ConnectButton.Custom` with wagmi + `useWalletModal`.
packages/app/src/app/layout.tsx	Removes RainbowKit styles; adds AppKit-related font CSS variables.
packages/app/src/app/(with-sidebar)/bridge/layout.tsx	Removes RainbowKit styles import.
packages/app/src/app/(embed)/bridge/embed/layout.tsx	Removes RainbowKit styles import.
packages/app/package.json	Removes RainbowKit and adds AppKit-related dependencies + bumps wagmi/viem.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-21T21:02:54Z

            )}

-            <button onClick={() => disconnect()} className={MENU_ITEM_BUTTON_CLASSES}>
+            <button onClick={() => disconnectAsync()} className={MENU_ITEM_BUTTON_CLASSES}>


disconnectAsync() is called without awaiting/handling errors. If it rejects, it can result in an unhandled promise rejection in the browser. Consider using void disconnectAsync().catch(...) (or wrapping in an async handler with try/catch).

Suggested change

<button onClick={() => disconnectAsync()} className={MENU_ITEM_BUTTON_CLASSES}>

<button

onClick={() => {

void disconnectAsync().catch((error) => {

console.error('Failed to disconnect wallet', error);

});

}}

className={MENU_ITEM_BUTTON_CLASSES}

>

Copilot · 2026-04-21T21:02:55Z

 const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!;

 if (!projectId) {
  logger.error('NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID variable missing.');
 }



projectId is asserted as non-null (process.env...!) but execution continues even when it’s missing (only logs an error). This can pass an invalid projectId into WagmiAdapter / createAppKit and crash at runtime. Consider failing fast (throw) or skipping initialization when NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID is not set.

Copilot · 2026-04-21T21:02:55Z

  useEffect(() => {
-    if (isConnected && connector) {
-      const walletName = getWalletName(connector.name);
+    if (isConnected) {
+      const walletName = walletInfo?.name ?? 'Other';
      trackEvent('Connect Wallet Click', { walletName });



This effect will fire once when isConnected flips true (often before walletInfo is populated) and then again when walletInfo?.name becomes available, which can double-log the 'Connect Wallet Click' event. Consider gating the event to only run once per connection (e.g., track the last connected session/address in a ref) or only firing when walletInfo?.name is defined.

Copilot · 2026-04-21T21:02:55Z

+  const openConnectModal = useCallback(async () => {
+    await switchNetwork(networks.sourceChain);
+    await open({ view: 'Connect', namespace: 'eip155' });


openConnectModal is an async callback that awaits switchNetwork and open but doesn’t handle errors. When used directly as an onClick handler throughout the UI, any rejection can become an unhandled promise rejection. Consider wrapping the body in try/catch (and possibly returning a non-async function that internally voids the async work) so UI callers don’t need to remember to handle failures.

Suggested change

const openConnectModal = useCallback(async () => {

await switchNetwork(networks.sourceChain);

await open({ view: 'Connect', namespace: 'eip155' });

const openConnectModal = useCallback(() => {

void (async () => {

try {

await switchNetwork(networks.sourceChain);

await open({ view: 'Connect', namespace: 'eip155' });

} catch (error) {

console.error('Failed to open connect modal.', error);

}

})();

Copilot · 2026-04-21T21:02:55Z

                      variant="secondary"
                      className="flex w-full items-center justify-center border-none bg-white/5"
-                      onClick={() => disconnect()}
+                      onClick={() => disconnectAsync()}


disconnectAsync() returns a promise and is invoked without awaiting/handling errors. If the disconnect mutation rejects, this can surface as an unhandled promise rejection. Consider using void disconnectAsync().catch(...) (or a small async handler with try/catch) to keep failures contained.

Suggested change

onClick={() => disconnectAsync()}

onClick={() => {

void disconnectAsync().catch(() => {});

}}

Copilot AI review requested due to automatic review settings April 21, 2026 20:57

Copilot started reviewing on behalf of chrstph-dvx April 21, 2026 20:57 View session

chrstph-dvx force-pushed the migrate-to-reown branch from 181a591 to 72a7bf0 Compare April 21, 2026 21:00

Copilot AI reviewed Apr 21, 2026

View reviewed changes

vercel Bot deployed to Preview April 21, 2026 21:05 View deployment

chrstph-dvx changed the title ~~feat(earn): Earn cleanup, add footer, update ToS and bugfixes (#264)~~ feat(bridge): migrate rainbowkit to reown Apr 21, 2026

vercel Bot deployed to Preview April 21, 2026 22:07 View deployment

chrstph-dvx added 2 commits April 22, 2026 18:16

feat: migrate wallet connection from rainbowkit to reown

0097187

Change disconnectAsync to disconnect

5b700e6

chrstph-dvx force-pushed the migrate-to-reown branch from 1e945fb to 5b700e6 Compare April 22, 2026 18:16

vercel Bot deployed to Preview April 22, 2026 18:21 View deployment

Fix E2E

4b739f5

vercel Bot deployed to Preview April 22, 2026 19:20 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(bridge): migrate rainbowkit to reown#293

feat(bridge): migrate rainbowkit to reown#293
chrstph-dvx wants to merge 3 commits intomasterfrom
migrate-to-reown

chrstph-dvx commented Apr 21, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Apr 21, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-            <button onClick={() => disconnectAsync()} className={MENU_ITEM_BUTTON_CLASSES}>
+            <button
+              onClick={() => {
+                void disconnectAsync().catch((error) => {
+                  console.error('Failed to disconnect wallet', error);
+                });
+              }}
+              className={MENU_ITEM_BUTTON_CLASSES}
+            >

Conversation

chrstph-dvx commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Steps to test

Uh oh!

vercel Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chrstph-dvx commented Apr 21, 2026 •

edited

Loading

vercel Bot commented Apr 21, 2026 •

edited

Loading