Merge pull request #3123 from dusk-network/feature-2981

web-wallet: Add notice for stake maturity
dusk-network · Dec 12, 2024 · 418c4b6 · 418c4b6
2 parents 036f1c1 + d666ee8
commit 418c4b6
Show file tree

Hide file tree

Showing 18 changed files with 177 additions and 723 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add notice for stake maturity [#2981]
+
 ### Changed
 
 - Update Transactions list design [#1922]
@@ -402,6 +404,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2920]: https://github.com/dusk-network/rusk/issues/2920
 [#2932]: https://github.com/dusk-network/rusk/issues/2932
 [#2938]: https://github.com/dusk-network/rusk/issues/2938
+[#2981]: https://github.com/dusk-network/rusk/issues/2981
 [#2990]: https://github.com/dusk-network/rusk/issues/2990
 [#2991]: https://github.com/dusk-network/rusk/issues/2991
 [#2994]: https://github.com/dusk-network/rusk/issues/2994

diff --git a/web-wallet/package-lock.json b/web-wallet/package-lock.json
diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte
@@ -25,7 +25,6 @@
   import { toast } from "$lib/dusk/components/Toast/store";
   import {
     Banner,
-    ContractStatusesList,
     GasFee,
     GasSettings,
     OperationResult,
@@ -45,9 +44,6 @@
   /** @type {bigint} */
   export let availableBalance;
 
-  /** @type {ContractStatus[]} */
-  export let statuses;
-
   /** @type {GasStoreContent} */
   export let gasLimits;
 
@@ -199,7 +195,6 @@
       }}
     >
       <div in:fade|global class="operation__send">
-        <ContractStatusesList {statuses} />
         <div class="operation__address-wrapper">
           <p>Address:</p>
           <Button
@@ -268,8 +263,6 @@
       }}
     >
       <div in:fade|global class="operation__send">
-        <ContractStatusesList {statuses} />
-
         <div class="operation__amount-wrapper">
           <p>Amount:</p>
           <Button
@@ -350,8 +343,6 @@
       }}
     >
       <div in:fade|global class="operation__send">
-        <ContractStatusesList {statuses} />
-
         <Badge
           className="operation__review-notice"
           text="REVIEW TRANSACTION"

diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -24,7 +24,6 @@
   import { toast } from "$lib/dusk/components/Toast/store";
   import {
     AppAnchor,
-    ContractStatusesList,
     GasFee,
     GasSettings,
     OperationResult,
@@ -56,9 +55,6 @@
   /** @type {bigint} */
   export let availableBalance;
 
-  /** @type {ContractStatus[]} */
-  export let statuses;
-
   let activeStep = 0;
   let { gasLimit, gasPrice } = gasSettings;
   let hideStakingNoticeNextTime = false;
@@ -231,7 +227,6 @@
         disabled: isNextButtonDisabled,
       }}
     >
-      <ContractStatusesList {statuses} />
       <div class="operation__amount-wrapper">
         <p>Amount:</p>
         <Button
@@ -316,7 +311,6 @@
       }}
     >
       <div in:fade|global class="operation__stake">
-        <ContractStatusesList {statuses} />
         <Badge text="REVIEW TRANSACTION" variant="warning" />
         <StakeOverview label="Amount" value={formatter(stakeAmount)} />
         <GasFee {formatter} fee={maxGasFee} />

diff --git a/web-wallet/src/lib/components/Stake/Unstake.svelte b/web-wallet/src/lib/components/Stake/Unstake.svelte
@@ -15,11 +15,7 @@
     Wizard,
     WizardStep,
   } from "$lib/dusk/components";
-  import {
-    ContractStatusesList,
-    GasSettings,
-    OperationResult,
-  } from "$lib/components";
+  import { GasSettings, OperationResult } from "$lib/components";
 
   import StakeOverview from "./StakeOverview.svelte";
 
@@ -38,9 +34,6 @@
   /** @type {bigint} */
   export let maxAmount;
 
-  /** @type {ContractStatus[]} */
-  export let statuses;
-
   /** @type {string} */
   export let operationCtaLabel;
 
@@ -111,7 +104,6 @@
       }}
     >
       <div in:fade|global class="operation__unstake">
-        <ContractStatusesList {statuses} />
         <Badge text="REVIEW TRANSACTION" variant="warning" />
         <StakeOverview
           label={operationOverviewLabel}

diff --git a/web-wallet/src/lib/components/StakeMaturityInfo/StakeMaturityInfo.svelte b/web-wallet/src/lib/components/StakeMaturityInfo/StakeMaturityInfo.svelte
@@ -0,0 +1,45 @@
+<script>
+  /** @type {bigint} */
+  export let eligibility;
+
+  /** @type {boolean} */
+  export let isParticipatingInConsensus;
+
+  /** @type {(value: number | bigint) => string} */
+  export let formatter;
+</script>
+
+<div class="stake-maturity-info">
+  {#if isParticipatingInConsensus}
+    <p class="stake-maturity-info__heading">Actively participating...</p>
+    <p class="stake-maturity-info__body">
+      Participation in the consensus began at block #{formatter(eligibility)}.
+    </p>
+  {:else}
+    <p class="stake-maturity-info__heading">Stake maturity in progress...</p>
+    <p class="stake-maturity-info__body">
+      Participation in the consensus will start at block #{formatter(
+        eligibility
+      )}.
+    </p>
+  {/if}
+</div>
+
+<style lang="postcss">
+  .stake-maturity-info {
+    width: 100%;
+    padding: 0 0.75em;
+    padding-top: 0.625em;
+
+    &__heading {
+      font-weight: 500;
+      line-height: 21px;
+      letter-spacing: -1;
+    }
+
+    &__body {
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+  }
+</style>
diff --git a/web-wallet/src/lib/components/__tests__/Send.spec.js b/web-wallet/src/lib/components/__tests__/Send.spec.js
@@ -42,12 +42,6 @@ describe("Send", () => {
     },
     publicAddress,
     shieldedAddress,
-    statuses: [
-      {
-        label: "Spendable",
-        value: "1,000.000000000",
-      },
-    ],
   };
 
   const invalidAddress =

diff --git a/web-wallet/src/lib/components/__tests__/Stake.spec.js b/web-wallet/src/lib/components/__tests__/Stake.spec.js
@@ -53,20 +53,6 @@ describe("Stake", () => {
     },
     hideStakingNotice: true,
     minStakeRequirement: 1_234_000_000_000n,
-    statuses: [
-      {
-        label: "Spendable",
-        value: "1,000.000000000",
-      },
-      {
-        label: "Total Locked",
-        value: "278.000000000",
-      },
-      {
-        label: "Rewards",
-        value: "345.000000000",
-      },
-    ],
   };
   const baseOptions = {
     props: baseProps,

diff --git a/web-wallet/src/lib/components/__tests__/Unstake.spec.js b/web-wallet/src/lib/components/__tests__/Unstake.spec.js
@@ -39,20 +39,6 @@ describe("Unstake", () => {
       gasLimit: 20000000n,
       gasPrice: 1n,
     },
-    statuses: [
-      {
-        label: "Spendable",
-        value: "1,000.000000000",
-      },
-      {
-        label: "Total Locked",
-        value: "278.000000000",
-      },
-      {
-        label: "Rewards",
-        value: "345.000000000",
-      },
-    ],
   };
 
   afterEach(() => {