feat(wallet): use reown for wallets management

apps/cowswap-frontend/package.json

@@ -72,6 +72,7 @@
     "@react-spring/web": "9.7.3",
     "@reown/appkit": "1.8.19",
     "@reown/appkit-adapter-wagmi": "1.8.19",
+    "@reown/appkit-controllers": "1.8.19",
     "@reduxjs/toolkit": "1.9.5",
     "@safe-global/api-kit": "4.0.1",
     "@safe-global/types-kit": "3.0.0",

apps/cowswap-frontend/src/locales/en-US.po

@@ -1588,6 +1588,10 @@ msgstr "Cookie Policy"
 msgid "Partner fee can not be more than {PARTNER_FEE_MAX_BPS} BPS!"
 msgstr "Partner fee can not be more than {PARTNER_FEE_MAX_BPS} BPS!"
 
+#: apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/tradeButtonsMap.tsx
+msgid "Restoring wallet"
+msgstr "Restoring wallet"
+
 #: apps/cowswap-frontend/src/modules/tokensList/pure/TokensContent/index.tsx
 #~ msgid "Manage Token Lists"
 #~ msgstr "Manage Token Lists"

apps/cowswap-frontend/src/modules/application/containers/App/Updaters.tsx

@@ -8,21 +8,22 @@ import {
   TokensListsUpdater,
   UnsupportedTokensUpdater,
 } from '@cowprotocol/tokens'
-import { useWalletInfo, WalletUpdater } from '@cowprotocol/wallet'
+import { useWalletInfo, WalletUpdater, WidgetStandaloneModeUpdater } from '@cowprotocol/wallet'
 
 import { CowSdkUpdater } from 'cowSdk'
 import { useBalancesContext } from 'entities/balancesContext/useBalancesContext'
 import { BridgeOrdersCleanUpdater } from 'entities/bridgeOrders'
 import { BridgeProvidersUpdater, useBridgeSupportedNetworks } from 'entities/bridgeProvider'
 import { CorrelatedTokensUpdater } from 'entities/correlatedTokens'
+import { useInjectedWidgetParams } from 'entities/injectedWidget'
 import { ThemeConfigUpdater } from 'theme/ThemeConfigUpdater'
 import { TradingSdkUpdater } from 'tradingSdk/TradingSdkUpdater'
 
 import { BalancesDevtools, CommonPriorityBalancesAndAllowancesUpdater } from 'modules/balancesAndAllowances'
 import { PendingBridgeOrdersUpdater, BridgingEnabledUpdater } from 'modules/bridge'
 import { BalancesCombinedUpdater } from 'modules/combinedBalances'
 import { InFlightOrderFinalizeUpdater } from 'modules/ethFlow'
-import { CowEventsUpdater, InjectedWidgetUpdater, WidgetStandaloneModeUpdater } from 'modules/injectedWidget'
+import { CowEventsUpdater, InjectedWidgetUpdater } from 'modules/injectedWidget'
 import { FinalizeTxUpdater } from 'modules/onchainTransactions'
 import {
   OrderProgressEventsUpdater,
@@ -77,6 +78,7 @@ export function Updaters(): ReactNode {
   const { chainId: sourceChainId } = useSourceChainId()
   const bridgeNetworkInfo = useBridgeSupportedNetworks()
   const balancesContext = useBalancesContext()
+  const { standaloneMode } = useInjectedWidgetParams()
   const balancesAccount = balancesContext.account || account
 
   return (
@@ -102,7 +104,7 @@ export function Updaters(): ReactNode {
       <InFlightOrderFinalizeUpdater />
       <SpotPricesUpdater />
       <InjectedWidgetUpdater />
-      <WidgetStandaloneModeUpdater />
+      <WidgetStandaloneModeUpdater standaloneMode={standaloneMode} />
       <CowEventsUpdater />
       <UsdPricesUpdater />
       <OrdersNotificationsUpdater />

apps/cowswap-frontend/src/modules/injectedWidget/index.ts

@@ -1,6 +1,5 @@
 export { InjectedWidgetUpdater } from './updaters/InjectedWidgetUpdater'
 export { CowEventsUpdater } from './updaters/CowEventsUpdater'
-export { WidgetStandaloneModeUpdater } from './updaters/WidgetStandaloneMode.updater'
 export { useIsInfiniteApproveDisabledInWidget } from './hooks/useIsInfiniteApproveDisabledInWidget'
 export { useInjectedWidgetDeadline } from './hooks/useInjectedWidgetDeadline'
 export { useInjectedWidgetMetaData } from './hooks/useInjectedWidgetMetaData'

apps/cowswap-frontend/src/modules/trade/hooks/setupTradeState/useSetupTradeState.ts

@@ -252,6 +252,9 @@ export function useSetupTradeState(): void {
    * 4. Otherwise, navigate to the new chainId with default tokens
    */
   useEffect(() => {
+    // Take urlChainId directly from window.location to avoid race conditions
+    const urlChainId = getRawCurrentChainIdFromUrl()
+
     // When we came back to the tab and there is a new chainId in provider
     const providerChangedNetworkWhenWindowInactive =
       isWindowVisible && prevIsWindowVisible !== isWindowVisible && providerChainId !== urlChainId

apps/cowswap-frontend/src/modules/tradeFormValidation/hooks/useTradeFormValidationContext.ts

@@ -6,7 +6,13 @@ import { Nullish } from '@cowprotocol/cow-sdk'
 import { Currency, Token } from '@cowprotocol/currency'
 import { useENSAddress } from '@cowprotocol/ens'
 import { useIsTradeUnsupported, useIsXstockToken, useTryFindToken } from '@cowprotocol/tokens'
-import { useGnosisSafeInfo, useIsTxBundlingSupported, useWalletDetails, useWalletInfo } from '@cowprotocol/wallet'
+import {
+  useGnosisSafeInfo,
+  useIsRestoringConnection,
+  useIsTxBundlingSupported,
+  useWalletDetails,
+  useWalletInfo,
+} from '@cowprotocol/wallet'
 
 import { useHasHookBridgeProvidersEnabled } from 'entities/bridgeProvider'
 import { useInjectedWidgetParams } from 'entities/injectedWidget'
@@ -44,6 +50,7 @@ export function useTradeFormValidationContext(): TradeFormValidationCommonContex
   const isProviderNetworkDeprecated = useIsProviderNetworkDeprecated()
   const isOnline = useIsOnline()
   const { isLoading: isBalancesLoading, hasFirstLoad, error: balancesError } = useTokensBalancesCombined()
+  const isRestoringConnection = useIsRestoringConnection()
 
   const { inputCurrency, outputCurrency, recipient, tradeType } = derivedTradeState || {}
   const customTokenError = useTokenCustomTradeError(inputCurrency, outputCurrency, tradeQuote.error)
@@ -115,6 +122,7 @@ export function useTradeFormValidationContext(): TradeFormValidationCommonContex
       isInputCurrencyXstock,
       isOutputCurrencyXstock,
       isNonEvmReceiverConfirmed,
+      isRestoringConnection,
     }
   }, [
     hasFirstLoad,
@@ -146,6 +154,7 @@ export function useTradeFormValidationContext(): TradeFormValidationCommonContex
     injectedWidgetParams,
     tradePriceImpact,
     isNonEvmReceiverConfirmed,
+    isRestoringConnection,
   ])
 }
 

apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/tradeButtonsMap.tsx

@@ -416,4 +416,7 @@ export const tradeButtonsMap: Record<TradeFormValidation, ButtonErrorConfig | Bu
   [TradeFormValidation.WidgetConstrainedTokenPair]: {
     text: <Trans>The token pair is constrained</Trans>,
   },
+  [TradeFormValidation.RestoringWallet]: {
+    text: <Trans>Restoring wallet</Trans>,
+  },
 }

apps/cowswap-frontend/src/modules/tradeFormValidation/services/validateTradeForm.ts

@@ -37,6 +37,7 @@ export function validateTradeForm(context: TradeFormValidationContext): TradeFor
     injectedWidgetParams,
     tradePriceImpact,
     isNonEvmReceiverConfirmed,
+    isRestoringConnection,
   } = context
 
   const {
@@ -117,7 +118,9 @@ export function validateTradeForm(context: TradeFormValidationContext): TradeFor
   }
 
   if (!isSwapUnsupported && !account) {
-    validations.push(TradeFormValidation.WalletNotConnected)
+    validations.push(
+      isRestoringConnection ? TradeFormValidation.RestoringWallet : TradeFormValidation.WalletNotConnected,
+    )
   }
 
   if (!isSupportedWallet) {

apps/cowswap-frontend/src/modules/tradeFormValidation/types.ts

@@ -58,6 +58,7 @@ export interface TradeFormValidationCommonContext {
   injectedWidgetParams: Partial<CowSwapWidgetAppParams>
   tradePriceImpact: PriceImpact
   isNonEvmReceiverConfirmed: boolean
+  isRestoringConnection: boolean
 }
 
 export interface TradeFormValidationContext extends TradeFormValidationCommonContext {}
@@ -75,6 +76,7 @@ export enum TradeFormValidation {
   WalletNotSupported,
   SafeReadonlyUser,
   WalletCapabilitiesLoading,
+  RestoringWallet,
 
   // Quote request params
   CurrencyNotSet,

apps/cowswap-frontend/vite.config.mts

@@ -13,6 +13,7 @@ import svgr from 'vite-plugin-svgr'
 import viteTsConfigPaths from 'vite-tsconfig-paths'
 
 import { execSync } from 'child_process'
+import { readFile } from 'node:fs/promises'
 import * as path from 'path'
 
 import pkg from './package.json'
@@ -195,6 +196,25 @@ export default defineConfig(({ mode, isPreview }) => {
               })
             },
           },
+          {
+            // @reown/appkit ships .js.map files whose `sources` point at the original
+            // TypeScript (exports/react.ts, src/**/*.ts) without inlining `sourcesContent`,
+            // and the published tarball doesn't include those .ts files. esbuild follows the
+            // sourceMappingURL pragma during prebundling and propagates the null sources into
+            // the optimized dep map, so devtools 404s on every reown source ("DevTools failed
+            // to load source map"). Drop the pragma for @reown files so esbuild treats the
+            // shipped compiled .js as the source and embeds real `sourcesContent` instead.
+            name: 'cow-reown-strip-sourcemap',
+            setup(build) {
+              build.onLoad({ filter: /[\\/]@reown[\\/].*\.js$/ }, async (args) => {
+                const contents = await readFile(args.path, 'utf8')
+                return {
+                  contents: contents.replace(/\n?\/\/# sourceMappingURL=.*$/gm, ''),
+                  loader: 'js',
+                }
+              })
+            },
+          },
         ],
       },
       // Only include packages that are direct or resolvable from the app; transitive

libs/wallet/package.json

@@ -27,6 +27,7 @@
     "@cowprotocol/cow-sdk": "9.1.2",
     "@reown/appkit": "1.8.19",
     "@reown/appkit-adapter-wagmi": "1.8.19",
+    "@reown/appkit-controllers": "1.8.19",
     "@cowprotocol/assets": "workspace:*",
     "@cowprotocol/common-const": "workspace:*",
     "@cowprotocol/common-utils": "workspace:*",
@@ -62,6 +63,7 @@
   "devDependencies": {
     "@types/ms.macro": "2.0.0",
     "@types/react": "19.1.3",
-    "@types/styled-components": "5.1.34"
+    "@types/styled-components": "5.1.34",
+    "@testing-library/react": "16.3.0"
   }
 }

libs/wallet/src/api/container/WalletProvider/index.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useEffect } from 'react'
 
 import { useTheme } from '@cowprotocol/common-hooks'
 
-import { reownAppKit } from '../../../reown/init'
+import { reownAppKit } from '../../../wagmi/config'
 
 interface WalletProviderProps {
   children: ReactNode

libs/wallet/src/constants.ts

@@ -5,9 +5,6 @@ import type { CaipNetworkId } from '@reown/appkit'
 /** Custom event name for "open wallet modal". Dispatched by the app; handled in Web3Provider to open Reown (AppKit). */
 export const OPEN_WALLET_MODAL_EVENT = 'cowswap-open-wallet-modal'
 
-/** SessionStorage key: set on user disconnect so InjectedBrowserAutoConnect does not reopen the wallet (e.g. Rabby). */
-export const USER_DISCONNECTED_SESSION_KEY = 'cowswap:userDisconnected:v0'
-
 export const WC_DISABLED_TEXT =
   'Wallet-connect based wallet is already in use. Please disconnect it to connect to this wallet.'
 

libs/wallet/src/index.ts

@@ -20,6 +20,8 @@ export * from './wagmi/hooks/useDisconnectWallet'
 export * from './wagmi/hooks/useSwitchNetwork'
 export * from './wagmi/hooks/useConnectionType'
 export * from './wagmi/hooks/useIsRestoringConnection'
+export { WidgetStandaloneModeUpdater } from './updaters/WidgetStandaloneMode.updater'
+export { reownAppKit, wagmiAdapter, wagmiStorage } from './wagmi/config'
 
 // Updater
 export { WalletUpdater } from './wagmi/updater'
@@ -40,3 +42,6 @@ export { Web3Provider } from './wagmi/Web3Provider'
 // TODO: this export is discussable, however it's already used outside
 export * from './api/state'
 export * from './api/state'
+
+export * from './utils/getIsSafeAppIframe'
+export * from './utils/connectWalletById'

libs/wallet/src/reown/consts.ts

@@ -14,3 +14,4 @@ export const SUPPORTED_REOWN_NETWORKS = ALL_SUPPORTED_CHAIN_IDS.flatMap((chainId
 ) as [Chain, ...Chain[]]
 
 export const COW_WIDGET_CONNECTOR_ID = 'cow-widget'
+export const SAFE_CONNECTOR_ID = 'safe'

libs/wallet/src/state/appWalletContext.atom.ts

@@ -0,0 +1,7 @@
+import { atom } from 'jotai'
+
+export interface AppWalletContext {
+  standaloneMode: boolean | undefined
+}
+
+export const appWalletContextAtom = atom<AppWalletContext | null>(null)