feat(bridge-ui): add memo max length check (#12980)

packages/bridge-ui/src/components/form/BridgeForm.svelte

@@ -48,6 +48,7 @@
   let memo: string = "";
   let loading: boolean = false;
   let isFaucetModalOpen: boolean = false;
+  let memoError: string;
 
   $: getUserBalance($signer, $token, $fromChain);
 
@@ -97,7 +98,7 @@
     }
   }
 
-  $: isBtnDisabled($signer, amount, $token, tokenBalance, requiresAllowance)
+  $: isBtnDisabled($signer, amount, $token, tokenBalance, requiresAllowance, memoError)
     .then((d) => (btnDisabled = d))
     .catch((e) => console.log(e));
 
@@ -129,7 +130,8 @@
     amount: string,
     token: Token,
     tokenBalance: string,
-    requiresAllowance: boolean
+    requiresAllowance: boolean,
+    memoError: string,
   ) {
     if (!signer) return true;
     if (!tokenBalance) return true;
@@ -144,6 +146,9 @@
       )
     )
       return true;
+    if(memoError) {
+      return true;
+    }
 
     return false;
   }
@@ -387,7 +392,7 @@
 
 <ProcessingFee bind:customFee bind:recommendedFee />
 
-<Memo bind:memo />
+<Memo bind:memo bind:memoError />
 
 {#if loading}
   <button class="btn btn-accent w-full" disabled={true}>
@@ -405,15 +410,15 @@
   </button>
 {:else if !requiresAllowance}
   <button
-    class="btn btn-accent w-full"
+    class="btn btn-accent w-full mt-4"
     on:click={bridge}
     disabled={btnDisabled}
   >
     {$_("home.bridge")}
   </button>
 {:else}
   <button
-    class="btn btn-accent w-full mt-6"
+    class="btn btn-accent w-full mt-4"
     on:click={approve}
     disabled={btnDisabled}
   >

packages/bridge-ui/src/components/form/Memo.svelte

@@ -6,6 +6,18 @@
   export let memo: string = "";
   let showMemo: boolean = false;
   let tooltipOpen: boolean = false;
+  export let memoError: string;
+
+  function checkSizeLimit(input) {
+    const bytes = (new TextEncoder().encode(input)).length;
+    if(bytes > 128) {
+      memoError = 'Max limit reached'
+    } else {
+      memoError = null;
+    }
+  }
+
+  $: checkSizeLimit(memo);
 </script>
 
 <div class="flex flex-row justify-between mb-2">
@@ -23,13 +35,18 @@
 </div>
 
 {#if showMemo}
+<div class="form-control">
   <input
     type="text"
     placeholder="Enter memo here..."
     class="input input-primary bg-dark-4 input-md md:input-lg w-full mb-2"
     name="memo"
     bind:value={memo}
   />
+  <label class="label min-h-[20px] mb-0 p-0" for="name">
+    <span class="label-text-alt text-error text-sm">{memoError ?? ''}</span>
+  </label>
+</div>
 {/if}
 
 <TooltipModal title="Memo" bind:isOpen={tooltipOpen}>