Merge remote-tracking branch 'origin/main' into update-alert

src/components/Announcement/Popups/DetailAnnouncementPopup.tsx

@@ -141,7 +141,7 @@ const Desc = styled.div`
   }
 `
 
-const formatCtaName = (ctaName: string, ctaUrl: string) => {
+export const formatCtaName = (ctaName: string, ctaUrl: string) => {
   const formatName = ctaName.replace('{{.ctaName}}', '') // fallback backend return empty data
   if (!ctaUrl) return formatName || t`Close`
   return formatName || t`Detail`

src/components/Announcement/PrivateAnnoucement/NotificationCenter/PoolPosition.tsx

@@ -97,13 +97,19 @@ export default function AnnouncementItem({
       {expand && (
         <Detail>
           <Text>
-            <Trans>Current Market Price is {currentPrice} USDT per stMatic</Trans>
+            <Trans>
+              Current Market Price is {currentPrice} {token0Symbol} per {token1Symbol}
+            </Trans>
           </Text>
           <Text>
-            <Trans>Min Price of your range is {minPrice} USDT per stMatic</Trans>
+            <Trans>
+              Min Price of your range is {minPrice} {token0Symbol} per {token1Symbol}
+            </Trans>
           </Text>
           <Text>
-            <Trans>Max Price of your range is {maxPrice} USDT per stMatic</Trans>
+            <Trans>
+              Max Price of your range is {maxPrice} {token0Symbol} per {token1Symbol}
+            </Trans>
           </Text>
         </Detail>
       )}

src/components/Announcement/index.tsx

@@ -225,10 +225,10 @@ export default function AnnouncementComponent() {
 
   useEffect(() => {
     if (userInfo?.identityId) {
+      setPrivateAnnouncements([])
       invalidateTag(ANNOUNCEMENT_TAGS)
-      refreshAnnouncement()
     }
-  }, [userInfo?.identityId, invalidateTag, refreshAnnouncement])
+  }, [userInfo?.identityId, invalidateTag])
 
   useInterval(prefetchPrivateAnnouncements, 10_000)
 

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/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/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/GeneralAnnouncement/AnnouncementItem.tsx

@@ -6,6 +6,7 @@ import styled, { CSSProperties, css } from 'styled-components'
 import NotificationImage from 'assets/images/notification_default.png'
 import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import CtaButton from 'components/Announcement/Popups/CtaButton'
+import { formatCtaName } from 'components/Announcement/Popups/DetailAnnouncementPopup'
 import { useNavigateToUrl } from 'components/Announcement/helper'
 import { Announcement } from 'components/Announcement/type'
 import { MEDIA_WIDTHS } from 'theme'
@@ -138,7 +139,8 @@ export default function AnnouncementItem({
   const [expand, setExpand] = useState(false)
   const { templateBody } = announcement
 
-  const { name, startAt, content, thumbnailImageURL, ctaURL, ctaName } = templateBody
+  const { name, startAt, content, thumbnailImageURL, ctaURL } = templateBody
+  const ctaName = formatCtaName(templateBody.ctaName, ctaURL)
   const navigate = useNavigateToUrl()
   const onClickCta: React.MouseEventHandler<HTMLButtonElement> = e => {
     e.stopPropagation()

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/NotificationCenter/index.tsx

@@ -64,10 +64,11 @@ const Title = styled.h2`
     font-size: 20px;
   `}
 `
+const LEFT_MENU_SIZE = '290px'
 
 const LeftColumn = styled.div`
-  width: 290px;
-  min-width: 290px;
+  width: ${LEFT_MENU_SIZE};
+  min-width: ${LEFT_MENU_SIZE};
 
   background-color: ${({ theme }) => theme.tableHeader};
   border-radius: 24px 0px 0px 24px;
@@ -83,12 +84,13 @@ const LeftColumn = styled.div`
 const RightColumn = styled.div`
   background-color: ${({ theme }) => theme.background};
   flex: 1;
+  max-width: calc(100% - ${LEFT_MENU_SIZE});
   border-radius: 0px 24px 24px 0px;
-
+  min-height: 200px;
   ${({ theme }) => theme.mediaWidth.upToMedium`
     width: 100%;
     border-radius: 0px;
-
+    max-width: 100%;
     display: flex;
     flex-direction: column;
   `}

src/pages/SwapV3/index.tsx

@@ -247,7 +247,7 @@ export default function Swap() {
             )}
 
             <AppBodyWrapped data-highlight={shouldHighlightSwapBox} id={TutorialIds.SWAP_FORM}>
-              {activeTab === TAB.SWAP && (
+              {isSwapPage && (
                 <PopulatedSwapForm
                   onSelectSuggestedPair={onSelectSuggestedPair}
                   routeSummary={routeSummary}
@@ -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/state/transactions/reducer.ts

@@ -32,8 +32,8 @@ export default createReducer(initialState, builder =>
       ) => {
         const chainTxs = transactions[chainId] ?? {}
         const txs = (firstTxHash && chainTxs[firstTxHash]) || []
-        if (txs.find(e => e.hash === hash)) {
-          // duplicate
+        if (!hash || txs.find(e => e.hash === hash)) {
+          // duplicate or not found hash
           return
         }
         txs.push({

src/state/user/actions.ts

@@ -39,7 +39,7 @@ export const addSerializedPair = createAction<{ serializedPair: SerializedPair }
 export const removeSerializedPair = createAction<{ chainId: number; tokenAAddress: string; tokenBAddress: string }>(
   'user/removeSerializedPair',
 )
-export const toggleLiveChart = createAction<{ chainId: number }>('user/toggleLiveChart')
+export const toggleLiveChart = createAction('user/toggleLiveChart')
 
 export const toggleTradeRoutes = createAction<void>('user/toggleTradeRoutes')
 export const toggleTokenInfo = createAction<void>('user/toggleTokenInfo')