add format converter

src/components/dynamic/ArrayObjectElement.vue

@@ -27,7 +27,7 @@ const header = computed(() => {
             :key="index"
             class="text-left capitalize"
           >
-            {{ item }} -
+            {{ item.replace(/_/g, ' ') }}
           </th>
         </tr>
       </thead>

src/components/dynamic/TextElement.vue

@@ -4,6 +4,7 @@ import { useBlockchain, useFormatter } from '@/stores';
 import MdEditor from 'md-editor-v3';
 import { computed, onMounted, ref } from 'vue';
 import nameMatcha from '@leapwallet/name-matcha'
+import { fromBase64, toHex } from '@cosmjs/encoding';
 
 const chainStore = useBlockchain()
 const props = defineProps(['value']);
@@ -33,6 +34,8 @@ const text = computed(() => {
     case v.search(/^[1-9]\d{3}-\d{1,2}-\d{1,2}T\d{1,2}:\d{2}:\d{2}[.\d]*Z$/g) > -1: {
       return new Date(v).toLocaleString(navigator.language)
     }
+    case toHexOutput.value:
+      return toHex(fromBase64(v)).toUpperCase()
   }
   return v
 })
@@ -44,6 +47,10 @@ onMounted(() => {
     names.value = Object.keys(re).map(key => ({name: re[key], provider: key})).filter( x => x.name)
   })
 })
+const toHexOutput = ref(false)
+const isConvertable = computed(() => {
+  return String(props.value).endsWith('=') && props.value.length !== 28
+})
 
 </script>
 <template>
@@ -62,7 +69,13 @@ onMounted(() => {
       </span>
     </div>
   </span>  
-  <span v-else>{{ text }}</span>
+  <span v-else class="flex"><span>{{ text }}</span>
+    <span v-if="isConvertable" @click="toHexOutput = !toHexOutput" class="ml-2">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+      </svg>
+    </span> 
+  </span>
 </template>
 
 <style lang="scss">