From b0ca5ead26ffc599df153a2ea65f184865d08cfb Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Sat, 23 Mar 2024 16:55:14 +0800
Subject: [PATCH] add tx

---
 src/modules/[chain]/block/index.vue | 42 -------------
 src/modules/[chain]/tx/[hash].vue   | 12 +++-
 src/modules/[chain]/tx/index.vue    | 94 +++++++++++++++++++++++++++++
 src/plugins/i18n/locales/cn.json    |  1 +
 src/plugins/i18n/locales/en.json    |  1 +
 5 files changed, 107 insertions(+), 43 deletions(-)
 create mode 100644 src/modules/[chain]/tx/index.vue

diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index 6962685b..0b3b2919 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -23,8 +23,6 @@ const list = computed(() => {
             <RouterLink class="tab text-gray-400 uppercase" 
                 :to="`/${chain}/block/${Number(base.latest?.block?.header.height||0) + 10000}`"
                 >{{ $t('block.future') }}</RouterLink>
-            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'transactions' }"
-                @click="tab = 'transactions'">{{ $t('account.transactions') }}</a>
         </div>
 
         <div v-show="tab === 'blocks'" class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1 gap-3">
@@ -48,46 +46,6 @@ const list = computed(() => {
                 </div>
             </RouterLink>
         </div>
-
-        <div v-show="tab === 'transactions'" class="bg-base-100 rounded overflow-x-auto">
-            <table class="table w-full table-compact">
-                <thead class="bg-base-200">
-                    <tr>
-                        <th style="position: relative; z-index: 2;">{{ $t('account.height') }}</th>
-                        <th style="position: relative; z-index: 2;">{{ $t('account.hash') }}</th>
-                        <th>{{ $t('account.messages') }}</th>
-                        <th>{{ $t('block.fees') }}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="(item, index) in base.txsInRecents" :index="index" class="hover">
-                        <td class="text-sm text-primary">
-                            <RouterLink :to="`/${props.chain}/block/${item.height}`">{{ item.height }}</RouterLink>
-                        </td>
-                        <td class="truncate text-primary" width="50%">
-                            <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
-                                item.hash
-                            }}</RouterLink>
-                        </td>
-                        <td>{{ format.messages(item.tx.body.messages) }}</td>
-                        <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
-                    </tr>
-                </tbody>
-            </table>
-            <div class="p-4">
-                <div class="alert relative bg-transparent">
-                    <div class="alert  absolute inset-x-0 inset-y-0 w-full h-full bg-info opacity-10"></div>
-                    <div class="text-info flex gap-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                            class="stroke-current flex-shrink-0 w-6 h-6">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
-                        <span>{{ $t('block.only_tx') }}</span>
-                    </div>
-                </div>
-            </div>
-        </div>
     </div>
 </template>
 
diff --git a/src/modules/[chain]/tx/[hash].vue b/src/modules/[chain]/tx/[hash].vue
index 82505ee4..d6b60fea 100644
--- a/src/modules/[chain]/tx/[hash].vue
+++ b/src/modules/[chain]/tx/[hash].vue
@@ -34,6 +34,16 @@ const messages = computed(() => {
 </script>
 <template>
     <div>
+        <div class="tabs tabs-boxed bg-transparent mb-4">
+            <RouterLink class="tab text-gray-400 uppercase" 
+                :to="`/${chain}/tx/?tab=recent`"
+                >{{ $t('block.recent') }}</RouterLink>
+            <RouterLink class="tab text-gray-400 uppercase" 
+                :to="`/${chain}/tx/?tab=search`"
+                >Search</RouterLink>
+            <a class="tab text-gray-400 uppercase tab-active">Transaction</a>
+        </div>
+
         <div v-if="tx.tx_response" 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>
             <div class="overflow-auto-x">
@@ -41,7 +51,7 @@ const messages = computed(() => {
                     <tbody>
                         <tr>
                             <td>{{ $t('tx.tx_hash') }}</td>
-                            <td>{{ tx.tx_response.txhash }}</td>
+                            <td class="overflow-hidden">{{ tx.tx_response.txhash }}</td>
                         </tr>
                         <tr>
                             <td>{{ $t('account.height') }}</td>
diff --git a/src/modules/[chain]/tx/index.vue b/src/modules/[chain]/tx/index.vue
new file mode 100644
index 00000000..06c19112
--- /dev/null
+++ b/src/modules/[chain]/tx/index.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { computed, ref } from '@vue/reactivity';
+import { useBaseStore, useBlockchain, useFormatter } from '@/stores';
+import type { PaginatedTxs } from '@/types';
+import { useRouter } from 'vue-router';
+import { onMounted } from 'vue';
+const props = defineProps(['chain']);
+const vueRouters = useRouter();
+const tab = ref('recent');
+
+const base = useBaseStore()
+const chainStore = useBlockchain()
+
+const format = useFormatter();
+const hashReg = /^[A-Z\d]{64}$/;
+const hash = ref('');
+const current = chainStore?.current?.chainName || '';
+onMounted(() => {
+    tab.value = String(vueRouters.currentRoute.value.query.tab || 'recent');
+    console.log(tab.value);
+});
+function search() {
+    if (hashReg.test(hash.value)) {
+      vueRouters.push({ path: `/${current}/tx/${hash.value}` });
+    }
+}
+</script>
+<template>
+    <div>
+        <div class="tabs tabs-boxed bg-transparent mb-4">
+            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'recent' }"
+                @click="tab = 'recent'">{{ $t('block.recent') }}</a>
+            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'search' }"
+                @click="tab = 'search'">Search</a>
+        </div>
+
+        <div v-show="tab === 'recent'" class="bg-base-100 rounded overflow-x-auto">
+            <table class="table w-full table-compact">
+                <thead class="bg-base-200">
+                    <tr>
+                        <th style="position: relative; z-index: 2;">{{ $t('account.height') }}</th>
+                        <th style="position: relative; z-index: 2;">{{ $t('account.hash') }}</th>
+                        <th>{{ $t('account.messages') }}</th>
+                        <th>{{ $t('block.fees') }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(item, index) in base.txsInRecents" :index="index" class="hover">
+                        <td class="text-sm text-primary">
+                            <RouterLink :to="`/${props.chain}/block/${item.height}`">{{ item.height }}</RouterLink>
+                        </td>
+                        <td class="truncate text-primary" width="50%">
+                            <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
+                item.hash
+            }}</RouterLink>
+                        </td>
+                        <td>{{ format.messages(item.tx.body.messages) }}</td>
+                        <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
+                    </tr>
+                </tbody>
+            </table>
+            <div class="p-4">
+                <div class="alert relative bg-transparent">
+                    <div class="alert  absolute inset-x-0 inset-y-0 w-full h-full bg-info opacity-10"></div>
+                    <div class="text-info flex gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                            class="stroke-current flex-shrink-0 w-6 h-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                        <span>{{ $t('block.only_tx') }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-show="tab === 'search'" class="bg-base-100 rounded overflow-x-auto">
+            <div class="p-4">
+                <div class="form-control">
+                    <input v-model="hash" type="text" class="input input-bordered" placeholder="Search by Tx Hash" @blur="search"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<route>
+    {
+      meta: {
+        i18n: 'tx',
+        order: 5
+      }
+    }
+  </route>
diff --git a/src/plugins/i18n/locales/cn.json b/src/plugins/i18n/locales/cn.json
index 54926380..91071eee 100644
--- a/src/plugins/i18n/locales/cn.json
+++ b/src/plugins/i18n/locales/cn.json
@@ -12,6 +12,7 @@
     "state-sync": "状态同步",
     "cosmwasm": "Cosmwasm",
     "widget": "Widgets",
+    "tx": "交易",
     "ibc": "IBC",
     "ecosystem": "生态系统",
     "favorite": "收藏夹",
diff --git a/src/plugins/i18n/locales/en.json b/src/plugins/i18n/locales/en.json
index 58507853..8eb91c7a 100644
--- a/src/plugins/i18n/locales/en.json
+++ b/src/plugins/i18n/locales/en.json
@@ -9,6 +9,7 @@
     "state-sync": "State Sync",
     "cosmwasm": "Cosmwasm",
     "widget": "Widgets",
+    "tx": "Transactions",
     "ibc": "IBC",
     "nft": "NFT",
     "consensus": "Consensus",