add network stat page

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

Hide file tree

Showing 12 changed files with 227 additions and 119 deletions.
diff --git a/common/src/common/networks.ts b/common/src/common/networks.ts
@@ -20,12 +20,20 @@ const networks = (() => {
   const getAllSameType = (chainId: chainIdish): NetworkType[] =>
     getAllActive().filter((nw: NetworkType) => isMainnet(nw.chainId) === isMainnet(chainId));
 
-  const getAllMainnets = (): NetworkType[] => getAllActive().filter((nw: NetworkType) => isMainnet(nw.chainId));
+  const getAllMainnetIds = (): number[] =>
+    getAllActive()
+      .filter((nw: NetworkType) => isMainnet(nw.chainId))
+      .map((nw) => nw.chainId);
 
-  const getAllTestnets = (): NetworkType[] => getAllActive().filter((nw: NetworkType) => isTestnet(nw.chainId));
+  const getAllTestnetIds = (): number[] =>
+    getAllActive()
+      .filter((nw: NetworkType) => isTestnet(nw.chainId))
+      .map((nw) => nw.chainId);
 
-  const getAllOpMainnets = (): NetworkType[] =>
-    getAllActive().filter((nw: NetworkType) => isOpStack(nw.chainId) && isMainnet(nw.chainId));
+  const getAllOpMainnetIds = (): number[] =>
+    getAllActive()
+      .filter((nw: NetworkType) => isOpStack(nw.chainId) && isMainnet(nw.chainId))
+      .map((nw) => nw.chainId);
 
   const get = (chainId: chainIdish): NetworkType | undefined => _networksMap?.get(Number(chainId));
 
@@ -74,9 +82,9 @@ const networks = (() => {
     getAllActive,
     getAllInactive,
     getAllSameType,
-    getAllMainnets,
-    getAllTestnets,
-    getAllOpMainnets,
+    getAllMainnetIds,
+    getAllTestnetIds,
+    getAllOpMainnetIds,
 
     getBlur,
     getBlurUrl,

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/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sveltekit/package.json b/sveltekit/package.json
@@ -32,8 +32,6 @@
   "type": "module",
   "dependencies": {
     "@kredeum/common": "workspace:^",
-    "@kredeum/contracts": "workspace:^",
-    "@kredeum/providers": "workspace:^",
     "@kredeum/svelte": "workspace:^"
   }
 }
diff --git a/sveltekit/src/lib/components/Stats.svelte b/sveltekit/src/lib/components/Stats.svelte
@@ -16,16 +16,14 @@
   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();
+  const getChainIds = (tab: string): number[] => {
+    if (tab === "OPnets") return networks.getAllOpMainnetIds();
+    if (tab === "Testnets") return networks.getAllTestnetIds();
+    return networks.getAllMainnetIds();
   };
 
   $: console.log(tabsMounted);
@@ -58,7 +56,7 @@
       {#each Object.entries(tabsMounted) as [tabKey, tabMounted]}
         {#if tabMounted}
           <span class={tabActive === tabKey ? "" : "hidden"}>
-            <StatsNetworks networks={getNetworks(tabKey)} />
+            <StatsNetworks chainIds={getChainIds(tabKey)} />
           </span>
         {/if}
       {/each}

diff --git a/sveltekit/src/lib/components/StatsNetwork.svelte b/sveltekit/src/lib/components/StatsNetwork.svelte
@@ -0,0 +1,28 @@
+<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;
+  ///////////////////////////////////////
+</script>
+
+<HomeLayout>
+  <span slot="nav">
+    <Navigation chainId={0} />
+  </span>
+
+  <span slot="header">
+    <h1>Kredeum NFTs Factory - Statistics {networks.getChainName(chainId)}</h1>
+  </span>
+
+  <span slot="content">
+    <h1>
+      {chainId}
+    </h1>
+  </span>
+</HomeLayout>
diff --git a/sveltekit/src/lib/components/StatsNetworkLine.svelte b/sveltekit/src/lib/components/StatsNetworkLine.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+  import type { NetworkType } from "@kredeum/common/src/common/types";
+
+  import { resolverGetExplorerUrl, resolverGetAddress } from "@kredeum/common/src/resolver/resolver-get";
+  import { factoryGetExplorerUrl, factoryGetAddress } from "@kredeum/common/src/common/factory-get";
+  import {
+    getShortAddress,
+    getAddressOpenNFTsTemplate,
+    getAddressOpenAutoMarket,
+    explorerContractUrl
+  } from "@kredeum/common/src/common/config";
+  import { resolverCountCollections } from "@kredeum/common/src/resolver/resolver-get-collection";
+  import { networks } from "@kredeum/common/src/common/networks";
+
+  import { statsUpdate } from "../ts/statsCounts";
+
+  ///////////////////////////////////////
+  // <Addresses networks={networks} />
+  ///////////////////////////////////////
+  export let chainId: number;
+  ///////////////////////////////////////
+
+  const countCollections = async (chainId: number): Promise<number | undefined> => {
+    const count = await resolverCountCollections(chainId);
+    if (count !== undefined) statsUpdate(chainId, count);
+
+    console.log("countCollections:", chainId, count);
+    return count;
+  };
+</script>
+
+{#if chainId}
+  <tr>
+    <td>{chainId}</td>
+    <td><a href="/stats/{chainId}">{networks.getChainName(chainId)}</a></td>
+    <td>
+      {#await countCollections(chainId)}
+        ...
+      {:then value}
+        {value}
+      {:catch}
+        ---
+      {/await}
+    </td>
+
+    <td class="addr">
+      <a href={factoryGetExplorerUrl(chainId)} target="_blank">
+        {getShortAddress(factoryGetAddress(chainId))}
+      </a>
+    </td>
+    <td class="addr">
+      <a href={resolverGetExplorerUrl(chainId)} target="_blank">
+        {getShortAddress(resolverGetAddress(chainId))}
+      </a>
+    </td>
+    <td class="addr">
+      <a href={explorerContractUrl(chainId, getAddressOpenNFTsTemplate(chainId))} target="_blank">
+        {getShortAddress(getAddressOpenNFTsTemplate(chainId))}
+      </a>
+    </td>
+    <td class="addr">
+      <a href={explorerContractUrl(chainId, getAddressOpenAutoMarket(chainId))} target="_blank">
+        {getShortAddress(getAddressOpenAutoMarket(chainId))}
+      </a>
+    </td>
+  </tr>
+{/if}
+
+<style>
+  tr:hover {
+    background-color: #f5f5f5;
+  }
+  td {
+    padding: 8px;
+    text-align: right;
+    border-bottom: 1px solid #ddd;
+    width: 180px;
+  }
+  .addr {
+    font-family: "Courier New", monospace;
+  }
+  .addr a {
+    color: #007bff;
+    text-decoration: none;
+    transition: color 0.2s;
+  }
+
+  .addr a:hover {
+    color: #0056b3;
+    text-decoration: underline;
+  }
+  .addr {
+    font-family: "Courier New", monospace;
+  }
+  .addr a {
+    color: #007bff;
+    text-decoration: none;
+    transition: color 0.2s;
+  }
+
+  .addr a:hover {
+    color: #0056b3;
+    text-decoration: underline;
+  }
+</style>
diff --git a/sveltekit/src/lib/components/StatsNetworks.svelte b/sveltekit/src/lib/components/StatsNetworks.svelte
@@ -1,63 +1,32 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-
   import type { NetworkType } from "@kredeum/common/src/common/types";
-
-  import { resolverGetExplorerUrl, resolverGetAddress } from "@kredeum/common/src/resolver/resolver-get";
-  import { factoryGetExplorerUrl, factoryGetAddress } from "@kredeum/common/src/common/factory-get";
-  import {
-    getShortAddress,
-    getAddressOpenNFTsTemplate,
-    getAddressOpenAutoMarket,
-    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 };
+  import StatsNetworkLine from "./StatsNetworkLine.svelte";
+  import { stats, statsSubTotal } from "$lib/ts/statsCounts";
 
   ///////////////////////////////////////
   // <Addresses networks={networks} />
   ///////////////////////////////////////
-  export let networks: NetworkTypeWithCount[];
+  export let chainIds: number[];
   ///////////////////////////////////////
   let total = 0;
   let done = 0;
-  let counts = new Map<number, number>();
 
-  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();
-  };
+  $: $stats && (total = statsSubTotal(chainIds));
 
-  const countCollections = async (chainId: number): Promise<number | undefined> => {
-    let count = counts.get(chainId);
-    if (count === undefined) {
-      count = (await resolverCountCollections(chainId)) || 0;
-      counts.set(chainId, count);
-      refreshCount();
-    }
-    return count;
-  };
-
-  let networksSorted: NetworkTypeWithCount[];
-  const sortNetworks = () => {
-    console.log("sortNetworks ~ sortNetworks:", networks);
-    networksSorted = [...networks].sort(
-      (a: NetworkTypeWithCount, b: NetworkTypeWithCount) => (counts.get(b.chainId) || 0) - (counts.get(a.chainId) || 0)
-    );
-  };
-
-  onMount(() => {});
+  // let networksSorted: NetworkType[];
+  // const sortNetworks = () => {
+  //   console.log("sortNetworks ~ sortNetworks:", networks);
+  //   networksSorted = [...networks].sort(
+  //     (a: NetworkType, b: NetworkType) => (counts.get(b.chainId) || 0) - (counts.get(a.chainId) || 0)
+  //   );
+  // };
 </script>
 
 <table>
   <thead>
     <tr>
       <th>Chain ID</th>
-      <th>Chain<br />Name<br />{done}/{networks.length}</th>
+      <th>Chain<br />Name<br />{done}/{chainIds.length}</th>
       <th>Collections<br />Count<br />{total}</th>
       <th>OpenNFTs<br />Factory</th>
       <th>OpenNFTs<br />Resolver</th>
@@ -66,41 +35,8 @@
     </tr>
   </thead>
   <tbody>
-    {#each networksSorted || networks as network}
-      <tr>
-        <td>{network.chainId}</td>
-        <td>{network.chainName}</td>
-        <td>
-          {#await countCollections(network.chainId)}
-            ...
-          {:then count}
-            {count}
-          {:catch}
-            ---
-          {/await}
-        </td>
-
-        <td class="addr">
-          <a href={factoryGetExplorerUrl(network.chainId)} target="_blank">
-            {getShortAddress(factoryGetAddress(network.chainId))}
-          </a>
-        </td>
-        <td class="addr">
-          <a href={resolverGetExplorerUrl(network.chainId)} target="_blank">
-            {getShortAddress(resolverGetAddress(network.chainId))}
-          </a>
-        </td>
-        <td class="addr">
-          <a href={explorerContractUrl(network.chainId, getAddressOpenNFTsTemplate(network.chainId))} target="_blank">
-            {getShortAddress(getAddressOpenNFTsTemplate(network.chainId))}
-          </a>
-        </td>
-        <td class="addr">
-          <a href={explorerContractUrl(network.chainId, getAddressOpenAutoMarket(network.chainId))} target="_blank">
-            {getShortAddress(getAddressOpenAutoMarket(network.chainId))}
-          </a>
-        </td>
-      </tr>
+    {#each chainIds as chainId, index}
+      <StatsNetworkLine {chainId} />
     {/each}
   </tbody>
 </table>
@@ -110,8 +46,7 @@
     border-collapse: collapse;
   }
 
-  th,
-  td {
+  th {
     padding: 8px;
     text-align: right;
     border-bottom: 1px solid #ddd;
@@ -125,18 +60,4 @@
   tr:hover {
     background-color: #f5f5f5;
   }
-
-  .addr {
-    font-family: "Courier New", monospace;
-  }
-  .addr a {
-    color: #007bff;
-    text-decoration: none;
-    transition: color 0.2s;
-  }
-
-  .addr a:hover {
-    color: #0056b3;
-    text-decoration: underline;
-  }
 </style>