From 664180476670acb3176fbe8b1d3ccf313c0bf2ea Mon Sep 17 00:00:00 2001
From: "zapaz.eth" <alain@kredeum.com>
Date: Wed, 1 May 2024 16:29:11 +0200
Subject: [PATCH] add network stat page

---
 .../src/lib/components/StatsNetwork.svelte    | 30 +++++++++++++++++++
 .../src/lib/components/StatsNetworks.svelte   | 11 +++----
 .../src/routes/stats/[chainId]/+page.svelte   |  6 ++++
 3 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 sveltekit/src/lib/components/StatsNetwork.svelte
 create mode 100644 sveltekit/src/routes/stats/[chainId]/+page.svelte

diff --git a/sveltekit/src/lib/components/StatsNetwork.svelte b/sveltekit/src/lib/components/StatsNetwork.svelte
new file mode 100644
index 00000000..51dcddc5
--- /dev/null
+++ 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
index 0d63b5f2..e1a04720 100644
--- 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
new file mode 100644
index 00000000..054a216d
--- /dev/null
+++ 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)} />