mirror of
https://github.com/Retropex/bitfeed.git
synced 2025-05-12 19:20:46 +02:00
Basic tx search, height/conf data, input links
This commit is contained in:
Mononaut
parent
0849e6eb43
commit
0cb700663c
151
client/src/components/SearchBar.svelte
Normal file
151
client/src/components/SearchBar.svelte
Normal file
@ -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>
|
||||
@ -52,6 +52,10 @@ let settingConfig = {
|
||||
falseLabel: 'age',
|
||||
trueLabel: 'fee rate',
|
||||
valueType: 'bool'
|
||||
},
|
||||
showSearch: {
|
||||
label: 'Search Bar',
|
||||
valueType: 'bool'
|
||||
}
|
||||
}
|
||||
$: {
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -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 { exchangeRates, settings, sidebarToggle, newHighlightQuery, highlightingFull, detailTx, pageWidth } from '../stores.js'
|
||||
import { longBtcFormat, numberFormat, feeRateFormat, dateFormat } from '../utils/format.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.block && $latestBlockHeight != null}
|
||||
<span class="confirmation-badge">
|
||||
{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}
|
||||
<h2>Coinbase <span class="tx-id">{ $detailTx.id }</span></h2>
|
||||
<div class="pane fee-calc">
|
||||
<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 & 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>
|
||||
|
||||
@ -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,11 +490,19 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" />
|
||||
{#if $settings.showSearch && !$tinyScreen && !$compactScreen }
|
||||
<div class="search-bar-wrapper">
|
||||
<SearchBar />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="alert-bar-wrapper">
|
||||
{#if config.messagesEnabled && $settings.showMessages && !$tinyScreen }
|
||||
<Alerts />
|
||||
{:else}
|
||||
<div class="spacer"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Sidebar />
|
||||
|
||||
|
||||
@ -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' }
|
||||
activeAlerts[1] = processedAlerts[1] || { key: 'null2' }
|
||||
lastIndex = processedAlerts[1] ? 1 : 0
|
||||
alert = processedAlerts[0] || { key: 'null1' }
|
||||
lastIndex = 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
|
||||
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
|
||||
}
|
||||
let currentIndex = (lastIndex + 1) % processedAlerts.length
|
||||
|
||||
lastIndex = currentIndex
|
||||
let nextAlert = 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' }
|
||||
alert = processedAlerts[currentIndex]
|
||||
}
|
||||
|
||||
rotateTimer = setTimeout(rotateAlerts, config.alertDuration)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="alert-bar" transition:fly={{ y: -100 }}>
|
||||
{#each activeAlerts as alert (alert.key)}
|
||||
<div class="alert-wrapper" in:fly|local={{ y: -100 }} out:fly|local={{ x: 400}}>
|
||||
<div class="alert-bar">
|
||||
{#key alert && alert.key}
|
||||
<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,28 +160,14 @@ 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;
|
||||
|
||||
.alert-wrapper {
|
||||
font-size: 0.8em;
|
||||
width: 16em;
|
||||
.alert-wrapper {
|
||||
width: 16em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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 : ''}`
|
||||
this.websocketUri = `${config.secureSocket ? 'wss://' : 'ws://'}${this.apiRoot}/ws/txs`
|
||||
this.apiUri = `${config.secureSocket ? 'https://' : 'http://'}${this.apiRoot}`
|
||||
console.log('connecting to ', this.websocketUri)
|
||||
console.log('connecting to ', api.uri)
|
||||
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()
|
||||
|
||||
@ -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,
|
||||
subsidy: this.value - (block.fees || 0)
|
||||
fees: this.value - subsidy,
|
||||
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)
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
10
client/src/utils/api.js
Normal file
10
client/src/utils/api.js
Normal file
@ -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}`,
|
||||
}
|
||||
9
client/src/utils/bitcoin.js
Normal file
9
client/src/utils/bitcoin.js
Normal file
@ -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)
|
||||
}
|
||||
}
|
||||
@ -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()
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user