better json encode

src/components/dynamic/DynamicComponent.vue

@@ -1,11 +1,21 @@
 <script lang="ts" setup>
+import { fromBase64 } from '@cosmjs/encoding';
+import { computed } from 'vue';
 import { select, decodeProto } from './index';
 
 const props = defineProps(['value', 'direct']);
-if (props.value?.typeUrl) {
-  props.value.value = decodeProto(props.value);
-}
+
+const selectValue = computed(() => {
+  if (typeof props.value === 'string') {
+    try {
+      return fromBase64(props.value);
+    } catch {}
+  } else if (props.value?.typeUrl) {
+    return { typeUrl: props.value.typeUrl, value: decodeProto(props.value) };
+  }
+  return props.value;
+});
 </script>
 <template>
-  <Component :is="select(value, direct)" :value="value"></Component>
+  <Component :is="select(value, direct)" :value="selectValue"></Component>
 </template>

src/components/dynamic/index.ts

@@ -12,7 +12,7 @@ import TimestampElement from './TimestampElement.vue';
 import ObjectHorizontalElement from './ObjectHorizontalElement.vue';
 import Long from 'long';
 import { MsgRegistry } from 'secretjs';
-import { toBech32 } from '@cosmjs/encoding';
+import { fromBase64, toBech32 } from '@cosmjs/encoding';
 
 export function select(v: any, direct?: string) {
   // if(k === 'txs' && v) {
@@ -105,7 +105,9 @@ export const decodeProto = (msg: {
   }
 
   if (type) {
-    const instance = (type.decode || type.deserialize)(msg.value);
+    const instance = (type.decode || type.deserialize)(
+      typeof msg.value === 'string' ? fromBase64(msg.value) : msg.value
+    );
     if (instance.msgs) {
       instance.msgs = instance.msgs.map(decodeProto);
     }

src/libs/utils.ts

@@ -260,3 +260,16 @@ export function rgbToHsl(color: string) {
     l,
   };
 }
+
+export const wrapBinary = (value: any): any => {
+  if (value instanceof Uint8Array) {
+    return toBase64(value);
+  }
+
+  if (typeof value === 'object') {
+    for (const key in value) {
+      value[key] = wrapBinary(value[key]);
+    }
+  }
+  return value;
+};

src/modules/[chain]/tx/[hash].vue

@@ -7,6 +7,7 @@ import { logs } from '@cosmjs/stargate';
 import { JsonViewer } from 'vue3-json-viewer';
 // if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
 import 'vue3-json-viewer/dist/index.css';
+import { wrapBinary } from '@/libs/utils';
 
 const props = defineProps(['hash', 'chain']);
 
@@ -143,7 +144,7 @@ const txLogs = computed(() => {
     >
       <h2 class="card-title truncate mb-2">JSON</h2>
       <JsonViewer
-        :value="tx"
+        :value="wrapBinary(tx)"
         :theme="baseStore.theme"
         style="background: transparent"
         copyable