deep-stack/cosmos-explorer
4
0
Fork 0
forked from LaconicNetwork/cosmos-explorer
Code Pull Requests Activity

improve UX & adding links

Browse Source
This commit is contained in:
liangping
2023-05-20 08:07:36 +08:00
parent 1577e0a8ed
commit 32014f4a24
9 changed files with 110 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/[chain]/block/index.vue
+26 -28
View File
@@ -8,6 +8,10 @@ const tab = ref('blocks');
const base = useBaseStore()
const format = useFormatter();
const list = computed(() => {
return base.recents.reverse()
})
</script>
<template>
<div>
@@ -26,34 +30,28 @@ const format = useFormatter();
>
</div>
<div v-show="tab === 'blocks'" class="bg-base-100 rounded overflow-x-auto">
<table class="table w-full table-compact">
<thead>
<tr>
<th style="position: relative; z-index: 2;">Height</th>
<th>Hash</th>
<th>Proposer</th>
<th>Txs</th>
<th>Time</th>
</tr>
</thead>
<tbody v-if="base.recents && base.recents.length > 0" >
<tr v-for="(item, index) in base.recents" :key="index">
<td class="text-sm text-primary">
<RouterLink
:to="`/${props.chain}/block/${item.block?.header?.height}`"
>{{ item.block?.header?.height }}</RouterLink
>
</td>
<td>{{ item.block_id?.hash }}</td>
<td>
{{ format.validator(item.block?.header?.proposer_address) }}
</td>
<td>{{ item.block?.data?.txs.length }}</td>
<td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
</tr>
</tbody>
</table>
<div v-show="tab === 'blocks'" class="grid xl:grid-cols-6 md:grid-cols-4 grid-cols-1">
<RouterLink
v-for="item in list"
class="flex flex-col justify-between rounded border border-gray-100 m-2 p-4 shadow-xl bg-base-100"
:to="`/${chain}/block/${item.block.header.height}`"
>
<div class="flex justify-between">
<h3 class="text-md font-bold sm:text-lg">
{{ item.block.header.height }}
</h3>
<span class="rounded text-xs whitespace-nowrap font-medium text-green-600">
{{ format.toDay(item.block?.header?.time, 'from') }}
</span>
</div>
<div class="flex justify-between">
<p class="mt-2 hidden text-sm sm:block truncate">
{{ format.validator(item.block?.header?.proposer_address) }}
</p>
<span class="text-right mt-1 whitespace-nowrap"> {{ item.block?.data?.txs.length }} txs </span>
</div>
</RouterLink>
</div>
<div
src/modules/[chain]/uptime/index.vue
+14 -9
View File
@@ -26,6 +26,7 @@ const slashingParam = ref({} as SlashingParam)
const signingInfo = ref({} as Record<string, SigningInfo>);
const filterOptout =ref(false)
// filter validators by keywords
const validators = computed(() => {
if (keyword)
@@ -37,7 +38,7 @@ const validators = computed(() => {
const list = computed(() => {
const window = Number(slashingParam.value.signed_blocks_window|| 0)
return validators.value.map(v => {
const vset = validators.value.map(v => {
const signing = signingInfo.value[consensusPubkeyToHexAddress(v.consensus_pubkey)]
return {
v,
@@ -45,6 +46,7 @@ const list = computed(() => {
hex: toBase64(fromHex(consensusPubkeyToHexAddress(v.consensus_pubkey))),
uptime: signing && window > 0 ? (window - Number(signing.missed_blocks_counter)) / window: undefined
}})
return filterOptout.value? vset.filter(x => x.signing) : vset
})
onMounted(() => {
@@ -98,7 +100,6 @@ const tab = ref("3")
function changeTab(v: string) {
tab.value = v
}
</script>
<template>
@@ -124,6 +125,10 @@ function changeTab(v: string) {
</div>
<div class="bg-base-100 px-5 pt-5">
<div class="flex items-center gap-x-4">
<label v-if="chainStore.isConsumerChain" class="text-center">
<input type="checkbox" v-model="filterOptout" class="checkbox"/>
Only Consumer Set
</label>
<input type="text" v-model="keyword" placeholder="Keywords to filter validators"
class="input input-sm w-full flex-1" />
</div>
@@ -150,28 +155,28 @@ function changeTab(v: string) {
<tr>
<td>Validator</td>
<td class="text-right">Uptime</td>
<td>Last Jailed Time</td>
<td class="text-right">Signed Precommits</td>
<td class="text-right">Start Height</td>
<td>Last Jailed Time</td>
<td>Tombstoned</td>
</tr>
</thead>
<tr v-for="({v, signing, uptime}, i) in list" class="hover">
<td><div class="truncate max-w-sm">{{ i+1 }}. {{ v.description.moniker }}</div></td>
<td class="text-right">
<span v-if="signing" class="" :class="uptime > 0.95 ? 'text-green-500':'text-red-500'"><div class="tooltip" :data-tip="`${signing.missed_blocks_counter} missing blocks`"> {{ format.percent(uptime) }} </div> </span>
<span v-if="signing" class="" :class="uptime && uptime > 0.95 ? 'text-green-500':'text-red-500'"><div class="tooltip" :data-tip="`${signing.missed_blocks_counter} missing blocks`"> {{ format.percent(uptime) }} </div> </span>
</td>
<td><span v-if="signing && !signing.jailed_until.startsWith('1970')">
<div class="tooltip" :data-tip="format.toDay(signing?.jailed_until, 'long')">
<span>{{ format.toDay(signing?.jailed_until, "from") }}</span>
</div>
</span></td>
<td class="text-right text-xs">
{{ signing?.index_offset }}<br>
<span v-if="signing && signing.jailed_until.startsWith('1970')" class="text-xs">{{ format.percent(Number(signing.index_offset)/(latest-Number(signing.start_height))) }}</span>
</td>
<td class="text-right">{{ signing?.start_height }}</td>
<td><span v-if="signing && !signing.jailed_until.startsWith('1970')">
<div class="tooltip" :data-tip="format.toDay(signing?.jailed_until, 'long')">
<span>{{ format.toDay(signing?.jailed_until, "from") }}</span>
</div>
</span></td>
<td class=" capitalize">{{ signing?.tombstoned }}</td>
</tr>
<tfoot>
src/modules/[chain]/widget/index.vue
+5 -4
View File
@@ -33,7 +33,7 @@ const hdPath = computed(() => {
</div>
<span class="text-base">Import global script </span>
<div class="mockup-code my-2">
<pre data-prefix="1"><code>&lt;script src="https://unpkg.com/ping-widget@latest/dist/ping-widget.js"&gt;</code></pre>
<pre data-prefix="1"><code class="text-gray-400">&lt;script type="module" src="https://unpkg.com/ping-widget@latest/dist/ping-widget.js"&gt;</code></pre>
</div>
</div>
<div class="bg-base-100 my-5 px-4 pt-3 pb-4 rounded shadow">
@@ -41,12 +41,13 @@ const hdPath = computed(() => {
<div class="mt-4">
<span class="text-base"> 1. Connect Wallet </span>
<div class="mockup-code my-2">
<pre data-prefix=">"><code>&lt;ping-connect-wallet chain-id="{{ chainId }}" hd-path="{{ hdPath }}"/&gt;</code></pre>
<pre data-prefix=">"><code class="text-gray-400">&lt;ping-connect-wallet chain-id="{{ chainId }}" hd-path="{{ hdPath }}"/&gt;</code></pre>
</div>
<span class="text-base"> 2. Osmosis Convert </span>
<div class="mockup-code my-2">
<pre data-prefix=">"><code>&lt;ping-token-convert chain-name="{{ chainName }}" endpoint="{{endpoint}}" hd-path="hdPath"/&gt;</code></pre>
<pre data-prefix=">"><code class="text-gray-400">&lt;ping-token-convert chain-name="{{ chainName }}" endpoint="{{endpoint}}" hd-path="{{hdPath}}"/&gt;</code></pre>
<pre data-prefix=">"><code class="text-gray-400">&lt;label for="PingTokenConvert" class="btn btn-sm"&gt;Buy {{chainName.toUpperCase()}}&lt;/label&gt;</code></pre>
</div>
</div>
</div>
@@ -57,7 +58,7 @@ const hdPath = computed(() => {
{
meta: {
i18n: 'widget',
order: 9
order: 300
}
}
</route>