Merge branch 'main' of github.com:KyberNetwork/kyberswap-interface in…

…to KGP-330-as-an-user-i-want-to-select-which-chains-i-want-to-see-my-earnings-on

src/components/KyberAITokenBanner/index.tsx

@@ -46,17 +46,17 @@ const KyberAITokenBanner = ({
 
   const { data: tokenInputOverview } = useTokenDetailQuery(
     { address: token0?.address, chain },
-    { skip: !token0?.address || !account || !isWhiteList, refetchOnMountOrArgChange: true },
+    { skip: !token0?.address || !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
   )
 
   const { data: tokenOutputOverview } = useTokenDetailQuery(
     { address: token1?.address, chain },
-    { skip: !token1?.address || !account || !isWhiteList, refetchOnMountOrArgChange: true },
+    { skip: !token1?.address || !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
   )
 
   const { data: tokenNativeOverview } = useTokenDetailQuery(
     { address: NativeCurrencies[chainId].wrapped.address, chain },
-    { skip: !account || !isWhiteList, refetchOnMountOrArgChange: true },
+    { skip: !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
   )
 
   const token: { kyberScore?: number; label?: string; address?: string; logo?: string; symbol?: string } | undefined =

src/components/Menu/index.tsx

@@ -1,5 +1,5 @@
 import { Trans, t } from '@lingui/macro'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import {
   Award,
@@ -266,28 +266,27 @@ export default function Menu() {
     mixpanelHandler(MIXPANEL_TYPE.MENU_PREFERENCE_CLICK, { menu: name })
   }
 
-  const wrapperNode = useRef<HTMLDivElement>(null)
+  const [wrapperNode, setWrapperNode] = useState<HTMLDivElement | null>(null)
   const [showScroll, setShowScroll] = useState<boolean>(false)
 
   useEffect(() => {
-    const wrapper = wrapperNode.current
-    if (wrapper) {
+    if (wrapperNode) {
       const abortController = new AbortController()
       const onScroll = () => {
         if (abortController.signal.aborted) return
-        setShowScroll(Math.abs(wrapper.offsetHeight + wrapper.scrollTop - wrapper.scrollHeight) > 10) //no need to show scroll down when scrolled to last 10px
+        setShowScroll(Math.abs(wrapperNode.offsetHeight + wrapperNode.scrollTop - wrapperNode.scrollHeight) > 10) //no need to show scroll down when scrolled to last 10px
       }
       onScroll()
-      wrapper.addEventListener('scroll', onScroll)
+      wrapperNode.addEventListener('scroll', onScroll)
       window.addEventListener('resize', onScroll)
       return () => {
         abortController.abort()
-        wrapper.removeEventListener('scroll', onScroll)
+        wrapperNode.removeEventListener('scroll', onScroll)
         window.removeEventListener('resize', onScroll)
       }
     }
     return
-  }, [])
+  }, [wrapperNode])
 
   return (
     <StyledMenu>
@@ -308,7 +307,7 @@ export default function Menu() {
             <LanguageSelector setIsSelectingLanguage={setIsSelectingLanguage} />
           </AutoColumn>
         ) : (
-          <ListWrapper ref={wrapperNode}>
+          <ListWrapper ref={wrapperNode => setWrapperNode(wrapperNode)}>
             <Title style={{ paddingTop: 0 }}>
               <Trans>Menu</Trans>
             </Title>

src/components/SwapForm/hooks/useBuildRoute.tsx

@@ -4,6 +4,7 @@ import routeApi from 'services/route'
 import { BuildRouteData, BuildRoutePayload } from 'services/route/types/buildRoute'
 import { RouteSummary } from 'services/route/types/getRoute'
 
+import { useRouteApiDomain } from 'components/SwapForm/hooks/useGetRoute'
 import { AGGREGATOR_API_PATHS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import { useActiveWeb3React } from 'hooks'
@@ -31,8 +32,9 @@ const useBuildRoute = (args: Args) => {
   const { recipient, routeSummary, slippage, transactionTimeout, permit } = args
   const { chainId, account } = useActiveWeb3React()
   const abortControllerRef = useRef(new AbortController())
-  const { aggregatorDomain, isEnableAuthenAggregator } = useKyberswapGlobalConfig()
+  const { isEnableAuthenAggregator } = useKyberswapGlobalConfig()
   const [buildRoute] = routeApi.useBuildRouteMutation()
+  const aggregatorDomain = useRouteApiDomain()
 
   const fetcher = useCallback(async (): Promise<BuildRouteResult> => {
     if (!account) {

src/components/SwapForm/hooks/useGetRoute.ts

@@ -6,6 +6,7 @@ import { GetRouteParams } from 'services/route/types/getRoute'
 
 import useGetSwapFeeConfig, { SwapFeeConfig } from 'components/SwapForm/hooks/useGetSwapFeeConfig'
 import useSelectedDexes from 'components/SwapForm/hooks/useSelectedDexes'
+import { AGGREGATOR_API } from 'constants/env'
 import {
   AGGREGATOR_API_PATHS,
   ETHER_ADDRESS,
@@ -17,6 +18,7 @@ import { NETWORKS_INFO, isEVM } from 'constants/networks'
 import { useActiveWeb3React } from 'hooks'
 import useDebounce from 'hooks/useDebounce'
 import { useKyberswapGlobalConfig } from 'hooks/useKyberSwapConfig'
+import { useSessionInfo } from 'state/authen/hooks'
 import { useAppDispatch } from 'state/hooks'
 import { ChargeFeeBy } from 'types/route'
 import { Aggregator } from 'utils/aggregator'
@@ -76,13 +78,21 @@ const getFeeConfigParams = (
   }
 }
 
+// default use aggregator, utils the first time sign-in successfully (guest/sign in eth) => use meta
+export const useRouteApiDomain = () => {
+  const { aggregatorDomain } = useKyberswapGlobalConfig()
+  const { authenticationSuccess } = useSessionInfo()
+  return authenticationSuccess ? aggregatorDomain : AGGREGATOR_API
+}
+
 const useGetRoute = (args: ArgsGetRoute) => {
-  const { aggregatorDomain, isEnableAuthenAggregator } = useKyberswapGlobalConfig()
+  const { isEnableAuthenAggregator } = useKyberswapGlobalConfig()
   const { isSaveGas, parsedAmount, currencyIn, currencyOut, customChain, isProcessingSwap } = args
   const { chainId: currentChain } = useActiveWeb3React()
   const chainId = customChain || currentChain
 
   const [trigger, _result] = routeApi.useLazyGetRouteQuery()
+  const aggregatorDomain = useRouteApiDomain()
 
   const getSwapFeeConfig = useGetSwapFeeConfig()
 

src/components/swapv2/LimitOrder/helpers.ts

@@ -116,7 +116,8 @@ export const formatRateLimitOrder = (order: LimitOrder, invert: boolean) => {
   } catch (error) {
     console.log(error)
   }
-  return formatNumberWithPrecisionRange(parseFloat(rateValue.toFixed(16)), 0, 8)
+  const float = parseFloat(rateValue.toFixed(16))
+  return formatNumberWithPrecisionRange(float, 0, float < 1e-8 ? 16 : 8)
 }
 
 export const calcPercentFilledOrder = (value: string, total: string, decimals: number) => {

src/components/swapv2/styleds.tsx

@@ -221,7 +221,7 @@ export const InfoComponentsWrapper = styled.div`
 
 export const KyberAIBannerWrapper = styled.div`
   width: 100%;
-  height: 84px;
+  max-height: 84px;
   margin-bottom: 16px;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`

src/constants/connectors/utils.ts

@@ -21,7 +21,7 @@ export const getIsMetaMaskWallet = () =>
 export const getIsCoinbaseWallet = () =>
   Boolean(
     (window.ethereum?.isCoinbaseWallet || window.ethereum?.providers?.some(p => p?.isCoinbaseWallet)) &&
-      !window.ethereum.isKrystalWallet,
+      !window.ethereum?.isKrystalWallet,
   )
 
 export const getIsBraveWallet = () => Boolean(checkForBraveBrowser() && window.ethereum?.isBraveWallet)

src/pages/App.tsx

@@ -43,7 +43,7 @@ import { getLimitOrderContract, isAddressString, shortenAddress } from 'utils'
 
 import ElasticLegacyNotice from './ElasticLegacy/ElasticLegacyNotice'
 import Icons from './Icons'
-import VerifyAuth from './VerifyAuth'
+import VerifyAuth from './Verify/VerifyAuth'
 
 // test page for swap only through elastic
 const ElasticSwap = lazy(() => import('./ElasticSwap'))
@@ -120,7 +120,7 @@ const preloadImages = () => {
 const SwapPage = () => {
   const { chainId } = useActiveWeb3React()
   useSyncNetworkParamWithStore()
-  return <ProtectedRoute>{chainId === ChainId.SOLANA ? <SwapV2 /> : <SwapV3 />}</ProtectedRoute>
+  return chainId === ChainId.SOLANA ? <SwapV2 /> : <SwapV3 />
 }
 
 const RedirectWithNetworkPrefix = () => {

src/pages/KyberDAO/KNCUtility/Table.tsx

@@ -42,7 +42,6 @@ export const Row = styled.div<{ $background?: string }>`
 
 export const TableHeader = styled(Row)`
   border-top: none;
-  background: linear-gradient(0deg, #134134 0%, #0f221e 100%);
   background: linear-gradient(
     0deg,
     ${({ theme }) => transparentize(0.5, theme.primary)} 0%,

src/pages/KyberDAO/StakeKNC/MigrateModal.tsx

@@ -1,4 +1,4 @@
-import { ChainId, Token, TokenAmount } from '@kyberswap/ks-sdk-core'
+import { ChainId, Token } from '@kyberswap/ks-sdk-core'
 import { Trans, t } from '@lingui/macro'
 import { parseUnits } from 'ethers/lib/utils'
 import { useEffect, useState } from 'react'
@@ -10,6 +10,7 @@ import { ButtonLight, ButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'
 import Modal from 'components/Modal'
 import Row, { AutoRow, RowBetween } from 'components/Row'
+import useParsedAmount from 'components/SwapForm/hooks/useParsedAmount'
 import { useActiveWeb3React } from 'hooks'
 import { useKyberDAOInfo, useKyberDaoStakeActions } from 'hooks/kyberdao'
 import { ApprovalState, useApproveCallback } from 'hooks/useApproveCallback'
@@ -49,20 +50,13 @@ export default function MigrateModal({
   const { migrate } = useKyberDaoStakeActions()
   const [value, setValue] = useState('1')
   const [error, setError] = useState('')
-  const [approval, approveCallback] = useApproveCallback(
-    value
-      ? TokenAmount.fromRawAmount(
-          new Token(
-            chainId === ChainId.GÖRLI ? ChainId.GÖRLI : ChainId.MAINNET,
-            kyberDAOInfo?.KNCLAddress || '',
-            18,
-            'KNCL',
-          ),
-          parseUnits((+value).toFixed(18).toString(), 18).toString(),
-        )
-      : undefined,
-    kyberDAOInfo?.KNCAddress,
+  const parsedAmount = useParsedAmount(
+    new Token(chainId === ChainId.GÖRLI ? ChainId.GÖRLI : ChainId.MAINNET, kyberDAOInfo?.KNCLAddress || '', 18, 'KNCL'),
+    value,
   )
+
+  const [approval, approveCallback] = useApproveCallback(parsedAmount, kyberDAOInfo?.KNCAddress)
+
   const oldKNCBalance = useTokenBalance(kyberDAOInfo?.KNCLAddress || '')
   useEffect(() => {
     // Check if too many decimals

src/pages/KyberDAO/StakeKNC/StakeKNCComponent.tsx

@@ -1,4 +1,4 @@
-import { ChainId, Token, TokenAmount } from '@kyberswap/ks-sdk-core'
+import { ChainId, Token } from '@kyberswap/ks-sdk-core'
 import { Trans, t } from '@lingui/macro'
 import { formatUnits, parseUnits } from 'ethers/lib/utils'
 import { lighten } from 'polished'
@@ -18,6 +18,7 @@ import WarningIcon from 'components/Icons/WarningIcon'
 import InfoHelper from 'components/InfoHelper'
 import Input from 'components/NumericalInput'
 import Row, { AutoRow, RowBetween, RowFit } from 'components/Row'
+import useParsedAmount from 'components/SwapForm/hooks/useParsedAmount'
 import { MouseoverTooltip } from 'components/Tooltip'
 import TransactionConfirmationModal, { TransactionErrorContent } from 'components/TransactionConfirmationModal'
 import { useActiveWeb3React } from 'hooks'
@@ -204,6 +205,7 @@ export default function StakeKNCComponent() {
   const { account, chainId } = useActiveWeb3React()
   const kyberDAOInfo = useKyberDAOInfo()
   const { stakedBalance, KNCBalance, delegatedAddress } = useStakingInfo()
+  console.log('🚀 ~ file: StakeKNCComponent.tsx:208 ~ StakeKNCComponent ~ KNCBalance:', KNCBalance)
   const { calculateVotingPower } = useVotingInfo()
   const isDelegated = !!delegatedAddress && delegatedAddress !== account
   const { stake, unstake, delegate, undelegate } = useKyberDaoStakeActions()
@@ -235,8 +237,8 @@ export default function StakeKNCComponent() {
     if (!inputValue || isNaN(parseFloat(inputValue)) || parseFloat(inputValue) <= 0) {
       setErrorMessage(t`Invalid amount`)
     } else if (
-      (parseFloat(inputValue) > parseFloat(formatUnits(KNCBalance)) && activeTab === STAKE_TAB.Stake) ||
-      (parseFloat(inputValue) > parseFloat(formatUnits(stakedBalance)) && activeTab === STAKE_TAB.Unstake)
+      (parseUnits(inputValue, 18).gt(KNCBalance) && activeTab === STAKE_TAB.Stake) ||
+      (parseUnits(inputValue, 18).gt(stakedBalance) && activeTab === STAKE_TAB.Unstake)
     ) {
       setErrorMessage(t`Insufficient amount`)
     } else if (activeTab === STAKE_TAB.Delegate && !isAddress(chainId, delegateAddress)) {
@@ -265,18 +267,13 @@ export default function StakeKNCComponent() {
   const toggleYourTransactions = useToggleModal(ApplicationModal.YOUR_TRANSACTIONS_STAKE_KNC)
   const { switchToEthereum } = useSwitchToEthereum()
   const { mixpanelHandler } = useMixpanel()
+  const parsedAmount = useParsedAmount(
+    new Token(chainId === ChainId.GÖRLI ? ChainId.GÖRLI : ChainId.MAINNET, kyberDAOInfo?.KNCAddress || '', 18, 'KNC'),
+    inputValue,
+  )
+
   const [approvalKNC, approveCallback] = useApproveCallback(
-    activeTab === STAKE_TAB.Stake && inputValue
-      ? TokenAmount.fromRawAmount(
-          new Token(
-            chainId === ChainId.GÖRLI ? ChainId.GÖRLI : ChainId.MAINNET,
-            kyberDAOInfo?.KNCAddress || '',
-            18,
-            'KNC',
-          ),
-          parseUnits((+inputValue).toFixed(18).toString(), 18).toString(),
-        )
-      : undefined,
+    activeTab === STAKE_TAB.Stake && inputValue ? parsedAmount : undefined,
     kyberDAOInfo?.staking,
   )
 

src/pages/NotificationCenter/Menu/index.tsx

@@ -92,10 +92,10 @@ const menuItems: MenuItemType[] = [
         route: PROFILE_MANAGE_ROUTES.LIMIT_ORDERS,
         type: PrivateAnnouncementType.LIMIT_ORDER,
       },
-      {
-        route: PROFILE_MANAGE_ROUTES.BRIDGE,
-        type: PrivateAnnouncementType.BRIDGE_ASSET,
-      },
+      // {
+      //   route: PROFILE_MANAGE_ROUTES.BRIDGE,
+      //   type: PrivateAnnouncementType.BRIDGE_ASSET,
+      // },
       {
         route: PROFILE_MANAGE_ROUTES.CROSS_CHAIN,
         type: PrivateAnnouncementType.CROSS_CHAIN,

src/pages/SwapV3/index.tsx

@@ -291,7 +291,7 @@ export default function Swap() {
                 <Suspense
                   fallback={
                     <Skeleton
-                      height="100%"
+                      height="84px"
                       baseColor={theme.background}
                       highlightColor={theme.buttonGray}
                       borderRadius="24px"

src/pages/TrueSightV2/components/FeedbackSurvey.tsx

@@ -151,19 +151,13 @@ export default function FeedbackSurvey() {
         }}
       >
         <RowFit gap="4px">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <g clipPath="url(#clip0_7500_352677)">
-              <path
-                d="M4.66675 2.66669L4.66675 9.33335L6.00008 9.33335L6.00008 2.66669L14.0001 2.66669L14.0001 13.3334L6.00008 13.3334L6.00008 12L8.66675 12L8.66675 10.6667L3.33341 10.6667L3.33341 6.66669L0.666748 6.66669L0.666748 12L4.66675 12L4.66675 13.3334C4.66675 14.0667 5.26675 14.6667 6.00008 14.6667L14.0001 14.6667C14.7334 14.6667 15.3334 14.0667 15.3334 13.3334L15.3334 2.66669C15.3334 1.93335 14.7334 1.33335 14.0001 1.33335L6.00008 1.33335C5.26675 1.33335 4.66675 1.93335 4.66675 2.66669Z"
-                fill="#31CB9E"
-              />
-            </g>
-            <defs>
-              <clipPath id="clip0_7500_352677">
-                <rect width="16" height="16" fill="white" transform="translate(0 16) rotate(-90)" />
-              </clipPath>
-            </defs>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M20 7H10V9H20V21H4V9H6V13H8V5H14V1H6V7H4C2.9 7 2 7.9 2 9V21C2 22.1 2.9 23 4 23H20C21.1 23 22 22.1 22 21V9C22 7.9 21.1 7 20 7Z"
+              fill="currentcolor"
+            />
           </svg>
+
           <Text fontSize="12px" lineHeight="16px">
             <Trans>Feedback</Trans>
           </Text>

src/pages/TrueSightV2/components/TutorialModal.tsx

@@ -114,8 +114,8 @@ const steps = [
         <p>
           For traders who are in discovery mode, start with the Rankings section. Here you will see top tokens under
           each of the 7 categories -{' '}
-          <b>Bullish, Bearish, Top CEX Inflow, Top CEX Outflow, Top Traded, Trending Soon, Currently Trending.</b>
-          We update the token rankings multiple times a day!
+          <b>Bullish, Bearish, Top CEX Inflow, Top CEX Outflow, Top Traded, Trending Soon, Currently Trending.</b> We
+          update the token rankings multiple times a day!
         </p>{' '}
         <p>
           For traders looking to spot alpha on specific tokens, start with the Explore section. You will find a number

src/pages/TrueSightV2/pages/RegisterWhitelist/WaitListForm.tsx

@@ -85,7 +85,9 @@ export default function EmailForm({
               ) : rankNo === 2 ? (
                 <Trans>1 user is ahead of you</Trans>
               ) : (
-                <Trans>{rankNo ? formattedNum(rankNo - 1 + '') : t`Many`} users are ahead of you!</Trans>
+                <Trans>
+                  {rankNo && rankNo <= 101 ? formattedNum(rankNo - 1 + '') : t`Many`} users are ahead of you!
+                </Trans>
               )}
             </Flex>
           )}