web-wallet: Refactor "Unshielded" occurrences to "Public"

web-wallet/CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fix wrong error shown in the login screen [#3226] [#3097]
+- Refactor "Unshielded" occurrences to "Public" [#3242]
 
 ## [0.10.1] - 2024-12-18
 
@@ -466,6 +467,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3203]: https://github.com/dusk-network/rusk/issues/3203
 [#3212]: https://github.com/dusk-network/rusk/issues/3212
 [#3226]: https://github.com/dusk-network/rusk/issues/3226
+[#3242]: https://github.com/dusk-network/rusk/issues/3242
 
 <!-- VERSIONS -->
 

web-wallet/src/__mocks__/mockedWalletStore.js

@@ -13,12 +13,15 @@ const profiles = [
   await profileGenerator.next(),
 ];
 const currentProfile = profiles[0];
-const shielded = { spendable: 50_000_000_000_000n, value: 2_345_000_000_000n };
-const unshielded = { nonce: 1234n, value: shielded.value / 2n };
+const shieldedBalance = {
+  spendable: 50_000_000_000_000n,
+  value: 2_345_000_000_000n,
+};
+const publicBalance = { nonce: 1234n, value: shieldedBalance.value / 2n };
 
 /** @type {WalletStoreContent} */
 const content = {
-  balance: { shielded, unshielded },
+  balance: { publicBalance, shieldedBalance },
   currentProfile,
   initialized: true,
   minimumStake: 1_000_000_000_000n,

web-wallet/src/lib/components/Allocate/Allocate.svelte

@@ -39,13 +39,13 @@
   export let shieldedAddress;
 
   /** @type {string} */
-  export let unshieldedAddress;
+  export let publicAddress;
 
   /** @type {bigint} */
   export let shieldedBalance;
 
   /** @type {bigint} */
-  export let unshieldedBalance;
+  export let publicBalance;
 
   // @ts-ignore
   function handleBalanceChange(event) {
@@ -109,7 +109,7 @@
   let hasEnoughFunds = true;
 
   // Constant total
-  const totalBalance = shieldedBalance + unshieldedBalance;
+  const totalBalance = shieldedBalance + publicBalance;
 
   // Used to keep the difference between the initial shielded balance and the current one
   const initialShielded = shieldedBalance;
@@ -130,7 +130,7 @@
 
   $: hasEnoughFunds = isUnshielding
     ? shieldedBalance - difference - fee >= 0n
-    : unshieldedBalance + difference - fee >= 0n;
+    : publicBalance + difference - fee >= 0n;
 
   $: isNextButtonDisabled =
     !hasEnoughFunds ||
@@ -197,7 +197,7 @@
           <div class="operation__address-wrapper">
             <Icon path={mdiShieldLockOpenOutline} />
             {middleEllipsis(
-              unshieldedAddress,
+              publicAddress,
               calculateAdaptiveCharCount(screenWidth, 320, 640, 5, 20)
             )}
           </div>
@@ -211,9 +211,9 @@
               max={luxToDusk(totalBalance)}
               min="0"
               step="0.000000001"
-              id="unshielded-amount"
+              id="public-amount"
               on:input={handleBalanceChange}
-              name="unshielded-amount"
+              name="public-amount"
             />
             <Icon
               data-tooltip-id="main-tooltip"
@@ -295,7 +295,7 @@
           </dt>
           <dd class="operation__review-address">
             <span>
-              {isShielding ? unshieldedAddress : shieldedAddress}
+              {isShielding ? publicAddress : shieldedAddress}
             </span>
           </dd>
         </dl>
@@ -308,7 +308,7 @@
           </dt>
           <dd class="operation__review-address">
             <span>
-              {isUnshielding ? unshieldedAddress : shieldedAddress}
+              {isUnshielding ? publicAddress : shieldedAddress}
             </span>
           </dd>
         </dl>

web-wallet/src/lib/components/Balance/Balance.svelte

@@ -29,19 +29,19 @@
   export let tokenCurrency;
 
   /** @type {bigint} */
-  export let shieldedAmount;
+  export let shieldedBalance;
 
   /** @type {bigint} */
-  export let unshieldedAmount;
+  export let publicBalance;
 
-  $: totalBalance = luxToDusk(shieldedAmount + unshieldedAmount);
+  $: totalBalance = luxToDusk(shieldedBalance + publicBalance);
 
-  $: shieldedPercentage = totalBalance
-    ? (luxToDusk(shieldedAmount) / totalBalance) * 100
+  $: shieldedBalancePercentage = totalBalance
+    ? (luxToDusk(shieldedBalance) / totalBalance) * 100
     : 0;
 
-  $: unshieldedPercentage = totalBalance
-    ? (luxToDusk(unshieldedAmount) / totalBalance) * 100
+  $: publicBalancePercentage = totalBalance
+    ? (luxToDusk(publicBalance) / totalBalance) * 100
     : 0;
 
   $: classes = makeClassName(["dusk-balance", className]);
@@ -75,10 +75,10 @@
           path={mdiShieldLock}
           data-tooltip-id="main-tooltip"
           data-tooltip-text="Shielded"
-        />{numberFormatter(shieldedPercentage)}%</span
+        />{numberFormatter(shieldedBalancePercentage)}%</span
       >
       <span class="dusk-balance__value"
-        >{duskFormatter(luxToDusk(shieldedAmount))}<Icon
+        >{duskFormatter(luxToDusk(shieldedBalance))}<Icon
           data-tooltip-id="main-tooltip"
           data-tooltip-text="DUSK"
           path={logo}
@@ -90,11 +90,11 @@
         ><Icon
           path={mdiShieldLockOpenOutline}
           data-tooltip-id="main-tooltip"
-          data-tooltip-text="Unshielded"
-        />{numberFormatter(unshieldedPercentage)}%</span
+          data-tooltip-text="Public"
+        />{numberFormatter(publicBalancePercentage)}%</span
       >
       <span class="dusk-balance__value"
-        >{duskFormatter(luxToDusk(unshieldedAmount))}<Icon
+        >{duskFormatter(luxToDusk(publicBalance))}<Icon
           data-tooltip-id="main-tooltip"
           data-tooltip-text="DUSK"
           path={logo}

web-wallet/src/lib/components/UsageIndicator/UsageIndicator.svelte

@@ -17,22 +17,22 @@
 
   $: classes = makeClassName(["usage-indicator", className]);
   $: valueToShow = +value.toFixed(2);
-  $: shieldedText = `You have put ${valueToShow}% of your funds in your shielded account`;
-  $: unshieldedText = `You have put ${+(100 - valueToShow).toFixed(2)}% of your funds in your unshielded account`;
+  $: shieldedAccountUsageTooltip = `You have put ${valueToShow}% of your funds in your shielded account`;
+  $: publicAccountUsageTooltip = `You have put ${+(100 - valueToShow).toFixed(2)}% of your funds in your public account`;
 </script>
 
 <div class={classes}>
   <Icon
     className="usage-indicator__icon"
     data-tooltip-id="main-tooltip"
-    data-tooltip-text={shieldedText}
+    data-tooltip-text={shieldedAccountUsageTooltip}
     path={mdiShieldLock}
   />
   <div
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow={valueToShow}
-    aria-valuetext={shieldedText}
+    aria-valuetext={shieldedAccountUsageTooltip}
     class="usage-indicator__meter"
     role="meter"
   >
@@ -45,7 +45,7 @@
   <Icon
     className="usage-indicator__icon"
     data-tooltip-id="main-tooltip"
-    data-tooltip-text={unshieldedText}
+    data-tooltip-text={publicAccountUsageTooltip}
     path={mdiShieldLockOpenOutline}
   />
 </div>

web-wallet/src/lib/components/__tests__/Balance.spec.js

@@ -8,9 +8,9 @@ describe("Balance", () => {
     fiatCurrency: "USD",
     fiatPrice: 10,
     locale: "en",
-    shieldedAmount: 1_000_000n,
+    publicBalance: 2_000_000n,
+    shieldedBalance: 1_000_000n,
     tokenCurrency: "DUSK",
-    unshieldedAmount: 2_000_000n,
   };
 
   const baseOptions = {
@@ -38,9 +38,9 @@ describe("Balance", () => {
       fiatCurrency: "EUR",
       fiatPrice: 20,
       locale: "it",
-      shieldedAmount: 500_000n,
+      publicBalance: 2_500_000n,
+      shieldedBalance: 500_000n,
       tokenCurrency: "DUSK",
-      unshieldedAmount: 2_500_000n,
     });
 
     expect(container.firstChild).toMatchSnapshot();
@@ -56,7 +56,7 @@ describe("Balance", () => {
       )?.textContent
     ).toContain("33.33%");
 
-    // Check if unshielded percentage displays as 66.67%
+    // Check if public percentage displays as 66.67%
     expect(
       container.querySelector(
         ".dusk-balance__account:last-child .dusk-balance__percentage"
@@ -67,7 +67,7 @@ describe("Balance", () => {
   it("should display the right percentage values when balance is zero", async () => {
     const options = {
       ...baseOptions,
-      props: { ...baseProps, shieldedAmount: 0n, unshieldedAmount: 0n },
+      props: { ...baseProps, publicBalance: 0n, shieldedBalance: 0n },
     };
 
     const { container } = render(Balance, options);

web-wallet/src/lib/components/__tests__/__snapshots__/Balance.spec.js.snap

@@ -91,7 +91,7 @@ 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="Public"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
@@ -220,7 +220,7 @@ 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="Public"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
@@ -349,7 +349,7 @@ 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="Public"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
@@ -478,7 +478,7 @@ 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="Public"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >

web-wallet/src/lib/components/__tests__/__snapshots__/UsageIndicator.spec.js.snap

@@ -35,7 +35,7 @@ exports[`UsageIndicator > should render the \`UsageIndicator\` component and rea
   <svg
     class="dusk-icon dusk-icon--size--default usage-indicator__icon"
     data-tooltip-id="main-tooltip"
-    data-tooltip-text="You have put 55% of your funds in your unshielded account"
+    data-tooltip-text="You have put 55% of your funds in your public account"
     role="graphics-symbol"
     viewBox="0 0 24 24"
   >
@@ -82,7 +82,7 @@ exports[`UsageIndicator > should render the \`UsageIndicator\` component and rea
   <svg
     class="dusk-icon dusk-icon--size--default usage-indicator__icon"
     data-tooltip-id="main-tooltip"
-    data-tooltip-text="You have put 20% of your funds in your unshielded account"
+    data-tooltip-text="You have put 20% of your funds in your public account"
     role="graphics-symbol"
     viewBox="0 0 24 24"
   >

web-wallet/src/lib/containers/AllocateContract/AllocateContract.svelte

@@ -15,17 +15,15 @@
   $: [gasSettings, language] = collectSettings($settingsStore);
   $: ({ balance, currentProfile } = $walletStore);
   $: shieldedAddress = currentProfile ? currentProfile.address.toString() : "";
-  $: unshieldedAddress = currentProfile
-    ? currentProfile.account.toString()
-    : "";
+  $: publicAddress = currentProfile ? currentProfile.account.toString() : "";
   $: duskFormatter = createCurrencyFormatter(language, "DUSK", 9);
 </script>
 
 <Allocate
   {shieldedAddress}
-  {unshieldedAddress}
-  shieldedBalance={balance.shielded.spendable}
-  unshieldedBalance={balance.unshielded.value}
+  {publicAddress}
+  shieldedBalance={balance.shieldedBalance.spendable}
+  publicBalance={balance.publicBalance.value}
   formatter={duskFormatter}
   {gasLimits}
   {gasSettings}

web-wallet/src/lib/containers/StakeContract/StakeContract.svelte

@@ -108,7 +108,7 @@
       minStakeRequirement={minimumStake}
       on:operationChange
       on:suppressStakingNotice
-      availableBalance={balance.unshielded.value}
+      availableBalance={balance.publicBalance.value}
       {hideStakingNotice}
     />
   {:else if currentOperation === "unstake" || currentOperation === "claim-rewards"}

web-wallet/src/lib/mock-data/cache-balances.js

@@ -5,28 +5,28 @@ export default [
     address:
       "c3d4e5f6g7h8i9j0A1B2C3D4E5F6G7H8I9J0a1b2c3d4e5f6g7h8i9j0A1B2C3D4E5F6G7H8",
     balance: {
-      shielded: {
-        spendable: 400n * factor,
-        value: 1234n * factor,
-      },
-      unshielded: {
+      publicBalance: {
         nonce: 1n,
         value: 567n * factor,
       },
+      shieldedBalance: {
+        spendable: 400n * factor,
+        value: 1234n * factor,
+      },
     },
   },
   {
     address:
       "B2C3D4E5F6G7H8I9J0a1b2c3d4e5f6g7h8i9j0A1B2C3D4E5F6G7H8I9J0a1b2c3d4e5f6g",
     balance: {
-      shielded: {
-        spendable: 123n * factor,
-        value: 456n * factor,
-      },
-      unshielded: {
+      publicPublic: {
         nonce: 5n,
         value: 123n * factor,
       },
+      shieldedBalance: {
+        spendable: 123n * factor,
+        value: 456n * factor,
+      },
     },
   },
 ];