Updates wallet connection and chain switch flows to support wagmi

[bsvalverde]

Summary

This PR updates wallet connection and network handling for the app, migrating all logic to the new Wagmi/Reown connection system while preserving feature parity with the existing Web3React-based system behind a feature flag. Key improvements include:

• Wallet connection flows: All supported wallets now connect via Reown (AppKit), automatically handling EIP-6963 and Trezor.
• Connect/Disconnect handling: Robust handling for all wallets, including injected, WalletConnect, Coinbase, and Gnosis Safe.
• Chain/network handling: Migrate chain switching logic for all supported networks to Wagmi/Viem.

Video Demo:
https://www.loom.com/share/c79aadcc70d54b49a151c5f7276da9df

To Test

1. Enable the new connection system via feature flag

• Open the browser console or DevTools.
• Set the local storage key useViemMigration to true.
• Refresh the page.
• Confirm the app is now using the Wagmi/Reown connection system (feature flag is active).

2. Test wallet connections

• Connect with various wallets (Injected extensions, WalletConnect, Coinbase).
• Verify wallet information displays correctly (account address, network, balance).
• Confirm connections work both directly and via WalletConnect.
• Ensure robust connect/disconnect behavior for all tested wallets.
• Note: Gnosis Safe support is not included in this PR and will be tested in a future PR.

3. Test chain/network switching

• Attempt to switch networks while connected with a wallet.
• Attempt to switch networks while no wallet is connected.
• Verify that unsupported networks are handled gracefully in the UI.
• Confirm the frontend reads chain state exclusively from the new connection layer when the feature flag is active.

Summary by CodeRabbit

• New Features

  • Reown AppKit and Safe Apps SDK integrated into wallet flows; improved wallet metadata (peer name/icon) handling.
  • Wallet disconnect and network switch now await completion for more reliable behavior.

• Configuration

  • Vite dedupe to avoid shared React context issues.
  • Jest config adjusted and new test mock for AppKit.

• Dependencies

  • Bumped wagmi (3.4.1), @wagmi/core (^3.3.1), viem (^2.45.0) and updated WalletConnect resolutions.

[bsvalverde]

@elena-zh I believe points 1 and 3 are fixed.

Points 2, 4, 5, 6, 7, 8, 9 and 10 are related to the ON flag, so I believe the agreement is to test that later, is that correct?

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

libs/wallet/src/wagmi/Web3Provider.tsx (1)

1-30: ⚠️ Potential issue | 🟡 Minor

Call appKit.close() on cleanup and add missing dependencies.

Line 28 references appKit.close without invoking it—this is a no-op and prevents intended cleanup. Wrap the initialization in a cleanup function that calls close(), add explicit dependencies, and remove the TODO scaffolding before shipping.

🛠️ Proposed fix

-useEffect(() => {
-  if (LAUNCH_DARKLY_VIEM_MIGRATION) {
-    // TODO M-7 COW-572
-    // This will be moved back to config file on cleanup
-    const appKit = createAppKit(appKitParams)
-
-    appKit.updateFeatures({
-      connectorTypeOrder: ['recent', 'injected', 'featured', 'custom', 'external', 'recommended', 'walletConnect'],
-    })
-    appKit.close
-  }
-}, [])
+useEffect(() => {
+  if (!LAUNCH_DARKLY_VIEM_MIGRATION) return
+
+  const appKit = createAppKit(appKitParams)
+  appKit.updateFeatures({
+    connectorTypeOrder: ['recent', 'injected', 'featured', 'custom', 'external', 'recommended', 'walletConnect'],
+  })
+
+  return () => {
+    appKit.close?.()
+  }
+}, [LAUNCH_DARKLY_VIEM_MIGRATION, appKitParams])

🧹 Nitpick comments (2)

apps/cowswap-frontend/src/legacy/state/application/hooks.ts (1)

30-40: Consider tracking migration work externally rather than inline scaffolding.

The commented-out AppKit code and TODO references (M-7 COW-572) serve as placeholders for migration work. Per coding guidelines, TODO scaffolding should be resolved before shipping. Since this is a feature-flag migration in progress, consider:

1. Tracking the re-enablement work in an issue/task system rather than inline comments
2. When the AppKit path is re-enabled, address the toggle semantics concern from the prior review—useAppKit().open() is open-only, not a toggle. You'll need useAppKitState() to check open state and call close() appropriately, wrapped in useCallback for referential stability.

The current fallback behavior (returning toggleModal from useToggleModal) is correct and stable.

libs/wallet/src/wagmi/config.ts (1)

51-63: Prefer shared chain lists over re-deriving from enums.

If a shared chain/network list exists in common constants, reuse it here to avoid drift between wagmi/network config and other modules.

As per coding guidelines, reuse chain/network lists from shared constants (AFFILIATE_SUPPORTED_CHAIN_IDS, etc.) rather than cloning arrays.

[elena-zh]

@elena-zh I believe points 1 and 3 are fixed.

Points 2, 4, 5, 6, 7, 8, 9 and 10 are related to the ON flag, so I believe the agreement is to test that later, is that correct?

Hey @bsvalverde , I believe so, I tested it according to the issue description you provided, so reported something in advance.
Anyways, it would be great if you keep im mind these issues in the future implementations, so I will not need to report them for the 2nd time,

As for the current fix, I still don't have possibility to check whether the flag is properly working as this Leadndro's comment has not been addressed (comes from this thread https://cowservices.slack.com/archives/C07FQTUKLJC/p1770129760752509?thread_ts=1770061770.456439&cid=C07FQTUKLJC. Sorry, in this link you should change the domain to your company internal's one in order to read it.

I've created the flag isViemMigrationEnabled so you can control it, Elena.
Bernardo, please use that in order to make Elena's testing possible on mobile.
You could set it up in a way that your local feature flag takes precedence if set (to true/false), to not block you on our setting, and unblock Elena on her testing.

For now, I will focus on regression tests with the flag off, will let you know once I finish.

Thanks.

[elena-zh]

@bsvalverde , it appears that WC connection is not working in a desktop version.
It works in a mobile device, but not in the desktop app:

• Connect to Safe wallet with networks mismatch: the app shows 'disconnected' state, but it shows 'connected' state when I try to connect to a wallet once again

Connection is not reset when I refresh the page.

Connecting to EOA/another wallet where a chain matches:

• It connects, but the app immediately freezes