Merge branch 'move-folter-noti' into inbox-watchlist

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/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/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/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'

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' }}>

src/components/SubscribeButton/NotificationPreference/index.tsx → src/pages/NotificationCenter/NotificationPreference/index.tsx

@@ -1,5 +1,5 @@
 import { Trans, t } from '@lingui/macro'
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components'
 
@@ -9,14 +9,13 @@ import Column from 'components/Column'
 import MailIcon from 'components/Icons/MailIcon'
 import Loader from 'components/Loader'
 import Row from 'components/Row'
-import ActionButtons from 'components/SubscribeButton/NotificationPreference/ActionButtons'
-import Header from 'components/SubscribeButton/NotificationPreference/Header'
-import InputEmail from 'components/SubscribeButton/NotificationPreference/InputEmail'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { PRICE_ALERT_TOPIC_ID } from 'constants/env'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useNotification, { Topic, TopicType } from 'hooks/useNotification'
 import useTheme from 'hooks/useTheme'
+import ActionButtons from 'pages/NotificationCenter/NotificationPreference/ActionButtons'
+import InputEmail from 'pages/NotificationCenter/NotificationPreference/InputEmail'
 import VerifyCodeModal from 'pages/Verify/VerifyCodeModal'
 import { useNotify } from 'state/application/hooks'
 import { useSessionInfo } from 'state/authen/hooks'
@@ -99,9 +98,7 @@ const EmailColum = styled(Column)`
   `}
 `
 
-const noop = () => {
-  //
-}
+const noop = () => {}
 
 const sortGroup = (arr: Topic[]) => [...arr].sort((x, y) => y.priority - x.priority)
 
@@ -140,15 +137,7 @@ export const useValidateEmail = (defaultEmail?: string) => {
   return { inputEmail: inputEmail.trim(), onChangeEmail, errorInput, errorColor, hasErrorInput, reset }
 }
 
-function NotificationPreference({
-  header,
-  isOpen,
-  toggleModal = noop,
-}: {
-  header?: ReactNode
-  isOpen: boolean
-  toggleModal?: () => void
-}) {
+function NotificationPreference({ toggleModal = noop }: { toggleModal?: () => void }) {
   const theme = useTheme()
   const { isLoading, saveNotification, topicGroups: topicGroupsGlobal, unsubscribeAll } = useNotification()
 
@@ -190,23 +179,16 @@ function NotificationPreference({
   )
 
   useEffect(() => {
-    if (isOpen) {
-      setEmailPendingVerified('')
-      reset(userInfo?.email)
-    }
-  }, [userInfo, isOpen, reset])
+    setEmailPendingVerified('')
+    reset(userInfo?.email)
+  }, [userInfo, reset])
 
   useEffect(() => {
-    setTimeout(
-      () => {
-        setSelectedTopic(isOpen ? topicGroupsGlobal.filter(e => e.isSubscribed).map(e => e.id) : [])
-        if (isOpen) {
-          setTopicGroups(sortGroup(topicGroupsGlobal))
-        }
-      },
-      isOpen ? 0 : 400,
-    )
-  }, [isOpen, topicGroupsGlobal])
+    setTimeout(() => {
+      setSelectedTopic(topicGroupsGlobal.filter(e => e.isSubscribed).map(e => e.id))
+      setTopicGroups(sortGroup(topicGroupsGlobal))
+    }, 0)
+  }, [topicGroupsGlobal])
 
   const getDiffChangeTopics = useCallback(
     (topicGroups: Topic[]) => {
@@ -381,7 +363,9 @@ function NotificationPreference({
 
   return (
     <Wrapper>
-      {header || <Header toggleModal={toggleModal} />}
+      <Text fontWeight={'500'} color={theme.text} fontSize="14px">
+        <Trans>Email Notification</Trans>
+      </Text>
 
       <EmailColum>
         <Label>
@@ -460,4 +444,17 @@ function NotificationPreference({
     </Wrapper>
   )
 }
-export default NotificationPreference
+
+const StyledPreference = styled.div`
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    max-width: unset;
+  `}
+`
+
+export default function Overview() {
+  return (
+    <StyledPreference>
+      <NotificationPreference />
+    </StyledPreference>
+  )
+}

src/pages/NotificationCenter/Profile/index.tsx

@@ -14,14 +14,14 @@ import CheckBox from 'components/CheckBox'
 import Column from 'components/Column'
 import CopyHelper from 'components/Copy'
 import Input from 'components/Input'
-import { useValidateEmail } from 'components/SubscribeButton/NotificationPreference'
-import InputEmail from 'components/SubscribeButton/NotificationPreference/InputEmail'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import { useUploadImageToCloud } from 'hooks/social'
 import useLogin from 'hooks/useLogin'
 import useTheme from 'hooks/useTheme'
+import { useValidateEmail } from 'pages/NotificationCenter/NotificationPreference'
+import InputEmail from 'pages/NotificationCenter/NotificationPreference/InputEmail'
 import AvatarEdit from 'pages/NotificationCenter/Profile/AvatarEdit'
 import ExportAccountButton from 'pages/NotificationCenter/Profile/ExportAccountButton'
 import WarningSignMessage from 'pages/NotificationCenter/Profile/WarningSignMessage'

src/pages/NotificationCenter/index.tsx

@@ -8,7 +8,7 @@ import { APP_PATHS } from 'constants/index'
 import CreateAlert from 'pages/NotificationCenter/CreateAlert'
 import GeneralAnnouncement from 'pages/NotificationCenter/GeneralAnnouncement'
 import Menu from 'pages/NotificationCenter/Menu'
-import Overview from 'pages/NotificationCenter/Overview'
+import Overview from 'pages/NotificationCenter/NotificationPreference'
 import PriceAlerts from 'pages/NotificationCenter/PriceAlerts'
 import Profile from 'pages/NotificationCenter/Profile'
 import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const'

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]: {

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

src/utils/numbers.ts

@@ -92,7 +92,7 @@ const parseNum = (value: FormatValue): Fraction => {
       value instanceof Price
     ) {
       const valueStr = (() => {
-        if (typeof value === 'string') return value
+        if (typeof value === 'string') return toFixed(+value)
         if (typeof value === 'number') return toFixed(value)
         if (value instanceof CurrencyAmount) return value.toFixed(value.currency.decimals)
         if (value instanceof Price) return value.toFixed(18)