mirror of
https://github.com/Retropex/bitfeed.git
synced 2025-05-12 19:20:46 +02:00
Merge pull request #41 from bitfeed-project/transaction-explorer
Transaction explorer
This commit is contained in:
Mononaut
GitHub
commit
a9378898df
@ -48,6 +48,8 @@
|
||||
|
||||
--twitter-blue: #1da1f2;
|
||||
--monospace-purple: darkviolet;
|
||||
|
||||
--loading-color: var(--palette-x);
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
|
||||
153
client/src/components/SearchBar.svelte
Normal file
153
client/src/components/SearchBar.svelte
Normal file
@ -0,0 +1,153 @@
|
||||
<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, loading } from '../stores.js'
|
||||
|
||||
let query
|
||||
let matchedQuery
|
||||
|
||||
$: {
|
||||
if (query) {
|
||||
matchedQuery = matchQuery(query)
|
||||
} else {
|
||||
matchedQuery = null
|
||||
}
|
||||
}
|
||||
|
||||
async function searchSubmit (e) {
|
||||
e.preventDefault()
|
||||
|
||||
if (matchedQuery) {
|
||||
$loading++
|
||||
switch(matchedQuery.query) {
|
||||
case 'txid':
|
||||
await searchTx(matchedQuery.txid)
|
||||
break;
|
||||
|
||||
case 'input':
|
||||
await searchTx(matchedQuery.txid, matchedQuery.input, null)
|
||||
break;
|
||||
|
||||
case 'output':
|
||||
await searchTx(matchedQuery.txid, null, matchedQuery.output)
|
||||
break;
|
||||
}
|
||||
$loading--
|
||||
}
|
||||
|
||||
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, 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'
|
||||
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
|
||||
$: {
|
||||
@ -227,9 +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) {
|
||||
$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>
|
||||
@ -241,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 {
|
||||
@ -253,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);
|
||||
@ -270,6 +306,20 @@ function clickItem (item) {
|
||||
}
|
||||
}
|
||||
|
||||
.confirmation-badge {
|
||||
background: var(--light-good);
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
float: right;
|
||||
margin: 0 5px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
||||
&.unconfirmed {
|
||||
background: var(--light-ok);
|
||||
}
|
||||
}
|
||||
|
||||
.pane {
|
||||
background: var(--palette-b);
|
||||
padding: 16px;
|
||||
@ -293,7 +343,7 @@ function clickItem (item) {
|
||||
}
|
||||
}
|
||||
|
||||
.fee-calc {
|
||||
.fields {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -372,7 +422,10 @@ function clickItem (item) {
|
||||
.entry {
|
||||
align-items: flex-start;
|
||||
padding-left: 10px;
|
||||
&:hover {
|
||||
&.highlight {
|
||||
background: linear-gradient(90deg, var(--bold-a) -100%, transparent 100%);
|
||||
}
|
||||
&.clickable:hover {
|
||||
background: linear-gradient(90deg, var(--palette-e), transparent);
|
||||
}
|
||||
.address {
|
||||
@ -384,7 +437,14 @@ function clickItem (item) {
|
||||
&.outputs {
|
||||
.entry {
|
||||
padding-right: 10px;
|
||||
&:hover {
|
||||
border-right: solid 1px transparent;
|
||||
&.unspent {
|
||||
border-right: solid 1px var(--grey);
|
||||
}
|
||||
&.highlight {
|
||||
background: linear-gradient(90deg, transparent 0%, var(--bold-a) 200%);
|
||||
}
|
||||
&.clickable:hover {
|
||||
background: linear-gradient(-90deg, var(--palette-e), transparent);
|
||||
}
|
||||
}
|
||||
@ -403,7 +463,7 @@ function clickItem (item) {
|
||||
}
|
||||
|
||||
@media (max-width: 679px) {
|
||||
.fee-calc {
|
||||
.fields {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@ -430,12 +490,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 }
|
||||
<h2>Coinbase <span class="tx-id">{ $detailTx.id }</span></h2>
|
||||
<div class="pane fee-calc">
|
||||
{#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><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">
|
||||
<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 +534,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 +559,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 +575,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 +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} 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>
|
||||
|
||||
@ -3,18 +3,24 @@
|
||||
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, loading } 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'
|
||||
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
|
||||
@ -79,6 +85,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 +95,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 +285,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 +343,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 +430,43 @@
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
top: 3.5em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window on:resize={resize} on:load={resize} on:click={pointerLeave} />
|
||||
@ -437,7 +489,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 +523,18 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer" />
|
||||
{#if config.messagesEnabled && $settings.showMessages && !$tinyScreen }
|
||||
<Alerts />
|
||||
{#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 />
|
||||
@ -488,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" />
|
||||
|
||||
@ -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,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;
|
||||
}
|
||||
}
|
||||
|
||||
164
client/src/components/util/LoadingAnimation.svelte
Normal file
164
client/src/components/util/LoadingAnimation.svelte
Normal file
@ -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>
|
||||
@ -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 {
|
||||
@ -14,19 +15,23 @@ 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 = {
|
||||
height,
|
||||
sig,
|
||||
sigAscii,
|
||||
fees: block.fees,
|
||||
subsidy: this.value - (block.fees || 0)
|
||||
fees: this.value - subsidy,
|
||||
subsidy
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,7 +97,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,21 @@ 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)
|
||||
export const loading = writable(0)
|
||||
|
||||
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