web-wallet: Add support for partial unstake/claim rewards

web-wallet/CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add "Support" section under Settings [#3071]
+- Add support for partial unstake/claim rewards [#3009]
 
 ### Changed
 

web-wallet/src/lib/components/Stake/Unstake.svelte

@@ -11,7 +11,10 @@
   import {
     AnchorButton,
     Badge,
+    Button,
+    Icon,
     Stepper,
+    Textbox,
     Wizard,
     WizardStep,
   } from "$lib/dusk/components";
@@ -22,6 +25,9 @@
   } from "$lib/components";
 
   import StakeOverview from "./StakeOverview.svelte";
+  import { logo } from "$lib/dusk/icons";
+  import { toast } from "$lib/dusk/components/Toast/store";
+  import { mdiAlertOutline } from "@mdi/js";
 
   /** @type {(...args: any[]) => Promise<string>} */
   export let execute;
@@ -59,9 +65,9 @@
    * as number if we want to use
    * Svelte's binding.
    */
-  const amount = luxToDusk(maxAmount);
+  let amount = luxToDusk(maxAmount);
 
-  const steps = [{ label: "Overview" }, { label: "Done" }];
+  const steps = [{ label: "Amount" }, { label: "Overview" }, { label: "Done" }];
 
   const dispatch = createEventDispatcher();
   const resetOperation = () => dispatch("operationChange", "");
@@ -78,6 +84,24 @@
     }
   };
 
+  function setMaxAmount() {
+    if (!isGasValid) {
+      toast("error", "Please set valid gas settings first", mdiAlertOutline);
+      return;
+    }
+
+    // if (spendable < fee) {
+    //   toast(
+    //     "error",
+    //     "You don't have enough DUSK to cover the transaction fee",
+    //     mdiAlertOutline
+    //   );
+    //   return;
+    // }
+
+    amount = luxToDusk(maxAmount);
+  }
+
   onMount(() => {
     isGasValid = areValidGasSettings(gasPrice, gasLimit);
   });
@@ -86,17 +110,68 @@
 </script>
 
 <div class="operation">
-  <Wizard steps={2} let:key>
+  <Wizard steps={3} let:key>
     <div slot="stepper">
       <Stepper {activeStep} {steps} showStepLabelWhenInactive={false} />
     </div>
 
-    <!-- OPERATION OVERVIEW STEP  -->
     <WizardStep
       step={0}
       {key}
       backButton={{
-        action: () => resetOperation(),
+        action: resetOperation,
+        disabled: false,
+      }}
+      nextButton={{
+        action: () => activeStep++,
+        disabled: amount === 0,
+      }}
+    >
+      <ContractStatusesList {statuses} />
+      <div class="operation__amount-wrapper">
+        <p>Amount:</p>
+        <Button
+          size="small"
+          variant="tertiary"
+          on:click={setMaxAmount}
+          text="USE MAX"
+        />
+      </div>
+
+      <div class="operation__input-wrapper">
+        <Textbox
+          className="operation__input-field"
+          bind:value={amount}
+          type="number"
+          max={luxToDusk(maxAmount)}
+          required
+          step="0.000000001"
+        />
+        <Icon
+          data-tooltip-id="main-tooltip"
+          data-tooltip-text="DUSK"
+          path={logo}
+        />
+      </div>
+
+      <GasSettings
+        {formatter}
+        {fee}
+        limit={gasSettings.gasLimit}
+        limitLower={gasLimits.gasLimitLower}
+        limitUpper={gasLimits.gasLimitUpper}
+        price={gasSettings.gasPrice}
+        priceLower={gasLimits.gasPriceLower}
+        on:gasSettings={setGasValues}
+      />
+    </WizardStep>
+
+    <!-- OPERATION OVERVIEW STEP  -->
+    <WizardStep
+      step={1}
+      {key}
+      backButton={{
+        action: () => activeStep--,
         disabled: false,
       }}
       nextButton={{
@@ -132,11 +207,11 @@
     </WizardStep>
 
     <!-- OPERATION RESULT STEP  -->
-    <WizardStep step={1} {key} showNavigation={false}>
+    <WizardStep step={2} {key} showNavigation={false}>
       <OperationResult
         errorMessage="Transaction failed"
         onBeforeLeave={resetOperation}
-        operation={execute(gasPrice, gasLimit)}
+        operation={execute(amount, gasPrice, gasLimit)}
         pendingMessage="Processing transaction"
         successMessage="Transaction created"
       >
@@ -164,5 +239,20 @@
       flex-direction: column;
       gap: 1.2em;
     }
+
+    &__amount-wrapper,
+    &__input-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    &__amount-wrapper {
+      justify-content: space-between;
+    }
+
+    &__input-wrapper {
+      column-gap: var(--default-gap);
+    }
   }
 </style>

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

@@ -67,20 +67,17 @@
 
   /** @type {Record<StakeType, (...args: any[]) => Promise<string>>} */
   const executeOperations = {
-    "claim-rewards": (gasPrice, gasLimit) =>
+    "claim-rewards": (amount, gasPrice, gasLimit) =>
       walletStore
-        .claimRewards(
-          $walletStore.stakeInfo.reward,
-          new Gas({ limit: gasLimit, price: gasPrice })
-        )
+        .claimRewards(amount, new Gas({ limit: gasLimit, price: gasPrice }))
         .then(getKey("hash")),
     stake: (amount, gasPrice, gasLimit) =>
       walletStore
         .stake(amount, new Gas({ limit: gasLimit, price: gasPrice }))
         .then(getKey("hash")),
-    unstake: (gasPrice, gasLimit) =>
+    unstake: (amount, gasPrice, gasLimit) =>
       walletStore
-        .unstake(new Gas({ limit: gasLimit, price: gasPrice }))
+        .unstake(amount, new Gas({ limit: gasLimit, price: gasPrice }))
         .then(getKey("hash")),
   };
 

web-wallet/src/lib/stores/stores.d.ts

@@ -141,6 +141,7 @@ type WalletStoreServices = {
   ) => Promise<TransactionInfo>;
 
   unstake: (
+    amount: bigint,
     gas: import("$lib/vendor/w3sper.js/src/mod").Gas
   ) => Promise<TransactionInfo>;
 

web-wallet/src/routes/(app)/dashboard/staking/+page.svelte

@@ -29,7 +29,7 @@
 {#if import.meta.env.VITE_FEATURE_STAKE || false}
   <IconHeadingCard
     gap="medium"
-    heading="Staking"
+    heading="Stake"
     icons={[mdiDatabaseOutline]}
     reverse
   >