cerc-io/cosmos-explorer
11
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: block

Browse Source
This commit is contained in:
quangdz1704 2024-07-09 16:01:19 +07:00
parent ac7bdfc9ee
commit 1cdefc0cc1
No known key found for this signature in database
GPG Key ID: E7C1A6283714A3EC
16 changed files with 366 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/Countdown.vue
View File

@ -14,18 +14,55 @@ const s = ref(0);
v-if="time"
:time="time > 0 ? time : 0"
v-slot="{ days, hours, minutes, seconds }"
class="countdown-container justify-items-center"
class="countdown-container flex justify-items-center items-start justify-center"
>
<span class="text-primary font-bold" :class="css">{{ days }}</span> days
<span class="text-primary font-bold" :class="css">{{ hours }}</span> hours
<span class="text-primary font-bold" :class="css">{{ minutes }}</span>
minutes
<span class="text-primary font-bold w-40" :class="css">
<Transition name="slide-up">
<span v-if="seconds % 2 === 0" class="countdown">{{ seconds }}</span>
<span v-else="seconds % 2 === 1" class="countdown">{{ seconds }}</span>
</Transition>
</span>
<span class="ml-10">seconds</span>
<div class="flex flex-col">
<span
class="!w-14 !h-14 flex items-center justify-center text-link !text-[18px] md:!text-[18px] leading-none !font-semibold border rounded border-link p-4"
:class="css"
>
{{ days }}
</span>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">days</p>
</div>
<span class="mt-4">:</span>
<div class="flex flex-col">
<span
class="!w-14 !h-14 flex items-center justify-center text-link !text-[18px] md:!text-[18px] leading-none !font-semibold border rounded border-link p-4"
:class="css"
>
{{ hours }}
</span>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">hours</p>
</div>
<span class="mt-4">:</span>
<div class="flex flex-col">
<span
class="!w-14 !h-14 flex items-center justify-center text-link !text-[18px] md:!text-[18px] leading-none !font-semibold border rounded border-link p-4"
:class="css"
>
{{ minutes }}
</span>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">minutes</p>
</div>
<span class="mt-4">:</span>
<div class="flex flex-col">
<span
class="!w-14 !h-14 flex items-center justify-center text-link !text-[18px] md:!text-[18px] leading-none !font-semibold border rounded border-link p-4"
:class="css"
>
<div class="relative">
<Transition name="slide-up">
<span v-if="seconds % 2 === 0" class="countdown">{{
seconds
}}</span>
<span v-else="seconds % 2 === 1" class="countdown">{{
seconds
}}</span>
</Transition>
</div>
</span>
<p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">secs</p>
</div>
</Countdown>
</template>

8
src/components/PaginationBar.vue
View File

@ -57,9 +57,9 @@ function goPreviousPage() {
<button
v-for="{ page, color } in pages"
:key="page"
class="btn bg-gray-100 text-gray-500 hover:text-white border-none dark:bg-[#2E2E33] dark:text-white"
class="btn bg-gray-100 text-gray-500 hover:text-white border-none dark:bg-base dark:text-white"
:class="{
'!bg-[rgba(185,153,243,0.2)] !text-white !border !border-solid !border-[#b999f3]':
'!bg-[rgba(185,153,243,0.2)] !text-white !border !border-solid !border-link':
color === 'btn-primary',
// '!btn-primary': color === 'btn-primary',
}"
@ -71,13 +71,13 @@ function goPreviousPage() {
<div v-if="nextKey && Number(total ?? '0') === 0" class="btn-group">
<button
v-if="nextKeys.length > 0"
class="btn bg-gray-100 text-gray-500 hover:text-white hover:btn-primary border-none dark:bg-[#2E2E33] dark:text-white"
class="btn bg-gray-100 text-gray-500 hover:text-white hover:btn-primary border-none dark:bg-base dark:text-white"
@click="goPreviousPage()"
>
Prev
</button>
<button
class="btn bg-gray-100 text-gray-500 hover:text-white hover:btn-primary border-none dark:bg-[#2E2E33] dark:text-white"
class="btn bg-gray-100 text-gray-500 hover:text-white hover:btn-primary border-none dark:bg-base dark:text-white"
@click="goNextPage()"
>
Next

16
src/layouts/components/DefaultLayout.vue
View File

@ -167,7 +167,7 @@ function confirm() {
</div>
<div
v-if="item?.badgeContent"
class="mr-6 badge badge-sm text-[#2E2E33] font-semibold text-[14px] border-none bg-[#CBAEFF] rounded mx-[6px] h-[22px]"
class="mr-6 badge badge-sm text-base font-semibold text-[14px] border-none bg-[#CBAEFF] rounded mx-[6px] h-[22px]"
>
<!-- :class="item?.badgeClass" -->
{{ item?.badgeContent }}
@ -181,9 +181,9 @@ function confirm() {
<RouterLink
v-if="isNavLink(el)"
@click="sidebarShow = false"
class="hover:bg-gray-100 dark:hover:bg-[#2E2E33] h-[48px] rounded-lg cursor-pointer px-3 py-2 flex items-center border border-[#242627] borderImage"
class="hover:bg-gray-100 dark:hover:bg-base h-[48px] rounded-lg cursor-pointer px-3 py-2 flex items-center border border-[#242627] borderImage"
:class="{
'!bg-[#2E2E33] borderImageActive': selected($route, el),
'!bg-base borderImageActive': selected($route, el),
}"
:to="el.to"
>
@ -222,7 +222,7 @@ function confirm() {
v-if="isNavLink(item)"
:to="item?.to"
@click="sidebarShow = false"
class="cursor-pointer px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#2E2E33] border-t border-b border-base-300 h-[60px]"
class="cursor-pointer px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-base border-t border-b border-base-300 h-[60px]"
>
<!-- <Icon
v-if="item?.icon?.icon"
@ -245,7 +245,7 @@ function confirm() {
</div>
<div
v-if="item?.badgeContent"
class="mr-6 badge badge-sm text-[#2E2E33] font-semibold text-[14px] border-none bg-[#CBAEFF] rounded mx-[6px] h-[22px]"
class="mr-6 badge badge-sm text-base font-semibold text-[14px] border-none bg-[#CBAEFF] rounded mx-[6px] h-[22px]"
>
<!-- :class="item?.badgeClass" -->
{{ item?.badgeContent }}
@ -260,9 +260,9 @@ function confirm() {
<div class="px-2 mt-6">
<RouterLink
to="/wallet/suggest"
class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#2E2E33] border border-[#242627] borderImage h-[48px]"
class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-base border border-[#242627] borderImage h-[48px]"
:class="{
'!bg-[#2E2E33] borderImageActive': selected($route, {
'!bg-base borderImageActive': selected($route, {
to: { path: '/wallet/suggest', title: 'Wallet Helper' },
} as NavLink),
}"
@ -362,7 +362,7 @@ function confirm() {
<!-- <NavSearchBar />-->
<div class="lg:block hidden w-full max-w-[334px] mx-2">
<input
class="input flex-1 w-full !input-bordered bg-[#2E2E33] text-[14px] font-normal h-[44px]"
class="input flex-1 w-full !input-bordered bg-base text-[14px] font-normal h-[44px]"
v-model="searchQuery"
placeholder="Search by Height, Address and TxHash"
v-on:keyup.enter="confirm"

87
src/layouts/components/NavBarI18n.vue
View File

@ -4,65 +4,66 @@ import { Icon } from '@iconify/vue';
import { useI18n } from 'vue-i18n';
const i18nLangs: Array<{ label: string; i18nLang: string }> = [
{
label: 'English',
i18nLang: 'en',
},
{
label: '中文',
i18nLang: 'cn',
},
{
label: 'Indonesian',
i18nLang: 'id',
},
{
label: 'English',
i18nLang: 'en',
},
{
label: '中文',
i18nLang: 'cn',
},
{
label: 'Indonesian',
i18nLang: 'id',
},
];
let locale = ref(useI18n({ useScope: 'global' }).locale);
watch(locale, (val) => {
document.documentElement.setAttribute('lang', val as string);
document.documentElement.setAttribute('lang', val as string);
});
let currentLang = ref(localStorage.getItem('lang') || 'en');
watch(currentLang, (val: string) => {
document.documentElement.setAttribute('lang', val as string);
document.documentElement.setAttribute('lang', val as string);
});
const handleLangChange = (lang: string) => {
locale.value = lang;
currentLang.value = lang;
localStorage.setItem('lang', lang);
locale.value = lang;
currentLang.value = lang;
localStorage.setItem('lang', lang);
};
</script>
<template>
<div
class="dropdown"
:class="
currentLang === 'ar'
? 'dropdown-right'
: 'dropdown-bottom dropdown-end'
"
<div
class="dropdown"
:class="
currentLang === 'ar' ? 'dropdown-right' : 'dropdown-bottom dropdown-end'
"
>
<label
tabindex="0"
class="btn btn-ghost btn-circle btn-sm ml-2 rounded-lg border border-base-300 bg-base h-[44px] w-[44px]"
>
<label tabindex="0" class="btn btn-ghost btn-circle btn-sm ml-2 rounded-lg border border-base-300 bg-[#2E2E33] h-[44px] w-[44px]">
<Icon
icon="mdi-translate"
class="text-2xl text-gray-500 dark:text-gray-400"
/>
</label>
<ul
tabindex="0"
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
<Icon
icon="mdi-translate"
class="text-2xl text-gray-500 dark:text-gray-400"
/>
</label>
<ul
tabindex="0"
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
>
<li v-for="lang in i18nLangs" :key="lang.i18nLang">
<a
class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
:class="{ 'text-primary': currentLang === lang.i18nLang }"
@click="handleLangChange(lang.i18nLang)"
>{{ lang.label }}</a
>
<li v-for="lang in i18nLangs" :key="lang.i18nLang">
<a
class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
:class="{ 'text-primary': currentLang === lang.i18nLang }"
@click="handleLangChange(lang.i18nLang)"
>{{ lang.label }}</a
>
</li>
</ul>
</div>
</li>
</ul>
</div>
</template>

2
src/layouts/components/NavbarSearch.vue
View File

@ -62,7 +62,7 @@ function confirm() {
<template>
<div>
<button
class="btn btn-sm mr-2 lg:hidden block rounded-lg border border-base-300 bg-[#2E2E33] h-[44px] w-[44px]"
class="btn btn-sm mr-2 lg:hidden block rounded-lg border border-base-300 bg-base h-[44px] w-[44px]"
@click="openSearchModal"
>
<Icon

2
src/layouts/components/NavbarThemeSwitcher.vue
View File

@ -39,7 +39,7 @@ onMounted(() => {
<template>
<!-- <div class="tooltip tooltip-bottom delay-1000">
<button
class="btn btn-ghost btn-circle btn-sm mx-2 rounded-lg border border-base-300 bg-[#2E2E33] h-[44px] w-[44px]"
class="btn btn-ghost btn-circle btn-sm mx-2 rounded-lg border border-base-300 bg-base h-[44px] w-[44px]"
@click="changeMode()"
>
<Icon

74
src/modules/[chain]/account/[address].vue
View File

@ -159,7 +159,9 @@ function mapAmount(events: readonly Event[]) {
<template>
<div v-if="account">
<!-- address -->
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<div
class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
>
<div class="flex items-center">
<!-- img -->
<div class="inline-flex relative w-11 h-11 rounded-md">
@ -178,14 +180,18 @@ function mapAmount(events: readonly Event[]) {
</div>
<!-- content -->
<div class="flex flex-1 flex-col truncate pl-4">
<h2 class="text-sm card-title">{{ $t('account.address') }}:</h2>
<h2 class="text-sm card-title text-white">
{{ $t('account.address') }}:
</h2>
<span class="text-xs truncate"> {{ address }}</span>
</div>
</div>
</div>
<!-- Assets -->
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<div
class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
>
<div class="flex justify-between">
<h2 class="card-title mb-4">{{ $t('account.assets') }}</h2>
<!-- button -->
@ -242,10 +248,10 @@ function mapAmount(events: readonly Event[]) {
</div>
</div>
<div
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:text-link mr-2"
>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert text-sm"
class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:bg-[rgba(185,153,243,0.2)] text-sm"
></span>
${{ format.tokenValue(balanceItem) }}
</div>
@ -278,10 +284,10 @@ function mapAmount(events: readonly Event[]) {
</div>
</div>
<div
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:text-link mr-2"
>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert text-sm"
class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:bg-[rgba(185,153,243,0.2)] text-sm"
></span>
${{ format.tokenValue(delegationItem?.balance) }}
</div>
@ -313,10 +319,10 @@ function mapAmount(events: readonly Event[]) {
</div>
</div>
<div
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:text-link mr-2"
>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert text-sm"
class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:bg-[rgba(185,153,243,0.2)] text-sm"
></span
>${{ format.tokenValue(rewardItem, 1e18) }}
</div>
@ -352,10 +358,10 @@ function mapAmount(events: readonly Event[]) {
</div>
</div>
<div
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:text-link mr-2"
>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert"
class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:bg-[rgba(185,153,243,0.2)]"
></span>
${{
format.tokenValue(
@ -372,16 +378,22 @@ function mapAmount(events: readonly Event[]) {
<div
class="mt-4 text-lg font-semibold mr-5 pl-5 border-t pt-4 text-right"
>
{{ $t('account.total_value') }}: ${{ totalValue }}
{{ $t('account.total_value') }}: ${{
totalValue && !isNaN(Number(totalValue)) ? totalValue : 0
}}
</div>
</div>
</div>
</div>
<!-- Delegations -->
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<div
class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
>
<div class="flex justify-between">
<h2 class="card-title mb-4">{{ $t('account.delegations') }}</h2>
<h2 class="card-title mb-4 text-white">
{{ $t('account.delegations') }}
</h2>
<div class="flex justify-end mb-4">
<label
for="delegate"
@ -496,10 +508,12 @@ function mapAmount(events: readonly Event[]) {
<!-- Unbonding Delegations -->
<div
class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow"
class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
v-if="unbonding && unbonding.length > 0"
>
<h2 class="card-title mb-4">{{ $t('account.unbonding_delegations') }}</h2>
<h2 class="card-title mb-4 text-white">
{{ $t('account.unbonding_delegations') }}
</h2>
<div class="overflow-x-auto">
<table class="table text-sm w-full">
<thead>
@ -565,8 +579,12 @@ function mapAmount(events: readonly Event[]) {
</div>
<!-- Transactions -->
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title mb-4">{{ $t('account.transactions') }}</h2>
<div
class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
>
<h2 class="card-title mb-4 text-white">
{{ $t('account.transactions') }}
</h2>
<div class="overflow-x-auto">
<table class="table w-full text-sm">
<thead>
@ -589,14 +607,14 @@ function mapAmount(events: readonly Event[]) {
<td class="text-sm py-3">
<RouterLink
:to="`/${chain}/block/${v.height}`"
class="text-primary dark:invert"
class="text-primary dark:text-link"
>{{ v.height }}</RouterLink
>
</td>
<td class="truncate py-3" style="max-width: 200px">
<RouterLink
:to="`/${chain}/tx/${toHex(v.hash)}`"
class="text-primary dark:invert"
class="text-primary dark:text-link"
>
{{ toHex(v.hash) }}
</RouterLink>
@ -624,8 +642,10 @@ function mapAmount(events: readonly Event[]) {
</div>
<!-- Received -->
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title mb-4">{{ $t('account.received') }}</h2>
<div
class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
>
<h2 class="card-title mb-4 text-white">{{ $t('account.received') }}</h2>
<div class="overflow-x-auto">
<table class="table w-full text-sm">
<thead>
@ -648,14 +668,14 @@ function mapAmount(events: readonly Event[]) {
<td class="text-sm py-3">
<RouterLink
:to="`/${chain}/block/${v.height}`"
class="text-primary dark:invert"
class="text-primary dark:text-link"
>{{ v.height }}</RouterLink
>
</td>
<td class="truncate py-3" style="max-width: 200px">
<RouterLink
:to="`/${chain}/tx/${toHex(v.hash)}`"
class="text-primary dark:invert"
class="text-primary dark:text-link"
>
{{ toHex(v.hash) }}
</RouterLink>
@ -683,8 +703,10 @@ function mapAmount(events: readonly Event[]) {
</div>
<!-- Account -->
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title mb-4">{{ $t('account.acc') }}</h2>
<div
class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
>
<h2 class="card-title mb-4 text-white">{{ $t('account.acc') }}</h2>
<DynamicComponent :value="account" />
</div>
</div>

39
src/modules/[chain]/block/[height].vue
View File

@ -76,49 +76,50 @@ onBeforeRouteUpdate(async (to, from, next) => {
<div>
<div v-if="isFutureBlock" class="text-center">
<div v-if="remainingBlocks > 0">
<div class="text-primary font-bold text-lg my-10">#{{ target }}</div>
<Countdown :time="estimateTime" css="md:!text-5xl font-sans md:mx-5" />
<div class="my-5">{{ $t('block.estimated_time') }}: <span class="text-xl font-bold">{{ format.toLocaleDate(estimateDate) }}</span>
<div class="text-white font-bold text-lg my-10">#{{ target }}</div>
<Countdown :time="estimateTime" css="md:mx-3 mx-2" />
<div class="my-5 text-[#B4B7BB] font-normal text-[14px]">{{ $t('block.estimated_time') }}: <span class="text-xl font-normal">{{ format.toLocaleDate(estimateDate) }}</span>
</div>
<div class="pt-10 flex justify-center">
<table class="table w-max rounded-lg bg-base-100">
<div class=" box-content !p-6 rounded-2xl !bg-base">
<table class="table w-max rounded-2xl">
<tbody>
<tr class="hover cursor-pointer" @click="edit = !edit">
<tr class="hover hover:brightness-150 rounded cursor-pointer !border-base-300" @click="edit = !edit">
<td>{{ $t('block.countdown_for_block') }}:</td>
<td class="text-right"><span class="md:!ml-40">{{ target }}</span></td>
</tr>
<tr v-if="edit">
<tr v-if="edit" class="!border-base-300">
<td colspan="2" class="text-center">
<h3 class="text-lg font-bold">{{ $t('block.countdown_for_block_input') }}</h3>
<p class="py-4">
<div class="join">
<input class="input input-bordered join-item" v-model="newHeight" type="number" />
<input class="input input-bordered join-item !bg-base-300" v-model="newHeight" type="number" />
<button class="btn btn-primary join-item" @click="updateTarget()">{{ $t('block.btn_update') }}</button>
</div>
</p>
</td>
</tr>
<tr>
<tr class="!border-base-300">
<td>{{ $t('block.current_height') }}:</td>
<td class="text-right">#{{ store.latest?.block?.header.height }}</td>
</tr>
<tr>
<tr class="!border-base-300">
<td>{{ $t('block.remaining_blocks') }}:</td>
<td class="text-right">{{ remainingBlocks }}</td>
</tr>
<tr>
<tr class="!border-base-300">
<td>{{ $t('block.average_block_time') }}:</td>
<td class="text-right">{{ (store.blocktime / 1000).toFixed(1) }}s</td>
</tr>
</tbody>
</table>
</table></div>
</div>
</div>
</div>
<div v-else>
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title flex flex-row justify-between">
<div class="box-content">
<h2 class="card-title flex flex-row justify-between text-white">
<p class="">#{{ current.block?.header?.height }}</p>
<div class="flex" v-if="props.height">
<RouterLink :to="`/${store.blockchain.chainName}/block/${height - 1}`"
@ -136,18 +137,18 @@ onBeforeRouteUpdate(async (to, from, next) => {
</div>
</div>
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title flex flex-row justify-between">{{ $t('block.block_header') }}</h2>
<div class="box-content">
<h2 class="card-title flex flex-row justify-between text-white">{{ $t('block.block_header') }}</h2>
<DynamicComponent :value="current.block?.header" />
</div>
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title flex flex-row justify-between">{{ $t('account.transactions') }}</h2>
<div class="box-content">
<h2 class="card-title flex flex-row justify-between text-white">{{ $t('account.transactions') }}</h2>
<TxsElement :value="current.block" />
</div>
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
<h2 class="card-title flex flex-row justify-between">{{ $t('block.last_commit') }}</h2>
<div class="box-content">
<h2 class="card-title flex flex-row justify-between text-white">{{ $t('block.last_commit') }}</h2>
<DynamicComponent :value="commit" />
</div>
</div>

209
src/modules/[chain]/block/index.vue
View File

@ -1,62 +1,88 @@
<script lang="ts" setup>
import { computed, ref } from '@vue/reactivity';
import Countdown from '@/components/Countdown.vue';
import { useBaseStore, useFormatter } from '@/stores';
import { fromAscii, toBase64 } from '@cosmjs/encoding';
import { toBase64 } from '@cosmjs/encoding';
import type { BlockResponse } from '@cosmjs/tendermint-rpc';
import { computed, ref } from '@vue/reactivity';
import { watchEffect } from 'vue';
import { onBeforeRouteUpdate } from 'vue-router';
const props = defineProps(['chain']);
const tab = ref('blocks');
const base = useBaseStore();
const format = useFormatter();
const tab = ref('blocks');
const lastHeight = ref(Number(base.latest?.block?.header.height || 0) + 10000)
const target = ref(Number(lastHeight.value || 0))
const current = ref({} as BlockResponse)
const list = computed(() => {
const recents = base.recents;
console.log('first', recents)
return recents.sort(
(a, b) => Number(b.block.header.height) - Number(a.block.header.height)
);
});
watchEffect(() => {
if (base.latest?.block?.header.height && lastHeight.value === 10000) {
lastHeight.value = Number(base.latest?.block?.header.height || 0) + 10000
target.value = Number(lastHeight.value || 0)
}
});
const remainingBlocks = computed(() => {
const latest = base.latest?.block?.header.height
return latest ? Number(target.value) - Number(latest) : 0
})
const estimateTime = computed(() => {
const seconds = remainingBlocks.value * Number((base.blocktime / 1000).toFixed()) * 1000
return seconds
})
const estimateDate = computed(() => {
return new Date(new Date().getTime() + estimateTime.value)
})
const edit = ref(false)
const newHeight = ref(lastHeight.value)
function updateTarget() {
target.value = Number(newHeight.value)
console.log(target.value)
}
onBeforeRouteUpdate(async (to, from, next) => {
if (from.path !== to.path) {
base.fetchBlock(String(to.params.height)).then(x => {
current.value = x;
});
next();
}
});
</script>
<template>
<div>
<div class="m-4 md:m-6 border border-base-400 bg-base-500 rounded-2xl">
<div class="tabs tabs-boxed bg-transparent mb-4">
<a
class="tab text-gray-400 uppercase"
:class="{ 'tab-active': tab === 'blocks' }"
@click="tab = 'blocks'"
>{{ $t('block.recent') }}</a
>
<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
>
<a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'blocks' }" @click="tab = 'blocks'">{{
$t('block.recent') }}</a>
<!-- <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 === 'future' }" @click="tab = 'future'">{{
$t('block.future') }}</a>
<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"
>
<RouterLink
v-for="item in list"
class="flex flex-col justify-between rounded p-4 shadow bg-base-100"
:to="`/${chain}/block/${item.block.header.height}`"
>
<div v-show="tab === 'blocks'" class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1 gap-3">
<!-- <RouterLink v-for="item in list" class="flex flex-col justify-between rounded p-4 shadow 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"
>
<span class="rounded text-xs whitespace-nowrap font-medium text-green-600">
{{ format.toDay(item.block?.header?.time.toString(), 'from') }}
</span>
</div>
@ -65,7 +91,7 @@ const list = computed(() => {
<span>{{
format.validator(
item.block?.header?.proposerAddress &&
toBase64(item.block?.header?.proposerAddress)
toBase64(item.block?.header?.proposerAddress)
)
}}</span>
</div>
@ -73,65 +99,98 @@ const list = computed(() => {
{{ item.block?.txs.length }} txs
</span>
</div>
</RouterLink>
</RouterLink> -->
</div>
<div
v-show="tab === 'transactions'"
class="bg-base-100 rounded overflow-x-auto"
>
<div v-show="tab === 'future'" class="bg-base-100 rounded overflow-x-auto">
<div class="text-center">
<div v-if="remainingBlocks > 0">
<div class="text-white font-bold text-lg my-10">#{{ target }}</div>
<Countdown :time="estimateTime" css="md:mx-3 mx-2" />
<div class="my-5 text-[#B4B7BB] font-normal text-[14px]">{{ $t('block.estimated_time') }}: <span
class="text-xl font-normal">{{ format.toLocaleDate(estimateDate) }}</span>
</div>
<div class="pt-10 flex justify-center">
<div class=" box-content !p-6 rounded-2xl !bg-base">
<table class="table w-max rounded-2xl">
<tbody>
<tr class="hover hover:brightness-150 rounded cursor-pointer !border-base-300" @click="edit = !edit">
<td>{{ $t('block.countdown_for_block') }}:</td>
<td class="text-right"><span class="md:!ml-40">{{ target }}</span></td>
</tr>
<tr v-if="edit" class="!border-base-300">
<td colspan="2" class="text-center">
<h3 class="text-lg font-bold">{{ $t('block.countdown_for_block_input') }}</h3>
<p class="py-4">
<div class="join">
<input class="input input-bordered join-item !bg-base-300" v-model="newHeight" type="number" />
<button class="btn btn-primary join-item" @click="updateTarget()">{{ $t('block.btn_update')
}}</button>
</div>
</p>
</td>
</tr>
<tr class="!border-base-300">
<td>{{ $t('block.current_height') }}:</td>
<td class="text-right">#{{ base.latest?.block?.header.height }}</td>
</tr>
<tr class="!border-base-300">
<td>{{ $t('block.remaining_blocks') }}:</td>
<td class="text-right">{{ remainingBlocks }}</td>
</tr>
<tr class="!border-base-300">
<td>{{ $t('block.average_block_time') }}:</td>
<td class="text-right">{{ (base.blocktime / 1000).toFixed(1) }}s</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</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>{{ $t('account.messages') }}</th>
<th style="position: relative; z-index: 2">
{{ $t('account.hash') }}
</th>
<th>{{ $t('account.messages') }}</th>
<th>{{ $t('block.fees') }}</th>
<th style="position: relative; z-index: 2">
{{ $t('account.height') }}
</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%">
<tr v-for="(item, index) in base.txsInRecents" :index="index" class="hover">
<td>{{ format.messages(item.tx.body.messages) }}</td>
<td class="truncate text-link" width="50%">
<RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
item.hash
}}</RouterLink>
}}</RouterLink>
</td>
<td>{{ format.messages(item.tx.body.messages) }}</td>
<td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
<td class="text-sm text-link">
<RouterLink :to="`/${props.chain}/block/${item.height}`">{{
item.height
}}</RouterLink>
</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="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 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>

16
src/modules/[chain]/index.vue
View File

@ -146,7 +146,7 @@ const amount = computed({
<div class="text-xs my-2">
{{ $t('index.rank') }}:
<div
class="badge text-xs rounded bg-[#fcebea] dark:bg-[#CBAEFF] text-[#2E2E33] font-semibold h-[22px]"
class="badge text-xs rounded bg-[#fcebea] dark:bg-[#CBAEFF] text-base font-semibold h-[22px]"
>
#{{ coinInfo.market_cap_rank }}
</div>
@ -171,7 +171,7 @@ const amount = computed({
<div class="dropdown dropdown-hover w-full">
<label>
<div
class="bg-gray-100 dark:bg-[#2E2E33] flex flex-col items-center justify-between px-4 py-2 cursor-pointer rounded-lg border border-base-300"
class="bg-gray-100 dark:bg-base flex flex-col items-center justify-between px-4 py-2 cursor-pointer rounded-lg border border-base-300"
>
<div
class="flex justify-between gap-2 text-[#B4B7BB] font-normal text-[14px] w-full"
@ -190,7 +190,7 @@ const amount = computed({
{{ ticker?.market?.name || '' }}
<Icon icon="mdi:chevron-down" width="20" height="20" />
</div>
<div class="text-[#B999F3] text-sm">
<div class="text-link text-sm">
{{ shortName(ticker?.base, ticker?.coin_id) }}/{{
shortName(ticker?.target, ticker?.target_coin_id)
}}
@ -222,7 +222,7 @@ const amount = computed({
class="flex items-center justify-between hover:bg-base-100"
>
<div class="flex-1">
<div class="text-main text-sm text-[#B999F3]">
<div class="text-main text-sm text-link">
<!-- :class="trustColor(item.trust_score)" -->
{{ item?.market?.name }}
</div>
@ -257,7 +257,7 @@ const amount = computed({
{{ $t('index.buy') }} {{ coinInfo.symbol || '' }}
</a>
<label
class="btn !px-1 my-5 ml-2 rounded-lg border border-base-300 bg-[#2E2E33] h-[44px] w-[44px]"
class="btn !px-1 my-5 ml-2 rounded-lg border border-base-300 bg-base h-[44px] w-[44px]"
for="calculator"
>
<svg
@ -418,14 +418,14 @@ const amount = computed({
<p class="text-[18px] text-[#f7f7f7] font-semibold">My Wallet</p>
<p
class="truncate max-w-[calc(100%-10px)] sm:w-[unset] mt-1 text-[#B999F3] text-[14px] font-normal"
class="truncate max-w-[calc(100%-10px)] sm:w-[unset] mt-1 text-link text-[14px] font-normal"
>
{{ walletStore.currentAddress || 'Not Connected' }}
</p>
</div>
<RouterLink
v-if="walletStore.currentAddress"
class="float-right inline-flex text-sm cursor-pointer link link-primary no-underline font-medium text-[#B999F3]"
class="float-right inline-flex text-sm cursor-pointer link link-primary no-underline font-medium text-link"
:to="`/${chain}/account/${walletStore.currentAddress}`"
>
{{ $t('index.more') }}
@ -522,7 +522,7 @@ const amount = computed({
<tr v-for="(item, index) in walletStore.delegations" :key="index">
<td>
<RouterLink
class="link link-primary no-underline text-[#B999F3]"
class="link link-primary no-underline text-link"
:to="`/${chain}/staking/${item?.delegation?.validatorAddress}`"
>
{{

14
src/modules/[chain]/staking/[validator].vue
View File

@ -648,7 +648,7 @@ function mapDelegators(tx: ExtraTxResponse) {
/>
</div>
<RouterLink
class="text-xs text-[#B999F3]"
class="text-xs text-link"
:to="`/${chain}/account/${addresses.account}`"
>
{{ addresses.account }}
@ -731,10 +731,10 @@ function mapDelegators(tx: ExtraTxResponse) {
<tr
v-for="{ balance, delegation } in delegations.delegationResponses"
>
<td class="text-sm text-[#B999F3]">
<td class="text-sm text-link">
{{ delegation.delegatorAddress }}
</td>
<td class="truncate text-[#B999F3]">
<td class="truncate text-link">
{{ format.formatToken(balance) }}
</td>
</tr>
@ -768,12 +768,12 @@ function mapDelegators(tx: ExtraTxResponse) {
</thead>
<tbody>
<tr v-for="(item, i) in txs.txs">
<td class="text-sm text-[#B999F3]">
<td class="text-sm text-link">
<RouterLink :to="`/${props.chain}/block/${item.height}`">{{
item.height
}}</RouterLink>
</td>
<td class="truncate text-[#B999F3]" style="max-width: 200px">
<td class="truncate text-link" style="max-width: 200px">
<RouterLink :to="`/${props.chain}/tx/${toHex(item.hash)}`">
{{ toHex(item.hash) }}
</RouterLink>
@ -829,7 +829,7 @@ function mapDelegators(tx: ExtraTxResponse) {
</thead>
<tbody>
<tr v-for="(item, i) in events.txs">
<td class="pr-2 truncate text-[#B999F3]" style="max-width: 250px">
<td class="pr-2 truncate text-link" style="max-width: 250px">
<RouterLink
v-for="d in mapDelegators(item)"
:to="`/${props.chain}/account/${d}`"
@ -861,7 +861,7 @@ function mapDelegators(tx: ExtraTxResponse) {
</td>
<td width="150">
<RouterLink
class="text-[#B999F3] mb-0"
class="text-link mb-0"
:to="`/${props.chain}/block/${item.height}`"
>{{ item.height }}</RouterLink
><br />

2
src/modules/[chain]/staking/index.vue
View File

@ -447,7 +447,7 @@ loadAvatars();
<div class="flex flex-col">
<span
class="text-sm text-primary dark:text-[#B999F3] whitespace-nowrap overflow-hidden"
class="text-sm text-primary dark:text-link whitespace-nowrap overflow-hidden"
>
<RouterLink
:to="{

4
src/plugins/i18n/locales/en.json
View File

@ -80,8 +80,8 @@
"average_block_time": "Average Block Time",
"block_header": "Block Header",
"last_commit": "Last Commit",
"recent": "Recent",
"future": "Future",
"recent": "Recent Block",
"future": "Future Block",
"fees": "Fees",
"only_tx": "Only show txs in recent blocks"
},

28
src/router/index.ts
View File

@ -1,9 +1,9 @@
import { useBlockchain } from "@/stores";
import { createRouter, createWebHistory } from "vue-router";
import { useBlockchain } from '@/stores';
import { createRouter, createWebHistory } from 'vue-router';
// @ts-ignore
import { setupLayouts } from "virtual:generated-layouts";
import { setupLayouts } from 'virtual:generated-layouts';
// @ts-ignore
import routes from "~pages";
import routes from '~pages';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -12,15 +12,17 @@ const router = createRouter({
//update current blockchain
router.beforeEach((to) => {
const { chain } = to.params
if(chain){
const blockchain = useBlockchain()
if(chain !== blockchain.chainName) {
blockchain.setCurrent(chain.toString())
}
}
})
const { chain } = to.params;
if (chain) {
const blockchain = useBlockchain();
if (chain !== blockchain.chainName) {
blockchain.setCurrent(chain.toString());
}
}
});
// console.log('router', router.getRoutes());
// Docs: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
export default router;
export default router;

20
src/style.css
View File

@ -80,9 +80,10 @@ table td {
.countdown {
position: absolute;
width: 45%;
text-align: right;
float: right;
transform: translate(-50%, -50%);
/* width: 45%; */
/* text-align: right; */
/* float: right; */
}
.validatore-table.table :where(th, td) {
@ -149,7 +150,7 @@ table td {
}
.btn-secondary {
@apply cursor-pointer bg-[#2E2E33] rounded-lg border border-[#383B40] px-6 py-[14px] h-[48px] text-[14px] font-medium text-white hover:brightness-150 hover:bg-[#2E2E33] hover:border-[#383B40];
@apply cursor-pointer bg-base rounded-lg border border-[#383B40] px-6 py-[14px] h-[48px] text-[14px] font-medium text-white hover:brightness-150 hover:bg-base hover:border-[#383B40];
}
.box-border {
@ -161,3 +162,14 @@ table td {
color: white;
border: 1px solid #b999f3;
}
.box-content {
@apply m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627];
}
.customTabV2.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]) {
background-color: transparent;
color: #b999f3;
font-weight: 600;
border-bottom: 2px solid #b999f3;
}

8
tailwind.config.js
View File

@ -1,4 +1,6 @@
/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');
module.exports = {
darkMode: ['class'],
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
@ -8,9 +10,15 @@ module.exports = {
yes: '#3fb68b',
no: '#ff5353',
info: '#00b2ff',
link: '#B999F3',
main: 'var(--text-main)',
secondary: 'var(--text-secondary)',
active: 'var(--bg-active)',
base: {
DEFAULT: '#2E2E33',
400: '#242627',
500: '#141416',
},
},
},
},