Call import token if token not found

src/components/SearchModal/CurrencySearch.tsx

@@ -102,7 +102,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 } = {

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 => ({