use simple repo

src/components/dynamic/ArrayBytesElement.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { fromBase64, toBase64 } from '@cosmjs/encoding';
+
+const props = defineProps({
+  value: { type: Array<Uint8Array>},
+})
+
+</script>
+<template>
+  <div>
+    <div v-for="v in props.value">
+      {{ toBase64(v) }}
+    </div>
+  </div>
+</template>

src/components/dynamic/ArrayElement.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { toBase64 } from '@cosmjs/encoding';
+import type { PropType } from 'vue';
+import { computed } from '@vue/reactivity';
+import DynamicComponentVue from './DynamicComponent.vue';
+import {select} from './index'
+import ArrayBytesElement from './ArrayBytesElement.vue';
+import ArrayObjectElement from './ArrayObjectElement.vue';
+import TextElement from './TextElement.vue';
+
+const props = defineProps({
+  value: { type: Array<Object>},
+})
+
+function selectByElement() {
+  if(props.value && props.value.length > 0) {
+    const [first] = props.value
+    switch(true) {
+      case first instanceof Uint8Array: 
+        return ArrayBytesElement
+      default:
+        return ArrayObjectElement
+    }
+  }
+  return TextElement
+}
+
+</script>
+<template>
+  <Component :is="selectByElement()" :value="props.value"></Component>
+</template>

src/components/dynamic/ArrayObjectElement.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { computed } from '@vue/reactivity';
+import DynamicComponent from './DynamicComponent.vue';
+
+const props = defineProps({
+  value: { type: Array<Object>},
+})
+
+const header = computed(() => {
+  if(props.value && props.value.length > 0) {
+    return Object.keys(props.value[0])
+  }
+  return []
+})
+
+</script>
+<template>
+  <VTable v-if="header.length > 0" density="compact" height="300px" fixed-header>
+    <thead>
+      <tr>
+        <th v-for="k in header" class="text-left text-capitalize">{{ k }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="v in props.value">
+        <td v-for="k in header"> <DynamicComponent :value="v[k]" /></td>
+      </tr>
+    </tbody>
+  </VTable>
+</template>

src/components/dynamic/DynamicComponent.vue

@@ -0,0 +1,11 @@
+
+<script lang="ts" setup>
+import TextElement from './TextElement.vue'
+import ObjectElement from './ObjectElement.vue'
+import { select } from './index'
+
+const props = defineProps(["value"]);
+</script>
+<template>
+    <Component :is="select(value)" :value="value"></Component>
+</template>

src/components/dynamic/NumberElement.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+const props = defineProps(["value"]);
+</script>
+<template>
+    <span>{{ Number(props.value) }}</span>
+</template>

src/components/dynamic/ObjectElement.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import DynamicComponent from './DynamicComponent.vue';
+import {select} from './index'
+
+const props = defineProps(["value"]);
+
+</script>
+<template>
+    <VTable>
+        <tbody>
+            <tr v-for="(v, k) of value">
+                <td class="text-capitalize">{{ k }}</td>
+                <td><div class="overflow-hidden w-auto" style="max-width: 1000px;">
+                    <Component v-if="v" :is="select(v, k)" :value="v"></Component></div>
+                </td>
+            </tr>
+        </tbody>
+    </VTable>
+</template>

src/components/dynamic/TextElement.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+const props = defineProps(["value"]);
+</script>
+<template>
+    <span>{{ props.value }}</span>
+</template>

src/components/dynamic/TxsElement.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { fromBase64, toBase64 } from '@cosmjs/encoding';
+import { decodeTxRaw } from '@cosmjs/proto-signing'
+import { computed } from '@vue/reactivity';
+import { hashTx } from '@/libs'
+import { useBlockchain, useFormatter } from '@/stores';
+const props = defineProps({
+  value: { type: Array<Uint8Array>},
+});
+
+const txs = computed(() => {
+    return props.value?.map(x => ({ hash: hashTx(x) , tx: decodeTxRaw(x) })) || []
+})
+
+const format = useFormatter()
+const chain = useBlockchain()
+
+</script>
+<template>
+    <VTable density="compact" v-if="txs.length > 0">
+        <thead>
+            <tr>
+                <th>Hash</th><th>Msgs</th><th>Memo</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="item in txs">
+                <td><RouterLink :to="`/${chain.chainName}/tx/${item.hash}`">{{ item.hash }}</RouterLink></td>
+                <td>{{ format.messages(item.tx.body.messages) }}</td>
+                <td>{{ item.tx.body.memo }}</td>
+            </tr>
+        </tbody>
+    </VTable>
+    <div v-else>[]</div>
+</template>

src/components/dynamic/UInt8Array.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { toBase64, toHex } from '@cosmjs/encoding';
+import { computed } from '@vue/reactivity';
+
+const props = defineProps(["value"]);
+const format = ref('base64')
+const text = computed(()=> {
+    return format.value === 'hex'? toHex(props.value) : toBase64(props.value)
+})
+function change() {
+    format.value = format.value === 'hex'? 'base64': 'hex'
+}
+</script>
+<template>
+    <span>{{ text }} <VIcon size="12" icon="mdi-cached" @click="change()"/></span>
+</template>

src/components/dynamic/index.ts

@@ -0,0 +1,37 @@
+import ObjectElement from './ObjectElement.vue'
+import TextElement from './TextElement.vue'
+import ArrayElement from './ArrayElement.vue'
+import UInt8Array from './UInt8Array.vue'
+import NumberElement from './NumberElement.vue'
+import TxsElement from './TxsElement.vue'
+import Long from 'long'
+
+export function select(v: any, k?: any) {
+    if(k === 'txs' && v) {
+        console.log("=======txs=======", k, v)
+        return TxsElement
+    } else {
+        const type = typeof v
+        switch(type) {
+            case 'object':
+                return selectObject(v)
+            case 'number':
+                return NumberElement
+            default: 
+                return TextElement
+        }
+    }
+}
+
+function selectObject(v: Object) {
+    switch(true) {
+        case v instanceof Long:
+            return NumberElement
+        case v instanceof Uint8Array:
+            return UInt8Array
+        case Array.isArray(v):
+            return ArrayElement
+        default:
+            return ObjectElement
+    }
+}