Merge pull request #6 from marigold-dev/example-nft-qol

Minor change in the interface of examples/nft.

.github/workflows/docker-nft-ghostnet-staging.yml

@@ -34,7 +34,6 @@ jobs:
           set -x
           ls -last .
           sed -i 's|http://localhost:8000|https://staging.gas-station-api.marigold.dev|g' ./examples/nft/.env
-          sed -i 's|KT1Rp1rgfwS25XrWU6fUnR8cw6KMZBhDvXdq|KT1K9X6QpuTWFX4S5ieDGTUdjAHQtiFRH5op|g' ./examples/nft/.env
           cat ./examples/nft/.env
 
       - name: Set up Docker Buildx

examples/nft/.env

@@ -2,5 +2,5 @@ PUBLIC_TZKT_API=https://api.ghostnet.tzkt.io
 PUBLIC_TEZOS_RPC=https://ghostnet.smartpy.io
 PUBLIC_GAS_STATION_API=http://localhost:8000
 PUBLIC_PERMIT=KT1HUdxmgZUw21ED9gqELVvCty5d1ff41p7J
-PUBLIC_STAKING_CONTRACT=KT1Rp1rgfwS25XrWU6fUnR8cw6KMZBhDvXdq # GHOSTNET : KT1MLMXwFEMcfByGbGcQ9ow3nsrQCkLbcRAu
+PUBLIC_STAKING_CONTRACT=KT1VVotciVbvz1SopVfoXsxXcpyBBSryQgEn
 PUBLIC_APP_BASE_URL=http://localhost:5173

examples/nft/src/lib/MintingComponent.svelte

@@ -4,11 +4,14 @@
   import { PUBLIC_GAS_STATION_API, PUBLIC_PERMIT, PUBLIC_TZKT_API } from '$env/static/public';
 
   export let user_address = '';
+  export let available_token_ids = new Set<string>(); // to be shared with StakingComponent
 
-
-  const token_id = 0;
   let user_tokens: any[] = [];
 
+  function randomInt(max) {
+    return Math.floor(Math.random() * max);
+  }
+
   function IPFSLinkToHTTPS(url: string) {
     return url.replace("ipfs://", "https://ipfs.io/ipfs/");
   }
@@ -24,6 +27,7 @@
     };
 
   function mint(user_address: string) {
+    const token_id = randomInt(6);
       (async () => {
           const gas_api = new GasStation({
             apiURL: PUBLIC_GAS_STATION_API
@@ -52,6 +56,9 @@
   subTezos(() => {
     get_tokens(user_address)
   });
+
+  // Maintain the set of available token IDs to pick one in the stash operation
+  $: available_token_ids = new Set(user_tokens.map(token => token.token.tokenId));
 </script>
 
 <div style="display: flex">
@@ -65,12 +72,16 @@
     {#if user_tokens.length == 0}
       <p>You don't have any tokens. Try minting one!</p>
     {:else}
-      {#each user_tokens as token, i}
-        <div>
-          <img src="{IPFSLinkToHTTPS(token.token.metadata.thumbnailUri)}" alt="Token thumnail"/>
-          <div style="text-align: center; font-size:14px">{token.balance}</div>
-        </div>
-      {/each}
+      <div style="display:flex;align-items:center;justify-content:center;">
+        {#each user_tokens as token, i}
+          <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;">
+            {#if Object.hasOwn(token.token, "metadata")}
+              <img src="{IPFSLinkToHTTPS(token.token.metadata.thumbnailUri)}" alt="Token thumnail"/>
+              <div style="text-align: center; font-size:14px">{token.balance}</div>
+            {/if}
+          </div>
+        {/each}
+      </div>
     {/if}
   </div>
 </div>

examples/nft/src/lib/StakingComponent.svelte

@@ -5,8 +5,7 @@
   import { SigningType } from "@airgap/beacon-types";
 
   export let user_address = '';
-
-  const token_id = 0;
+  export let available_token_ids = new Set<string>();
 
   let user_tokens: any[] = [];
 
@@ -24,7 +23,12 @@
       });
   };
 
-  function stake(user_address: string) {
+  function stash(user_address: string) {
+    const n = available_token_ids?.size;
+    if (n === 0) {
+      return;
+    }
+    const token_id = [...available_token_ids][Math.floor(Math.random() * n)];
     // √ Build the transfer
     // √ Build the permit
     // √ Ask to sign the permit
@@ -53,7 +57,7 @@
       const activeAccount = await wallet.client.getActiveAccount();
 
       if (!activeAccount) {
-        throw new Error('No active account, cannot stake')
+        throw new Error('No active account, cannot stash.')
       }
 
       const permit_op = await permit_contract.permitCall({
@@ -64,8 +68,9 @@
       console.log(permit_op);
       console.log("ok");
       const staking_contract = await Tezos.wallet.at(PUBLIC_STAKING_CONTRACT);
-      const staking_op = await staking_contract.methods.stake(
+      const staking_op = await staking_contract.methods.stash(
         1,
+        token_id,
         user_address
       ).toTransferParams();
 
@@ -88,25 +93,30 @@
   subTezos(() => {
     get_tokens(PUBLIC_STAKING_CONTRACT)
   });
-</script>
 
+  $: console.log(available_token_ids);
+</script>
 <div style="display: flex">
   <div>
-    <button on:click={() => stake(user_address)}>
-      stake
+    <button on:click={() => stash(user_address)}>
+      stash
     </button>
   </div>
 
   <div>
     {#if user_tokens.length == 0}
-      <p>You don't have any tokens staked.</p>
+      <p>You don't have any tokens stashed.</p>
     {:else}
-      {#each user_tokens as token, i}
-        <div>
-          <img src="{IPFSLinkToHTTPS(token.token.metadata.thumbnailUri)}" alt="Token thumnail"/>
-          <div style="text-align: center; font-size:14px">{token.balance}</div>
-        </div>
-      {/each}
+      <div style="display:flex;align-items:center;justify-content:center;">
+        {#each user_tokens as token, i}
+          <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;">
+            {#if Object.hasOwn(token.token, "metadata")}
+              <img src="{IPFSLinkToHTTPS(token.token.metadata.thumbnailUri)}" alt="Token thumnail"/>
+              <div style="text-align: center; font-size:14px">{token.balance}</div>
+            {/if}
+          </div>
+        {/each}
+      </div>
     {/if}
   </div>
 </div>

examples/nft/src/routes/+page.svelte

@@ -3,20 +3,31 @@
   import MintingComponent from "$lib/MintingComponent.svelte";
   import StakingComponent from "$lib/StakingComponent.svelte";
   import { PUBLIC_PERMIT, PUBLIC_STAKING_CONTRACT } from '$env/static/public';
+
+  // Shared between the two components
+  let available_token_ids;
 </script>
 
-<h1>Permit demo</h1>
+<h1>Gas station demo</h1>
+
+<p>This simple dApp can be used by a user having no ꜩ in their wallet, with operations being relayed
+  by the Gas Station. <emph>Minting</emph> a new NFT is done by a single call to the smart contract.
+  However, <emph>stashing</emph> an NFT to another smart contract requires a transfer, which must be
+  authorized off-chain through the signature of a permit.</p>
+
 <div>
   {#if $myAccount == undefined}
-    You're not connected.
+    <p>Please connect to use the dApp.</p>
   {:else}{#await getPKH() then pkh}
     <section>
       <h2>NFTs in your wallet</h2>
-      <MintingComponent user_address={pkh} />
+      <p>{PUBLIC_PERMIT}</p>
+      <MintingComponent user_address={pkh} bind:available_token_ids />
     </section>
     <section>
-      <h2>Staked NFTs</h2>
-      <StakingComponent user_address={pkh} />
+      <h2>Stashed NFTs</h2>
+      <p>{PUBLIC_STAKING_CONTRACT}</p>
+      <StakingComponent user_address={pkh} bind:available_token_ids />
     </section>
   {/await}
   {/if}
@@ -61,6 +72,6 @@
   }
 
   p {
-    font-size: 16px;
+    font-size: 18px;
   }
 </style>

index.ts

@@ -126,7 +126,7 @@ export class PermitContract {
     const permit_bytes = packDataBytes(permit_data, permit_type).bytes;
 
     console.info("Permit bytes :", permit_bytes);
-    console.info("Transfert hash : ", transfer_hash);
+    console.info("Transfer hash : ", transfer_hash);
     return { bytes: permit_bytes, transfer_hash: transfer_hash };
   }
 
@@ -137,7 +137,7 @@ export class PermitContract {
       .permit([[op.publicKey, op.signature, op.transferHash]])
       .toTransferParams();
 
-    console.info("Transfert params", call);
+    console.info("Transfer params", call);
 
     return call;
   }