views: style invalidated transactions on block page. (#663)

This styles invalidated transactions on the block and transactions pages. Create an invalidated-tx CSS style to gray out and change background color of regular transaction table data, including the coinbase, on a block's page. On the blocks list page, indicate invalidated blocks. When not in lite mode, get the Valid and MainChain status from PG. Also change maxExplorerRows to 400 (from 2000).
decred · Sep 5, 2018 · 8d924bf · 8d924bf
1 parent 40e118b
commit 8d924bf
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 6 deletions.
diff --git a/explorer/explorer.go b/explorer/explorer.go
@@ -31,7 +31,7 @@ import (
 )
 
 const (
-	maxExplorerRows              = 2000
+	maxExplorerRows              = 400
 	minExplorerRows              = 20
 	defaultAddressRows     int64 = 20
 	MaxAddressRows         int64 = 1000

diff --git a/explorer/explorerroutes.go b/explorer/explorerroutes.go
@@ -128,6 +128,17 @@ func (exp *explorerUI) Blocks(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	if !exp.liteMode {
+		for _, s := range summaries {
+			blockStatus, err := exp.explorerSource.BlockStatus(s.Hash)
+			if err != nil && err != sql.ErrNoRows {
+				log.Warnf("Unable to retrieve chain status for block %s: %v", s.Hash, err)
+			}
+			s.Valid = blockStatus.IsValid
+			s.MainChain = blockStatus.IsMainchain
+		}
+	}
+
 	str, err := exp.templates.execTemplateToString("explorer", struct {
 		Data      []*BlockBasic
 		BestBlock int

diff --git a/public/css/main.css b/public/css/main.css
@@ -594,6 +594,13 @@ body.darkBG .progress {
   color: red;
   font-size: 14pt;
 }
+.invalidated-tx {
+  background-color: rgba(151, 125, 163, 0.3);
+  opacity: 0.5;
+}
+.grayed {
+  opacity: 0.5;
+}
 
 /*Typography*/
 .fs14-decimal .dot,

diff --git a/views/block.tmpl b/views/block.tmpl
@@ -6,6 +6,7 @@
     {{ template "navbar" . }}
     <div class="container main" data-controller="main">
     {{with .Data}}
+        {{$Invalidated := and (gt .Confirmations 1) (not .Valid) }}
         <div class="row justify-content-between">
             <div class="col-md-7 col-sm-6">
                 <h4 class="mb-2">
@@ -37,7 +38,17 @@
                 <table class="">
                     {{if .MainChain}}<tr>
                         <td class="text-right pr-2 lh1rem vam nowrap" title="Stakeholder (PoS) approved?">APPROVED</td>
-                        <td class="lh1rem">{{ if gt .Confirmations 1 }}{{.Valid}}{{else}}pending{{end}}</td>
+                        <td class="lh1rem">
+                        {{ if gt .Confirmations 1 }}
+                            {{if $Invalidated}}
+                                <span class="attention" title="Regular (non-stake) transactions invalidated.">{{.Valid}}</span>
+                            {{else}}
+                                <span title="All transactions valid.">{{.Valid}}</span>
+                            {{end}}
+                        {{else}}
+                            pending
+                        {{end}}
+                        </td>
                     </tr>{{end}}
                     <tr>
                         <td class="text-right pr-2 lh1rem vam nowrap xs-w117">BLOCK HASH</td>
@@ -174,7 +185,7 @@
                                 <th class="text-right">Total DCR</th>
                                 <th>Size</th>
                             </thead>
-                            <tbody>
+                            <tbody {{if $Invalidated}}class="invalidated-tx" title="Regular transactions invalidated."{{end}}>
                                 <tr>
                                     <td class="break-word">
                                     {{if $.Data.Nonce}}
@@ -353,7 +364,7 @@
                             <th class="text-right">Fee</th>
                             <th>Size</th>
                         </thead>
-                        <tbody>
+                        <tbody {{if $Invalidated}}class="invalidated-tx" title="Regular transactions invalidated."{{end}}>
                             {{range .Tx}}
                             {{if eq .Coinbase false}}
                             <tr>

diff --git a/views/explorer.tmpl b/views/explorer.tmpl
@@ -52,8 +52,8 @@
                     <tbody>
                     {{range .Data}}
                         <tr id="{{ .Height }}">
-                            <td><a href="/block/{{.Height}}" class="fs16 height">{{ .Height }}</a></td>
-                            <td>{{.Transactions}}</td>
+                            <td><a href="/block/{{.Height}}" class="fs16 height">{{if not .Valid}}<span class="attention">&#9888;</span>{{end}}{{ .Height }}</a></td>
+                            <td {{if not .Valid}}class="grayed" title="Regular transactions invalidated by stakeholders."{{end}}>{{.Transactions}}</td>
                             <td>{{.Voters}}</td>
                             <td>{{.FreshStake}}</td>
                             <td>{{.Revocations}}</td>