From e6f32d6716facc7445a765033571d5e4581a9e80 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Tue, 14 Feb 2023 09:58:28 +0800
Subject: [PATCH] add i18n for index, improve chain profile

---
 .../dashboard/src/components/ChainSummary.vue    |  2 +-
 .../src/layouts/components/ChainProfile.vue      |  2 +-
 .../src/layouts/components/DefaultLayout.vue     |  3 ++-
 packages/dashboard/src/pages/index.vue           |  6 +++---
 .../dashboard/src/plugins/i18n/locales/cn.json   |  5 +++++
 .../dashboard/src/plugins/i18n/locales/en.json   |  6 ++++++
 packages/dashboard/src/stores/useBlockchain.ts   | 16 +++++++++++++---
 packages/dashboard/src/stores/useDashboard.ts    |  4 ++--
 8 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/dashboard/src/components/ChainSummary.vue b/packages/dashboard/src/components/ChainSummary.vue
index 0b9c088a..46f9a512 100644
--- a/packages/dashboard/src/components/ChainSummary.vue
+++ b/packages/dashboard/src/components/ChainSummary.vue
@@ -47,7 +47,7 @@ const logoPath = computed(() => {
                         activator="parent"
                         location="top"
                     >
-                        Add to favorite
+                        {{ $t('index.add_to_favorite') }}
                     </VTooltip>
                 </VListItemAction>
             </template>
diff --git a/packages/dashboard/src/layouts/components/ChainProfile.vue b/packages/dashboard/src/layouts/components/ChainProfile.vue
index 7299d4dd..e4cdfa3f 100644
--- a/packages/dashboard/src/layouts/components/ChainProfile.vue
+++ b/packages/dashboard/src/layouts/components/ChainProfile.vue
@@ -34,7 +34,7 @@ const chainStore = useBlockchain()
             <!-- 👉 Rest -->
             <VListSubheader v-if="chainStore.current.apis?.rest" title="Rest Endpoint" />
             <VListItem v-for="i in chainStore.current.apis?.rest" link @click="chainStore.setRestEndpoint(i.address)">
-              <VListItemTitle>{{ i.provider }} <VIcon v-if="chainStore.availableEndpoint && i.address === chainStore.availableEndpoint" icon="mdi-check" color="primary" /></VListItemTitle>
+              <VListItemTitle>{{ i.provider }} <VIcon v-if="chainStore.availableEndpoint && i.address === chainStore.availableEndpoint" icon="mdi-check" color="success" /></VListItemTitle>
               <VListItemSubtitle>{{ i.address }}</VListItemSubtitle>
             </VListItem>
 
diff --git a/packages/dashboard/src/layouts/components/DefaultLayout.vue b/packages/dashboard/src/layouts/components/DefaultLayout.vue
index 80fbdc54..3925c1af 100644
--- a/packages/dashboard/src/layouts/components/DefaultLayout.vue
+++ b/packages/dashboard/src/layouts/components/DefaultLayout.vue
@@ -13,6 +13,7 @@ import { VerticalNavLayout } from '@layouts'
 import NavBarI18n from './NavBarI18n.vue'
 import NavSearchBar from './NavSearchBar.vue'
 import NavBarNotifications from './NavBarNotifications.vue'
+import TheCustomizer from '@/plugins/vuetify/@core/components/TheCustomizer.vue'
 
 const { appRouteTransition, isLessThanOverlayNavBreakpoint, isVerticalNavCollapsed } = useThemeConfig()
 const { width: windowWidth } = useWindowSize()
@@ -63,7 +64,7 @@ dashboard.initial()
     </template>
 
     <!-- 👉 Customizer -->
-    <!-- <TheCustomizer /> -->
+    <!-- <TheCustomizer />  -->
   </VerticalNavLayout>
 </template>
 
diff --git a/packages/dashboard/src/pages/index.vue b/packages/dashboard/src/pages/index.vue
index d38a34cd..3ff74cab 100644
--- a/packages/dashboard/src/pages/index.vue
+++ b/packages/dashboard/src/pages/index.vue
@@ -20,7 +20,7 @@ const chains = computed(()=> {
 </script>
 <template>
   <div class="d-flex flex-column justify-center">
-    <div class="d-flex justify-center align-self-center p-1 b1">
+    <div class="d-flex justify-center align-center align-self-center p-1 b1">
       <VImg src="/logo.svg" width="85" height="85"/>
       <h1 class="text-primary text-h3 font-weight-bold d-none d-md-block ml-1">
         Ping Dashboard<VChip>Beta</VChip>
@@ -28,14 +28,14 @@ const chains = computed(()=> {
     </div>
     <div class="d-flex flex-column align-center">
       <p class="mb-1">
-        Ping Dashboard is not just an explorer but also a wallet and more ... 🛠
+        {{ $t('index.slogan') }}
       </p>
       <h2 class="mb-9">
         Cosmos Ecosystem Blockchains 🚀
       </h2>
     </div>
     <VProgressLinear v-if="dashboard.status !== LoadingStatus.Loaded " indeterminate color="primary darken-2"/>
-    <VTextField v-model="keywords" variant="underlined" placeholder="Search chain name" style="max-width: 300px;" app>
+    <VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')" style="max-width: 300px;" app>
       <template #append-inner>
         {{ chains.length }}/{{ dashboard.length }}
       </template>
diff --git a/packages/dashboard/src/plugins/i18n/locales/cn.json b/packages/dashboard/src/plugins/i18n/locales/cn.json
index a8987e5e..811b4c65 100644
--- a/packages/dashboard/src/plugins/i18n/locales/cn.json
+++ b/packages/dashboard/src/plugins/i18n/locales/cn.json
@@ -3,6 +3,11 @@
     "chain": "面板首页",
     "chain-test": "测试功能",
   },
+  "index": {
+    "slogan": "Ping Dashboard 是一个区块链浏览器，也是一个网页钱包，还有更多 ... 🛠",
+    "search_placeholder": "搜索区块链",
+    "add_to_favorite": "加入收藏夹"
+  },
   "Ecosystem": "生态系统",
   "All Blockchains": "全部区块链",
   "Favorite": "收藏夹"
diff --git a/packages/dashboard/src/plugins/i18n/locales/en.json b/packages/dashboard/src/plugins/i18n/locales/en.json
index c1c9d8ef..e95911cb 100644
--- a/packages/dashboard/src/plugins/i18n/locales/en.json
+++ b/packages/dashboard/src/plugins/i18n/locales/en.json
@@ -3,7 +3,13 @@
     "chain": "Dashboard",
     "chain-test": "test",
   },
+  "index": {
+    "slogan": "Ping Dashboard is not just an explorer but also a wallet and more ... 🛠",
+    "search_placeholder": "Search Chain",
+    "add_to_favorite": "Add to favorite"
+  },
   "Ecosystem": "Ecosystem",
   "All Blockchains": "All Blockchain222",
   "Favorite": "Favorite"
+  
 }
diff --git a/packages/dashboard/src/stores/useBlockchain.ts b/packages/dashboard/src/stores/useBlockchain.ts
index 4f8aa89e..4040239a 100644
--- a/packages/dashboard/src/stores/useBlockchain.ts
+++ b/packages/dashboard/src/stores/useBlockchain.ts
@@ -1,7 +1,7 @@
 import { ref, computed } from "vue";
 import { defineStore } from "pinia";
 import { getLogo, useDashboard } from "./useDashboard";
-
+import { useTheme } from 'vuetify'
 
 export const useBlockchain = defineStore("blockchain", () => {
   const dbstore = useDashboard()
@@ -18,12 +18,22 @@ export const useBlockchain = defineStore("blockchain", () => {
   const name = computed(() => {
     return current.value.chain_name
   })
+  const primaryColor = computed(() => {
+    const colors = ['#fff', '#fea', '#123', '#68f', '#aca', 'bbe', '#666CFF']
+    const color = colors[Math.floor(Math.random() * colors.length)]
+
+    const vuetifyTheme = useTheme()
+    const currentThemeName = vuetifyTheme.name.value
+    vuetifyTheme.themes.value[currentThemeName].colors.primary = color
+    return color
+  })
   const availableEndpoint = computed(() => {
     const all = current.value?.apis?.rest
     if(all) {
       if(!rest.value || all.findIndex(x => x.address === rest.value) < 0) {        
         const rn = Math.random()
-        rest.value = all[Math.floor(rn * all.length)].address
+        const endpoint = all[Math.floor(rn * all.length)]
+        rest.value = endpoint?.address || ''
       }
     }
     
@@ -38,7 +48,7 @@ export const useBlockchain = defineStore("blockchain", () => {
     // states
     availableEndpoint,
     // getters
-    name, current, logo,
+    name, current, logo, primaryColor,
     // actions
     setRestEndpoint
   };
diff --git a/packages/dashboard/src/stores/useDashboard.ts b/packages/dashboard/src/stores/useDashboard.ts
index 5c532b53..5ce71931 100644
--- a/packages/dashboard/src/stores/useDashboard.ts
+++ b/packages/dashboard/src/stores/useDashboard.ts
@@ -147,7 +147,7 @@ export const useDashboard = defineStore("dashboard", () => {
           title: 'Favorite', 
           children: favNavItems, 
           badgeContent: favorite.value.length,
-          badgeClass: 'bg-error',
+          badgeClass: 'bg-primary',
           i18n: true,
           icon: { icon: 'mdi-star', size: '22'}
         },
@@ -155,7 +155,7 @@ export const useDashboard = defineStore("dashboard", () => {
           title: 'All Blockchains',
           to: { path : '/'},
           badgeContent: length.value,
-          badgeClass: 'bg-error',
+          badgeClass: 'bg-primary',
           i18n: true,
           icon: { icon: 'mdi-grid', size: '22'}
         }