Merge pull request #265 from stabilitydao/platform-pages

0.12.24-alpha: chain page upgrade, chains table fix
stabilitydao · Oct 13, 2024 · 23e2fd4 · 23e2fd4
2 parents 5cd1e2b + 8987e1b
commit 23e2fd4
Show file tree

Hide file tree

Showing 95 changed files with 934 additions and 576 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.12.22-alpha",
+  "version": "0.12.24-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -18,7 +18,7 @@
     "@astrojs/tailwind": "^5.0.2",
     "@astrojs/vercel": "^5.1.0",
     "@nanostores/react": "^0.7.1",
-    "@stabilitydao/stability": "=0.16.1",
+    "@stabilitydao/stability": "=0.17.0",
     "@tanstack/query-sync-storage-persister": "^5.22.2",
     "@tanstack/react-query": "^5.22.2",
     "@tanstack/react-query-persist-client": "^5.22.2",

diff --git a/public/chain-covers/1.png b/public/chain-covers/1.png
diff --git a/public/chain-covers/10.png b/public/chain-covers/10.png
diff --git a/public/chain-covers/100.png b/public/chain-covers/100.png
diff --git a/public/chain-covers/108.png b/public/chain-covers/108.png
diff --git a/public/chain-covers/1088.png b/public/chain-covers/1088.png
diff --git a/public/chain-covers/1100.png b/public/chain-covers/1100.png
diff --git a/public/chain-covers/1101.png b/public/chain-covers/1101.png
diff --git a/public/chain-covers/1111.png b/public/chain-covers/1111.png
diff --git a/public/chain-covers/111188.png b/public/chain-covers/111188.png
diff --git a/public/chain-covers/1116.png b/public/chain-covers/1116.png
diff --git a/public/chain-covers/11235.png b/public/chain-covers/11235.png
diff --git a/public/chain-covers/11501.png b/public/chain-covers/11501.png
diff --git a/public/chain-covers/122.png b/public/chain-covers/122.png
diff --git a/public/chain-covers/1284.png b/public/chain-covers/1284.png
diff --git a/public/chain-covers/1285.png b/public/chain-covers/1285.png
diff --git a/public/chain-covers/1313161554.png b/public/chain-covers/1313161554.png
diff --git a/public/chain-covers/1329.png b/public/chain-covers/1329.png
diff --git a/public/chain-covers/13371.png b/public/chain-covers/13371.png
diff --git a/public/chain-covers/137.png b/public/chain-covers/137.png
diff --git a/public/chain-covers/1380012617.png b/public/chain-covers/1380012617.png
diff --git a/public/chain-covers/14.png b/public/chain-covers/14.png
diff --git a/public/chain-covers/1625.png b/public/chain-covers/1625.png
diff --git a/public/chain-covers/167000.png b/public/chain-covers/167000.png
diff --git a/public/chain-covers/169.png b/public/chain-covers/169.png
diff --git a/public/chain-covers/185.png b/public/chain-covers/185.png
diff --git a/public/chain-covers/196.png b/public/chain-covers/196.png
diff --git a/public/chain-covers/199.png b/public/chain-covers/199.png
diff --git a/public/chain-covers/2000.png b/public/chain-covers/2000.png
diff --git a/public/chain-covers/200901.png b/public/chain-covers/200901.png
diff --git a/public/chain-covers/204.png b/public/chain-covers/204.png
diff --git a/public/chain-covers/2046399126.png b/public/chain-covers/2046399126.png
diff --git a/public/chain-covers/2222.png b/public/chain-covers/2222.png
diff --git a/public/chain-covers/250.png b/public/chain-covers/250.png
diff --git a/public/chain-covers/252.png b/public/chain-covers/252.png
diff --git a/public/chain-covers/255.png b/public/chain-covers/255.png
diff --git a/public/chain-covers/288.png b/public/chain-covers/288.png
diff --git a/public/chain-covers/295.png b/public/chain-covers/295.png
diff --git a/public/chain-covers/30.png b/public/chain-covers/30.png
diff --git a/public/chain-covers/314.png b/public/chain-covers/314.png
diff --git a/public/chain-covers/324.png b/public/chain-covers/324.png
diff --git a/public/chain-covers/34443.png b/public/chain-covers/34443.png
diff --git a/public/chain-covers/37.png b/public/chain-covers/37.png
diff --git a/public/chain-covers/3776.png b/public/chain-covers/3776.png
diff --git a/public/chain-covers/40.png b/public/chain-covers/40.png
diff --git a/public/chain-covers/4200.png b/public/chain-covers/4200.png
diff --git a/public/chain-covers/42161.png b/public/chain-covers/42161.png
diff --git a/public/chain-covers/42170.png b/public/chain-covers/42170.png
diff --git a/public/chain-covers/42220.png b/public/chain-covers/42220.png
diff --git a/public/chain-covers/42766.png b/public/chain-covers/42766.png
diff --git a/public/chain-covers/43114.png b/public/chain-covers/43114.png
diff --git a/public/chain-covers/48900.png b/public/chain-covers/48900.png
diff --git a/public/chain-covers/5000.png b/public/chain-covers/5000.png
diff --git a/public/chain-covers/534352.png b/public/chain-covers/534352.png
diff --git a/public/chain-covers/56.png b/public/chain-covers/56.png
diff --git a/public/chain-covers/570.png b/public/chain-covers/570.png
diff --git a/public/chain-covers/59144.png b/public/chain-covers/59144.png
diff --git a/public/chain-covers/6001.png b/public/chain-covers/6001.png
diff --git a/public/chain-covers/60808.png b/public/chain-covers/60808.png
diff --git a/public/chain-covers/7000.png b/public/chain-covers/7000.png
diff --git a/public/chain-covers/7560.png b/public/chain-covers/7560.png
diff --git a/public/chain-covers/7777777.png b/public/chain-covers/7777777.png
diff --git a/public/chain-covers/810180.png b/public/chain-covers/810180.png
diff --git a/public/chain-covers/81457.png b/public/chain-covers/81457.png
diff --git a/public/chain-covers/8217.png b/public/chain-covers/8217.png
diff --git a/public/chain-covers/8453.png b/public/chain-covers/8453.png
diff --git a/public/chain-covers/8822.png b/public/chain-covers/8822.png
diff --git a/public/chain-covers/9001.png b/public/chain-covers/9001.png
diff --git a/public/chain-covers/9790.png b/public/chain-covers/9790.png
diff --git a/public/github.svg b/public/github.svg
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,6 +1,13 @@
 import { chains } from "@stabilitydao/stability";
 
-import { TABLE_FILTERS, TABLE, CHAINS_TABLE } from "./tables";
+import {
+  TABLE_FILTERS,
+  TABLE,
+  CHAINS_TABLE,
+  ASSETS_TABLE,
+  INTEGRATIONS_TABLE,
+  STRATEGIES_TABLE,
+} from "./tables";
 
 import {
   USDC,
@@ -282,4 +289,7 @@ export {
   DEFAULT_ERROR,
   IL,
   ZERO_BigInt,
+  ASSETS_TABLE,
+  INTEGRATIONS_TABLE,
+  STRATEGIES_TABLE,
 };
diff --git a/src/constants/tables.ts b/src/constants/tables.ts
@@ -80,25 +80,101 @@ const CHAINS_TABLE: TTableColumn[] = [
     sortType: "none",
     dataType: "number",
   },
+  // {
+  //   name: "Treasury",
+  //   keyName: "multisig",
+  //   sortType: "none",
+  //   dataType: "string",
+  // },
+  // {
+  //   name: "Issue",
+  //   keyName: "chainLibGithubId",
+  //   sortType: "none",
+  //   dataType: "number",
+  // },
+  { name: "Status", keyName: "status", sortType: "none", dataType: "string" },
+  {
+    name: "Bridges",
+    keyName: "bridgesCount",
+    sortType: "none",
+    dataType: "number",
+  },
+];
+
+const ASSETS_TABLE: TTableColumn[] = [
   {
-    name: "Treasury",
-    keyName: "multisig",
+    name: "Symbol",
+    keyName: "symbol",
     sortType: "none",
     dataType: "string",
   },
   {
-    name: "Issue",
-    keyName: "chainLibGithubId",
+    name: "Website",
+    keyName: "",
+    sortType: "none",
+    dataType: "",
+    unsortable: true,
+  },
+  {
+    name: "Addresses",
+    keyName: "addresses",
     sortType: "none",
     dataType: "number",
   },
-  { name: "Status", keyName: "status", sortType: "none", dataType: "string" },
+];
+const INTEGRATIONS_TABLE: TTableColumn[] = [
   {
-    name: "Bridges",
-    keyName: "chainId", //temp
+    name: "Organization",
+    keyName: "name",
+    sortType: "none",
+    dataType: "string",
+  },
+  {
+    name: "Links",
+    keyName: "",
+    sortType: "none",
+    dataType: "",
+    unsortable: true,
+  },
+  {
+    name: "Protocols",
+    keyName: "protocolsLength",
+    sortType: "none",
+    dataType: "number",
+  },
+];
+const STRATEGIES_TABLE: TTableColumn[] = [
+  {
+    name: "Id",
+    keyName: "shortId",
+    sortType: "none",
+    dataType: "string",
+  },
+  {
+    name: "Name",
+    keyName: "id",
+    sortType: "none",
+    dataType: "string",
+  },
+  {
+    name: "State",
+    keyName: "state",
+    sortType: "none",
+    dataType: "string",
+  },
+  {
+    name: "Issue",
+    keyName: "contractGithubId",
     sortType: "none",
     dataType: "number",
   },
 ];
 
-export { TABLE_FILTERS, TABLE, CHAINS_TABLE };
+export {
+  TABLE_FILTERS,
+  TABLE,
+  CHAINS_TABLE,
+  ASSETS_TABLE,
+  INTEGRATIONS_TABLE,
+  STRATEGIES_TABLE,
+};
diff --git a/src/modules/Platform/components/Assets.tsx b/src/modules/Platform/components/Assets.tsx
@@ -1,45 +1,78 @@
+import { useState, useEffect } from "react";
+
 import { assets } from "@stabilitydao/stability";
 
-import { Breadcrumbs } from "@ui";
+import { sortTable } from "@utils";
+
+import { Breadcrumbs, TableColumnSort } from "@ui";
+
+import { ASSETS_TABLE } from "@constants";
+
+import type { TTableColumn, TAssetData } from "@types";
 
 const Assets = (): JSX.Element => {
+  const [tableStates, setTableStates] = useState(ASSETS_TABLE);
+  const [tableData, setTableData] = useState<TAssetData[]>([]);
+
+  const initTableData = async () => {
+    if (assets) {
+      const assetsData = assets.map(({ symbol, website, addresses }) => ({
+        symbol,
+        website,
+        addresses: Object.keys(addresses).length,
+      }));
+      setTableData(assetsData);
+    }
+  };
+
+  useEffect(() => {
+    initTableData();
+  }, []);
   return (
-    <div className="">
+    <div>
       <Breadcrumbs links={["Platform", "Assets"]} />
 
       <h1>Assets</h1>
 
       <table className="font-manrope w-full">
         <thead className="bg-accent-950 text-neutral-600 h-[36px]">
           <tr className="text-[12px] uppercase">
-            <td className="px-4 py-2">Symbol</td>
-            <td className="px-4 py-2">Website</td>
-            <td className="px-4 py-2">Addresses</td>
+            {tableStates.map((value: TTableColumn, index: number) => (
+              <TableColumnSort
+                key={value.name + index}
+                index={index}
+                value={value.name}
+                sort={sortTable}
+                table={tableStates}
+                setTable={setTableStates}
+                tableData={tableData}
+                setTableData={setTableData}
+              />
+            ))}
           </tr>
         </thead>
         <tbody className="text-[14px]">
-          {assets.map(({ addresses, symbol, website }) => (
-            <tr className="h-[48px] hover:bg-accent-950" key={website}>
-              <td className="px-4 py-3">{symbol}</td>
-              <td className="px-4 py-3 ">
-                <a
-                  className="flex items-center justify-center"
-                  href={website}
-                  target="_blank"
-                  title="Go to asset website"
-                >
-                  <img
-                    src="/icons/web.svg"
-                    alt="Website"
-                    className="w-[20px]"
-                  />
-                </a>
-              </td>
-              <td className="px-4 py-3 text-end">
-                {Object.keys(addresses).length}
-              </td>
-            </tr>
-          ))}
+          {!!tableData.length &&
+            tableData.map(({ addresses, symbol, website }) => (
+              <tr className="h-[48px] hover:bg-accent-950" key={symbol}>
+                <td className="px-4 py-3">{symbol}</td>
+                <td className="px-4 py-3 ">
+                  <a
+                    className="flex items-center justify-center"
+                    href={website}
+                    target="_blank"
+                    title="Go to asset website"
+                  >
+                    <img
+                      src="/icons/web.svg"
+                      alt="Website"
+                      className="w-[20px]"
+                    />
+                  </a>
+                </td>
+                <td className="px-4 py-3 text-end">{addresses}</td>
+              </tr>
+            ))}
         </tbody>
       </table>
     </div>