From 670e1e0b98e72f2965f8cf3b1364baa333bb6ccc Mon Sep 17 00:00:00 2001
From: Quentin Burg <quentin@marigold.dev>
Date: Mon, 22 Jan 2024 16:24:54 +0100
Subject: [PATCH] :bug: fix progress bar display

---
 examples/nft/src/lib/MintingComponent.svelte | 16 +++++++++++++++-
 examples/nft/src/lib/Nav.svelte              |  2 +-
 examples/nft/src/lib/StakingComponent.svelte | 20 +++++++++++++++++---
 examples/nft/src/routes/+page.svelte         | 11 -----------
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/examples/nft/src/lib/MintingComponent.svelte b/examples/nft/src/lib/MintingComponent.svelte
index 6340d08..1a6ae3b 100644
--- a/examples/nft/src/lib/MintingComponent.svelte
+++ b/examples/nft/src/lib/MintingComponent.svelte
@@ -17,7 +17,7 @@
 
   /*** Generate a random integer up to a given maximum value.
    *   It uses to generate a random token ID when minting. */
-  function randomInt(max) {
+  function randomInt(max: number) {
     return Math.floor(Math.random() * max);
   }
 
@@ -138,3 +138,17 @@
     {/if}
   </div>
 </div>
+
+<style>
+  .progress-bar {
+      background-color: #eee; /* Light gray background for the progress bar */
+      border: 1px solid #ccc; /* Border for the progress bar */
+      border-radius: 15px; /* Rounded corners */
+      height: 10px;
+    }
+
+  .progress-bar-fill {
+      background-color: #0074cc; /* Color for the filled part of the progress bar */
+      height: 100%; /* Fill the entire height of the progress bar */
+    }
+</style>
\ No newline at end of file
diff --git a/examples/nft/src/lib/Nav.svelte b/examples/nft/src/lib/Nav.svelte
index de31c0a..e1b1fd7 100644
--- a/examples/nft/src/lib/Nav.svelte
+++ b/examples/nft/src/lib/Nav.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { myAccount, connectWallet, getPKH } from '$lib/tezos';
 
-  function truncate_address(str) {
+  function truncate_address(str: string) {
     if (str.length > 25) {
       return str.substr(0, 10) + '...' + str.substr(str.length-5, str.length);
     }
diff --git a/examples/nft/src/lib/StakingComponent.svelte b/examples/nft/src/lib/StakingComponent.svelte
index 6b2c03b..a8d49c9 100644
--- a/examples/nft/src/lib/StakingComponent.svelte
+++ b/examples/nft/src/lib/StakingComponent.svelte
@@ -51,7 +51,7 @@
   }
 
   // Add progress bar for stashing
-  let isStashing = true;
+  let isStashing = false;
   let stashProgress = 0;
 
   /**
@@ -94,7 +94,7 @@
           txs: [
             {
               to_: PUBLIC_STAKING_CONTRACT,
-              token_id: token_id,
+              token_id: parseInt(token_id, 10),
               amount: 1,
             },
           ],
@@ -168,12 +168,12 @@
     <!-- Stash Button with Progress Bar -->
     <button on:click={() => stash(user_address)}>
       {isStashing ? "Stashing..." : "Stash"}
+    </button>
       {#if isStashing}
         <div class="progress-bar">
           <div class="progress-bar-fill" style="width: {stashProgress}%"></div>
         </div>
       {/if}
-    </button>
   </div>
 
   <div>
@@ -200,3 +200,17 @@
     {/if}
   </div>
 </div>
+
+<style>
+  .progress-bar {
+      background-color: #eee; /* Light gray background for the progress bar */
+      border: 1px solid #ccc; /* Border for the progress bar */
+      border-radius: 15px; /* Rounded corners */
+      height: 10px;
+    }
+
+  .progress-bar-fill {
+      background-color: #0074cc; /* Color for the filled part of the progress bar */
+      height: 100%; /* Fill the entire height of the progress bar */
+    }
+</style>
\ No newline at end of file
diff --git a/examples/nft/src/routes/+page.svelte b/examples/nft/src/routes/+page.svelte
index aa5660b..5fc7616 100644
--- a/examples/nft/src/routes/+page.svelte
+++ b/examples/nft/src/routes/+page.svelte
@@ -81,15 +81,4 @@
   p {
     font-size: 18px;
   }
-
-  .progress-bar {
-    background-color: #eee; /* Light gray background for the progress bar */
-    border: 1px solid #ccc; /* Border for the progress bar */
-    border-radius: 4px; /* Rounded corners */
-  }
-
-  .progress-bar-fill {
-    background-color: #0074cc; /* Color for the filled part of the progress bar */
-    height: 100%; /* Fill the entire height of the progress bar */
-  }
 </style>