Merge pull request #3078 from dusk-network/feature-3076

web-wallet: Reword "Withdraw" to "Claim" Rewards
dusk-network · Nov 27, 2024 · beff4e6 · beff4e6
2 parents 61e7a3b + 273614a
commit beff4e6
Show file tree

Hide file tree

Showing 13 changed files with 46 additions and 38 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Update Transactions list design [#1922]
+- Reword "Withdraw Rewards" operation to "Claim Rewards" [#3076]
 
 ### Removed
 
@@ -48,7 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Added gas settings validation on Unstake / Widthdraw Rewards flows [#2000]
+- Added gas settings validation on Unstake / Withdraw Rewards flows [#2000]
 - Add temporary link to the block explorer on the dashboard [#2882]
 - Add Staking-Related Functionality Utilizing w3sper [#3006]
 - Add minimum stake amount supplied by w3sper instead of using an env var [#3010]
@@ -400,6 +401,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3069]: https://github.com/dusk-network/rusk/issues/3069
 [#3071]: https://github.com/dusk-network/rusk/issues/3071
 [#3073]: https://github.com/dusk-network/rusk/issues/3073
+[#3076]: https://github.com/dusk-network/rusk/issues/3076
 
 <!-- VERSIONS -->
 

diff --git a/web-wallet/src/lib/components/ContractOperations/ContractOperations.svelte b/web-wallet/src/lib/components/ContractOperations/ContractOperations.svelte
@@ -8,6 +8,7 @@
     mdiArrowUpBoldBoxOutline,
     mdiDatabaseArrowDownOutline,
     mdiDatabaseOutline,
+    mdiGiftOpenOutline,
     mdiHelpCircleOutline,
   } from "@mdi/js";
 
@@ -21,11 +22,11 @@
 
   /** @type {Record<string, string>} */
   const operationIcons = {
+    "claim-rewards": mdiGiftOpenOutline,
     receive: mdiArrowDownBoldBoxOutline,
     send: mdiArrowUpBoldBoxOutline,
     stake: mdiDatabaseOutline,
     unstake: mdiDatabaseArrowDownOutline,
-    "withdraw-rewards": mdiDatabaseArrowDownOutline,
   };
 </script>
 

diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -7,6 +7,7 @@
     mdiAlertOutline,
     mdiDatabaseArrowDownOutline,
     mdiDatabaseOutline,
+    mdiGiftOpenOutline,
   } from "@mdi/js";
 
   import { DOCUMENTATION_LINKS, MESSAGES } from "$lib/constants";
@@ -83,24 +84,24 @@
    */
   let stakeAmount = luxToDusk(
     {
+      "claim-rewards": rewards,
       stake: minAllowedStake,
       unstake: staked,
-      "withdraw-rewards": rewards,
     }[flow]
   );
 
   /** @type {Record<StakeType, string>} */
   const confirmLabels = {
+    "claim-rewards": "Claim",
     stake: "Stake",
     unstake: "Unstake",
-    "withdraw-rewards": "Withdraw",
   };
 
   /** @type {Record<StakeType, string>} */
   const overviewLabels = {
+    "claim-rewards": "Rewards Amount",
     stake: "Amount",
     unstake: "Unstake Amount",
-    "withdraw-rewards": "Withdraw Rewards",
   };
 
   const steps = getStepperSteps();
@@ -323,7 +324,11 @@
         disabled: flow === "stake" ? stakeAmount === 0 : !isGasValid,
         icon: {
           path:
-            flow === "stake" ? mdiDatabaseOutline : mdiDatabaseArrowDownOutline,
+            flow === "unstake"
+              ? mdiDatabaseArrowDownOutline
+              : flow === "stake"
+                ? mdiDatabaseOutline
+                : mdiGiftOpenOutline,
           position: "before",
         },
         label: confirmLabels[flow],

diff --git a/web-wallet/src/lib/components/__tests__/ContractOperations.spec.js b/web-wallet/src/lib/components/__tests__/ContractOperations.spec.js
@@ -32,8 +32,8 @@ describe("ContractOperations", () => {
       },
       {
         disabled: false,
-        id: "withdraw-rewards",
-        label: "withdraw rewards",
+        id: "claim-rewards",
+        label: "claim rewards",
         primary: false,
       },
     ],

diff --git a/web-wallet/src/lib/components/__tests__/Stake.spec.js b/web-wallet/src/lib/components/__tests__/Stake.spec.js
@@ -349,7 +349,7 @@ describe("Stake", () => {
     });
   });
 
-  describe("Withdraw Rewards operation", () => {
+  describe("Claim Rewards operation", () => {
     const expectedExplorerLink = `/explorer/transactions/transaction?id=${lastTxId}`;
 
     beforeAll(() => {
@@ -360,15 +360,15 @@ describe("Stake", () => {
       vi.useRealTimers();
     });
 
-    it("should perform a withdraw rewards, give a success message and supply a link to see the transaction in the explorer", async () => {
+    it("should perform a claim rewards, give a success message and supply a link to see the transaction in the explorer", async () => {
       /** @type {import("svelte").ComponentProps<Stake>} */
-      const props = { ...baseProps, flow: "withdraw-rewards" };
+      const props = { ...baseProps, flow: "claim-rewards" };
 
       const { getByRole, getByText } = render(Stake, props);
 
       await vi.advanceTimersToNextTimerAsync();
 
-      await fireEvent.click(getByRole("button", { name: "Withdraw" }));
+      await fireEvent.click(getByRole("button", { name: "Claim" }));
 
       expect(baseProps.execute).toHaveBeenCalledTimes(1);
       expect(baseProps.execute).toHaveBeenCalledWith(
@@ -387,17 +387,17 @@ describe("Stake", () => {
       /** @type {import("svelte").ComponentProps<Stake>} */
       const props = {
         ...baseProps,
-        flow: "unstake",
+        flow: "claim-rewards",
         gasSettings: { gasLimit: 29000000090n, gasPrice: 1n },
       };
 
       const { getByRole } = render(Stake, props);
 
       await vi.advanceTimersToNextTimerAsync();
 
-      const unstakeButton = getByRole("button", { name: "Unstake" });
+      const claimButton = getByRole("button", { name: "Claim" });
 
-      expect(unstakeButton).toBeDisabled();
+      expect(claimButton).toBeDisabled();
     });
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/ContractOperations.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/ContractOperations.spec.js.snap
@@ -158,15 +158,15 @@ exports[`ContractOperations > should render the \`ContractOperations\` component
         viewBox="0 0 24 24"
       >
         <path
-          d="M20 13.09V7C20 4.79 16.42 3 12 3S4 4.79 4 7V17C4 19.21 7.59 21 12 21C12.46 21 12.9 21 13.33 20.94C13.12 20.33 13 19.68 13 19L13 18.95C12.68 19 12.35 19 12 19C8.13 19 6 17.5 6 17V14.77C7.61 15.55 9.72 16 12 16C12.65 16 13.27 15.96 13.88 15.89C14.93 14.16 16.83 13 19 13C19.34 13 19.67 13.04 20 13.09M18 12.45C16.7 13.4 14.42 14 12 14S7.3 13.4 6 12.45V9.64C7.47 10.47 9.61 11 12 11S16.53 10.47 18 9.64V12.45M12 9C8.13 9 6 7.5 6 7S8.13 5 12 5 18 6.5 18 7 15.87 9 12 9M22 20L19 23L16 20H18V16H20V20H22Z"
+          d="M22 10.87L19.26 9.28C19.5 9.07 19.73 8.8 19.9 8.5C20.73 7.07 20.24 5.23 18.8 4.4C17.94 3.9 16.93 3.9 16.08 4.26L16.09 4.25L15.21 4.64L15.1 3.68L15.09 3.69C15 2.78 14.47 1.9 13.61 1.4C12.17 .575 10.34 1.07 9.5 2.5C9.33 2.8 9.22 3.13 9.16 3.45L6.41 1.87C5.45 1.32 4.23 1.64 3.68 2.6L2.18 5.2C1.9 5.68 2.07 6.29 2.55 6.56L4.28 7.56L8.5 10H2V20C2 21.11 2.9 22 4 22H20C21.11 22 22 21.11 22 20V14.87L22.73 13.6C23.28 12.64 22.96 11.42 22 10.87M16.44 6.5C16.71 6 17.33 5.86 17.8 6.13C18.28 6.41 18.45 7 18.17 7.5C17.89 8 17.28 8.14 16.8 7.87C16.33 7.59 16.16 7 16.44 6.5M14.07 8.6L21 12.6L20 14.33L13.07 10.33L14.07 8.6M11 20H4V12H11V20M11.34 9.33L4.41 5.33L5.41 3.6L12.34 7.6L11.34 9.33M11.61 4.87C11.13 4.59 10.97 4 11.24 3.5C11.5 3 12.13 2.86 12.61 3.13C13.09 3.41 13.25 4 12.97 4.5C12.7 5 12.09 5.14 11.61 4.87M13 20V12.6L20 16.64V20H13Z"
         />
       </svg>
       
        
       <span
         class="dusk-button__text"
       >
-        withdraw rewards
+        claim rewards
       </span>
       
     </button>

diff --git a/web-wallet/src/lib/containers/StakeContract/StakeContract.svelte b/web-wallet/src/lib/containers/StakeContract/StakeContract.svelte
@@ -58,13 +58,20 @@
 
   /** @type {Record<string, (info: StakeInfo) => boolean>} */
   const disablingConditions = {
+    "claim-rewards": (info) => info.reward <= 0n,
     stake: (info) => !!info.amount,
     unstake: (info) => !info.amount || info.amount.total === 0n,
-    "withdraw-rewards": (info) => info.reward <= 0n,
   };
 
   /** @type {Record<StakeType, (...args: any[]) => Promise<string>>} */
   const executeOperations = {
+    "claim-rewards": (gasPrice, gasLimit) =>
+      walletStore
+        .claimRewards(
+          $walletStore.stakeInfo.reward,
+          new Gas({ limit: gasLimit, price: gasPrice })
+        )
+        .then(getKey("hash")),
     stake: (amount, gasPrice, gasLimit) =>
       walletStore
         .stake(amount, new Gas({ limit: gasLimit, price: gasPrice }))
@@ -73,21 +80,14 @@
       walletStore
         .unstake(new Gas({ limit: gasLimit, price: gasPrice }))
         .then(getKey("hash")),
-    "withdraw-rewards": (gasPrice, gasLimit) =>
-      walletStore
-        .withdrawReward(
-          $walletStore.stakeInfo.reward,
-          new Gas({ limit: gasLimit, price: gasPrice })
-        )
-        .then(getKey("hash")),
   };
 
   /** @type {(operations: ContractOperation[]) => ContractOperation[]} */
   const disableAllOperations = mapWith(setKey("disabled", true));
 
   /** @type {(operationId: string) => operationId is StakeType} */
   const isStakeOperation = (operationId) =>
-    ["stake", "unstake", "withdraw-rewards"].includes(operationId);
+    ["stake", "unstake", "claim-rewards"].includes(operationId);
 
   /**
    * We want to update the disabled status ourselves only

diff --git a/web-wallet/src/lib/contracts/contract-descriptors.js b/web-wallet/src/lib/contracts/contract-descriptors.js
@@ -37,8 +37,8 @@ export default [
       },
       {
         disabled: false,
-        id: "withdraw-rewards",
-        label: "withdraw rewards",
+        id: "claim-rewards",
+        label: "claim rewards",
         primary: false,
       },
     ],

diff --git a/web-wallet/src/lib/contracts/contracts.d.ts b/web-wallet/src/lib/contracts/contracts.d.ts
@@ -22,4 +22,4 @@ type ContractStatus = {
   value: string | null;
 };
 
-type StakeType = "stake" | "unstake" | "withdraw-rewards";
+type StakeType = "stake" | "unstake" | "claim-rewards";
diff --git a/web-wallet/src/lib/stores/__tests__/walletStore.spec.js b/web-wallet/src/lib/stores/__tests__/walletStore.spec.js
@@ -323,7 +323,7 @@ describe("Wallet store", async () => {
     const setPendingNotesSpy = vi.spyOn(walletCache, "setPendingNoteInfo");
 
     /**
-     * @typedef { "shield" | "stake" | "transfer" | "unshield" | "unstake" | "withdrawReward" } TransferMethod
+     * @typedef { "shield" | "stake" | "transfer" | "unshield" | "unstake" | "claimRewards" } TransferMethod
      */
 
     /**
@@ -524,8 +524,8 @@ describe("Wallet store", async () => {
       await walletStoreTransferCheck("unshield", [amount, gas]);
     });
 
-    it("should expose a method to withdraw the rewards", async () => {
-      await walletStoreTransferCheck("withdrawReward", [amount, gas]);
+    it("should expose a method to claim the rewards", async () => {
+      await walletStoreTransferCheck("claimRewards", [amount, gas]);
     });
   });
 

diff --git a/web-wallet/src/lib/stores/stores.d.ts b/web-wallet/src/lib/stores/stores.d.ts
@@ -144,7 +144,7 @@ type WalletStoreServices = {
     gas: import("$lib/vendor/w3sper.js/src/mod").Gas
   ) => Promise<TransactionInfo>;
 
-  withdrawReward: (
+  claimRewards: (
     amount: bigint,
     gas: import("$lib/vendor/w3sper.js/src/mod").Gas
   ) => Promise<TransactionInfo>;

diff --git a/web-wallet/src/lib/stores/walletStore.js b/web-wallet/src/lib/stores/walletStore.js
@@ -403,8 +403,8 @@ const unstake = async (gas) =>
     .then(updateCacheAfterTransaction)
     .then(passThruWithEffects(observeTxRemoval));
 
-/** @type {WalletStoreServices["withdrawReward"]} */
-const withdrawReward = async (amount, gas) =>
+/** @type {WalletStoreServices["claimRewards"]} */
+const claimRewards = async (amount, gas) =>
   sync()
     .then(networkStore.connect)
     .then((network) =>
@@ -418,6 +418,7 @@ const withdrawReward = async (amount, gas) =>
 /** @type {WalletStore} */
 export default {
   abortSync,
+  claimRewards,
   clearLocalData,
   clearLocalDataAndInit,
   getTransactionsHistory,
@@ -431,5 +432,4 @@ export default {
   transfer,
   unshield,
   unstake,
-  withdrawReward,
 };
diff --git a/web-wallet/src/routes/(app)/dashboard/staking/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/staking/__tests__/__snapshots__/page.spec.js.snap
@@ -177,15 +177,15 @@ exports[`Staking > should render the staking page 1`] = `
             viewBox="0 0 24 24"
           >
             <path
-              d="M20 13.09V7C20 4.79 16.42 3 12 3S4 4.79 4 7V17C4 19.21 7.59 21 12 21C12.46 21 12.9 21 13.33 20.94C13.12 20.33 13 19.68 13 19L13 18.95C12.68 19 12.35 19 12 19C8.13 19 6 17.5 6 17V14.77C7.61 15.55 9.72 16 12 16C12.65 16 13.27 15.96 13.88 15.89C14.93 14.16 16.83 13 19 13C19.34 13 19.67 13.04 20 13.09M18 12.45C16.7 13.4 14.42 14 12 14S7.3 13.4 6 12.45V9.64C7.47 10.47 9.61 11 12 11S16.53 10.47 18 9.64V12.45M12 9C8.13 9 6 7.5 6 7S8.13 5 12 5 18 6.5 18 7 15.87 9 12 9M22 20L19 23L16 20H18V16H20V20H22Z"
+              d="M22 10.87L19.26 9.28C19.5 9.07 19.73 8.8 19.9 8.5C20.73 7.07 20.24 5.23 18.8 4.4C17.94 3.9 16.93 3.9 16.08 4.26L16.09 4.25L15.21 4.64L15.1 3.68L15.09 3.69C15 2.78 14.47 1.9 13.61 1.4C12.17 .575 10.34 1.07 9.5 2.5C9.33 2.8 9.22 3.13 9.16 3.45L6.41 1.87C5.45 1.32 4.23 1.64 3.68 2.6L2.18 5.2C1.9 5.68 2.07 6.29 2.55 6.56L4.28 7.56L8.5 10H2V20C2 21.11 2.9 22 4 22H20C21.11 22 22 21.11 22 20V14.87L22.73 13.6C23.28 12.64 22.96 11.42 22 10.87M16.44 6.5C16.71 6 17.33 5.86 17.8 6.13C18.28 6.41 18.45 7 18.17 7.5C17.89 8 17.28 8.14 16.8 7.87C16.33 7.59 16.16 7 16.44 6.5M14.07 8.6L21 12.6L20 14.33L13.07 10.33L14.07 8.6M11 20H4V12H11V20M11.34 9.33L4.41 5.33L5.41 3.6L12.34 7.6L11.34 9.33M11.61 4.87C11.13 4.59 10.97 4 11.24 3.5C11.5 3 12.13 2.86 12.61 3.13C13.09 3.41 13.25 4 12.97 4.5C12.7 5 12.09 5.14 11.61 4.87M13 20V12.6L20 16.64V20H13Z"
             />
           </svg>
           
            
           <span
             class="dusk-button__text"
           >
-            withdraw rewards
+            claim rewards
           </span>
           
         </button>