Basic tx search, height/conf data, input links

client/src/components/SearchBar.svelte

@@ -0,0 +1,151 @@
+<script>
+import { tick } from 'svelte'
+import { fade } from 'svelte/transition'
+import { flip } from 'svelte/animate'
+import Icon from './Icon.svelte'
+import SearchIcon from '../assets/icon/cil-search.svg'
+import CrossIcon from '../assets/icon/cil-x.svg'
+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'
+
+let query
+let matchedQuery
+
+$: {
+  if (query) {
+    matchedQuery = matchQuery(query)
+  } else {
+    matchedQuery = null
+  }
+}
+
+async function searchSubmit (e) {
+  e.preventDefault()
+
+  if (matchedQuery) {
+    switch(matchedQuery.query) {
+      case 'txid':
+        searchTx(matchedQuery.txid)
+        break;
+
+      case 'input':
+        searchTx(matchedQuery.txid, matchedQuery.input, null)
+        break;
+
+      case 'output':
+        searchTx(matchedQuery.txid, null, matchedQuery.output)
+        break;
+    }
+  }
+
+  return false
+}
+
+</script>
+
+<style type="text/scss">
+.input-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  --input-color: var(--palette-x);
+  width: 100%;
+  max-width: 600px;
+  margin: 0 1em;
+
+  .input-icon {
+    font-size: 24px;
+    margin: 0 10px;
+    transition: opacity 300ms, color 300ms, background 300ms;
+    color: var(--input-color);
+
+    &.search {
+      color: var(--bold-a);
+    }
+    &.icon-button {
+      cursor: pointer;
+    }
+
+    &.hidden {
+      opacity: 0;
+    }
+
+    &.icon-button {
+      background: var(--palette-d);
+      padding: 6px;
+      border-radius: 5px;
+      &:hover {
+        background: var(--palette-e);
+      }
+
+      &.disabled {
+        color: var(--palette-e);
+        background: none;
+      }
+    }
+  }
+
+  .search-form {
+    position: relative;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    .search-submit {
+      display: none;
+    }
+
+    .underline {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 2px;
+      background: var(--palette-x);
+      opacity: 0.5;
+
+      &.active {
+        width: 0%;
+        opacity: 1;
+        transition: width 300ms;
+      }
+    }
+  }
+
+  &:hover, &:active, &:focus {
+    .underline.active {
+      width: 100%;
+    }
+  }
+
+  .search-input {
+    background: none;
+    border: none;
+    outline: none;
+    margin: 0;
+    color: var(--input-color);
+    width: 100%;
+
+    &.disabled {
+      color: var(--palette-e);
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+}
+</style>
+
+<div class="input-wrapper" transition:fly={{ y: -25 }}>
+  <form class="search-form" action="" on:submit={searchSubmit}>
+    <input class="search-input" type="text" bind:value={query} placeholder="Enter a txid">
+    <div class="underline" />
+    <div class="underline active" />
+    <button type="submit" class="search-submit" />
+  </form>
+  <div class="input-icon search icon-button" on:click={searchSubmit} title="Search">
+    <Icon icon={SearchIcon}/>
+  </div>
+</div>

client/src/components/Settings.svelte

@@ -52,6 +52,10 @@ let settingConfig = {
     falseLabel: 'age',
     trueLabel: 'fee rate',
     valueType: 'bool'
+  },
+  showSearch: {
+    label: 'Search Bar',
+    valueType: 'bool'
   }
 }
 $: {

client/src/components/Sidebar.svelte

@@ -15,7 +15,7 @@ import atIcon from '../assets/icon/cil-at.svg'
 import gridIcon from '../assets/icon/grid-icon.svg'
 import peopleIcon from '../assets/icon/cil-people.svg'
 import giftIcon from '../assets/icon/cil-gift.svg'
-import searchIcon from '../assets/icon/cil-search.svg'
+import bookmarkIcon from '../assets/icon/cil-bookmark.svg'
 import MempoolLegend from '../components/MempoolLegend.svelte'
 import ContactTab from '../components/ContactTab.svelte'
 import SearchTab from '../components/SearchTab.svelte'
@@ -122,7 +122,7 @@ function showBlock () {
   </SidebarTab>
   <SidebarTab open={$sidebarToggle === 'search'} on:click={() => {settings('search')}} tooltip="Search & Highlight" bind:this={searchTabComponent}>
     <span slot="tab" title="Search & Highlight">
-      <Icon icon={searchIcon} color="var(--bold-a)" />
+      <Icon icon={bookmarkIcon} color="var(--bold-a)" />
     </span>
     <div slot="content">
       <SearchTab tab={searchTabComponent} />

client/src/components/TransactionOverlay.svelte

@@ -2,11 +2,12 @@
 import Overlay from '../components/Overlay.svelte'
 import Icon from './Icon.svelte'
 import BookmarkIcon from '../assets/icon/cil-bookmark.svg'
-import { longBtcFormat, numberFormat, feeRateFormat } from '../utils/format.js'
+import { longBtcFormat, numberFormat, feeRateFormat, dateFormat } from '../utils/format.js'
-import { exchangeRates, settings, sidebarToggle, newHighlightQuery, highlightingFull, detailTx, pageWidth } from '../stores.js'
+import { exchangeRates, settings, sidebarToggle, newHighlightQuery, highlightingFull, detailTx, pageWidth, latestBlockHeight, highlightInOut } from '../stores.js'
 import { formatCurrency } from '../utils/fx.js'
 import { hlToHex, mixColor, teal, purple } from '../utils/color.js'
 import { SPKToAddress } from '../utils/encodings.js'
+import { searchTx } from '../utils/search.js'
 
 function onClose () {
   $detailTx = null
@@ -16,7 +17,7 @@ function formatBTC (sats) {
   return `₿ ${(sats/100000000).toFixed(8)}`
 }
 
-function highlight (query) {
+function addToWatchlist (query) {
   if (!$highlightingFull && query) {
     $newHighlightQuery = query
     $sidebarToggle = 'search'
@@ -43,17 +44,26 @@ $: {
   }
 }
 
+let confirmations = 0
+$: {
+  if ($detailTx && $detailTx.block && $detailTx.block.height && $latestBlockHeight != null) {
+    confirmations =  (1 + $latestBlockHeight - $detailTx.block.height)
+  }
+}
+
 const midColor = hlToHex(mixColor(teal, purple, 1, 3, 2))
 let feeColor
 $: {
   if ($detailTx && $detailTx.feerate != null) {
     feeColor = hlToHex(mixColor(teal, purple, 1, Math.log2(64), Math.log2($detailTx.feerate)))
+  } else {
+    feeColor = null
   }
 }
 
 function expandAddresses(items, truncate) {
   let truncated = truncate ? items.slice(0,100) : items
-  const expanded = truncated.map(item => {
+  const expanded = truncated.map((item, index) => {
     let address = 'unknown'
     let title = null
     if (item.script_pub_key) {
@@ -68,6 +78,7 @@ function expandAddresses(items, truncate) {
       ...item,
       address,
       title,
+      index,
       opreturn: (address === 'OP_RETURN')
     }
   })
@@ -110,6 +121,17 @@ $: {
   } else outputs = []
 }
 
+let highlight = {}
+$: {
+  if ($highlightInOut && $detailTx && $highlightInOut.txid === $detailTx.id) {
+    highlight = {}
+    if ($highlightInOut.input != null) highlight.in = $highlightInOut.input
+    if ($highlightInOut.output != null) highlight.out = $highlightInOut.output
+  } else {
+    highlight = {}
+  }
+}
+
 let sankeyLines
 let sankeyHeight
 $: {
@@ -230,6 +252,8 @@ function getMiterOffset (weight, dy, dx) {
 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)
   }
 }
 </script>
@@ -270,6 +294,20 @@ function clickItem (item) {
       }
     }
 
+    .confirmation-badge {
+      background: var(--light-good);
+      padding: 4px 8px;
+      border-radius: 8px;
+      float: right;
+      margin: 5px;
+      color: white;
+      font-weight: bold;
+
+      &.unconfirmed {
+        background: var(--light-ok);
+      }
+    }
+
     .pane {
       background: var(--palette-b);
       padding: 16px;
@@ -293,7 +331,7 @@ function clickItem (item) {
       }
     }
 
-    .fee-calc {
+    .fields {
       align-items: center;
       display: flex;
       flex-direction: row;
@@ -372,6 +410,9 @@ function clickItem (item) {
           .entry {
             align-items: flex-start;
             padding-left: 10px;
+            &.highlight {
+              background: linear-gradient(90deg, var(--bold-a) -100%, transparent 100%);
+            }
             &:hover {
               background: linear-gradient(90deg, var(--palette-e), transparent);
             }
@@ -384,6 +425,9 @@ function clickItem (item) {
         &.outputs {
           .entry {
             padding-right: 10px;
+            &.highlight {
+              background: linear-gradient(90deg, transparent 0%, var(--bold-a) 200%);
+            }
             &:hover {
               background: linear-gradient(-90deg, var(--palette-e), transparent);
             }
@@ -403,7 +447,7 @@ function clickItem (item) {
     }
 
     @media (max-width: 679px) {
-      .fee-calc {
+      .fields {
         flex-direction: column;
       }
     }
@@ -430,12 +474,34 @@ function clickItem (item) {
 <Overlay name="tx" on:close={onClose}>
   {#if $detailTx}
     <section class="tx-detail">
-      <div class="icon-button" class:disabled={$highlightingFull} on:click={() => highlight($detailTx.id)} title="Add transaction to watchlist">
+      <div class="icon-button" class:disabled={$highlightingFull} on:click={() => addToWatchlist($detailTx.id)} title="Add transaction to watchlist">
         <Icon icon={BookmarkIcon}/>
       </div>
-      {#if $detailTx.isCoinbase }
+      {#if $detailTx.block && $latestBlockHeight != null}
-        <h2>Coinbase <span class="tx-id">{ $detailTx.id }</span></h2>
+        <span class="confirmation-badge">
-        <div class="pane fee-calc">
+          {numberFormat.format(confirmations)} confirmation{confirmations == 1 ? '' : 's'}
+        </span>
+      {:else}
+        <span class="confirmation-badge unconfirmed">
+          unconfirmed
+        </span>
+      {/if}
+      <h2>{#if $detailTx.isCoinbase }Coinbase{:else}Transaction{/if} <span class="tx-id">{ $detailTx.id }</span></h2>
+      {#if $detailTx.block}
+        <div class="pane fields">
+          <div class="field">
+            <span class="label">confirmed</span>
+            <span class="value" style="color: {feeColor};">{ dateFormat.format($detailTx.block.time) }</span>
+          </div>
+          <span class="operator"></span>
+          <div class="field">
+            <span class="label">block height</span>
+            <span class="value" style="color: {feeColor};">{ numberFormat.format($detailTx.block.height) }</span>
+          </div>
+        </div>
+      {/if}
+      {#if $detailTx.isCoinbase}
+        <div class="pane fields">
           <div class="field">
             <span class="label">block subsidy</span>
             <span class="value">{ formatBTC($detailTx.coinbase.subsidy) }</span>
@@ -452,16 +518,15 @@ function clickItem (item) {
           </div>
         </div>
 
-        <div class="pane fee-calc">
+        <div class="pane fields">
           <div class="field">
             <span class="label">coinbase</span>
             <span class="value coinbase-sig">{ $detailTx.coinbase.sigAscii }</span>
           </div>
         </div>
       {:else}
-        <h2>Transaction <span class="tx-id">{ $detailTx.id }</span></h2>
         {#if $detailTx.is_inflated && $detailTx.fee != null && $detailTx.feerate != null}
-          <div class="pane fee-calc">
+          <div class="pane fields">
             <div class="field">
               <span class="label">fee</span>
               <span class="value" style="color: {feeColor};">{ numberFormat.format($detailTx.fee) } sats</span>
@@ -478,7 +543,7 @@ function clickItem (item) {
             </div>
           </div>
         {:else}
-        <div class="pane fee-calc">
+        <div class="pane fields">
           <div class="field">
             <span class="label">size</span>
             <span class="value" style="color: {feeColor};">{ numberFormat.format($detailTx.vbytes) } vbytes</span>
@@ -494,12 +559,11 @@ function clickItem (item) {
         </div>
       {/if}
 
-      <h2>Inputs &amp; Outputs</h2>
       <div class="pane flow-diagram" style="grid-template-columns: minmax(0px, 1fr) {svgWidth}px minmax(0px, 1fr);">
         <div class="column inputs">
           <p class="header">{$detailTx.inputs.length} input{$detailTx.inputs.length > 1 ? 's' : ''}</p>
           {#each inputs as input}
-            <div class="entry" class:clickable={input.rest} on:click={() => clickItem(input)}>
+            <div class="entry clickable" on:click={() => clickItem(input)}>
               <p class="address" title={input.address}><span class="truncatable">{input.address.slice(0,-6)}</span><span class="suffix">{input.address.slice(-6)}</span></p>
               <p class="amount">{ input.value == null ? '???' : formatBTC(input.value) }</p>
             </div>
@@ -535,7 +599,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} on:click={() => clickItem(output)}>
+            <div class="entry" class:clickable={output.rest} 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,8 +3,9 @@
   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, currentBlock, selectedTx, blockAreaSize, devEvents, devSettings, pageWidth } from '../stores.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 BlockInfo from '../components/BlockInfo.svelte'
+  import SearchBar from '../components/SearchBar.svelte'
   import TxInfo from '../components/TxInfo.svelte'
   import Sidebar from '../components/Sidebar.svelte'
   import TransactionOverlay from '../components/TransactionOverlay.svelte'
@@ -79,6 +80,7 @@
 
   function resize () {
     $pageWidth = window.innerWidth
+    $pageHeight = window.innerHeight
     if (width !== window.innerWidth - 20 || height !== window.innerHeight - 20) {
       // don't force resize unless the viewport has actually changed
       width = window.innerWidth - 20
@@ -88,12 +90,6 @@
         height
       })
     }
-    const aspectRatio = window.innerWidth / window.innerHeight
-    if ((aspectRatio >= 1 && window.innerWidth < 480) || (aspectRatio <= 1 && window.innerHeight < 480)) {
-      $tinyScreen = true
-    } else {
-      $tinyScreen = false
-    }
   }
 
   function changedMode () {
@@ -284,7 +280,9 @@
     .status {
       text-align: left;
       padding: 1rem;
-      flex-shrink: 0;
+      width: 20em;
+      min-width: 7.5em;
+      flex-shrink: 3;
       box-sizing: border-box;
 
       .row {
@@ -340,7 +338,19 @@
     }
   }
 
+  .search-bar-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 3.5em;
+    flex-grow: 1;
+  }
 
+  .alert-bar-wrapper {
+    width: 20em;
+    flex-shrink: 0;
+  }
 
   .block-area-wrapper {
     height: 100%;
@@ -415,6 +425,15 @@
       margin: auto;
     }
   }
+
+  @media screen and (max-width: 640px) {
+    .search-bar-wrapper {
+      position: fixed;
+      top: 3.5em;
+      left: 0;
+      right: 0;
+    }
+  }
 </style>
 
 <svelte:window on:resize={resize} on:load={resize} on:click={pointerLeave} />
@@ -437,7 +456,7 @@
     </div>
 
     <div class="block-area-wrapper">
-      <div class="spacer"></div>
+      <div class="spacer" style="flex: {$pageWidth <= 640 ? '1.5' : '1'}"></div>
       <div class="block-area-outer" style="width: {$blockAreaSize}px; height: {$blockAreaSize}px">
         <div class="block-area">
           <BlockInfo block={$currentBlock} visible={$blockVisible && !$tinyScreen} on:hideBlock={hideBlock} />
@@ -471,10 +490,18 @@
         {/if}
       </div>
     </div>
-    <div class="spacer" />
+    {#if $settings.showSearch && !$tinyScreen && !$compactScreen }
-    {#if config.messagesEnabled && $settings.showMessages && !$tinyScreen }
+      <div class="search-bar-wrapper">
-      <Alerts />
+        <SearchBar />
+      </div>
     {/if}
+    <div class="alert-bar-wrapper">
+      {#if config.messagesEnabled && $settings.showMessages && !$tinyScreen }
+        <Alerts />
+      {:else}
+        <div class="spacer"></div>
+      {/if}
+    </div>
   </div>
 
   <Sidebar />

client/src/components/alert/Alerts.svelte

@@ -62,7 +62,7 @@ function processAlert (alert) {
   } else return null
 }
 
-let activeAlerts = [{ key: 'null1' }, { key: 'null2' }]
+let alert
 let lastIndex = -1
 
 onMount(() => {
@@ -72,9 +72,8 @@ onMount(() => {
 function startAlerts () {
   if (!rotating && processedAlerts && processedAlerts.length) {
     rotating = true
-    activeAlerts[0] = processedAlerts[0] || { key: 'null1' }
+    alert = processedAlerts[0] || { key: 'null1' }
-    activeAlerts[1] = processedAlerts[1] || { key: 'null2' }
+    lastIndex = 0
-    lastIndex = processedAlerts[1] ? 1 : 0
     if (rotateTimer) clearTimeout(rotateTimer)
     rotateTimer = setTimeout(rotateAlerts, config.alertDuration)
   }
@@ -84,40 +83,21 @@ let rotateTimer
 function rotateAlerts () {
   if (rotateTimer) clearTimeout(rotateTimer)
 
-  if (processedAlerts && processedAlerts.length > 2) {
+  if (processedAlerts && processedAlerts.length > 1) {
     // find the next alert in the queue
-    let currentIndex = -1
+    let currentIndex = (lastIndex + 1) % processedAlerts.length
-    if (activeAlerts[1]) {
-      currentIndex = processedAlerts.findIndex(alert => { alert.key === activeAlerts[1].key})
-    }
-    if (currentIndex < 0) currentIndex = lastIndex
-    currentIndex = (currentIndex + 1) % processedAlerts.length
-    // roll over to the next alert if there's a key clash
-    if (processedAlerts[currentIndex].key === activeAlerts[1].key) {
-      currentIndex = (currentIndex + 1) % processedAlerts.length
-    }
 
     lastIndex = currentIndex
-    let nextAlert = processedAlerts[currentIndex]
+    alert = processedAlerts[currentIndex]
-    if (nextAlert)
-    activeAlerts[0] = activeAlerts[1]
-    activeAlerts[1] = { key: 'temp' }
-    setTimeout(() => {
-      activeAlerts[1] = nextAlert
-      sequences[alert.key]++
-    }, 1000)
-  } else if (processedAlerts) {
-    activeAlerts[0] = processedAlerts[0] || { key: 'null1' }
-    activeAlerts[1] = processedAlerts[1] || { key: 'null2' }
   }
 
   rotateTimer = setTimeout(rotateAlerts, config.alertDuration)
 }
 </script>
 
-<div class="alert-bar" transition:fly={{ y: -100 }}>
+<div class="alert-bar">
-  {#each activeAlerts as alert (alert.key)}
+  {#key alert && alert.key}
-    <div class="alert-wrapper" in:fly|local={{ y: -100 }} out:fly|local={{ x: 400}}>
+    <div class="alert-wrapper" in:fly={{ y: -100, delay: 400 }} out:fly={{ x: 400}}>
       {#if alert && alert.component }
         {#if alert.href}
           <a class="alert link" target="_blank" rel="noopener" href={alert.href}>
@@ -134,15 +114,13 @@ function rotateAlerts () {
         {/if}
       {/if}
     </div>
-  {/each}
+  {/key}
 </div>
 
 <style type="text/scss">
 .alert-bar {
   position: relative;
   width: 100%;
-  flex-grow: 1;
-  flex-shrink: 1;
   height: 3.5em;
 
   .alert-wrapper {
@@ -151,7 +129,6 @@ function rotateAlerts () {
     bottom: 0;
     right: 0;
     width: 20em;
-    transform: translateX(-110%);
     transition: transform 500ms ease-in-out;
 
     .alert {
@@ -183,27 +160,13 @@ function rotateAlerts () {
         color: var(--palette-x);
       }
     }
-
-    &:first-child {
-      transform: translateX(0%);
-    }
-  }
-
-  @media screen and (max-width: 850px) {
-    .alert-wrapper {
-      transform: translateX(0);
-
-      &:first-child {
-        transform: translateX(110%);
-      }
-    }
   }
 
   @media screen and (max-width: 480px) {
     height: 3em;
-
+    font-size: 0.8em;
+    width: 16em;
     .alert-wrapper {
-      font-size: 0.8em;
       width: 16em;
     }
   }

client/src/controllers/TxController.js

@@ -5,7 +5,7 @@ import BitcoinTx from '../models/BitcoinTx.js'
 import BitcoinBlock from '../models/BitcoinBlock.js'
 import TxSprite from '../models/TxSprite.js'
 import { FastVertexArray } from '../utils/memory.js'
-import { overlay, txCount, mempoolCount, mempoolScreenHeight, blockVisible, currentBlock, selectedTx, detailTx, blockAreaSize, highlight, colorMode, blocksEnabled } from '../stores.js'
+import { overlay, txCount, mempoolCount, mempoolScreenHeight, blockVisible, currentBlock, selectedTx, detailTx, blockAreaSize, highlight, colorMode, blocksEnabled, latestBlockHeight } from '../stores.js'
 import config from "../config.js"
 
 export default class TxController {
@@ -15,7 +15,7 @@ export default class TxController {
     this.txs = {}
     this.expiredTxs = {}
     this.poolScene = new TxMondrianPoolScene({ width, height, controller: this, heightStore: mempoolScreenHeight })
-    this.blockAreaSize = Math.min(window.innerWidth * 0.75, window.innerHeight / 2.5)
+    this.blockAreaSize = (width <= 620) ? Math.min(window.innerWidth * 0.7, window.innerHeight / 2.75) : Math.min(window.innerWidth * 0.75, window.innerHeight / 2.5)
     blockAreaSize.set(this.blockAreaSize)
     this.blockScene = null
     this.clearBlockTimeout = null
@@ -66,7 +66,7 @@ export default class TxController {
   }
 
   resize ({ width, height }) {
-    this.blockAreaSize = Math.min(window.innerWidth * 0.75, window.innerHeight / 2.5)
+    this.blockAreaSize = (width <= 620) ? Math.min(window.innerWidth * 0.7, window.innerHeight / 2.75) : Math.min(window.innerWidth * 0.75, window.innerHeight / 2.5)
     blockAreaSize.set(this.blockAreaSize)
     this.redoLayout({ width, height })
   }
@@ -135,6 +135,7 @@ export default class TxController {
     }
 
     const block = new BitcoinBlock(blockData)
+    latestBlockHeight.set(block.height)
     this.knownBlocks[block.id] = true
     if (this.clearBlockTimeout) clearTimeout(this.clearBlockTimeout)
 

client/src/controllers/TxStream.js

@@ -1,5 +1,6 @@
 import { serverConnected, serverDelay, lastBlockId } from '../stores.js'
 import config from '../config.js'
+import api from '../utils/api.js'
 
 let mempoolTimer
 let lastBlockSeen
@@ -8,10 +9,7 @@ lastBlockId.subscribe(val => { lastBlockSeen = val })
 
 class TxStream {
   constructor () {
-    this.apiRoot = `${config.backend ? config.backend : window.location.host }${config.backendPort ? ':' + config.backendPort : ''}`
+    console.log('connecting to ', api.uri)
-    this.websocketUri = `${config.secureSocket ? 'wss://' : 'ws://'}${this.apiRoot}/ws/txs`
-    this.apiUri = `${config.secureSocket ? 'https://' : 'http://'}${this.apiRoot}`
-    console.log('connecting to ', this.websocketUri)
     this.reconnectBackoff = 250
     this.websocket = null
     this.setConnected(false)
@@ -46,7 +44,7 @@ class TxStream {
       if (this.websocket) this.disconnect()
       else {
         try {
-          this.websocket = new WebSocket(this.websocketUri)
+          this.websocket = new WebSocket(api.websocketUri)
           this.websocket.onopen = (evt) => { this.onopen(evt) }
           this.websocket.onclose = (evt) => { this.onclose(evt) }
           this.websocket.onmessage = (evt) => { this.onmessage(evt) }
@@ -125,7 +123,7 @@ class TxStream {
     if (id !== lastBlockSeen) {
       try {
         console.log('downloading block', id)
-        const response = await fetch(`${this.apiUri}/api/block/${id}`, {
+        const response = await fetch(`${api.uri}/api/block/${id}`, {
           method: 'GET'
         })
         let blockData = await response.json()

client/src/models/BitcoinTx.js

@@ -1,5 +1,6 @@
 import TxView from './TxView.js'
 import config from '../config.js'
+import { subsidyAt } from '../utils/bitcoin.js'
 import { mixColor, pink, bluegreen, orange, teal, green, purple  } from '../utils/color.js'
 
 export default class BitcoinTx {
@@ -21,12 +22,14 @@ export default class BitcoinTx {
       return parsed + String.fromCharCode(parseInt(hexChar, 16))
     }, "")
 
+    const subsidy = subsidyAt(height)
+
     this.coinbase = {
       height,
       sig,
       sigAscii,
-      fees: block.fees,
+      fees: this.value - subsidy,
-      subsidy: this.value - (block.fees || 0)
+      subsidy
     }
   }
 
@@ -92,7 +95,7 @@ export default class BitcoinTx {
   setBlock (block) {
     this.block = block
     this.state = this.block ? 'block' : 'pool'
-    if (this.block && this.block.coinbase && this.id == this.block.coinbase.id) {
+    if (this.block && (this.isCoinbase || (this.block.coinbase && this.id == this.block.coinbase.id))) {
       this.isCoinbase = true
       this.setCoinbaseData(this.block)
     }

client/src/models/TxBlockScene.js

@@ -36,7 +36,7 @@ export default class TxBlockScene extends TxMondrianPoolScene {
 
       this.scene.offset = {
         x: (window.innerWidth - this.width) / 2,
-        y: 2 * (window.innerHeight - this.height) / 3
+        y: 2 * (window.innerHeight - this.height) / ((window.innerWidth <= 640) ? 3.5 : 3)
       }
       this.scene.scroll = 0
     } else {

client/src/models/TxPoolScene.js

@@ -36,7 +36,7 @@ export default class TxPoolScene {
   resize ({ width = this.width, height = this.height }) {
     this.width = width
     this.height = height
-    this.heightLimit =  height / 4
+    this.heightLimit =  (width <= 620) ? (height / 4.5) : (height / 4)
     this.unitWidth = Math.floor(Math.max(4, width / 250))
     this.unitPadding =  Math.floor(Math.max(1, width / 1000))
     this.gridSize = this.unitWidth + (this.unitPadding * 2)

client/src/stores.js

@@ -109,6 +109,7 @@ const defaultSettings = {
 	colorByFee: false,
 	fancyGraphics: true,
 	showMessages: true,
+	showSearch: true,
 	noTrack: false,
 	blocksEnabled: true
 }
@@ -149,12 +150,20 @@ export const highlight = writable([])
 export const newHighlightQuery = writable(null)
 export const highlightingFull = writable(false)
 
-const aspectRatio = window.innerWidth / window.innerHeight
-let isTinyScreen = (window.innerWidth < 480 && window.innerHeight < 480)
-export const tinyScreen = writable(isTinyScreen)
-
 export const pageWidth = writable(window.innerWidth)
+export const pageHeight = writable(window.innerHeight)
+
+export const tinyScreen = derived([pageWidth, pageHeight], ([$pageWidth, $pageHeight]) => {
+	const aspectRatio = $pageWidth / $pageHeight
+	return (aspectRatio >= 1 && pageWidth < 480) || (aspectRatio <= 1 && $pageHeight < 480)
+})
+export const compactScreen = derived([pageWidth, pageHeight], ([$pageWidth, $pageHeight]) => {
+	return ($pageWidth <= 640 && $pageHeight <= 550)
+})
 
 export const blocksEnabled = derived([settings], ([$settings]) => {
 	return !!$settings.blocksEnabled
 })
+
+export const latestBlockHeight = writable(null)
+export const highlightInOut = writable(null)

client/src/utils/api.js

@@ -0,0 +1,10 @@
+import config from '../config.js'
+import BitcoinTx from '../models/BitcoinTx.js'
+
+const apiRoot = `${config.backend ? config.backend : window.location.host }${config.backendPort ? ':' + config.backendPort : ''}`
+
+export default {
+  root: apiRoot,
+  websocketUri: `${config.secureSocket ? 'wss://' : 'ws://'}${apiRoot}/ws/txs`,
+  uri: `${config.secureSocket ? 'https://' : 'http://'}${apiRoot}`,
+}

client/src/utils/bitcoin.js

@@ -0,0 +1,9 @@
+export function subsidyAt(height) {
+  const halvings = BigInt(Math.floor(height / 210000))
+  if (halvings >= 64) return 0
+  else {
+    let sats = BigInt(5000000000)
+    sats >>= halvings
+    return Number(sats)
+  }
+}

client/src/utils/format.js

@@ -21,6 +21,12 @@ export const timeFormat = (Intl && Intl.DateTimeFormat) ? new Intl.DateTimeForma
     return `${('' + d.getHours()).padStart(2, '0')}:${('' + d.getMinutes()).padStart(2, '0')}`
   }
 }
+export const dateFormat = {
+  format (date) {
+    const d = new Date(date)
+    return `${d.getFullYear()}-${('' + (d.getMonth() + 1)).padStart(2, '0')}-${('' + d.getDate()).padStart(2, '0')} ${('' + d.getHours()).padStart(2, '0')}:${('' + d.getMinutes()).padStart(2, '0')}`
+  }
+}
 export const numberFormat = (Intl && Intl.NumberFormat) ? new Intl.NumberFormat(undefined) : {
   format (number) {
     return Number(number).toLocaleString()

client/src/utils/search.js

@@ -1,8 +1,11 @@
+import api from './api.js'
+import BitcoinTx from '../models/BitcoinTx.js'
+import { detailTx, selectedTx, overlay, highlightInOut } from '../stores.js'
 import { addressToSPK } from './encodings.js'
 
 // Quick heuristic matching to guess what kind of search a query is for
 // ***does not validate that a given address/txid/block is valid***
-export function matchQuery (query) {
+function matchQuery (query) {
   if (!query || !query.length) return
 
   const q = query.toLowerCase()
@@ -27,6 +30,28 @@ export function matchQuery (query) {
     }*/
   }
 
+  // Looks like a transaction input?
+  if (/^[0-9]+:[a-f0-9]{64}$/.test(q)) {
+    const parts = q.split(':')
+    return {
+      query: 'input',
+      txid: parts[1],
+      output: parts[0],
+      value: q
+    }
+  }
+
+  // Looks like a transaction output?
+  if (/^[a-f0-9]{64}:[0-9]+$/.test(q)) {
+    const parts = q.split(':')
+    return {
+      query: 'output',
+      txid: parts[0],
+      output: parts[1],
+      value: q
+    }
+  }
+
   // Looks like a transaction id?
   if (/^[a-f0-9]{64}$/.test(q)) {
     return {
@@ -79,3 +104,37 @@ export function matchQuery (query) {
 
   return null
 }
+export {matchQuery as matchQuery}
+
+async function fetchTx (txid) {
+  if (!txid) return
+  try {
+    const response = await fetch(`${api.uri}/api/tx/${txid}`, {
+      method: 'GET'
+    })
+    const result = await response.json()
+    const txData = result.tx
+    txData.block = { height: result.blockheight, hash: result.blockhash, time: result.time * 1000 }
+    return new BitcoinTx(txData, null, (txData.inputs && txData.inputs[0] && txData.inputs[0].prev_txid === "0000000000000000000000000000000000000000000000000000000000000000"))
+  } catch (err) {
+    console.log("failed to fetch tx ", txid)
+    return null
+  }
+}
+
+export async function searchTx(txid, input, output) {
+  const searchResult = await fetchTx(txid)
+  if (searchResult) {
+    selectedTx.set(searchResult)
+    detailTx.set(searchResult)
+    overlay.set('tx')
+    if (input != null || output != null) highlightInOut.set({txid, input, output})
+    return true
+  } else {
+    return false
+  }
+}
+
+export async function searchBlock(hash) {
+  console.log("search block ", hash)
+}

server/lib/router.ex

@@ -4,6 +4,8 @@ defmodule BitcoinStream.Router do
   use Plug.Router
 
   alias BitcoinStream.BlockData, as: BlockData
+  alias BitcoinStream.Protocol.Transaction, as: BitcoinTx
+  alias BitcoinStream.RPC, as: RPC
 
   plug Corsica, origins: "*", allow_headers: :all
   plug Plug.Static,
@@ -27,6 +29,17 @@ defmodule BitcoinStream.Router do
     end
   end
 
+  match "/api/tx/:hash" do
+    case get_tx(hash) do
+      {:ok, tx} ->
+        put_resp_header(conn, "cache-control", "public, max-age=604800, immutable")
+        |> send_resp(200, tx)
+      _ ->
+        Logger.debug("Error getting tx hash");
+        send_resp(conn, 404, "Transaction not found")
+    end
+  end
+
   match _ do
     send_resp(conn, 404, "Not found")
   end
@@ -40,4 +53,19 @@ defmodule BitcoinStream.Router do
       true -> :err
     end
   end
+
+  defp get_tx(txid) do
+    with  {:ok, 200, %{"hex" => hex, "blockhash" => blockhash}} <- RPC.request(:rpc, "getrawtransaction", [txid, true]),
+          {:ok, 200, %{"height" => height, "time" => time}} <- RPC.request(:rpc, "getblockheader", [blockhash, true]),
+          rawtx <- Base.decode16!(hex, case: :lower),
+          {:ok, txn } <- BitcoinTx.decode(rawtx),
+          inflated_txn <- BitcoinTx.inflate(txn, false),
+          {:ok, payload} <- Jason.encode(%{tx: inflated_txn, blockheight: height, blockhash: blockhash, time: time}) do
+      {:ok, payload}
+    else
+      err ->
+        IO.inspect(err);
+        :err
+    end
+  end
 end