mirror of
https://github.com/Retropex/bitfeed.git
synced 2025-05-12 19:20:46 +02:00
Loading indicator. Fix blockheight calculation
This commit is contained in:
Mononaut
parent
0cb700663c
commit
77e0204934
@ -48,6 +48,8 @@
|
||||
|
||||
--twitter-blue: #1da1f2;
|
||||
--monospace-purple: darkviolet;
|
||||
|
||||
--loading-color: var(--palette-x);
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
|
||||
@ -9,7 +9,7 @@ import AddressIcon from '../assets/icon/cil-wallet.svg'
|
||||
import TxIcon from '../assets/icon/cil-arrow-circle-right.svg'
|
||||
import { fly } from 'svelte/transition'
|
||||
import { matchQuery, searchTx, searchBlock } from '../utils/search.js'
|
||||
import { selectedTx, detailTx, overlay } from '../stores.js'
|
||||
import { selectedTx, detailTx, overlay, loading } from '../stores.js'
|
||||
|
||||
let query
|
||||
let matchedQuery
|
||||
@ -26,19 +26,21 @@ async function searchSubmit (e) {
|
||||
e.preventDefault()
|
||||
|
||||
if (matchedQuery) {
|
||||
$loading++
|
||||
switch(matchedQuery.query) {
|
||||
case 'txid':
|
||||
searchTx(matchedQuery.txid)
|
||||
await searchTx(matchedQuery.txid)
|
||||
break;
|
||||
|
||||
case 'input':
|
||||
searchTx(matchedQuery.txid, matchedQuery.input, null)
|
||||
await searchTx(matchedQuery.txid, matchedQuery.input, null)
|
||||
break;
|
||||
|
||||
case 'output':
|
||||
searchTx(matchedQuery.txid, null, matchedQuery.output)
|
||||
await searchTx(matchedQuery.txid, null, matchedQuery.output)
|
||||
break;
|
||||
}
|
||||
$loading--
|
||||
}
|
||||
|
||||
return false
|
||||
|
||||
@ -3,7 +3,7 @@ import Overlay from '../components/Overlay.svelte'
|
||||
import Icon from './Icon.svelte'
|
||||
import BookmarkIcon from '../assets/icon/cil-bookmark.svg'
|
||||
import { longBtcFormat, numberFormat, feeRateFormat, dateFormat } from '../utils/format.js'
|
||||
import { exchangeRates, settings, sidebarToggle, newHighlightQuery, highlightingFull, detailTx, pageWidth, latestBlockHeight, highlightInOut } from '../stores.js'
|
||||
import { exchangeRates, settings, sidebarToggle, newHighlightQuery, highlightingFull, detailTx, pageWidth, latestBlockHeight, highlightInOut, loading } from '../stores.js'
|
||||
import { formatCurrency } from '../utils/fx.js'
|
||||
import { hlToHex, mixColor, teal, purple } from '../utils/color.js'
|
||||
import { SPKToAddress } from '../utils/encodings.js'
|
||||
@ -249,11 +249,17 @@ function getMiterOffset (weight, dy, dx) {
|
||||
} else return 0
|
||||
}
|
||||
|
||||
function clickItem (item) {
|
||||
async function clickItem (item) {
|
||||
if (item.rest) {
|
||||
truncate = false
|
||||
} else if (item.prev_txid && item.prev_vout != null) {
|
||||
searchTx(item.prev_txid, null, item.prev_vout)
|
||||
$loading++
|
||||
await searchTx(item.prev_txid, null, item.prev_vout)
|
||||
$loading--
|
||||
} else if (item.spend && item.spend.txid && item.spend.vin) {
|
||||
$loading++
|
||||
await searchTx(item.spend.txid, item.spend.vin)
|
||||
$loading--
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -265,8 +271,14 @@ function clickItem (item) {
|
||||
text-align: left;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 1em;
|
||||
font-size: 1.2em;
|
||||
word-break: break-word;
|
||||
|
||||
.title {
|
||||
font-size: 1.25em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-id {
|
||||
@ -277,7 +289,7 @@ function clickItem (item) {
|
||||
|
||||
.icon-button {
|
||||
float: right;
|
||||
font-size: 24px;
|
||||
font-size: 1.1em;
|
||||
margin: 0;
|
||||
transition: opacity 300ms, color 300ms, background 300ms;
|
||||
background: var(--palette-d);
|
||||
@ -299,7 +311,7 @@ function clickItem (item) {
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
float: right;
|
||||
margin: 5px;
|
||||
margin: 0 5px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
||||
@ -413,7 +425,7 @@ function clickItem (item) {
|
||||
&.highlight {
|
||||
background: linear-gradient(90deg, var(--bold-a) -100%, transparent 100%);
|
||||
}
|
||||
&:hover {
|
||||
&.clickable:hover {
|
||||
background: linear-gradient(90deg, var(--palette-e), transparent);
|
||||
}
|
||||
.address {
|
||||
@ -425,10 +437,14 @@ function clickItem (item) {
|
||||
&.outputs {
|
||||
.entry {
|
||||
padding-right: 10px;
|
||||
border-right: solid 1px transparent;
|
||||
&.unspent {
|
||||
border-right: solid 1px var(--grey);
|
||||
}
|
||||
&.highlight {
|
||||
background: linear-gradient(90deg, transparent 0%, var(--bold-a) 200%);
|
||||
}
|
||||
&:hover {
|
||||
&.clickable:hover {
|
||||
background: linear-gradient(-90deg, var(--palette-e), transparent);
|
||||
}
|
||||
}
|
||||
@ -486,7 +502,7 @@ function clickItem (item) {
|
||||
unconfirmed
|
||||
</span>
|
||||
{/if}
|
||||
<h2>{#if $detailTx.isCoinbase }Coinbase{:else}Transaction{/if} <span class="tx-id">{ $detailTx.id }</span></h2>
|
||||
<h2><span class="title">{#if $detailTx.isCoinbase }Coinbase{:else}Transaction{/if}</span> <span class="tx-id">{ $detailTx.id }</span></h2>
|
||||
{#if $detailTx.block}
|
||||
<div class="pane fields">
|
||||
<div class="field">
|
||||
@ -599,7 +615,7 @@ function clickItem (item) {
|
||||
<div class="column outputs">
|
||||
<p class="header">{$detailTx.outputs.length} output{$detailTx.outputs.length > 1 ? 's' : ''} {#if $detailTx.fee != null}+ fee{/if}</p>
|
||||
{#each outputs as output}
|
||||
<div class="entry" class:clickable={output.rest} class:highlight={highlight.out != null && highlight.out === output.index} on:click={() => clickItem(output)}>
|
||||
<div class="entry" class:clickable={output.rest || output.spend} class:unspent={!output.spend && !output.fee} class:highlight={highlight.out != null && highlight.out === output.index} on:click={() => clickItem(output)}>
|
||||
<p class="address" title={output.title || output.address}><span class="truncatable">{output.address.slice(0,-6)}</span><span class="suffix">{output.address.slice(-6)}</span></p>
|
||||
<p class="amount">{ output.value == null ? '???' : formatBTC(output.value) }</p>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,10 @@
|
||||
import TxController from '../controllers/TxController.js'
|
||||
import TxRender from './TxRender.svelte'
|
||||
import getTxStream from '../controllers/TxStream.js'
|
||||
import { settings, overlay, serverConnected, serverDelay, txCount, mempoolCount, mempoolScreenHeight, frameRate, avgFrameRate, blockVisible, tinyScreen, compactScreen, currentBlock, selectedTx, blockAreaSize, devEvents, devSettings, pageWidth, pageHeight } from '../stores.js'
|
||||
import { settings, overlay, serverConnected, serverDelay, txCount, mempoolCount,
|
||||
mempoolScreenHeight, frameRate, avgFrameRate, blockVisible, tinyScreen,
|
||||
compactScreen, currentBlock, selectedTx, blockAreaSize, devEvents,
|
||||
devSettings, pageWidth, pageHeight, loading } from '../stores.js'
|
||||
import BlockInfo from '../components/BlockInfo.svelte'
|
||||
import SearchBar from '../components/SearchBar.svelte'
|
||||
import TxInfo from '../components/TxInfo.svelte'
|
||||
@ -12,10 +15,12 @@
|
||||
import AboutOverlay from '../components/AboutOverlay.svelte'
|
||||
import DonationOverlay from '../components/DonationOverlay.svelte'
|
||||
import SupportersOverlay from '../components/SupportersOverlay.svelte'
|
||||
import LoadingAnimation from '../components/util/LoadingAnimation.svelte'
|
||||
import Alerts from '../components/alert/Alerts.svelte'
|
||||
import { numberFormat } from '../utils/format.js'
|
||||
import { exchangeRates, lastBlockId, haveSupporters, sidebarToggle } from '../stores.js'
|
||||
import { formatCurrency } from '../utils/fx.js'
|
||||
import { fade } from 'svelte/transition'
|
||||
import config from '../config.js'
|
||||
|
||||
let width = window.innerWidth - 20
|
||||
@ -426,6 +431,34 @@
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.loading-wrapper {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.loading-msg {
|
||||
margin: .4em 0 0;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-shadow: 0 0 10px black;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.search-bar-wrapper {
|
||||
position: fixed;
|
||||
@ -515,6 +548,15 @@
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if $loading}
|
||||
<div class="loading-overlay" in:fade={{ delay: 100, duration: 500 }} out:fade={{ duration: 200 }}>
|
||||
<div class="loading-wrapper">
|
||||
<LoadingAnimation />
|
||||
<p class="loading-msg">loading</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if config.dev && config.debug && $devSettings.guides }
|
||||
<div class="guide-overlay">
|
||||
<div class="guide v-half" />
|
||||
|
||||
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>
|
||||
@ -15,13 +15,15 @@ export default class BitcoinTx {
|
||||
// number of bytes encoding the block height
|
||||
const height_bytes = parseInt(cbInfo.substring(0,2), 16)
|
||||
// extract the specified number of bytes, reverse the endianness (reverse pairs of hex characters), parse as a hex string
|
||||
const height = parseInt(cbInfo.substring(2,2 + (height_bytes * 2)).match(/../g).reverse().join(''),16)
|
||||
const parsed_height = parseInt(cbInfo.substring(2,2 + (height_bytes * 2)).match(/../g).reverse().join(''),16)
|
||||
// save remaining bytes as free data
|
||||
const sig = cbInfo.substring(2 + (height_bytes * 2))
|
||||
const sigAscii = sig.match(/../g).reduce((parsed, hexChar) => {
|
||||
return parsed + String.fromCharCode(parseInt(hexChar, 16))
|
||||
}, "")
|
||||
|
||||
const height = block.height == null ? parsed_height : block.height
|
||||
|
||||
const subsidy = subsidyAt(height)
|
||||
|
||||
this.coinbase = {
|
||||
|
||||
@ -167,3 +167,4 @@ export const blocksEnabled = derived([settings], ([$settings]) => {
|
||||
|
||||
export const latestBlockHeight = writable(null)
|
||||
export const highlightInOut = writable(null)
|
||||
export const loading = writable(0)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user