add network stat page

Kredeum · May 1, 2024 · a5587c6 · a5587c6
1 parent 6580185
commit a5587c6
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 13 deletions.
diff --git a/config/src/testnets.handlebars.json b/config/src/testnets.handlebars.json
@@ -193,7 +193,7 @@
     "linkedMainnet": 59144,
     "linkedLayer1": 5,
     "create": true,
-    "active": true
+    "active": false
   },
   {
     "chainId": 59141,
@@ -533,6 +533,7 @@
       "http://localhost/explorer"
     ],
     "linkedMainnet": 31337,
-    "create": true
+    "create": true,
+    "active": false
   }
 ]
diff --git a/sveltekit/src/lib/components/Stats.svelte b/sveltekit/src/lib/components/Stats.svelte
@@ -16,15 +16,13 @@
   let tabsMounted: TabsMounted = {
     Mainnets: true,
     OPnets: false,
-    Testnets: false,
-    Inactives: false
+    Testnets: false
   };
   let tabActive = "Mainnets";
 
   const getNetworks = (tab: string): NetworkType[] => {
     if (tab === "OPnets") return networks.getAllOpMainnets();
     if (tab === "Testnets") return networks.getAllTestnets();
-    if (tab === "Inactives") return networks.getAllInactive();
     return networks.getAllMainnets();
   };
 

diff --git a/sveltekit/src/lib/components/StatsNetwork.svelte b/sveltekit/src/lib/components/StatsNetwork.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { NetworkType } from "@kredeum/common/src/common/types";
+  import { networks } from "@kredeum/common/src/common/networks";
+  import HomeLayout from "@kredeum/svelte/src/components/Global/HomeLayout.svelte";
+  import Navigation from "@kredeum/svelte/src/components/Global/Navigation.svelte";
+
+  ///////////////////////////////////////
+  // <StatsNetwork {chainId} />
+  ///////////////////////////////////////
+  export let chainId: number;
+  ///////////////////////////////////////
+
+  const network = networks.get(chainId);
+</script>
+
+<HomeLayout>
+  <span slot="nav">
+    <Navigation chainId={0} />
+  </span>
+
+  <span slot="header">
+    <h1>Kredeum NFTs Factory - Statistics {network?.chainName || "?"}</h1>
+  </span>
+
+  <span slot="content">
+    <h1>
+      {network?.chainId || 0}
+    </h1>
+  </span>
+</HomeLayout>
diff --git a/sveltekit/src/lib/components/StatsNetworks.svelte b/sveltekit/src/lib/components/StatsNetworks.svelte
@@ -12,14 +12,11 @@
     explorerContractUrl
   } from "@kredeum/common/src/common/config";
   import { resolverCountCollections } from "@kredeum/common/src/resolver/resolver-get-collection";
-  import Network from "../../../../svelte/src/components/Network/Network.svelte";
-
-  type NetworkTypeWithCount = NetworkType & { countCollection?: number };
 
   ///////////////////////////////////////
   // <Addresses networks={networks} />
   ///////////////////////////////////////
-  export let networks: NetworkTypeWithCount[];
+  export let networks: NetworkType[];
   ///////////////////////////////////////
   let total = 0;
   let done = 0;
@@ -28,7 +25,6 @@
   const refreshCount = () => {
     total = [...counts].reduce((tot, [k, n]) => tot + (n || 0), 0);
     done = [...counts].filter((n) => n !== undefined).length;
-    console.log("refreshCount ~ networks:", networks);
     if (done === networks.length) sortNetworks();
   };
 
@@ -42,11 +38,11 @@
     return count;
   };
 
-  let networksSorted: NetworkTypeWithCount[];
+  let networksSorted: NetworkType[];
   const sortNetworks = () => {
     console.log("sortNetworks ~ sortNetworks:", networks);
     networksSorted = [...networks].sort(
-      (a: NetworkTypeWithCount, b: NetworkTypeWithCount) => (counts.get(b.chainId) || 0) - (counts.get(a.chainId) || 0)
+      (a: NetworkType, b: NetworkType) => (counts.get(b.chainId) || 0) - (counts.get(a.chainId) || 0)
     );
   };
 
@@ -69,7 +65,7 @@
     {#each networksSorted || networks as network}
       <tr>
         <td>{network.chainId}</td>
-        <td>{network.chainName}</td>
+        <td><a href="/stats/{network.chainId}">{network.chainName}</a></td>
         <td>
           {#await countCollections(network.chainId)}
             ...

diff --git a/sveltekit/src/routes/stats/[chainId]/+page.svelte b/sveltekit/src/routes/stats/[chainId]/+page.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import StatsNetwork from "$lib/components/StatsNetwork.svelte";
+</script>
+
+<StatsNetwork chainId={Number($page.params.chainId)} />