feat: add tooltips to block details with the value, in currency, of a…

…mount and fees (#581)
ArkEcosystem · Mar 18, 2019 · 832d485 · 832d485
1 parent c3914e8
commit 832d485
Show file tree

Hide file tree

Showing 32 changed files with 2,127 additions and 1,765 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,18 +1,25 @@
 {
   "presets": [
-    ["env", {
+    ["@babel/env", {
       "modules": false,
       "targets": {
         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
       }
-    }],
-    "stage-2"
+    }]
+  ],
+  "plugins": [
+    "@vue/babel-plugin-transform-vue-jsx",
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-syntax-dynamic-import"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"],
   "env": {
     "test": {
-      "presets": ["env", "stage-2"],
-      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
+      "presets": ["@babel/env"],
+      "plugins": [
+        "@vue/babel-plugin-transform-vue-jsx",
+        "@babel/plugin-transform-modules-commonjs",
+        "dynamic-import-node"
+      ]
     }
   }
 }
diff --git a/package.json b/package.json
@@ -46,22 +46,23 @@
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.3.4",
+    "@babel/preset-env": "^7.3.4",
+    "@babel/register": "^7.0.0",
+    "@babel/runtime": "^7.3.4",
+    "@vue/babel-plugin-transform-vue-jsx": "^1.0.0-beta.2",
     "@vue/test-utils": "^1.0.0-beta.24",
     "autoprefixer": "^9.1.1",
-    "babel-core": "^6.26.3",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^8.2.6",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-jest": "^23.4.2",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-dynamic-import-node": "^2.0.0",
+    "babel-jest": "^24.4.0",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-stage-2": "^6.24.1",
-    "babel-register": "^6.26.0",
-    "babel-runtime": "^6.26.0",
     "chai": "^4.1.2",
     "chalk": "^2.4.1",
     "chromedriver": "^2.43.3",
@@ -86,8 +87,7 @@
     "friendly-errors-webpack-plugin": "1.7.0",
     "glob-all": "^3.1.0",
     "html-webpack-plugin": "3.2.0",
-    "inject-loader": "^4.0.1",
-    "jest": "^23.5.0",
+    "jest": "^24.4.0",
     "jest-localstorage-mock": "^2.2.0",
     "jest-serializer-vue": "^2.0.2",
     "mini-css-extract-plugin": "^0.4.1",

diff --git a/src/App.vue b/src/App.vue
@@ -14,11 +14,7 @@
 <script type="text/ecmascript-6">
 import AppHeader from '@/components/header/Main'
 import AppFooter from '@/components/Footer'
-import CryptoCompareService from '@/services/crypto-compare'
-import BlockService from '@/services/block'
-import BlockchainService from '@/services/blockchain'
-import DelegateService from '@/services/delegate'
-import NodeService from '@/services/node'
+import { BlockService, BlockchainService, CryptoCompareService, DelegateService, NodeService } from '@/services'
 import { mapGetters } from 'vuex'
 import moment from 'moment'
 

diff --git a/src/components/block/Details.vue b/src/components/block/Details.vue
@@ -18,22 +18,58 @@
 
       <div class="list-row-border-b">
         <div>{{ $t("Reward") }}</div>
-        <div v-if="block.forged">{{ readableCrypto(block.forged.reward) }}</div>
+        <div
+          v-if="block.forged"
+          v-tooltip="{
+            trigger: 'hover click',
+            content: price ? readableCurrency(block.forged.reward, price) : '',
+            placement: 'left'
+          }"
+        >
+          {{ readableCrypto(block.forged.reward) }}
+        </div>
       </div>
 
       <div class="list-row-border-b">
         <div>{{ $t("Total fee") }}</div>
-        <div v-if="block.forged">{{ readableCrypto(block.forged.fee) }}</div>
+        <div
+          v-if="block.forged"
+          v-tooltip="{
+            trigger: 'hover click',
+            content: price ? readableCurrency(block.forged.fee, price) : '',
+            placement: 'left'
+          }"
+        >
+          {{ readableCrypto(block.forged.fee) }}
+        </div>
       </div>
 
       <div class="list-row-border-b">
         <div>{{ $t("Total forged") }}</div>
-        <div v-if="block.forged">{{ readableCrypto(block.forged.total) }}</div>
+        <div
+          v-if="block.forged"
+          v-tooltip="{
+            trigger: 'hover click',
+            content: price ? readableCurrency(block.forged.total, price) : '',
+            placement: 'left'
+          }"
+        >
+          {{ readableCrypto(block.forged.total) }}
+        </div>
       </div>
 
       <div class="list-row-border-b">
         <div>{{ $t("Total amount") }}</div>
-        <div v-if="block.forged">{{ readableCrypto(block.forged.amount) }}</div>
+        <div
+          v-if="block.forged"
+          v-tooltip="{
+            trigger: 'hover click',
+            content: price ? readableCurrency(block.forged.amount, price) : '',
+            placement: 'left'
+          }"
+        >
+          {{ readableCrypto(block.forged.amount) }}
+        </div>
       </div>
 
       <div class="list-row-border-b">
@@ -52,9 +88,14 @@
 </template>
 
 <script type="text/ecmascript-6">
+import CryptoCompareService from '@/services/crypto-compare'
 import { mapGetters } from 'vuex'
 
 export default {
+  data: () => ({
+    price: 0
+  }),
+
   props: {
     block: {
       type: Object,
@@ -63,11 +104,32 @@ export default {
   },
 
   computed: {
+    ...mapGetters('currency', { currencySymbol: 'symbol' }),
     ...mapGetters('network', ['height']),
 
     confirmations() {
       return this.height - this.block.height
     }
+  },
+
+  watch: {
+    block() {
+      this.updatePrice()
+    },
+
+    currencySymbol() {
+      this.updatePrice()
+    }
+  },
+
+  methods: {
+    async updatePrice() {
+      if (!this.block.id) {
+        return
+      }
+
+      this.price = await CryptoCompareService.dailyAverage(this.block.timestamp.unix)
+    }
   }
 }
 </script>
diff --git a/src/components/block/Identity.vue b/src/components/block/Identity.vue
@@ -16,7 +16,7 @@
       </div>
     </div>
     <div class="flex w-full md:block md:w-auto justify-between">
-      <button @click="prevHandler" :disabled="block.height == 1" class="block-pager-button mr-5">
+      <button @click="prevHandler" :disabled="isFirstBlock" class="block-pager-button mr-5">
         <svg
          class="inline"
          xmlns="http://www.w3.org/2000/svg"
@@ -28,7 +28,7 @@
         <span class="ml-2 hidden md:block inline-button">{{ $t("Previous block") }}</span>
         <span class="ml-2 md:hidden">{{ $t("Previous") }}</span>
       </button>
-      <button @click="nextHandler" :disabled="block.confirmations == 1" class="block-pager-button">
+      <button @click="nextHandler" :disabled="isLastBlock" class="block-pager-button">
         <span class="mr-2 hidden md:block inline-button">{{ $t("Next block") }}</span>
         <span class="mr-2 md:hidden">{{ $t("Next") }}</span>
         <svg
@@ -45,21 +45,37 @@
 </template>
 
 <script type="text/ecmascript-6">
+import { mapGetters } from 'vuex'
+
 export default {
   props: {
     block: {
       type: Object,
       required: true
     },
+
     prevHandler: {
       type: Function,
       required: true
     },
+
     nextHandler: {
       type: Function,
       required: true
     }
   },
+
+  computed: {
+    ...mapGetters('network', ['height']),
+
+    isFirstBlock() {
+      return this.block.height === 1
+    },
+
+    isLastBlock() {
+      return this.height === this.block.height
+    }
+  }
 }
 </script>
 

diff --git a/src/components/header/menu/Desktop.vue b/src/components/header/menu/Desktop.vue
@@ -13,9 +13,33 @@
       </svg>
     </button>
 
-    <router-link @click.native="closeMenu" :to="{ name: 'home' }" tag="button" class="menu-button">{{ $t("Home") }}</router-link>
-    <router-link @click.native="closeMenu" :to="{ name: 'top-wallets', params: { page: 1 } }" tag="button" class="menu-button">{{ $t("Top Wallets") }}</router-link>
-    <router-link @click.native="closeMenu" :to="{ name: 'delegate-monitor' }" tag="button" class="menu-button">{{ $t("Delegate Monitor") }}</router-link>
+    <router-link
+      @click.native="closeMenu"
+      :to="{ name: 'home' }"
+      tag="button"
+      class="menu-button"
+    >
+      {{ $t("Home") }}
+    </router-link>
+
+    <router-link
+      @click.native="closeMenu"
+      :to="{ name: 'top-wallets', params: { page: 1 } }"
+      tag="button"
+      class="menu-button"
+    >
+      {{ $t("Top Wallets") }}
+    </router-link>
+
+    <router-link
+      @click.native="closeMenu"
+      :to="{ name: 'delegate-monitor' }"
+      tag="button"
+      class="menu-button"
+    >
+      {{ $t("Delegate Monitor") }}
+    </router-link>
+
     <!-- <router-link :to="{ name: 'statistics' }" tag="button" class="menu-button">Statistics</router-link> -->
 
     <div class="flex-auto" />

diff --git a/src/components/index.js b/src/components/index.js
@@ -3,31 +3,31 @@ import Vue from 'vue'
 // https://github.com/vuejs/vue-loader/releases/tag/v13.0.0
 
 // Utilities
-Vue.component('clipboard', require('@/components/utils/Clipboard.vue').default)
-Vue.component('currency', require('@/components/utils/Currency.vue').default)
-Vue.component('paginator', require('@/components/utils/Paginator.vue').default)
+Vue.component('clipboard', require('@/components/utils/Clipboard').default)
+Vue.component('currency', require('@/components/utils/Currency').default)
+Vue.component('paginator', require('@/components/utils/Paginator').default)
 Vue.component('qr-code', require('@/components/utils/QrCode').default)
 Vue.component('transaction-amount', require('@/components/utils/TransactionAmount').default)
 
 // Links
-Vue.component('link-block', require('@/components/links/Block.vue').default)
-Vue.component('link-transaction', require('@/components/links/Transaction.vue').default)
-Vue.component('link-wallet', require('@/components/links/Wallet.vue').default)
+Vue.component('link-block', require('@/components/links/Block').default)
+Vue.component('link-transaction', require('@/components/links/Transaction').default)
+Vue.component('link-wallet', require('@/components/links/Wallet').default)
 
 // Tables
-Vue.component('table-blocks', require('@/components/tables/Blocks.vue').default)
-Vue.component('table-blocks-mobile', require('@/components/tables/mobile/Blocks.vue').default)
-Vue.component('table-transactions', require('@/components/tables/Transactions.vue').default)
-Vue.component('table-transactions-detail', require('@/components/tables/TransactionsDetail.vue').default)
-Vue.component('table-transactions-detail-mobile', require('@/components/tables/mobile/TransactionsDetail.vue').default)
-Vue.component('table-transactions-mobile', require('@/components/tables/mobile/Transactions.vue').default)
-Vue.component('table-wallets', require('@/components/tables/Wallets.vue').default)
-Vue.component('table-wallets-mobile', require('@/components/tables/mobile/Wallets.vue').default)
+Vue.component('table-blocks', require('@/components/tables/Blocks').default)
+Vue.component('table-blocks-mobile', require('@/components/tables/mobile/Blocks').default)
+Vue.component('table-transactions', require('@/components/tables/Transactions').default)
+Vue.component('table-transactions-detail', require('@/components/tables/TransactionsDetail').default)
+Vue.component('table-transactions-detail-mobile', require('@/components/tables/mobile/TransactionsDetail').default)
+Vue.component('table-transactions-mobile', require('@/components/tables/mobile/Transactions').default)
+Vue.component('table-wallets', require('@/components/tables/Wallets').default)
+Vue.component('table-wallets-mobile', require('@/components/tables/mobile/Wallets').default)
 
 // Misc.
-Vue.component('ark-meter', require('@/components/ArkMeter.vue').default)
-Vue.component('content-header', require('@/components/ContentHeader.vue').default)
-Vue.component('modal', require('@/components/Modal.vue').default)
+Vue.component('ark-meter', require('@/components/ArkMeter').default)
+Vue.component('content-header', require('@/components/ContentHeader').default)
+Vue.component('modal', require('@/components/Modal').default)
 
 // Loading
-Vue.component('loader', require('@/components/utils/Loader.vue').default)
+Vue.component('loader', require('@/components/utils/Loader').default)
diff --git a/src/components/links/Block.vue b/src/components/links/Block.vue
@@ -4,7 +4,7 @@
       <span v-if="hasDefaultSlot">
         <slot />
       </span>
-      <span v-tooltip="id" v-else>{{ truncate(id) }}</span>
+      <span v-else v-tooltip="id">{{ truncate(id) }}</span>
     </router-link>
     <router-link :to="{ name: 'block', params: { id } }" class="md:hidden">
       <span v-tooltip="id">{{ truncate(id) }}</span>