Merge pull request #57 from the-standard/202412-yields

202412 yields
the-standard · Dec 11, 2024 · f98764e · f98764e
2 parents 61dc528 + ff59333
commit f98764e
Show file tree

Hide file tree

Showing 5 changed files with 252 additions and 234 deletions.
diff --git a/src/components/vault/yield/PoolChart.jsx b/src/components/vault/yield/PoolChart.jsx
@@ -1,184 +1,126 @@
 import { useState, useEffect } from "react";
 import ReactApexChart from "react-apexcharts";
+import moment from 'moment';
+
+import {
+  useLocalThemeModeStore,
+} from "../../../store/Store";
+
+const YieldPoolChart = ({ hypervisorData, yieldPair }) => {
+  const { localThemeModeStore } = useLocalThemeModeStore();
+  const isLight = localThemeModeStore && localThemeModeStore.includes('light');
 
-const YieldPoolChart = ({ data, symbol }) => {
   const [chartWidth, setChartWidth] = useState(200);
   const [chartHeight, setChartHeight] = useState(60);
   const [lineColor, setLineColor] = useState("green");
 
-  let convertedData = [];
-  if (data && data.length) {
-    convertedData = data.map(({ ts, price }) => [ts * 1000, price]);
-  }
-
   const series = [
     {
-      name: symbol,
-      data: convertedData,
+      name: 'Position',
+      data: hypervisorData?.map(item => item.period_gamma_netApr)
+    },
+    {
+      name: `If Held ${yieldPair[0] || ''}`,
+      data: hypervisorData?.map(item => item.period_hodl_token0)
+    },
+    {
+      name: `If Held ${yieldPair[1] || ''}`,
+      data: hypervisorData?.map(item => item.period_hodl_token1)
     },
   ];
 
-  function formatNumber(value) {
-    const formattedValue = (value / 100).toString();
-    const indexOfDot = formattedValue.length - 2;
-    const finalValue =
-      formattedValue.slice(0, indexOfDot) + formattedValue.slice(indexOfDot);
-
-    return finalValue;
-  }
-
-  const renderColor = () => {
-    if (convertedData && convertedData.length) {
-      if (
-        Number(convertedData[convertedData.length - 1][1]) >
-        Number(convertedData[0][1])
-      ) {
-        setLineColor("green");
-      } else if (
-        Number(convertedData[convertedData.length - 1][1]) <
-        Number(convertedData[0][1])
-      ) {
-        setLineColor("red");
-      }  
-    }
-  };
-
-  useEffect(() => {
-    renderColor();
-  }, [convertedData]);
+  const xAxis = hypervisorData?.map((item) => {
+    // const formattedDate = moment.unix(Number(item.timestamp)).format('MMM DD');
+    return item.timestamp;
+  });
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.matchMedia("(max-width: 900px)").matches) {
-        setChartWidth(120);
-        // setChartHeight(60);
-      } else if (window.matchMedia("(max-width: 1400px)").matches) {
-        setChartWidth(120);
-        // setChartHeight(80);
-      } else {
-        setChartWidth(150);
-        // setChartHeight(80);
-      }
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize); 
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
-  if (!data || data.length === 0) {
-    return null;
-  }
+  const dataColors = [
+    '#facc15',
+    '#22d3ee',
+    '#a855f7',
+  ];
 
   return (
     <div id="chart">
       <ReactApexChart
         options={{
           chart: {
-            type: "area",
-            stacked: false,
-            sparkline: {
-              enabled: true,
-            },    
-            toolbar: {
-              show: false,
-            },
+            type: "line",
             zoom: {
               enabled: false,
             },
-          },
-          noData: {
-            text: 'No Data',
-            align: 'center',
-            verticalAlign: 'middle',
-            offsetX: 0,
-            offsetY: -20,
-            style: {
-              color: 'white',
-              fontSize: '14px',
-            }
+            foreColor: isLight ? ('#000') : ('#fff'),
+            toolbar: {
+              show: false
+            },
           },
           dataLabels: {
             enabled: false,
           },
-          colors: [lineColor],
+          colors: dataColors,
           fill: {
-            type: "gradient",
-            opacity: 1,
-            gradient: {
-              shadeIntensity: 1,
-              type: "vertical",
-              colorStops: [
-                {
-                  offset: 0,
-                  color: lineColor,
-                  opacity: 0.3,
-                },
-                {
-                  offset: 100,
-                  color: lineColor,
-                  opacity: 0,
-                },
-              ],
-            },
+            type: "none",
+            opacity: 0,
+          },
+          stroke: {
+            curve: "straight",
+            width: 2,
           },
           grid: {
             show: false,
           },
           yaxis: {
             show: true,
-            // forceNiceScale: true,
+            forceNiceScale: true,
             labels: {
-              show: false,
+              show: true,
+              formatter: function (value) {
+                const useVal = value.toFixed(2);
+                return useVal + '%'
+              },  
             },
           },
-          stroke: {
-            show: true,
-            curve: "smooth",
-            lineCap: "butt",
-            colors: undefined,
-            width: 2,
-            dashArray: 0,
-          },
           xaxis: {
-            type: "datetime",
-            labels: {
-              show: false,
-            },
-            axisBorder: {
-              show: false,
+            categories: xAxis,
+            tooltip: {
+              enabled: false,
             },
             axisTicks: {
               show: false,
             },
+            tickAmount: 4,
+            labels: {
+              formatter: function (value) {
+                const useDate = moment.unix(value).format('MMM DD');
+                return useDate
+              },
+            }
           },
           tooltip: {
             enabled: true,
-            shared: false,
-            theme: 'dark',
+            followCursor: true,
+            shared: true,
+            theme: isLight ? ('light') : ('dark'),
             x: {
-              show: false,
-              formatter: (value) => {
-                const lang = navigator?.language || 'en-US';
-                return new Date(value).toLocaleString(lang, {dateStyle: 'short', timeStyle: 'short'});
-              }
+              show: true,
+              formatter: function (value, { w }) {
+                const useDate = moment.unix(xAxis[value - 1]).format('Do MMM YYYY');
+                return useDate
+              },
             },
             y: {
               formatter: function (val) {
-                const dollarSign = new Intl.NumberFormat("en-US", {
-                  style: "currency",
-                  currency: "USD",
-                }).format(0)[0];
-                return dollarSign + formatNumber((val / 1000000).toFixed(0));
+                if (val >= 0) {
+                  return ('+' + val.toFixed(3) + '%');
+                } else {
+                  return (val.toFixed(3) + '%');
+                }
               },
             },
           },
         }}
         series={series}
         type="area"
-        height={chartHeight}
-        width={chartWidth}
       />
     </div>
   );

diff --git a/src/components/vault/yield/YieldGammaVaults.jsx b/src/components/vault/yield/YieldGammaVaults.jsx
@@ -135,45 +135,55 @@ export const SepoliaVaults = [
 export const ArbitrumGammaVaults = [
   {
     pair: ['USDs', 'USDC'],
-    address: '0x547a116a2622876ce1c8d19d41c683c8f7bec5c0',
+    address: '0x547A116a2622876cE1C8d19d41c683C8f7BeC5c0',
+    pool: '0x8DEF4Db6697F4885bA4a3f75e9AdB3cEFCca6D6E',
   },
   {
     pair: ['WETH', 'WBTC'],
     address: '0x52ee1FFBA696c5E9b0Bc177A9f8a3098420EA691',
+    pool: '0x149e36E72726e0BceA5c59d40df2c43F60f5A22D',
   },
   {
-    pair: ['ARB', 'WETH'],
+    pair: ['WETH', 'ARB'],
     address: '0x330DFC5Bc1a63A1dCf1cD5bc9aD3D5e5E61Bcb6C',
+    pool: '0xC6F780497A95e246EB9449f5e4770916DCd6396A',
   },
   {
     pair: ['LINK', 'WETH'],
     address: '0xfA392dbefd2d5ec891eF5aEB87397A89843a8260',
+    pool: '0x468b88941e7Cc0B88c1869d68ab6b570bCEF62Ff',
   },
   {
     pair: ['GMX', 'WETH'],
-    address: '0xf08bdbc590c59cb7b27a8d224e419ef058952b5f',
+    address: '0xF08BDBC590C59cb7B27A8D224E419ef058952b5f',
+    pool: '0x1aEEdD3727A6431b8F070C0aFaA81Cc74f273882',
   },
   {
     pair: ['RDNT', 'WETH'],
-    address: '0x2bcbdd577616357464cfe307bc67f9e820a66e80',
+    address: '0x2BCBDD577616357464CFe307Bc67F9e820A66e80',
+    pool: '0x446BF9748B4eA044dd759d9B9311C70491dF8F29',
   },
 ];
 
 export const SepoliaGammaVaults = [
   {
     pair: ['USDs', 'USDC'],
-    address: '0xc5B84d2f09094f72B79FE906d21c933c2DF27448'
+    address: '0xc5B84d2f09094f72B79FE906d21c933c2DF27448',
+    pool: '',
   },
   {
     pair: ['WETH', 'WBTC'],
     address: '0x5983C0811239ab91fB8dc72D7414257Dd8a27699',
+    pool: '',
   },
   {
     pair: ['USDs6', 'WETH'],
     address: '0xc82B4793564719b55AA645c45AD9ee0Fa574E07D',
+    pool: '',
   },
   {
     pair: ['USDs18', 'WETH'],
     address: '0x0881d58b146208230D720656320624c386661795',
+    pool: '',
   },
 ]