add network stat page

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

Hide file tree

Showing 3 changed files with 40 additions and 7 deletions.
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;
@@ -42,11 +39,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 +66,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)} />