This commit is contained in:
liangping 2024-03-23 16:55:14 +08:00
parent 790a0147e4
commit b0ca5ead26
5 changed files with 107 additions and 43 deletions

View File

@ -23,8 +23,6 @@ const list = computed(() => {
<RouterLink class="tab text-gray-400 uppercase" <RouterLink class="tab text-gray-400 uppercase"
:to="`/${chain}/block/${Number(base.latest?.block?.header.height||0) + 10000}`" :to="`/${chain}/block/${Number(base.latest?.block?.header.height||0) + 10000}`"
>{{ $t('block.future') }}</RouterLink> >{{ $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>
<div v-show="tab === 'blocks'" class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1 gap-3"> <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> </div>
</RouterLink> </RouterLink>
</div> </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> </div>
</template> </template>

View File

@ -34,6 +34,16 @@ const messages = computed(() => {
</script> </script>
<template> <template>
<div> <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"> <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> <h2 class="card-title truncate mb-2">{{ $t('tx.title') }}</h2>
<div class="overflow-auto-x"> <div class="overflow-auto-x">
@ -41,7 +51,7 @@ const messages = computed(() => {
<tbody> <tbody>
<tr> <tr>
<td>{{ $t('tx.tx_hash') }}</td> <td>{{ $t('tx.tx_hash') }}</td>
<td>{{ tx.tx_response.txhash }}</td> <td class="overflow-hidden">{{ tx.tx_response.txhash }}</td>
</tr> </tr>
<tr> <tr>
<td>{{ $t('account.height') }}</td> <td>{{ $t('account.height') }}</td>

View File

@ -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>

View File

@ -12,6 +12,7 @@
"state-sync": "状态同步", "state-sync": "状态同步",
"cosmwasm": "Cosmwasm", "cosmwasm": "Cosmwasm",
"widget": "Widgets", "widget": "Widgets",
"tx": "交易",
"ibc": "IBC", "ibc": "IBC",
"ecosystem": "生态系统", "ecosystem": "生态系统",
"favorite": "收藏夹", "favorite": "收藏夹",

View File

@ -9,6 +9,7 @@
"state-sync": "State Sync", "state-sync": "State Sync",
"cosmwasm": "Cosmwasm", "cosmwasm": "Cosmwasm",
"widget": "Widgets", "widget": "Widgets",
"tx": "Transactions",
"ibc": "IBC", "ibc": "IBC",
"nft": "NFT", "nft": "NFT",
"consensus": "Consensus", "consensus": "Consensus",