[4] feat(tokens): wire up new tokens lib into app

apps/cowswap-frontend/src/api/gasPrices/index.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_NETWORK_FOR_LISTS, GAS_API_KEYS, GAS_FEE_ENDPOINTS } from '@cowprotocol/common-const'
+import { GAS_API_KEYS, GAS_FEE_ENDPOINTS } from '@cowprotocol/common-const'
 import { SupportedChainId as ChainId } from '@cowprotocol/cow-sdk'
 
 import { fetchWithRateLimit } from 'common/utils/fetch'
@@ -119,7 +119,7 @@ class GasFeeApi {
     return response.json()
   }
 
-  async getGasPrices(chainId: ChainId = DEFAULT_NETWORK_FOR_LISTS): Promise<GasFeeEndpointResponse> {
+  async getGasPrices(chainId: ChainId = ChainId.MAINNET): Promise<GasFeeEndpointResponse> {
     const data = await this.fetchData(chainId)
     const parsed = this.parseData(data, chainId)
 

apps/cowswap-frontend/src/api/gnosisProtocol/api.ts

@@ -48,18 +48,6 @@ const DEFAULT_HEADERS = {
   'Content-Type': 'application/json',
 }
 const API_NAME = 'CoW Protocol'
-/**
- * Unique identifier for the order, calculated by keccak256(orderDigest, ownerAddress, validTo),
- * where orderDigest = keccak256(orderStruct). bytes32.
- */
-export type OrderID = string
-
-export interface UnsupportedToken {
-  [token: string]: {
-    address: string
-    dateAdded: number
-  }
-}
 
 function _getProfileApiBaseUrl(chainId: ChainId): string {
   const baseUrl = PROFILE_API_BASE_URL[chainId]

apps/cowswap-frontend/src/api/gnosisProtocol/index.ts

@@ -1,8 +1,6 @@
 import * as realApi from './api'
 import * as mockApi from './mock'
 
-export type { UnsupportedToken, OrderID } from './api'
-
 const useMock = process.env.REACT_APP_MOCK === 'true'
 
 // Re-exporting the result, mocked or not.

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

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 
 import { Erc20 } from '@cowprotocol/abis'
 import { useTokenContract } from '@cowprotocol/common-hooks'
-import { calculateGasMargin } from '@cowprotocol/common-utils'
+import { calculateGasMargin, getIsNativeToken } from '@cowprotocol/common-utils'
 import { useWalletInfo } from '@cowprotocol/wallet'
 import { BigNumber } from '@ethersproject/bignumber'
 import { MaxUint256 } from '@ethersproject/constants'
@@ -54,7 +54,8 @@ export function useApproveCallback(
   spender?: string
 ): (summary?: string) => Promise<TransactionResponse | undefined> {
   const { chainId } = useWalletInfo()
-  const token = amountToApprove?.currency?.isToken ? amountToApprove.currency : undefined
+  const currency = amountToApprove?.currency
+  const token = currency && !getIsNativeToken(currency) ? currency : undefined
   const tokenContract = useTokenContract(token?.address)
   const addTransaction = useTransactionAdder()
 

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 
 import { usePrevious } from '@cowprotocol/common-hooks'
-import { FractionUtils } from '@cowprotocol/common-utils'
+import { FractionUtils, getWrappedToken } from '@cowprotocol/common-utils'
 import { useWalletInfo } from '@cowprotocol/wallet'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 
@@ -16,9 +16,7 @@ import { useSafeMemo } from 'common/hooks/useSafeMemo'
 function getCurrencyToApprove(amountToApprove: Nullish<CurrencyAmount<Currency>>): Token | undefined {
   if (!amountToApprove) return undefined
 
-  if (amountToApprove.currency.isNative) return amountToApprove.currency.wrapped
-
-  return amountToApprove.currency
+  return getWrappedToken(amountToApprove.currency)
 }
 
 export function useApproveState(amountToApprove: Nullish<CurrencyAmount<Currency>>, spender?: string): ApprovalState {

apps/cowswap-frontend/src/common/hooks/useCancelOrder/state.ts

@@ -1,8 +1,8 @@
 import { atom } from 'jotai'
 import { atomWithReset } from 'jotai/utils'
 
+import { TokenWithLogo } from '@cowprotocol/common-const'
 import { BigNumber } from '@ethersproject/bignumber'
-import { NativeCurrency } from '@uniswap/sdk-core'
 
 import { MAINNET_NATIVE_CURRENCY } from 'lib/hooks/useNativeCurrency'
 
@@ -14,7 +14,7 @@ export type CancellationModalContext = {
   summary: string | undefined | null
   error: string | null
   txCost: BigNumber | null
-  nativeCurrency: NativeCurrency
+  nativeCurrency: TokenWithLogo
   isPendingSignature: boolean
   onDismiss: (() => void) | null
   triggerCancellation: ((type: CancellationType) => Promise<void>) | null

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

@@ -1,4 +1,4 @@
-import { isEnoughAmount } from '@cowprotocol/common-utils'
+import { getWrappedToken, isEnoughAmount } from '@cowprotocol/common-utils'
 import { useWalletInfo } from '@cowprotocol/wallet'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
@@ -24,7 +24,7 @@ import { useTradeSpenderAddress } from 'common/hooks/useTradeSpenderAddress'
 export function useNeedsApproval(amount: Nullish<CurrencyAmount<Currency>>): boolean {
   const { account } = useWalletInfo()
   const spender = useTradeSpenderAddress()
-  const token = amount?.currency.wrapped
+  const token = amount ? getWrappedToken(amount.currency) : undefined
   const tokens = token ? [token] : []
   const balancesAndAllowances = useBalancesAndAllowances({ account, spender, tokens })
 

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

@@ -2,14 +2,11 @@ import { EffectCallback, useEffect, useMemo } from 'react'
 
 import { CurrencyAmount, NativeCurrency, Percent, Token } from '@uniswap/sdk-core'
 
-import { WrappedTokenInfo } from 'legacy/state/lists/wrappedTokenInfo'
-
 export function useSafeDeps(deps: unknown[]): unknown[] {
   return deps.map((dep) => {
     if (dep instanceof NativeCurrency) return dep.symbol
     if (dep instanceof Token) return dep.address.toLowerCase()
-    if (dep instanceof CurrencyAmount) return dep.toExact() + dep.currency.symbol + dep.currency.isNative
-    if (dep instanceof WrappedTokenInfo) return dep.address
+    if (dep instanceof CurrencyAmount) return dep.toExact() + dep.currency.symbol + dep.currency.chainId
     if (dep instanceof Percent) return dep.toFixed(6)
 
     return dep

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 
 import { useTokenContract } from '@cowprotocol/common-hooks'
+import { getIsNativeToken } from '@cowprotocol/common-utils'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
 import { Nullish } from 'types'
@@ -15,9 +16,9 @@ import { useTradeSpenderAddress } from '../useTradeSpenderAddress'
 export function useShouldZeroApprove(amountToApprove: Nullish<CurrencyAmount<Currency>>): boolean {
   const [shouldZeroApprove, setShouldZeroApprove] = useState(false)
   const spender = useTradeSpenderAddress()
-  const tokenContract = useTokenContract(
-    amountToApprove && amountToApprove.currency.isToken ? amountToApprove.currency.address : undefined
-  )
+  const currency = amountToApprove?.currency
+  const token = currency && !getIsNativeToken(currency) ? currency : undefined
+  const tokenContract = useTokenContract(token?.address)
   const approvalState = useApprovalStateForSpender(amountToApprove, spender, () => false) // ignore approval pending state
 
   useEffect(() => {

apps/cowswap-frontend/src/common/pure/ApproveButton/index.tsx

@@ -1,5 +1,6 @@
 import { useContext, useMemo } from 'react'
 
+import { TokenLogo } from '@cowprotocol/tokens'
 import { ButtonSize, Loader, TokenSymbol, AutoRow, ButtonConfirmed } from '@cowprotocol/ui'
 import { MouseoverTooltip } from '@cowprotocol/ui'
 import { Currency } from '@uniswap/sdk-core'
@@ -10,8 +11,6 @@ import { ThemeContext } from 'styled-components/macro'
 
 import { ApprovalState } from 'legacy/hooks/useApproveCallback/useApproveCallbackMod'
 
-import { CurrencyLogo } from 'common/pure/CurrencyLogo'
-
 export interface ApproveButtonProps {
   currency: Currency | undefined | null
   state: ApprovalState
@@ -81,7 +80,7 @@ export function ApproveButton(props: ApproveButtonProps) {
             fontSize: '14px',
           }}
         >
-          <CurrencyLogo currency={currency} size={'24px'} style={{ flexShrink: 0 }} />
+          <TokenLogo token={currency} size={24} />
 
           {content}
         </span>

apps/cowswap-frontend/src/common/pure/CancellationModal/RequestCancellationModal.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useState } from 'react'
 
+import { TokenWithLogo } from '@cowprotocol/common-const'
 import { TokenAmount, ButtonPrimary } from '@cowprotocol/ui'
 import type { BigNumber } from '@ethersproject/bignumber'
-import { CurrencyAmount, NativeCurrency } from '@uniswap/sdk-core'
+import { CurrencyAmount } from '@uniswap/sdk-core'
 
 import { ArrowRight, ArrowLeft } from 'react-feather'
 import { NavHashLink } from 'react-router-hash-link'
@@ -23,7 +24,7 @@ export type RequestCancellationModalProps = {
   onDismiss: () => void
   triggerCancellation: (type: CancellationType) => void
   txCost: BigNumber | null
-  nativeCurrency: NativeCurrency
+  nativeCurrency: TokenWithLogo
 }
 
 const Wrapper = styled.div`

apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx

@@ -1,15 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react'
 
 import { setMaxSellTokensAnalytics } from '@cowprotocol/analytics'
-import { formatInputAmount } from '@cowprotocol/common-utils'
+import { NATIVE_CURRENCY_BUY_TOKEN } from '@cowprotocol/common-const'
+import { formatInputAmount, getIsNativeToken } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { TokenAmount } from '@cowprotocol/ui'
 import { MouseoverTooltip } from '@cowprotocol/ui'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
 import { Trans } from '@lingui/macro'
 
-import CurrencySearchModal from 'legacy/components/SearchModal/CurrencySearchModal'
 import { BalanceAndSubsidy } from 'legacy/hooks/useCowBalanceAndSubsidy'
 import { PriceImpact } from 'legacy/hooks/usePriceImpact'
 import { Field } from 'legacy/state/types'
@@ -36,13 +36,13 @@ export interface CurrencyInputPanelProps extends Partial<BuiltItProps> {
   inputTooltip?: string
   showSetMax?: boolean
   maxBalance?: CurrencyAmount<Currency> | undefined
-  disableNonToken?: boolean
   allowsOffchainSigning: boolean
   currencyInfo: CurrencyInfo
   priceImpactParams?: PriceImpact
   subsidyAndBalance?: BalanceAndSubsidy
   onCurrencySelection: (field: Field, currency: Currency) => void
   onUserInput: (field: Field, typedValue: string) => void
+  openTokenSelectWidget(selectedToken: string | undefined, onCurrencySelection: (currency: Currency) => void): void
   topLabel?: string
 }
 
@@ -53,15 +53,15 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
     currencyInfo,
     className,
     priceImpactParams,
-    disableNonToken = false,
     showSetMax = false,
     maxBalance,
     inputDisabled = false,
     inputTooltip,
-    onCurrencySelection,
     onUserInput,
     allowsOffchainSigning,
     isChainIdUnsupported,
+    openTokenSelectWidget,
+    onCurrencySelection,
     subsidyAndBalance = {
       subsidy: {
         tier: 0,
@@ -74,15 +74,8 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
   const { field, currency, balance, fiatAmount, amount, isIndependent, receiveAmountInfo } = currencyInfo
   const disabled = !!props.disabled || isChainIdUnsupported
   const viewAmount = formatInputAmount(amount, balance, isIndependent)
-  const [isCurrencySearchModalOpen, setCurrencySearchModalOpen] = useState(false)
   const [typedValue, setTypedValue] = useState(viewAmount)
 
-  const onCurrencySelect = useCallback(
-    (currency: Currency) => {
-      onCurrencySelection(field, currency)
-    },
-    [onCurrencySelection, field]
-  )
   const onUserInputDispatch = useCallback(
     (typedValue: string) => {
       setTypedValue(typedValue)
@@ -113,6 +106,12 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [viewAmount])
 
+  const selectedTokenAddress = currency
+    ? getIsNativeToken(currency)
+      ? NATIVE_CURRENCY_BUY_TOKEN[currency.chainId as SupportedChainId].address
+      : currency.address
+    : undefined
+
   const numericalInput = (
     <styledEl.NumericalInput
       className="token-amount-input"
@@ -137,7 +136,9 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
         <styledEl.CurrencyInputBox>
           <div>
             <CurrencySelectButton
-              onClick={() => setCurrencySearchModalOpen(true)}
+              onClick={() =>
+                openTokenSelectWidget(selectedTokenAddress, (currency) => onCurrencySelection(field, currency))
+              }
               currency={disabled ? undefined : currency || undefined}
               loading={areCurrenciesLoading || disabled}
             />
@@ -175,17 +176,6 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
           subsidyAndBalance={subsidyAndBalance}
         />
       )}
-
-      <CurrencySearchModal
-        isOpen={isCurrencySearchModalOpen}
-        onDismiss={() => setCurrencySearchModalOpen(false)}
-        onCurrencySelect={onCurrencySelect}
-        selectedCurrency={currency}
-        otherSelectedCurrency={currency}
-        showCommonBases={true}
-        showCurrencyAmount={true}
-        disableNonToken={disableNonToken}
-      />
     </styledEl.OuterWrapper>
   )
 }

apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/defaultCurrencyInputProps.ts

@@ -33,6 +33,9 @@ export const defaultCurrencyInputPanelProps: CurrencyInputPanelProps & { priceIm
     amount: CurrencyAmount.fromRawAmount(currency, 20 * 10 ** 18),
     fiatAmount: CurrencyAmount.fromRawAmount(currency, 12 * 10 ** 18),
   },
+  openTokenSelectWidget() {
+    /**/
+  },
   onCurrencySelection() {
     /**/
   },

apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx

@@ -1,11 +1,10 @@
+import { TokenLogo } from '@cowprotocol/tokens'
 import { TokenSymbol } from '@cowprotocol/ui'
 import { Currency } from '@uniswap/sdk-core'
 
 import { Trans } from '@lingui/macro'
 import { Nullish } from 'types'
 
-import { CurrencyLogo } from 'common/pure/CurrencyLogo'
-
 import * as styledEl from './styled'
 
 export interface CurrencySelectButtonProps {
@@ -27,7 +26,7 @@ export function CurrencySelectButton(props: CurrencySelectButtonProps) {
       isLoading={loading}
       $stubbed={$stubbed}
     >
-      {currency ? <CurrencyLogo currency={currency} size={'24px'} /> : <div></div>}
+      {currency ? <TokenLogo token={currency} size={24} /> : <div></div>}
       <styledEl.CurrencySymbol className="token-symbol-container" $stubbed={$stubbed}>
         {currency ? <TokenSymbol token={currency} length={40} /> : <Trans>Select a token</Trans>}
       </styledEl.CurrencySymbol>

apps/cowswap-frontend/src/common/pure/IconSpinner/index.tsx

@@ -1,9 +1,9 @@
+import { TokenLogo } from '@cowprotocol/tokens'
 import { Currency } from '@uniswap/sdk-core'
 
 import styled from 'styled-components/macro'
 
 import { UI } from 'common/constants/theme'
-import { CurrencyLogo } from 'common/pure/CurrencyLogo'
 
 interface IconSpinnerProps {
   currency?: Currency | null
@@ -27,7 +27,7 @@ const Wrapper = styled.div<{ size: number; spinnerWidth: number; bgColor: UI }>`
   border-radius: ${({ size }) => size}px;
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     top: calc(-1 * ${({ spinnerWidth }) => spinnerWidth}px);
     left: calc(-1 * ${({ spinnerWidth }) => spinnerWidth}px);
@@ -71,14 +71,13 @@ export function IconSpinner({
   size = 24,
   children,
   bgColor = UI.COLOR_CONTAINER_BG_01,
-  spinnerWidth = 2
+  spinnerWidth = 2,
 }: IconSpinnerProps) {
-
   return (
     <Wrapper size={size} spinnerWidth={spinnerWidth} bgColor={bgColor}>
       {(() => {
         if (currency) {
-          return <CurrencyLogo currency={currency} size="100%" />
+          return <TokenLogo token={currency} size={size} />
         } else if (image) {
           return <img src={image} alt="Spinning icon" width={size} height={size} />
         } else if (children) {

apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx

@@ -18,7 +18,7 @@ import { getQuoteCurrency } from 'common/services/getQuoteCurrency'
 const DEFAULT_DECIMALS = 4
 
 export interface RateInfoParams {
-  chainId: SupportedChainId | undefined
+  chainId: SupportedChainId
   inputCurrencyAmount: Nullish<CurrencyAmount<Currency>>
   outputCurrencyAmount: Nullish<CurrencyAmount<Currency>>
   activeRateFiatAmount: Nullish<CurrencyAmount<Currency>>