From bc58e411e714aa8765a9ce0bcb2bd5d1f0ab9511 Mon Sep 17 00:00:00 2001
From: Kieran Hall <kieran@dusk.network>
Date: Mon, 16 Dec 2024 13:58:44 +0100
Subject: [PATCH] web-wallet: Add memo field in send flow

Resolves #3112
---
 .../src/lib/components/Send/Send.svelte       |  44 +++++-
 .../src/lib/components/__tests__/Send.spec.js |  11 +-
 .../__tests__/__snapshots__/Send.spec.js.snap |  68 ++++++++-
 .../contracts/__tests__/executeSend.spec.js   |  11 +-
 web-wallet/src/lib/contracts/executeSend.js   |   7 +-
 web-wallet/src/lib/mock-data/transactions.js  |   6 +
 .../lib/stores/__tests__/walletStore.spec.js  |  15 +-
 web-wallet/src/lib/stores/stores.d.ts         |   3 +-
 web-wallet/src/lib/stores/walletStore.js      |   4 +-
 .../src/lib/transactions/transactions.d.ts    |   1 +
 .../__tests__/__snapshots__/page.spec.js.snap |  22 ++-
 .../src/routes/(app)/settings/+page.svelte    |   6 +-
 .../__tests__/__snapshots__/page.spec.js.snap | 132 +++++++++---------
 .../src/style/dusk-components/textbox.css     |   2 +-
 14 files changed, 236 insertions(+), 96 deletions(-)

diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte
index de8ca260db..a04c611827 100644
--- a/web-wallet/src/lib/components/Send/Send.svelte
+++ b/web-wallet/src/lib/components/Send/Send.svelte
@@ -18,6 +18,7 @@
     Button,
     Icon,
     Stepper,
+    Switch,
     Textbox,
     Wizard,
     WizardStep,
@@ -32,7 +33,7 @@
   } from "$lib/components";
   import { MESSAGES } from "$lib/constants";
 
-  /** @type {(to: string, amount: bigint, gasPrice: bigint, gasLimit: bigint) => Promise<string>} */
+  /** @type {(to: string, amount: bigint, gasPrice: bigint, gasLimit: bigint, memo: any) => Promise<string>} */
   export let execute;
 
   /** @type {(amount: number) => string} */
@@ -62,12 +63,18 @@
   /** @type {string} */
   let sendToAddress = "";
 
+  /** @type {string} */
+  let memo = "";
+
   /** @type {import("qr-scanner").default} */
   let scanner;
 
   /** @type {import("..").ScanQR} */
   let scanQrComponent;
 
+  /** @type {boolean} */
+  let showMemo = false;
+
   /** @type {boolean} */
   let isNextButtonDisabled = false;
 
@@ -196,7 +203,7 @@
     >
       <div in:fade|global class="operation__send">
         <div class="operation__address-wrapper">
-          <p>Address:</p>
+          <p>Address</p>
           <Button
             disabled={!scanner}
             size="small"
@@ -208,7 +215,7 @@
         </div>
         <Textbox
           required
-          className={`operation__send-address ${!addressInfo.isValid ? "operation__send-address--invalid" : ""}`}
+          className={`operation__send-address ${sendToAddress && !addressInfo.isValid ? "operation__send-address--invalid" : ""}`}
           type="multiline"
           bind:value={sendToAddress}
         />
@@ -248,6 +255,23 @@
             </p>
           </Banner>
         {/if}
+        <div class="operation__address-wrapper">
+          <p>Memo</p>
+          <Switch
+            bind:showMemo
+            on:change={() => {
+              showMemo = !showMemo;
+            }}
+          />
+        </div>
+        {#if showMemo}
+          <Textbox
+            required
+            className="operation__send-address"
+            type="multiline"
+            bind:value={memo}
+          />
+        {/if}
       </div>
     </WizardStep>
     <!-- Amount Step -->
@@ -264,7 +288,7 @@
     >
       <div in:fade|global class="operation__send">
         <div class="operation__amount-wrapper">
-          <p>Amount:</p>
+          <p>Amount</p>
           <Button
             size="small"
             variant="tertiary"
@@ -352,7 +376,7 @@
         <dl class="operation__review-transaction">
           <dt class="review-transaction__label">
             <Icon path={mdiArrowUpBoldBoxOutline} />
-            <span>Amount:</span>
+            <span>Amount</span>
           </dt>
           <dd class="review-transaction__value operation__review-amount">
             <span>{formatter(sendAmount)}</span>
@@ -368,7 +392,7 @@
         <dl class="operation__review-transaction">
           <dt class="review-transaction__label">
             <Icon path={mdiWalletOutline} />
-            <span>To:</span>
+            <span>To</span>
           </dt>
           <dd class="operation__review-address">
             <span>{sendToAddress}</span>
@@ -382,7 +406,13 @@
     <WizardStep step={3} {key} showNavigation={false}>
       <OperationResult
         errorMessage="Transaction failed"
-        operation={execute(sendToAddress, sendAmountInLux, gasPrice, gasLimit)}
+        operation={execute(
+          sendToAddress,
+          sendAmountInLux,
+          gasPrice,
+          gasLimit,
+          memo
+        )}
         pendingMessage="Processing transaction"
         successMessage="Transaction created"
       >
diff --git a/web-wallet/src/lib/components/__tests__/Send.spec.js b/web-wallet/src/lib/components/__tests__/Send.spec.js
index abfb4b722e..39a872b2b0 100644
--- a/web-wallet/src/lib/components/__tests__/Send.spec.js
+++ b/web-wallet/src/lib/components/__tests__/Send.spec.js
@@ -27,6 +27,7 @@ describe("Send", () => {
     "zTsZq814KfWUAQujzjBchbMEvqA1FiKBUakMCtAc2zCa74h9YVz4a2roYwS7LHDHeBwS1aap4f3GYhQBrxroYgsBcE4FJdkUbvpSD5LVXY6JRXNgMXgk6ckTPJUFKoHybff";
   const shieldedAddress =
     "47jNTgAhzn9KCKF3msCfvKg3k1P1QpPCLZ3HG3AoNp87sQ5WNS3QyjckYHWeuXqW7uvLmbKgejpP8Xkcip89vnMM";
+  const memo = "";
   const baseProps = {
     availableBalance: 1_000_000_000_000n,
     execute: vi.fn().mockResolvedValue(lastTxId),
@@ -40,6 +41,7 @@ describe("Send", () => {
       gasLimit: 20000000n,
       gasPrice: 1n,
     },
+    memo,
     publicAddress,
     shieldedAddress,
   };
@@ -279,7 +281,8 @@ describe("Send", () => {
         shieldedAddress,
         duskToLux(amount),
         baseProps.gasSettings.gasPrice,
-        baseProps.gasSettings.gasLimit
+        baseProps.gasSettings.gasLimit,
+        baseProps.memo
       );
 
       const explorerLink = getByRole("link", { name: /explorer/i });
@@ -314,7 +317,8 @@ describe("Send", () => {
         shieldedAddress,
         duskToLux(amount),
         baseProps.gasSettings.gasPrice,
-        baseProps.gasSettings.gasLimit
+        baseProps.gasSettings.gasLimit,
+        baseProps.memo
       );
       expect(getByText("Transaction failed")).toBeInTheDocument();
       expect(getByText(errorMessage)).toBeInTheDocument();
@@ -343,7 +347,8 @@ describe("Send", () => {
         shieldedAddress,
         duskToLux(amount),
         baseProps.gasSettings.gasPrice,
-        baseProps.gasSettings.gasLimit
+        baseProps.gasSettings.gasLimit,
+        baseProps.memo
       );
       expect(getByText("Transaction created")).toBeInTheDocument();
       expect(() => getByRole("link", { name: /explorer/i })).toThrow();
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Send.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Send.spec.js.snap
index 9ffc6e3dd8..8166f7dc90 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/Send.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/Send.spec.js.snap
@@ -85,7 +85,7 @@ exports[`Send > Address step > should display a warning if the address input is
         class="operation__address-wrapper svelte-npcavd"
       >
         <p>
-          Address:
+          Address
         </p>
          
         <button
@@ -162,6 +162,24 @@ exports[`Send > Address step > should display a warning if the address input is
         </button>
       </div>
        
+       
+      <div
+        class="operation__address-wrapper svelte-npcavd"
+      >
+        <p>
+          Memo
+        </p>
+         
+        <div
+          aria-checked="false"
+          aria-disabled="false"
+          class="dusk-switch"
+          role="switch"
+          showmemo="false"
+          tabindex="0"
+        />
+      </div>
+       
     </div>
      
     <div
@@ -313,7 +331,7 @@ exports[`Send > Address step > should display a warning if the address input is
         class="operation__address-wrapper svelte-npcavd"
       >
         <p>
-          Address:
+          Address
         </p>
          
         <button
@@ -419,6 +437,24 @@ exports[`Send > Address step > should display a warning if the address input is
           </p>
         </div>
       </div>
+       
+      <div
+        class="operation__address-wrapper svelte-npcavd"
+      >
+        <p>
+          Memo
+        </p>
+         
+        <div
+          aria-checked="false"
+          aria-disabled="false"
+          class="dusk-switch"
+          role="switch"
+          showmemo="false"
+          tabindex="0"
+        />
+      </div>
+       
     </div>
      
     <div
@@ -570,7 +606,7 @@ exports[`Send > Address step > should render the Send component Address step 1`]
         class="operation__address-wrapper svelte-npcavd"
       >
         <p>
-          Address:
+          Address
         </p>
          
         <button
@@ -587,7 +623,7 @@ exports[`Send > Address step > should render the Send component Address step 1`]
       </div>
        
       <textarea
-        class="dusk-textbox dusk-textbox-multiline operation__send-address operation__send-address--invalid"
+        class="dusk-textbox dusk-textbox-multiline operation__send-address "
         required=""
       />
       
@@ -620,6 +656,24 @@ exports[`Send > Address step > should render the Send component Address step 1`]
         </button>
       </div>
        
+       
+      <div
+        class="operation__address-wrapper svelte-npcavd"
+      >
+        <p>
+          Memo
+        </p>
+         
+        <div
+          aria-checked="false"
+          aria-disabled="false"
+          class="dusk-switch"
+          role="switch"
+          showmemo="false"
+          tabindex="0"
+        />
+      </div>
+       
     </div>
      
     <div
@@ -774,7 +828,7 @@ exports[`Send > Amount step > should render the Send component Amount step 1`] =
         class="operation__amount-wrapper svelte-npcavd"
       >
         <p>
-          Amount:
+          Amount
         </p>
          
         <button
@@ -1049,7 +1103,7 @@ exports[`Send > Review step > should render the Send component Review step 1`] =
           
            
           <span>
-            Amount:
+            Amount
           </span>
            
         </dt>
@@ -1093,7 +1147,7 @@ exports[`Send > Review step > should render the Send component Review step 1`] =
           
            
           <span>
-            To:
+            To
           </span>
            
         </dt>
diff --git a/web-wallet/src/lib/contracts/__tests__/executeSend.spec.js b/web-wallet/src/lib/contracts/__tests__/executeSend.spec.js
index 7d40f472c3..5aea98c54e 100644
--- a/web-wallet/src/lib/contracts/__tests__/executeSend.spec.js
+++ b/web-wallet/src/lib/contracts/__tests__/executeSend.spec.js
@@ -32,7 +32,13 @@ describe("executeSend", () => {
   it("should call the walletStore transfer method and execute the transaction", async () => {
     const duskAmount = 1000;
     const luxAmount = BigInt(duskAmount * 1e9);
-    const result = await executeSend("fake-address", luxAmount, 1n, 500n);
+    const result = await executeSend(
+      "fake-address",
+      luxAmount,
+      1n,
+      500n,
+      "test memo"
+    );
 
     expect(walletStore.transfer).toHaveBeenCalledTimes(1);
     expect(walletStore.transfer).toHaveBeenCalledWith(
@@ -41,7 +47,8 @@ describe("executeSend", () => {
       expect.objectContaining({
         limit: 500n,
         price: 1n,
-      })
+      }),
+      "test memo"
     );
     expect(result).toBe("some-tx-id");
   });
diff --git a/web-wallet/src/lib/contracts/executeSend.js b/web-wallet/src/lib/contracts/executeSend.js
index f6dfb34b44..83f0ee2e8b 100644
--- a/web-wallet/src/lib/contracts/executeSend.js
+++ b/web-wallet/src/lib/contracts/executeSend.js
@@ -3,8 +3,8 @@ import { Gas } from "$lib/vendor/w3sper.js/src/mod";
 
 import { walletStore } from "$lib/stores";
 
-/** @type {(to: string, amount: bigint, gasPrice: bigint, gasLimit: bigint) => Promise<string>} */
-const executeSend = (to, amount, gasPrice, gasLimit) => {
+/** @type {(to: string, amount: bigint, gasPrice: bigint, gasLimit: bigint, memo: any) => Promise<string>} */
+const executeSend = (to, amount, gasPrice, gasLimit, memo) => {
   return walletStore
     .transfer(
       to,
@@ -12,7 +12,8 @@ const executeSend = (to, amount, gasPrice, gasLimit) => {
       new Gas({
         limit: gasLimit,
         price: gasPrice,
-      })
+      }),
+      memo
     )
     .then(getKey("hash"));
 };
diff --git a/web-wallet/src/lib/mock-data/transactions.js b/web-wallet/src/lib/mock-data/transactions.js
index 61ced30423..72add7ec90 100644
--- a/web-wallet/src/lib/mock-data/transactions.js
+++ b/web-wallet/src/lib/mock-data/transactions.js
@@ -8,6 +8,7 @@ export default [
     direction: "In",
     fee: 1876,
     id: "tg874534tddsghdtst54hdfh793h",
+    memo: "abcd",
     tx_type: "TRANSFER",
   },
   {
@@ -16,6 +17,7 @@ export default [
     direction: "In",
     fee: 1876,
     id: "tg874534tddsghdtst54hdfh791h",
+    memo: "abcd",
     tx_type: "TRANSFER",
   },
   {
@@ -24,6 +26,7 @@ export default [
     direction: "In",
     fee: 1876,
     id: "tg874534tddsghdtst54hdfh790h",
+    memo: "abcd",
     tx_type: "STAKE",
   },
   {
@@ -32,6 +35,7 @@ export default [
     direction: "In",
     fee: 1876,
     id: "tg874534tddsghdtst54hdfh794h",
+    memo: "abcd",
     tx_type: "TRANSFER",
   },
   {
@@ -40,6 +44,7 @@ export default [
     direction: "Out",
     fee: 1876,
     id: "tg874534tddsghdtst54hdfh795h",
+    memo: "abcd",
     tx_type: "STAKE",
   },
   {
@@ -48,6 +53,7 @@ export default [
     direction: "Out",
     fee: 1876,
     id: "tg874534tddsghdtst54hdfh792h",
+    memo: "abcd",
     tx_type: "TRANSFER",
   },
 ];
diff --git a/web-wallet/src/lib/stores/__tests__/walletStore.spec.js b/web-wallet/src/lib/stores/__tests__/walletStore.spec.js
index 2bb2787c57..2c8fc10525 100644
--- a/web-wallet/src/lib/stores/__tests__/walletStore.spec.js
+++ b/web-wallet/src/lib/stores/__tests__/walletStore.spec.js
@@ -310,6 +310,7 @@ describe("Wallet store", async () => {
       "zTsZq814KfWUAQujzjBchbMEvqA1FiKBUakMCtAc2zCa74h9YVz4a2roYwS7LHDHeBwS1aap4f3GYhQBrxroYgsBcE4FJdkUbvpSD5LVXY6JRXNgMXgk6ckTPJUFKoHybff";
     const amount = 150_000_000_000n;
     const gas = new Gas({ limit: 500n, price: 1n });
+    const memo = "abcd";
 
     const phoenixTxResult = {
       hash: "some-tx-id",
@@ -526,11 +527,21 @@ describe("Wallet store", async () => {
     });
 
     it("should expose a method to execute a phoenix transfer, if the receiver is a phoenix address", async () => {
-      await walletStoreTransferCheck("transfer", [toPhoenix, amount, gas]);
+      await walletStoreTransferCheck("transfer", [
+        toPhoenix,
+        amount,
+        gas,
+        memo,
+      ]);
     });
 
     it("should use the moonlight account and shouldn't obfuscate the transaction if the receiver is a moonlight account", async () => {
-      await walletStoreTransferCheck("transfer", [toMoonlight, amount, gas]);
+      await walletStoreTransferCheck("transfer", [
+        toMoonlight,
+        amount,
+        gas,
+        memo,
+      ]);
     });
 
     it("should expose a method to unshield a given amount from the shielded account", async () => {
diff --git a/web-wallet/src/lib/stores/stores.d.ts b/web-wallet/src/lib/stores/stores.d.ts
index d8275654ae..290279a1e5 100644
--- a/web-wallet/src/lib/stores/stores.d.ts
+++ b/web-wallet/src/lib/stores/stores.d.ts
@@ -132,7 +132,8 @@ type WalletStoreServices = {
   transfer: (
     to: string,
     amount: bigint,
-    gas: import("$lib/vendor/w3sper.js/src/mod").Gas
+    gas: import("$lib/vendor/w3sper.js/src/mod").Gas,
+    memo: any
   ) => Promise<TransactionInfo>;
 
   unshield: (
diff --git a/web-wallet/src/lib/stores/walletStore.js b/web-wallet/src/lib/stores/walletStore.js
index 3424abc46e..45322ae9a0 100644
--- a/web-wallet/src/lib/stores/walletStore.js
+++ b/web-wallet/src/lib/stores/walletStore.js
@@ -374,7 +374,7 @@ async function sync(fromBlock) {
 }
 
 /** @type {WalletStoreServices["transfer"]} */
-const transfer = async (to, amount, gas) =>
+const transfer = async (to, amount, gas, memo) =>
   sync()
     .then(networkStore.connect)
     .then((network) => {
@@ -382,6 +382,8 @@ const transfer = async (to, amount, gas) =>
         .as(getCurrentProfile())
         .transfer(amount)
         .to(to)
+        // @ts-ignore we don't have access to the AddressTransfer type
+        .memo(memo)
         .gas(gas);
 
       return network.execute(
diff --git a/web-wallet/src/lib/transactions/transactions.d.ts b/web-wallet/src/lib/transactions/transactions.d.ts
index 65b7366f4b..e2b003e6e8 100644
--- a/web-wallet/src/lib/transactions/transactions.d.ts
+++ b/web-wallet/src/lib/transactions/transactions.d.ts
@@ -4,5 +4,6 @@ type Transaction = {
   direction: "In" | "Out";
   fee: number;
   id: string;
+  memo: string | Uint8Array;
   tx_type: string;
 };
diff --git a/web-wallet/src/routes/(app)/dashboard/send/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/send/__tests__/__snapshots__/page.spec.js.snap
index 827cc6d0ea..b75fc494a1 100644
--- a/web-wallet/src/routes/(app)/dashboard/send/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/send/__tests__/__snapshots__/page.spec.js.snap
@@ -164,7 +164,7 @@ exports[`Send page > should render the send page 1`] = `
             class="operation__address-wrapper svelte-npcavd"
           >
             <p>
-              Address:
+              Address
             </p>
              
             <button
@@ -181,7 +181,7 @@ exports[`Send page > should render the send page 1`] = `
           </div>
            
           <textarea
-            class="dusk-textbox dusk-textbox-multiline operation__send-address operation__send-address--invalid"
+            class="dusk-textbox dusk-textbox-multiline operation__send-address "
             required=""
           />
           
@@ -214,6 +214,24 @@ exports[`Send page > should render the send page 1`] = `
             </button>
           </div>
            
+           
+          <div
+            class="operation__address-wrapper svelte-npcavd"
+          >
+            <p>
+              Memo
+            </p>
+             
+            <div
+              aria-checked="false"
+              aria-disabled="false"
+              class="dusk-switch"
+              role="switch"
+              showmemo="false"
+              tabindex="0"
+            />
+          </div>
+           
         </div>
          
         <div
diff --git a/web-wallet/src/routes/(app)/settings/+page.svelte b/web-wallet/src/routes/(app)/settings/+page.svelte
index 60315dbe02..83015cd496 100644
--- a/web-wallet/src/routes/(app)/settings/+page.svelte
+++ b/web-wallet/src/routes/(app)/settings/+page.svelte
@@ -187,7 +187,7 @@
           summary="An error occurred while resetting the wallet. Please try again."
         />
         <Button
-          className="settings-group__button--state--danger"
+          className="settings__reset settings-group__button--state--danger"
           disabled={syncStatus.isInProgress}
           data-tooltip-disabled={!syncStatus.isInProgress}
           data-tooltip-id="main-tooltip"
@@ -236,6 +236,10 @@
     :global(& button, & select, & a) {
       width: 100%;
     }
+
+    :global(&__reset) {
+      margin-top: 1rem;
+    }
   }
 
   .settings-group {
diff --git a/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
index 003678f335..e5199def22 100644
--- a/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Settings > Resetting the wallet > should show an error if clearing local data fails 1`] = `
 <section
-  class="settings svelte-1mpdn76"
+  class="settings svelte-1y30kz2"
 >
   <header
-    class="settings__header svelte-1mpdn76"
+    class="settings__header svelte-1y30kz2"
   >
     <h2>
       Settings
@@ -13,13 +13,13 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
   </header>
    
   <div
-    class="settings__content svelte-1mpdn76"
+    class="settings__content svelte-1y30kz2"
   >
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -33,14 +33,14 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Gas
         </h3>
       </header>
        
       <div
-        class="settings-group__multi-control-content svelte-1mpdn76"
+        class="settings-group__multi-control-content svelte-1y30kz2"
       >
         <label
           class="gas-control svelte-1p4ekyk"
@@ -85,10 +85,10 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
     <hr />
      
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -102,20 +102,20 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Preferences
         </h3>
       </header>
        
       <div
-        class="settings-group__multi-control-content svelte-1mpdn76"
+        class="settings-group__multi-control-content svelte-1y30kz2"
       >
         <label
-          class="settings-group__control settings-group__control--with-label svelte-1mpdn76"
+          class="settings-group__control settings-group__control--with-label svelte-1y30kz2"
         >
           <span
-            class="svelte-1mpdn76"
+            class="svelte-1y30kz2"
           >
             Currency:
           </span>
@@ -398,7 +398,7 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
         </label>
          
         <label
-          class="settings-group__control settings-group__control--switch svelte-1mpdn76"
+          class="settings-group__control settings-group__control--switch svelte-1y30kz2"
         >
           <span>
             Dark mode
@@ -418,10 +418,10 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
     <hr />
      
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -435,7 +435,7 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Support
         </h3>
@@ -479,10 +479,10 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
     <hr />
      
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -496,14 +496,14 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Reset wallet
         </h3>
       </header>
        
       <div
-        class="settings-group__multi-control-content svelte-1mpdn76"
+        class="settings-group__multi-control-content svelte-1y30kz2"
       >
         <p>
           Resetting your wallet clears the cache and restores default settings
@@ -533,7 +533,7 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
         
          
         <button
-          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings-group__button--state--danger"
+          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings__reset settings-group__button--state--danger"
           data-tooltip-disabled="true"
           data-tooltip-id="main-tooltip"
           data-tooltip-text="Not allowed to reset while syncing"
@@ -554,10 +554,10 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
 
 exports[`Settings > should render the settings page displaying the status of the network 1`] = `
 <section
-  class="settings svelte-1mpdn76"
+  class="settings svelte-1y30kz2"
 >
   <header
-    class="settings__header svelte-1mpdn76"
+    class="settings__header svelte-1y30kz2"
   >
     <h2>
       Settings
@@ -565,13 +565,13 @@ exports[`Settings > should render the settings page displaying the status of the
   </header>
    
   <div
-    class="settings__content svelte-1mpdn76"
+    class="settings__content svelte-1y30kz2"
   >
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -585,14 +585,14 @@ exports[`Settings > should render the settings page displaying the status of the
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Gas
         </h3>
       </header>
        
       <div
-        class="settings-group__multi-control-content svelte-1mpdn76"
+        class="settings-group__multi-control-content svelte-1y30kz2"
       >
         <label
           class="gas-control svelte-1p4ekyk"
@@ -637,10 +637,10 @@ exports[`Settings > should render the settings page displaying the status of the
     <hr />
      
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -654,20 +654,20 @@ exports[`Settings > should render the settings page displaying the status of the
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Preferences
         </h3>
       </header>
        
       <div
-        class="settings-group__multi-control-content svelte-1mpdn76"
+        class="settings-group__multi-control-content svelte-1y30kz2"
       >
         <label
-          class="settings-group__control settings-group__control--with-label svelte-1mpdn76"
+          class="settings-group__control settings-group__control--with-label svelte-1y30kz2"
         >
           <span
-            class="svelte-1mpdn76"
+            class="svelte-1y30kz2"
           >
             Currency:
           </span>
@@ -950,7 +950,7 @@ exports[`Settings > should render the settings page displaying the status of the
         </label>
          
         <label
-          class="settings-group__control settings-group__control--switch svelte-1mpdn76"
+          class="settings-group__control settings-group__control--switch svelte-1y30kz2"
         >
           <span>
             Dark mode
@@ -970,10 +970,10 @@ exports[`Settings > should render the settings page displaying the status of the
     <hr />
      
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -987,7 +987,7 @@ exports[`Settings > should render the settings page displaying the status of the
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Support
         </h3>
@@ -1031,10 +1031,10 @@ exports[`Settings > should render the settings page displaying the status of the
     <hr />
      
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -1048,14 +1048,14 @@ exports[`Settings > should render the settings page displaying the status of the
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Reset wallet
         </h3>
       </header>
        
       <div
-        class="settings-group__multi-control-content svelte-1mpdn76"
+        class="settings-group__multi-control-content svelte-1y30kz2"
       >
         <p>
           Resetting your wallet clears the cache and restores default settings
@@ -1067,7 +1067,7 @@ exports[`Settings > should render the settings page displaying the status of the
         
          
         <button
-          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings-group__button--state--danger"
+          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings__reset settings-group__button--state--danger"
           data-tooltip-disabled="true"
           data-tooltip-id="main-tooltip"
           data-tooltip-text="Not allowed to reset while syncing"
@@ -1088,10 +1088,10 @@ exports[`Settings > should render the settings page displaying the status of the
 
 exports[`Settings > should render the settings page displaying the status of the network 2`] = `
 <section
-  class="settings svelte-1mpdn76"
+  class="settings svelte-1y30kz2"
 >
   <header
-    class="settings__header svelte-1mpdn76"
+    class="settings__header svelte-1y30kz2"
   >
     <h2>
       Settings
@@ -1099,13 +1099,13 @@ exports[`Settings > should render the settings page displaying the status of the
   </header>
    
   <div
-    class="settings__content svelte-1mpdn76"
+    class="settings__content svelte-1y30kz2"
   >
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -1119,14 +1119,14 @@ exports[`Settings > should render the settings page displaying the status of the
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Gas
         </h3>
       </header>
        
       <div
-        class="settings-group__multi-control-content svelte-1mpdn76"
+        class="settings-group__multi-control-content svelte-1y30kz2"
       >
         <label
           class="gas-control svelte-1p4ekyk"
@@ -1171,10 +1171,10 @@ exports[`Settings > should render the settings page displaying the status of the
     <hr />
      
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -1188,20 +1188,20 @@ exports[`Settings > should render the settings page displaying the status of the
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Preferences
         </h3>
       </header>
        
       <div
-        class="settings-group__multi-control-content svelte-1mpdn76"
+        class="settings-group__multi-control-content svelte-1y30kz2"
       >
         <label
-          class="settings-group__control settings-group__control--with-label svelte-1mpdn76"
+          class="settings-group__control settings-group__control--with-label svelte-1y30kz2"
         >
           <span
-            class="svelte-1mpdn76"
+            class="svelte-1y30kz2"
           >
             Currency:
           </span>
@@ -1484,7 +1484,7 @@ exports[`Settings > should render the settings page displaying the status of the
         </label>
          
         <label
-          class="settings-group__control settings-group__control--switch svelte-1mpdn76"
+          class="settings-group__control settings-group__control--switch svelte-1y30kz2"
         >
           <span>
             Dark mode
@@ -1504,10 +1504,10 @@ exports[`Settings > should render the settings page displaying the status of the
     <hr />
      
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -1521,7 +1521,7 @@ exports[`Settings > should render the settings page displaying the status of the
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Support
         </h3>
@@ -1565,10 +1565,10 @@ exports[`Settings > should render the settings page displaying the status of the
     <hr />
      
     <article
-      class="settings-group svelte-1mpdn76"
+      class="settings-group svelte-1y30kz2"
     >
       <header
-        class="settings-group__header svelte-1mpdn76"
+        class="settings-group__header svelte-1y30kz2"
       >
         <svg
           class="dusk-icon dusk-icon--size--default"
@@ -1582,14 +1582,14 @@ exports[`Settings > should render the settings page displaying the status of the
         
          
         <h3
-          class="h4 settings-group__heading svelte-1mpdn76"
+          class="h4 settings-group__heading svelte-1y30kz2"
         >
           Reset wallet
         </h3>
       </header>
        
       <div
-        class="settings-group__multi-control-content svelte-1mpdn76"
+        class="settings-group__multi-control-content svelte-1y30kz2"
       >
         <p>
           Resetting your wallet clears the cache and restores default settings
@@ -1601,7 +1601,7 @@ exports[`Settings > should render the settings page displaying the status of the
         
          
         <button
-          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings-group__button--state--danger"
+          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings__reset settings-group__button--state--danger"
           data-tooltip-disabled="true"
           data-tooltip-id="main-tooltip"
           data-tooltip-text="Not allowed to reset while syncing"
diff --git a/web-wallet/src/style/dusk-components/textbox.css b/web-wallet/src/style/dusk-components/textbox.css
index 13db3e0d50..f627923ed4 100644
--- a/web-wallet/src/style/dusk-components/textbox.css
+++ b/web-wallet/src/style/dusk-components/textbox.css
@@ -17,7 +17,7 @@
   opacity: 0.5;
 }
 
-.dusk-textbox:invalid {
+.dusk-textbox:not(:focus):invalid {
   color: var(--error-color);
 }