Loading indicator. Fix blockheight calculation

client/public/global.css

@@ -48,6 +48,8 @@
 
   --twitter-blue: #1da1f2;
   --monospace-purple: darkviolet;
+
+  --loading-color: var(--palette-x);
 }
 
 .light-mode {

client/src/components/SearchBar.svelte

@@ -9,7 +9,7 @@ import AddressIcon from '../assets/icon/cil-wallet.svg'
 import TxIcon from '../assets/icon/cil-arrow-circle-right.svg'
 import { fly } from 'svelte/transition'
 import { matchQuery, searchTx, searchBlock } from '../utils/search.js'
-import { selectedTx, detailTx, overlay } from '../stores.js'
+import { selectedTx, detailTx, overlay, loading } from '../stores.js'
 
 let query
 let matchedQuery
@@ -26,19 +26,21 @@ async function searchSubmit (e) {
   e.preventDefault()
 
   if (matchedQuery) {
+    $loading++
     switch(matchedQuery.query) {
       case 'txid':
-        searchTx(matchedQuery.txid)
+        await searchTx(matchedQuery.txid)
         break;
 
       case 'input':
-        searchTx(matchedQuery.txid, matchedQuery.input, null)
+        await searchTx(matchedQuery.txid, matchedQuery.input, null)
         break;
 
       case 'output':
-        searchTx(matchedQuery.txid, null, matchedQuery.output)
+        await searchTx(matchedQuery.txid, null, matchedQuery.output)
         break;
     }
+    $loading--
   }
 
   return false

client/src/components/TransactionOverlay.svelte

@@ -3,7 +3,7 @@ import Overlay from '../components/Overlay.svelte'
 import Icon from './Icon.svelte'
 import BookmarkIcon from '../assets/icon/cil-bookmark.svg'
 import { longBtcFormat, numberFormat, feeRateFormat, dateFormat } from '../utils/format.js'
-import { exchangeRates, settings, sidebarToggle, newHighlightQuery, highlightingFull, detailTx, pageWidth, latestBlockHeight, highlightInOut } from '../stores.js'
+import { exchangeRates, settings, sidebarToggle, newHighlightQuery, highlightingFull, detailTx, pageWidth, latestBlockHeight, highlightInOut, loading } from '../stores.js'
 import { formatCurrency } from '../utils/fx.js'
 import { hlToHex, mixColor, teal, purple } from '../utils/color.js'
 import { SPKToAddress } from '../utils/encodings.js'
@@ -249,11 +249,17 @@ function getMiterOffset (weight, dy, dx) {
   } else return 0
 }
 
-function clickItem (item) {
+async function clickItem (item) {
   if (item.rest) {
     truncate = false
   } else if (item.prev_txid && item.prev_vout != null) {
-    searchTx(item.prev_txid, null, item.prev_vout)
+    $loading++
+    await searchTx(item.prev_txid, null, item.prev_vout)
+    $loading--
+  } else if (item.spend && item.spend.txid && item.spend.vin) {
+    $loading++
+    await searchTx(item.spend.txid, item.spend.vin)
+    $loading--
   }
 }
 </script>
@@ -265,8 +271,14 @@ function clickItem (item) {
     text-align: left;
 
     h2 {
+      margin: 0 0 1em;
       font-size: 1.2em;
       word-break: break-word;
+
+      .title {
+        font-size: 1.25em;
+        white-space: nowrap;
+      }
     }
 
     .tx-id {
@@ -277,7 +289,7 @@ function clickItem (item) {
 
     .icon-button {
       float: right;
-      font-size: 24px;
+      font-size: 1.1em;
       margin: 0;
       transition: opacity 300ms, color 300ms, background 300ms;
       background: var(--palette-d);
@@ -299,7 +311,7 @@ function clickItem (item) {
       padding: 4px 8px;
       border-radius: 8px;
       float: right;
-      margin: 5px;
+      margin: 0 5px;
       color: white;
       font-weight: bold;
 
@@ -413,7 +425,7 @@ function clickItem (item) {
             &.highlight {
               background: linear-gradient(90deg, var(--bold-a) -100%, transparent 100%);
             }
-            &:hover {
+            &.clickable:hover {
               background: linear-gradient(90deg, var(--palette-e), transparent);
             }
             .address {
@@ -425,10 +437,14 @@ function clickItem (item) {
         &.outputs {
           .entry {
             padding-right: 10px;
+            border-right: solid 1px transparent;
+            &.unspent {
+              border-right: solid 1px var(--grey);
+            }
             &.highlight {
               background: linear-gradient(90deg, transparent 0%, var(--bold-a) 200%);
             }
-            &:hover {
+            &.clickable:hover {
               background: linear-gradient(-90deg, var(--palette-e), transparent);
             }
           }
@@ -486,7 +502,7 @@ function clickItem (item) {
           unconfirmed
         </span>
       {/if}
-      <h2>{#if $detailTx.isCoinbase }Coinbase{:else}Transaction{/if} <span class="tx-id">{ $detailTx.id }</span></h2>
+      <h2><span class="title">{#if $detailTx.isCoinbase }Coinbase{:else}Transaction{/if}</span> <span class="tx-id">{ $detailTx.id }</span></h2>
       {#if $detailTx.block}
         <div class="pane fields">
           <div class="field">
@@ -599,7 +615,7 @@ function clickItem (item) {
         <div class="column outputs">
           <p class="header">{$detailTx.outputs.length} output{$detailTx.outputs.length > 1 ? 's' : ''} {#if $detailTx.fee != null}+ fee{/if}</p>
           {#each outputs as output}
-            <div class="entry" class:clickable={output.rest} class:highlight={highlight.out != null && highlight.out === output.index} on:click={() => clickItem(output)}>
+            <div class="entry" class:clickable={output.rest || output.spend} class:unspent={!output.spend && !output.fee} class:highlight={highlight.out != null && highlight.out === output.index} on:click={() => clickItem(output)}>
               <p class="address" title={output.title || output.address}><span class="truncatable">{output.address.slice(0,-6)}</span><span class="suffix">{output.address.slice(-6)}</span></p>
               <p class="amount">{ output.value == null ? '???' : formatBTC(output.value) }</p>
             </div>

client/src/components/TxViz.svelte

@@ -3,7 +3,10 @@
   import TxController from '../controllers/TxController.js'
   import TxRender from './TxRender.svelte'
   import getTxStream from '../controllers/TxStream.js'
-  import { settings, overlay, serverConnected, serverDelay, txCount, mempoolCount, mempoolScreenHeight, frameRate, avgFrameRate, blockVisible, tinyScreen, compactScreen, currentBlock, selectedTx, blockAreaSize, devEvents, devSettings, pageWidth, pageHeight } from '../stores.js'
+  import { settings, overlay, serverConnected, serverDelay, txCount, mempoolCount,
+           mempoolScreenHeight, frameRate, avgFrameRate, blockVisible, tinyScreen,
+           compactScreen, currentBlock, selectedTx, blockAreaSize, devEvents,
+           devSettings, pageWidth, pageHeight, loading } from '../stores.js'
   import BlockInfo from '../components/BlockInfo.svelte'
   import SearchBar from '../components/SearchBar.svelte'
   import TxInfo from '../components/TxInfo.svelte'
@@ -12,10 +15,12 @@
   import AboutOverlay from '../components/AboutOverlay.svelte'
   import DonationOverlay from '../components/DonationOverlay.svelte'
   import SupportersOverlay from '../components/SupportersOverlay.svelte'
+  import LoadingAnimation from '../components/util/LoadingAnimation.svelte'
   import Alerts from '../components/alert/Alerts.svelte'
   import { numberFormat } from '../utils/format.js'
   import { exchangeRates, lastBlockId, haveSupporters, sidebarToggle } from '../stores.js'
   import { formatCurrency } from '../utils/fx.js'
+  import { fade } from 'svelte/transition'
   import config from '../config.js'
 
   let width = window.innerWidth - 20
@@ -426,6 +431,34 @@
     }
   }
 
+  .loading-overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 999;
+    background: rgba(0,0,0,0.5);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .loading-wrapper {
+      width: 100px;
+    }
+
+    .loading-msg {
+      margin: .4em 0 0;
+      font-size: 1em;
+      font-weight: bold;
+      color: white;
+      text-shadow: 0 0 10px black;
+    }
+  }
+
   @media screen and (max-width: 640px) {
     .search-bar-wrapper {
       position: fixed;
@@ -515,6 +548,15 @@
     {/if}
   {/if}
 
+  {#if $loading}
+    <div class="loading-overlay" in:fade={{ delay: 100, duration: 500 }} out:fade={{ duration: 200 }}>
+      <div class="loading-wrapper">
+        <LoadingAnimation />
+        <p class="loading-msg">loading</p>
+      </div>
+    </div>
+  {/if}
+
   {#if config.dev && config.debug && $devSettings.guides }
     <div class="guide-overlay">
       <div class="guide v-half" />

client/src/components/util/LoadingAnimation.svelte

@@ -0,0 +1,164 @@
+<style type="text/scss">
+.wrapper {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: solid 2px var(--palette-x);
+
+  .sizer {
+    width: 100%;
+    padding-bottom: 100%;
+  }
+}
+.bf-loader .inner .mempool {
+	width: 150%;
+	height: 150%;
+	position: absolute;
+	left: -25%;
+	right: -25%;
+	bottom: 0;
+}
+
+.bf-loader .tx {
+	position: absolute;
+	top: -10%;
+	width: 10%;
+	height: 10%;
+	animation-duration: 10s;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite;
+}
+.bf-loader .tx .tx-inner {
+	background: var(--loading-color);
+	width: 80%;
+	height: 80%;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+}
+.bf-loader .tx.large .tx-inner {
+	width: 180%;
+	height: 180%;
+}
+.bf-loader .tx.a { animation-name: txa; animation-delay: -10s; }
+.bf-loader .tx.b { animation-name: txb; animation-delay: -9s; }
+.bf-loader .tx.c { animation-name: txc; animation-delay: -8s; }
+.bf-loader .tx.d { animation-name: txd; animation-delay: -7s; }
+.bf-loader .tx.e { animation-name: txe; animation-delay: -6s; }
+.bf-loader .tx.f { animation-name: txf; animation-delay: -5s; }
+.bf-loader .tx.g { animation-name: txg; animation-delay: -4s; }
+.bf-loader .tx.h { animation-name: txh; animation-delay: -3s; }
+.bf-loader .tx.i { animation-name: txi; animation-delay: -2s; }
+.bf-loader .tx.j { animation-name: txj; animation-delay: -1s; }
+@keyframes txa {
+  0% { transform: translateY(0); }
+  20% { transform: translateY(900%); }
+  43% { transform: translateY(900%); }
+  48% { transform: translateY(1000%); }
+  63% { transform: translateY(1000%); }
+  68% { transform: translateY(1100%); }
+  100% { transform: translateY(1100%); }
+}
+@keyframes txb {
+  0% { transform: translateY(0); }
+  20% { transform: translateY(900%); }
+  33% { transform: translateY(900%); }
+  38% { transform: translateY(1000%); }
+  53% { transform: translateY(1000%); }
+  58% { transform: translateY(1100%); }
+  100% { transform: translateY(1100%); }
+}
+@keyframes txc {
+  0% { transform: translateY(0); }
+  20% { transform: translateY(900%); }
+  23% { transform: translateY(900%); }
+  28% { transform: translateY(1000%); }
+  43% { transform: translateY(1000%); }
+  48% { transform: translateY(1100%); }
+  100% { transform: translateY(1100%); }
+}
+@keyframes txd {
+  0% { transform: translateY(0); }
+  20% { transform: translateY(1000%); }
+  33% { transform: translateY(1000%); }
+  38% { transform: translateY(1100%); }
+  53% { transform: translateY(1100%); }
+  58% { transform: translateY(1200%); }
+  100% { transform: translateY(1200%); }
+}
+@keyframes txe {
+  0% { transform: translateY(0); }
+  20% { transform: translateY(900%); }
+  23% { transform: translateY(900%); }
+  28% { transform: translateY(1000%); }
+  43% { transform: translateY(1000%); }
+  48% { transform: translateY(1100%); }
+  73% { transform: translateY(1100%); }
+  78% { transform: translateY(1200%); }
+  100% { transform: translateY(1200%); }
+}
+@keyframes txf {
+  0% { transform: translateY(0); }
+  20% { transform: translateY(1000%); }
+  33% { transform: translateY(1000%); }
+  38% { transform: translateY(1100%); }
+  100% { transform: translateY(1100%); }
+}
+@keyframes txg {
+  0% { transform: translateY(0); }
+  20% { transform: translateY(900%); }
+  23% { transform: translateY(900%); }
+  28% { transform: translateY(1000%); }
+  53% { transform: translateY(1000%); }
+  58% { transform: translateY(1100%); }
+  83% { transform: translateY(1100%); }
+  88% { transform: translateY(1200%); }
+  100% { transform: translateY(1200%); }
+}
+@keyframes txh {
+  0% { transform: translateY(0); }
+  20% { transform: translateY(1000%); }
+  43% { transform: translateY(1000%); }
+  48% { transform: translateY(1100%); }
+  100% { transform: translateY(1100%); }
+}
+@keyframes txi {
+  0% { transform: translateY(0); }
+  20% { transform: translateY(900%); }
+  33% { transform: translateY(900%); }
+  38% { transform: translateY(1000%); }
+  63% { transform: translateY(1000%); }
+  68% { transform: translateY(1100%); }
+  100% { transform: translateY(1100%); }
+}
+@keyframes txj {
+  0% { transform: translateY(0); }
+  20% { transform: translateY(900%); }
+  23% { transform: translateY(900%); }
+  28% { transform: translateY(1000%); }
+  53% { transform: translateY(1000%); }
+  58% { transform: translateY(1100%); }
+  100% { transform: translateY(1100%); }
+}
+</style>
+
+<div class="wrapper">
+  <div class="sizer" />
+  <div class="bf-loader">
+    <div class="mempool">
+      <div class="tx small a" style="left: 25%;"><div class="tx-inner"></div></div>
+      <div class="tx small b" style="left: 35%;"><div class="tx-inner"></div></div>
+      <div class="tx small c" style="left: 45%;"><div class="tx-inner"></div></div>
+      <div class="tx large d" style="left: 55%;"><div class="tx-inner"></div></div>
+      <div class="tx large e" style="left: 25%;"><div class="tx-inner"></div></div>
+      <div class="tx small f" style="left: 45%;"><div class="tx-inner"></div></div>
+      <div class="tx large g" style="left: 45%;"><div class="tx-inner"></div></div>
+      <div class="tx small h" style="left: 65%;"><div class="tx-inner"></div></div>
+      <div class="tx small i" style="left: 25%;"><div class="tx-inner"></div></div>
+      <div class="tx small j" style="left: 35%;"><div class="tx-inner"></div></div>
+      <div class="tx small j" style="left: 65%;"><div class="tx-inner"></div></div>
+    </div>
+  </div>
+</div>

client/src/models/BitcoinTx.js

@@ -15,13 +15,15 @@ export default class BitcoinTx {
     // number of bytes encoding the block height
     const height_bytes = parseInt(cbInfo.substring(0,2), 16)
     // extract the specified number of bytes, reverse the endianness (reverse pairs of hex characters), parse as a hex string
-    const height = parseInt(cbInfo.substring(2,2 + (height_bytes * 2)).match(/../g).reverse().join(''),16)
+    const parsed_height = parseInt(cbInfo.substring(2,2 + (height_bytes * 2)).match(/../g).reverse().join(''),16)
     // save remaining bytes as free data
     const sig = cbInfo.substring(2 + (height_bytes * 2))
     const sigAscii = sig.match(/../g).reduce((parsed, hexChar) => {
       return parsed + String.fromCharCode(parseInt(hexChar, 16))
     }, "")
 
+    const height = block.height == null ? parsed_height : block.height
+
     const subsidy = subsidyAt(height)
 
     this.coinbase = {

client/src/stores.js

@@ -167,3 +167,4 @@ export const blocksEnabled = derived([settings], ([$settings]) => {
 
 export const latestBlockHeight = writable(null)
 export const highlightInOut = writable(null)
+export const loading = writable(0)