diff --git a/frontend/src/components/BaseInput.vue b/frontend/src/components/BaseInput.vue index e940e0c18..1041d88f6 100644 --- a/frontend/src/components/BaseInput.vue +++ b/frontend/src/components/BaseInput.vue @@ -32,6 +32,17 @@ @click="handleClick" /> + @@ -78,6 +89,12 @@ export default Vue.extend({ default: undefined, }, + counter: { + type: Number, + required: false, + default: undefined, + }, + dense: { type: Boolean, required: false, diff --git a/frontend/src/pages/AccountSend.vue b/frontend/src/pages/AccountSend.vue index 155828f81..2790ae552 100644 --- a/frontend/src/pages/AccountSend.vue +++ b/frontend/src/pages/AccountSend.vue @@ -31,7 +31,14 @@
Include a brief, optional 16 byte memo
- +
@@ -74,6 +81,10 @@ function useSendForm() { const humanAmount = ref(); const memo = ref(); const payloadExtension = computed(() => (memo.value ? hexlify(toUtf8Bytes(memo.value)) : zeroPrefix)); + const payloadCounter = computed(() => + // Counts percentage progress of payload extension. Reaches 100% at 16 bytes + payloadExtension.value === zeroPrefix ? 0 : Math.round((100 * payloadExtension.value.slice(2).length) / 32) + ); function isValidId(val: string) { if (val && (ens.isEnsDomain(val) || cns.isCnsDomain(val))) return true; @@ -160,10 +171,11 @@ function useSendForm() { humanAmount, isSending, isValidId, - isValidTokenAmount, isValidMemo, + isValidTokenAmount, memo, onFormSubmit, + payloadCounter, recipientId, sendFormRef, token,