update new api for coingecko (#2125)

* update new api for coingecko

* add missing tooltip

* update auth access token

src/constants/index.ts

@@ -141,7 +141,9 @@ export const BLOCKED_PRICE_IMPACT_NON_DEGEN: Percent = new Percent(JSBI.BigInt(1
 
 export const BUNDLE_ID = '1'
 
+export const COINGECKO_BFF_API_URL = `${ENV.BFF_API}/v1/coingecko/api/v3`
 export const COINGECKO_API_URL = 'https://api.coingecko.com/api/v3'
+
 export const KNC_COINGECKO_ID = 'kyber-network-crystal'
 
 export const ETHER_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE'

src/hooks/useBasicChartData.ts

@@ -1,14 +1,16 @@
+import { KyberOauth2Api } from '@kybernetwork/oauth2'
 import { ChainId, Token, WETH } from '@kyberswap/ks-sdk-core'
 import axios from 'axios'
 import { getUnixTime, subHours } from 'date-fns'
 import { useMemo } from 'react'
 import useSWR from 'swr'
 
 import { AGGREGATOR_API, PRICE_CHART_API } from 'constants/env'
-import { COINGECKO_API_URL } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import { useActiveWeb3React } from 'hooks'
 
+import useCoingeckoAPI from './useCoingeckoAPI'
+
 export enum LiveDataTimeframeEnum {
   HOUR = '1H',
   FOUR_HOURS = '4H',
@@ -37,6 +39,7 @@ const getTimeFrameHours = (timeFrame: LiveDataTimeframeEnum) => {
   }
 }
 const generateCoingeckoUrl = (
+  coingeckoAPI: string,
   chainId: ChainId,
   address: string | undefined,
   timeFrame: LiveDataTimeframeEnum | 'live',
@@ -46,7 +49,7 @@ const generateCoingeckoUrl = (
     timeFrame === 'live' ? timeTo - 1000 : getUnixTime(subHours(new Date(), getTimeFrameHours(timeFrame)))
   const cgkId = NETWORKS_INFO[chainId].coingeckoNetworkId
   if (!cgkId) return ''
-  return `${COINGECKO_API_URL}/coins/${cgkId}/contract/${address}/market_chart/range?vs_currency=usd&from=${timeFrom}&to=${timeTo}`
+  return `${coingeckoAPI}/coins/${cgkId}/contract/${address}/market_chart/range?vs_currency=usd&from=${timeFrom}&to=${timeTo}`
 }
 const getClosestPrice = (prices: any[], time: number) => {
   let closestIndex = 0
@@ -67,32 +70,30 @@ const fetchKyberDataSWR = async (url: string) => {
 }
 
 const fetchKyberDataSWRWithHeader = async (url: string) => {
-  const res = await axios
-    .get(url, {
-      timeout: 5000,
-      headers: {
-        'accept-version': 'Latest',
-      },
-    })
-    .catch(error => {
-      throw error
-    })
+  const res = await KyberOauth2Api.get(url, {
+    timeout: 5000,
+    headers: {
+      'accept-version': 'Latest',
+    },
+  }).catch(error => {
+    throw error
+  })
 
   if (res.status === 204) {
     throw new Error('No content')
   }
   return res.data
 }
 
-const fetchCoingeckoDataSWR = async ([tokenAddresses, chainIds, timeFrame]: [
+const fetchCoingeckoDataSWR = async ([tokenAddresses, chainIds, timeFrame, coingeckoAPI]: [
   tokenAddresses: string[],
   chainIds: ChainId[],
   timeFrame: any,
+  coingeckoAPI: string,
 ]): Promise<any> => {
   return await Promise.all(
     [tokenAddresses[0], tokenAddresses[1]].map((address, i) =>
-      axios
-        .get(generateCoingeckoUrl(chainIds[i], address, timeFrame), { timeout: 5000 })
+      KyberOauth2Api.get(generateCoingeckoUrl(coingeckoAPI, chainIds[i], address, timeFrame), { timeout: 5000 })
         .then(res => {
           if (res.status === 204) {
             throw new Error('No content')
@@ -113,6 +114,7 @@ export default function useBasicChartData(
   timeFrame: LiveDataTimeframeEnum,
 ): { data: ChartData[]; loading: boolean; error: any } {
   const { chainId, isEVM, networkInfo } = useActiveWeb3React()
+  const coingeckoAPI = useCoingeckoAPI()
 
   const isReverse = useMemo(() => {
     if (!tokens || !tokens[0] || !tokens[1] || tokens[0].equals(tokens[1]) || tokens[0].chainId !== tokens[1].chainId)
@@ -135,8 +137,9 @@ export default function useBasicChartData(
     isValidating: coingeckoLoading,
   } = useSWR(
     tokenAddresses[0] && tokenAddresses[1]
-      ? [tokenAddresses, [tokens[0]?.chainId, tokens[1]?.chainId], timeFrame]
+      ? [tokenAddresses, [tokens[0]?.chainId, tokens[1]?.chainId], timeFrame, coingeckoAPI]
       : null,
+
     fetchCoingeckoDataSWR,
     {
       shouldRetryOnError: false,
@@ -210,7 +213,9 @@ export default function useBasicChartData(
   )
 
   const { data: liveCoingeckoData } = useSWR(
-    isKyberDataNotValid && coingeckoData ? [tokenAddresses, [tokens[0]?.chainId, tokens[1]?.chainId], 'live'] : null,
+    isKyberDataNotValid && coingeckoData
+      ? [tokenAddresses, [tokens[0]?.chainId, tokens[1]?.chainId], 'live', coingeckoAPI]
+      : null,
     fetchCoingeckoDataSWR,
     {
       refreshInterval: 60000,

src/hooks/useCoingeckoAPI.ts

@@ -0,0 +1,7 @@
+import { COINGECKO_API_URL, COINGECKO_BFF_API_URL } from 'constants/index'
+import { useSessionInfo } from 'state/authen/hooks'
+
+export default function useCoingeckoAPI() {
+  const { authenticationSuccess } = useSessionInfo()
+  return authenticationSuccess ? COINGECKO_BFF_API_URL : COINGECKO_API_URL
+}

src/hooks/useTokenInfo.ts

@@ -1,10 +1,12 @@
+import { KyberOauth2Api } from '@kybernetwork/oauth2'
 import { Token, WETH } from '@kyberswap/ks-sdk-core'
 import useSWR from 'swr'
 
-import { COINGECKO_API_URL } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import { useActiveWeb3React } from 'hooks'
 
+import useCoingeckoAPI from './useCoingeckoAPI'
+
 export interface TokenInfo {
   price: number
   marketCap: number
@@ -21,18 +23,30 @@ export interface TokenInfo {
 export default function useTokenInfo(token: Token | undefined): { data: TokenInfo; loading: boolean; error: any } {
   const { isSolana, chainId: currentChain } = useActiveWeb3React()
   const chainId = token?.chainId || currentChain
-
-  const fetcher = (url: string) => (url ? fetch(url).then(r => r.json()) : Promise.reject({ data: {}, error: '' }))
+  const coingeckoAPI = useCoingeckoAPI()
+  const fetcher = (url: string) =>
+    url
+      ? KyberOauth2Api.get(url)
+          .then(res => {
+            if (res.status === 204) {
+              throw new Error('No content')
+            }
+            return res.data
+          })
+          .catch(error => {
+            throw error
+          })
+      : Promise.reject({ data: {}, error: '' })
 
   const tokenAddress = isSolana ? token?.address || '' : (token?.address || '').toLowerCase()
 
   let url = ''
 
   if (tokenAddress.toLowerCase() === WETH[chainId].address.toLowerCase()) {
     // If the token is native token, we have to use different endpoint
-    url = `${COINGECKO_API_URL}/coins/${NETWORKS_INFO[chainId].coingeckoNativeTokenId}`
+    url = `${coingeckoAPI}/coins/${NETWORKS_INFO[chainId].coingeckoNativeTokenId}`
   } else if (tokenAddress) {
-    url = `${COINGECKO_API_URL}/coins/${NETWORKS_INFO[chainId].coingeckoNetworkId}/contract/${tokenAddress}`
+    url = `${coingeckoAPI}/coins/${NETWORKS_INFO[chainId].coingeckoNetworkId}/contract/${tokenAddress}`
   }
 
   const { data, error } = useSWR(url, fetcher, {

src/pages/SwapV3/HeaderRightMenu.tsx

@@ -104,7 +104,9 @@ export default function HeaderRightMenu({
               type={TutorialType.SWAP}
               customIcon={
                 <StyledActionButtonSwapForm onClick={() => mixpanelHandler(MIXPANEL_TYPE.SWAP_TUTORIAL_CLICK)}>
-                  <TutorialIcon />
+                  <MouseoverTooltip text={t`Tutorial`} placement="top" width="fit-content" disableTooltip={isMobile}>
+                    <TutorialIcon />
+                  </MouseoverTooltip>
                 </StyledActionButtonSwapForm>
               }
             />
@@ -130,12 +132,7 @@ export default function HeaderRightMenu({
               }}
               aria-label="Swap Settings"
             >
-              <MouseoverTooltip
-                text={<Trans>Settings</Trans>}
-                placement="top"
-                width="fit-content"
-                disableTooltip={isMobile}
-              >
+              <MouseoverTooltip text={t`Settings`} placement="top" width="fit-content" disableTooltip={isMobile}>
                 <TransactionSettingsIconWrapper id={TutorialIds.BUTTON_SETTING_SWAP_FORM}>
                   <TransactionSettingsIcon fill={theme.subText} />
                 </TransactionSettingsIconWrapper>