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,
@@ -33,7 +34,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} */
@@ -66,12 +67,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;
 
@@ -201,7 +208,7 @@
       <div in:fade|global class="operation__send">
         <ContractStatusesList {statuses} />
         <div class="operation__address-wrapper">
-          <p>Address:</p>
+          <p>Address</p>
           <Button
             disabled={!scanner}
             size="small"
@@ -213,7 +220,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}
         />
@@ -253,6 +260,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 -->
@@ -271,7 +295,7 @@
         <ContractStatusesList {statuses} />
 
         <div class="operation__amount-wrapper">
-          <p>Amount:</p>
+          <p>Amount</p>
           <Button
             size="small"
             variant="tertiary"
@@ -361,7 +385,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>
@@ -377,7 +401,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>
@@ -391,7 +415,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__/__snapshots__/Send.spec.js.snap

@@ -122,7 +122,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
@@ -199,6 +199,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
@@ -387,7 +405,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
@@ -493,6 +511,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
@@ -681,7 +717,7 @@ exports[`Send > Address step > should render the Send component Address step 1`]
         class="operation__address-wrapper svelte-npcavd"
       >
         <p>
-          Address:
+          Address
         </p>
          
         <button
@@ -698,7 +734,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=""
       />
       
@@ -731,6 +767,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
@@ -922,7 +976,7 @@ exports[`Send > Amount step > should render the Send component Amount step 1`] =
         class="operation__amount-wrapper svelte-npcavd"
       >
         <p>
-          Amount:
+          Amount
         </p>
          
         <button
@@ -1234,7 +1288,7 @@ exports[`Send > Review step > should render the Send component Review step 1`] =
           
            
           <span>
-            Amount:
+            Amount
           </span>
            
         </dt>
@@ -1278,7 +1332,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/stores/__tests__/walletStore.spec.js

@@ -311,6 +311,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",
@@ -513,11 +514,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 () => {

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: (

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

@@ -363,14 +363,16 @@ 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) => {
       const tx = bookkeeper
         .as(getCurrentProfile())
         .transfer(amount)
         .to(to)
+        // @ts-ignore we don't have access to the AddressTransfer type
+        .memo(memo)
         .gas(gas);
 
       return network.execute(