Merge pull request #256 from stabilitydao/4-vault

UI KIT: new loader + vault page updates
stabilitydao · Oct 9, 2024 · 08d3e0d · 08d3e0d
2 parents 7915683 + 611d255
commit 08d3e0d
Show file tree

Hide file tree

Showing 17 changed files with 191 additions and 124 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.12.15-alpha",
+  "version": "0.12.16-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -432,4 +432,15 @@ const {
    input[type="checkbox"]:checked::before {
         opacity: 1;
     }
+
+	/* Loader fade */
+	@keyframes fade {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.3;
+        }
+    }
 </style>
diff --git a/src/modules/CreateVault/BuildForm.tsx b/src/modules/CreateVault/BuildForm.tsx
@@ -74,13 +74,11 @@ const BuildForm = ({
   const BRT = [
     ...new Set([initParams.initVaultAddresses[0], ...defaultBoostTokens]),
   ].map((addr) => ({
-    symbol: tokenlist.tokens.find((token: TTokenData) => token.address === addr)
-      ?.symbol,
+    symbol: tokenlist.tokens.find((token) => token.address === addr)?.symbol,
     address: addr,
     balance: formatUnits(
       $assetsBalances[$currentChainID]?.[addr] || ZERO_BigInt,
-      tokenlist.tokens.find((token: TTokenData) => token.address === addr)
-        ?.decimals ?? 18
+      tokenlist.tokens.find((token) => token.address === addr)?.decimals ?? 18
     ),
     price: $assetsPrices[$currentChainID][addr]?.price,
     sum: "",

diff --git a/src/modules/Users/index.tsx b/src/modules/Users/index.tsx
@@ -48,7 +48,7 @@ const Users = (): JSX.Element => {
           </tbody>
         </table>
       ) : (
-        <span>Loading</span>
+        <span>Loading...</span>
       )}
     </div>
   );

diff --git a/src/modules/Vault/components/Contracts.tsx b/src/modules/Vault/components/Contracts.tsx
@@ -139,6 +139,7 @@ const Contracts: React.FC<IProps> = memo(({ vault, network }) => {
     () => vault.strategy === "Yearn",
     [vault.strategy]
   );
+
   const explorer = useMemo(
     () => CHAINS.find((chain) => chain.id === network)?.explorer,
     [network]
@@ -148,7 +149,7 @@ const Contracts: React.FC<IProps> = memo(({ vault, network }) => {
     <div className="rounded-md h-full">
       <HeadingText text="Contracts" scale={2} styles="text-left md:mb-0 mb-2" />
 
-      <table className="w-full mx-auto lg:max-w-[500px] text-[16px]">
+      <table className="w-full lg:max-w-[500px] text-[16px]">
         <tbody>
           {contracts.map(
             ({ address, logo, symbol, type, isCopy }, index: number) => (

diff --git a/src/modules/Vault/components/HistoricalRate/ChartBar.tsx b/src/modules/Vault/components/HistoricalRate/ChartBar.tsx
@@ -81,6 +81,7 @@ const ChartBar: React.FC<IProps> = ({ chart, APRType }) => {
       );
     }
   }, [chart]);
+  // B2A5FD
   return (
     <ResponsiveContainer width="100%" height={260}>
       <BarChart
@@ -118,7 +119,7 @@ const ChartBar: React.FC<IProps> = ({ chart, APRType }) => {
               cursor="pointer"
               fill="#612FFB"
               key={`cell-${index}`}
-              radius={[10, 10, 0, 0]}
+              radius={[10, 10, 0, 0] as any}
             />
           ))}
         </Bar>

diff --git a/src/modules/Vault/components/HistoricalRate/index.tsx b/src/modules/Vault/components/HistoricalRate/index.tsx
@@ -1,6 +1,6 @@
 import { memo, useState, useEffect } from "react";
 
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 
 import { Chart } from "./Chart";
 import { ChartBar } from "./ChartBar";
@@ -49,6 +49,11 @@ const HistoricalRate: React.FC<IProps> = memo(
       timelineSegments.WEEK as TSegment
     );
     const [isData, setIsData] = useState(true);
+    const [graphError, setGraphError] = useState({
+      isError: false,
+      httpStatus: "",
+      errorMessage: "",
+    });
 
     const formatData = (obj: TChartData) => {
       const date = new Date(Number(obj.timestamp) * 1000);
@@ -81,86 +86,106 @@ const HistoricalRate: React.FC<IProps> = memo(
       let entities = 0;
       let status = true;
 
-      while (status) {
-        const HISTORY_QUERY = `{
-            vaultHistoryEntities(
-              orderBy: timestamp, 
-              orderDirection: asc,
-              where: {address: "${address}", periodVsHoldAPR_not: null}
-              skip: ${entities}
-            ) {
-                APR
-                APR24H
-                periodVsHoldAPR
-                address
-                sharePrice
-                TVL
-                timestamp
-            }}`;
+      try {
+        while (status) {
+          const HISTORY_QUERY = `{
+              vaultHistoryEntities(
+                orderBy: timestamp, 
+                orderDirection: asc,
+                where: {address: "${address}", periodVsHoldAPR_not: null}
+                skip: ${entities}
+              ) {
+                  APR
+                  APR24H
+                  periodVsHoldAPR
+                  address
+                  sharePrice
+                  TVL
+                  timestamp
+              }}`;
+
+          const graphResponse = await axios.post(GRAPH_ENDPOINTS[network], {
+            query: HISTORY_QUERY,
+          });
 
-        const graphResponse = await axios.post(GRAPH_ENDPOINTS[network], {
-          query: HISTORY_QUERY,
-        });
+          DATA.push(...graphResponse.data.data.vaultHistoryEntities);
 
-        DATA.push(...graphResponse.data.data.vaultHistoryEntities);
+          if (graphResponse.data.data.vaultHistoryEntities.length < 100) {
+            status = false;
+          }
+          entities += 100;
+        }
 
-        if (graphResponse.data.data.vaultHistoryEntities.length < 100) {
-          status = false;
+        const workedData = DATA.map(formatData);
+
+        let APRChartData = workedData
+          .filter(
+            (obj) =>
+              obj.APR && obj.unixTimestamp >= NOW - TIMESTAMPS_IN_SECONDS.WEEK
+          )
+          .map((obj) => ({
+            unixTimestamp: obj.unixTimestamp,
+            timestamp: obj.timestamp,
+            date: obj.date,
+            APR: formatFromBigInt(obj.APR, 3, "withDecimals"),
+            APR24H: obj.APR24H,
+            vsHoldAPR: Number(obj.periodVsHoldAPR).toFixed(3),
+          }));
+
+        if (!APRChartData.length) {
+          setIsData(false);
+          return;
         }
-        entities += 100;
-      }
+        const lastTimestamp =
+          APRChartData[APRChartData.length - 1].unixTimestamp;
 
-      const workedData = DATA.map(formatData);
-
-      let APRChartData = workedData
-        .filter(
-          (obj) =>
-            obj.APR && obj.unixTimestamp >= NOW - TIMESTAMPS_IN_SECONDS.WEEK
-        )
-        .map((obj) => ({
-          unixTimestamp: obj.unixTimestamp,
-          timestamp: obj.timestamp,
-          date: obj.date,
-          APR: formatFromBigInt(obj.APR, 3, "withDecimals"),
-          APR24H: obj.APR24H,
-          vsHoldAPR: Number(obj.periodVsHoldAPR).toFixed(3),
-        }));
-
-      if (!APRChartData.length) {
-        setIsData(false);
-        return;
-      }
-      const lastTimestamp = APRChartData[APRChartData.length - 1].unixTimestamp;
+        time = APRChartData[0].unixTimestamp;
 
-      time = APRChartData[0].unixTimestamp;
+        do {
+          let sortedAPRs = APRChartData.filter(
+            (obj) => obj.unixTimestamp >= time
+          );
 
-      do {
-        let sortedAPRs = APRChartData.filter(
-          (obj) => obj.unixTimestamp >= time
-        );
+          let firstEl = sortedAPRs[0] || APRChartData[APRChartData.length - 1];
 
-        let firstEl = sortedAPRs[0] || APRChartData[APRChartData.length - 1];
+          newData.push({ ...firstEl, timestamp: time });
+          time += 3600;
+          if (time >= lastTimestamp) {
+            newData.push({
+              ...APRChartData[APRChartData.length - 1],
+              timestamp: APRChartData[APRChartData.length - 1].unixTimestamp,
+            });
+          }
+        } while (time < lastTimestamp);
 
-        newData.push({ ...firstEl, timestamp: time });
-        time += 3600;
-        if (time >= lastTimestamp) {
-          newData.push({
-            ...APRChartData[APRChartData.length - 1],
-            timestamp: APRChartData[APRChartData.length - 1].unixTimestamp,
-          });
-        }
-      } while (time < lastTimestamp);
+        APRChartData = newData.map(formatData);
 
-      APRChartData = newData.map(formatData);
+        if (daysFromLastHardWork >= 3) {
+          APRChartData = APRChartData.filter(
+            (data) => data.unixTimestamp < lastHardWork
+          );
+        }
 
-      if (daysFromLastHardWork >= 3) {
-        APRChartData = APRChartData.filter(
-          (data) => data.unixTimestamp < lastHardWork
-        );
+        setChartData(workedData);
+        setActiveChart({ name: "APR", data: APRChartData as [] });
+      } catch (error) {
+        const err = error as AxiosError;
+        if (err.response) {
+          setGraphError({
+            isError: true,
+            httpStatus: `HTTP Status: ${err.response.status}`,
+            errorMessage: `Error Message: ${err.response.statusText}`,
+          });
+        } else {
+          setGraphError({
+            isError: true,
+            httpStatus: "",
+            errorMessage: `Error Message: ${err.message}`,
+          });
+        }
+        setIsData(false);
+        throw new Error(err.message);
       }
-
-      setChartData(workedData);
-      setActiveChart({ name: "APR", data: APRChartData as [] });
     };
 
     const chartHandler = (chartType: string, segment: TSegment = timeline) => {
@@ -577,9 +602,21 @@ const HistoricalRate: React.FC<IProps> = memo(
             )}
           </>
         ) : (
-          <h3 className="flex items-center justify-center h-[320px]">
-            No available data
-          </h3>
+          <div className="h-[320px] flex items-center justify-center">
+            {graphError.isError ? (
+              <div className="flex flex-col items-center justify-center gap-2">
+                <HeadingText text="Unable to load subgraph" scale={2} />
+                {!!graphError.httpStatus && (
+                  <HeadingText text={graphError.httpStatus} scale={3} />
+                )}
+                {!!graphError.errorMessage && (
+                  <HeadingText text={graphError.errorMessage} scale={3} />
+                )}
+              </div>
+            ) : (
+              <HeadingText text="No available data" scale={2} />
+            )}
+          </div>
         )}
       </div>
     );