From 4646e335c3e6436eb755010307bb8353754dbf63 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Fri, 6 Aug 2021 11:58:54 +0800
Subject: [PATCH] Improvme ui

---
 src/lang/locales/en.json           |  5 +-
 src/libs/data/data.js              |  2 +-
 src/navigation/vertical/index.js   |  5 ++
 src/router/index.js                | 26 +++++++++--
 src/store/chains/cosmos.json       |  2 +-
 src/store/chains/index.js          | 22 ++++-----
 src/store/chains/iris.json         |  5 ++
 src/views/Blocks.vue               |  2 +-
 src/views/Home.vue                 |  2 +-
 src/views/ObjectFieldComponent.vue |  9 +++-
 src/views/ProposalView.vue         |  5 +-
 src/views/Staking.vue              |  2 +-
 src/views/error/ChainNotExist.vue  | 73 ++++++++++++++++++++++++++++++
 src/views/error/Error404.vue       |  2 +-
 themeConfig.js                     |  2 +-
 15 files changed, 138 insertions(+), 26 deletions(-)
 create mode 100644 src/store/chains/iris.json
 create mode 100644 src/views/error/ChainNotExist.vue

diff --git a/src/lang/locales/en.json b/src/lang/locales/en.json
index 1ad91876..74159185 100644
--- a/src/lang/locales/en.json
+++ b/src/lang/locales/en.json
@@ -5,10 +5,13 @@
   "cosmos": "Cosmos Hub",
   "kava": "Kava",
   "akash": "Akash Decloud",
-  "iris": "Irisnet",
+  "iris": "Iris Hub",
+  "crypto": "Crypto.com",
+  
   "staking": "Staking",
   "governance": "Governance",
   "summary": "Summary",
+  "blocks": "Blocks",
   "blockchains": "Blockchains",
 
   "proposal_id": "Proposal ID",
diff --git a/src/libs/data/data.js b/src/libs/data/data.js
index 37186938..c557b2b0 100644
--- a/src/libs/data/data.js
+++ b/src/libs/data/data.js
@@ -49,7 +49,7 @@ export function formatToken(token) {
   return ''
 }
 
-const COUNT_ABBRS = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']
+const COUNT_ABBRS = ['', 'K', 'M', 'B', 'T', 'P', 'E', 'Z', 'Y']
 
 export function formatNumber(count, withAbbr = false, decimals = 2) {
   const i = count === 0 ? count : Math.floor(Math.log(count) / Math.log(1000))
diff --git a/src/navigation/vertical/index.js b/src/navigation/vertical/index.js
index 506054ec..7f6217fa 100644
--- a/src/navigation/vertical/index.js
+++ b/src/navigation/vertical/index.js
@@ -6,6 +6,11 @@ const modules = [
     title: 'summary',
     route: 'info',
   },
+  {
+    scope: 'normal',
+    title: 'blocks',
+    route: 'blocks',
+  },
   {
     scope: 'normal',
     title: 'staking',
diff --git a/src/router/index.js b/src/router/index.js
index 2cf41702..1724d3c3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -116,7 +116,7 @@ const router = new VueRouter({
       name: 'blocks',
       component: () => import('@/views/Blocks.vue'),
       meta: {
-        pageTitle: 'Block',
+        pageTitle: 'Blocks',
         breadcrumb: [
           {
             text: 'Blocks',
@@ -126,12 +126,16 @@ const router = new VueRouter({
       },
     },
     {
-      path: '/:chain/block/:height',
+      path: '/:chain/blocks/:height',
       name: 'block',
       component: () => import('@/views/Block.vue'),
       meta: {
         pageTitle: 'Block',
         breadcrumb: [
+          {
+            text: 'Blocks',
+            active: true,
+          },
           {
             text: 'Block',
             active: true,
@@ -169,9 +173,17 @@ const router = new VueRouter({
         layout: 'full',
       },
     },
+    {
+      path: '/error/chain-not-exists',
+      name: 'chain-404',
+      component: () => import('@/views/error/ChainNotExist.vue'),
+      meta: {
+        layout: 'full',
+      },
+    },
     {
       path: '*',
-      redirect: 'error-404',
+      redirect: '/error/error-404',
     },
   ],
 })
@@ -192,8 +204,14 @@ router.beforeEach((to, from, next) => {
           store.commit('setup_sdk_version', { chain_name: c, version: version[0] })
         })
     }
+    next()
+  } else if (c) {
+    console.log(from, to, c)
+    // if (c) {
+    next({ name: 'chain-404' })
+  } else {
+    next()
   }
-  next()
 })
 
 // ? For splash screen
diff --git a/src/store/chains/cosmos.json b/src/store/chains/cosmos.json
index c39e76fa..f09441b5 100644
--- a/src/store/chains/cosmos.json
+++ b/src/store/chains/cosmos.json
@@ -1,5 +1,5 @@
 {
     "chain_name": "cosmos",
-    "api":"https://lcd-cosmoshub.keplr.app",
+    "api":"https://cosmos.api.ping.pub",
     "logo": "https://dl.airtable.com/.attachments/e54f814bba8c0f9af8a3056020210de0/2d1155fb/cosmos-hub.svg"
 }
\ No newline at end of file
diff --git a/src/store/chains/index.js b/src/store/chains/index.js
index e30dbed2..d1a830a8 100644
--- a/src/store/chains/index.js
+++ b/src/store/chains/index.js
@@ -3,18 +3,18 @@ let chains = {}
 const localChains = localStorage.getItem('chains')
 if (localChains) {
   chains = JSON.parse(localChains)
-} else {
-  const configs = require.context('.', false, /\.json$/)
-
-  configs.keys().forEach(k => {
-    const c = configs(k)
-    chains[c.chain_name] = c
-  })
-  localStorage.setItem('chains', JSON.stringify(chains))
 }
 
-Object.keys(chains).forEach(key => {
-  const chain = chains[key]
+const configs = require.context('.', false, /\.json$/)
+
+const update = {}
+configs.keys().forEach(k => {
+  const c = configs(k)
+  update[c.chain_name] = c
+})
+
+Object.keys(update).forEach(key => {
+  const chain = update[key]
   fetch(`${chain.api}/node_info`)
     .then(res => res.json())
     .then(json => {
@@ -23,7 +23,7 @@ Object.keys(chains).forEach(key => {
       const version = sdk.match(re)
       // eslint-disable-next-line prefer-destructuring
       chain.sdk_version = version[0]
-      localStorage.setItem('chains', JSON.stringify(chains))
+      localStorage.setItem('chains', JSON.stringify(update))
     })
 })
 
diff --git a/src/store/chains/iris.json b/src/store/chains/iris.json
new file mode 100644
index 00000000..ab0b20b7
--- /dev/null
+++ b/src/store/chains/iris.json
@@ -0,0 +1,5 @@
+{
+    "chain_name": "iris",
+    "api": "https://lcd-iris.keplr.app",
+    "logo": "https://dl.airtable.com/.attachments/2d6d51b1b262db00ecc51616ffc3bdf5/90ff00d0/IRISnet.svg"
+}
\ No newline at end of file
diff --git a/src/views/Blocks.vue b/src/views/Blocks.vue
index d360f959..7c0f46ed 100644
--- a/src/views/Blocks.vue
+++ b/src/views/Blocks.vue
@@ -19,7 +19,7 @@
       >
         <!-- Column: Height -->
         <template #cell(height)="data">
-          <router-link :to="`./block/${data.item.block.header.height}`">
+          <router-link :to="`./blocks/${data.item.block.header.height}`">
             #{{ data.item.block.header.height }}
           </router-link>
         </template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 17caf525..591c61e3 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -14,7 +14,7 @@
     </h2>
 
     <p class="mb-3">
-      If you want add your chain to our explorer, be free to contact us.
+      If you want to add your chain to our explorer, be free to contact us.
     </p>
 
     <div>
diff --git a/src/views/ObjectFieldComponent.vue b/src/views/ObjectFieldComponent.vue
index 83a920a2..b9f621d5 100644
--- a/src/views/ObjectFieldComponent.vue
+++ b/src/views/ObjectFieldComponent.vue
@@ -2,7 +2,7 @@
   <b-table-simple
     v-if="typeof tablefield === 'object'"
     hover
-    small
+    :small="small"
     striped
     responsive
   >
@@ -24,6 +24,7 @@
       <b-td
         v-else-if="typeof (value) ==='object'"
         hover
+        class="overflow-hidden"
       >
         <b-tabs>
           <b-tab
@@ -45,7 +46,7 @@
         </b-tabs>
       </b-td>
       <b-td v-else>
-        {{ formatText(value) }}
+        {{ value }}
       </b-td>
     </b-tr>
   </b-table-simple>
@@ -73,6 +74,10 @@ export default {
       type: [Array, Object],
       default: () => {},
     },
+    small: {
+      type: Boolean,
+      default: true,
+    },
   },
   methods: {
     formatObject(value) {
diff --git a/src/views/ProposalView.vue b/src/views/ProposalView.vue
index caf5ce9e..c6a08d2b 100644
--- a/src/views/ProposalView.vue
+++ b/src/views/ProposalView.vue
@@ -76,7 +76,10 @@
             </b-td><b-td>{{ proposal.type }}</b-td>
           </b-tr>
         </b-table-simple>
-        <object-field-component :tablefield="proposal.contents" />
+        <object-field-component
+          :tablefield="proposal.contents"
+          :small="false"
+        />
       </b-card-body>
       <b-card-footer>
         <router-link :to="`../gov`">
diff --git a/src/views/Staking.vue b/src/views/Staking.vue
index 47c913cb..fc0c5d38 100644
--- a/src/views/Staking.vue
+++ b/src/views/Staking.vue
@@ -25,7 +25,7 @@
         sort-by="tokens"
         striped
         hover
-        responsive="sm"
+        responsive
       >
         <!-- A virtual column -->
         <template #cell(index)="data">
diff --git a/src/views/error/ChainNotExist.vue b/src/views/error/ChainNotExist.vue
new file mode 100644
index 00000000..adc9a565
--- /dev/null
+++ b/src/views/error/ChainNotExist.vue
@@ -0,0 +1,73 @@
+<template>
+  <!-- Error page-->
+  <div class="misc-wrapper">
+    <b-link class="brand-logo">
+      <vuexy-logo />
+      <h2 class="brand-text text-primary ml-1">
+        PING.PUB
+      </h2>
+    </b-link>
+
+    <div class="misc-inner p-2 p-sm-3">
+      <div class="w-100 text-center">
+        <h2 class="mb-1">
+          Sorry, The chain is not found
+        </h2>
+        <p class="mb-2">
+          Be free to contact us if you want to add your chain.
+        </p>
+
+        <b-button
+          variant="primary"
+          class="mb-2 btn-sm-block"
+          :to="{path:'/'}"
+        >
+          Back to home
+        </b-button>
+
+        <!-- image -->
+        <b-img
+          fluid
+          :src="imgUrl"
+          alt="Error page"
+        />
+      </div>
+    </div>
+  </div>
+<!-- / Error page-->
+</template>
+
+<script>
+/* eslint-disable global-require */
+import { BLink, BButton, BImg } from 'bootstrap-vue'
+import VuexyLogo from '@core/layouts/components/Logo.vue'
+import store from '@/store/index'
+
+export default {
+  components: {
+    VuexyLogo,
+    BLink,
+    BButton,
+    BImg,
+  },
+  data() {
+    return {
+      downImg: require('@/assets/images/pages/error.svg'),
+    }
+  },
+  computed: {
+    imgUrl() {
+      if (store.state.appConfig.layout.skin === 'dark') {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.downImg = require('@/assets/images/pages/error-dark.svg')
+        return this.downImg
+      }
+      return this.downImg
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import '@core/scss/vue/pages/page-misc.scss';
+</style>
diff --git a/src/views/error/Error404.vue b/src/views/error/Error404.vue
index 268cab23..17339cde 100644
--- a/src/views/error/Error404.vue
+++ b/src/views/error/Error404.vue
@@ -4,7 +4,7 @@
     <b-link class="brand-logo">
       <vuexy-logo />
       <h2 class="brand-text text-primary ml-1">
-        Vuexy
+        PING.PUB
       </h2>
     </b-link>
 
diff --git a/themeConfig.js b/themeConfig.js
index 996703d3..b0dc0505 100644
--- a/themeConfig.js
+++ b/themeConfig.js
@@ -9,7 +9,7 @@ export const $themeBreakpoints = {}
 // APP CONFIG
 export const $themeConfig = {
   app: {
-    appName: 'Ping.pub', // Will update name in navigation menu (Branding)
+    appName: 'PING.PUB', // Will update name in navigation menu (Branding)
     // eslint-disable-next-line global-require
     appLogoImage: require('@/assets/images/logo/logo.svg'), // Will update logo in navigation menu (Branding)
   },