From 808174d97b6d6bfc7dafeed41e755fd8bc29bf7e Mon Sep 17 00:00:00 2001
From: Pham Tu <tubackkhoa@gmail.com>
Date: Tue, 23 Jan 2024 11:49:20 +0700
Subject: [PATCH] remove cache

---
 src/components/dynamic/TxsElement.vue       | 29 +++++++++------------
 src/libs/utils.ts                           |  4 +--
 src/modules/[chain]/staking/[validator].vue |  2 +-
 src/modules/[chain]/tx/[hash].vue           | 18 +++++++------
 4 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/src/components/dynamic/TxsElement.vue b/src/components/dynamic/TxsElement.vue
index 40dc1fc8..2acf3af2 100644
--- a/src/components/dynamic/TxsElement.vue
+++ b/src/components/dynamic/TxsElement.vue
@@ -5,7 +5,7 @@ import { computed } from '@vue/reactivity';
 import type { PropType } from 'vue';
 import { hashTx } from '@/libs';
 import { useBlockchain, useFormatter } from '@/stores';
-import { TXS_CACHE } from '@/libs/utils';
+import type { DecodedTxRaw } from '@cosmjs/proto-signing';
 
 const props = defineProps({
   value: { type: Object as PropType<Block> },
@@ -16,20 +16,13 @@ const txs = computed(() => {
     props.value?.txs?.map((x) => {
       const tx = {
         hash: hashTx(x),
-        tx: decodeTxRaw(x),
+        tx: {} as DecodedTxRaw,
       };
-      TXS_CACHE[tx.hash] = {
-        txResponse: {
-          height: BigInt(props.value?.header.height!),
-          // @ts-ignore
-          timestamp: props.value?.header.time,
-          code: 0,
-          txhash: tx.hash,
-          gasWanted: tx.tx.authInfo.fee?.gasLimit!,
-        },
+      try {
         // @ts-ignore
-        tx: tx.tx,
-      };
+        tx.tx = decodeTxRaw(x);
+      } catch {}
+
       return tx;
     }) || []
   );
@@ -59,12 +52,14 @@ const chain = useBlockchain();
           </td>
           <td>
             {{
-              format.messages(
-                item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))
-              )
+              item.tx?.body
+                ? format.messages(
+                    item.tx?.body.messages.map((x) => ({ '@type': x.typeUrl }))
+                  )
+                : ''
             }}
           </td>
-          <td>{{ item.tx.body.memo }}</td>
+          <td>{{ item.tx?.body?.memo }}</td>
         </tr>
       </tbody>
     </table>
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index 2a240290..69bbc10b 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -1,10 +1,8 @@
 import { fromBinary, type JsonObject } from '@cosmjs/cosmwasm-stargate';
-import { fromAscii, toBase64 } from '@cosmjs/encoding';
+import { toBase64 } from '@cosmjs/encoding';
 import type { Timestamp } from 'cosmjs-types/google/protobuf/timestamp';
 import type { GetTxResponse } from 'cosmjs-types/cosmos/tx/v1beta1/service';
 
-export const TXS_CACHE: Record<string, GetTxResponse> = {};
-
 export function getLocalObject(name: string) {
   const text = localStorage.getItem(name);
   if (text) {
diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index 513499a8..ff178bb1 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -140,7 +140,7 @@ const loadAvatar = (identity: string) => {
 onMounted(() => {
   if (validator) {
     staking.fetchValidator(validator).then((res) => {
-      if (!res) return;
+      if (!res?.validator) return;
       v.value = res.validator;
       identity.value = res.validator?.description?.identity || '';
       if (identity.value && !avatars.value[identity.value])
diff --git a/src/modules/[chain]/tx/[hash].vue b/src/modules/[chain]/tx/[hash].vue
index 91fd18ad..c7cc2c78 100644
--- a/src/modules/[chain]/tx/[hash].vue
+++ b/src/modules/[chain]/tx/[hash].vue
@@ -7,27 +7,26 @@ import type { GetTxResponse } from 'cosmjs-types/cosmos/tx/v1beta1/service';
 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 { TXS_CACHE } from '@/libs/utils';
 
 const props = defineProps(['hash', 'chain']);
 
 const blockchain = useBlockchain();
 const baseStore = useBaseStore();
 const format = useFormatter();
-const tx = ref({} as GetTxResponse);
+const tx = ref({} as GetTxResponse | undefined);
 if (props.hash) {
   blockchain.rpc.getTx(props.hash).then((x) => {
-    tx.value = x ?? TXS_CACHE[props.hash];
+    tx.value = x;
   });
 }
 const messages = computed(() => {
-  return tx.value.tx?.body?.messages || [];
+  return tx.value?.tx?.body?.messages || [];
 });
 </script>
 <template>
   <div>
     <div
-      v-if="tx.txResponse"
+      v-if="tx?.txResponse"
       class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4"
     >
       <h2 class="card-title truncate mb-2">{{ $t('tx.title') }}</h2>
@@ -36,7 +35,7 @@ const messages = computed(() => {
           <tbody>
             <tr>
               <td>{{ $t('tx.tx_hash') }}</td>
-              <td>{{ tx.txResponse.txhash }}</td>
+              <td>{{ tx?.txResponse.txhash }}</td>
             </tr>
             <tr>
               <td>{{ $t('account.height') }}</td>
@@ -106,7 +105,7 @@ const messages = computed(() => {
     </div>
 
     <div
-      v-if="tx.txResponse"
+      v-if="tx?.txResponse"
       class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4"
     >
       <h2 class="card-title truncate mb-2">
@@ -120,7 +119,10 @@ const messages = computed(() => {
       <div v-if="messages.length === 0">{{ $t('tx.no_messages') }}</div>
     </div>
 
-    <div v-if="tx.txResponse" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+    <div
+      v-if="tx?.txResponse"
+      class="bg-base-100 px-4 pt-3 pb-4 rounded shadow"
+    >
       <h2 class="card-title truncate mb-2">JSON</h2>
       <JsonViewer
         :value="tx"