Merge pull request matter-labs#180 from matter-labs/jazzandrock/chang…

…e_color

fix time display, minor improvements

js/explorer/src/Block.vue

@@ -13,15 +13,20 @@
     <br>
     <b-container>
         <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
-        <h5>Block data</h5>
-        <b-card no-body>
-            <b-table responsive id="my-table" thead-class="hidden_header" :items="props" :busy="isBusy">
-                <template v-slot:cell(value)="data"><span v-html="data.item.value"></span></template>
-            </b-table>
-        </b-card>
-        <br>
-        <h5>Transactions in this block</h5>
-        <TransactionList :transactions="transactions"></TransactionList>
+        <div v-if="loading">
+            <img style="margin-right: 1.5em" src="./assets/loading.gif" width="100em">
+        </div>
+        <div v-else>
+            <h5>Block data</h5>
+            <b-card no-body>
+                <b-table responsive id="my-table" thead-class="hidden_header" :items="props" :busy="isBusy">
+                    <template v-slot:cell(value)="data"><span v-html="data.item.value"></span></template>
+                </b-table>
+            </b-card>
+            <br>
+            <h5>Transactions in this block</h5>
+            <TransactionList :transactions="transactions"></TransactionList>
+        </div>
     </b-container>
 </div>
 </template>
@@ -76,7 +81,6 @@ export default {
     },
     methods: {
         async update() {
-            this.loading = true;
             const block = await client.getBlock(this.blockNumber);
             if (!block) return;
 
@@ -89,7 +93,6 @@ export default {
             this.status          = block.verified_at ? 'Verified' : 'Committed';
 
             let txs = await client.getBlockTransactions(this.blockNumber);
-            console.log('block txs:', txs);
             let tokens = await client.getTokens();
             this.transactions = txs.map((tx, index) => {
                 let type = "";
@@ -152,6 +155,8 @@ export default {
                     ? ''
                     : `_target="_blank" rel="noopener noreferrer"`;
 
+                this.loading = false;
+
                 return {
                     type: `<b>${type}</b>`,
                     from: `<code><a href="${from_explorer_link}" ${from_target}>${from} ${from_onchain_icon}</a></code>`,
@@ -189,9 +194,13 @@ export default {
                 { name: 'New root hash',    value: `<code>${this.new_state_root}</code>`},
                 // { name: 'Transactions',     value: client.TX_PER_BLOCK(), },
                 { name: 'Status',           value: this.status, },
-                { name: 'Commit tx hash',   value: `<code><a target="blanc" href="${this.blockchain_explorer_tx}/${this.commit_tx_hash}">${this.commit_tx_hash} <span class="onchain_icon">onchain</span></a></code>`, },
+                { name: 'Commit tx hash',   value: this.commit_tx_hash
+                    ? `<code><a target="blanc" href="${this.blockchain_explorer_tx}/${this.commit_tx_hash}">${this.commit_tx_hash} <span class="onchain_icon">onchain</span></a></code>`
+                    : `<b>Not yet sent on the chain.</b>` },
                 { name: 'Committed at',     value: formatDate(this.committed_at)},
-                { name: 'Verify tx hash',   value: `<code><a target="blanc" href="${this.blockchain_explorer_tx}/${this.verify_tx_hash}">${this.verify_tx_hash} <span class="onchain_icon">onchain</span></a></code>`, },
+                { name: 'Verify tx hash',   value: this.verify_tx_hash
+                    ? `<code><a target="blanc" href="${this.blockchain_explorer_tx}/${this.verify_tx_hash}">${this.verify_tx_hash} <span class="onchain_icon">onchain</span></a></code>`
+                    : `<b>Not yet sent on the chain.</b>` },
                 { name: 'Verified at',      value: formatDate(this.verified_at)},
             ];
         },
@@ -206,6 +215,7 @@ export default {
             verified_at:    null,
             status:         null,
             transactions:   [  ],
+            loading:        true,
         };
     },
     components,

js/explorer/src/Home.vue

@@ -165,7 +165,7 @@ export default {
                     status:         `<b>${b.verified_at ? 'Verified' : 'Committed'}</b>`,
                     new_state_root: `<code>${b.new_state_root.slice(0, 16) + '...' + b.new_state_root.slice(-16)}</code>`,
                     committed_at:   b.committed_at.toString().split('T')[0] + " " + b.committed_at.toString().split('T')[1].split('.')[0],
-                    verified_at:    b.verified_at ? (b.verified_at.toString().split('T')[0] + " " + b.committed_at.toString().split('T')[1].split('.')[0]) : null,
+                    verified_at:    b.verified_at ? (b.verified_at.toString().split('T')[0] + " " + b.verified_at.toString().split('T')[1].split('.')[0]) : null,
                 }));
                 this.currentPage = this.page;
                 this.ready = true;

js/explorer/src/Transaction.vue

@@ -12,19 +12,23 @@
     </b-navbar>
     <br>
     <b-container>
-        <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
-        <h5 class="mt-3">Transaction data</h5>
-        <img 
+        <div v-if="loading">
+            <h5 class="mt-3">Transaction data</h5>
+            <img 
             src="./assets/loading.gif" 
             width="100" 
-            height="100"
-            v-if="loading">
-        <b-card v-else no-body class="table-margin-hack">
-            <b-table responsive thead-class="hidden_header" :items="props">
-                <template v-slot:cell(value)="data"><span v-html="data.item['value']" /></template>
-            </b-table>
-        </b-card>
-        <br>
+            height="100">
+        </div>
+        <div v-else>
+            <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
+            <h5 class="mt-3">Transaction data</h5>
+            <b-card no-body class="table-margin-hack">
+                <b-table responsive thead-class="hidden_header" :items="props">
+                    <template v-slot:cell(value)="data"><span v-html="data.item['value']" /></template>
+                </b-table>
+            </b-card>
+            <br>
+        </div>
     </b-container>
 </div>
 </template>