Chains page statistics + pagination + fixes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.13.15-alpha",
+  "version": "0.13.17-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/layouts/AppStore.tsx

@@ -38,8 +38,6 @@
 
 import { wagmiConfig, platforms, PlatformABI, IVaultManagerABI } from "@web3";
 
-import { ErrorMessage } from "@ui";
-
 import {
   calculateAPY,
   getStrategyInfo,
@@ -100,7 +98,8 @@
 
   const $lastTx = useStore(lastTx);
   const $reload = useStore(reload);
-  const $error = useStore(error);
+
+  let isError = false;
 
   const localVaults: {
     [network: string]: TVaults;
@@ -110,6 +109,11 @@
 
   let stabilityAPIData: TAPIData = {};
 
+  const handleError = (errType: string, description: string) => {
+    error.set({ state: true, type: errType, description });
+    isError = true;
+  };
+
   const getDataFromStabilityAPI = async () => {
     const maxRetries = 3;
     let currentRetry = 0;
@@ -121,11 +125,7 @@
         stabilityAPIData = response.data;
 
         if (stabilityAPIData?.error) {
-          error.set({
-            state: true,
-            type: "API",
-            description: stabilityAPIData?.error,
-          });
+          handleError("API", stabilityAPIData?.error);
           return;
         }
 
@@ -143,18 +143,14 @@
           await new Promise((resolve) => setTimeout(resolve, 1000));
         } else {
           console.error("API error:", err);
-          error.set({
-            state: true,
-            type: "API",
-            description: err?.message,
-          });
+          handleError("API", err);
         }
       }
     }
   };
 
   const setVaultsData = async (
     data: any,
     prices: { [key: string]: TPriceInfo },
     chainID: string
   ) => {
@@ -695,8 +691,9 @@
                 );
               }
               isVaultsLoaded.set(true);
             } catch (txError: any) {
               console.log("BLOCKCHAIN ERROR:", txError);
+
               error.set({
                 state: true,
                 type: "WEB3",
@@ -724,7 +721,9 @@
 
     await getDataFromStabilityAPI();
 
-    getData();
+    if (!isError) {
+      getData();
+    }
 
     if (chain?.id) {
       currentChainID.set(String(chain?.id));
@@ -739,14 +738,6 @@
     fetchAllData();
   }, [address, chain?.id, isConnected, $lastTx, $reload]);
 
-  if ($error.state && $error.type === "API") {
-    return (
-      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-        <ErrorMessage type="API" />
-      </div>
-    );
-  }
-
   return (
     <WagmiLayout>
       <div className="flex flex-col flex-1">{props.children}</div>

src/modules/Platform/components/Chains/Chain.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from "react";
+
 import {
   type ApiMainReply,
   assets,
@@ -11,7 +13,7 @@ import {
 
 import { useStore } from "@nanostores/react";
 
-import { apiData } from "@store";
+import { apiData, vaults } from "@store";
 
 import { formatNumber } from "@utils";
 
@@ -21,14 +23,15 @@ import { ChainStatus, StrategyStatus } from "../../ui";
 
 import tokenlist from "@stabilitydao/stability/out/stability.tokenlist.json";
 
-import type { TStrategyState } from "@types";
+import type { TStrategyState, TVault } from "@types";
 
 interface IProps {
   chain: number;
 }
 
 const Chain: React.FC<IProps> = ({ chain }) => {
   const $apiData: ApiMainReply | undefined = useStore(apiData);
+  const $vaults = useStore(vaults);
 
   const chainData = {
     ...chains[chain],
@@ -69,10 +72,45 @@ const Chain: React.FC<IProps> = ({ chain }) => {
     },
     {
       name: "TVL",
-      content: `\$${formatNumber($apiData?.total.chainTvl[chain.toString()] ? $apiData?.total.chainTvl[chain.toString()].toFixed(0) : "-", "withSpaces")}`,
+      content: `${formatNumber($apiData?.total.chainTvl[chain.toString()] ? $apiData?.total.chainTvl[chain.toString()].toFixed(0) : "-", "abbreviate")}`,
     },
   ];
 
+  const vaultsInfo = useMemo(() => {
+    if (!$apiData) return [];
+
+    const chainVaults: TVault[] = Object.entries($vaults[chain] || {}).map(
+      (vault) => vault[1] as TVault
+    );
+
+    const vaultsTVL: number = chainVaults.reduce(
+      (acc: number, cur) => (acc += Number(cur?.tvl)),
+      0
+    );
+
+    const weightedAverageAPR: number = chainVaults.reduce(
+      (acc: number, cur) =>
+        acc +
+        (Number(cur?.earningData?.apr?.daily) * Number(cur?.tvl)) / vaultsTVL,
+      0
+    );
+
+    return [
+      {
+        name: "Vaults",
+        content: chainVaults.length,
+      },
+      {
+        name: "APR",
+        content: `${weightedAverageAPR.toFixed(2)}%`,
+      },
+      {
+        name: "Vaults TVL",
+        content: formatNumber(vaultsTVL, "abbreviate"),
+      },
+    ];
+  }, [$vaults, chain]);
+
   const chainAssets = assets.filter((asset) =>
     Object.keys(asset.addresses).includes(chain.toString())
   );
@@ -109,6 +147,36 @@ const Chain: React.FC<IProps> = ({ chain }) => {
               </div>
             ))}
           </div>
+          {chainData.status === "SUPPORTED" && vaultsInfo.length ? (
+            <div className="flex items-center justify-center flex-wrap p-[16px] ">
+              {vaultsInfo.map(({ name, content }, index) => (
+                <div
+                  key={name}
+                  className="flex w-full sm:w-6/12 md:w-4/12 lg:w-4/12 min-[1440px]:w-4/12 h-[120px] px-[12px] rounded-full text-gray-200 items-center justify-center flex-col it"
+                >
+                  {!index ? (
+                    <a
+                      className="h-[50px] text-[30px] whitespace-nowrap items-center self-center flex"
+                      target="_blank"
+                      href={`/?chain=${chain}&status=all`}
+                    >
+                      {content}
+                    </a>
+                  ) : (
+                    <div className="h-[50px] text-[30px] whitespace-nowrap items-center self-center flex">
+                      {content}
+                    </div>
+                  )}
+
+                  <div className="flex self-center justify-center text-[16px]">
+                    {name}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            ""
+          )}
         </div>
 
         {strategies.length > 0 && (