refactor: move TokenLogo to lib

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 { TokenLogo } from 'modules/tokensList'
-
 export interface ApproveButtonProps {
   currency: Currency | undefined | null
   state: ApprovalState

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 { TokenLogo } from 'modules/tokensList'
-
 import * as styledEl from './styled'
 
 export interface CurrencySelectButtonProps {

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

@@ -1,9 +1,8 @@
+import { TokenLogo } from '@cowprotocol/tokens'
 import { Currency } from '@uniswap/sdk-core'
 
 import styled from 'styled-components/macro'
 
-import { TokenLogo } from 'modules/tokensList'
-
 import { UI } from 'common/constants/theme'
 
 interface IconSpinnerProps {

apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts

@@ -1,12 +1,11 @@
+import { TokenLogo } from '@cowprotocol/tokens'
 import { BaseButton } from '@cowprotocol/ui'
 
 import { transparentize } from 'polished'
 import { HelpCircle } from 'react-feather'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
-import { TokenLogo } from 'modules/tokensList'
-
 import { UI } from 'common/constants/theme'
 
 export const Wrapper = styled.div`

apps/cowswap-frontend/src/legacy/components/swap/SwapModalHeader/index.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useMemo } from 'react'
 
 import { INPUT_OUTPUT_EXPLANATION } from '@cowprotocol/common-const'
 import { isAddress, shortenAddress } from '@cowprotocol/common-utils'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { RowBetween, RowFixed, TokenAmount, TokenSymbol } from '@cowprotocol/ui'
 import { useWalletDetails } from '@cowprotocol/wallet'
 import { Percent, TradeType } from '@uniswap/sdk-core'
@@ -20,7 +21,6 @@ import TradeGp from 'legacy/state/swap/TradeGp'
 import { ThemedText } from 'legacy/theme'
 import { computeSlippageAdjustedAmounts } from 'legacy/utils/prices'
 
-import { TokenLogo } from 'modules/tokensList'
 import { NoImpactWarning } from 'modules/trade/pure/NoImpactWarning'
 import { PriceUpdatedBanner } from 'modules/trade/pure/PriceUpdatedBanner'
 import { useTradeUsdAmounts } from 'modules/usdAmount'

apps/cowswap-frontend/src/legacy/components/swap/UnsupportedCurrencyFooter/UnsupportedCurrencyFooterMod.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 
 import { getEtherscanLink, getWrappedToken } from '@cowprotocol/common-utils'
 import { useIsUnsupportedToken } from '@cowprotocol/tokens'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { ButtonEmpty } from '@cowprotocol/ui'
 import { AutoRow, RowBetween } from '@cowprotocol/ui'
 import { ExternalLink } from '@cowprotocol/ui'
@@ -15,8 +16,6 @@ import Card, { OutlineCard } from 'legacy/components/Card'
 import { AutoColumn } from 'legacy/components/Column'
 import { CloseIcon, ThemedText, Z_INDEX } from 'legacy/theme'
 
-import { TokenLogo } from 'modules/tokensList'
-
 import { UI } from 'common/constants/theme'
 import { Modal } from 'common/pure/Modal'
 

apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx

@@ -5,6 +5,7 @@ import { ExplorerDataType, getExplorerLink, shortenAddress } from '@cowprotocol/
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { useENS } from '@cowprotocol/ens'
 import { useTokenBySymbolOrAddress } from '@cowprotocol/tokens'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { ExternalLink, TokenAmount } from '@cowprotocol/ui'
 import { CurrencyAmount } from '@uniswap/sdk-core'
 
@@ -14,7 +15,6 @@ import { ActivityStatus } from 'legacy/hooks/useRecentActivity'
 import { OrderStatus } from 'legacy/state/orders/actions'
 
 import { EthFlowStepper } from 'modules/swap/containers/EthFlowStepper'
-import { TokenLogo } from 'modules/tokensList'
 
 import { UI } from 'common/constants/theme'
 import { useCancelOrder } from 'common/hooks/useCancelOrder'

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx

@@ -5,6 +5,7 @@ import { ZERO_FRACTION } from '@cowprotocol/common-const'
 import { useTimeAgo } from '@cowprotocol/common-hooks'
 import { getAddress, getEtherscanLink } from '@cowprotocol/common-utils'
 import { OrderClass, SupportedChainId } from '@cowprotocol/cow-sdk'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { Loader, TokenAmount, TokenSymbol } from '@cowprotocol/ui'
 import { Currency, CurrencyAmount, Percent, Price } from '@uniswap/sdk-core'
 
@@ -25,7 +26,6 @@ import {
 import { OrderActions } from 'modules/ordersTable/pure/OrdersTableContainer/types'
 import { OrderStatusBox } from 'modules/ordersTable/pure/OrderStatusBox'
 import { getIsEthFlowOrder } from 'modules/swap/containers/EthFlowStepper'
-import { TokenLogo } from 'modules/tokensList'
 
 import { useSafeMemo } from 'common/hooks/useSafeMemo'
 import { ButtonSecondary } from 'common/pure/ButtonSecondary'

apps/cowswap-frontend/src/modules/swap/pure/EthFlow/WrappingPreview/WrapCard.tsx

@@ -1,8 +1,8 @@
+import { TokenLogo } from '@cowprotocol/tokens'
 import { TokenAmount } from '@cowprotocol/ui'
 import { CurrencyAmount, Currency } from '@uniswap/sdk-core'
 
 import * as styledEl from 'modules/swap/pure/EthFlow/WrappingPreview/styled'
-import { TokenLogo } from 'modules/tokensList'
 
 interface WrapCardProps {
   currency: Currency

apps/cowswap-frontend/src/modules/tokensList/containers/ManageTokens/index.tsx

@@ -1,6 +1,6 @@
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { ExplorerDataType, getExplorerLink, isTruthy } from '@cowprotocol/common-utils'
-import { TokenSearchResponse, useRemoveTokenCallback, useResetUserTokensCallback } from '@cowprotocol/tokens'
+import { TokenLogo, TokenSearchResponse, useRemoveTokenCallback, useResetUserTokensCallback } from '@cowprotocol/tokens'
 import { TokenSymbol } from '@cowprotocol/ui'
 
 import { ExternalLink, Trash } from 'react-feather'
@@ -9,7 +9,6 @@ import * as styledEl from './styled'
 
 import { useAddTokenImportCallback } from '../../hooks/useAddTokenImportCallback'
 import { ImportTokenItem } from '../../pure/ImportTokenItem'
-import { TokenLogo } from '../../pure/TokenLogo'
 
 export interface ManageTokensProps {
   tokens: TokenWithLogo[]

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

@@ -1,6 +1,4 @@
 export { SelectTokenWidget } from './containers/SelectTokenWidget'
 export { AutoImportTokens } from './containers/AutoImportTokens'
 export { useOpenTokenSelectWidget } from './hooks/useOpenTokenSelectWidget'
-export { TokenLogo } from './pure/TokenLogo'
-export { getTokenLogoUrls } from './utils/getTokenLogoUrls'
 export { useAllTokensBalances } from './hooks/useAllTokensBalances'

apps/cowswap-frontend/src/modules/tokensList/pure/FavouriteTokensList/index.tsx

@@ -1,12 +1,11 @@
 import { TokenWithLogo } from '@cowprotocol/common-const'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { TokenSymbol } from '@cowprotocol/ui'
 
 import { InfoIcon } from 'legacy/components/InfoIcon'
 
 import * as styledEl from './styled'
 
-import { TokenLogo } from '../TokenLogo'
-
 export interface FavouriteTokensListProps {
   tokens: TokenWithLogo[]
   selectedToken?: string

apps/cowswap-frontend/src/modules/tokensList/pure/ImportListModal/index.tsx

@@ -1,14 +1,13 @@
 import { useState } from 'react'
 
-import { getTokenListViewLink, TokenListInfo } from '@cowprotocol/tokens'
+import { TokenLogo, getTokenListViewLink, TokenListInfo } from '@cowprotocol/tokens'
 import { ButtonPrimary } from '@cowprotocol/ui'
 
 import { AlertTriangle } from 'react-feather'
 
 import * as styledEl from './styled'
 
 import { ModalHeader } from '../ModalHeader'
-import { TokenLogo } from '../TokenLogo'
 
 export interface ImportListModalProps {
   list: TokenListInfo

apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx

@@ -1,13 +1,13 @@
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { ExplorerDataType, getExplorerLink } from '@cowprotocol/common-utils'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { ButtonPrimary } from '@cowprotocol/ui'
 
 import { AlertCircle } from 'react-feather'
 
 import * as styledEl from './styled'
 
 import { ModalHeader } from '../ModalHeader'
-import { TokenLogo } from '../TokenLogo'
 
 export interface ImportTokenModalProps {
   tokens: TokenWithLogo[]

apps/cowswap-frontend/src/modules/tokensList/pure/TokenInfo/index.tsx

@@ -1,10 +1,9 @@
 import { TokenWithLogo } from '@cowprotocol/common-const'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { TokenSymbol } from '@cowprotocol/ui'
 
 import * as styledEl from './styled'
 
-import { TokenLogo } from '../TokenLogo'
-
 export interface TokenInfoProps {
   token: TokenWithLogo
   className?: string

apps/cowswap-frontend/src/modules/tokensList/pure/TokenListDetails/index.tsx

@@ -1,11 +1,10 @@
 import { ReactNode } from 'react'
 
 import { TokenListInfo } from '@cowprotocol/tokens'
+import { TokenLogo } from '@cowprotocol/tokens'
 
 import * as styledEl from './styled'
 
-import { TokenLogo } from '../TokenLogo'
-
 export interface TokenListItemProps {
   list: TokenListInfo
   className?: string

apps/cowswap-frontend/src/modules/tokensList/utils/tokensListSorter.ts

@@ -1,16 +1,15 @@
-import { NATIVE_CURRENCY_BUY_ADDRESS, TokenWithLogo } from '@cowprotocol/common-const'
+import { TokenWithLogo } from '@cowprotocol/common-const'
+import { getIsNativeToken } from '@cowprotocol/common-utils'
 
 import { TokenAmounts } from 'modules/tokens'
 
-const nativeTokenAddress = NATIVE_CURRENCY_BUY_ADDRESS.toLowerCase()
-
 export function tokensListSorter(balances: TokenAmounts): (a: TokenWithLogo, b: TokenWithLogo) => number {
   return (a: TokenWithLogo, b: TokenWithLogo) => {
     const aBalance = balances[a.address]
     const bBalance = balances[b.address]
 
     // Native always first
-    if (a.address.toLowerCase() === nativeTokenAddress || b.address.toLowerCase() === nativeTokenAddress) return 1
+    if (getIsNativeToken(a) || getIsNativeToken(b)) return 1
 
     if (aBalance?.value && bBalance?.value) {
       return +bBalance.value.toExact() - +aBalance.value.toExact()

apps/cowswap-frontend/src/modules/twap/utils/mapPartOrderToStoreOrder.ts

@@ -3,8 +3,6 @@ import { TokensByAddress } from '@cowprotocol/tokens'
 
 import { Order } from 'legacy/state/orders/actions'
 
-import { getTokensByAddress } from 'modules/tokensList/utils/getTokensByAddress'
-
 import { computeOrderSummary } from 'common/updaters/orders/utils'
 
 import { getIsLastPartOrder } from './getIsLastPartOrder'
@@ -20,7 +18,6 @@ export function mapPartOrderToStoreOrder(
   parent: TwapOrderItem,
   tokensByAddress: TokensByAddress
 ): Order {
-  const chainId = item.chainId
   const isCancelling = item.isCancelling || parent.status === TwapOrderStatus.Cancelling
   const status = getPartOrderStatus(enrichedOrder, parent, isVirtualPart)
 
@@ -33,8 +30,8 @@ export function mapPartOrderToStoreOrder(
       parentId: parent.id,
     },
     sellAmountBeforeFee: enrichedOrder.sellAmount,
-    inputToken: getTokensByAddress(chainId, enrichedOrder.sellToken, tokensByAddress),
-    outputToken: getTokensByAddress(chainId, enrichedOrder.buyToken, tokensByAddress),
+    inputToken: tokensByAddress[enrichedOrder.sellToken.toLowerCase()],
+    outputToken: tokensByAddress[enrichedOrder.buyToken.toLowerCase()],
     creationTime: enrichedOrder.creationDate,
     summary: '',
     status,

apps/cowswap-frontend/src/modules/twap/utils/mapTwapOrderToStoreOrder.ts

@@ -2,8 +2,6 @@ import { TokensByAddress } from '@cowprotocol/tokens'
 
 import { Order, OrderStatus } from 'legacy/state/orders/actions'
 
-import { getTokensByAddress } from 'modules/tokensList/utils/getTokensByAddress'
-
 import { computeOrderSummary } from 'common/updaters/orders/utils'
 
 import { emulateTwapAsOrder } from './emulateTwapAsOrder'
@@ -30,8 +28,8 @@ export function mapTwapOrderToStoreOrder(order: TwapOrderItem, tokensByAddress:
       id: order.id,
     },
     sellAmountBeforeFee: enrichedOrder.sellAmount,
-    inputToken: getTokensByAddress(order.chainId, enrichedOrder.sellToken, tokensByAddress),
-    outputToken: getTokensByAddress(order.chainId, enrichedOrder.buyToken, tokensByAddress),
+    inputToken: tokensByAddress[enrichedOrder.sellToken.toLowerCase()],
+    outputToken: tokensByAddress[enrichedOrder.buyToken.toLowerCase()],
     creationTime: enrichedOrder.creationDate,
     summary: '',
     status,

apps/cowswap-frontend/src/modules/wallet/containers/AddToMetamask/index.tsx

@@ -3,12 +3,11 @@ import React, { useCallback, useState } from 'react'
 import { addTokenToMetamaskAnalytics } from '@cowprotocol/analytics'
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { getWrappedToken } from '@cowprotocol/common-utils'
+import { getTokenLogoUrls } from '@cowprotocol/tokens'
 import { getIsMetaMask } from '@cowprotocol/wallet'
 import { Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 
-import { getTokenLogoUrls } from 'modules/tokensList'
-
 import { AddToMetamask as AddToMetamaskPure } from '../../pure/AddToMetamask'
 
 export type AddToMetamaskProps = {

libs/tokens/src/index.ts

@@ -40,3 +40,7 @@ export { searchTokensInApi } from './services/searchTokensInApi'
 // Utils
 export { getTokenListViewLink } from './utils/getTokenListViewLink'
 export { getTokenSearchFilter } from './utils/getTokenSearchFilter'
+export { getTokenLogoUrls } from './utils/getTokenLogoUrls'
+
+// Pure components
+export { TokenLogo } from './pure/TokenLogo'

apps/cowswap-frontend/src/modules/tokensList/pure/TokenLogo/index.tsx → libs/tokens/src/pure/TokenLogo/index.tsx

@@ -9,15 +9,13 @@ import { Currency, NativeCurrency } from '@uniswap/sdk-core'
 import { Slash } from 'react-feather'
 import styled from 'styled-components/macro'
 
-import { UI } from 'common/constants/theme'
-
 import { getTokenLogoUrls } from '../../utils/getTokenLogoUrls'
 
 const invalidUrlsAtom = atom<{ [url: string]: boolean }>({})
 
 const TokenLogoWrapper = styled.div`
   display: inline-block;
-  background: var(${UI.COLOR_CONTAINER_BG_01});
+  background: var(--cow-container-bg-01);
   border-radius: 50%;
 `