Merge branch 'main' into feat/test-aggregator-stg

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",

src/components/AddressInputPanel/index.tsx

@@ -174,6 +174,9 @@ export default function AddressInputPanel({
             <ExternalLink
               href={getEtherscanLink(chainId, name ?? address, 'address')}
               style={{ fontSize: '12px', marginLeft: '4px' }}
+              onClick={e => {
+                e.stopPropagation()
+              }}
             >
               ({networkInfo.etherscanName})
             </ExternalLink>

src/components/Header/groups/EarnNavGroup.tsx

@@ -47,7 +47,7 @@ const EarnNavGroup = () => {
             to={`${APP_PATHS.POOLS}/${networkInfo.route}`}
             style={{ width: '100%' }}
           >
-            <Flex sx={{ gap: '4px' }} alignItems="center">
+            <Flex sx={{ gap: '12px' }} alignItems="center">
               <Icon id="liquid" size={16} />
               <Trans>Pools</Trans>
             </Flex>
@@ -61,14 +61,14 @@ const EarnNavGroup = () => {
             data-testid="farms-nav-link"
             to={`${APP_PATHS.FARMS}/${networkInfo.route}`}
           >
-            <Flex sx={{ gap: '4px' }} alignItems="center">
+            <Flex sx={{ gap: '12px' }} alignItems="center">
               <MoneyBag size={16} />
               <Trans>Farms</Trans>
             </Flex>
           </StyledNavLink>
 
           <StyledNavLink id="my-earnings-link" to={APP_PATHS.MY_EARNINGS}>
-            <Flex sx={{ gap: '4px' }} alignItems="center">
+            <Flex sx={{ gap: '12px' }} alignItems="center">
               <Icon id="pig" size={16} />
               <Trans>My Earnings</Trans>
               <NewLabel>
@@ -82,7 +82,7 @@ const EarnNavGroup = () => {
             data-testid="my-pools-nav-link"
             to={`${APP_PATHS.MY_POOLS}/${networkInfo.route}`}
           >
-            <Flex sx={{ gap: '4px' }} alignItems="center">
+            <Flex sx={{ gap: '12px' }} alignItems="center">
               <Icon id="liquid-outline" size={16} />
               <Trans>My Pools</Trans>
             </Flex>

src/components/Header/groups/KyberDaoGroup.tsx

@@ -38,18 +38,18 @@ const KyberDAONavGroup = () => {
         }
         dropdownContent={
           <Column>
-            <StyledNavLink id="kyberdao-stake-knc" to={APP_PATHS.KYBERDAO_STAKE} style={{ gap: '4px' }}>
+            <StyledNavLink id="kyberdao-stake-knc" to={APP_PATHS.KYBERDAO_STAKE} style={{ gap: '12px' }}>
               <StakeIcon />
               <Trans>Stake KNC</Trans>
             </StyledNavLink>
-            <StyledNavLink id="kyberdao-vote" to={APP_PATHS.KYBERDAO_VOTE} style={{ gap: '4px' }}>
+            <StyledNavLink id="kyberdao-vote" to={APP_PATHS.KYBERDAO_VOTE} style={{ gap: '12px' }}>
               <VoteIcon />
               <Trans>Vote</Trans>
             </StyledNavLink>
             <StyledNavLink
               id="knc-utility"
               to={APP_PATHS.KYBERDAO_KNC_UTILITY}
-              style={{ gap: '4px' }}
+              style={{ gap: '12px' }}
               onClick={() => {
                 mixpanelHandler(MIXPANEL_TYPE.GAS_REFUND_SOURCE_CLICK, { source: 'KyberDAO_tab' })
               }}
@@ -61,7 +61,7 @@ const KyberDAONavGroup = () => {
               id="kyberdao-feature-request"
               href="https://kyberswap.canny.io/feature-request"
               target="_blank"
-              style={{ gap: '4px' }}
+              style={{ gap: '12px' }}
               onClick={() => {
                 mixpanelHandler(MIXPANEL_TYPE.KYBER_DAO_FEATURE_REQUEST_CLICK)
               }}

src/components/KyberAITokenBanner/index.tsx

@@ -22,9 +22,9 @@ import useTheme from 'hooks/useTheme'
 import KyberScoreMeter from 'pages/TrueSightV2/components/KyberScoreMeter'
 import { NETWORK_TO_CHAINID } from 'pages/TrueSightV2/constants'
 import { SUPPORTED_NETWORK_KYBERAI } from 'pages/TrueSightV2/constants/index'
-import { useTokenDetailQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
+import { useTokenOverviewQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
 import { calculateValueToColor } from 'pages/TrueSightV2/utils'
-import { useIsWhiteListKyberAI } from 'state/user/hooks'
+import { useIsWhiteListKyberAI, useShowKyberAIBanner } from 'state/user/hooks'
 import { MEDIA_WIDTHS } from 'theme'
 
 const KyberAITokenBanner = ({
@@ -36,6 +36,8 @@ const KyberAITokenBanner = ({
 }) => {
   const { chainId, account } = useActiveWeb3React()
   const { isWhiteList } = useIsWhiteListKyberAI()
+  const isShowKyberAIBanner = useShowKyberAIBanner()
+
   const navigate = useNavigate()
   const { mixpanelHandler } = useMixpanel()
   const chain = Object.keys(NETWORK_TO_CHAINID).find(i => NETWORK_TO_CHAINID[i] === chainId)
@@ -47,19 +49,25 @@ const KyberAITokenBanner = ({
 
   const { isStableCoin } = useStableCoins(chainId)
 
-  const { data: tokenInputOverview } = useTokenDetailQuery(
+  const { data: tokenInputOverview } = useTokenOverviewQuery(
     { address: token0?.address, chain },
-    { skip: !token0?.address || !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
+    {
+      skip: !token0?.address || !account || !isWhiteList || !chain || !isShowKyberAIBanner,
+      refetchOnMountOrArgChange: true,
+    },
   )
 
-  const { data: tokenOutputOverview } = useTokenDetailQuery(
+  const { data: tokenOutputOverview } = useTokenOverviewQuery(
     { address: token1?.address, chain },
-    { skip: !token1?.address || !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
+    {
+      skip: !token1?.address || !account || !isWhiteList || !chain || !isShowKyberAIBanner,
+      refetchOnMountOrArgChange: true,
+    },
   )
 
-  const { data: tokenNativeOverview } = useTokenDetailQuery(
+  const { data: tokenNativeOverview } = useTokenOverviewQuery(
     { address: NativeCurrencies[chainId].wrapped.address, chain },
-    { skip: !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
+    { skip: !account || !isWhiteList || !chain || !isShowKyberAIBanner, refetchOnMountOrArgChange: true },
   )
 
   const token: { kyberScore?: number; label?: string; address?: string; logo?: string; symbol?: string } | undefined =

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)};

src/components/SwapForm/hooks/useBuildRoute.tsx

@@ -8,6 +8,7 @@ import { useRouteApiDomain } from 'components/SwapForm/hooks/useGetRoute'
 import { AGGREGATOR_API_PATHS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import { useActiveWeb3React } from 'hooks'
+import useENS from 'hooks/useENS'
 import { useKyberswapGlobalConfig } from 'hooks/useKyberSwapConfig'
 
 export type BuildRouteResult =
@@ -35,6 +36,8 @@ const useBuildRoute = (args: Args) => {
   const { isEnableAuthenAggregator } = useKyberswapGlobalConfig()
   const [buildRoute] = routeApi.useBuildRouteMutation()
   const aggregatorDomain = useRouteApiDomain()
+  const recipientLookup = useENS(recipient)
+  const to: string | null = (recipient === '' ? account : recipientLookup.address) ?? null
 
   const fetcher = useCallback(async (): Promise<BuildRouteResult> => {
     if (!account) {
@@ -54,7 +57,7 @@ const useBuildRoute = (args: Args) => {
       deadline: Math.floor(Date.now() / 1000) + transactionTimeout,
       slippageTolerance: slippage,
       sender: account,
-      recipient: recipient || account,
+      recipient: to || account,
       source: 'kyberswap',
       skipSimulateTx: false,
       permit,
@@ -90,7 +93,7 @@ const useBuildRoute = (args: Args) => {
     account,
     aggregatorDomain,
     chainId,
-    recipient,
+    to,
     routeSummary,
     slippage,
     transactionTimeout,

src/components/SwapForm/hooks/useGetInputError.tsx

@@ -39,7 +39,7 @@ const useGetInputError = (args: Args): string | undefined => {
   if (!to || !formattedTo) {
     inputError = inputError ?? t`Enter a recipient`
   } else {
-    if (BAD_RECIPIENT_ADDRESSES.indexOf(formattedTo) !== -1) {
+    if (BAD_RECIPIENT_ADDRESSES.has(formattedTo)) {
       inputError = inputError ?? t`Invalid recipient`
     }
   }

src/components/TransactionSettings/AdvanceModeModal.tsx

@@ -14,7 +14,7 @@ const ModalContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 24px 24px 28px;
+  padding: 20px;
   background-color: ${({ theme }) => theme.tableHeader};
 `
 
@@ -23,7 +23,9 @@ const StyledInput = styled.input`
   background: ${({ theme }) => theme.buttonBlack};
   border-radius: 999px;
   padding: 8px 16px;
-  font-size: 16px;
+  font-size: 14px;
+  font-weight: 500px;
+  line-height: 20px;
   outline: none;
   color: ${({ theme }) => theme.text};
   border: none;
@@ -33,8 +35,8 @@ const StyledInput = styled.input`
 `
 
 const StyledCloseIcon = styled(X)`
-  height: 28px;
-  width: 28px;
+  height: 24px;
+  width: 24px;
   :hover {
     cursor: pointer;
   }
@@ -44,6 +46,12 @@ const StyledCloseIcon = styled(X)`
   }
 `
 
+const ConfirmText = styled.span`
+  color: ${({ theme }) => theme.warning};
+  cursor: not-allowed;
+  user-select: none;
+`
+
 function AdvanceModeModal({ show, setShow }: { show: boolean; setShow: (v: boolean) => void }) {
   const [, toggleDegenMode] = useDegenModeManager()
   const [confirmText, setConfirmText] = useState('')
@@ -69,32 +77,33 @@ function AdvanceModeModal({ show, setShow }: { show: boolean; setShow: (v: boole
         setShow(false)
       }}
       maxHeight={100}
+      width="480px"
+      maxWidth="unset"
     >
       <ModalContentWrapper>
         <Flex alignItems="center" justifyContent="space-between">
-          <Text fontSize="20px" fontWeight={500}>
+          <Text fontSize="20px" fontWeight={500} lineHeight="24px">
             <Trans>Are you sure?</Trans>
           </Text>
 
           <StyledCloseIcon onClick={() => setShow(false)} />
         </Flex>
 
-        <Text marginTop="28px">
+        <Text marginTop="24px" fontSize={14} fontWeight={500} lineHeight="20px" color={theme.subText}>
           <Trans>
             Turn this on to make trades with very high price impact or to set very high slippage tolerance. This can
             result in bad rates and loss of funds. Be cautious.
           </Trans>
         </Text>
 
-        <Text marginTop="20px">
+        <Text marginTop="24px" fontSize={14} fontWeight={400} lineHeight="24px" color={theme.text}>
           <Trans>
-            Please type the word &apos;confirm&apos; below to enable{' '}
-            <span style={{ color: theme.warning }}>Degen Mode</span>
+            Please type the word <ConfirmText>Confirm</ConfirmText> below to enable Degen Mode
           </Trans>
         </Text>
 
         <StyledInput
-          placeholder="confirm"
+          placeholder="Confirm"
           value={confirmText}
           onChange={e => setConfirmText(e.target.value)}
           onKeyUp={e => {
@@ -104,7 +113,7 @@ function AdvanceModeModal({ show, setShow }: { show: boolean; setShow: (v: boole
           }}
         />
 
-        <Flex sx={{ gap: '16px' }} marginTop="28px" justifyContent={'center'}>
+        <Flex sx={{ gap: '16px' }} marginTop="24px" justifyContent={'center'}>
           <ButtonOutlined
             style={{
               flex: 1,

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

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)
@@ -223,7 +225,7 @@ const LiquiditySourcesPanel: React.FC<Props> = ({ onBack }) => {
                 <ImageWrapper>
                   <img src="https://kyberswap.com/favicon.ico" alt="ks logo" />
                 </ImageWrapper>
-                <SourceName>Kyberswap - All</SourceName>
+                <SourceName>KyberSwap - All</SourceName>
               </Source>
 
               {ksDexes
@@ -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)} />