Merge pull request #2464 from dusk-network/feature-2436

web-wallet: Update `Stake` to use `Stepper`
dusk-network · Sep 26, 2024 · 6fce285 · 6fce285
2 parents 050bf91 + 27ea228
commit 6fce285
Show file tree

Hide file tree

Showing 4 changed files with 236 additions and 9 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update `Send` to include allocation button [#2420]
 - Receive screen design updated, added UI support for displaying shielded/unshielded address [#2421]
 - Make address field only vertically resizable (Send flow) [#2435]
+- Update `Stake` to use `Stepper` [#2436]
 
 ### Fixed
 
@@ -268,6 +269,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2406]: https://github.com/dusk-network/rusk/issues/2406
 [#2420]: https://github.com/dusk-network/rusk/issues/2420
 [#2435]: https://github.com/dusk-network/rusk/issues/2435
+[#2436]: https://github.com/dusk-network/rusk/issues/2436
 
 <!-- VERSIONS -->
 

diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -18,6 +18,7 @@
     Badge,
     Button,
     Icon,
+    Stepper,
     Textbox,
     Wizard,
     WizardStep,
@@ -147,6 +148,21 @@
     return 2;
   }
 
+  function getStepperSteps() {
+    if (flow === "stake") {
+      return hideStakingNotice
+        ? [{ label: "Amount" }, { label: "Overview" }, { label: "Done" }]
+        : [
+            { label: "Notice" },
+            { label: "Amount" },
+            { label: "Overview" },
+            { label: "Done" },
+          ];
+    }
+
+    return [{ label: "Overview" }, { label: "Done" }];
+  }
+
   function setMaxAmount() {
     if (!isGasValid) {
       toast("error", "Please set valid gas settings first", mdiAlertOutline);
@@ -168,10 +184,17 @@
 
     stakeAmount = maxSpendable;
   }
+
+  const steps = getStepperSteps();
+  let activeStep = 0;
 </script>
 
 <div class="operation">
   <Wizard steps={getWizardSteps()} let:key>
+    <div slot="stepper">
+      <Stepper {activeStep} {steps} showStepLabelWhenInactive={false} />
+    </div>
+
     {#if flow === "stake"}
       {#if !hideStakingNotice}
         <!-- STAKING NOTICE STEP -->
@@ -184,6 +207,7 @@
           }}
           nextButton={{
             action: () => {
+              activeStep++;
               if (hideStakingNoticeNextTime) {
                 suppressStakingNotice();
               }
@@ -222,13 +246,20 @@
       <WizardStep
         step={hideStakingNotice ? 0 : 1}
         {key}
-        backButton={hideStakingNotice
-          ? {
-              action: resetOperation,
-              disabled: false,
+        backButton={{
+          action: () => {
+            if (hideStakingNotice) {
+              resetOperation();
+            } else {
+              activeStep--;
             }
-          : undefined}
-        nextButton={{ disabled: isNextButtonDisabled }}
+          },
+          disabled: false,
+        }}
+        nextButton={{
+          action: () => activeStep++,
+          disabled: isNextButtonDisabled,
+        }}
       >
         <ContractStatusesList items={statuses} />
         <div class="operation__amount operation__space-between">
@@ -274,10 +305,18 @@
     <WizardStep
       step={flow === "stake" ? (hideStakingNotice ? 1 : 2) : 0}
       {key}
-      backButton={flow !== "stake"
-        ? { action: resetOperation, disabled: false }
-        : undefined}
+      backButton={{
+        action: () => {
+          if (flow === "stake") {
+            activeStep--;
+          } else {
+            resetOperation();
+          }
+        },
+        disabled: false,
+      }}
       nextButton={{
+        action: () => activeStep++,
         disabled: flow === "stake" ? stakeAmount === 0 : !isGasValid,
         icon: {
           path:

diff --git a/web-wallet/src/lib/components/__tests__/Stake.spec.js b/web-wallet/src/lib/components/__tests__/Stake.spec.js
@@ -21,6 +21,16 @@ import { Stake } from "..";
 const fireInput = (input, value) =>
   fireEvent.input(input, { target: { value } });
 
+vi.mock("$lib/dusk/string", async (importOriginal) => {
+  /** @type {typeof import("$lib/dusk/string")} */
+  const original = await importOriginal();
+
+  return {
+    ...original,
+    randomUUID: () => "some-generated-id",
+  };
+});
+
 describe("Stake", () => {
   const formatter = createCurrencyFormatter("en", "DUSK", 9);
   const lastTxId = "some-id";

diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
@@ -7,6 +7,60 @@ exports[`Stake > should render the Stake component 1`] = `
   <div
     class="dusk-wizard"
   >
+    <div
+      slot="stepper"
+    >
+      <div
+        class="dusk-stepper dusk-stepper--variant--primary"
+        style="--columns: 3; --progress-width: 0%;"
+      >
+        <span
+          aria-current="step"
+          aria-labelledby="step-some-generated-id"
+          class="dusk-stepper__step dusk-stepper__step--processed"
+        >
+          1
+        </span>
+         
+        <span
+          class="dusk-stepper__step-label"
+          id="step-some-generated-id"
+        >
+          Amount
+           
+        </span>
+        <span
+          aria-labelledby="step-some-generated-id"
+          class="dusk-stepper__step"
+        >
+          2
+        </span>
+         
+        <span
+          class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+          id="step-some-generated-id"
+        >
+          Overview
+           
+        </span>
+        <span
+          aria-labelledby="step-some-generated-id"
+          class="dusk-stepper__step"
+        >
+          3
+        </span>
+         
+        <span
+          class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+          id="step-some-generated-id"
+        >
+          Done
+           
+        </span>
+        
+      </div>
+      
+    </div>
      
      
      
@@ -276,6 +330,74 @@ exports[`Stake > should render the Stake notice 1`] = `
   <div
     class="dusk-wizard"
   >
+    <div
+      slot="stepper"
+    >
+      <div
+        class="dusk-stepper dusk-stepper--variant--primary"
+        style="--columns: 4; --progress-width: 0%;"
+      >
+        <span
+          aria-current="step"
+          aria-labelledby="step-some-generated-id"
+          class="dusk-stepper__step dusk-stepper__step--processed"
+        >
+          1
+        </span>
+         
+        <span
+          class="dusk-stepper__step-label"
+          id="step-some-generated-id"
+        >
+          Notice
+           
+        </span>
+        <span
+          aria-labelledby="step-some-generated-id"
+          class="dusk-stepper__step"
+        >
+          2
+        </span>
+         
+        <span
+          class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+          id="step-some-generated-id"
+        >
+          Amount
+           
+        </span>
+        <span
+          aria-labelledby="step-some-generated-id"
+          class="dusk-stepper__step"
+        >
+          3
+        </span>
+         
+        <span
+          class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+          id="step-some-generated-id"
+        >
+          Overview
+           
+        </span>
+        <span
+          aria-labelledby="step-some-generated-id"
+          class="dusk-stepper__step"
+        >
+          4
+        </span>
+         
+        <span
+          class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+          id="step-some-generated-id"
+        >
+          Done
+           
+        </span>
+        
+      </div>
+      
+    </div>
      
      
      
@@ -416,6 +538,60 @@ exports[`Stake > should render the review step of the Stake component 1`] = `
   <div
     class="dusk-wizard"
   >
+    <div
+      slot="stepper"
+    >
+      <div
+        class="dusk-stepper dusk-stepper--variant--primary"
+        style="--columns: 3; --progress-width: 33.333333333333336%;"
+      >
+        <span
+          aria-labelledby="step-some-generated-id"
+          class="dusk-stepper__step dusk-stepper__step--processed"
+        >
+          1
+        </span>
+         
+        <span
+          class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+          id="step-some-generated-id"
+        >
+          Amount
+           
+        </span>
+        <span
+          aria-current="step"
+          aria-labelledby="step-some-generated-id"
+          class="dusk-stepper__step dusk-stepper__step--processed"
+        >
+          2
+        </span>
+         
+        <span
+          class="dusk-stepper__step-label"
+          id="step-some-generated-id"
+        >
+          Overview
+           
+        </span>
+        <span
+          aria-labelledby="step-some-generated-id"
+          class="dusk-stepper__step"
+        >
+          3
+        </span>
+         
+        <span
+          class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+          id="step-some-generated-id"
+        >
+          Done
+           
+        </span>
+        
+      </div>
+      
+    </div>