Add counter for memo limit

ScopeLift · Apr 1, 2021 · c892d0f · c892d0f
1 parent 7189abc
commit c892d0f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/frontend/src/components/BaseInput.vue b/frontend/src/components/BaseInput.vue
@@ -32,6 +32,17 @@
         @click="handleClick"
       />
     </template>
+    <template v-else-if="counter" v-slot:append>
+      <q-circular-progress
+        :value="counter"
+        size="2.75rem"
+        :color="counter > 100 ? 'negative' : 'primary'"
+        show-value
+        track-color="grey-4"
+      >
+        {{ counter }} %
+      </q-circular-progress>
+    </template>
   </q-input>
 </template>
 
@@ -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
@@ -31,7 +31,14 @@
 
       <!-- Memo (payload extension) -->
       <div>Include a brief, optional<span v-if="advancedMode"> 16 byte</span> memo</div>
-      <base-input v-model="memo" :disable="isSending" placeholder="Memo" lazy-rules :rules="isValidMemo" />
+      <base-input
+        v-model="memo"
+        :counter="payloadCounter"
+        :disable="isSending"
+        placeholder="Memo"
+        lazy-rules
+        :rules="isValidMemo"
+      />
 
       <!-- Send button -->
       <div>
@@ -74,6 +81,10 @@ function useSendForm() {
   const humanAmount = ref<string>();
   const memo = ref<string>();
   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,