Call import token if token not found (#2387)

* Call import token if token not found

* Add transformResponse

* Update minor layout

* onChangeCurrencyOut compare ignore case

* Remove _signal

* Remove ununsed importToken

src/components/SearchModal/CurrencySearch.tsx

@@ -7,7 +7,6 @@ import { ChangeEvent, KeyboardEvent, ReactNode, useCallback, useEffect, useMemo,
 import { Trash } from 'react-feather'
 import { usePrevious } from 'react-use'
 import { Flex, Text } from 'rebass'
-import { useImportTokenMutation } from 'services/ksSetting'
 import styled from 'styled-components'
 
 import Column from 'components/Column'
@@ -102,7 +101,7 @@ const fetchTokens = async (
 ): Promise<WrappedTokenInfo[]> => {
   try {
     if (search && chainId && isAddress(chainId, search)) {
-      const token = await fetchTokenByAddress(search, chainId, signal)
+      const token = await fetchTokenByAddress(search, chainId)
       return token ? [token as WrappedTokenInfo] : []
     }
     const params: { query: string; isWhitelisted?: boolean; pageSize: number; page: number; chainIds: string } = {
@@ -312,7 +311,6 @@ export function CurrencySearch({
   }, [fetchFavoriteTokenFromAddress])
 
   const abortControllerRef = useRef(new AbortController())
-  const [importTokensToKsSettings] = useImportTokenMutation()
   const fetchListTokens = useCallback(
     async (page?: number) => {
       const nextPage = (page ?? pageCount) + 1
@@ -335,15 +333,6 @@ export function CurrencySearch({
                 symbol: rawToken.symbol || 'UNKNOWN',
               }),
             )
-
-            importTokensToKsSettings([
-              {
-                chainId: String(rawToken.chainId),
-                address: rawToken.address,
-              },
-            ]).catch(err => {
-              console.error('import token err', err)
-            })
           }
         }
       } else {
@@ -354,16 +343,7 @@ export function CurrencySearch({
       setFetchedTokens(current => (nextPage === 1 ? [] : current).concat(tokens))
       setHasMoreToken(tokens.length === PAGE_SIZE && !!debouncedQuery)
     },
-    [
-      isImportedTab,
-      chainId,
-      debouncedQuery,
-      defaultTokens,
-      fetchERC20TokenFromRPC,
-      isQueryValidEVMAddress,
-      pageCount,
-      importTokensToKsSettings,
-    ],
+    [isImportedTab, chainId, debouncedQuery, defaultTokens, fetchERC20TokenFromRPC, isQueryValidEVMAddress, pageCount],
   )
 
   const [hasMoreToken, setHasMoreToken] = useState(false)

src/hooks/Tokens.ts

@@ -4,7 +4,7 @@ import axios from 'axios'
 import { arrayify } from 'ethers/lib/utils'
 import { useCallback, useMemo } from 'react'
 import { useSelector } from 'react-redux'
-import { useGetTokenListQuery } from 'services/ksSetting'
+import ksSettingApi, { useGetTokenListQuery } from 'services/ksSetting'
 import useSWR from 'swr'
 
 import ERC20_INTERFACE, { ERC20_BYTES32_INTERFACE } from 'constants/abis/erc20'
@@ -13,7 +13,7 @@ import { ETHER_ADDRESS, ZERO_ADDRESS } from 'constants/index'
 import { NativeCurrencies } from 'constants/tokens'
 import { useActiveWeb3React } from 'hooks/index'
 import { useBytes32TokenContract, useMulticallContract, useTokenReadingContract } from 'hooks/useContract'
-import { AppState } from 'state'
+import store, { AppState } from 'state'
 import { TokenAddressMap } from 'state/lists/reducer'
 import { TokenInfo, WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { NEVER_RELOAD, useMultipleContractSingleData, useSingleCallResult } from 'state/multicall/hooks'
@@ -294,12 +294,22 @@ export const findCacheToken = (address: string) => {
   return cacheTokens[address] || cacheTokens[address.toLowerCase()]
 }
 
-export const fetchTokenByAddress = async (address: string, chainId: ChainId, signal?: AbortSignal) => {
+export const fetchTokenByAddress = async (address: string, chainId: ChainId) => {
   if (address === ZERO_ADDRESS) return NativeCurrencies[chainId]
   const findToken = findCacheToken(address)
   if (findToken && findToken.chainId === chainId) return findToken
-  const response = await axios.get(`${KS_SETTING_API}/v1/tokens?query=${address}&chainIds=${chainId}`, { signal })
-  const token = response?.data?.data?.tokens?.[0]
+  const tokenListRes = await store.dispatch(
+    ksSettingApi.endpoints.getTokenList.initiate({ chainId, addresses: address }),
+  )
+  let token = tokenListRes.data?.data.tokens[0]
+  if (!token) {
+    const importTokenRes = await store.dispatch(
+      ksSettingApi.endpoints.importToken.initiate([{ chainId: chainId.toString(), address }]),
+    )
+    if ('data' in importTokenRes) {
+      token = importTokenRes.data?.data.tokens[0]
+    }
+  }
   return token ? formatAndCacheToken(token) : undefined
 }
 

src/pages/CreatePool/styled.tsx

@@ -5,37 +5,37 @@ import { AutoColumn } from 'components/Column'
 import NumericalInput from 'components/NumericalInput'
 
 export const PageWrapper = styled.div`
-  padding: 16px 16px 100px;
+  padding: 28px 16px 100px;
   width: 100%;
 
   @media only screen and (min-width: 768px) {
-    padding: 16px 16px 100px;
+    padding: 24px 16px 100px;
   }
 
   @media only screen and (min-width: 1000px) {
-    padding: 16px 32px 100px;
+    padding: 24px 32px 100px;
   }
 
   @media only screen and (min-width: 1366px) {
-    padding: 16px 215px 50px;
+    padding: 24px 215px 50px;
   }
 
   @media only screen and (min-width: 1440px) {
-    padding: 16px 252px 50px;
+    padding: 24px 252px 50px;
   }
 `
 
 export const Container = styled.div`
   max-width: 936px;
   margin: 0 auto;
-  padding: 24px 20px;
+  padding: 4px 20px 24px;
   background: ${({ theme }) => theme.background};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
-  border-radius: 8px;
+  border-radius: 20px;
 
   @media only screen and (min-width: 1000px) {
-    padding: 24px;
+    padding: 4px 24px 24px;
   }
 `
 

src/pages/PartnerSwap/index.tsx

@@ -178,7 +178,9 @@ export default function Swap() {
   const onChangeCurrencyOut = useCallback(
     (c: Currency) => {
       const value = c.isNative ? c.symbol || c.wrapped.address : c.wrapped.address
-      if (value === inputTokenFromParam) searchParams.set('inputCurrency', outputTokenFromParam || '')
+      if (value.toLowerCase() === inputTokenFromParam?.toLowerCase()) {
+        searchParams.set('inputCurrency', outputTokenFromParam || '')
+      }
       searchParams.set('outputCurrency', value)
       setSearchParams(searchParams)
     },

src/pages/RemoveLiquidity/styled.tsx

@@ -30,7 +30,7 @@ export const Container = styled.div`
   background: ${({ theme }) => theme.background};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
-  border-radius: 8px;
+  border-radius: 20px;
 
   @media only screen and (min-width: 1000px) {
     padding: 4px 24px 24px;

src/services/ksSetting.ts

@@ -50,13 +50,22 @@ export type KyberswapGlobalConfigurationResponse = {
 
 export interface TokenListResponse<T = TokenInfo> {
   data: {
-    pageination: {
+    pagination?: {
       totalItems: number
     }
     tokens: Array<T>
   }
 }
 
+export interface TokenImportResponse<T = TokenInfo> {
+  data: {
+    tokens: {
+      data: T
+      errorMsg: string
+    }[]
+  }
+}
+
 const ksSettingApi = createApi({
   reducerPath: 'ksSettingConfigurationApi',
   baseQuery: baseQueryOauth({
@@ -119,6 +128,13 @@ const ksSettingApi = createApi({
         body: { tokens },
         method: 'POST',
       }),
+      transformResponse: (response: TokenImportResponse): TokenListResponse => {
+        const tokens: TokenInfo[] = response.data.tokens.map(token => ({
+          ...token.data,
+          chainId: Number(token.data.chainId),
+        }))
+        return { data: { tokens } }
+      },
     }),
     getTopTokens: builder.query<TokenListResponse<TopToken>, { chainId: number; page: number }>({
       query: params => ({