web-wallet: Add memo field in send flow

Resolves #3112

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"
       >

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();

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>

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");
   });

web-wallet/src/lib/contracts/executeSend.js

@@ -3,16 +3,17 @@ 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,
       amount,
       new Gas({
         limit: gasLimit,
         price: gasPrice,
-      })
+      }),
+      memo
     )
     .then(getKey("hash"));
 };

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",
   },
 ];