cosmos-explorer/src/views/Transaction.vue
2021-08-05 20:53:01 +08:00

130 lines
2.8 KiB
Vue

<template>
<div>
<b-card title="Baisc">
<b-table-simple>
<b-tr>
<b-td style="width:200px">
{{ 'txhash' }}
</b-td><b-td>{{ tx.txhash }}</b-td>
</b-tr>
<b-tr>
<b-td>
{{ 'status' }}
</b-td><b-td> <b-badge
v-if="tx.code===0"
variant="light-success"
>
Success
</b-badge><b-badge
v-else
variant="light-danger"
>
Failed
</b-badge><b v-if="tx.code > 0"> {{ tx.raw_log }}</b> </b-td>
</b-tr>
<b-tr>
<b-td>
{{ 'height' }}
</b-td><b-td>{{ tx.height }}</b-td>
</b-tr>
<b-tr>
<b-td>
{{ 'timestamp' }}
</b-td><b-td>{{ formatTime(tx.timestamp) }}</b-td>
</b-tr>
<b-tr>
<b-td>
{{ 'gas_used' }}
</b-td><b-td>{{ tx.gas_used }}</b-td>
</b-tr>
<b-tr>
<b-td>
{{ 'gas_wanted' }}
</b-td><b-td>{{ tx.gas_wanted }}</b-td>
</b-tr>
<b-tr>
<b-td>
{{ 'gas' }}
</b-td><b-td>{{ tx.tx.gas }}</b-td>
</b-tr>
<b-tr>
<b-td>
{{ 'fee' }}
</b-td><b-td>{{ formattoken(tx.tx.fee) }}</b-td>
</b-tr>
<b-tr>
<b-td>
{{ 'memo' }}
</b-td><b-td>{{ tx.tx.memo }}</b-td>
</b-tr>
<b-tr>
<b-td>
{{ 'timeout_height' }}
</b-td><b-td>{{ tx.tx.timeout_height }}</b-td>
</b-tr>
</b-table-simple>
</b-card>
<b-card
v-if="tx.tx.messages"
:title="`Messages (total: ${tx.tx.messages.length})`"
>
<b-card-body
v-for="(item, i) in tx.tx.messages "
id="message"
:key="i"
class="message"
>
<object-field-component :tablefield="item" />
</b-card-body>
</b-card>
</div>
</template>
<script>
import {
BCard, BTableSimple, BTr, BTd, BBadge, BCardBody,
} from 'bootstrap-vue'
import { toDay, tokenFormatter } from '@/libs/data'
import ObjectFieldComponent from './ObjectFieldComponent.vue'
export default {
components: {
BCard,
BCardBody,
BTableSimple,
BTr,
BTd,
BBadge,
ObjectFieldComponent,
},
data() {
return {
tx: { tx: {} },
}
},
created() {
const { hash } = this.$route.params
this.$http.getTxs(hash).then(res => {
this.tx = res
})
},
methods: {
formattoken: v => tokenFormatter(v),
formatTime: v => toDay(v),
},
}
</script>
<style>
#message {
border-top-width: 2px;
border-top-style: double;
}
#message table.table-hover tr td:hover {
border-width: 1px;
border: double;
border-radius: 0.5px;
}
</style>