Merge pull request #3389 from dusk-network/feature-3381

web-wallet: Store the wallet creation block height and show it in set…

web-wallet/CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add support for partial unstake/claim rewards [#3009]
 - Add "Unstake" flow validation [#3009]
+- Store the wallet creation block height and show it in settings [#3381]
 
 ### Changed
 
@@ -547,6 +548,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3354]: https://github.com/dusk-network/rusk/issues/3354
 [#3356]: https://github.com/dusk-network/rusk/issues/3356
 [#3362]: https://github.com/dusk-network/rusk/issues/3362
+[#3381]: https://github.com/dusk-network/rusk/issues/3381
 [#3387]: https://github.com/dusk-network/rusk/issues/3387
 
 <!-- VERSIONS -->

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

@@ -6,6 +6,10 @@
   import { mdiAlertOutline, mdiContentCopy } from "@mdi/js";
   import { Button, Textbox } from "$lib/dusk/components";
   import { toast } from "$lib/dusk/components/Toast/store";
+  import { makeClassName } from "$lib/dusk/string";
+
+  /** @type {string | undefined} */
+  export let className = undefined;
 
   /** @type {string} */
   export let name;
@@ -35,9 +39,11 @@
         );
       });
   }
+
+  $: classes = makeClassName(["copy-field", className]);
 </script>
 
-<div class="copy-field">
+<div class={classes} {...$$restProps}>
   <Textbox
     className="copy-field__content"
     value={displayValue}
@@ -47,6 +53,8 @@
   <Button
     aria-label="Copy Address"
     className="copy-field__button"
+    data-tooltip-id="main-tooltip"
+    data-tooltip-text="Copy to clipboard"
     icon={{ path: mdiContentCopy }}
     on:click={copyToClipboard}
     variant="primary"

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

@@ -29,6 +29,17 @@ describe("CopyField", () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  it("should pass additional class names and attributes to the rendered element", () => {
+    const props = {
+      ...baseProps,
+      className: "foo bar",
+      id: "some-id",
+    };
+    const { container } = render(CopyField, { ...baseOptions, props });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   it("renders the CopyField component with the copy button disabled", () => {
     const { container, getByRole } = render(CopyField, {
       ...baseOptions,

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

@@ -14,6 +14,8 @@ exports[`CopyField > renders the CopyField component 1`] = `
   <button
     aria-label="Copy Address"
     class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button copy-field__button"
+    data-tooltip-id="main-tooltip"
+    data-tooltip-text="Copy to clipboard"
     type="button"
   >
     <svg
@@ -46,6 +48,8 @@ exports[`CopyField > renders the CopyField component with the copy button disabl
   <button
     aria-label="Copy Address"
     class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button copy-field__button"
+    data-tooltip-id="main-tooltip"
+    data-tooltip-text="Copy to clipboard"
     disabled=""
     type="button"
   >
@@ -61,6 +65,41 @@ exports[`CopyField > renders the CopyField component with the copy button disabl
     
      
     
+  </button>
+</div>
+`;
+
+exports[`CopyField > should pass additional class names and attributes to the rendered element 1`] = `
+<div
+  class="copy-field foo bar"
+  id="some-id"
+>
+  <input
+    class="dusk-textbox dusk-textbox-text copy-field__content"
+    readonly=""
+    type="text"
+  />
+  
+   
+  <button
+    aria-label="Copy Address"
+    class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button copy-field__button"
+    data-tooltip-id="main-tooltip"
+    data-tooltip-text="Copy to clipboard"
+    type="button"
+  >
+    <svg
+      class="dusk-icon dusk-icon--size--default dusk-button__icon"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+      />
+    </svg>
+    
+     
+    
   </button>
 </div>
 `;

web-wallet/src/lib/stores/__tests__/settingsStore.spec.js

@@ -106,6 +106,7 @@ describe("Settings store", () => {
         darkMode: false,
         gasLimit: `${settingsStoreContent.gasLimit}n`,
         gasPrice: `${settingsStoreContent.gasPrice}n`,
+        walletCreationBlockHeight: "0n",
       };
 
       expect(localStorageSettings).toStrictEqual(expectedSettings);
@@ -136,6 +137,7 @@ describe("Settings store", () => {
         hideStakingNotice: !settingsStoreContent.hideStakingNotice,
         language: "FAKE LANGUAGE",
         userId: "FAKE USER ID",
+        walletCreationBlockHeight: 123n,
       };
       const newState = {
         ...newStateWithoutGas,
@@ -163,6 +165,7 @@ describe("Settings store", () => {
         ...expectedState,
         gasLimit: `${expectedState.gasLimit}n`,
         gasPrice: `${expectedState.gasPrice}n`,
+        walletCreationBlockHeight: "123n",
       });
     });
   });

web-wallet/src/lib/stores/settingsStore.js

@@ -36,6 +36,7 @@ const initialState = {
   gasPrice: BigInt(import.meta.env.VITE_GAS_PRICE_DEFAULT ?? 1),
   hideStakingNotice: false,
   userId: "",
+  walletCreationBlockHeight: 0n,
 };
 
 const createPersistedStore = (

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

@@ -19,6 +19,7 @@ type SettingsStoreContent = {
   hideStakingNotice: boolean;
   language: string;
   userId: string;
+  walletCreationBlockHeight: bigint;
 };
 
 type SettingsStore = Writable<SettingsStoreContent> & {