Alex ui1

src/components/AnalyticComponents/ApexChart/index.js

@@ -12,33 +12,9 @@ import {
 import { useWindowWidth } from '@react-hook/window-size'
 import { ClipLoader } from 'react-spinners'
 import { useThemeContext } from '../../../providers/useThemeContext'
-import { ceil10, floor10, round10, numberWithCommas } from '../../../utilities/formats'
+import { ceil10, floor10, round10, numberWithCommas, formatDate } from '../../../utilities/formats'
 import { LoadingDiv, NoData } from './style'
 
-function formatDateTime(value) {
-  const date = new Date(value)
-  const year = date.getFullYear()
-  const monthNames = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-  ]
-  const monthNum = date.getMonth()
-  const month = monthNames[monthNum]
-  const day = date.getDate()
-
-  return `${month} ${day} ${year}`
-}
-
 function getRangeNumber(strRange) {
   let ago = 30
   if (strRange === '1D') {
@@ -142,7 +118,7 @@ const ApexChart = ({ data, range, setCurDate, setCurContent }) => {
 
   const CustomTooltip = ({ active, payload }) => {
     if (active && payload && payload.length) {
-      setCurDate(formatDateTime(payload[0].payload.x))
+      setCurDate(formatDate(payload[0].payload.x))
       const content = `<div style="font-size: 13px; line-height: 16px; display: flex;"><div style="font-weight: 700;">TVL
       </div><div style="color: #15B088; font-weight: 500;">&nbsp;$
       ${numberWithCommas(Number(payload[0].payload.y.toFixed(0)))}</div></div>`

src/components/Counter.js

@@ -50,7 +50,7 @@ const Counter = ({
           separator=","
           formattingFn={number => number}
           delay={0}
-          decimals={rewardToken?.decimals}
+          decimals={Number(rewardToken?.decimals)}
           // duration={86400}
           duration={0.01}
           className="count-up-text"
@@ -65,7 +65,7 @@ const Counter = ({
           separator=","
           formattingFn={number => number}
           delay={0}
-          decimals={rewardToken?.decimals}
+          decimals={Number(rewardToken?.decimals)}
           // duration={86400}
           duration={0.01}
           className="count-up-text"
@@ -80,7 +80,7 @@ const Counter = ({
           separator=","
           formattingFn={number => number}
           delay={0}
-          decimals={rewardToken?.decimals}
+          decimals={Number(rewardToken?.decimals)}
           // duration={pool.finishTime - nowInSeconds}
           duration={0.01}
           className="count-up-text"

src/components/CounterUsdPrice.js

@@ -1,7 +1,6 @@
 import BigNumber from 'bignumber.js'
 import { get, toArray } from 'lodash'
 import React from 'react'
-// import CountUp from 'react-countup'
 import { BEGINNERS_BALANCES_DECIMALS } from '../constants'
 import { fromWei } from '../services/web3'
 import { formatNumber } from '../utilities/formats'

src/components/DetailChart/ApexChart/index.js

@@ -14,7 +14,7 @@ import { round } from 'lodash'
 import { ClipLoader } from 'react-spinners'
 import { useWindowWidth } from '@react-hook/window-size'
 import { useThemeContext } from '../../../providers/useThemeContext'
-import { ceil10, floor10, round10, numberWithCommas } from '../../../utilities/formats'
+import { ceil10, floor10, round10, numberWithCommas, formatDate } from '../../../utilities/formats'
 import { MAX_DECIMALS } from '../../../constants'
 import { LoadingDiv, NoData } from './style'
 import { fromWei } from '../../../services/web3'
@@ -90,30 +90,6 @@ function generateChartDataWithSlots(slots, apiData, kind, filter, decimals) {
   return seriesData
 }
 
-function formatDateTime(value) {
-  const date = new Date(value)
-  const year = date.getFullYear()
-  const monthNames = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-  ]
-  const monthNum = date.getMonth()
-  const month = monthNames[monthNum]
-  const day = date.getDate()
-
-  return `${month} ${day} ${year}`
-}
-
 function formatXAxis(value, range) {
   const date = new Date(value)
 
@@ -183,6 +159,10 @@ const ApexChart = ({
   lastAPY,
   setCurDate,
   setCurContent,
+  setRoundNumber,
+  handleTooltipContent,
+  setFixedLen,
+  fixedLen,
 }) => {
   const { fontColor, fontColor5 } = useThemeContext()
 
@@ -193,21 +173,14 @@ const ApexChart = ({
   const [loading, setLoading] = useState(false)
   const [isDataReady, setIsDataReady] = useState(true)
 
-  const [fixedLen, setFixedLen] = useState(0)
-  const [roundNumber, setRoundNumber] = useState(0)
-
   const isMobile = useMediaQuery({ query: '(max-width: 992px)' })
 
-  const CustomTooltip = ({ active, payload }) => {
-    if (active && payload && payload.length) {
-      setCurDate(formatDateTime(payload[0].payload.x))
-      const content = numberWithCommas(
-        Number(payload[0].payload.y).toFixed(
-          filter === 1 ? 2 : filter === 0 ? fixedLen : roundNumber,
-        ),
-      )
-      setCurContent(content)
-    }
+  const CustomTooltip = ({ active, payload, onTooltipContentChange }) => {
+    useEffect(() => {
+      if (active && payload && payload.length) {
+        onTooltipContentChange(payload)
+      }
+    }, [active, payload, onTooltipContentChange])
 
     return null
   }
@@ -483,7 +456,7 @@ const ApexChart = ({
       setFixedLen(filter === 1 ? 0 : len)
       setRoundNumber(roundNum)
 
-      setCurDate(formatDateTime(mainData[slotCount - 1].x))
+      setCurDate(formatDate(mainData[slotCount - 1].x))
       const content = numberWithCommas(
         Number(mainData[slotCount - 1].y).toFixed(
           filter === 1 ? 2 : filter === 0 ? fixedLen : roundNum,
@@ -589,7 +562,7 @@ const ApexChart = ({
               fill="url(#colorUv)"
             />
             <Tooltip
-              content={CustomTooltip}
+              content={<CustomTooltip onTooltipContentChange={handleTooltipContent} />}
               legendType="none"
               dot={false}
               cursor={{

src/components/DetailChart/FarmDetailChart/index.js

@@ -5,6 +5,7 @@ import myBalanceActive from '../../../assets/images/logos/earn/chart-graph.svg'
 import { addresses } from '../../../data/index'
 import { useWallet } from '../../../providers/Wallet'
 import { getDataQuery, getTotalTVLData } from '../../../utilities/apiCalls'
+import { formatDate, numberWithCommas } from '../../../utilities/formats'
 import { useThemeContext } from '../../../providers/useThemeContext'
 import ApexChart from '../ApexChart'
 import ChartButtonsGroup from '../ChartButtonsGroup'
@@ -36,49 +37,73 @@ const recommendLinks = [
 
 const FarmDetailChart = ({ token, vaultPool, lastTVL, lastAPY }) => {
   const { fontColor3, fontColor4 } = useThemeContext()
-  const [clickedId, setClickedId] = useState(2)
-  const [selectedState, setSelectedState] = useState('ALL')
-
   const { account } = useWallet()
-  const address = token.vaultAddress || vaultPool.autoStakePoolAddress || vaultPool.contractAddress
-  const chainId = token.chain || token.data.chain
 
+  const [clickedId, setClickedId] = useState(2)
+  const [selectedState, setSelectedState] = useState('ALL')
   const [apiData, setApiData] = useState({})
   const [iFarmTVLData, setIFarmTVLData] = useState({})
   const [curDate, setCurDate] = useState('')
   const [curContent, setCurContent] = useState('')
+  const [tooltipLabel, setTooltipLabel] = useState('')
+  const [roundNumber, setRoundNumber] = useState(0)
+  const [fixedLen, setFixedLen] = useState(0)
 
   const isIFARM = token.tokenAddress === addresses.FARM
+  const address = isIFARM
+    ? token.tokenAddress
+    : token.vaultAddress || vaultPool.autoStakePoolAddress || vaultPool.contractAddress
+  const chainId = token.chain || token.data.chain
 
-  const [tooltipLabel, setTooltipLabel] = useState('')
+  const handleTooltipContent = payload => {
+    if (payload && payload.length) {
+      setCurDate(formatDate(payload[0].payload.x))
+      const content = numberWithCommas(
+        Number(payload[0].payload.y).toFixed(
+          clickedId === 1 ? 2 : clickedId === 0 ? fixedLen : roundNumber,
+        ),
+      )
+      setCurContent(content)
+    }
+  }
 
   useEffect(() => {
     const label = clickedId === 0 ? 'APY' : clickedId === 1 ? 'TVL' : 'Share Price'
     setTooltipLabel(label)
   }, [clickedId])
 
   useEffect(() => {
+    let isMounted = true
     const initData = async () => {
-      const data = await getDataQuery(365, address, chainId, account)
-      const updatedData = { ...data }
-      updatedData.vaultHistories = updatedData.vaultHistories.filter(
-        history => history.sharePrice !== '0',
-      )
-      setApiData(updatedData)
-      if (isIFARM) {
-        const dataIFarm = await getDataQuery(365, token.tokenAddress, chainId, account)
-        if (dataIFarm) {
-          data.apyRewards = dataIFarm.apyRewards
-          data.tvls = dataIFarm.tvls
-        }
+      if (address && chainId && account) {
+        try {
+          const data = await getDataQuery(365, address, chainId, account)
+          const updatedData = { ...data }
+          updatedData.vaultHistories = updatedData.vaultHistories.filter(
+            history => history.sharePrice !== '0',
+          )
+          if (isMounted) {
+            setApiData(updatedData)
+            if (isIFARM && updatedData) {
+              data.apyRewards = updatedData.apyRewards
+              data.tvls = updatedData.tvls
 
-        const iFarmTVL = await getTotalTVLData()
-        setIFarmTVLData(iFarmTVL)
+              const iFarmTVL = await getTotalTVLData()
+              setIFarmTVLData(iFarmTVL)
+            }
+          }
+        } catch (error) {
+          console.log('An error ocurred', error)
+        }
       }
     }
 
     initData()
-  }, [address, chainId, account, token, isIFARM, clickedId])
+
+    return () => {
+      isMounted = false
+    }
+  }, [address, chainId, account, isIFARM])
 
   return (
     <Container>
@@ -118,6 +143,10 @@ const FarmDetailChart = ({ token, vaultPool, lastTVL, lastAPY }) => {
           lastAPY={lastAPY}
           setCurDate={setCurDate}
           setCurContent={setCurContent}
+          handleTooltipContent={handleTooltipContent}
+          setRoundNumber={setRoundNumber}
+          setFixedLen={setFixedLen}
+          fixedLen={fixedLen}
         />
       </ChartDiv>
       <ButtonGroup>

src/components/EarningsHistory/ActionRow/index.js

@@ -6,42 +6,9 @@ import ListItem from '../ListItem'
 import { useThemeContext } from '../../../providers/useThemeContext'
 import TrendUp from '../../../assets/images/logos/advancedfarm/trend-up.svg'
 import TrendDown from '../../../assets/images/logos/advancedfarm/trend-down.svg'
+import { formatDateTime } from '../../../utilities/formats'
 import { Content, DetailView, FlexDiv, IconWrapper, Badge, NetImg, NewLabel } from './style'
 
-function formatDateTime(value) {
-  const date = new Date(value * 1000) // Multiply by 1000 to convert seconds to milliseconds
-  const year = date.getFullYear()
-  const monthNames = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-  ]
-  const monthNum = date.getMonth()
-  const month = monthNames[monthNum]
-  const day = date.getDate()
-
-  // Get hours and minutes
-  let hours = date.getHours()
-  const minutes = date.getMinutes()
-  const ampm = hours >= 12 ? 'PM' : 'AM'
-  hours %= 12
-  hours = hours || 12 // Convert 0 hours to 12
-
-  // Format the time
-  const time = `${hours}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
-
-  return { __html: `${time}<br /> ${month} ${day}, ${year}` }
-}
-
 const ActionRow = ({ info, tokenSymbol }) => {
   const isMobile = useMediaQuery({ query: '(max-width: 992px)' })
   const {

src/components/UserBalanceChart/ApexChart/index.js

@@ -12,34 +12,10 @@ import {
 import { useWindowWidth } from '@react-hook/window-size'
 import { ClipLoader } from 'react-spinners'
 import { useThemeContext } from '../../../providers/useThemeContext'
-import { ceil10, floor10, round10, numberWithCommas } from '../../../utilities/formats'
+import { ceil10, floor10, round10, numberWithCommas, formatDate } from '../../../utilities/formats'
 import { LoadingDiv, NoData, FakeChartWrapper } from './style'
 import { useWallet } from '../../../providers/Wallet'
 
-function formatDateTime(value) {
-  const date = new Date(value)
-  const year = date.getFullYear()
-  const monthNames = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-  ]
-  const monthNum = date.getMonth()
-  const month = monthNames[monthNum]
-  const day = date.getDate()
-
-  return `${day} ${month} ${year}`
-}
-
 function getRangeNumber(strRange) {
   let ago = 30
   if (strRange === '1D') {
@@ -499,7 +475,7 @@ const ApexChart = ({
 
       // Set date and price with latest value by default
       if (mainData.length > 0) {
-        setCurDate(formatDateTime(mainData[mainData.length - 1].x))
+        setCurDate(formatDate(mainData[mainData.length - 1].x))
         const balance = numberWithCommas(Number(mainData[mainData.length - 1].y).toFixed(fixedLen))
         const balanceUnderlying = numberWithCommas(Number(mainData[mainData.length - 1].z))
         setCurContent(`$${balance}`)