blocks

src/components/Blockchain.vue

@@ -44,7 +44,11 @@
                 </small>
               </div>
             </div>
-            <small class="text-muted align-self-center" v-if="block.timestamp">
+            <small
+              class="text-muted align-self-center"
+              v-if="block.timestamp"
+              :title="blockReadableTime(block.timestamp)"
+            >
               {{
               blockTime(block.timestamp)
               }}
@@ -72,60 +76,6 @@ export default {
       syncPercent: state => state.bitcoin.percent,
       blocks: state => state.bitcoin.blocks
     })
-    // blocks() {
-    //   const currentBlock = this.$store.state.bitcoin.currentBlock;
-    //   if (currentBlock) {
-    //     return [
-    //       {
-    //         number: currentBlock, //block number
-    //         txs: 1802, //num of txs in block
-    //         timestamp: "few secs ago" //block's mining timestamp
-    //       },
-    //       {
-    //         number: currentBlock - 1,
-    //         txs: 1934,
-    //         timestamp: "12 mins ago"
-    //       },
-    //       {
-    //         number: currentBlock - 2,
-    //         txs: 1783,
-    //         timestamp: "19 mins ago"
-    //       },
-    //       {
-    //         number: currentBlock - 3,
-    //         txs: 1723,
-    //         timestamp: "27 mins ago"
-    //       },
-    //       {
-    //         number: currentBlock - 4,
-    //         txs: 1982,
-    //         timestamp: "34 mins ago"
-    //       },
-    //       {
-    //         number: currentBlock - 5,
-    //         txs: 1934,
-    //         timestamp: "47 mins ago"
-    //       },
-    //       {
-    //         number: currentBlock - 6,
-    //         txs: 1783,
-    //         timestamp: "58 mins ago"
-    //       },
-    //       {
-    //         number: currentBlock - 7,
-    //         txs: 1723,
-    //         timestamp: "1 hr ago"
-    //       },
-    //       {
-    //         number: currentBlock - 8,
-    //         txs: 1982,
-    //         timestamp: "1 hr ago"
-    //       }
-    //     ];
-    //   } else {
-    //     return [];
-    //   }
-    // }
   },
   methods: {
     async fetchBlocks() {
@@ -155,6 +105,9 @@ export default {
       } else {
         return "now";
       }
+    },
+    blockReadableTime(timestamp) {
+      return moment(timestamp * 1000).format("MMMM D, h:mm:ss a");
     }
   },
   created() {

src/views/Bitcoin.vue

@@ -67,7 +67,11 @@
         <bitcoin-wallet></bitcoin-wallet>
       </b-col>
       <b-col col cols="12" md="6" xl="4">
-        <card-widget header="Blockchain" :hasMenu="true">
+        <card-widget
+          header="Blockchain"
+          :hasMenu="true"
+          :loading="syncPercent !== 100 || blocks.length === 0"
+        >
           <template v-slot:menu>
             <b-dropdown-item variant="danger" href="#" disabled>Resync Blockchain</b-dropdown-item>
           </template>
@@ -190,6 +194,7 @@ export default {
   computed: {
     ...mapState({
       syncPercent: state => state.bitcoin.percent,
+      blocks: state => state.bitcoin.blocks,
       version: state => state.bitcoin.version,
       currentBlock: state => state.bitcoin.currentBlock,
       blockHeight: state => state.bitcoin.blockHeight

src/views/Dashboard.vue

@@ -27,7 +27,7 @@
           }"
           sub-title="Synchronized"
           icon="icon-app-bitcoin.svg"
-          :loading="syncPercent !== 100"
+          :loading="syncPercent !== 100 || blocks.length === 0"
         >
           <div class>
             <!-- <div class="d-flex w-100 justify-content-between px-3 px-sm-4">
@@ -95,7 +95,8 @@ export default {
   },
   computed: {
     ...mapState({
-      syncPercent: state => state.bitcoin.percent
+      syncPercent: state => state.bitcoin.percent,
+      blocks: state => state.bitcoin.blocks
     }),
     isDarkMode() {
       return this.$store.getters.isDarkMode;