Merge remote-tracking branch 'origin/main' into update-common-tokens

package.json

@@ -22,11 +22,11 @@
     "i18n:compile": "lingui compile",
     "i18n:extract": "lingui extract",
     "lint": "eslint --ext ts,tsx src",
-    "start": "vite --mode production",
+    "start": "vite --mode production --host",
     "start-adpr": "vite --mode adpr --host",
-    "start-dev": "vite --mode dev",
-    "start-stg": "vite --mode stg",
-    "start-prod": "vite --mode production",
+    "start-dev": "vite --mode dev --host",
+    "start-stg": "vite --mode stg --host",
+    "start-prod": "vite --mode production --host",
     "test-e2e": "synpress run -cf cypress.config.ts -c baseUrl=http://127.0.0.1:4173/ -e grepTags=smoke,grepFilterSpecs=true,grepOmitFiltered=true",
     "test-schedule": "synpress run -cf cypress.config.ts -c baseUrl=https://kyberswap.com/ -e grepTags=regression,grepFilterSpecs=true,grepOmitFiltered=true"
   },
@@ -47,7 +47,7 @@
     "@apollo/client": "^3.7.1",
     "@datadog/browser-rum": "^4.23.3",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@kybernetwork/oauth2": "0.0.9",
+    "@kybernetwork/oauth2": "1.0.0",
     "@kyberswap/ks-sdk-classic": "^1.0.3",
     "@kyberswap/ks-sdk-core": "1.0.7-rc2",
     "@kyberswap/ks-sdk-elastic": "^1.1.2",
@@ -114,6 +114,7 @@
     "react-helmet": "^6.1.0",
     "react-indiana-drag-scroll": "^2.0.1",
     "react-loading-skeleton": "^3.1.0",
+    "react-minimal-pie-chart": "8.4.0",
     "react-popper": "^2.2.3",
     "react-qrcode-logo": "^2.8.0",
     "react-redux": "^7.2.9",

src/components/ConfirmAddModalBottom/index.tsx

@@ -80,7 +80,7 @@ export function ConfirmAddModalBottom({
             <CurrencyLogo currency={currencies[Field.CURRENCY_A]} style={{ marginRight: '8px' }} />
             <Flex alignItems="center">
               <TYPE.black fontSize={14} fontWeight={400}>
-                {parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}
+                {parsedAmounts[Field.CURRENCY_A]?.toSignificant(10)}
               </TYPE.black>
               {estimatedUsd && !!estimatedUsd[0] && (
                 <Text color={theme.subText} marginLeft="4px" fontSize={14}>
@@ -99,7 +99,7 @@ export function ConfirmAddModalBottom({
             <CurrencyLogo currency={currencies[Field.CURRENCY_B]} style={{ marginRight: '8px' }} />
             <Flex alignItems="center">
               <TYPE.black fontSize={14} fontWeight={400}>
-                {parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}
+                {parsedAmounts[Field.CURRENCY_B]?.toSignificant(10)}
               </TYPE.black>
 
               {estimatedUsd && !!estimatedUsd[1] && (

src/components/CurrencyLogo/index.tsx

@@ -1,12 +1,13 @@
 import { Currency } from '@kyberswap/ks-sdk-core'
-import React, { memo, useMemo } from 'react'
+import React, { memo, useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
 import Logo from 'components/Logo'
 import { NETWORKS_INFO } from 'constants/networks'
 import useHttpLocations from 'hooks/useHttpLocations'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { getTokenLogoURL } from 'utils'
+import { getProxyTokenLogo } from 'utils/tokenInfo'
 
 const StyledNativeCurrencyLogo = styled.img<{ size: string }>`
   width: ${({ size }) => size};
@@ -27,26 +28,39 @@ function CurrencyLogo({
   currency,
   size = '24px',
   style,
+  useProxy = false,
 }: {
   currency?: Currency | WrappedTokenInfo | null
   size?: string
   style?: React.CSSProperties
+  useProxy?: boolean
 }) {
+  const wrapWithProxy = useCallback(
+    <T extends string | undefined>(uri: T): T | string => {
+      if (!useProxy || !uri) {
+        return uri
+      }
+
+      return getProxyTokenLogo(uri)
+    },
+    [useProxy],
+  )
+
   const logoURI = currency instanceof WrappedTokenInfo ? currency?.logoURI : undefined
-  const uriLocations = useHttpLocations(logoURI)
+  const uriLocations = useHttpLocations(wrapWithProxy(logoURI))
 
   const srcs: string[] = useMemo(() => {
     if (currency?.isNative) return []
 
     if (currency?.isToken) {
       if (logoURI) {
-        return [...uriLocations, getTokenLogoURL(currency.address, currency.chainId)]
+        return [...uriLocations, wrapWithProxy(getTokenLogoURL(currency.address, currency.chainId))]
       }
-      return [getTokenLogoURL((currency as any)?.address, currency.chainId)]
+      return [wrapWithProxy(getTokenLogoURL((currency as any)?.address, currency.chainId))]
     }
 
     return []
-  }, [currency, uriLocations, logoURI])
+  }, [currency, logoURI, uriLocations, wrapWithProxy])
 
   if (currency?.isNative) {
     return (

src/components/EarningAreaChart/TooltipContent.tsx

@@ -0,0 +1,221 @@
+import { Trans } from '@lingui/macro'
+import { darken, rgba } from 'polished'
+import { useEffect, useMemo } from 'react'
+import { Flex, Text } from 'rebass'
+import styled from 'styled-components'
+
+import Logo, { NetworkLogo } from 'components/Logo'
+import useTheme from 'hooks/useTheme'
+import { EarningStatsTick } from 'types/myEarnings'
+import { formattedNum } from 'utils'
+
+const formatUSDValue = (v: number) => {
+  if (v === 0) {
+    return '$0'
+  }
+
+  if (v < 0.0001) {
+    return '< $0.0001'
+  }
+
+  const formatter = Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    notation: 'compact',
+    maximumSignificantDigits: 4,
+  })
+
+  return formatter.format(v)
+}
+
+const TokensWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  color: ${({ theme }) => theme.subText};
+  font-weight: 500;
+`
+
+const formatTokenAmount = (a: number | string) => {
+  return formattedNum(String(a), false)
+}
+
+type TokensProps = {
+  tokens: EarningStatsTick['tokens']
+}
+
+const Tokens: React.FC<TokensProps> = ({ tokens }) => {
+  const theme = useTheme()
+  const { visibleTokens, hasOthers } = useMemo(() => {
+    let visibleTokens = [...tokens]
+    let hasOthers = false
+
+    if (visibleTokens.length > 5) {
+      visibleTokens = visibleTokens.slice(0, 5)
+      hasOthers = true
+    }
+
+    return {
+      visibleTokens,
+      hasOthers,
+    }
+  }, [tokens])
+
+  return (
+    <TokensWrapper>
+      {visibleTokens.map((token, i) => {
+        return (
+          <Flex
+            key={i}
+            alignItems="center"
+            sx={{
+              gap: '4px',
+            }}
+          >
+            <Flex
+              sx={{
+                position: 'relative',
+                flex: '0 0 14px',
+                height: '14px',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Logo srcs={[token.logoUrl]} style={{ width: 14, height: 14 }} />
+              <NetworkLogo
+                chainId={token.chainId}
+                style={{
+                  position: 'absolute',
+                  top: '-4px',
+                  right: '-4px',
+                  width: '10px',
+                  height: '10px',
+                }}
+              />
+            </Flex>
+            <Text
+              as="span"
+              sx={{
+                fontWeight: 400,
+                fontSize: '12px',
+                lineHeight: '14px',
+              }}
+            >
+              {formatTokenAmount(token.amount)}
+            </Text>
+          </Flex>
+        )
+      })}
+
+      {hasOthers && (
+        <Flex
+          alignItems="center"
+          sx={{
+            gap: '4px',
+          }}
+        >
+          <Flex sx={{ width: 16, height: 16, borderRadius: '999px', bg: theme.subText }} />
+          <Text
+            as="span"
+            sx={{
+              fontWeight: 400,
+              fontSize: '12px',
+              lineHeight: '14px',
+            }}
+          >
+            <Trans>Others</Trans>
+          </Text>
+        </Flex>
+      )}
+    </TokensWrapper>
+  )
+}
+
+type Props = {
+  setHoverValue: React.Dispatch<React.SetStateAction<number | null>>
+  dataEntry: EarningStatsTick
+}
+const TooltipContent: React.FC<Props> = ({ dataEntry, setHoverValue }) => {
+  const theme = useTheme()
+
+  useEffect(() => {
+    setHoverValue(dataEntry.totalValue)
+  }, [dataEntry.totalValue, setHoverValue])
+
+  return (
+    <Flex
+      padding="12px"
+      width="min-content"
+      flexDirection="column"
+      alignItems="flex-start"
+      sx={{
+        gap: '8px',
+        background: rgba(theme.buttonBlack, 0.9),
+        borderRadius: '12px',
+        border: `1px solid ${darken(0.2, theme.border)}`,
+      }}
+    >
+      <Text
+        as="span"
+        sx={{
+          fontSize: '10px',
+          color: theme.subText,
+        }}
+      >
+        {dataEntry.date}
+      </Text>
+
+      <Text
+        as="span"
+        sx={{
+          fontWeight: 500,
+          fontSize: '14px',
+          lineHeight: '16px',
+          color: theme.text,
+          whiteSpace: 'nowrap',
+        }}
+      >
+        <Trans>My Total Earnings</Trans>: {formatUSDValue(dataEntry.totalValue)}
+      </Text>
+
+      <Text
+        as="span"
+        sx={{
+          fontWeight: 500,
+          fontSize: '14px',
+          lineHeight: '16px',
+          color: theme.blue,
+          whiteSpace: 'nowrap',
+        }}
+      >
+        <Trans>Pool Fees</Trans>: {formatUSDValue(dataEntry.poolFeesValue)}
+      </Text>
+
+      <Text
+        as="span"
+        sx={{
+          fontWeight: 500,
+          fontSize: '14px',
+          lineHeight: '16px',
+          color: theme.primary,
+          whiteSpace: 'nowrap',
+        }}
+      >
+        <Trans>Farm Rewards</Trans>: {formatUSDValue(dataEntry.farmRewardsValue)}
+      </Text>
+
+      <Flex
+        sx={{
+          width: '100%',
+          height: '0',
+          borderBottom: `1px solid ${theme.border}`,
+        }}
+      />
+
+      <Tokens tokens={dataEntry.tokens} />
+    </Flex>
+  )
+}
+
+export default TooltipContent