add price in home page.

src/lang/locales/en.json

@@ -4,13 +4,13 @@
   },
   "cosmos": "Cosmos Hub",
   "kava": "Kava",
-  "akash": "Akash Decloud",
+  "akash-network": "Akash Decloud",
-  "iris": "IRIS Hub",
+  "iris-network": "IRIS Hub",
-  "crypto": "Crypto.org",
+  "crypto-com-chain": "Crypto.org",
   "osmosis": "Osmosis",
   "okexchain": "OKEX Chain",
-  "band": "Band Protocal",
+  "band-protocol": "Band Protocol",
-  "terra": "Terra",
+  "terra-luna": "Terra",
   "persistence": "Persistence",
   "regen": "Regen Network",
   "secret": "Secret Network",

src/libs/fetch.js

@@ -6,7 +6,7 @@ import { TxRaw } from 'cosmjs-types/cosmos/tx/v1beta1/tx'
 import { toBase64 } from '@cosmjs/encoding'
 import {
   Proposal, ProposalTally, Proposer, StakingPool, Votes, Deposit,
-  Validator, StakingParameters, Block, ValidatorDistribution, StakingDelegation, WrapStdTx,
+  Validator, StakingParameters, Block, ValidatorDistribution, StakingDelegation, WrapStdTx, getUserCurrency,
 } from './data'
 
 function commonProcess(res) {
@@ -318,6 +318,12 @@ const chainAPI = class ChainFetch {
     return this.get('/cosmos/liquidity/v1beta1/pools').then(data => commonProcess(data))
   }
 
+  async getMarketChart(days = 14, coin = null) {
+    const conf = this.getSelectedConfig()
+    const currency = getUserCurrency()
+    return ChainFetch.fetch(' https://api.coingecko.com', `/api/v3/coins/${coin || conf.chain_name}/market_chart?vs_currency=${currency}&days=${days}`)
+  }
+
   // CoinMarketCap
   static async fetchCoinMarketCap(url) {
     const host = 'https://price.ping.pub'

src/store/chains/akash.json

@@ -1,5 +1,5 @@
 {
-    "chain_name": "akash",
+    "chain_name": "akash-network",
     "api": "https://akash.api.ping.pub",
     "sdk_version": "0.41.3",
     "addr_prefix": "akash",

src/store/chains/band.json

@@ -1,5 +1,5 @@
 {
-    "chain_name": "band",
+    "chain_name": "band-protocol",
     "api": "https://laozi1.bandchain.org/api",
     "addr_prefix": "band",
     "logo": "https://dl.airtable.com/.attachments/472ae99a508e32b4439b416beddd4eb9/c5166f62/band-symbol-blue-bg.75a3ad91.svg",

src/store/chains/crypto.json

@@ -1,6 +1,6 @@
 
 {
-    "chain_name": "crypto",
+    "chain_name": "crypto-com-chain",
     "api": "https://mainnet.crypto.org:1317",
     "sdk_version": "0.39.2",
     "addr_prefix": "cro",

src/store/chains/iris.json

@@ -1,5 +1,5 @@
 {
-    "chain_name": "iris",
+    "chain_name": "iris-network",
     "api": "https://iris.api.ping.pub",
     "sdk_version": "0.42.4",
     "addr_prefix": "iaa",

src/store/chains/terra.json

@@ -1,5 +1,5 @@
 {
-    "chain_name": "terra",
+    "chain_name": "terra-luna",
     "api": "https://fcd.terra.dev",
     "sdk_version": "0.39.2",
     "addr_prefix": "terra",

src/views/Summary.vue

@@ -10,7 +10,20 @@
     </b-alert>
     <b-row>
       <b-col>
-        <summary-parmeters-component :data="chain" />
+        <summary-parmeters-component
+          :data="chain"
+        />
+      </b-col>
+    </b-row>
+    <b-row v-if="marketChartData">
+      <b-col>
+        <b-card style="min-height:60px;">
+          <summary-price-chart
+            :chart-data="marketChartData"
+            :height="60"
+            :min-height="60"
+          />
+        </b-card>
       </b-col>
     </b-row>
     <b-row>
@@ -47,26 +60,32 @@
 </template>
 
 <script>
-import { BRow, BCol, BAlert } from 'bootstrap-vue'
 import {
-  formatNumber, formatTokenAmount, isToken, percent, timeIn, toDay, toDuration, tokenFormatter,
+  BRow, BCol, BAlert, BCard,
+} from 'bootstrap-vue'
+import {
+  formatNumber, formatTokenAmount, getUserCurrency, isToken, percent, timeIn, toDay, toDuration, tokenFormatter,
 } from '@/libs/data'
 
 import SummaryParmetersComponent from './SummaryParmetersComponent.vue'
 import SummaryAssetsComponent from './SummaryAssetsComponent.vue'
+import SummaryPriceChart from './SummaryPriceChart.vue'
 
 export default {
   components: {
     BRow,
     BCol,
     BAlert,
+    BCard,
     SummaryParmetersComponent,
     SummaryAssetsComponent,
+    SummaryPriceChart,
   },
   data() {
     return {
       syncing: false,
       latestTime: '',
+      marketData: null,
       chain: {
         title: '',
         class: 'border-primary',
@@ -97,78 +116,30 @@ export default {
         title: 'Governance Parameters',
         items: [],
       },
-      aaaa: {
+    }
-        options: {
+  },
-          elements: {
+  computed: {
-            rectangle: {
+    marketChartData() {
-              borderWidth: 2,
+      if (this.marketData && this.marketData.prices) {
-              borderSkipped: 'top',
+        const labels = this.marketData.prices.map(x => x[0])
-            },
+        const data = this.marketData.prices.map(x => x[1])
-          },
+        return {
-          tooltips: {
+          labels,
-            // Updated default tooltip UI
-            shadowOffsetX: 1,
-            shadowOffsetY: 1,
-            shadowBlur: 8,
-            // shadowColor: chartColors.tooltipShadow,
-            // backgroundColor: this.$themeColors.light,
-            // titleFontColor: this.$themeColors.dark,
-            // bodyFontColor: this.$themeColors.dark,
-          },
-          responsive: true,
-          maintainAspectRatio: false,
-          responsiveAnimationDuration: 500,
-          legend: {
-            display: false,
-          },
-          scales: {
-            xAxes: [
-              {
-                display: true,
-                gridLines: {
-                  // zeroLineColor: chartColors.grid_line_color,
-                  borderColor: 'transparent',
-                  // color: chartColors.grid_line_color,
-                  drawTicks: false,
-                },
-                scaleLabel: {
-                  display: true,
-                },
-                ticks: {
-                  min: 0,
-                  // fontColor: chartColors.labelColor,
-                },
-              },
-            ],
-            yAxes: [
-              {
-                display: true,
-                gridLines: {
-                  display: false,
-                },
-                scaleLabel: {
-                  display: true,
-                },
-                ticks: {
-                  // fontColor: chartColors.labelColor,
-                },
-              },
-            ],
-          },
-        },
-        data: {
-          labels: ['MON', 'TUE', 'WED ', 'THU', 'FRI', 'SAT', 'SUN'],
           datasets: [
             {
-              data: [710, 350, 470, 580, 230, 460, 120],
+              label: `Price (${getUserCurrency().toUpperCase()})`,
-              // backgroundColor: this.$themeColors.info,
+              data,
-              borderColor: 'transparent',
+              backgroundColor: 'rgba(54, 162, 235, 0.2)',
+              borderColor: 'rgba(54, 162, 235, 1)',
+              borderWidth: 1,
+              pointStyle: 'dash',
               barThickness: 15,
             },
           ],
-        },
+        }
-      },
+      }
-    }
+      return null
+    },
   },
   created() {
     this.$http.getLatestBlock().then(res => {
@@ -184,6 +155,10 @@ export default {
       this.latestTime = toDay(res.block.header.time, 'long')
     })
 
+    this.$http.getMarketChart().then(res => {
+      this.marketData = res
+    })
+
     this.$http.getMintingInflation().then(res => {
       const chainIndex = this.chain.items.findIndex(x => x.subtitle === 'inflation')
       this.$set(this.chain.items[chainIndex], 'title', `${percent(res)}%`)

src/views/SummaryPriceChart.vue

@@ -0,0 +1,57 @@
+<script>
+import { Line, mixins } from 'vue-chartjs'
+
+export default {
+  extends: Line,
+  mixins: [mixins.reactiveProp],
+  props: {
+    // options: {
+    //   type: Object,
+    //   default: null,
+    // },
+  },
+  data() {
+    return {
+      options: {
+        scales: {
+          xAxes: [{
+            type: 'time',
+            time: {
+              unit: 'day',
+            },
+            ticks: {
+              autoskipping: true,
+              display: true,
+              maxTicksLimit: 15,
+            //   callback(a, b) {
+            //     console.log(a, b)
+            //   },
+            },
+          }],
+          yAxes: [{
+            ticks: {
+              autoskipping: true,
+              display: true,
+              maxTicksLimit: 8,
+            //   callback(a, b) {
+            //     console.log(a, b)
+            //   },
+            },
+          }],
+        },
+        plugins: {
+          legend: {
+            display: false,
+            labels: {
+              color: 'rgb(255, 99, 132)',
+            },
+          },
+        },
+      },
+    }
+  },
+  mounted() {
+    this.renderChart(this.chartData, this.options)
+  },
+}
+</script>