feat(wallet): use reown for wallets management (#7639)

Author: shoom3301

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/injectedWidget/updaters/WidgetStandaloneMode.updater.tsx

@@ -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/trade/hooks/setupTradeState/useSetupTradeState.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/hooks/useTradeFormValidationContext.ts

@@ -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/pure/TradeFormButtons/tradeButtonsMap.tsx

@@ -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/services/validateTradeForm.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,