From dd389be4f47bfa37ffd338e674ff9e4bf7ea36c5 Mon Sep 17 00:00:00 2001
From: shadab-taiko <108871478+shadab-taiko@users.noreply.github.com>
Date: Thu, 19 Jan 2023 00:21:55 +0530
Subject: [PATCH] feat(bridge-ui): add memo max length check (#12980)

---
 .../src/components/form/BridgeForm.svelte       | 15 ++++++++++-----
 .../bridge-ui/src/components/form/Memo.svelte   | 17 +++++++++++++++++
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
index 27da5aa61d..02504cd127 100644
--- a/packages/bridge-ui/src/components/form/BridgeForm.svelte
+++ b/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,7 +410,7 @@
   </button>
 {:else if !requiresAllowance}
   <button
-    class="btn btn-accent w-full"
+    class="btn btn-accent w-full mt-4"
     on:click={bridge}
     disabled={btnDisabled}
   >
@@ -413,7 +418,7 @@
   </button>
 {:else}
   <button
-    class="btn btn-accent w-full mt-6"
+    class="btn btn-accent w-full mt-4"
     on:click={approve}
     disabled={btnDisabled}
   >
diff --git a/packages/bridge-ui/src/components/form/Memo.svelte b/packages/bridge-ui/src/components/form/Memo.svelte
index a19e17fcd4..b9bd547d0c 100644
--- a/packages/bridge-ui/src/components/form/Memo.svelte
+++ b/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,6 +35,7 @@
 </div>
 
 {#if showMemo}
+<div class="form-control">
   <input
     type="text"
     placeholder="Enter memo here..."
@@ -30,6 +43,10 @@
     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}>