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"
/>
+
+
+ {{ counter }} %
+
+
@@ -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,