Merge branch 'refactor/tokens-e2e-fix' of https://github.com/cowproto…

…col/cowswap into refactor/tokens-remove-legacy

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

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 
 import { isTruthy } from '@cowprotocol/common-utils'
-import { useImportTokenCallback, useSearchNonExistentToken } from '@cowprotocol/tokens'
+import { useAddUserToken, useSearchNonExistentToken } from '@cowprotocol/tokens'
 
 import { Nullish } from 'types'
 
@@ -17,7 +17,7 @@ export interface AutoImportTokensProps {
 export function AutoImportTokens({ inputToken, outputToken }: AutoImportTokensProps) {
   const [isModalOpen, setIsModalOpen] = useState(false)
 
-  const importTokenCallback = useImportTokenCallback()
+  const importTokenCallback = useAddUserToken()
   const foundInputToken = useSearchNonExistentToken(inputToken || null)
   const foundOutputToken = useSearchNonExistentToken(outputToken || null)
 

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

@@ -7,6 +7,9 @@ import { importListsMock, listsMock } from '../../mocks'
 import { ManageLists } from './index'
 
 const Wrapper = styled.div`
+  max-height: 90vh;
+  margin: 20px auto;
+  display: flex;
   width: 450px;
   background: var(${UI.COLOR_CONTAINER_BG_01});
 `

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

@@ -1,12 +1,6 @@
 import { useMemo } from 'react'
 
-import {
-  ListSearchResponse,
-  ListState,
-  useListsEnabledState,
-  useRemoveTokenList,
-  useToggleListCallback,
-} from '@cowprotocol/tokens'
+import { ListSearchResponse, ListState, useListsEnabledState, useRemoveList, useToggleList } from '@cowprotocol/tokens'
 
 import * as styledEl from './styled'
 
@@ -30,8 +24,8 @@ export function ManageLists(props: ManageListsProps) {
 
   const activeTokenListsIds = useListsEnabledState()
   const addListImport = useAddListImport()
-  const removeCustomTokenLists = useRemoveTokenList()
-  const toggleList = useToggleListCallback()
+  const removeList = useRemoveList()
+  const toggleList = useToggleList()
 
   const { source, listToImport } = useListSearchResponse(listSearchResponse)
 
@@ -55,7 +49,7 @@ export function ManageLists(props: ManageListsProps) {
               key={list.id}
               list={list}
               enabled={!!activeTokenListsIds[list.id]}
-              removeList={removeCustomTokenLists}
+              removeList={removeList}
               toggleList={toggleList}
             />
           ))}

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

@@ -5,6 +5,9 @@ import { customTokensMock, listsMock } from '../../mocks'
 import { ManageListsAndTokens } from './index'
 
 const Wrapper = styled.div`
+  max-height: 90vh;
+  margin: 20px auto;
+  display: flex;
   width: 450px;
 `
 

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

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { ExplorerDataType, getExplorerLink } from '@cowprotocol/common-utils'
-import { TokenLogo, TokenSearchResponse, useRemoveTokenCallback, useResetUserTokensCallback } from '@cowprotocol/tokens'
+import { TokenLogo, TokenSearchResponse, useRemoveUserToken, useResetUserTokens } from '@cowprotocol/tokens'
 import { TokenSymbol } from '@cowprotocol/ui'
 
 import { ExternalLink, Trash } from 'react-feather'
@@ -30,8 +30,8 @@ export function ManageTokens(props: ManageTokensProps) {
   const { tokens, tokenSearchResponse } = props
 
   const addTokenImportCallback = useAddTokenImportCallback()
-  const removeTokenCallback = useRemoveTokenCallback()
-  const resetUserTokensCallback = useResetUserTokensCallback()
+  const removeTokenCallback = useRemoveUserToken()
+  const resetUserTokensCallback = useResetUserTokens()
 
   const { inactiveListsResult, blockchainResult, activeListsResult, externalApiResult } = tokenSearchResponse
 

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

@@ -1,26 +1,30 @@
 import { useAtomValue, useSetAtom } from 'jotai'
 import { useCallback, useState } from 'react'
 
+import { addListAnalytics } from '@cowprotocol/analytics'
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import {
+  getTokenListSource,
   ListState,
-  useAddCustomTokenLists,
+  useAddList,
   useAllListsList,
   useAllTokens,
   useFavouriteTokens,
-  useImportTokenCallback,
+  useAddUserToken,
   useUserAddedTokens,
+  useUnsupportedTokens,
 } from '@cowprotocol/tokens'
 
 import styled from 'styled-components/macro'
 
 import { CowModal } from 'common/pure/Modal'
 
+import { useAllTokensBalances } from '../../hooks/useAllTokensBalances'
 import { ImportListModal } from '../../pure/ImportListModal'
 import { ImportTokenModal } from '../../pure/ImportTokenModal'
+import { SelectTokenModal } from '../../pure/SelectTokenModal'
 import { selectTokenWidgetAtom, updateSelectTokenWidgetAtom } from '../../state/selectTokenWidgetAtom'
 import { ManageListsAndTokens } from '../ManageListsAndTokens'
-import { SelectTokenModal } from '../SelectTokenModal'
 
 const Wrapper = styled.div`
   width: 100%;
@@ -30,22 +34,21 @@ const Wrapper = styled.div`
   }
 `
 
-// TODO: remove mock
-const balancesMock = {}
-
 export function SelectTokenWidget() {
   const { open, onSelectToken, tokenToImport, listToImport, selectedToken } = useAtomValue(selectTokenWidgetAtom)
   const [isManageWidgetOpen, setIsManageWidgetOpen] = useState(false)
 
   const updateSelectTokenWidget = useSetAtom(updateSelectTokenWidgetAtom)
 
-  const addCustomTokenLists = useAddCustomTokenLists()
-  const importTokenCallback = useImportTokenCallback()
+  const addCustomTokenLists = useAddList()
+  const importTokenCallback = useAddUserToken()
 
   const allTokens = useAllTokens()
   const favouriteTokens = useFavouriteTokens()
   const userAddedTokens = useUserAddedTokens()
   const allTokenLists = useAllListsList()
+  const [balances, balancesLoading] = useAllTokensBalances()
+  const unsupportedTokens = useUnsupportedTokens()
 
   const closeTokenSelectWidget = useCallback(() => {
     updateSelectTokenWidget({
@@ -76,6 +79,7 @@ export function SelectTokenWidget() {
   const importListAndBack = (list: ListState) => {
     addCustomTokenLists(list)
     updateSelectTokenWidget({ listToImport: undefined })
+    addListAnalytics('Success', getTokenListSource(list.source))
   }
 
   if (!onSelectToken) return null
@@ -119,10 +123,12 @@ export function SelectTokenWidget() {
 
           return (
             <SelectTokenModal
+              unsupportedTokens={unsupportedTokens}
               selectedToken={selectedToken}
               allTokens={allTokens}
               favouriteTokens={favouriteTokens}
-              balances={balancesMock}
+              balances={balances}
+              balancesLoading={balancesLoading}
               onSelectToken={onSelectToken}
               onDismiss={onDismiss}
               onOpenManageWidget={() => setIsManageWidgetOpen(true)}

apps/cowswap-frontend/src/modules/tokensList/hooks/useAddListImport.ts

@@ -1,4 +1,4 @@
-import { useSetAtom } from 'jotai/index'
+import { useSetAtom } from 'jotai'
 import { useCallback } from 'react'
 
 import { ListState } from '@cowprotocol/tokens'

apps/cowswap-frontend/src/modules/tokensList/hooks/useAddTokenImportCallback.ts

@@ -1,4 +1,4 @@
-import { useSetAtom } from 'jotai/index'
+import { useSetAtom } from 'jotai'
 import { useCallback } from 'react'
 
 import { TokenWithLogo } from '@cowprotocol/common-const'

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

@@ -14,8 +14,8 @@ import { TokenListDetails } from '../TokenListDetails'
 export interface TokenListItemProps {
   list: ListState
   enabled: boolean
-  toggleList(id: string): void
-  removeList(id: string): void
+  toggleList(list: ListState, enabled: boolean): void
+  removeList(list: ListState): void
 }
 
 export function ListItem(props: TokenListItemProps) {
@@ -24,7 +24,7 @@ export function ListItem(props: TokenListItemProps) {
   const [isActive, setIsActive] = useState(enabled)
 
   const toggle = () => {
-    toggleList(list.id)
+    toggleList(list, enabled)
     setIsActive((state) => !state)
   }
 
@@ -50,7 +50,7 @@ export function ListItem(props: TokenListItemProps) {
                 </a>
               </styledEl.SettingsAction>
             </MenuItem>
-            <MenuItem onSelect={() => removeList(list.id)}>
+            <MenuItem onSelect={() => removeList(list)}>
               <styledEl.SettingsAction>Remove list</styledEl.SettingsAction>
             </MenuItem>
           </styledEl.SettingsContainer>

apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenModal/index.cosmos.tsx → apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/index.cosmos.tsx

@@ -1,32 +1,43 @@
 import { getRandomInt } from '@cowprotocol/common-utils'
 import { CurrencyAmount } from '@uniswap/sdk-core'
-import { Currency } from '@uniswap/sdk-core'
 
 import styled from 'styled-components/macro'
 
+import { TokenAmounts } from 'modules/tokens'
+
 import { allTokensMock, favouriteTokensMock } from '../../mocks'
 
 import { SelectTokenModal, SelectTokenModalProps } from './index'
 
 const Wrapper = styled.div`
+  max-height: 90vh;
+  margin: 20px auto;
+  display: flex;
   width: 450px;
 `
 
+const unsupportedTokens = {}
+
 const selectedToken = favouriteTokensMock[0].address
 
-const balances = allTokensMock.reduce<{ [key: string]: CurrencyAmount<Currency> }>((acc, token) => {
-  acc[token.address.toLowerCase()] = CurrencyAmount.fromRawAmount(
-    token,
-    getRandomInt(20_000, 120_000_000) * 10 ** token.decimals
-  )
+const balances = allTokensMock.reduce<TokenAmounts>((acc, token) => {
+  acc[token.address] = {
+    value: CurrencyAmount.fromRawAmount(token, getRandomInt(20_000, 120_000_000) * 10 ** token.decimals),
+    loading: false,
+    syncing: false,
+    valid: true,
+    error: false,
+  }
 
   return acc
 }, {})
 
 const defaultProps: SelectTokenModalProps = {
+  unsupportedTokens,
   allTokens: allTokensMock,
   favouriteTokens: favouriteTokensMock,
   balances,
+  balancesLoading: false,
   selectedToken,
   onSelectToken() {
     console.log('onSelectToken')
@@ -52,7 +63,7 @@ const Fixtures = {
   ),
   NoTokenFound: (
     <Wrapper>
-      <SelectTokenModal defaultInputValue={'0x543ff227f64aa17ea132bf9886cab5db55dcaddf'} {...defaultProps} />
+      <SelectTokenModal defaultInputValue={'0x543ff227f64aa17ea132bf9886cab5db55dcaddd'} {...defaultProps} />
     </Wrapper>
   ),
   searchFromInactiveLists: (

apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenModal/index.tsx → apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/index.tsx

@@ -1,24 +1,25 @@
 import { useState } from 'react'
 
 import { TokenWithLogo } from '@cowprotocol/common-const'
-import { useUnsupportedTokens } from '@cowprotocol/tokens'
-import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
+import { UnsupportedTokensState } from '@cowprotocol/tokens'
 
 import { Edit, X } from 'react-feather'
 
 import * as styledEl from './styled'
 
-import { useAllTokensBalances } from '../../hooks/useAllTokensBalances'
-import { IconButton } from '../../pure/commonElements'
-import { FavouriteTokensList } from '../../pure/FavouriteTokensList'
-import { TokensVirtualList } from '../../pure/TokensVirtualList'
+import { TokenAmounts } from '../../../tokens'
+import { TokenSearchResults } from '../../containers/TokenSearchResults'
 import { SelectTokenContext } from '../../types'
-import { TokenSearchResults } from '../TokenSearchResults'
+import { IconButton } from '../commonElements'
+import { FavouriteTokensList } from '../FavouriteTokensList'
+import { TokensVirtualList } from '../TokensVirtualList'
 
 export interface SelectTokenModalProps {
   allTokens: TokenWithLogo[]
   favouriteTokens: TokenWithLogo[]
-  balances: { [key: string]: CurrencyAmount<Currency> }
+  balances: TokenAmounts
+  unsupportedTokens: UnsupportedTokensState
+  balancesLoading: boolean
   selectedToken?: string
   onSelectToken(token: TokenWithLogo): void
   defaultInputValue?: string
@@ -34,6 +35,9 @@ export function SelectTokenModal(props: SelectTokenModalProps) {
     favouriteTokens,
     allTokens,
     selectedToken,
+    balances,
+    balancesLoading,
+    unsupportedTokens,
     onSelectToken,
     onDismiss,
     onOpenManageWidget,
@@ -42,10 +46,6 @@ export function SelectTokenModal(props: SelectTokenModalProps) {
   const [inputValue, setInputValue] = useState<string>(defaultInputValue)
   const [isEnterPressed, setIsEnterPressed] = useState<boolean>(false)
 
-  const unsupportedTokens = useUnsupportedTokens()
-
-  const [balances, balancesLoading] = useAllTokensBalances()
-
   const handleEnterPress = () => {
     setIsEnterPressed(true)
     setTimeout(() => setIsEnterPressed(false), 100)

apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenModal/styled.ts → apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/styled.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components/macro'
 
 import { UI } from 'common/constants/theme'
 
-import { blankButtonMixin } from '../../pure/commonElements'
+import { blankButtonMixin } from '../commonElements'
 
 export const Wrapper = styled.div`
   display: flex;

libs/tokens/src/hooks/lists/useAddList.ts

@@ -0,0 +1,6 @@
+import { useSetAtom } from 'jotai'
+import { addListAtom } from '../../state/tokenLists/tokenListsActionsAtom'
+
+export function useAddList() {
+  return useSetAtom(addListAtom)
+}

libs/tokens/src/hooks/useAllListsList.ts → libs/tokens/src/hooks/lists/useAllListsList.ts

@@ -1,6 +1,6 @@
 import { useAtomValue } from 'jotai'
-import { listsStatesListAtom } from '../state/tokenLists/tokenListsStateAtom'
-import { ListState } from '../types'
+import { listsStatesListAtom } from '../../state/tokenLists/tokenListsStateAtom'
+import { ListState } from '../../types'
 
 export function useAllListsList(): ListState[] {
   return useAtomValue(listsStatesListAtom)

libs/tokens/src/hooks/useListsEnabledState.ts → libs/tokens/src/hooks/lists/useListsEnabledState.ts

@@ -1,6 +1,6 @@
 import { useAtomValue } from 'jotai'
-import { listsEnabledStateAtom } from '../state/tokenLists/tokenListsStateAtom'
-import { ListsEnabledState } from '../types'
+import { listsEnabledStateAtom } from '../../state/tokenLists/tokenListsStateAtom'
+import { ListsEnabledState } from '../../types'
 
 export function useListsEnabledState(): ListsEnabledState {
   return useAtomValue(listsEnabledStateAtom)

libs/tokens/src/hooks/lists/useRemoveList.ts

@@ -0,0 +1,15 @@
+import { useSetAtom } from 'jotai'
+import { removeListAnalytics } from '@cowprotocol/analytics'
+
+import { removeListAtom } from '../../state/tokenLists/tokenListsActionsAtom'
+import { ListState } from '../../types'
+import { getTokenListSource } from '../../utils/getTokenListSource'
+
+export function useRemoveList() {
+  const removeList = useSetAtom(removeListAtom)
+
+  return (list: ListState) => {
+    removeList(list.id)
+    removeListAnalytics('Confirm', getTokenListSource(list.source))
+  }
+}

libs/tokens/src/hooks/useSearchList.ts → libs/tokens/src/hooks/lists/useSearchList.ts

@@ -1,11 +1,11 @@
 import useSWR, { SWRResponse } from 'swr'
-import { fetchTokenList } from '../services/fetchTokenList'
+import { fetchTokenList } from '../../services/fetchTokenList'
 import { parseENSAddress } from '@cowprotocol/common-utils'
 import { useAtomValue } from 'jotai'
-import { allListsSourcesAtom, listsStatesMapAtom } from '../state/tokenLists/tokenListsStateAtom'
+import { allListsSourcesAtom, listsStatesMapAtom } from '../../state/tokenLists/tokenListsStateAtom'
 import { useMemo } from 'react'
-import { getIsTokenListWithUrl } from '../utils/getIsTokenListWithUrl'
-import { ListState } from '../types'
+import { getIsTokenListWithUrl } from '../../utils/getIsTokenListWithUrl'
+import { ListState } from '../../types'
 
 export type ListSearchResponse =
   | {