From 52f4ede645fda3a2f12e9741b582b9ab383b4bf4 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 29 Apr 2024 21:36:32 +0900 Subject: [PATCH 1/9] Change initial value of loading status in balance chart --- src/components/UserBalanceChart/UserBalanceData/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UserBalanceChart/UserBalanceData/index.js b/src/components/UserBalanceChart/UserBalanceData/index.js index 451fc36f..eb7e2b2b 100644 --- a/src/components/UserBalanceChart/UserBalanceData/index.js +++ b/src/components/UserBalanceChart/UserBalanceData/index.js @@ -63,7 +63,7 @@ const UserBalanceData = ({ const [selectedState, setSelectedState] = useState('LAST') const [apiData, setApiData] = useState([]) - const [loadComplete, setLoadComplete] = useState(true) + const [loadComplete, setLoadComplete] = useState(false) const [curDate, setCurDate] = useState('') const [curContent, setCurContent] = useState('$0') const [curContentUnderlying, setCurContentUnderlying] = useState('0') From b1ec78a76581b80385a8d5ca6383f79cbc2dd8ac Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 29 Apr 2024 22:01:58 +0900 Subject: [PATCH 2/9] Optimize subgraph request in Detail chart --- .../DetailChart/FarmDetailChart/index.js | 43 +++++++++---------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/src/components/DetailChart/FarmDetailChart/index.js b/src/components/DetailChart/FarmDetailChart/index.js index 495a7a72..d4fff50a 100644 --- a/src/components/DetailChart/FarmDetailChart/index.js +++ b/src/components/DetailChart/FarmDetailChart/index.js @@ -36,21 +36,21 @@ 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 isIFARM = token.tokenAddress === addresses.FARM - - const [tooltipLabel, setTooltipLabel] = useState('') + const address = isIFARM + ? token.tokenAddress + : token.vaultAddress || vaultPool.autoStakePoolAddress || vaultPool.contractAddress + const chainId = token.chain || token.data.chain useEffect(() => { const label = clickedId === 0 ? 'APY' : clickedId === 1 ? 'TVL' : 'Share Price' @@ -59,26 +59,25 @@ const FarmDetailChart = ({ token, vaultPool, lastTVL, lastAPY }) => { useEffect(() => { 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) { + const data = await getDataQuery(365, address, chainId, account) + const updatedData = { ...data } + updatedData.vaultHistories = updatedData.vaultHistories.filter( + history => history.sharePrice !== '0', + ) + 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) + } } } initData() - }, [address, chainId, account, token, isIFARM, clickedId]) + }, [address, chainId, account, isIFARM]) return ( From b8f8b848aeaeae291d1062f1c51400b5d509b080 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 29 Apr 2024 22:59:17 +0900 Subject: [PATCH 3/9] Fix updating issue of tooltip in detail chart --- src/components/DetailChart/ApexChart/index.js | 25 +++++------ .../DetailChart/FarmDetailChart/index.js | 43 +++++++++++++++++++ .../UserBalanceChart/UserBalanceData/index.js | 1 + 3 files changed, 55 insertions(+), 14 deletions(-) diff --git a/src/components/DetailChart/ApexChart/index.js b/src/components/DetailChart/ApexChart/index.js index f54c29ca..9b3ddbc2 100644 --- a/src/components/DetailChart/ApexChart/index.js +++ b/src/components/DetailChart/ApexChart/index.js @@ -183,6 +183,10 @@ const ApexChart = ({ lastAPY, setCurDate, setCurContent, + setRoundNumber, + handleTooltipContent, + setFixedLen, + fixedLen, }) => { const { fontColor, fontColor5 } = useThemeContext() @@ -193,21 +197,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 } @@ -589,7 +586,7 @@ const ApexChart = ({ fill="url(#colorUv)" /> } legendType="none" dot={false} cursor={{ diff --git a/src/components/DetailChart/FarmDetailChart/index.js b/src/components/DetailChart/FarmDetailChart/index.js index d4fff50a..25e48c18 100644 --- a/src/components/DetailChart/FarmDetailChart/index.js +++ b/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 { numberWithCommas } from '../../../utilities/formats' import { useThemeContext } from '../../../providers/useThemeContext' import ApexChart from '../ApexChart' import ChartButtonsGroup from '../ChartButtonsGroup' @@ -22,6 +23,30 @@ import { LabelInfo, } 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}` +} + const filterList = [ { id: 1, name: 'APY', img: apyActive }, { id: 2, name: 'TVL in USD', img: tvlActive }, @@ -45,6 +70,8 @@ const FarmDetailChart = ({ token, vaultPool, lastTVL, lastAPY }) => { 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 @@ -52,6 +79,18 @@ const FarmDetailChart = ({ token, vaultPool, lastTVL, lastAPY }) => { : token.vaultAddress || vaultPool.autoStakePoolAddress || vaultPool.contractAddress const chainId = token.chain || token.data.chain + const handleTooltipContent = payload => { + if (payload && payload.length) { + setCurDate(formatDateTime(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) @@ -117,6 +156,10 @@ const FarmDetailChart = ({ token, vaultPool, lastTVL, lastAPY }) => { lastAPY={lastAPY} setCurDate={setCurDate} setCurContent={setCurContent} + handleTooltipContent={handleTooltipContent} + setRoundNumber={setRoundNumber} + setFixedLen={setFixedLen} + fixedLen={fixedLen} /> diff --git a/src/components/UserBalanceChart/UserBalanceData/index.js b/src/components/UserBalanceChart/UserBalanceData/index.js index eb7e2b2b..24ceb9b9 100644 --- a/src/components/UserBalanceChart/UserBalanceData/index.js +++ b/src/components/UserBalanceChart/UserBalanceData/index.js @@ -77,6 +77,7 @@ const UserBalanceData = ({ const farmPriceRef = useRef(farmPrice) const usdPriceRef = useRef(underlyingPrice) const pricePerFullShareRef = useRef(pricePerFullShare) + useEffect(() => { totalValueRef.current = totalValue farmPriceRef.current = farmPrice From 16321cdaa512416dd7d14e03c2c253a17e70cca2 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 29 Apr 2024 23:17:10 +0900 Subject: [PATCH 4/9] Optimize code for 'formatDate' function --- .../AnalyticComponents/ApexChart/index.js | 28 ++----------------- src/components/DetailChart/ApexChart/index.js | 28 ++----------------- .../DetailChart/FarmDetailChart/index.js | 28 ++----------------- .../UserBalanceChart/ApexChart/index.js | 28 ++----------------- .../UserBalanceChart/UserBalanceData/index.js | 28 ++----------------- src/utilities/formats.js | 24 ++++++++++++++++ 6 files changed, 34 insertions(+), 130 deletions(-) diff --git a/src/components/AnalyticComponents/ApexChart/index.js b/src/components/AnalyticComponents/ApexChart/index.js index 86293c7c..b0a990fe 100644 --- a/src/components/AnalyticComponents/ApexChart/index.js +++ b/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 = `
TVL
 $ ${numberWithCommas(Number(payload[0].payload.y.toFixed(0)))}
` diff --git a/src/components/DetailChart/ApexChart/index.js b/src/components/DetailChart/ApexChart/index.js index 9b3ddbc2..259f1feb 100644 --- a/src/components/DetailChart/ApexChart/index.js +++ b/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) @@ -480,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, diff --git a/src/components/DetailChart/FarmDetailChart/index.js b/src/components/DetailChart/FarmDetailChart/index.js index 25e48c18..cc973da4 100644 --- a/src/components/DetailChart/FarmDetailChart/index.js +++ b/src/components/DetailChart/FarmDetailChart/index.js @@ -5,7 +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 { numberWithCommas } from '../../../utilities/formats' +import { formatDate, numberWithCommas } from '../../../utilities/formats' import { useThemeContext } from '../../../providers/useThemeContext' import ApexChart from '../ApexChart' import ChartButtonsGroup from '../ChartButtonsGroup' @@ -23,30 +23,6 @@ import { LabelInfo, } 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}` -} - const filterList = [ { id: 1, name: 'APY', img: apyActive }, { id: 2, name: 'TVL in USD', img: tvlActive }, @@ -81,7 +57,7 @@ const FarmDetailChart = ({ token, vaultPool, lastTVL, lastAPY }) => { const handleTooltipContent = payload => { if (payload && payload.length) { - setCurDate(formatDateTime(payload[0].payload.x)) + setCurDate(formatDate(payload[0].payload.x)) const content = numberWithCommas( Number(payload[0].payload.y).toFixed( clickedId === 1 ? 2 : clickedId === 0 ? fixedLen : roundNumber, diff --git a/src/components/UserBalanceChart/ApexChart/index.js b/src/components/UserBalanceChart/ApexChart/index.js index 8e64da63..64520bba 100644 --- a/src/components/UserBalanceChart/ApexChart/index.js +++ b/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}`) diff --git a/src/components/UserBalanceChart/UserBalanceData/index.js b/src/components/UserBalanceChart/UserBalanceData/index.js index 24ceb9b9..11e0888a 100644 --- a/src/components/UserBalanceChart/UserBalanceData/index.js +++ b/src/components/UserBalanceChart/UserBalanceData/index.js @@ -3,7 +3,7 @@ import ApexChart from '../ApexChart' import ChartRangeSelect from '../ChartRangeSelect' import { useThemeContext } from '../../../providers/useThemeContext' import { useWallet } from '../../../providers/Wallet' -import { numberWithCommas } from '../../../utilities/formats' +import { formatDate, numberWithCommas } from '../../../utilities/formats' import { getPriceFeeds, getUserBalanceHistories } from '../../../utilities/apiCalls' import { ButtonGroup, @@ -25,30 +25,6 @@ const recommendLinks = [ { name: 'LAST', type: 4, state: 'LAST' }, ] -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}` -} - const UserBalanceData = ({ token, vaultPool, @@ -87,7 +63,7 @@ const UserBalanceData = ({ const handleTooltipContent = payload => { if (payload && payload.length) { - const currentDate = formatDateTime(payload[0].payload.x) + const currentDate = formatDate(payload[0].payload.x) const balance = numberWithCommas(Number(payload[0].payload.y).toFixed(fixedLen)) if (Number(payload[0].payload.y === 0)) { setCurContent('$0') diff --git a/src/utilities/formats.js b/src/utilities/formats.js index 3d139923..0d916083 100644 --- a/src/utilities/formats.js +++ b/src/utilities/formats.js @@ -313,3 +313,27 @@ export const numberWithCommas = x => { integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',') return integerPart + decimalPart } + +export const formatDate = 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}` +} From 7f4440eb4c53fff68f8159361022d659e2037e93 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 29 Apr 2024 23:20:59 +0900 Subject: [PATCH 5/9] Optimize code for 'formatDateTime' function --- .../EarningsHistory/ActionRow/index.js | 35 +------------------ src/utilities/formats.js | 34 ++++++++++++++++++ 2 files changed, 35 insertions(+), 34 deletions(-) diff --git a/src/components/EarningsHistory/ActionRow/index.js b/src/components/EarningsHistory/ActionRow/index.js index 77763f67..1fe0192e 100644 --- a/src/components/EarningsHistory/ActionRow/index.js +++ b/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}
${month} ${day}, ${year}` } -} - const ActionRow = ({ info, tokenSymbol }) => { const isMobile = useMediaQuery({ query: '(max-width: 992px)' }) const { diff --git a/src/utilities/formats.js b/src/utilities/formats.js index 0d916083..d85e0f9f 100644 --- a/src/utilities/formats.js +++ b/src/utilities/formats.js @@ -337,3 +337,37 @@ export const formatDate = value => { return `${month} ${day} ${year}` } + +export const 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}
${month} ${day}, ${year}` } +} From 2a283f4cd456c2c24b9c8e7832dc2bcbd4fd8058 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 29 Apr 2024 23:40:19 +0900 Subject: [PATCH 6/9] Fix decimal issue of amount 'CountUp' in 'Rewards' tab --- src/components/Counter.js | 6 +++--- src/components/CounterUsdPrice.js | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 0a6d73ea..487d4895 100644 --- a/src/components/Counter.js +++ b/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" diff --git a/src/components/CounterUsdPrice.js b/src/components/CounterUsdPrice.js index 13a3d12c..07dc21f1 100644 --- a/src/components/CounterUsdPrice.js +++ b/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' From 55c448c634b0926a9bea3adf4fd261549894f0de Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 29 Apr 2024 23:53:13 +0900 Subject: [PATCH 7/9] Fix state update issue on unmounted 'Detail chart' component --- .../DetailChart/FarmDetailChart/index.js | 33 ++++++++++++------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/DetailChart/FarmDetailChart/index.js b/src/components/DetailChart/FarmDetailChart/index.js index cc973da4..2184c21f 100644 --- a/src/components/DetailChart/FarmDetailChart/index.js +++ b/src/components/DetailChart/FarmDetailChart/index.js @@ -73,25 +73,36 @@ const FarmDetailChart = ({ token, vaultPool, lastTVL, lastAPY }) => { }, [clickedId]) useEffect(() => { + let isMounted = true const initData = async () => { if (address && chainId && account) { - const data = await getDataQuery(365, address, chainId, account) - const updatedData = { ...data } - updatedData.vaultHistories = updatedData.vaultHistories.filter( - history => history.sharePrice !== '0', - ) - setApiData(updatedData) - if (isIFARM && updatedData) { - data.apyRewards = updatedData.apyRewards - data.tvls = updatedData.tvls + 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() + + return () => { + isMounted = false + } }, [address, chainId, account, isIFARM]) return ( From 95e38c10a4727bb46062f6ad276deb6b8d03e87a Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 29 Apr 2024 23:53:20 +0900 Subject: [PATCH 8/9] Fix state update issue on unmounted 'Balance chart' component --- .../UserBalanceChart/UserBalanceData/index.js | 245 +++++++++--------- 1 file changed, 128 insertions(+), 117 deletions(-) diff --git a/src/components/UserBalanceChart/UserBalanceData/index.js b/src/components/UserBalanceChart/UserBalanceData/index.js index 11e0888a..a9c4a9cb 100644 --- a/src/components/UserBalanceChart/UserBalanceData/index.js +++ b/src/components/UserBalanceChart/UserBalanceData/index.js @@ -96,148 +96,159 @@ const UserBalanceData = ({ } useEffect(() => { + let isMounted = true const initData = async () => { if (account && address && chainId && pricePerFullShare && totalValue) { - const uniqueData2 = [] - const timestamps = [] - const mergedData = [] - let priceFeedData, priceFeedFlag + try { + const uniqueData2 = [] + const timestamps = [] + const mergedData = [] + let priceFeedData, priceFeedFlag - const { balanceData, balanceFlag } = await getUserBalanceHistories( - address, - chainId, - account, - ) - if (balanceFlag) { - const firstTimeStamp = balanceData[balanceData.length - 1].timestamp - const result = await getPriceFeeds(address, chainId, firstTimeStamp, false) - priceFeedData = result.priceFeedData - priceFeedFlag = result.priceFeedFlag - } - - if (priceFeedFlag) { - priceFeedData.forEach(obj => { - if (!timestamps.includes(obj.timestamp)) { - timestamps.push(obj.timestamp) - const modifiedObj = { ...obj, priceUnderlying: obj.price } // Rename the 'price' property to 'priceUnderlying' - delete modifiedObj.price // Remove the 'value' property from modifiedObj - uniqueData2.push(modifiedObj) - } - }) - } - - if (balanceFlag) { - const lastMatchingTimestamp = findLastMatchingTimestamp(balanceData) - setLastFarmingTimeStamp(lastMatchingTimestamp) - } + const { balanceData, balanceFlag } = await getUserBalanceHistories( + address, + chainId, + account, + ) + if (balanceFlag) { + const firstTimeStamp = balanceData[balanceData.length - 1].timestamp + const result = await getPriceFeeds(address, chainId, firstTimeStamp, false) + priceFeedData = result.priceFeedData + priceFeedFlag = result.priceFeedFlag + } - if (balanceFlag && priceFeedFlag) { - const nowDate = new Date() - const currentTimeStamp = Math.floor(nowDate.getTime() / 1000) + if (priceFeedFlag) { + priceFeedData.forEach(obj => { + if (!timestamps.includes(obj.timestamp)) { + timestamps.push(obj.timestamp) + const modifiedObj = { ...obj, priceUnderlying: obj.price } // Rename the 'price' property to 'priceUnderlying' + delete modifiedObj.price // Remove the 'value' property from modifiedObj + uniqueData2.push(modifiedObj) + } + }) + } - if (balanceData[0].timestamp > uniqueData2[0].timestamp) { - let i = 0, - z = 0, - addFlag = false + if (balanceFlag) { + const lastMatchingTimestamp = findLastMatchingTimestamp(balanceData) + setLastFarmingTimeStamp(lastMatchingTimestamp) + } - while (balanceData[i]?.timestamp > uniqueData2[0].timestamp) { - balanceData[i].priceUnderlying = uniqueData2[0].priceUnderlying - balanceData[i].sharePrice = uniqueData2[0].sharePrice - mergedData.push(balanceData[i]) - i += 1 - } - while (i < balanceData.length) { - if (z < uniqueData2.length) { - while (uniqueData2[z].timestamp >= balanceData[i].timestamp) { - uniqueData2[z].value = balanceData[i].value - mergedData.push(uniqueData2[z]) - z += 1 - if (!addFlag && uniqueData2[z].timestamp === balanceData[i].timestamp) { - addFlag = true + if (balanceFlag && priceFeedFlag) { + const nowDate = new Date() + const currentTimeStamp = Math.floor(nowDate.getTime() / 1000) + + if (balanceData[0].timestamp > uniqueData2[0].timestamp) { + let i = 0, + z = 0, + addFlag = false + + while (balanceData[i]?.timestamp > uniqueData2[0].timestamp) { + balanceData[i].priceUnderlying = uniqueData2[0].priceUnderlying + balanceData[i].sharePrice = uniqueData2[0].sharePrice + mergedData.push(balanceData[i]) + i += 1 + } + while (i < balanceData.length) { + if (z < uniqueData2.length) { + while (uniqueData2[z].timestamp >= balanceData[i].timestamp) { + uniqueData2[z].value = balanceData[i].value + mergedData.push(uniqueData2[z]) + z += 1 + if (!addFlag && uniqueData2[z].timestamp === balanceData[i].timestamp) { + addFlag = true + } } } + if (!addFlag) { + balanceData[i].priceUnderlying = + uniqueData2[z === uniqueData2.length ? z - 1 : z].priceUnderlying + balanceData[i].sharePrice = + uniqueData2[z === uniqueData2.length ? z - 1 : z].sharePrice + mergedData.push(balanceData[i]) + } + addFlag = false + i += 1 } - if (!addFlag) { - balanceData[i].priceUnderlying = - uniqueData2[z === uniqueData2.length ? z - 1 : z].priceUnderlying - balanceData[i].sharePrice = - uniqueData2[z === uniqueData2.length ? z - 1 : z].sharePrice + while (z < uniqueData2.length) { + uniqueData2[z].value = 0 + mergedData.push(uniqueData2[z]) + z += 1 + } + while (i < balanceData.length) { + balanceData[i].priceUnderlying = uniqueData2[uniqueData2.length - 1].priceUnderlying + balanceData[i].sharePrice = uniqueData2[uniqueData2.length - 1].sharePrice mergedData.push(balanceData[i]) + i += 1 } - addFlag = false - i += 1 - } - while (z < uniqueData2.length) { - uniqueData2[z].value = 0 - mergedData.push(uniqueData2[z]) - z += 1 - } - while (i < balanceData.length) { - balanceData[i].priceUnderlying = uniqueData2[uniqueData2.length - 1].priceUnderlying - balanceData[i].sharePrice = uniqueData2[uniqueData2.length - 1].sharePrice - mergedData.push(balanceData[i]) - i += 1 - } - } else { - let i = 0, - z = 0, - addFlag = false - while (i < uniqueData2.length && uniqueData2[i].timestamp > balanceData[0].timestamp) { - uniqueData2[i].value = balanceData[0].value - mergedData.push(uniqueData2[i]) - i += 1 - } - while (z < balanceData.length) { - if (i < uniqueData2.length) { - while (uniqueData2[i].timestamp >= balanceData[z].timestamp) { - uniqueData2[i].value = balanceData[z].value - mergedData.push(uniqueData2[i]) - i += 1 - if (i >= uniqueData2.length) { - break - } - if (!addFlag && uniqueData2[i].timestamp === balanceData[z].timestamp) { - addFlag = true + } else { + let i = 0, + z = 0, + addFlag = false + while (i < uniqueData2.length && uniqueData2[i].timestamp > balanceData[0].timestamp) { + uniqueData2[i].value = balanceData[0].value + mergedData.push(uniqueData2[i]) + i += 1 + } + while (z < balanceData.length) { + if (i < uniqueData2.length) { + while (uniqueData2[i].timestamp >= balanceData[z].timestamp) { + uniqueData2[i].value = balanceData[z].value + mergedData.push(uniqueData2[i]) + i += 1 + if (i >= uniqueData2.length) { + break + } + if (!addFlag && uniqueData2[i].timestamp === balanceData[z].timestamp) { + addFlag = true + } } } + if (!addFlag) { + balanceData[z].priceUnderlying = + uniqueData2[i === uniqueData2.length ? i - 1 : i].priceUnderlying + balanceData[z].sharePrice = + uniqueData2[i === uniqueData2.length ? i - 1 : i].sharePrice + mergedData.push(balanceData[z]) + } + addFlag = false + z += 1 + } + while (i < uniqueData2.length) { + uniqueData2[i].value = 0 + mergedData.push(uniqueData2[i]) + i += 1 } - if (!addFlag) { - balanceData[z].priceUnderlying = - uniqueData2[i === uniqueData2.length ? i - 1 : i].priceUnderlying - balanceData[z].sharePrice = - uniqueData2[i === uniqueData2.length ? i - 1 : i].sharePrice + while (z < balanceData.length) { + balanceData[z].priceUnderlying = uniqueData2[uniqueData2.length - 1].priceUnderlying + balanceData[z].sharePrice = uniqueData2[uniqueData2.length - 1].sharePrice mergedData.push(balanceData[z]) + z += 1 } - addFlag = false - z += 1 - } - while (i < uniqueData2.length) { - uniqueData2[i].value = 0 - mergedData.push(uniqueData2[i]) - i += 1 } - while (z < balanceData.length) { - balanceData[z].priceUnderlying = uniqueData2[uniqueData2.length - 1].priceUnderlying - balanceData[z].sharePrice = uniqueData2[uniqueData2.length - 1].sharePrice - mergedData.push(balanceData[z]) - z += 1 + + const firstObject = { + priceUnderlying: useIFARM ? farmPriceRef.current : usdPriceRef.current, + sharePrice: pricePerFullShareRef.current, + timestamp: currentTimeStamp, + value: totalValueRef.current, } + const apiAllData = [firstObject, ...mergedData] + setApiData(apiAllData) } - - const firstObject = { - priceUnderlying: useIFARM ? farmPriceRef.current : usdPriceRef.current, - sharePrice: pricePerFullShareRef.current, - timestamp: currentTimeStamp, - value: totalValueRef.current, + if (isMounted) { + setLoadComplete(balanceFlag && priceFeedFlag) } - const apiAllData = [firstObject, ...mergedData] - setApiData(apiAllData) - setLoadComplete(balanceFlag && priceFeedFlag) + } catch (error) { + console.log('An error ocurred', error) } } } initData() + + return () => { + isMounted = false + } }, [ address, chainId, From e67e069cc878fb3e406981d8fa3002553bec63a9 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 30 Apr 2024 01:48:07 +0900 Subject: [PATCH 9/9] Fix eslint issue --- .../UserBalanceChart/UserBalanceData/index.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/UserBalanceChart/UserBalanceData/index.js b/src/components/UserBalanceChart/UserBalanceData/index.js index a9c4a9cb..a7ee44fd 100644 --- a/src/components/UserBalanceChart/UserBalanceData/index.js +++ b/src/components/UserBalanceChart/UserBalanceData/index.js @@ -136,12 +136,12 @@ const UserBalanceData = ({ if (balanceFlag && priceFeedFlag) { const nowDate = new Date() const currentTimeStamp = Math.floor(nowDate.getTime() / 1000) - + if (balanceData[0].timestamp > uniqueData2[0].timestamp) { let i = 0, z = 0, addFlag = false - + while (balanceData[i]?.timestamp > uniqueData2[0].timestamp) { balanceData[i].priceUnderlying = uniqueData2[0].priceUnderlying balanceData[i].sharePrice = uniqueData2[0].sharePrice @@ -184,7 +184,10 @@ const UserBalanceData = ({ let i = 0, z = 0, addFlag = false - while (i < uniqueData2.length && uniqueData2[i].timestamp > balanceData[0].timestamp) { + while ( + i < uniqueData2.length && + uniqueData2[i].timestamp > balanceData[0].timestamp + ) { uniqueData2[i].value = balanceData[0].value mergedData.push(uniqueData2[i]) i += 1 @@ -225,7 +228,7 @@ const UserBalanceData = ({ z += 1 } } - + const firstObject = { priceUnderlying: useIFARM ? farmPriceRef.current : usdPriceRef.current, sharePrice: pricePerFullShareRef.current,