Merge pull request #3262 from dusk-network/feature-3259

web-wallet: Prioritize Public Account in the interface
dusk-network · Dec 21, 2024 · 656c655 · 656c655
2 parents 43c99fc + 04094df
commit 656c655
Show file tree

Hide file tree

Showing 13 changed files with 150 additions and 146 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Update Transactions list design [#1922]
+- Prioritize Public Account in the interface and transaction flows [#3259]
 
 ### Removed
 
@@ -23,6 +24,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix wrong error shown in the login screen [#3226] [#3097]
 - Fix wallet not waiting for the Wasm to load at startup [#3238]
+- Fix Public address icon in Receive flow [#3259]
+- Fix Public account icon hover text (Balance component) [#3259]
 
 ## [0.10.1] - 2024-12-18
 
@@ -474,6 +477,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3226]: https://github.com/dusk-network/rusk/issues/3226
 [#3238]: https://github.com/dusk-network/rusk/issues/3238
 [#3245]: https://github.com/dusk-network/rusk/issues/3245
+[#3259]: https://github.com/dusk-network/rusk/issues/3259
 
 <!-- VERSIONS -->
 

diff --git a/web-wallet/src/lib/components/Allocate/Allocate.svelte b/web-wallet/src/lib/components/Allocate/Allocate.svelte
@@ -157,31 +157,32 @@
       <div in:fade|global class="operation__allocate">
         <p>
           Edit the value to change the allocation of your Dusk between your
-          shielded and public accounts.
+          public and shielded accounts.
         </p>
 
         <fieldset class="operation__fieldset">
-          <p class="operation__label">Shielded</p>
+          <p class="operation__label">Public</p>
 
           <div class="operation__address-wrapper">
-            <Icon path={mdiShieldLock} />
+            <Icon path={mdiShieldLockOpenOutline} />
             {middleEllipsis(
-              shieldedAddress,
+              unshieldedAddress,
               calculateAdaptiveCharCount(screenWidth, 320, 640, 5, 20)
             )}
           </div>
 
           <div class="operation__input-wrapper">
             <Textbox
               className="operation__input-field"
-              value={shieldedNumber}
+              value={unshieldedNumber}
               required
               type="number"
-              step="0.000000001"
               max={luxToDusk(totalBalance)}
               min="0"
+              step="0.000000001"
+              id="unshielded-amount"
               on:input={handleBalanceChange}
-              name="shielded-amount"
+              name="unshielded-amount"
             />
             <Icon
               data-tooltip-id="main-tooltip"
@@ -192,28 +193,27 @@
 
           <hr class="glyph" />
 
-          <p class="operation__label">Public</p>
+          <p class="operation__label">Shielded</p>
 
           <div class="operation__address-wrapper">
-            <Icon path={mdiShieldLockOpenOutline} />
+            <Icon path={mdiShieldLock} />
             {middleEllipsis(
-              unshieldedAddress,
+              shieldedAddress,
               calculateAdaptiveCharCount(screenWidth, 320, 640, 5, 20)
             )}
           </div>
 
           <div class="operation__input-wrapper">
             <Textbox
               className="operation__input-field"
-              value={unshieldedNumber}
+              value={shieldedNumber}
               required
               type="number"
+              step="0.000000001"
               max={luxToDusk(totalBalance)}
               min="0"
-              step="0.000000001"
-              id="unshielded-amount"
               on:input={handleBalanceChange}
-              name="unshielded-amount"
+              name="shielded-amount"
             />
             <Icon
               data-tooltip-id="main-tooltip"

diff --git a/web-wallet/src/lib/components/Balance/Balance.svelte b/web-wallet/src/lib/components/Balance/Balance.svelte
@@ -72,13 +72,13 @@
     <div class="dusk-balance__account">
       <span class="dusk-balance__percentage"
         ><Icon
-          path={mdiShieldLock}
+          path={mdiShieldLockOpenOutline}
           data-tooltip-id="main-tooltip"
-          data-tooltip-text="Shielded"
-        />{numberFormatter(shieldedPercentage)}%</span
+          data-tooltip-text="Public"
+        />{numberFormatter(unshieldedPercentage)}%</span
       >
       <span class="dusk-balance__value"
-        >{duskFormatter(luxToDusk(shieldedAmount))}<Icon
+        >{duskFormatter(luxToDusk(unshieldedAmount))}<Icon
           data-tooltip-id="main-tooltip"
           data-tooltip-text="DUSK"
           path={logo}
@@ -88,13 +88,13 @@
     <div class="dusk-balance__account">
       <span class="dusk-balance__percentage"
         ><Icon
-          path={mdiShieldLockOpenOutline}
+          path={mdiShieldLock}
           data-tooltip-id="main-tooltip"
-          data-tooltip-text="Unshielded"
-        />{numberFormatter(unshieldedPercentage)}%</span
+          data-tooltip-text="Shielded"
+        />{numberFormatter(shieldedPercentage)}%</span
       >
       <span class="dusk-balance__value"
-        >{duskFormatter(luxToDusk(unshieldedAmount))}<Icon
+        >{duskFormatter(luxToDusk(shieldedAmount))}<Icon
           data-tooltip-id="main-tooltip"
           data-tooltip-text="DUSK"
           path={logo}

diff --git a/web-wallet/src/lib/components/__tests__/Balance.spec.js b/web-wallet/src/lib/components/__tests__/Balance.spec.js
@@ -49,19 +49,19 @@ describe("Balance", () => {
   it("should display the right percentage values", async () => {
     const { container } = render(Balance, baseOptions);
 
-    // Check if shielded percentage displays as 33.33%
+    // Check if public percentage displays as 66.67%
     expect(
       container.querySelector(
         ".dusk-balance__account:first-child .dusk-balance__percentage"
       )?.textContent
-    ).toContain("33.33%");
+    ).toContain("66.67%");
 
-    // Check if unshielded percentage displays as 66.67%
+    // Check if shielded percentage displays as 33.33%
     expect(
       container.querySelector(
         ".dusk-balance__account:last-child .dusk-balance__percentage"
       )?.textContent
-    ).toContain("66.67%");
+    ).toContain("33.33%");
   });
 
   it("should display the right percentage values when balance is zero", async () => {

diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Balance.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Balance.spec.js.snap
@@ -50,23 +50,23 @@ exports[`Balance > renders the Balance component 1`] = `
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
-            data-tooltip-text="Shielded"
+            data-tooltip-text="Public"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
             <path
-              d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
+              d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
             />
           </svg>
           
-          33.33
+          66.67
           %
         </span>
          
         <span
           class="dusk-balance__value"
         >
-          0.001000000
+          0.002000000
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
@@ -91,23 +91,23 @@ exports[`Balance > renders the Balance component 1`] = `
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
-            data-tooltip-text="Unshielded"
+            data-tooltip-text="Shielded"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
             <path
-              d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
+              d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
             />
           </svg>
           
-          66.67
+          33.33
           %
         </span>
          
         <span
           class="dusk-balance__value"
         >
-          0.002000000
+          0.001000000
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
@@ -179,23 +179,23 @@ exports[`Balance > should not display the fiat value if the fiat price is \`unde
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
-            data-tooltip-text="Shielded"
+            data-tooltip-text="Public"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
             <path
-              d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
+              d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
             />
           </svg>
           
-          33.33
+          66.67
           %
         </span>
          
         <span
           class="dusk-balance__value"
         >
-          0.001000000
+          0.002000000
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
@@ -220,23 +220,23 @@ exports[`Balance > should not display the fiat value if the fiat price is \`unde
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
-            data-tooltip-text="Unshielded"
+            data-tooltip-text="Shielded"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
             <path
-              d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
+              d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
             />
           </svg>
           
-          66.67
+          33.33
           %
         </span>
          
         <span
           class="dusk-balance__value"
         >
-          0.002000000
+          0.001000000
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
@@ -308,23 +308,23 @@ exports[`Balance > should update the Balance component when the props change 1`]
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
-            data-tooltip-text="Shielded"
+            data-tooltip-text="Public"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
             <path
-              d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
+              d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
             />
           </svg>
           
-          33.33
+          66.67
           %
         </span>
          
         <span
           class="dusk-balance__value"
         >
-          0.001000000
+          0.002000000
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
@@ -349,23 +349,23 @@ exports[`Balance > should update the Balance component when the props change 1`]
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
-            data-tooltip-text="Unshielded"
+            data-tooltip-text="Shielded"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
             <path
-              d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
+              d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
             />
           </svg>
           
-          66.67
+          33.33
           %
         </span>
          
         <span
           class="dusk-balance__value"
         >
-          0.002000000
+          0.001000000
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
@@ -437,23 +437,23 @@ exports[`Balance > should update the Balance component when the props change 2`]
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
-            data-tooltip-text="Shielded"
+            data-tooltip-text="Public"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
             <path
-              d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
+              d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
             />
           </svg>
           
-          16,67
+          83,33
           %
         </span>
          
         <span
           class="dusk-balance__value"
         >
-          0,000500000
+          0,002500000
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
@@ -478,23 +478,23 @@ exports[`Balance > should update the Balance component when the props change 2`]
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"
-            data-tooltip-text="Unshielded"
+            data-tooltip-text="Shielded"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
             <path
-              d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
+              d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
             />
           </svg>
           
-          83,33
+          16,67
           %
         </span>
          
         <span
           class="dusk-balance__value"
         >
-          0,002500000
+          0,000500000
           <svg
             class="dusk-icon dusk-icon--size--default"
             data-tooltip-id="main-tooltip"