improve uptime and ad

src/components/UptimeBar.vue

@@ -44,12 +44,12 @@ const bars = computed(() => {
 });
 </script>
 <template>
-  <div class="flex items-center justify-evenly gap-0.5">
+  <div class="flex gap-0.5">
     <div class="cursor-default" v-for="(item, index) in bars" :key="index">
       <div class="tooltip" 
           :data-tip="item.height" 
           :class="item.color"
-          style="width: 4px;"
+          style="width: 3px;"
       >
         &nbsp;
       </div>

src/components/ad/ad.ts

@@ -6,10 +6,10 @@ interface ADConfig {
 }
 
 export const confs: Record<string, ADConfig> = {
-    "localhost": {
-        apiKey: 'XXXX_api_key_staging_XXXX', // An actual API key is generated once you register an app with us.
-        environment: 'staging', // use value 'production' when going live
-    },
+    // "localhost": {
+    //     apiKey: 'XXXX_api_key_staging_XXXX', // An actual API key is generated once you register an app with us.
+    //     environment: 'staging', // use value 'production' when going live
+    // },
     "ping.pub": {
         apiKey: 'persona-pub-0x6ca028de83d9bc438bb3fd7f9620f36b',
         environment: 'production',

src/modules/[chain]/index.vue

@@ -18,6 +18,7 @@ import { computed } from '@vue/reactivity';
 import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
 import ProposalListItem from '@/components/ProposalListItem.vue';
 import ArrayObjectElement from '@/components/dynamic/ArrayObjectElement.vue'
+import AdBanner from '@/components/ad/AdBanner.vue';
 
 const props = defineProps(['chain']);
 
@@ -382,6 +383,8 @@ const amount = computed({
       </Teleport>
     </div>
 
+    <AdBanner id="chain-home-banner-ad" unit="banner" width="970px" height="90px" />
+
     <div class="bg-base-100 rounded mt-4">
       <div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
         {{ $t('index.app_versions') }}

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

@@ -183,31 +183,36 @@ function fetchAllKeyRotation() {
         Note: Please load rotated keys to see the correct uptime
       </div>
       <!-- grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 mt-4 -->
-      <div
-        class="flex flex-row flex-wrap gap-x-4 mt-4 justify-center"
-        :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-[298px]">
-            <label class="truncate text-sm">
-              <span class="ml-1 text-black dark:text-white"
-                >{{ i + 1 }}.{{ v.description.moniker }}</span
+      <div :class="tab === '2' ? '' : 'hidden'">
+        <div class="flex flex-row flex-wrap gap-x-4 mt-4 justify-center">
+          <div v-for="({ v, signing, hex }, i) in list" :key="i">
+            <div class="flex justify-between py-0 w-[248px]">
+              <label class="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 font-bold"
               >
-            </label>
-            <div
-              v-if="Number(signing?.missed_blocks_counter || 0) > 10"
-              class="badge badge-sm bg-transparent border-0 text-red-500 font-bold"
-            >
-              {{ signing?.missed_blocks_counter }}
-            </div>
-            <div
-              v-else
-              class="badge badge-sm bg-transparent text-green-600 border-0 font-bold"
-            >
-              {{ signing?.missed_blocks_counter }}
+                {{ signing?.missed_blocks_counter }}
+              </div>
+              <div
+                v-else
+                class="badge badge-sm bg-transparent text-green-600 border-0 font-bold"
+              >
+                {{ signing?.missed_blocks_counter }}
+              </div>
             </div>
+            <UptimeBar :blocks="commits2" :validator="hex" />
           </div>
-          <UptimeBar :blocks="commits2" :validator="hex" />
+        </div>
+        <div class="mt-5 ml-5 text-xs flex justify-center gap-2">
+          <span class=" font-bold">{{ $t('uptime.legend') }}: </span>
+          <span class="bg-green-500">&nbsp;</span> {{ $t('uptime.committed')}} 
+          <span class="bg-yellow-500">&nbsp;</span> {{ $t('uptime.precommitted')}} 
+          <span class="bg-red-500">&nbsp;</span> {{ $t('uptime.missed')}} 
         </div>
       </div>
 

src/modules/wallet/accounts.vue

@@ -222,7 +222,7 @@ async function loadBalances(chainName: string, endpoint: string, address: string
       </div>
     </div>
 
-    <AdBanner id="home-banner-ad" unit="banner" width="970px" height="90px" />
+    <AdBanner id="account-banner-ad" unit="banner" width="970px" height="90px" />
 
     <div class="overflow-x-auto">
       <div v-for="{ key, subaccounts } in accounts" class="bg-base-100 rounded-md my-5 py-5">

src/modules/wallet/keplr.vue

@@ -86,7 +86,7 @@ function suggest() {
 
 <template>
     <div class="bg-base-100 p-4 rounded text-center">
-        <AdBanner id="home-banner-ad" unit="banner" width="970px" height="90px" />
+        <AdBanner id="keplr-banner-ad" unit="banner" width="970px" height="90px" />
         <div class="flex">
             <select v-model="selected" class="select select-bordered mx-5" @change="initParamsForKeplr">
                 <option v-for="c in dashboard.chains" :value="c">

src/modules/wallet/portfolio.vue

@@ -258,7 +258,7 @@ const currencySign = computed(() => {
         </div>
       </div>
       <div class="overflow-x-auto mt-4">
-      <AdBanner class="bg-base-200" id="home-banner-ad" unit="banner" width="970px" height="90px" />
+      <AdBanner class="bg-base-200" id="portfolio-banner-ad" unit="banner" width="970px" height="90px" />
         <table class="table w-full">
           <thead class="bg-base-200">
             <tr>

src/modules/wallet/suggest.vue

@@ -170,6 +170,6 @@ function suggest() {
             </div>
         </div>
 
-        <AdBanner id="home-banner-ad" unit="banner" width="970px" height="90px" />
+        <AdBanner id="suggest-banner-ad" unit="banner" width="970px" height="90px" />
     </div>
 </template>

src/plugins/i18n/locales/cn.json

@@ -255,7 +255,11 @@
     "signed_blocks": "已签名数量",
     "missing_blocks": "未签名数量",
     "add_validators": "添加验证人",
-    "add": "添加"
+    "add": "添加",
+    "legend": "图例",
+    "committed": "已提交",
+    "precommitted": "预提交",
+    "missed": "丢失"
   },
   "widget": {
     "title": "初始设置",

src/plugins/i18n/locales/en.json

@@ -266,7 +266,11 @@
     "signed_blocks": "Signed Blocks",
     "missing_blocks": "Missing Blocks",
     "add_validators": "Add Validators",
-    "add": "Add"
+    "add": "Add",
+    "legend": "Legend",
+    "committed": "Committed",
+    "precommitted": "Precommitted",
+    "missed": "Missed"
   },
   "widget": {
     "title": "Initial Setting",

src/plugins/i18n/locales/id.json

@@ -254,7 +254,11 @@
       "signed_blocks": "Blok Tersign",
       "missing_blocks": "Blok yang Hilang",
       "add_validators": "Tambahkan Validator",
-      "add": "Tambahkan"
+      "add": "Tambahkan",
+      "legend": "Legend",
+      "committed": "Committed",
+      "precommitted": "Precommitted",
+      "missed": "Missed"
     },
     "widget": {
       "title": "Pengaturan Awal",