diff --git a/client/src/components/BlockInfo.svelte b/client/src/components/BlockInfo.svelte index 08a4ef4..c91c1bd 100644 --- a/client/src/components/BlockInfo.svelte +++ b/client/src/components/BlockInfo.svelte @@ -62,18 +62,24 @@ } } + let transitionDirection let flyIn let flyOut $: { - if ($blockTransitionDirection && $blockTransitionDirection === 'right') { + if (!$blockTransitionDirection || !visible || !block || !$blocksEnabled) { + transitionDirection = 'up' + flyIn = { y: (restoring ? -50 : 50), duration: (restoring ? 500 : 1000), easing: linear, delay: (restoring ? 0 : newBlockDelay) } + flyOut = { y: -50, duration: 2000, easing: linear } + } else if ($blockTransitionDirection && $blockTransitionDirection === 'right') { + transitionDirection = 'right' flyIn = { x: 100, easing: linear, delay: 1000, duration: 1000 } flyOut = { x: -100, easing: linear, delay: 0, duration: 1000 } } else if ($blockTransitionDirection && $blockTransitionDirection === 'left') { + transitionDirection = 'left' flyIn = { x: -100, easing: linear, delay: 1000, duration: 1000 } flyOut = { x: 100, easing: linear, delay: 0, duration: 1000 } } else { - flyIn = { y: (restoring ? -50 : 50), duration: (restoring ? 500 : 1000), easing: linear, delay: (restoring ? 0 : newBlockDelay) } - flyOut = { y: -50, duration: 2000, easing: linear } + transitionDirection = 'down' } } @@ -155,6 +161,14 @@ } } + .block-info-container { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } + .block-info { position: absolute; bottom: calc(100% + 0.25rem); @@ -319,68 +333,71 @@ } -{#key block} - {#if block != null && visible && $blocksEnabled } -
- -
-
- {#if block.height == $latestBlockHeight}Latest {/if}Block: { numberFormat.format(block.height) } - -
-
- { formatDateTime(block.time) } - { formattedBlockValue } -
-
- { formatBytes(block.bytes) } - { formatCount(block.txnCount) } transactions -
-
 
-
- Avg fee rate - {#if block.fees != null} - { formatFee(block.avgFeerate) } sats/vbyte - {:else} - unavailable - {/if} -
-
-
-
- Latest Block: { numberFormat.format(block.height) } - -
-
- { formatDateTime(block.time) } - { formattedBlockValue } -
-
- { formatCount(block.txnCount) } transactions - {#if block.fees != null} - { formatFee(block.avgFeerate) } sats/vb - {:else} +{#key transitionDirection} + {#each ((block != null && visible && $blocksEnabled) ? [block] : []) as block (block.id)} +
+
+ +
+
+ {#if block.height == $latestBlockHeight}Latest {/if}Block: { numberFormat.format(block.height) } + +
+
+ { formatDateTime(block.time) } + { formattedBlockValue } +
+
{ formatBytes(block.bytes) } - {/if} + { formatCount(block.txnCount) } transaction{block.txnCount == 1 ? '' : 's'} +
+
 
+
+ Avg fee rate + {#if block.fees != null} + { formatFee(block.avgFeerate) } sats/vbyte + {:else} + unavailable + {/if} +
-
+
+
+ Latest Block: { numberFormat.format(block.height) } + +
+
+ { formatDateTime(block.time) } + { formattedBlockValue } +
+
+ { formatCount(block.txnCount) } transactions + {#if block.fees != null} + { formatFee(block.avgFeerate) } sats/vb + {:else} + { formatBytes(block.bytes) } + {/if} +
+
+
+ + {#if hasPrevBlock } + + {/if} + {#if hasNextBlock } + + {/if} +
- {#if hasPrevBlock } - - {/if} - {#if hasNextBlock } - - {/if} - - {/if} + {/each} {/key} diff --git a/client/src/components/SearchBar.svelte b/client/src/components/SearchBar.svelte index 68f9e79..cd5cee7 100644 --- a/client/src/components/SearchBar.svelte +++ b/client/src/components/SearchBar.svelte @@ -219,7 +219,7 @@ async function searchSubmit (e) {
- +
diff --git a/client/src/components/TransactionOverlay.svelte b/client/src/components/TransactionOverlay.svelte index d2f57b6..4d6db95 100644 --- a/client/src/components/TransactionOverlay.svelte +++ b/client/src/components/TransactionOverlay.svelte @@ -3,12 +3,12 @@ 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, loading, urlPath } from '../stores.js' +import { exchangeRates, settings, sidebarToggle, newHighlightQuery, highlightingFull, detailTx, pageWidth, latestBlockHeight, highlightInOut, loading, urlPath, currentBlock, overlay, explorerBlockData } 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 api from '../utils/api.js' -import { searchTx } from '../utils/search.js' +import { searchTx, searchBlockHash, searchBlockHeight } from '../utils/search.js' import { fade } from 'svelte/transition' function onClose () { @@ -259,14 +259,6 @@ function getMiterOffset (weight, dy, dx) { 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) { - // $loading++ - // await searchTx(item.spend.txid, item.spend.vin) - // $loading-- } } @@ -283,6 +275,26 @@ async function goToOutput(e, output) { await searchTx(output.spend.txid, output.spend.vin) loading.decrement() } + +async function goToBlock(e) { + e.preventDefault() + + // ignore click if it was triggered while selecting text, or if we don't have a block to go to + if (!$detailTx || !$detailTx.block || !!window.getSelection().toString()) return + + let hash = $detailTx.block.hash || $detailTx.block.id + let height = $detailTx.block.height + if (hash === $currentBlock.id) { + $overlay = null + } else if (height == $latestBlockHeight) { + $explorerBlockData = null + $overlay = null + } else if (hash) { + loading.increment() + await searchBlockHash($detailTx.block.hash || $detailTx.block.id) + loading.decrement() + } +}