fix: load correct initial display price and % delta w/o need for scru…

…bbing on token detail chart (Uniswap#4651)

* remove console logs

* fix in response to comments

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -10,7 +10,7 @@ import { useTokenPricesCached } from 'graphql/data/Token'
 import { PricePoint, TimePeriod } from 'graphql/data/Token'
 import { useActiveLocale } from 'hooks/useActiveLocale'
 import { useAtom } from 'jotai'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ArrowDownRight, ArrowUpRight } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
 import {
@@ -133,9 +133,18 @@ export function PriceChart({ width, height, tokenAddress, priceData }: PriceChar
   const { priceMap } = useTokenPricesCached(priceData, tokenAddress, 'ETHEREUM', timePeriod)
   const prices = priceMap.get(timePeriod)
 
+  // first price point on the x-axis of the current time period's chart
   const startingPrice = prices?.[0] ?? DATA_EMPTY
+  // last price point on the x-axis of the current time period's chart
   const endingPrice = prices?.[prices.length - 1] ?? DATA_EMPTY
   const [displayPrice, setDisplayPrice] = useState(startingPrice)
+
+  // set display price to ending price when prices have changed.
+  useEffect(() => {
+    if (prices) {
+      setDisplayPrice(endingPrice)
+    }
+  }, [prices, endingPrice])
   const [crosshair, setCrosshair] = useState<number | null>(null)
 
   const graphWidth = width + crosshairDateOverhang