Inprove chain home ui

README.md

@@ -1,3 +1,71 @@
-# Vuexy - Vuejs, React, HTML & Laravel Admin Dashboard Template
+# Ping Explorer
 
-**Vuexy – Vuejs, React, HTML & Laravel Admin Dashboard Template** – is the most developer friendly & highly customizable Admin Dashboard Template based on Bootstrap 4, Bootstrap Vue & Reactstrap.
+Look is a light explorer for Cosmos-based Blockchains.  https://ping.pub .
+
+## What is the difference between Look and other explorers? 
+
+Look is designed to explore blockchain data as real as possible, therefore there is no cache, no analysis. Look does not cache/save blockchain data on its server. Look only fetch data from Cosmos full node via LCD/RPC endpoints. We call it "Light Explorer".
+
+## Do you want Look to explore your blockchain?
+
+If you want Look to explore your blockchain, pull a request [here](https://github.com/liangping/look/issues), We will explore your chains as soon as possibe. And the most important thing is that Look is free for all public cosmos-based blockchains.
+
+## Why LOOK explorer use official/trusted third party public LCD/rpc server? 
+
+We have two considerations: 1, Trust, In decentralize system, everything controled by one single team/orgnization could be risks. So we decided to co-build LOOK explorer with the community. 2. Look explorer will explose handreds and thousands cosmos-based blockchains in the future, it's impossible for our team to run validators or fullnodes for all of those chains.
+
+## Contributors
+
+Developers: @liangping @dingyiming
+
+Data providers: [full list](https://github.com/ping-pub/look/blob/master/hosts.json)
+
+* irisnet.org, 
+* nylira.net, 
+* kava.io
+
+*If you don't want to provide data services for LOOK exporer, let us know.*
+
+## Blockchains on LOOK explorer:
+* https://ping.pub/cosmos
+* https://ping.pub/iris
+* https://ping.pub/akash
+* https://ping.pub/kava
+
+# LOOK 浏览器
+
+Look是一个轻浏览器，免费为所有的基于Cosmos-SDK开发的区块链提供浏览服务
+
+## Look 和其他区块链浏览器有什么不同？
+
+Look的设计理念是尽可能的保持数据的真实性，所以，他不会在服务器端缓存或者保存任何数据，也不会增加任何分析处理。它仅仅通过LCD/RPC来获取他所需要的所有数据。因此我们叫它“轻浏览器”。
+
+## 你希望Look来浏览你的区块链吗？
+
+如果你需要Look来浏览你的区块链，请在[这里](https://github.com/liangping/look/issues) 提交申请，我们会尽快开通。而且是免费的。
+
+## 为什么LOOK要使用官方或者可信赖的第三方的LCD/RPC服务器? 
+
+我们主要是基于以下两个考虑：1，可信，在去中心化的系统里，任何有一个由单个团队或者实体控制的事情都是有风险的，所以我们选择和社区一起来共建LOOK浏览器。2，LOOK浏览器计划在未来支持成百上千条区块链，因此对我们团队来说，不可能为所有这些链去提供一个验证人节点或者全节点。
+
+## 项目贡献者
+
+开发者: @liangping @dingyiming
+
+数据服务方: [列表](https://github.com/ping-pub/look/blob/master/hosts.json)
+
+* irisnet.org, 
+* nylira.net, 
+* 01node.com, 
+* kava.io
+
+*如果你觉得我们滥用了你的服务器资源，请告知我们。*
+
+## LOOK explorer 上的区块链:
+* https://ping.pub/cosmos
+* https://ping.pub/iris
+* https://ping.pub/akash
+* https://ping.pub/kava
+
+# Contact Us
+Email：18786721#qq.com

src/lang/locales/en.json

@@ -7,6 +7,7 @@
   "akash": "Akash Decloud",
   "iris": "Iris Hub",
   "crypto": "Crypto.com",
+  "osmosis": "Osmosis",
   
   "staking": "Staking",
   "governance": "Governance",

src/libs/data/data.js

@@ -39,14 +39,15 @@ export function formatToken(token) {
     let denom = token.denom.toUpperCase()
     if (denom.charAt(0) === 'U') {
       denom = denom.substring(1)
+      const amount = token.amount / 1000000
+      if (amount > 10) {
+        return `${amount.toFixed()} ${denom}`
+      }
+      return `${amount} ${denom}`
     }
-    const amount = token.amount / 1000000
+    return `${token.amount} ${denom}`
-    if (amount > 10) {
-      return `${amount.toFixed()} ${denom}`
-    }
-    return `${amount} ${denom}`
   }
-  return ''
+  return token
 }
 
 const COUNT_ABBRS = ['', 'K', 'M', 'B', 'T', 'P', 'E', 'Z', 'Y']

src/views/Summary.vue

@@ -35,7 +35,9 @@
 
 <script>
 import { BRow, BCol } from 'bootstrap-vue'
-import { formatNumber, percent, tokenFormatter } from '@/libs/data'
+import {
+  formatNumber, isToken, percent, tokenFormatter,
+} from '@/libs/data'
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -58,7 +60,12 @@ export default {
       chain: {
         title: '',
         class: 'border-primary',
-        items: [],
+        items: [
+          { subtitle: 'chain_id', icon: 'LinkIcon', color: 'light-primary' },
+          { subtitle: 'height', icon: 'BoxIcon', color: 'light-success' },
+          { subtitle: 'bonded_and_supply', icon: 'DollarSignIcon', color: 'light-danger' },
+          { subtitle: 'bonded_ratio', icon: 'PercentIcon', color: 'light-warning' },
+        ],
       },
       staking: {
         title: 'Staking Parameters',
@@ -73,8 +80,8 @@ export default {
         items: [],
       },
       mint: {
-        title: 'Distribution Parameters',
+        title: 'Mint Parameters',
-        items: [],
+        items: null,
       },
       gov: {
         title: 'Governance Parameters',
@@ -84,12 +91,11 @@ export default {
   },
   created() {
     this.$http.getLatestBlock().then(res => {
-      this.chain.items.push({
+      const chainIndex = this.chain.items.findIndex(x => x.subtitle === 'chain_id')
-        title: res.block.header.chain_id, subtitle: 'chain_id', icon: 'LinkIcon', color: 'light-primary',
+      const height = this.chain.items.findIndex(x => x.subtitle === 'height')
-      })
+
-      this.chain.items.push({
+      this.$set(this.chain.items[chainIndex], 'title', res.block.header.chain_id)
-        title: res.block.header.height, subtitle: 'height', icon: 'BoxIcon', color: 'light-success',
+      this.$set(this.chain.items[height], 'title', res.block.header.height)
-      })
     })
 
     this.$http.getStakingParameters().then(res => {
@@ -97,20 +103,25 @@ export default {
       Promise.all([this.$http.getStakingPool(), this.$http.getBankTotal(res.bond_denom)])
         .then(pool => {
           const nano = 1000000
-          this.chain.items.push({
+          const bondedAndSupply = this.chain.items.findIndex(x => x.subtitle === 'bonded_and_supply')
-            title: `${formatNumber(pool[0].bondedToken / nano, true, 0)} / ${formatNumber(pool[1].amount / nano, true, 0)}`, subtitle: 'bonded_and_supply', icon: 'DollarSignIcon', color: 'light-danger',
+          this.$set(this.chain.items[bondedAndSupply], 'title', `${formatNumber(pool[0].bondedToken / nano, true, 1)} / ${formatNumber(pool[1].amount / nano, true, 1)}`)
-          })
+          const bondedRatio = this.chain.items.findIndex(x => x.subtitle === 'bonded_ratio')
-          this.chain.items.push({
+          this.$set(this.chain.items[bondedRatio], 'title', `${percent(pool[0].bondedToken / pool[1].amount)}%`)
-            title: `${percent(pool[0].bondedToken / pool[1].amount)}%`, subtitle: 'bonded_ratio', icon: 'PercentIcon', color: 'light-warning',
-          })
         })
     })
     this.$http.getSlashingParameters().then(res => {
       this.slasing = this.normalize(res, 'Slasing Parameters')
     })
-    this.$http.getMintParameters().then(res => {
+
-      this.mint = this.normalize(res, 'Minting Parameters')
+    const selected = this.$route.params.chain
-    })
+    if (selected === 'iris') {
+      this.mint = null
+    } else {
+      this.$http.getMintParameters().then(res => {
+        this.mint = this.normalize(res, 'Minting Parameters')
+      })
+    }
+
     this.$http.getDistributionParameters().then(res => {
       this.distribution = this.normalize(res, 'Distribution Parameters')
     })
@@ -138,7 +149,7 @@ export default {
     },
     makeItems(data) {
       return Object.keys(data).map(k => {
-        if (Array.isArray(data[k])) {
+        if (isToken(data[k])) {
           return { title: tokenFormatter(data[k]), subtitle: k }
         }
         const d = Number(data[k])

src/views/SummaryParmetersComponent.vue

@@ -17,9 +17,42 @@
           sm="6"
           :class="item.customClass"
         >
-          <b-media no-body>
+          <div
+            v-if="typeof item.title ==='object'"
+          >
+            <b-button
+              :id="item.subtitle"
+              variant="outline-primary"
+              class="ml-2"
+              size="sm"
+            >
+              {{ item.subtitle }}
+            </b-button>
+            <b-popover
+              :target="item.subtitle"
+              variant="primary"
+              triggers="hover"
+              placement="bottom"
+            >
+              <template #title>
+                <span>{{ item.subtitle }}</span>
+              </template>
+              <span>
+                <array-field-component
+                  v-if="Array.isArray(item.title)"
+                  :tablefield="item.title"
+                />
+                <object-field-component
+                  v-else
+                  :tablefield="item.title"
+                /></span>
+            </b-popover>
+          </div>
+          <b-media
+            v-else
+            no-body
+          >
             <b-media-aside
-
               class="mr-2"
             >
               <b-avatar
@@ -35,7 +68,7 @@
             </b-media-aside>
             <b-media-body class="my-auto">
               <h4 class="font-weight-bolder mb-0">
-                {{ item.title }}
+                {{ item.title || '-' }}
               </h4>
               <b-card-text class="font-small-3 mb-1">
                 {{ item.subtitle }}
@@ -50,8 +83,10 @@
 
 <script>
 import {
-  BCard, BCardHeader, BCardTitle, BCardText, BCardBody, BRow, BCol, BMedia, BMediaAside, BAvatar, BMediaBody,
+  BCard, BCardHeader, BCardTitle, BCardText, BCardBody, BRow, BCol, BMedia, BMediaAside, BAvatar, BMediaBody, BPopover, BButton,
 } from 'bootstrap-vue'
+import ObjectFieldComponent from './ObjectFieldComponent.vue'
+import ArrayFieldComponent from './ArrayFieldComponent.vue'
 
 export default {
   components: {
@@ -66,10 +101,14 @@ export default {
     BAvatar,
     BMediaAside,
     BMediaBody,
+    BPopover,
+    BButton,
+    ObjectFieldComponent,
+    ArrayFieldComponent,
   },
   props: {
     data: {
-      type: Object,
+      type: [Object, Array],
       default: () => {},
     },
   },