Merge pull request #2233 from dusk-network/feature-2175-split-transfe…

…r-view web-wallet: Split transfer contract UI
dusk-network · Sep 1, 2024 · f2990d2 · f2990d2
2 parents d59475d + 50bab51
commit f2990d2
Show file tree

Hide file tree

Showing 18 changed files with 578 additions and 318 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update Buttons to match the design system [#1606]
 - Update `Stepper` component to new design [#2071]
 - 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]
 
 ### Fixed
 
@@ -238,7 +239,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2026]: https://github.com/dusk-network/rusk/issues/2026
 [#2000]: https://github.com/dusk-network/rusk/issues/2000
 [#2071]: https://github.com/dusk-network/rusk/issues/2071
+[#2071]: https://github.com/dusk-network/rusk/issues/2075
 [#2118]: https://github.com/dusk-network/rusk/issues/2118
+[#2118]: https://github.com/dusk-network/rusk/issues/2175
 
 <!-- VERSIONS -->
 

diff --git a/web-wallet/src/lib/components/Receive/Receive.svelte b/web-wallet/src/lib/components/Receive/Receive.svelte
@@ -1,9 +1,9 @@
 <svelte:options immutable={true} />
 
 <script>
-  import { createEventDispatcher } from "svelte";
   import { mdiArrowLeft, mdiContentCopy } from "@mdi/js";
 
+  import { AppAnchorButton } from "$lib/components";
   import { Button, QrCode } from "$lib/dusk/components";
   import { toast } from "$lib/dusk/components/Toast/store";
 
@@ -20,8 +20,6 @@
   const COLUMN_WIDTH = 16;
   const BOTTOM_PADDING = 22;
 
-  const dispatch = createEventDispatcher();
-
   $: qrWidth =
     offsetHeight - buttonHeight - COLUMN_COUNT * COLUMN_WIDTH - BOTTOM_PADDING;
 </script>
@@ -37,12 +35,10 @@
 
   <div class="receive__buttons" bind:offsetHeight={buttonHeight}>
     {#if !hideBackButton}
-      <Button
+      <AppAnchorButton
         className="receive__button"
         icon={{ path: mdiArrowLeft }}
-        on:click={() => {
-          dispatch("operationChange", "");
-        }}
+        href="/dashboard"
         text="Back"
         variant="tertiary"
       />

diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte
@@ -2,9 +2,8 @@
 
 <script>
   import { fade } from "svelte/transition";
-  import { createEventDispatcher, onMount } from "svelte";
+  import { onMount } from "svelte";
   import { mdiArrowUpBoldBoxOutline, mdiWalletOutline } from "@mdi/js";
-
   import { areValidGasSettings, deductLuxFeeFrom } from "$lib/contracts";
   import { duskToLux, luxToDusk } from "$lib/dusk/currency";
   import { validateAddress } from "$lib/dusk/string";
@@ -61,15 +60,14 @@
 
   /** @type {boolean} */
   let isNextButtonDisabled = false;
+
+  /** @type {boolean} */
   let isGasValid = false;
 
   let { gasLimit, gasPrice } = gasSettings;
 
   const minAmount = 0.000000001;
 
-  const dispatch = createEventDispatcher();
-  const resetOperation = () => dispatch("operationChange", "");
-
   onMount(() => {
     amountInput = document.querySelector(".operation__input-field");
     isGasValid = areValidGasSettings(gasPrice, gasLimit);
@@ -82,7 +80,6 @@
   $: totalLuxFee = luxFee + duskToLux(amount);
   $: isFeeWithinLimit = totalLuxFee <= duskToLux(spendable);
   $: isNextButtonDisabled = !(isAmountValid && isGasValid && isFeeWithinLimit);
-
   $: addressValidationResult = validateAddress(address);
 </script>
 
@@ -92,8 +89,9 @@
       step={0}
       {key}
       backButton={{
-        action: resetOperation,
         disabled: false,
+        href: "/dashboard",
+        isAnchor: true,
       }}
       nextButton={{ disabled: isNextButtonDisabled }}
     >
@@ -237,7 +235,6 @@
     <WizardStep step={3} {key} showNavigation={false}>
       <OperationResult
         errorMessage="Transaction failed"
-        onBeforeLeave={resetOperation}
         operation={execute(address, amount, gasPrice, gasLimit)}
         pendingMessage="Processing transaction"
         successMessage="Transaction completed"
@@ -246,7 +243,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/__tests__/__snapshots__/Send.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Send.spec.js.snap
@@ -317,12 +317,13 @@ exports[`Send > Amount step > should render the Send component Amount step 1`] =
     <div
       class="dusk-wizard__step-navigation"
     >
-      <button
-        class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--default dusk-icon-button--labeled"
-        type="button"
+      <a
+        aria-disabled="false"
+        class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--default dusk-icon-button--labeled"
+        href="/some-base-path/dashboard"
       >
         <svg
-          class="dusk-icon dusk-icon--size--default dusk-button__icon"
+          class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
           role="graphics-symbol"
           viewBox="0 0 24 24"
         >
@@ -333,12 +334,13 @@ exports[`Send > Amount step > should render the Send component Amount step 1`] =
         
          
         <span
-          class="dusk-button__text"
+          class="dusk-anchor-button__text"
         >
           Back
         </span>
         
-      </button>
+        
+      </a>
       
        
       <button

diff --git a/web-wallet/src/lib/containers/TransferContract/TransferContract.svelte b/web-wallet/src/lib/containers/TransferContract/TransferContract.svelte
diff --git a/web-wallet/src/lib/containers/index.js b/web-wallet/src/lib/containers/index.js
@@ -1,4 +1,3 @@
 export { default as AllocateContract } from "./AllocateContract/AllocateContract.svelte";
 export { default as MigrateContract } from "./MigrateContract/MigrateContract.svelte";
 export { default as StakeContract } from "./StakeContract/StakeContract.svelte";
-export { default as TransferContract } from "./TransferContract/TransferContract.svelte";
diff --git a/web-wallet/src/lib/contracts/contract-descriptors.js b/web-wallet/src/lib/contracts/contract-descriptors.js
@@ -10,22 +10,17 @@ export default [
     disabled:
       import.meta.env.VITE_CONTRACT_TRANSFER_DISABLED &&
       import.meta.env.VITE_CONTRACT_TRANSFER_DISABLED === "true",
-    id: "transfer",
-    label: "Transact",
-    operations: [
-      {
-        disabled: false,
-        id: "send",
-        label: "Send",
-        primary: true,
-      },
-      {
-        disabled: false,
-        id: "receive",
-        label: "Receive",
-        primary: false,
-      },
-    ],
+    id: "send",
+    label: "Send",
+    operations: [],
+  },
+  {
+    disabled:
+      import.meta.env.VITE_CONTRACT_TRANSFER_DISABLED &&
+      import.meta.env.VITE_CONTRACT_TRANSFER_DISABLED === "true",
+    id: "receive",
+    label: "Receive",
+    operations: [],
   },
   {
     disabled:

diff --git a/web-wallet/src/routes/(app)/dashboard/+page.svelte b/web-wallet/src/routes/(app)/dashboard/+page.svelte
@@ -3,6 +3,8 @@
 <script>
   import { filterWith, hasKeyValue } from "lamb";
   import {
+    mdiArrowBottomLeft,
+    mdiArrowTopRight,
     mdiContain,
     mdiDatabaseOutline,
     mdiSwapVertical,
@@ -26,6 +28,12 @@
       case "allocate":
         icons = [{ path: mdiSync }];
         break;
+      case "receive":
+        icons = [{ path: mdiArrowBottomLeft }];
+        break;
+      case "send":
+        icons = [{ path: mdiArrowTopRight }];
+        break;
       case "staking":
         icons = [{ path: mdiDatabaseOutline }];
         break;