Introduce Stepper and allocation to Send flow

Resolves #2110, #2420.
dusk-network · Sep 20, 2024 · 02e453a · 02e453a
1 parent 204431f
commit 02e453a
Show file tree

Hide file tree

Showing 19 changed files with 985 additions and 647 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -18,7 +18,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Receive screen design updated, added UI support for displaying shielded/unshielded address [#2421]
 - Restrict mnemonic step input to alphabetical characters (Restore Flow) [#2355]
 - Newly created Wallet does not sync from genesis [#1567]
 - Update font-display to swap for custom fonts to improve performance [#2026]
@@ -29,6 +28,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update dashboard to use routes instead of `Tabs` for navigation pattern [#2075]
 - Update dashboard by splitting the transfer operations into send and receive operations [#2175]
 - Update decimals shown for migration balance [#2406]
+- Update `Balance` UI to include an optional `UsageIndicator` for Moonlight tokens [#2234]
+- Receive screen design updated, added UI support for displaying shielded/unshielded address [#2421]
+- Update `Send` to use `Stepper` [#2110]
+- Update `Send` to include allocation button [#2420]
 
 ### Fixed
 
@@ -261,7 +264,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2310]: https://github.com/dusk-network/rusk/issues/2310
 [#2355]: https://github.com/dusk-network/rusk/issues/2355
 [#2406]: https://github.com/dusk-network/rusk/issues/2406
-[#2421]: https://github.com/dusk-network/rusk/issues/2421
+[#2234]: https://github.com/dusk-network/rusk/issues/2234
+[#2110]: https://github.com/dusk-network/rusk/issues/2110
+[#2420]: https://github.com/dusk-network/rusk/issues/2420
 
 <!-- VERSIONS -->
 

diff --git a/web-wallet/src/lib/components/Allocate/Allocate.svelte b/web-wallet/src/lib/components/Allocate/Allocate.svelte
@@ -2,7 +2,7 @@
 
 <script>
   import { fade } from "svelte/transition";
-  import { createEventDispatcher, onMount } from "svelte";
+  import { onMount } from "svelte";
   import {
     mdiArrowUpBoldBoxOutline,
     mdiShieldLock,
@@ -68,8 +68,6 @@
   let screenWidth = window.innerWidth;
 
   const minAmount = 0.000000001;
-  const dispatch = createEventDispatcher();
-  const resetOperation = () => dispatch("operationChange", "");
 
   onMount(() => {
     isGasValid = areValidGasSettings(gasPrice, gasLimit);
@@ -280,7 +278,6 @@
     <WizardStep step={2} {key} showNavigation={false}>
       <OperationResult
         errorMessage="Transaction failed"
-        onBeforeLeave={resetOperation}
         operation={execute(
           isFromShielded ? unshieldedAddress : shieldedAddress,
           isFromShielded ? unshieldedAmount : shieldedAmount,
@@ -294,7 +291,6 @@
           {#if hash}
             <AppAnchorButton
               href={`https://explorer.dusk.network/transactions/transaction?id=${hash}`}
-              on:click={resetOperation}
               text="VIEW ON BLOCK EXPLORER"
               rel="noopener noreferrer"
               target="_blank"

diff --git a/web-wallet/src/lib/components/ContractStatusesList/ContractStatusesList.svelte b/web-wallet/src/lib/components/ContractStatusesList/ContractStatusesList.svelte
@@ -8,22 +8,25 @@
   export let items;
 </script>
 
-<dl class="contract-statuses">
-  {#each items as status (status.label)}
-    <dt class="contract-statuses__label">
-      {status.label}
-    </dt>
-    <dd class="contract-statuses__value">
-      <span>{status.value}</span>
-      <Icon
-        className="contract-statuses__icon"
-        path={logo}
-        data-tooltip-id="main-tooltip"
-        data-tooltip-text="DUSK"
-      />
-    </dd>
-  {/each}
-</dl>
+<div class="contract-statuses">
+  <dl class="contract-statuses__list">
+    {#each items as status (status.label)}
+      <dt class="contract-statuses__label">
+        {status.label}
+      </dt>
+      <dd class="contract-statuses__value">
+        <span>{status.value}</span>
+        <Icon
+          className="contract-statuses__icon"
+          path={logo}
+          data-tooltip-id="main-tooltip"
+          data-tooltip-text="DUSK"
+        />
+      </dd>
+    {/each}
+  </dl>
+  <slot />
+</div>
 
 <style lang="postcss">
   .contract-statuses {
@@ -34,11 +37,20 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    gap: 0.625em;
+    gap: var(--small-gap);
+
+    &__list {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 0.625em;
+    }
 
     &__label,
     &__value {
       flex: 1 1 calc(50% - 0.625em / 2);
+      line-height: 150%;
     }
 
     &__label {

diff --git a/web-wallet/src/lib/components/OperationResult/OperationResult.svelte b/web-wallet/src/lib/components/OperationResult/OperationResult.svelte
@@ -26,10 +26,7 @@
   /** @type {string} */
   export let successMessage = "Operation completed";
 
-  /** @param {Event} event */
-  function handleGoHomeClick(event) {
-    event.preventDefault();
-
+  function handleGoHomeClick() {
     onBeforeLeave && onBeforeLeave();
   }
 

diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte
@@ -16,6 +16,7 @@
     Badge,
     Button,
     Icon,
+    Stepper,
     Textbox,
     Wizard,
     WizardStep,
@@ -48,6 +49,9 @@
   /** @type {GasStoreContent} */
   export let gasLimits;
 
+  /** @type {boolean} */
+  export let disableAllocateButton = false;
+
   /** @type {number} */
   let amount = 1;
 
@@ -72,6 +76,12 @@
   let { gasLimit, gasPrice } = gasSettings;
 
   const minAmount = 0.000000001;
+  const steps = [
+    { label: "Address" },
+    { label: "Amount" },
+    { label: "Review" },
+    { label: "Done" },
+  ];
 
   onMount(() => {
     amountInput = document.querySelector(".operation__input-field");
@@ -108,10 +118,15 @@
 
     amount = maxSpendable;
   }
+
+  let activeStep = 0;
 </script>
 
 <div class="operation">
-  <Wizard steps={4} let:key>
+  <Wizard steps={steps.length} let:key>
+    <div slot="stepper">
+      <Stepper {activeStep} {steps} showStepLabelWhenInactive={false} />
+    </div>
     <WizardStep
       step={0}
       {key}
@@ -120,10 +135,69 @@
         href: "/dashboard",
         isAnchor: true,
       }}
-      nextButton={{ disabled: isNextButtonDisabled }}
+      nextButton={{
+        action: () => {
+          activeStep = 1;
+        },
+        disabled: !addressValidationResult.isValid,
+      }}
     >
       <div in:fade|global class="operation__send">
-        <ContractStatusesList items={statuses} />
+        <div class="operation__send-amount operation__space-between">
+          <p>Enter address:</p>
+          <Button
+            disabled={!scanner}
+            size="small"
+            on:click={() => {
+              scanQrComponent.startScan();
+            }}
+            text="SCAN QR"
+          />
+        </div>
+        <Textbox
+          className="operation__send-address
+          {!addressValidationResult.isValid
+            ? 'operation__send-address--invalid'
+            : ''}"
+          type="multiline"
+          bind:value={address}
+        />
+        <ScanQR
+          bind:this={scanQrComponent}
+          bind:scanner
+          on:scan={(event) => {
+            address = event.detail;
+          }}
+        />
+      </div>
+    </WizardStep>
+    <WizardStep
+      step={1}
+      {key}
+      backButton={{
+        action: () => {
+          activeStep = 0;
+        },
+      }}
+      nextButton={{
+        action: () => {
+          activeStep = 2;
+        },
+        disabled: isNextButtonDisabled,
+      }}
+    >
+      <div in:fade|global class="operation__send">
+        <ContractStatusesList items={statuses}>
+          {#if !disableAllocateButton}
+            <AppAnchorButton
+              className="allocate-button"
+              href="/dashboard/allocate"
+              text="Shield more DUSK"
+              variant="tertiary"
+            />
+          {/if}
+        </ContractStatusesList>
+
         <div class="operation__send-amount operation__space-between">
           <p>Enter amount:</p>
           <Button
@@ -172,44 +246,18 @@
         />
       </div>
     </WizardStep>
-    <WizardStep
-      step={1}
-      {key}
-      nextButton={{ disabled: !addressValidationResult.isValid }}
-    >
-      <div in:fade|global class="operation__send">
-        <ContractStatusesList items={statuses} />
-
-        <div class="operation__send-amount operation__space-between">
-          <p>Enter address:</p>
-          <Button
-            disabled={!scanner}
-            size="small"
-            on:click={() => {
-              scanQrComponent.startScan();
-            }}
-            text="SCAN QR"
-          />
-        </div>
-        <Textbox
-          className="operation__send-address
-						{!addressValidationResult.isValid ? 'operation__send-address--invalid' : ''}"
-          type="multiline"
-          bind:value={address}
-        />
-        <ScanQR
-          bind:this={scanQrComponent}
-          bind:scanner
-          on:scan={(event) => {
-            address = event.detail;
-          }}
-        />
-      </div>
-    </WizardStep>
     <WizardStep
       step={2}
       {key}
+      backButton={{
+        action: () => {
+          activeStep = 1;
+        },
+      }}
       nextButton={{
+        action: () => {
+          activeStep = 3;
+        },
         icon: { path: mdiArrowUpBoldBoxOutline, position: "before" },
         label: "SEND",
         variant: "primary",
@@ -354,4 +402,8 @@
   :global(.operation__send-address--invalid) {
     color: var(--error-color);
   }
+
+  :global(.allocate-button) {
+    width: 100%;
+  }
 </style>