[Release] - Range Price Improvements

src/views/Range/RangeChart.tsx

@@ -71,11 +71,20 @@ const RangeChart = (props: {
   /* We load an object at the front of the chartData array
    * with no price data to shift the chart line left and add an extra element with current market price
    */
-  chartData.unshift({
-    uv: [formattedWallHigh, formattedCushionHigh],
-    lv: [formattedWallLow, formattedCushionLow],
-    ma: targetPrice,
-  });
+  chartData.unshift(
+    {
+      uv: [formattedWallHigh, formattedCushionHigh],
+      lv: [formattedWallLow, formattedCushionLow],
+      ma: targetPrice,
+    },
+    {
+      price: currentPrice,
+      timestamp: "now",
+      uv: [formattedWallHigh, formattedCushionHigh],
+      lv: [formattedWallLow, formattedCushionLow],
+      ma: targetPrice,
+    },
+  );
 
   const CustomReferenceDot = (props: {
     cx: string | number | undefined;

src/views/Range/hooks.tsx

@@ -33,22 +33,21 @@ export const PriceHistory = () => {
     const contract = RANGE_PRICE_CONTRACT.getEthersContract(networks.MAINNET);
     const lastObservationIndex = await contract.nextObsIndex();
     const secondsToSubtract = await contract.observationFrequency();
-    const totalObservations = lastObservationIndex < 10 ? lastObservationIndex : 10;
     let currentDate = new Date(); // Start with the current date
     const resultsArray: {
       price: number;
       timestamp: string;
     }[] = [];
 
-    for (let i = 0; i < totalObservations; i++) {
-      const observation = lastObservationIndex - i;
+    for (let i = 1; i < 10; i++) {
+      const observation = (lastObservationIndex - i + 90) % 90;
       if (i > 0) {
         currentDate = new Date(currentDate.getTime() - secondsToSubtract * 1000);
       }
       const datapoint = await contract.observations(observation);
       const resultObject = {
         price: parseFloat(formatEther(datapoint)),
-        timestamp: i === 0 ? "now" : currentDate.toLocaleString(),
+        timestamp: currentDate.toLocaleString(),
       };
       resultsArray.push(resultObject);
     }
@@ -72,6 +71,16 @@ export const OperatorPrice = () => {
   return { data, isFetched, isLoading };
 };
 
+export const LastSnapshotPrice = () => {
+  const networks = useTestableNetworks();
+
+  const contract = RANGE_PRICE_CONTRACT.getEthersContract(networks.MAINNET);
+  const { data, isFetched, isLoading } = useQuery(["getLastSnapshotPrice", networks.MAINNET], async () => {
+    return parseBigNumber(await contract.getLastPrice(), 18);
+  });
+  return { data, isFetched, isLoading };
+};
+
 /**
  * Returns the Target price of the Operator at the given address
  */

src/views/Range/index.tsx

@@ -23,6 +23,7 @@ import { usePathForNetwork } from "src/hooks/usePathForNetwork";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import {
   DetermineRangePrice,
+  LastSnapshotPrice,
   OperatorPrice,
   OperatorReserveSymbol,
   RangeBondMaxPayout,
@@ -61,6 +62,7 @@ export const Range = () => {
   const { data: ohmBalance = new DecimalBigNumber("0", 9) } = useBalance(OHM_ADDRESSES)[networks.MAINNET];
 
   const { data: currentPrice } = OperatorPrice();
+  const { data: lastPrice } = LastSnapshotPrice();
   const { data: currentMarketPrices } = useGetDefillamaPrice({
     addresses: [DAI_ADDRESSES[1], OHM_ADDRESSES[1]],
   });
@@ -172,7 +174,7 @@ export const Range = () => {
         }
       />
       <Paper sx={{ width: "98%" }}>
-        {currentPrice ? (
+        {currentPrice && lastPrice ? (
           <>
             <Metric
               label="Market Price"
@@ -199,7 +201,7 @@ export const Range = () => {
                       title="Last Snapshot Price"
                       balance={
                         <Box display="flex" alignItems="center">
-                          {formatNumber(currentPrice, 2)} {reserveSymbol}
+                          {formatNumber(lastPrice, 2)} {reserveSymbol}
                           <Box display="flex" fontSize="12px" alignItems="center">
                             <InfoTooltip
                               message={`Snapshot Price is returned from price feed connected to RBS Operator. The current price feed is Chainlink, which updates price if there's a 2% deviation or 24 hours, whichever comes first. The Snapshot Price is used by RBS Operator to turn on/off bond markets.`}