feat: added new feature to let users decode/encode account.memo

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
hashgraph · Sep 19, 2023 · ccd3b22 · ccd3b22
1 parent 467fadc
commit ccd3b22
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 10 deletions.
diff --git a/src/components/values/BlobValue.vue b/src/components/values/BlobValue.vue
@@ -31,6 +31,15 @@
          :style="{'max-width': windowWidth-limitingFactor + 'px'}">{{ decodedValue }}</div>
     <div v-else-if="limitingFactor" class="h-is-one-line is-inline-block"
          :style="{'max-width': windowWidth-limitingFactor+200 + 'px'}">{{ decodedValue }}</div>
+    <div v-else-if="showEncodeButton" style="word-break: break-word" class="is-flex is-full is-align-items-center has-background-transparent has-border has-border-white is-radiusless">
+      <div>{{ decodedValue }}</div>
+      <button
+        v-if="isBlobValueBase64candidate"
+        @click="base64TogglerFn"
+        class="button is-small has-text-white"
+        style="background-color: #202532; height: 26px; border:1px solid white; border-radius: 3px; margin-left: 1rem"
+      >{{ base64 ? "Decode data" : "Encode data" }}</button>
+    </div>
     <div v-else style="word-break: break-word">{{ decodedValue }}</div>
   </template>
   <span v-else-if="showNone && !initialLoading" class="has-text-grey">None</span>
@@ -62,16 +71,31 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    showEncodeButton: {
+      type: Boolean,
+      default: false
+    },
     pretty: {
       type: Boolean,
       default: false
     },
-    limitingFactor: Number
+    limitingFactor: Number,
+    base64Toggler: Function
   },
 
+  methods: {
+    base64TogglerFn() {
+      if (this.base64Toggler) {
+        this.base64Toggler()
+      }
+    }
+  },
+ 
   setup(props) {
-    const isMediumScreen = inject('isMediumScreen', true)
     const windowWidth = inject('windowWidth', 1280)
+    const isMediumScreen = inject('isMediumScreen', true)
+    const base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
+
     const isURL = computed(() => {
       let result: boolean
       if (props.blobValue) {
@@ -101,13 +125,18 @@ export default defineComponent({
       return result
     })
 
-    const decodedValue = computed(() => {
-
-      const base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
+    const isBlobValueBase64candidate = computed(() => {
+      if (props.blobValue) {
+        return base64regex.test(props.blobValue);
+      } else {
+        return false;
+      }
+    })
 
+    const decodedValue = computed(() => {
       let result: string
       if (props.blobValue) {
-        if (props.base64 && base64regex.test(props.blobValue)) {
+        if (props.base64 && isBlobValueBase64candidate.value) {
           try {
             result = Buffer.from(props.blobValue, 'base64').toString()
           } catch {
@@ -130,7 +159,8 @@ export default defineComponent({
       isURL,
       jsonValue,
       decodedValue,
-      initialLoading
+      initialLoading,
+      isBlobValueBase64candidate,
     }
   }
 })

diff --git a/src/pages/AccountDetails.vue b/src/pages/AccountDetails.vue
@@ -161,10 +161,11 @@
             <StringValue :string-value="account?.decline_reward ? 'Declined' : 'Accepted'"/>
           </template>
         </Property>
+
         <Property id="memo">
           <template v-slot:name>Memo</template>
           <template v-slot:value>
-            <BlobValue v-bind:base64="true" v-bind:blob-value="account?.memo" v-bind:show-none="true"/>
+            <BlobValue v-bind:showEncodeButton="true" v-bind:base64="base64Option" v-bind:base64Toggler="base64Toggler" v-bind:blob-value="account?.memo" v-bind:show-none="true"/>
           </template>
         </Property>
 
@@ -278,7 +279,7 @@
 
 <script lang="ts">
 
-import {computed, defineComponent, inject, onBeforeUnmount, onMounted, watch} from 'vue';
+import {computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch} from 'vue';
 import KeyValue from "@/components/values/KeyValue.vue";
 import PlayPauseButton from "@/components/PlayPauseButton.vue";
 import TransactionTable from "@/components/transaction/TransactionTable.vue";
@@ -480,6 +481,14 @@ export default defineComponent({
       return operatorNodeId != null ? routeManager.makeRouteToNode(operatorNodeId) : null
     })
 
+    //
+    // base64 decoding controler
+    //
+    const base64Option = ref(false)
+    const base64Toggler = () => {
+      base64Option.value = !base64Option.value
+    }
+
     return {
       isSmallScreen,
       isMediumScreen,
@@ -509,7 +518,9 @@ export default defineComponent({
       contractRoute,
       stakedNodeRoute,
       operatorNodeRoute,
-      availableAPI: rewardsTableController.availableAPI
+      availableAPI: rewardsTableController.availableAPI,
+      base64Option,
+      base64Toggler
     }
   }
 });