chains update

src/constants/index.ts

@@ -1,5 +1,7 @@
 import type { TTableFilters, TTableColumn } from "@types";
 
+import { chains } from "@stabilitydao/stability";
+
 import {
   USDC,
   USDT,
@@ -137,18 +139,17 @@ const DEXes = [
 
 const CHAINS = [
   {
-    name: "Polygon",
+    name: chains["137"].name,
     id: "137",
-    logoURI:
-      "https://raw.githubusercontent.com/sushiswap/list/master/logos/token-logos/token/polygon.jpg",
+    logoURI: `https://raw.githubusercontent.com/stabilitydao/.github/main/chains/${chains["137"].img}`,
     explorer: "https://polygonscan.com/address/",
     nativeCurrency: "POL",
     active: true, // main page active networks
   },
   {
-    name: "Base",
+    name: chains["8453"].name,
     id: "8453",
-    logoURI: "https://www.base.org/document/favicon-32x32.png",
+    logoURI: `https://raw.githubusercontent.com/stabilitydao/.github/main/chains/${chains["8453"].img}`,
     explorer: "https://basescan.org/address/",
     nativeCurrency: "ETH",
     active: true, // main page active networks

src/modules/Platform/Chains.tsx

@@ -1,44 +1,44 @@
-import {type ApiMainReply, chains} from "@stabilitydao/stability";
-import {useStore} from "@nanostores/react";
-import {apiData} from "@store";
+import { type ApiMainReply, chains } from "@stabilitydao/stability";
+import { useStore } from "@nanostores/react";
+import { apiData } from "@store";
 
-const formatTvl = (tvl: number):string => {
+const formatTvl = (tvl: number): string => {
   if (tvl > 1_000_000_000) {
-    return '' + (tvl / 1_000_000_000).toFixed(1) + ' B'
+    return "" + (tvl / 1_000_000_000).toFixed(1) + " B";
   }
   if (tvl > 3_000_000) {
-    return '' + (tvl / 1_000_000).toFixed(0) + ' M'
+    return "" + (tvl / 1_000_000).toFixed(0) + " M";
   }
 
-  return '' + (tvl / 1_000_000).toFixed(1) + ' M'
-}
+  return "" + (tvl / 1_000_000).toFixed(1) + " M";
+};
 
 const shortAddr = (m: string): string => {
-  return `${m.slice(0, 4)}...${m.slice(-2)}`
-}
+  return `${m.slice(0, 4)}...${m.slice(-2)}`;
+};
 
 const ChainStatus: React.FC<{
-  status: string
-}> = ({status}) => {
-  let bg = 'bg-gray-800'
-  let text = 'text-white'
+  status: string;
+}> = ({ status }) => {
+  let bg = "bg-gray-800";
+  let text = "text-white";
   if (status === "SUPPORTED") {
-    bg = 'bg-green-800'
+    bg = "bg-green-800";
   } else if (status === "AWAITING_DEPLOYMENT") {
-    bg = 'bg-violet-800'
+    bg = "bg-violet-800";
   }
 
   return (
-    <span className={`inline-flex text-[12px] px-3 py-1 rounded-2xl justify-center w-[160px] whitespace-nowrap ${bg} ${text}`}>
-      {
-        status
-          .replace('AWAITING_DEPLOYMENT', 'Awaiting deployment')
-          .replace('NOT_SUPPORTED', 'Not supported')
-          .replace('SUPPORTED', 'Supported')
-      }
+    <span
+      className={`inline-flex text-[12px] px-3 py-1 rounded-2xl justify-center w-[160px] whitespace-nowrap ${bg} ${text}`}
+    >
+      {status
+        .replace("AWAITING_DEPLOYMENT", "Awaiting deployment")
+        .replace("NOT_SUPPORTED", "Not supported")
+        .replace("SUPPORTED", "Supported")}
     </span>
-  )
-}
+  );
+};
 
 const Chains = (): JSX.Element => {
   const $apiData: ApiMainReply = useStore(apiData);
@@ -59,58 +59,62 @@ const Chains = (): JSX.Element => {
           </tr>
         </thead>
         <tbody>
-          {Object.entries(chains).map(([chainId, { name, status, img, multisig, chainLibGithubId }]) => (
-            <tr key={chainId}>
-              <td className="py-1">
-                <div className="flex items-center">
-                  {img &&
+          {Object.entries(chains).map(
+            ([chainId, { name, status, img, multisig, chainLibGithubId }]) => (
+              <tr key={chainId}>
+                <td className="py-1">
+                  <div className="flex items-center">
+                    {img && (
                       <img
-                          src={`https://raw.githubusercontent.com/stabilitydao/.github/main/chains/${img}`}
-                          alt={name}
-                          className="w-[24px] h-[24px] mr-2 rounded-full"
+                        src={`https://raw.githubusercontent.com/stabilitydao/.github/main/chains/${img}`}
+                        alt={name}
+                        className="w-[24px] h-[24px] mr-2 rounded-full"
                       />
-                  }
-                  {name}
-                </div>
-              </td>
-              <td className="px-3 text-center text-[14px] font-bold">{chainId}</td>
-              <td className="px-3 text-right">
-                {$apiData?.total.chainTvl[chainId] && <span>
-                    {formatTvl($apiData.total.chainTvl[chainId])}
-                </span>}
-              </td>
-              <td className="px-3 text-[12px]">
-                <div className="flex">
-                  {multisig &&
-                      <span>{shortAddr(multisig)}</span>
-                  }
-                </div>
-              </td>
-              <td>
-                <div className="flex items-center justify-center">
-                  {chainLibGithubId &&
+                    )}
+                    {name}
+                  </div>
+                </td>
+                <td className="px-3 text-center text-[14px] font-bold">
+                  {chainId}
+                </td>
+                <td className="px-3 text-right">
+                  {$apiData?.total.chainTvl[chainId] && (
+                    <span>{formatTvl($apiData.total.chainTvl[chainId])}</span>
+                  )}
+                </td>
+                <td className="px-3 text-[12px]">
+                  <div className="flex">
+                    {multisig && <span>{shortAddr(multisig)}</span>}
+                  </div>
+                </td>
+                <td>
+                  <div className="flex items-center justify-center">
+                    {chainLibGithubId && (
                       <a
-                          className="inline-flex"
-                          href={`https://github.com/stabilitydao/stability-contracts/issues/${chainLibGithubId}`}
-                          target="_blank"
-                          title="Go to chain library issue page on Github"
+                        className="inline-flex"
+                        href={`https://github.com/stabilitydao/stability-contracts/issues/${chainLibGithubId}`}
+                        target="_blank"
+                        title="Go to chain library issue page on Github"
                       >
-                          <img
-                              src="/icons/github.svg"
-                              alt="Github"
-                              className="w-[20px]"
-                          />
+                        <img
+                          src="/icons/github.svg"
+                          alt="Github"
+                          className="w-[20px]"
+                        />
                       </a>
-                  }
-                </div>
-              </td>
-              <td className="px-3"><ChainStatus status={status}/></td>
-            </tr>
-          ))}
+                    )}
+                  </div>
+                </td>
+                <td className="px-3">
+                  <ChainStatus status={status} />
+                </td>
+              </tr>
+            )
+          )}
         </tbody>
       </table>
     </div>
   );
 };
 
-export {Chains};
+export { Chains };

src/pages/chains.astro

@@ -2,14 +2,18 @@
 import {Chains} from '@modules';
 import Layout from '@layouts/Layout.astro';
 import {chains, getSupportedChainNames} from "@stabilitydao/stability";
+
+const totalChains = Object.keys(chains).length;
+const supported = getSupportedChainNames().length
+const inDeployment = Object.keys(chains).filter(chainId => chains[chainId].status === 'AWAITING_DEPLOYMENT' || chains[chainId].status === 'CHAINLIB_DEVELOPMENT' || chains[chainId].status === 'AWAITING_DEVELOPER' || chains[chainId].status === 'AWAITING_ISSUE_CREATION').length
 ---
 
 <Layout
   title="Chains"
   img="/chains.jpg"
   metaTitle="Blockchains known to Stability platform"
   metaUrl="https://stability.farm/chains"
-  metaDescription={`Total chains: ${Object.keys(chains).length}. Supported: ${getSupportedChainNames().length}. In development: ${Object.keys(chains).filter(c => chains[c].status === 'AWAITING_DEPLOYMENT' || chains[c].status === 'CHAINLIB_DEVELOPMENT' || chains[c].status === 'AWAITING_DEVELOPER' || chains[c].status === 'AWAITING_ISSUE_CREATION').length}.`}
+  metaDescription={`Total chains: ${totalChains}. Supported: ${supported}. In development: ${inDeployment}.`}
 >
     <div class="platform max-w-[1200px]">
         <Chains client:only="react" />

yarn.lock

@@ -1571,7 +1571,7 @@
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/@stabilitydao/stability/-/stability-0.13.8.tgz#be4d9ed340811f62d2fefb4491cb67a8ecc966eb"
   integrity sha512-qjGZdRPKcMlZn/73Te1ohTHYJCUStSaLhz3HxOgO7a/LZsy3HeAj2pIq11NrRTvM85WWLvsKvGfHcXTVOSIzKw==
-
+  
 "@stablelib/aead@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@stablelib/aead/-/aead-1.0.1.tgz#c4b1106df9c23d1b867eb9b276d8f42d5fc4c0c3"