forked from cerc-io/cosmos-explorer
add tx
This commit is contained in:
liangping
parent
790a0147e4
commit
b0ca5ead26
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
94
src/modules/[chain]/tx/index.vue
Normal file
94
src/modules/[chain]/tx/index.vue
Normal 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>
|
||||
@ -12,6 +12,7 @@
|
||||
"state-sync": "状态同步",
|
||||
"cosmwasm": "Cosmwasm",
|
||||
"widget": "Widgets",
|
||||
"tx": "交易",
|
||||
"ibc": "IBC",
|
||||
"ecosystem": "生态系统",
|
||||
"favorite": "收藏夹",
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"state-sync": "State Sync",
|
||||
"cosmwasm": "Cosmwasm",
|
||||
"widget": "Widgets",
|
||||
"tx": "Transactions",
|
||||
"ibc": "IBC",
|
||||
"nft": "NFT",
|
||||
"consensus": "Consensus",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user