Skip to content

Commit

Permalink
feat(bridge-ui): add memo max length check (#12980)
Browse files Browse the repository at this point in the history
  • Loading branch information
shadab-taiko authored Jan 18, 2023
1 parent 53adc98 commit dd389be
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 5 deletions.
15 changes: 10 additions & 5 deletions packages/bridge-ui/src/components/form/BridgeForm.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
let memo: string = "";
let loading: boolean = false;
let isFaucetModalOpen: boolean = false;
let memoError: string;
$: getUserBalance($signer, $token, $fromChain);
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -129,7 +130,8 @@
amount: string,
token: Token,
tokenBalance: string,
requiresAllowance: boolean
requiresAllowance: boolean,
memoError: string,
) {
if (!signer) return true;
if (!tokenBalance) return true;
Expand All @@ -144,6 +146,9 @@
)
)
return true;
if(memoError) {
return true;
}
return false;
}
Expand Down Expand Up @@ -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}>
Expand All @@ -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}
>
Expand Down
17 changes: 17 additions & 0 deletions packages/bridge-ui/src/components/form/Memo.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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}>
Expand Down

0 comments on commit dd389be

Please sign in to comment.