feat: style uptime

components.d.ts

@@ -7,7 +7,6 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AddAuthenticatorAppDialog: typeof import('./src/plugins/vuetify/@core/components/AddAuthenticatorAppDialog.vue')['default']
     AddEditAddressDialog: typeof import('./src/plugins/vuetify/@core/components/AddEditAddressDialog.vue')['default']
     AppBarSearch: typeof import('./src/plugins/vuetify/@core/components/AppBarSearch.vue')['default']
     AppCardActions: typeof import('./src/plugins/vuetify/@core/components/AppCardActions.vue')['default']
@@ -43,7 +42,6 @@ declare module '@vue/runtime-core' {
     Shortcuts: typeof import('./src/plugins/vuetify/@core/components/Shortcuts.vue')['default']
     TheCustomizer: typeof import('./src/plugins/vuetify/@core/components/TheCustomizer.vue')['default']
     ThemeSwitcher: typeof import('./src/plugins/vuetify/@core/components/ThemeSwitcher.vue')['default']
-    TwoFactorAuthDialog: typeof import('./src/plugins/vuetify/@core/components/TwoFactorAuthDialog.vue')['default']
     UserInfoEditDialog: typeof import('./src/plugins/vuetify/@core/components/UserInfoEditDialog.vue')['default']
     UserUpgradePlanDialog: typeof import('./src/plugins/vuetify/@core/components/UserUpgradePlanDialog.vue')['default']
   }

src/components/PaginationBar.vue

@@ -1,7 +1,4 @@
 <script lang="ts" setup>
-import TwoFactorAuthDialog from '@/plugins/vuetify/@core/components/TwoFactorAuthDialog.vue';
-import { PageRequest } from '@/types';
-import type { PropType } from 'vue';
 import { computed, ref } from 'vue';
 
 const props = defineProps({
@@ -41,7 +38,8 @@ function gotoPage(pageNum: number) {
 <template>
     <div class="my-5 text-center">
         <div v-if="total && limit" class="btn-group">
-            <button v-for="{page, color} in pages" class="btn btn-md" :class="color" @click="gotoPage(page)">{{ page }}</button>
+            <button v-for="{ page, color } in pages" class="btn btn-md" :class="color" @click="gotoPage(page)">{{ page
+            }}</button>
         </div>
     </div>
 </template>

src/components/ProposalListItem.vue

@@ -3,7 +3,6 @@ import {
     useBlockchain,
     useFormatter,
     useStakingStore,
-  useWalletStore,
     useTxDialog
 } from '@/stores';
 import { select } from '@/components/dynamic/index';
@@ -46,64 +45,45 @@ const proposalInfo = ref();
             <tbody>
                 <tr v-for="(item, index) in proposals?.proposals" :key="index">
                     <td class="px-4 w-20">
-            <label
+                        <label for="proposal-detail-modal" class="text-main text-base hover:text-indigo-400 cursor-pointer"
-              for="proposal-detail-modal"
+                            @click="proposalInfo = item">
-              class="text-main text-base hover:text-indigo-400 cursor-pointer"
+                            #{{ item?.proposal_id }}</label>
-              @click="proposalInfo = item"
-            >
-              #{{ item?.proposal_id }}</label
-            >
                     </td>
                     <td class="w-full">
                         <div>
-              <RouterLink
+                            <RouterLink :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
-                :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+                                class="text-main text-base mb-1 block hover:text-indigo-400 truncate">
-                class="text-main text-base mb-1 block hover:text-indigo-400 truncate"
-              >
                                 {{ item?.content?.title }}
                             </RouterLink>
                             <div
-                class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
+                                class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1">
-              >
                                 {{ showType(item.content['@type']) }}
                             </div>
                         </div>
                     </td>
                     <td class="w-60">
-            <ProposalProcess
+                        <ProposalProcess :pool="staking.pool" :tally="item.final_tally_result"></ProposalProcess>
-              :pool="staking.pool"
-              :tally="item.final_tally_result"
-            ></ProposalProcess>
                     </td>
                     <td class="w-36">
                         <div class="pl-4">
-              <div
+                            <div class="flex items-center" :class="statusMap?.[item?.status] === 'PASSED'
-                class="flex items-center"
-                :class="
-                  statusMap?.[item?.status] === 'PASSED'
                                 ? 'text-yes'
                                 : statusMap?.[item?.status] === 'REJECTED'
                                     ? 'text-no'
                                     : 'text-info'
-                "
+                                ">
-              >
+                                <div class="w-1 h-1 rounded-full mr-2" :class="statusMap?.[item?.status] === 'PASSED'
-                <div
-                  class="w-1 h-1 rounded-full mr-2"
-                  :class="
-                    statusMap?.[item?.status] === 'PASSED'
                                     ? 'bg-yes'
                                     : statusMap?.[item?.status] === 'REJECTED'
                                         ? 'bg-no'
                                         : 'bg-info'
-                  "
+                                    "></div>
-                ></div>
                                 <div class="text-xs">
                                     {{ statusMap?.[item?.status] || item?.status }}
                                 </div>
                             </div>
                             <div
-                class="truncate col-span-2 md:!col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:!flex md:!justify-start"
+                                class="truncate col-span-2 md:!col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:!flex md:!justify-start">
-              >
                                 {{ format.toDay(item.voting_end_time, 'from') }}
                             </div>
                         </div>
@@ -111,15 +91,11 @@ const proposalInfo = ref();
 
                     <td v-if="statusMap?.[item?.status] === 'VOTING'" class="w-40">
                         <div class="">
-              <label
+                            <label for="vote" class="btn btn-xs btn-primary rounded"
-                for="vote"
+                                @click="dialog.open('vote', { proposal_id: item?.proposal_id })">
-                class="btn btn-xs btn-primary rounded-sm"
-                @click="dialog.open('vote', { proposal_id: item?.proposal_id })"
-                >
                                 <span v-if="item?.voterStatus">{{ item?.voterStatus.replace("VOTE_OPTION_", "") }}</span>
                                 <span v-else>Vote</span>
-                </label
+                            </label>
-              >
                         </div>
                     </td>
                 </tr>
@@ -127,91 +103,56 @@ const proposalInfo = ref();
         </table>
 
         <div class="lg:!hidden">
-      <div
+            <div v-for="(item, index) in proposals?.proposals" :key="index" class="px-4 py-4">
-        v-for="(item, index) in proposals?.proposals"
+                <div class="text-main text-base mb-1 flex justify-between hover:text-indigo-400">
-        :key="index"
+                    <RouterLink :to="`/${chain.chainName}/gov/${item?.proposal_id}`" class="flex-1 w-0 truncate mr-4">{{
-        class="px-4 py-4"
+                        item?.content?.title }}</RouterLink>
-      >
+                    <label for="proposal-detail-modal" class="text-main text-base hover:text-indigo-400 cursor-pointer"
-        <div
+                        @click="proposalInfo = item">
-          class="text-main text-base mb-1 flex justify-between hover:text-indigo-400"
+                        #{{ item?.proposal_id }}</label>
-        >
-          <RouterLink
-            :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
-            class="flex-1 w-0 truncate mr-4"
-            >{{ item?.content?.title }}</RouterLink
-          >
-          <label
-            for="proposal-detail-modal"
-            class="text-main text-base hover:text-indigo-400 cursor-pointer"
-            @click="proposalInfo = item"
-          >
-            #{{ item?.proposal_id }}</label
-          >
                 </div>
 
                 <div class="grid grid-cols-4 mt-2 mb-2">
                     <div class="col-span-2">
                         <div
-              class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
+                            class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1">
-            >
                             {{ showType(item.content['@type']) }}
                         </div>
                     </div>
-          <div
+                    <div class="flex items-center" :class="statusMap?.[item?.status] === 'PASSED'
-            class="flex items-center"
-            :class="
-              statusMap?.[item?.status] === 'PASSED'
                         ? 'text-yes'
                         : statusMap?.[item?.status] === 'REJECTED'
                             ? 'text-no'
                             : 'text-info'
-            "
+                        ">
-          >
+                        <div class="w-1 h-1 rounded-full mr-2" :class="statusMap?.[item?.status] === 'PASSED'
-            <div
-              class="w-1 h-1 rounded-full mr-2"
-              :class="
-                statusMap?.[item?.status] === 'PASSED'
                             ? 'bg-yes'
                             : statusMap?.[item?.status] === 'REJECTED'
                                 ? 'bg-no'
                                 : 'bg-info'
-              "
+                            "></div>
-            ></div>
                         <div class="text-xs flex items-center">
                             {{ statusMap?.[item?.status] || item?.status }}
                         </div>
                     </div>
-          <div
+                    <div class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end">
-            class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end"
-          >
                         {{ format.toDay(item.voting_end_time, 'from') }}
                     </div>
                 </div>
 
                 <div>
-          <ProposalProcess
+                    <ProposalProcess :pool="staking.pool" :tally="item.final_tally_result"></ProposalProcess>
-            :pool="staking.pool"
-            :tally="item.final_tally_result"
-          ></ProposalProcess>
                 </div>
 
                 <div class="mt-4" v-if="statusMap?.[item?.status] === 'VOTING'">
                     <div class="" v-show="item?.voterStatus === 'No With Veto'">
-              <label
+                        <label for="vote" class="btn btn-xs btn-primary rounded"
-                for="vote"
+                            @click="dialog.open('vote', { proposal_id: item?.proposal_id })">Vote</label>
-                class="btn btn-xs btn-primary rounded-sm"
+                        <div class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
-                @click="dialog.open('vote', { proposal_id: item?.proposal_id })"
-                >Vote</label
-              >
-              <div
-                class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
                             :class="`text-${voterStatusMap?.[item?.voterStatus]}`"
-                v-show="item?.voterStatus !== 'No With Veto'"
+                            v-show="item?.voterStatus !== 'No With Veto'">
-              >
+                            <span class="inset-x-0 inset-y-0 opacity-10 absolute"
-                <span
+                                :class="`bg-${voterStatusMap?.[item?.voterStatus]}`"></span>
-                  class="inset-x-0 inset-y-0 opacity-10 absolute"
-                  :class="`bg-${voterStatusMap?.[item?.voterStatus]}`"
-                ></span>
                             {{ item?.voterStatus }}
                         </div>
                     </div>
@@ -222,18 +163,13 @@ const proposalInfo = ref();
         <input type="checkbox" id="proposal-detail-modal" class="modal-toggle" />
         <label for="proposal-detail-modal" class="modal">
             <label class="modal-box w-11/12 max-w-5xl" for="">
-        <label
+                <label for="proposal-detail-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
-          for="proposal-detail-modal"
-          class="btn btn-sm btn-circle absolute right-2 top-2"
-          >✕</label
-        >
                 <h3 class="font-bold text-lg">Description</h3>
                 <p class="py-4">
-          <Component
+                    <Component v-if="proposalInfo?.content?.description"
-            v-if="proposalInfo?.content?.description"
                         :is="select(proposalInfo?.content?.description, 'horizontal')"
-            :value="proposalInfo?.content?.description"
+                        :value="proposalInfo?.content?.description">
-          ></Component>
+                    </Component>
                 </p>
             </label>
         </label>

src/components/ValidatorCommissionRate.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import ApexCharts from 'vue3-apexcharts';
-import { useTheme } from 'vuetify';
-import { hexToRgb } from '@/plugins/vuetify/@layouts/utils';
 import { computed, type PropType } from 'vue';
 import { useFormatter } from '@/stores';
 import type { CommissionRate } from '@/types';
@@ -20,10 +18,6 @@ let max = computed(
     () => Number(props.commission?.commission_rates.max_rate || 1) * 100
 );
 
-// const rate = 15 // props.commision?.commissionRates.rate
-// const change = 15
-// const max = 20
-
 const left = rate;
 const right = computed(() => max.value - rate.value);
 
@@ -43,38 +37,25 @@ const s5 = computed(() =>
 
 const series = computed(() => [s1.value, s2.value, s3, s4.value, s5.value]);
 
-const vuetifyTheme = useTheme();
 const format = useFormatter();
 
 const chartConfig = computed(() => {
-  const themeColors = vuetifyTheme.current.value.colors;
-  const variableTheme = vuetifyTheme.current.value.variables;
 
-  const secondaryText = `rgba(${hexToRgb(
+    const secondaryText = `hsl(var(--bc))`;
-    String(themeColors['on-background'])
+    const primaryText = `hsl(var(--bc))`;
-  )},${variableTheme['medium-emphasis-opacity']})`;
-  const primaryText = `rgba(${hexToRgb(String(themeColors['on-background']))},${
-    variableTheme['high-emphasis-opacity']
-  })`;
 
     return {
         chart: {
             sparkline: { enabled: false },
         },
-    colors: [
+        colors: ['rgba(109,120,141,0.2)', 'rgba(114,225,40,0.2)', 'rgba(114,225,40,1)', 'rgba(114,225,40,0.2)', 'rgba(109,120,141,0.2)'],
-      `rgba(${hexToRgb(String(themeColors.secondary))},0.2)`,
-      `rgba(${hexToRgb(String(themeColors.success))},0.2)`,
-      `rgba(${hexToRgb(String(themeColors.success))},1)`,
-      `rgba(${hexToRgb(String(themeColors.success))},0.2)`,
-      `rgba(${hexToRgb(String(themeColors.secondary))},0.2)`,
-    ],
         legend: { show: false },
         tooltip: { enabled: false },
         dataLabels: { enabled: false },
         stroke: {
             width: 3,
             lineCap: 'round',
-      colors: ['rgba(var(--v-theme-surface), 1)'],
+            colors: ['hsl(var(--b1))'],
         },
         labels: [
             'Available',

src/modules/[chain]/block/index.vue

@@ -18,27 +18,17 @@ const list = computed(() => {
 <template>
     <div>
         <div class="tabs tabs-boxed bg-transparent mb-4">
-      <a
+            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'blocks' }"
-        class="tab text-gray-400 uppercase"
+                @click="tab = 'blocks'">Blocks</a>
-        :class="{ 'tab-active': tab === 'blocks' }"
+            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'transactions' }"
-        @click="tab = 'blocks'"
+                @click="tab = 'transactions'">Transactions</a>
-        >Blocks</a
-      >
-      <a
-        class="tab text-gray-400 uppercase"
-        :class="{ 'tab-active': tab === 'transactions' }"
-        @click="tab = 'transactions'"
-        >Transactions</a
-      >
         </div>
 
-    <div v-show="tab === 'blocks'" class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1">
+        <div v-show="tab === 'blocks'" class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1 gap-3">
 
-      <RouterLink
+            <RouterLink v-for="item in list"
-        v-for="item in list"
+                class="flex flex-col justify-between rounded p-4 shadow bg-base-100"
-        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}`">
-        :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 }}
@@ -56,10 +46,7 @@ const list = computed(() => {
             </RouterLink>
         </div>
 
-    <div
+        <div v-show="tab === 'transactions'" class="bg-base-100 rounded overflow-x-auto">
-      v-show="tab === 'transactions'"
-      class="bg-base-100 rounded overflow-x-auto"
-    >
             <table class="table w-full table-compact">
                 <thead>
                     <tr>
@@ -72,10 +59,8 @@ const list = computed(() => {
                 <tbody>
                     <tr v-for="(item, index) in base.txsInRecents" :index="index">
                         <td class="text-sm text-primary">
-              <RouterLink
+                            <RouterLink :to="`/${props.chain}/block/${item.height}`">{{ item.height }}</RouterLink>
-                :to="`/${props.chain}/block/${item.height}`"
+                        </td>
-                >{{ item.height }}</RouterLink
-              ></td>
                         <td class="truncate text-primary" width="50%">
                             <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
                                 item.hash
@@ -90,7 +75,11 @@ const list = computed(() => {
                 <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">
-            <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>
+                        <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>Only show txs in recent blocks</span>
                     </div>
                 </div>

src/modules/[chain]/gov/index.vue

@@ -33,24 +33,10 @@ function page(p: number) {
 <template>
     <div>
         <div class="tabs tabs-boxed bg-transparent mb-4 text-center">
-      <a
+            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === '2' }" @click="changeTab('2')">Voting</a>
-        class="tab text-gray-400 uppercase"
+            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === '3' }" @click="changeTab('3')">Passed</a>
-        :class="{ 'tab-active': tab === '2' }"
+            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === '4' }"
-        @click="changeTab('2')"
+                @click="changeTab('4')">Rejected</a>
-        >Voting</a
-      >
-      <a
-        class="tab text-gray-400 uppercase"
-        :class="{ 'tab-active': tab === '3' }"
-        @click="changeTab('3')"
-        >Passed</a
-      >
-      <a
-        class="tab text-gray-400 uppercase"
-        :class="{ 'tab-active': tab === '4' }"
-        @click="changeTab('4')"
-        >Rejected</a
-      >
         </div>
         <ProposalListItem :proposals="store?.proposals[tab]" />
         <PaginationBar :total="store?.proposals[tab]?.pagination?.total" :limit="pageRequest.limit" :callback="page" />

src/modules/[chain]/index.vue

@@ -99,10 +99,7 @@ const color = computed(() => {
 
 <template>
   <div>
-    <div
+    <div v-if="coinInfo && coinInfo.name" class="bg-base-100 rounded shadow mb-4">
-      v-if="coinInfo && coinInfo.name"
-      class="bg-base-100 rounded shadow mb-4"
-    >
       <div class="grid grid-cols-2 md:grid-cols-3 p-4">
         <div class="col-span-2 md:col-span-1">
           <div class="text-xl font-semibold text-main">
@@ -112,37 +109,26 @@ const color = computed(() => {
           </div>
           <div class="text-xs mt-2">
             Rank:
-            <div
+            <div class="badge text-xs badge-error bg-[#fcebea] dark:bg-[#41384d] text-red-400">
-              class="badge text-xs badge-error bg-[#fcebea] dark:bg-[#41384d] text-red-400"
-            >
               #{{ coinInfo.market_cap_rank }}
             </div>
           </div>
 
           <div class="my-4 flex flex-wrap items-center">
-            <a
+            <a v-for="(item, index) of comLinks" :key="index" :href="item.href"
-              v-for="(item, index) of comLinks"
+              class="link link-primary px-2 py-1 rounded-sm no-underline hover:text-primary hover:bg-gray-100 dark:hover:bg-slate-800 flex items-center">
-              :key="index"
-              :href="item.href"
-              class="link link-primary px-2 py-1 rounded-sm no-underline hover:text-primary hover:bg-gray-100 dark:hover:bg-slate-800 flex items-center"
-            >
               <Icon :icon="item?.icon" />
               <span class="ml-1 text-sm uppercase">{{ item?.name }}</span>
             </a>
           </div>
 
           <div>
-            <div
+            <div class="dropdown dropdown-hover w-full">
-              class="dropdown dropdown-hover w-full"
-            >
               <label>
                 <div
-                  class="bg-gray-100 dark:bg-[#384059] flex items-center justify-between px-4 py-2 cursor-pointer rounded"
+                  class="bg-gray-100 dark:bg-[#384059] flex items-center justify-between px-4 py-2 cursor-pointer rounded">
-                >
                   <div>
-                    <div
+                    <div class="font-semibold text-xl text-[#666] dark:text-white">
-                      class="font-semibold text-xl text-[#666] dark:text-white"
-                    >
                       {{ ticker?.market?.name || '' }}
                     </div>
                     <div class="text-info text-sm">
@@ -153,9 +139,7 @@ const color = computed(() => {
                   </div>
 
                   <div class="text-right">
-                    <div
+                    <div class="text-xl font-semibold text-[#666] dark:text-white">
-                      class="text-xl font-semibold text-[#666] dark:text-white"
-                    >
                       ${{ ticker.converted_last.usd }}
                     </div>
                     <div class="text-sm" :class="store.priceColor">
@@ -165,18 +149,10 @@ const color = computed(() => {
                 </div>
               </label>
               <div class="dropdown-content pt-1">
-                <div
+                <div class="h-64 overflow-auto w-full shadow rounded">
-                  class="h-64 overflow-auto w-full shadow rounded"
-                >
                   <ul class="menu w-full bg-gray-100 rounded dark:bg-[#384059]">
-                    <li
+                    <li v-for="(item, index) in store.coinInfo.tickers" :key="index" @click="store.selectTicker(index)">
-                      v-for="(item, index) in store.coinInfo.tickers"
+                      <div class="flex items-center justify-between hover:bg-base-100">
-                      :key="index"
-                      @click="store.selectTicker(index)"
-                    >
-                      <div
-                        class="flex items-center justify-between hover:bg-base-100"
-                      >
                         <div class="flex-1">
                           <div class="text-main text-sm">
                             {{ item?.market?.name }}
@@ -198,12 +174,8 @@ const color = computed(() => {
               </div>
             </div>
 
-            <a
+            <a :color="store.trustColor" class="my-5 !text-white btn !bg-yes !border-yes w-full" :href="ticker.trade_url"
-              :color="store.trustColor"
+              target="_blank">
-              class="my-5 !text-white btn !bg-yes !border-yes w-full"
-              :href="ticker.trade_url"
-              target="_blank"
-            >
               Buy {{ coinInfo.symbol || '' }}
             </a>
           </div>
@@ -215,23 +187,18 @@ const color = computed(() => {
       </div>
       <div class="h-[1px] w-full bg-gray-100 dark:bg-[#384059]"></div>
       <div class="max-h-[250px] overflow-auto p-4 text-sm">
-        <MdEditor
+        <MdEditor :model-value="coinInfo.description?.en" previewOnly></MdEditor>
-          :model-value="coinInfo.description?.en"
-          previewOnly
-        ></MdEditor>
       </div>
       <div class="mx-4 flex flex-wrap items-center">
-        <div
+        <div v-for="tag in coinInfo.categories"
-          v-for="tag in coinInfo.categories"
+          class="mr-2 mb-4 text-xs bg-gray-100 dark:bg-[#384059] px-3 rounded-full py-1">
-          class="mr-2 mb-4 text-xs bg-gray-100 dark:bg-[#384059] px-3 rounded-full py-1"
-        >
           {{ tag }}
         </div>
       </div>
     </div>
 
     <div class="grid grid-cols-2 gap-4 md:!grid-cols-3 lg:!grid-cols-6">
-      <div v-for="item in store.stats">
+      <div v-for="(item, key) in store.stats" :key="key">
         <CardStatisticsVertical v-bind="item" />
       </div>
     </div>
@@ -251,16 +218,11 @@ const color = computed(() => {
     <div class="bg-base-100 rounded mt-4 shadow">
       <div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
         {{ walletStore.currentAddress || 'Not Connected' }}
-        <RouterLink
+        <RouterLink v-if="walletStore.currentAddress"
-          v-if="walletStore.currentAddress"
           class="float-right text-sm cursor-pointert link link-primary no-underline font-medium"
-          :to="`/${chain}/account/${walletStore.currentAddress}`"
+          :to="`/${chain}/account/${walletStore.currentAddress}`">More</RouterLink>
-          >More</RouterLink
-        >
       </div>
-      <div
+      <div class="grid grid-cols-1 md:!grid-cols-4 auto-cols-auto gap-4 px-4 pb-6">
-        class="grid grid-cols-1 md:!grid-cols-4 auto-cols-auto gap-4 px-4 pb-6"
-      >
         <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
           <div class="text-sm mb-1">Balance</div>
           <div class="text-lg font-semibold text-main">
@@ -331,16 +293,12 @@ const color = computed(() => {
               </td>
               <td>
                 <div>
-                  <label for="delegate"
+                  <label for="delegate" class="btn !btn-xs !btn-primary btn-ghost rounded-sm mr-2"
-                    class="btn !btn-xs !btn-primary btn-ghost rounded-sm mr-2"
+                    @click="dialog.open('delegate', { validator_address: item.delegation.validator_address })">
-                    @click="dialog.open('delegate', { validator_address: item.delegation.validator_address})"
-                  >
                     Delegate
                   </label>
-                  <label for="withdraw"
+                  <label for="withdraw" class="btn !btn-xs !btn-primary btn-ghost rounded-sm"
-                    class="btn !btn-xs !btn-primary btn-ghost rounded-sm"
+                    @click="dialog.open('withdraw', { validator_address: item.delegation.validator_address })">
-                    @click="dialog.open('withdraw', { validator_address: item.delegation.validator_address})"
-                  >
                     Withdraw Rewards
                   </label>
                 </div>
@@ -353,15 +311,13 @@ const color = computed(() => {
       <div class="grid grid-cols-3 gap-4 px-4 pb-6 mt-4">
         <label for="PingTokenConvert" class="btn btn-primary text-white">Swap</label>
         <label for="send" class="btn !bg-yes !border-yes text-white" @click="dialog.open('send', {})">Send</label>
-        <label for="delegate" class="btn !bg-info !border-info text-white" @click="dialog.open('delegate', {})">Delegate</label>
+        <label for="delegate" class="btn !bg-info !border-info text-white"
+          @click="dialog.open('delegate', {})">Delegate</label>
         <RouterLink to="/wallet/receive" class="btn !bg-info !border-info text-white hidden">Receive</RouterLink>
       </div>
       <Teleport to="body">
-        <ping-token-convert
+        <ping-token-convert :chain-name="blockchain?.current?.prettyName" :endpoint="blockchain?.endpoint?.address"
-          :chain-name="blockchain?.current?.prettyName"
+          :hd-path="walletStore?.connectedWallet?.hdPath"></ping-token-convert>
-          :endpoint="blockchain?.endpoint?.address"
-          :hd-path="walletStore?.connectedWallet?.hdPath"
-        ></ping-token-convert>
       </Teleport>
     </div>
 

src/modules/[chain]/staking/[validator].vue

@@ -145,16 +145,8 @@ onMounted(() => {
             <div class="avatar mr-4 relative w-24 rounded-lg overflow-hidden">
               <div class="w-24 rounded-lg absolute opacity-10"></div>
               <div class="w-24 rounded-lg">
-                <img
+                <img v-if="avatars[identity] !== 'undefined'" v-lazy="logo(identity)" class="object-contain" />
-                  v-if="avatars[identity] !== 'undefined'"
+                <Icon v-else class="text-4xl" :icon="`mdi-help-circle-outline`" />
-                  v-lazy="logo(identity)"
-                  class="object-contain"
-                />
-                <Icon
-                  v-else
-                  class="text-4xl"
-                  :icon="`mdi-help-circle-outline`"
-                />
               </div>
             </div>
             <div class="mx-2">
@@ -162,16 +154,11 @@ onMounted(() => {
               <div class="text-sm mb-4">
                 {{ v.description?.identity || '-' }}
               </div>
-              <label
+              <label for="delegate" class="btn btn-primary btn-sm w-full" @click="
-                for="delegate"
-                class="btn btn-primary btn-sm w-full"
-                @click="
                 dialog.open('delegate', {
                   validator_address: v.operator_address,
                 })
-                "
+                ">Delegate</label>
-                >Delegate</label
-              >
             </div>
           </div>
           <div class="m-4 text-sm">
@@ -192,8 +179,7 @@ onMounted(() => {
             <div class="card-list">
               <div class="flex items-center mb-2">
                 <Icon icon="mdi-shield-account-outline" class="text-xl mr-1" />
-                <span>Status: </span
+                <span>Status: </span><span>
-                ><span>
                   {{ String(v.status).replace('BOND_STATUS_', '') }}
                 </span>
               </div>
@@ -208,10 +194,7 @@ onMounted(() => {
         <div class="flex-1">
           <div class="flex flex-col justify-between">
             <div class="flex mb-2">
-              <div
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
                 <Icon icon="mdi-coin" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -227,10 +210,7 @@ onMounted(() => {
               </div>
             </div>
             <div class="flex mb-2">
-              <div
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
                 <Icon icon="mdi-percent" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -242,10 +222,7 @@ onMounted(() => {
             </div>
 
             <div class="flex mb-2">
-              <div
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
                 <Icon icon="mdi-account-tie" class="text-3xl" />
               </div>
 
@@ -257,10 +234,7 @@ onMounted(() => {
               </div>
             </div>
             <div class="flex mb-2">
-              <div
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
                 <Icon icon="mdi-finance" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -270,10 +244,7 @@ onMounted(() => {
             </div>
 
             <div class="flex mb-2">
-              <div
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
                 <Icon icon="mdi-stairs-up" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -283,10 +254,7 @@ onMounted(() => {
             </div>
 
             <div class="flex mb-2">
-              <div
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
                 <Icon icon="mdi-clock" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -304,47 +272,31 @@ onMounted(() => {
       <div class="h-100">
         <CommissionRate :commission="v.commission"></CommissionRate>
       </div>
-      <div>
+      <div class="h-100 bg-base-100 rounded shadow relative">
-        <div class="h-100 bg-base-100 rounded shadow">
         <div class="text-lg font-semibold text-main px-4 pt-4">
           Commissions & Rewards
         </div>
         <div class="px-4 mt-1">
           <div class="overflow-auto" style="max-height: 280px">
             <div class="text-sm mb-2">Commissions</div>
-              <div
+            <div v-for="(i, k) in commission" :key="`reward-${k}`" color="info" label variant="outlined"
-                v-for="(i, k) in commission"
+              class="mr-1 mb-1 badge text-xs">
-                :key="`reward-${k}`"
-                color="info"
-                label
-                variant="outlined"
-                class="mr-1 mb-1 badge text-xs"
-              >
               {{ format.formatToken2(i) }}
             </div>
             <div class="text-sm mb-2 mt-2">Outstanding Rewards</div>
-              <div
+            <div v-for="(i, k) in rewards" :key="`reward-${k}`" class="mr-1 mb-1 badge text-xs">
-                v-for="(i, k) in rewards"
-                :key="`reward-${k}`"
-                class="mr-1 mb-1 badge text-xs"
-              >
               {{ format.formatToken2(i) }}
             </div>
           </div>
-            <label
+          <div class="absolute bottom-6 left-0 right-0 px-4">
-              for="withdraw_commission"
+            <label for="withdraw_commission" class="btn btn-primary w-full" @click="
-              class="btn btn-primary mt-4 w-full btn-sm"
-              @click="
               dialog.open('withdraw_commission', {
                 validator_address: v.operator_address,
               })
-              "
+              ">Withdraw</label>
-              >Withdraw</label
-            >
           </div>
         </div>
       </div>
-      <div>
       <div class="h-100 bg-base-100 rounded shadow">
         <div class="px-4 pt-4 mb-2 text-main font-lg font-semibold">
           Addresses
@@ -352,10 +304,7 @@ onMounted(() => {
         <div class="px-4">
           <div class="mb-3">
             <div class="text-sm">Account</div>
-              <RouterLink
+            <RouterLink class="text-xs text-primary" :to="`/${chain}/account/${addresses.account}`">
-                class="text-xs text-primary"
-                :to="`/${chain}/account/${addresses.account}`"
-              >
               {{ addresses.account }}
             </RouterLink>
           </div>
@@ -376,7 +325,6 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    </div>
     <div class="mt-5 bg-base-100 shadow rounded p-4">
       <div class="text-lg mb-4 font-semibold">Transactions</div>
       <div class="rounded overflow-auto">
@@ -406,11 +354,7 @@ onMounted(() => {
                   <span class="mr-2">{{
                     format.messages(item.tx.body.messages)
                   }}</span>
-                  <Icon
+                  <Icon v-if="item.code === 0" icon="mdi-check" class="text-yes" />
-                    v-if="item.code === 0"
-                    icon="mdi-check"
-                    class="text-yes"
-                  />
                   <Icon v-else icon="mdi-multiply" class="text-no" />
                 </div>
               </td>

src/modules/[chain]/staking/index.vue

@@ -302,7 +302,7 @@ loadAvatars();
                 <label
                   v-else
                   for="delegate"
-                  class="btn btn-xs bg-primary capitalize"
+                  class="btn btn-xs rounded bg-primary capitalize border-none"
                   @click="
                     dialog.open('delegate', {
                       validator_address: v.operator_address,

src/modules/[chain]/tx/[hash].vue

@@ -25,10 +25,7 @@ const messages = computed(() => {
 </script>
 <template>
     <div>
-    <div
+        <div v-if="tx.tx_response" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4">
-      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">Summary</h2>
             <div class="overflow-auto-x">
                 <table class="table text-sm">
@@ -40,27 +37,18 @@ const messages = computed(() => {
                         <tr>
                             <td>Height</td>
                             <td class="text-primary">
-                <RouterLink
+                                <RouterLink :to="`/${props.chain}/block/${tx.tx_response.height}`">{{ tx.tx_response.height
-                  :to="`/${props.chain}/block/${tx.tx_response.height}`"
+                                }}
-                  >{{ tx.tx_response.height }}</RouterLink
+                                </RouterLink>
-                >
                             </td>
                         </tr>
                         <tr>
                             <td>Status</td>
                             <td>
-                <div
+                                <div class="text-xs truncate relative py-2 px-4 w-fit mr-2 rounded" :class="`text-${tx.tx_response.code === 0 ? 'success' : 'error'
-                  class="text-xs truncate relative py-2 px-4 w-fit mr-2"
+                                    }`">
-                  :class="`text-${
+                                    <span class="inset-x-0 inset-y-0 opacity-10 absolute" :class="`bg-${tx.tx_response.code === 0 ? 'success' : 'error'
-                    tx.tx_response.code === 0 ? 'success' : 'error'
+                                        }`"></span>
-                  }`"
-                >
-                <span
-                    class="inset-x-0 inset-y-0 opacity-10 absolute"
-                    :class="`bg-${
-                      tx.tx_response.code === 0 ? 'success' : 'error'
-                    }`"
-                  ></span>
                                     {{ tx.tx_response.code === 0 ? 'Success' : 'Failded' }}
                                 </div>
                             </td>
@@ -100,24 +88,20 @@ const messages = computed(() => {
             </div>
         </div>
 
-    <div
+        <div v-if="tx.tx_response" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4">
-      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">
                 Messages: ({{ messages.length }})
             </h2>
             <div class="divider"></div>
             <div v-for="(msg, i) in messages">
-        <div><DynamicComponent :value="msg" /></div>
+                <div>
+                    <DynamicComponent :value="msg" />
+                </div>
             </div>
             <div v-if="messages.length === 0">No messages</div>
         </div>
 
-    <div
+        <div v-if="tx.tx_response" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
-      v-if="tx.tx_response"
-      class="bg-base-100 px-4 pt-3 pb-4 rounded shadow"
-    >
             <h2 class="card-title truncate mb-2">JSON</h2>
             <JsonPretty :data="tx" :deep="3" />
         </div>

src/modules/[chain]/uptime/customize.vue

@@ -124,7 +124,7 @@ function color(v: string) {
 
 <template>
   <div>
-    <div class="overflow-x-auto w-full card ">
+    <div class="overflow-x-auto w-full">
       <div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
         <div class="min-w-0 flex-1">
           <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">My Validators</h2>

src/modules/[chain]/uptime/index.vue

@@ -44,7 +44,8 @@ const list = computed(() => {
             signing,
             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
 })
 
@@ -110,23 +111,13 @@ function changeTab(v: string) {
 <template>
     <div>
         <div class="tabs tabs-boxed bg-transparent mb-4">
-      <a
+            <a class="tab text-gray-400 capitalize" :class="{ 'tab-active': tab === '3' }"
-        class="tab text-gray-400 capitalize"
+                @click="changeTab('3')">Overall</a>
-        :class="{ 'tab-active': tab === '3' }"
+            <a class="tab text-gray-400 capitalize" :class="{ 'tab-active': tab === '2' }"
-        @click="changeTab('3')"
+                @click="changeTab('2')">Blocks</a>
-        >Overall</a
-      >
-      <a
-        class="tab text-gray-400 capitalize"
-        :class="{ 'tab-active': tab === '2' }"
-        @click="changeTab('2')"
-        >Blocks</a
-      >
             <RouterLink :to="`/${chain}/uptime/customize`">
-      <a
+                <a class="tab text-gray-400 capitalize">Customize</a>
-        class="tab text-gray-400 capitalize"
+            </RouterLink>
-        >Customize</a
-      ></RouterLink>
         </div>
         <div class="bg-base-100 px-5 pt-5">
             <div class="flex items-center gap-x-4">
@@ -135,15 +126,16 @@ function changeTab(v: string) {
                     Only Consumer Set
                 </label>
                 <input type="text" v-model="keyword" placeholder="Keywords to filter validators"
-          class="input input-sm w-full flex-1" />
+                    class="input input-sm w-full flex-1 border border-gray-200 dark:border-gray-600" />
             </div>
-      <div class="flex flex-row flex-wrap gap-x-4 mt-4" :class="tab === '2'?'':'hidden'">
+            <div class="grid grid-cols-4 gap-x-4 mt-4" :class="tab === '2' ? '' : 'hidden'">
                 <div v-for="({ v, signing, hex }, i) in list" :key="i">
-          <div class="flex items-center justify-between py-0 w-72">
+                    <div class="flex items-center justify-between py-0">
                         <label class="text-truncate text-sm">
                             <span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
                         </label>
-            <div v-if="Number(signing?.missed_blocks_counter || 0) > 10" class="badge badge-sm bg-transparent border-0 text-red-500">
+                        <div v-if="Number(signing?.missed_blocks_counter || 0) > 10"
+                            class="badge badge-sm bg-transparent border-0 text-red-500">
                             {{ signing?.missed_blocks_counter }}
                         </div>
                         <div v-else class="badge badge-sm bg-transparent text-green-600 border-0">
@@ -167,9 +159,15 @@ function changeTab(v: string) {
                         </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>
+                            <div class="truncate max-w-sm">{{ i + 1 }}. {{ v.description.moniker }}</div>
+                        </td>
                         <td class="text-right">
-              <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>
+                            <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')">
@@ -178,7 +176,9 @@ function changeTab(v: string) {
                             </span></td>
                         <td class="text-xs text-right">
 
-              <span v-if="signing && signing.jailed_until.startsWith('1970')" class="text-right">{{ format.percent(Number(signing.index_offset)/(latest-Number(signing.start_height))) }}</span>
+                            <span v-if="signing && signing.jailed_until.startsWith('1970')" class="text-right">{{
+                                format.percent(Number(signing.index_offset) / (latest - Number(signing.start_height)))
+                            }}</span>
                             {{ signing?.index_offset }}
                         </td>
                         <td class="text-right">{{ signing?.start_height }}</td>
@@ -186,7 +186,11 @@ function changeTab(v: string) {
                     </tr>
                     <tfoot>
                         <tr>
-              <td colspan="2" class="text-right"> Minimum uptime per window: <span class="lowercase tooltip" :data-tip="`Window size: ${ slashingParam.signed_blocks_window }`"><span class="ml-2 btn btn-error btn-xs">{{ format.percent(slashingParam.min_signed_per_window) }}</span> </span></td>
+                            <td colspan="2" class="text-right"> Minimum uptime per window: <span class="lowercase tooltip"
+                                    :data-tip="`Window size: ${slashingParam.signed_blocks_window}`"><span
+                                        class="ml-2 btn btn-error btn-xs">{{
+                                            format.percent(slashingParam.min_signed_per_window) }}</span>
+                                </span></td>
                             <td colspan="8"></td>
                         </tr>
                     </tfoot>
@@ -206,8 +210,6 @@ function changeTab(v: string) {
   }
 </route>
 
-<style lang="scss">
+<style lang="scss">.v-field--variant-outlined .v-field__outline__notch {
-.v-field--variant-outlined .v-field__outline__notch {
     border-width: 0 !important;
-}
+}</style>
-</style>

src/style.css

@@ -20,3 +20,7 @@
   position: relative;
   z-index: 2;
 }
+
+.btn {
+  @apply rounded;
+}