🐛 fix progress bar display

marigold-dev · Jan 22, 2024 · f3a7b00 · f3a7b00
1 parent e960a99
commit f3a7b00
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git 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>
diff --git 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
@@ -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>
diff --git 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>