Merge branch 'main' into feat/update-connect-wallet

KyberNetwork · Sep 22, 2023 · ad86932 · ad86932
2 parents 5dcd7a0 + fe502ba
commit ad86932
Show file tree

Hide file tree

Showing 16 changed files with 97 additions and 133 deletions.
diff --git a/package.json b/package.json
@@ -178,7 +178,6 @@
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
     "@vitejs/plugin-react": "^3.1.0",
-    "@welldone-software/why-did-you-render": "^7.0.1",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-macros": "^3.1.0",
     "env-cmd": "^10.1.0",

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -30,16 +30,14 @@ const StyledDialogContent = styled(
 ).attrs({
   'aria-label': 'dialog',
 })`
-  overflow-y: ${({ mobile }) => (mobile ? 'scroll' : 'hidden')};
-
   &[data-reach-dialog-content] {
     margin: ${({ margin }) => margin || '0 0 2rem 0'};
     background-color: ${({ theme, bgColor }) => bgColor || theme.tableHeader};
     box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
     padding: 0;
     width: ${({ width }) => width || '50vw'};
     height: ${({ height }) => height || 'auto'};
-    overflow-y: ${({ mobile }) => (mobile ? 'scroll' : 'hidden')};
+    overflow-y: scroll;
     overflow-x: hidden;
     align-self: ${({ mobile }) => (mobile ? 'flex-end' : 'center')};
     max-width: ${({ maxWidth }) => (maxWidth && !isNaN(maxWidth) ? `${maxWidth}px` : maxWidth)};

diff --git a/src/components/YieldPools/FarmingPoolAPRCell.tsx b/src/components/YieldPools/FarmingPoolAPRCell.tsx
@@ -80,7 +80,7 @@ export const APRTooltipContent = ({
         </Text>
       </Flex>
 
-      {!!farmAPR && (
+      {!!maxFarmAPR && (
         <Flex
           sx={{
             flexDirection: 'column',
@@ -91,33 +91,7 @@ export const APRTooltipContent = ({
           <Text as="span" color={theme.warning}>
             Farm APR:{' '}
             <Text as="span" fontWeight={500}>
-              {formatDisplayNumber(farmAPR / 100, { style: 'percent', fractionDigits: 2 })}
-            </Text>
-          </Text>
-          <Text
-            as="span"
-            fontStyle="italic"
-            sx={{
-              whiteSpace: upToSmall ? 'wrap' : 'nowrap',
-            }}
-          >
-            <Trans>Estimated return from additional rewards if you also participate in the farm</Trans>
-          </Text>
-        </Flex>
-      )}
-
-      {!!farmV2APR && Number.isFinite(farmV2APR) && (
-        <Flex
-          sx={{
-            flexDirection: 'column',
-            fontSize: '12px',
-            lineHeight: '16px',
-          }}
-        >
-          <Text as="span" color={theme.warning}>
-            Farm APR:{' '}
-            <Text as="span" fontWeight={500}>
-              {formatDisplayNumber(farmV2APR / 100, { style: 'percent', fractionDigits: 2 })}
+              {formatDisplayNumber(maxFarmAPR / 100, { style: 'percent', fractionDigits: 2 })}
             </Text>
           </Text>
           <Text

diff --git a/src/components/swapv2/LiquiditySourcesPanel/index.tsx b/src/components/swapv2/LiquiditySourcesPanel/index.tsx
@@ -106,6 +106,8 @@ const LiquiditySourceHeader = styled.div`
   align-items: center;
 `
 
+export const isKyberSwapDex = (id: string) => id.toLowerCase().includes('kyber')
+
 const LiquiditySourcesPanel: React.FC<Props> = ({ onBack }) => {
   const [searchText, setSearchText] = useState('')
   const debouncedSearchText = useDebounce(searchText.toLowerCase(), 200).trim()
@@ -135,7 +137,7 @@ const LiquiditySourcesPanel: React.FC<Props> = ({ onBack }) => {
   }, [excludeDexes, dexes])
 
   const ksDexes = useMemo(
-    () => dexes.filter(item => item.id.includes('kyberswap')).sort((a, b) => a.sortId - b.sortId),
+    () => dexes.filter(item => isKyberSwapDex(item.id)).sort((a, b) => a.sortId - b.sortId),
     [dexes],
   )
 
@@ -210,10 +212,10 @@ const LiquiditySourcesPanel: React.FC<Props> = ({ onBack }) => {
                   checked={!ksDexes.map(i => i.id).every(item => excludeDexes.includes(item))}
                   onChange={e => {
                     if (e.target.checked) {
-                      setExcludeDexes(excludeDexes.filter(item => !item.includes('kyberswap')))
+                      setExcludeDexes(excludeDexes.filter(item => !isKyberSwapDex(item)))
                     } else {
                       const newData = [
-                        ...excludeDexes.filter(item => !item.includes('kyberswap')),
+                        ...excludeDexes.filter(item => !isKyberSwapDex(item)),
                         ...ksDexes.map(item => item.id),
                       ]
                       setExcludeDexes(newData)
@@ -244,7 +246,7 @@ const LiquiditySourcesPanel: React.FC<Props> = ({ onBack }) => {
             </>
           )}
           {dexes
-            ?.filter(item => !item.id.includes('kyberswap') && item.name.toLowerCase().includes(debouncedSearchText))
+            ?.filter(item => !isKyberSwapDex(item.id) && item.name.toLowerCase().includes(debouncedSearchText))
             .map(({ name, logoURL, id }) => (
               <Source key={name}>
                 <Checkbox checked={!excludeDexes.includes(id)} onChange={() => handleToggleDex(id)} />

diff --git a/src/constants/dexes.ts b/src/constants/dexes.ts
@@ -1,32 +1,22 @@
-// To combine kyberswap & kyberswap-static into one option on UI
-// They are both kyberswap classic, one is dynamic fee, other is static fee
+// To combine all kyber options 1 option on UI
 export const KYBERSWAP_KS_DEXES_TO_UI_DEXES: { [key: string]: string | undefined } = {
-  'kyberswap-elastic': 'kyberswap-elastic',
   kyberswap: 'kyberswapv1', // kyberswap classic old contract
   'kyberswap-static': 'kyberswapv1', // kyberswap classic new contract -> with static fee
+  'kyberswap-elastic': 'kyberswap-elastic',
   'kyberswap-limit-order': 'kyberswap-limit-order',
+  'kyberswap-limit-order-v2': 'kyberswap-limit-order-v2',
+  'kyber-pmm': 'kyber-pmm',
 }
 
-export const KYBERSWAP_UI_DEXES: {
+// only put dex need to be custom, otherwise get from admin
+export const KYBERSWAP_UI_DEXES_CUSTOM: {
   [key: string]: {
     name: string
     id: string
-    logoURL: string
   }
 } = {
-  'kyberswap-elastic': {
-    name: 'KyberSwap Elastic',
-    id: 'kyberswap-elastic',
-    logoURL: 'https://kyberswap.com/favicon.ico',
-  },
   kyberswapv1: {
     name: 'KyberSwap Classic',
     id: 'kyberswapv1',
-    logoURL: 'https://kyberswap.com/favicon.ico',
-  },
-  'kyberswap-limit-order': {
-    name: 'KyberSwap Limit Order',
-    id: 'kyberswap-limit-order',
-    logoURL: 'https://kyberswap.com/favicon.ico',
   },
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,4 +1,3 @@
-import '@/wdyr'
 import * as Sentry from '@sentry/react'
 import { BrowserTracing } from '@sentry/tracing'
 import { Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'

diff --git a/src/pages/MyEarnings/Positions.tsx b/src/pages/MyEarnings/Positions.tsx
@@ -231,14 +231,16 @@ function PositionStats({
 
   return (
     <Flex sx={{ gap: '1rem' }}>
-      <Flex sx={{ gap: '4px' }}>
-        <IconWrapper color={theme.primary}>
-          <Info size={10} />
-        </IconWrapper>
-        <Text fontSize={14} fontWeight="500">
-          <Trans>{numOfActivePositions} Active</Trans>
-        </Text>
-      </Flex>
+      {!!numOfActivePositions && (
+        <Flex sx={{ gap: '4px' }}>
+          <IconWrapper color={theme.primary}>
+            <Info size={10} />
+          </IconWrapper>
+          <Text fontSize={14} fontWeight="500">
+            <Trans>{numOfActivePositions} Active</Trans>
+          </Text>
+        </Flex>
+      )}
 
       {numOfInactivePositions ? (
         <Flex sx={{ gap: '4px' }}>

diff --git a/src/services/baseQueryOauth.ts b/src/services/baseQueryOauth.ts
@@ -1,19 +1,20 @@
 import { KyberOauth2Api } from '@kybernetwork/oauth2'
 import { BaseQueryFn, fetchBaseQuery } from '@reduxjs/toolkit/query'
+import axios from 'axios'
 
-import { checkIamDown } from 'utils/iamError'
+import { checkApiDown } from 'utils/iamError'
 
-const queryWithToken = async (config: any, baseUrl: string) => {
+const queryWithTokenAndTracking = async (config: any, baseUrl: string, withAccessToken = true) => {
   try {
     if (config.method?.toLowerCase() !== 'get') {
       // mapping rtk query vs axios
       config.data = config.data || config.body
     }
     config.url = baseUrl + config.url
-    const result = await KyberOauth2Api.call(config)
+    const result = await (withAccessToken ? KyberOauth2Api.call(config) : axios(config))
     return { data: result.data }
   } catch (err) {
-    checkIamDown(err)
+    checkApiDown(err)
     return {
       error: {
         status: err.response?.status,
@@ -25,9 +26,9 @@ const queryWithToken = async (config: any, baseUrl: string) => {
 
 // this query is use for private api call: this will attach access token in every request, auto refresh token if expired
 const baseQueryOauth =
-  ({ baseUrl = '' }: { baseUrl?: string }): BaseQueryFn =>
+  ({ baseUrl = '', trackingOnly }: { baseUrl?: string; trackingOnly?: boolean }): BaseQueryFn =>
   async config => {
-    return queryWithToken(config, baseUrl)
+    return queryWithTokenAndTracking(config, baseUrl, !trackingOnly)
   }
 
 // same as baseQueryOauth, but has flag to revert if meet incident
@@ -39,7 +40,7 @@ export const baseQueryOauthDynamic =
       const rawBaseQuery = fetchBaseQuery({ baseUrl })
       return rawBaseQuery(args, WebApi, extraOptions)
     }
-    return queryWithToken(args, baseUrl)
+    return queryWithTokenAndTracking(args, baseUrl)
   }
 
 export default baseQueryOauth
diff --git a/src/services/earning/index.ts b/src/services/earning/index.ts
@@ -111,6 +111,7 @@ const earningApi = createApi({
         const positionData: GetElasticEarningResponse = (positionsRes?.data as any).data as GetElasticEarningResponse
 
         const aggregateData = Object.keys(positionData).reduce((acc, chainName) => {
+          if (!positionData?.[chainName]) return acc
           return {
             ...acc,
             [chainName]: {

diff --git a/src/services/ksSetting.ts b/src/services/ksSetting.ts
@@ -1,7 +1,8 @@
 import { ApolloClient, NormalizedCacheObject } from '@apollo/client'
 import { ChainId } from '@kyberswap/ks-sdk-core'
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { createApi } from '@reduxjs/toolkit/query/react'
 import { Connection } from '@solana/web3.js'
+import baseQueryOauth from 'services/baseQueryOauth'
 
 import { KS_SETTING_API } from 'constants/env'
 import { AppJsonRpcProvider } from 'constants/providers'
@@ -58,8 +59,9 @@ export interface TokenListResponse<T = TokenInfo> {
 
 const ksSettingApi = createApi({
   reducerPath: 'ksSettingConfigurationApi',
-  baseQuery: fetchBaseQuery({
+  baseQuery: baseQueryOauth({
     baseUrl: `${KS_SETTING_API}/v1`,
+    trackingOnly: true,
   }),
   endpoints: builder => ({
     getKyberswapConfiguration: builder.query<KyberswapConfigurationResponse, ChainId>({

diff --git a/src/state/customizeDexes/updater.tsx b/src/state/customizeDexes/updater.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useMemo } from 'react'
 import { useDispatch } from 'react-redux'
 
-import { KYBERSWAP_KS_DEXES_TO_UI_DEXES, KYBERSWAP_UI_DEXES } from 'constants/dexes'
+import { isKyberSwapDex } from 'components/swapv2/LiquiditySourcesPanel'
+import { KYBERSWAP_KS_DEXES_TO_UI_DEXES, KYBERSWAP_UI_DEXES_CUSTOM } from 'constants/dexes'
 import { useActiveWeb3React } from 'hooks'
 import useLiquiditySources from 'hooks/useAggregatorStats'
 import { AppDispatch } from 'state/index'
@@ -18,16 +19,19 @@ export default function Updater(): null {
   // filterout kyberswap dexes, will hardcode
   const normalizeDexes = useMemo(() => {
     const dexesFormatted: Dex[] = dexes?.map(item => ({ ...item, id: item.dexId, sortId: item.id })) || []
-    const dexesOutsideKyberswap = dexesFormatted.filter(item => !item.id.includes('kyberswap'))
+    const dexesOutsideKyberswap = dexesFormatted.filter(item => !isKyberSwapDex(item.id))
     const dexesKyberswap = uniqueArray(
       dexesFormatted.filter(dex => KYBERSWAP_KS_DEXES_TO_UI_DEXES[dex.id]),
       dex => KYBERSWAP_KS_DEXES_TO_UI_DEXES[dex.id],
     )
-    const dexesUIKyberswap = dexesKyberswap.map(dex => ({
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ...KYBERSWAP_UI_DEXES[KYBERSWAP_KS_DEXES_TO_UI_DEXES[dex.id]!],
-      sortId: dex.sortId,
-    }))
+    const dexesUIKyberswap = dexesKyberswap.map(dex => {
+      const custom = KYBERSWAP_UI_DEXES_CUSTOM[KYBERSWAP_KS_DEXES_TO_UI_DEXES[dex.id] || ''] || dex
+      return {
+        ...custom,
+        sortId: dex.sortId,
+        logoURL: 'https://kyberswap.com/favicon.ico',
+      }
+    })
 
     return [...dexesOutsideKyberswap, ...dexesUIKyberswap]
   }, [dexes])

diff --git a/src/state/farms/elasticv2/updater.tsx b/src/state/farms/elasticv2/updater.tsx
@@ -107,8 +107,7 @@ export default function ElasticFarmV2Updater({ interval = true }: { interval?: b
   const dispatch = useAppDispatch()
   const { networkInfo, isEVM, chainId, account } = useActiveWeb3React()
   const elasticFarm = useAppSelector(state => state.elasticFarmV2[chainId] || defaultChainData)
-  const { elasticClient } = useKyberSwapConfig()
-  const isEnableKNProtocol = true
+  const { elasticClient, isEnableKNProtocol } = useKyberSwapConfig()
 
   const multicallContract = useMulticallContract()
   const farmv2QuoterContract = useContract(
@@ -137,9 +136,11 @@ export default function ElasticFarmV2Updater({ interval = true }: { interval?: b
     if (isEnableKNProtocol) return knProtocolError
     return subgraphError
   }, [isEnableKNProtocol, subgraphError, knProtocolError])
+  const isLoadingElasticFarm = useRef(elasticFarm.loading)
+  isLoadingElasticFarm.current = elasticFarm.loading
 
   useEffect(() => {
-    if (isEVM && !elasticFarm?.farms && !elasticFarm?.loading) {
+    if (isEVM && !elasticFarm?.farms && !isLoadingElasticFarm.current) {
       dispatch(setLoading({ chainId, loading: true }))
       if (isEnableKNProtocol) {
         getElasticFarmV2FromKnProtocol(chainId).finally(() => {
@@ -150,7 +151,15 @@ export default function ElasticFarmV2Updater({ interval = true }: { interval?: b
           dispatch(setLoading({ chainId, loading: false }))
         })
     }
-  }, [isEVM, chainId, dispatch, getElasticFarmV2, elasticFarm, getElasticFarmV2FromKnProtocol, isEnableKNProtocol])
+  }, [
+    isEVM,
+    chainId,
+    dispatch,
+    getElasticFarmV2,
+    elasticFarm?.farms,
+    getElasticFarmV2FromKnProtocol,
+    isEnableKNProtocol,
+  ])
 
   useEffect(() => {
     const i = interval