[7] fix(tokens): fix tokens list loading state

apps/cowswap-frontend/src/common/hooks/useNativeBalance.ts

@@ -7,7 +7,7 @@ import ms from 'ms.macro'
 import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
 
 const swrOptions: SWRConfiguration = {
-  refreshInterval: ms`1m`,
+  refreshInterval: ms`30s`,
   revalidateOnFocus: false,
 }
 

apps/cowswap-frontend/src/common/updaters/FeesUpdater.ts

@@ -8,8 +8,6 @@ import { useENSAddress } from '@cowprotocol/ens'
 import { useIsUnsupportedToken } from '@cowprotocol/tokens'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
-import ms from 'ms.macro'
-
 import { useRefetchQuoteCallback } from 'legacy/hooks/useRefetchPriceCallback'
 import { useAllQuotes, useIsBestQuoteLoading, useSetQuoteError } from 'legacy/state/price/hooks'
 import { QuoteInformationObject } from 'legacy/state/price/reducer'
@@ -31,14 +29,6 @@ export const TYPED_VALUE_DEBOUNCE_TIME = 350
 const REFETCH_CHECK_INTERVAL = 10000 // Every 10s
 const RENEW_FEE_QUOTES_BEFORE_EXPIRATION_TIME = 30000 // Will renew the quote if there's less than 30 seconds left for the quote to expire
 const WAITING_TIME_BETWEEN_EQUAL_REQUESTS = 5000 // Prevents from sending the same request to often (max, every 5s)
-const UNSUPPORTED_TOKEN_TTL = ms`1h`
-
-/**
- * Since a token might become supported, we should periodically (once in 1h) refresh its state
- */
-const isUnsupportedTokenExpired = ({ dateAdded }: { dateAdded: number }) => {
-  return dateAdded + UNSUPPORTED_TOKEN_TTL < Date.now()
-}
 
 type FeeQuoteParams = Omit<LegacyFeeQuoteParams, 'validTo'>
 
@@ -158,7 +148,7 @@ export function FeesUpdater(): null {
   const isLoading = useIsBestQuoteLoading()
   const isEthFlow = useIsEoaEthFlow()
 
-  const isUnsupportedTokenGp = useIsUnsupportedToken()
+  const isUnsupportedToken = useIsUnsupportedToken()
 
   const appData = useAppData()
 
@@ -238,14 +228,12 @@ export function FeesUpdater(): null {
       }
     }
 
-    const unsupportedToken = isUnsupportedTokenGp(sellCurrencyId) || isUnsupportedTokenGp(buyCurrencyId)
+    const unsupportedToken = isUnsupportedToken(sellCurrencyId) || isUnsupportedToken(buyCurrencyId)
 
     // Callback to re-fetch both the fee and the price
     const refetchQuoteIfRequired = () => {
       // if no token is unsupported and needs refetching
-      const hasToRefetch =
-        (!unsupportedToken || isUnsupportedTokenExpired(unsupportedToken)) &&
-        isRefetchQuoteRequired(isLoading, quoteParams, quoteInfo)
+      const hasToRefetch = !unsupportedToken && isRefetchQuoteRequired(isLoading, quoteParams, quoteInfo)
 
       if (hasToRefetch) {
         // Decide if this is a new quote, or just a refresh
@@ -286,7 +274,7 @@ export function FeesUpdater(): null {
     buyCurrency,
     quoteInfo,
     refetchQuote,
-    isUnsupportedTokenGp,
+    isUnsupportedToken,
     isLoading,
     setQuoteError,
     account,

apps/cowswap-frontend/src/common/updaters/orders/utils.ts

@@ -9,7 +9,9 @@ import { stringToCurrency } from 'legacy/state/swap/extension'
 import { getOrder } from 'api/gnosisProtocol'
 import { getIsComposableCowChildOrder } from 'utils/orderUtils/getIsComposableCowChildOrder'
 
-export type OrderLogPopupMixData = OrderFulfillmentData | string
+type OrderID = string
+
+export type OrderLogPopupMixData = OrderFulfillmentData | OrderID
 
 export function computeOrderSummary({
   orderFromStore,

apps/cowswap-frontend/src/legacy/components/Header/index.tsx

@@ -23,7 +23,6 @@ import { getDefaultTradeRawState } from 'modules/trade/types/TradeRawState'
 import { Routes } from 'common/constants/routes'
 import { useCategorizeRecentActivity } from 'common/hooks/useCategorizeRecentActivity'
 import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetworkUnsupported'
-import { useNativeBalance } from 'common/hooks/useNativeBalance'
 
 import { AccountElement } from './AccountElement'
 import MobileMenuIcon from './MobileMenuIcon'

apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/LegacyConfirmationPendingContent.tsx

@@ -2,8 +2,9 @@ import React, { ReactNode, useMemo } from 'react'
 
 import alertImage from '@cowprotocol/assets/cow-swap/alert-circle.svg'
 import checkImage from '@cowprotocol/assets/cow-swap/check.svg'
-import { getChainCurrencySymbols } from '@cowprotocol/common-const'
+import { NATIVE_CURRENCY_BUY_TOKEN, WRAPPED_NATIVE_CURRENCY } from '@cowprotocol/common-const'
 import { shortenAddress } from '@cowprotocol/common-utils'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { ExternalLink } from '@cowprotocol/ui'
 import {
   getWeb3ReactConnection,
@@ -47,7 +48,11 @@ enum WalletType {
 }
 
 export function getOperationMessage(operationType: ConfirmOperationType, chainId: number): string {
-  const { native, wrapped } = getChainCurrencySymbols(chainId)
+  const nativeToken = NATIVE_CURRENCY_BUY_TOKEN[chainId as SupportedChainId]
+  const wrappedToken = WRAPPED_NATIVE_CURRENCY[chainId as SupportedChainId]
+
+  const native = nativeToken.symbol
+  const wrapped = wrappedToken.symbol
 
   switch (operationType) {
     case ConfirmOperationType.WRAP_ETHER:

apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/index.cosmos.tsx

@@ -9,6 +9,7 @@ import { ConfirmOperationType } from 'legacy/state/types'
 import { LegacyConfirmationPendingContent } from './LegacyConfirmationPendingContent'
 
 import { cowSwapStore } from '../../state'
+import { SerializedToken } from '../../state/user/types'
 
 const txHash = '0xe87e1d02b052daa9605abe018e8172feffd1bc38ed2284e6hhhhhh' + Date.now()
 
@@ -46,8 +47,8 @@ cowSwapStore.dispatch(
     id: txHash,
     chainId: 5,
     order: {
-      inputToken: COW[SupportedChainId.MAINNET],
-      outputToken: GNO[SupportedChainId.MAINNET],
+      inputToken: COW[SupportedChainId.MAINNET] as SerializedToken,
+      outputToken: GNO[SupportedChainId.MAINNET] as SerializedToken,
       sellToken: COW[SupportedChainId.MAINNET].address,
       buyToken: GNO[SupportedChainId.MAINNET].address,
       sellAmount: '1000',

apps/cowswap-frontend/src/legacy/hooks/useRefetchPriceCallback.tsx

@@ -171,13 +171,17 @@ export function useRefetchQuoteCallback() {
             description: GpQuoteErrorDetails.ZeroPrice,
           })
 
-        const previouslyUnsupportedToken = getIsUnsupportedToken(sellToken) || getIsUnsupportedToken(buyToken)
+        const previouslyUnsupportedToken = getIsUnsupportedToken(sellToken)
+          ? sellToken
+          : getIsUnsupportedToken(buyToken)
+          ? buyToken
+          : null
         // can be a previously unsupported token which is now valid
         // so we check against map and remove it
         if (previouslyUnsupportedToken) {
           console.debug('[useRefetchPriceCallback]::Previously unsupported token now supported - re-enabling.')
 
-          removeGpUnsupportedToken(previouslyUnsupportedToken.address)
+          removeGpUnsupportedToken(previouslyUnsupportedToken)
         }
 
         // Update quote

apps/cowswap-frontend/src/legacy/state/orders/hooks.ts

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react'
 
+import { TokenWithLogo } from '@cowprotocol/common-const'
 import { isTruthy } from '@cowprotocol/common-utils'
 import { OrderClass, SupportedChainId } from '@cowprotocol/cow-sdk'
 
@@ -42,7 +43,8 @@ import {
 import { isOrderExpired, partialOrderUpdate } from './utils'
 
 import { AppDispatch, AppState } from '../index'
-import { deserializeToken, serializeToken } from '../user/hooks'
+import { serializeToken } from '../user/hooks'
+import { SerializedToken } from '../user/types'
 
 type OrderID = string
 
@@ -110,6 +112,10 @@ function _isV3Order(orderObject: any): orderObject is OrderObject {
   return orderObject?.order?.inputToken !== undefined || orderObject?.order?.outputToken !== undefined
 }
 
+function deserializeToken(serializedToken: SerializedToken): TokenWithLogo {
+  return TokenWithLogo.fromToken(serializedToken, serializedToken.logoURI)
+}
+
 function _deserializeOrder(orderObject: OrderObject | V2OrderObject | undefined) {
   let order: Order | undefined
   // we need to make sure the incoming order is a valid

apps/cowswap-frontend/src/legacy/state/orders/utils.ts

@@ -382,7 +382,7 @@ export function partialOrderUpdate({ chainId, order }: UpdateOrderParams, dispat
       ...order,
       ...(order.inputToken && { inputToken: serializeToken(order.inputToken) }),
       ...(order.outputToken && { outputToken: serializeToken(order.outputToken) }),
-    },
+    } as UpdateOrderParamsAction['order'],
   }
   dispatch(updateOrder(params))
 }