replace json viewer

src/modules/[chain]/account/[address].vue

@@ -10,7 +10,7 @@ import DonutChart from '@/components/charts/DonutChart.vue';
 import { computed, ref } from '@vue/reactivity';
 import { onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
-import 'vue-json-pretty/lib/styles.css';
+
 import type {
   AuthAccount,
   Delegation,

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

@@ -3,8 +3,10 @@ import { useBlockchain, useFormatter } from '@/stores';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import { computed, ref } from '@vue/reactivity';
 import type { Tx, TxResponse } from '@/types';
-import JsonPretty from 'vue-json-pretty';
-import 'vue-json-pretty/lib/styles.css';
+
+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";
 
 const props = defineProps(['hash', 'chain']);
 
@@ -102,7 +104,7 @@ const messages = computed(() => {
 
         <div v-if="tx.tx_response" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
             <h2 class="card-title truncate mb-2">JSON</h2>
-            <JsonPretty :data="tx" :deep="3" />
+            <JsonViewer :value="tx" copyable boxed sort expand-depth="5"/>
         </div>
     </div>
 </template>