add network stat page

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

Hide file tree

Showing 15 changed files with 281 additions and 134 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));
 
@@ -56,9 +64,9 @@ const networks = (() => {
   const isLayer2 = (chainId: chainIdish): boolean => !isLayer1(chainId);
   const isOpStack = (chainId: chainIdish): boolean => get(chainId)?.opstack || false;
 
-  const getChainName = (chainId: chainIdish): string | undefined => get(chainId)?.chainName;
-  const getChainLabel = (chainId: chainIdish): string | undefined =>
-    get(chainId)?.chainLabel || strUpFirst(strSanitize(getChainName(chainId)));
+  const getChainName = (chainId: chainIdish): string => get(chainId)?.chainName || "";
+  const getChainLabel = (chainId: chainIdish): string =>
+    get(chainId)?.chainLabel || strUpFirst(strSanitize(getChainName(chainId))) || "";
   const getMainnetName = (chainId: chainIdish) =>
     isTestnet(chainId) ? getChainName(getLinkedMainnet(chainId)) : getChainName(chainId);
 
@@ -74,9 +82,9 @@ const networks = (() => {
     getAllActive,
     getAllInactive,
     getAllSameType,
-    getAllMainnets,
-    getAllTestnets,
-    getAllOpMainnets,
+    getAllMainnetIds,
+    getAllTestnetIds,
+    getAllOpMainnetIds,
 
     getBlur,
     getBlurUrl,

diff --git a/common/src/resolver/resolver-get-collection.ts b/common/src/resolver/resolver-get-collection.ts
@@ -58,6 +58,18 @@ const resolverAreCollections = async (chainId: number, collections: Array<string
   return checks;
 };
 
+const resolverGetCollectionsAddresses = async (chainId: number): Promise<string[]> => {
+  console.log(resolverGetCollectionsAddresses, chainId);
+
+  const nftsResolver = await resolverGetContract(chainId);
+
+  const addresses = await nftsResolver.getAddresses();
+  // console.log("resolverGetCollections openNFTsStructOutput", collectionInfos);
+
+  console.log(resolverGetCollectionsAddresses, chainId, addresses);
+  return addresses;
+};
+
 const resolverGetCollections = async (
   chainId: number,
   account = ADDRESS_ZERO
@@ -103,6 +115,7 @@ const resolverCountCollections = async (chainId: number): Promise<number | undef
 export {
   resolverCountCollections,
   resolverGetCollections,
+  resolverGetCollectionsAddresses,
   resolverGetCollection,
   resolverAreCollections,
   resolverFilterCollections,

diff --git a/config/src/config.handlebars.json b/config/src/config.handlebars.json
@@ -1,6 +1,6 @@
 {
   "version": {
-    "latest": "1.4.0",
+    "latest": "1.5.0",
     "stable": "1.1.4",
     "branch": "{{GIT_BRANCH}}",
     "commit": "{{GIT_COMMIT}}"

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/svelte/src/components/Global/Navigation.svelte b/svelte/src/components/Global/Navigation.svelte
@@ -5,7 +5,12 @@
   import { networks } from "@kredeum/common/src/common/networks";
   import ConfigModal from "./ConfigModal.svelte";
 
-  export let chainId: number;
+  ///////////////////////////////////
+  // <Navigation {chainid} {back} />
+  ///////////////////////////////////
+  export let chainId: number | undefined = undefined;
+  export let back: string | undefined = undefined;
+  ///////////////////////////////////
 
   const onProd = versionGet().branch === "main";
   $: onMainNet = networks.isMainnet(chainId);
@@ -33,7 +38,14 @@
 
   <nav>
     <ul>
-      {#if chainId > 0}
+      {#if back}
+        <li class="active">
+          <a href={back}>
+            <i class="fa fa-arrow-left"></i><br />
+            back
+          </a>
+        </li>
+      {:else}
         <li class="active">
           <p>
             <a href="." on:click|preventDefault={toggle}>
@@ -67,13 +79,6 @@
             </a>
           </li>
         {/if}
-      {:else}
-        <li class="active">
-          <a href="/">
-            <i class="fas fa-home"></i><br />
-            home
-          </a>
-        </li>
       {/if}
     </ul>
   </nav>

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,24 +16,22 @@
   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);
 </script>
 
 <HomeLayout>
   <span slot="nav">
-    <Navigation chainId={0} />
+    <Navigation back="/" />
   </span>
 
   <span slot="header">
@@ -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,42 @@
+<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";
+  import { resolverGetCollectionsAddresses } from "@kredeum/common/src/resolver/resolver-get-collection";
+  import { explorerCollectionUrl, getShortAddress } from "@kredeum/common/src/common/config";
+
+  ///////////////////////////////////////
+  // <StatsNetwork {chainId} />
+  ///////////////////////////////////////
+  export let chainId: number;
+  ///////////////////////////////////////
+</script>
+
+<HomeLayout>
+  <span slot="nav">
+    <Navigation back="/stats" />
+  </span>
+
+  <span slot="header">
+    <h1>Kredeum NFTs Factory - Statistics {networks.getChainLabel(chainId).toUpperCase()}</h1>
+  </span>
+
+  <span slot="content">
+    <h1>
+      {chainId}
+    </h1>
+
+    {#await resolverGetCollectionsAddresses(chainId)}
+      ...
+    {:then collections}
+      {#each collections as collection}
+        <div>
+          <a href={explorerCollectionUrl(chainId, collection)} target="_blank">{collection}</a>
+        </div>
+      {/each}
+    {:catch}
+      ---
+    {/await}
+  </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 "../stores/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>