fix: make sure every duration has latest price point (#4832)

* make every duration have latest price point

* simplify

* fix info tip icon regression

* remove unecessary line

* use memo

src/components/Tokens/TokenDetails/ChartSection.tsx

@@ -6,11 +6,12 @@ import { VerifiedIcon } from 'components/TokenSafety/TokenSafetyIcon'
 import { getChainInfo } from 'constants/chainInfo'
 import { checkWarning } from 'constants/tokenSafety'
 import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
-import { PriceDurations, SingleTokenData } from 'graphql/data/Token'
+import { PriceDurations, PricePoint, SingleTokenData } from 'graphql/data/Token'
 import { TopToken } from 'graphql/data/TopTokens'
-import { CHAIN_NAME_TO_CHAIN_ID } from 'graphql/data/util'
+import { CHAIN_NAME_TO_CHAIN_ID, TimePeriod } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
 import useCurrencyLogoURIs, { getTokenLogoURI } from 'lib/hooks/useCurrencyLogoURIs'
+import { useMemo } from 'react'
 import styled from 'styled-components/macro'
 import { textFadeIn } from 'theme/animations'
 import { isAddress } from 'utils'
@@ -87,6 +88,26 @@ export default function ChartSection({
 
   const logoSrc = useTokenLogoURI(token, nativeCurrency)
 
+  // Backend doesn't always return latest price point for every duration.
+  // Thus we need to manually determine latest price point available, and
+  // append it to the prices list for every duration.
+  useMemo(() => {
+    let latestPricePoint: PricePoint = { value: 0, timestamp: 0 }
+    let latestPricePointTimePeriod: TimePeriod
+    Object.keys(prices).forEach((key) => {
+      const latestPricePointForTimePeriod = prices[key as unknown as TimePeriod]?.slice(-1)[0]
+      if (latestPricePointForTimePeriod && latestPricePointForTimePeriod.timestamp > latestPricePoint.timestamp) {
+        latestPricePoint = latestPricePointForTimePeriod
+        latestPricePointTimePeriod = key as unknown as TimePeriod
+      }
+    })
+    Object.keys(prices).forEach((key) => {
+      if ((key as unknown as TimePeriod) !== latestPricePointTimePeriod) {
+        prices[key as unknown as TimePeriod]?.push(latestPricePoint)
+      }
+    })
+  }, [prices])
+
   return (
     <ChartHeader>
       <TokenInfoContainer>