add view-all action

Kredeum · May 8, 2024 · d91c67f · d91c67f
1 parent ab67abc
commit d91c67f
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 137 deletions.
diff --git a/common/src/common/config.ts b/common/src/common/config.ts
@@ -55,15 +55,13 @@ const getOpenBound = (chainId: number): string => getAddresses(chainId)?.OpenBou
 const hasOpenBound = (chainId: number): boolean => isAddress(getOpenBound(chainId));
 
 // GET Dapp Url
-const getDappUrl = (
-  chainId: number,
-  ref: NftType | { address?: string; tokenID?: string } = {},
-  base = "."
-): string => {
+const getDappUrl = (chainId: number, ref: RefPageType = {}, base = "."): string => {
   let dappUrl = `${base}/#/${chainId}`;
   if (isAddress(ref.address)) {
     dappUrl += `/${ref.address}`;
     if (isNumeric(ref.tokenID)) dappUrl += `/${ref.tokenID}`;
+    if (isAddress(ref.account)) dappUrl += `@${ref.account}`;
+    if (ref.action) dappUrl += `|${ref.action}`;
   }
   return dappUrl;
 };

diff --git a/config/src/mainnets.handlebars.json b/config/src/mainnets.handlebars.json
@@ -34,8 +34,8 @@
     "chainName": "arbitrum",
     "rpcUrls": [
       "https://rpc.ankr.com/arbitrum/{{ANKR_API_KEY}}",
-      "https://arbitrum-mainnet.infura.io/v3/{{INFURA_API_KEY}}",
-      "https://arb-mainnet.g.alchemy.com/v2/{{ALCHEMY_API_KEY_ARBITRUM}}"
+      "https://arb-mainnet.g.alchemy.com/v2/{{ALCHEMY_API_KEY_ARBITRUM}}",
+      "https://arbitrum-mainnet.infura.io/v3/{{INFURA_API_KEY}}"
     ],
     "nativeCurrency": {
       "name": "Ether",
@@ -77,8 +77,8 @@
     "chainName": "optimism",
     "rpcUrls": [
       "https://rpc.ankr.com/optimism/{{ANKR_API_KEY}}",
-      "https://optimism-mainnet.infura.io/v3/{{INFURA_API_KEY}}",
       "https://opt-mainnet.g.alchemy.com/v2/{{ALCHEMY_API_KEY_OPTIMISM}}",
+      "https://optimism-mainnet.infura.io/v3/{{INFURA_API_KEY}}",
       "https://mainnet.optimism.io"
     ],
     "nativeCurrency": {
@@ -270,8 +270,8 @@
     "chainName": "polygon",
     "rpcUrls": [
       "https://rpc.ankr.com/polygon/{{ANKR_API_KEY}}",
-      "https://polygon-mainnet.infura.io/v3/{{INFURA_API_KEY}}",
       "https://polygon-mainnet.g.alchemy.com/v2/{{ALCHEMY_API_KEY_POLYGON}}",
+      "https://polygon-mainnet.infura.io/v3/{{INFURA_API_KEY}}",
       "https://polygon-rpc.com/"
     ],
     "nativeCurrency": {

diff --git a/svelte/src/components/Global/ButtonAll.svelte b/svelte/src/components/Global/ButtonAll.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  /////////////////////////////////////////////////
+  // <ButtonOwner bind:{all} />
+  // Select All button
+  /////////////////////////////////////////////////
+  export let all: boolean;
+  /////////////////////////////////////////////////
+</script>
+
+<button
+  class="clear"
+  on:click={() => (all = !all)}
+  title="      {all ? 'Click to View My NFTs' : 'Click to View All NFTs'}"
+>
+  <i class="fas fa-{all ? 'user' : 'users'}" />
+</button>
diff --git a/svelte/src/components/Global/ButtonOwner.svelte b/svelte/src/components/Global/ButtonOwner.svelte
diff --git a/svelte/src/components/Main/Dapp.svelte b/svelte/src/components/Main/Dapp.svelte
@@ -8,7 +8,7 @@
 
   import AccountConnect from "../Account/AccountConnect.svelte";
   import CollectionSelect from "../Collection/CollectionSelect.svelte";
-  import ButtonOwner from "../Global/ButtonOwner.svelte";
+  import ButtonAll from "../Global/ButtonAll.svelte";
   import ButtonRefresh from "../Global/ButtonRefresh.svelte";
   import Create from "../Global/Create.svelte";
   import HomeLayout from "../Global/HomeLayout.svelte";
@@ -18,20 +18,20 @@
   import Nft from "../Nft/Nft.svelte";
   import Nfts from "../Nfts/Nfts.svelte";
 
-  import { metamaskInit, metamaskSwitchChain } from "../../helpers/metamask";
   import { refPage2UrlHash, refPageFromUrlHash } from "../../helpers/refPage";
+  import { metamaskInit, metamaskSwitchChain } from "../../helpers/metamask";
   import { metamaskChainId, metamaskSignerAddress } from "../../stores/metamask";
 
   ////////////////////////////////////////////////////////////////////
   // <Dapp />
   ////////////////////////////////////////////////////////////////////
-  let chainId: number;
+  let chainId: number = 1;
   let address: string;
   let tokenID: string;
   let account: string;
-  let owner: string;
-  let signer: string;
+  let action: string;
 
+  let all = false;
   let initalized = false;
   let refreshingCollections = false;
   let refreshingNfts = false;
@@ -46,7 +46,7 @@
   // SET chainId on memataskChainId change
   $: $metamaskChainId && handleMetamaskChainId();
   const handleMetamaskChainId = () => {
-    if (initalized) chainId = $metamaskChainId;
+    chainId = $metamaskChainId;
   };
 
   // SET nework on chainId change
@@ -73,12 +73,14 @@
 
     if (initalized) resetTokenID();
   };
-  // SET account on signer change
-  $: isAddressNotZero(signer) && handleSigner();
+  // SET account on $metamaskSignerAddress change
+  $: isAddressNotZero($metamaskSignerAddress) && handleSigner();
   const handleSigner = async () => {
-    // console.log("<Dapp handleSigner", initalized, signer);
+    // console.log("<Dapp handleSigner", initalized, $metamaskSignerAddress);
+
+    account = $metamaskSignerAddress;
 
-    if (initalized) account = signer;
+    console.log("<Dapp handleSigner acount:", account, $metamaskSignerAddress);
   };
 
   // SET URL HASH on chainId, address or account change
@@ -88,27 +90,27 @@
   const resetAddress = () => {
     address = ADDRESS_ZERO;
     resetTokenID();
-    // console.log("<Dapp resetAddress", owner);
   };
   const resetTokenID = () => {
-    owner = account;
     tokenID = "";
-    // console.log("<Dapp resetTokenID");
   };
 
   onMount(async () => {
     // GET optionnal params from URL HASH
     const _refHash = refPageFromUrlHash(window.location.hash);
-    // console.log("<Dapp get _refHash", _refHash);
+    console.log("<Dapp get _refHash", JSON.stringify(_refHash));
 
     // init Metamask
     await metamaskInit();
+    console.log("<Dapp onMount $metamaskSignerAddress:", $metamaskSignerAddress);
 
-    chainId = _refHash.chainId || $metamaskChainId || 1;
-    address = _refHash.address || ADDRESS_ZERO;
-    tokenID = _refHash.tokenID || "";
-    account = _refHash.account || $metamaskSignerAddress || ADDRESS_ZERO;
-    console.log("<Dapp account:", account, _refHash.account, $metamaskSignerAddress);
+    if (_refHash.chainId !== undefined) chainId = _refHash.chainId;
+    if (_refHash.address !== undefined) address = _refHash.address;
+    if (_refHash.tokenID !== undefined) tokenID = _refHash.tokenID;
+    if (_refHash.account !== undefined) account = _refHash.account;
+    if (_refHash.action !== undefined) action = _refHash.action;
+    if (action === "view-all") all = true;
+    console.log("<Dapp onMount account:", account, _refHash.account, all);
 
     // SET network
     await setNetwork();
@@ -128,13 +130,11 @@
   <span slot="header">
     <Title />
 
-    <Create {chainId} {signer} />
-
-    <!-- <BreadCrumb {chainId} {address} {tokenID} {account} {signer} display={true} /> -->
+    <Create {chainId} />
 
     <div class="row alignbottom">
       <div class="col col-xs-12 col-sm-3 kre-copy-ref-container">
-        <AccountConnect bind:signer />
+        <AccountConnect />
       </div>
 
       <!-- <Networks {chainId} /> -->
@@ -147,10 +147,10 @@
       </div>
 
       <div class="col col-sm-3">
-        {#if isAddressNotZero(account)}
-          <ButtonOwner {account} bind:owner />
-        {/if}
         <ButtonRefresh {refresh} />
+        {#if account && !(tokenIdCount(tokenID) == 1)}
+          <ButtonAll bind:all />
+        {/if}
       </div>
     </div>
   </span>
@@ -160,13 +160,20 @@
       {#if tokenIdCount(tokenID) == 1}
         <h2 class="m-b-20 return">
           <i class="fa fa-arrow-left fa-left" />
-          <span role="button" tabindex="0" on:click={resetTokenID} on:keydown={resetTokenID} class="link"
-            >Back to collection</span
-          >
+          <span role="button" tabindex="0" on:click={resetTokenID} on:keydown={resetTokenID} class="link">
+            Back to collection
+          </span>
         </h2>
-        <Nft {chainId} {address} {tokenID} {owner} details={true} mode="detail" />
+        <Nft {chainId} {address} {tokenID} owner={account} details={true} mode="detail" />
       {:else}
-        <Nfts {chainId} {address} {owner} bind:tokenID bind:refreshing={refreshingNfts} mode="grid6" />
+        <Nfts
+          {chainId}
+          {address}
+          owner={all ? undefined : account}
+          bind:tokenID
+          bind:refreshing={refreshingNfts}
+          mode="grid6"
+        />
       {/if}
     {/if}
   </span>

diff --git a/svelte/src/helpers/refPage.ts b/svelte/src/helpers/refPage.ts
@@ -79,12 +79,13 @@ const refPage2UrlHash = (refBreadcrumb: RefPageType): string => {
 const refPageFromUrlHash = (hash = window.location.hash): RefPageType => {
   if (!hash) return {};
 
-  // HASH = #/mainnet/0x06012c8cf97BEaD5deAe237070F9587f8E7A266d/771769/transfer@0x166d23e3db37640db80d3a576f4042bafb11886f
-  // HASH = #/chain/address/tokenID/action@account
-  const [hash1, acc] = hash.split("@");
-  const [, chain, addr, tokenID, action] = hash1.split("/");
+  // HASH = #/mainnet/0x06012c8cf97BEaD5deAe237070F9587f8E7A266d/771769@0x166d23e3db37640db80d3a576f4042bafb11886f|transfer
+  // HASH = #/chain/address/tokenID@account|action
+  const [hash1, action] = hash.split("|");
+  const [hash2, acnt] = hash1.split("@");
+  const [, chain, addr, tokenID] = hash2.split("/");
   const address = getChecksumAddress(addr);
-  const account = acc && getChecksumAddress(acc);
+  const account = acnt && getChecksumAddress(acnt);
 
   let chainName: string;
   let chainId: number;

diff --git a/sveltekit/src/lib/components/StatsNetwork.svelte b/sveltekit/src/lib/components/StatsNetwork.svelte
@@ -1,21 +1,24 @@
 <script lang="ts">
-  import type { NetworkType } from "@kredeum/common/src/common/types";
+  import type { CollectionType } 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 {
-    resolverGetCollectionsInfos,
-    resolverGetCollectionsAddresses
-  } from "@kredeum/common/src/resolver/resolver-get-collection";
-  import { ADDRESS_ZERO, explorerCollectionUrl, getDappUrl, getShortAddress } from "@kredeum/common/src/common/config";
+  import { resolverGetCollectionsInfos } from "@kredeum/common/src/resolver/resolver-get-collection";
+  import { ADDRESS_ZERO, explorerCollectionUrl, getDappUrl } from "@kredeum/common/src/common/config";
+  import { onMount } from "svelte";
 
   ///////////////////////////////////////
   // <StatsNetwork {chainId} />
   ///////////////////////////////////////
   export let chainId: number;
   ///////////////////////////////////////
 
-  resolverGetCollectionsInfos(chainId).then(console.log);
+  let collections: CollectionType[] = [];
+
+  onMount(async () => {
+    const res = await resolverGetCollectionsInfos(chainId, "0x981ab0D817710d8FFFC5693383C00D985A3BDa38");
+    collections = Array.from(res.values());
+  });
 </script>
 
 <HomeLayout>
@@ -32,29 +35,29 @@
       <caption> <h1>{networks.getChainName(chainId)} #{chainId}</h1></caption>
       <thead>
         <tr>
-          <th>Total Supply</th>
+          <th>name</th>
+          <th>Total </th>
           <th>View</th>
           <th>Collections Addresses</th>
         </tr>
       </thead>
       <tbody>
-        {#await resolverGetCollectionsAddresses(chainId)}
-          ...
-        {:then addresses}
-          {#each addresses as address}
-            <tr>
-              <td>1</td>
-              <td> 
-                <a href="{getDappUrl(chainId, { address }, '')}@{ADDRESS_ZERO}" target="_blank">view collection</a>
-              </td>
-              <td>
-                <a href={explorerCollectionUrl(chainId, address)} target="_blank">{address}</a>
-              </td>
-            </tr>
-          {/each}
-        {:catch}
-          ---
-        {/await}
+        {#each collections as collection}
+          <tr>
+            <td>{collection.name}</td>
+            <td>{collection.totalSupply} {collection.symbol}</td>
+            <td>
+              <a href={getDappUrl(chainId, { address: collection.address, action: "view-all" }, "")} target="_blank"
+                >view collection</a
+              >
+            </td>
+            <td>
+              <a href={explorerCollectionUrl(chainId, collection.address)} target="_blank">
+                {collection.address}
+              </a>
+            </td>
+          </tr>
+        {/each}
       </tbody>
     </table>
   </span>
@@ -86,7 +89,7 @@
   td {
     font-family: "Courier New", monospace;
     padding: 8px;
-    text-align: center;
+    text-align: right;
     border-bottom: 1px solid #ddd;
     width: 180px;
   }