From f489ec6ceed5df4303ecca49e44d012fdfe015ec Mon Sep 17 00:00:00 2001 From: Stephan Oeste Date: Tue, 30 Aug 2022 15:40:13 +0200 Subject: [PATCH 01/30] Remove the mempool restart script in prod install --- production/install | 1 - production/mempool-restart-all | 8 -------- 2 files changed, 9 deletions(-) delete mode 100755 production/mempool-restart-all diff --git a/production/install b/production/install index 4eac1817b..40f89389f 100755 --- a/production/install +++ b/production/install @@ -1009,7 +1009,6 @@ osSudo "${MEMPOOL_USER}" git clone --branch "${MEMPOOL_REPO_BRANCH}" "${MEMPOOL_ osSudo "${MEMPOOL_USER}" ln -s mempool/production/mempool-build-all upgrade osSudo "${MEMPOOL_USER}" ln -s mempool/production/mempool-kill-all stop osSudo "${MEMPOOL_USER}" ln -s mempool/production/mempool-start-all start -osSudo "${MEMPOOL_USER}" ln -s mempool/production/mempool-restart-all restart case $OS in diff --git a/production/mempool-restart-all b/production/mempool-restart-all deleted file mode 100755 index 13e551066..000000000 --- a/production/mempool-restart-all +++ /dev/null @@ -1,8 +0,0 @@ -#!/usr/bin/env zsh -HOSTNAME=$(hostname) - -echo restarting mempool backends | wall -echo "${HOSTNAME} restarted mempool backends" | /usr/local/bin/keybase chat send --nonblock --channel general mempool.ops -ps uaxw|grep 'dist/index'|grep -v grep|grep -v services|awk '{print $2}'|xargs -n 1 kill - -exit 0 From 5922ff0f40e526b7c52ede7bc43845cd6280fc13 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Wed, 31 Aug 2022 17:24:56 +0000 Subject: [PATCH 02/30] Better fix for unfurler race condition --- .../address/address-preview.component.ts | 10 ++++++---- .../block/block-preview.component.ts | 20 ++++++++++--------- .../transaction-preview.component.ts | 17 ++++++++-------- .../channel/channel-preview.component.ts | 14 +++++++------ .../lightning/node/node-preview.component.ts | 14 ++++++------- .../src/app/services/opengraph.service.ts | 8 ++++---- unfurler/src/concurrency/ReusablePage.ts | 4 ++++ unfurler/src/index.ts | 15 +++++++------- 8 files changed, 56 insertions(+), 46 deletions(-) diff --git a/frontend/src/app/components/address/address-preview.component.ts b/frontend/src/app/components/address/address-preview.component.ts index c0f6fff81..35e72435b 100644 --- a/frontend/src/app/components/address/address-preview.component.ts +++ b/frontend/src/app/components/address/address-preview.component.ts @@ -19,6 +19,7 @@ import { AddressInformation } from 'src/app/interfaces/node-api.interface'; export class AddressPreviewComponent implements OnInit, OnDestroy { network = ''; + rawAddress: string; address: Address; addressString: string; isLoadingAddress = true; @@ -55,7 +56,8 @@ export class AddressPreviewComponent implements OnInit, OnDestroy { this.mainSubscription = this.route.paramMap .pipe( switchMap((params: ParamMap) => { - this.openGraphService.waitFor('address-data'); + this.rawAddress = params.get('id') || ''; + this.openGraphService.waitFor('address-data-' + this.rawAddress); this.error = undefined; this.isLoadingAddress = true; this.loadedConfirmedTxCount = 0; @@ -73,7 +75,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy { this.isLoadingAddress = false; this.error = err; console.log(err); - this.openGraphService.fail('address-data'); + this.openGraphService.fail('address-data-' + this.rawAddress); return of(null); }) ); @@ -91,7 +93,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy { this.address = address; this.updateChainStats(); this.isLoadingAddress = false; - this.openGraphService.waitOver('address-data'); + this.openGraphService.waitOver('address-data-' + this.rawAddress); }) ) .subscribe(() => {}, @@ -99,7 +101,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy { console.log(error); this.error = error; this.isLoadingAddress = false; - this.openGraphService.fail('address-data'); + this.openGraphService.fail('address-data-' + this.rawAddress); } ); } diff --git a/frontend/src/app/components/block/block-preview.component.ts b/frontend/src/app/components/block/block-preview.component.ts index f1c7216e1..6b96887f0 100644 --- a/frontend/src/app/components/block/block-preview.component.ts +++ b/frontend/src/app/components/block/block-preview.component.ts @@ -20,6 +20,7 @@ export class BlockPreviewComponent implements OnInit, OnDestroy { block: BlockExtended; blockHeight: number; blockHash: string; + rawId: string; isLoadingBlock = true; strippedTransactions: TransactionStripped[]; overviewTransitionDirection: string; @@ -48,8 +49,9 @@ export class BlockPreviewComponent implements OnInit, OnDestroy { const block$ = this.route.paramMap.pipe( switchMap((params: ParamMap) => { - this.openGraphService.waitFor('block-viz'); - this.openGraphService.waitFor('block-data'); + this.rawId = params.get('id') || ''; + this.openGraphService.waitFor('block-viz-' + this.rawId); + this.openGraphService.waitFor('block-data-' + this.rawId); const blockHash: string = params.get('id') || ''; this.block = undefined; @@ -80,8 +82,8 @@ export class BlockPreviewComponent implements OnInit, OnDestroy { }), catchError((err) => { this.error = err; - this.openGraphService.fail('block-data'); - this.openGraphService.fail('block-viz'); + this.openGraphService.fail('block-data-' + this.rawId); + this.openGraphService.fail('block-viz-' + this.rawId); return of(null); }), ); @@ -103,7 +105,7 @@ export class BlockPreviewComponent implements OnInit, OnDestroy { this.isLoadingOverview = true; this.overviewError = null; - this.openGraphService.waitOver('block-data'); + this.openGraphService.waitOver('block-data-' + this.rawId); }), throttleTime(50, asyncScheduler, { leading: true, trailing: true }), shareReplay(1) @@ -116,7 +118,7 @@ export class BlockPreviewComponent implements OnInit, OnDestroy { .pipe( catchError((err) => { this.overviewError = err; - this.openGraphService.fail('block-viz'); + this.openGraphService.fail('block-viz-' + this.rawId); return of([]); }), switchMap((transactions) => { @@ -136,8 +138,8 @@ export class BlockPreviewComponent implements OnInit, OnDestroy { (error) => { this.error = error; this.isLoadingOverview = false; - this.openGraphService.fail('block-viz'); - this.openGraphService.fail('block-data'); + this.openGraphService.fail('block-viz-' + this.rawId); + this.openGraphService.fail('block-data-' + this.rawId); if (this.blockGraph) { this.blockGraph.destroy(); } @@ -163,6 +165,6 @@ export class BlockPreviewComponent implements OnInit, OnDestroy { } onGraphReady(): void { - this.openGraphService.waitOver('block-viz'); + this.openGraphService.waitOver('block-viz-' + this.rawId); } } diff --git a/frontend/src/app/components/transaction/transaction-preview.component.ts b/frontend/src/app/components/transaction/transaction-preview.component.ts index d30789f6b..040200cf6 100644 --- a/frontend/src/app/components/transaction/transaction-preview.component.ts +++ b/frontend/src/app/components/transaction/transaction-preview.component.ts @@ -92,15 +92,16 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy { txFeePerVSize: this.tx.effectiveFeePerVsize, }); this.cpfpInfo = cpfpInfo; - this.openGraphService.waitOver('cpfp-data'); + this.openGraphService.waitOver('cpfp-data-' + this.txId); }); this.subscription = this.route.paramMap .pipe( switchMap((params: ParamMap) => { - this.openGraphService.waitFor('tx-data'); const urlMatch = (params.get('id') || '').split(':'); this.txId = urlMatch[0]; + this.openGraphService.waitFor('tx-data-' + this.txId); + this.openGraphService.waitFor('tx-time-' + this.txId); this.seoService.setTitle( $localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:` ); @@ -149,7 +150,7 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy { ) .subscribe((tx: Transaction) => { if (!tx) { - this.openGraphService.fail('tx-data'); + this.openGraphService.fail('tx-data-' + this.txId); return; } @@ -166,6 +167,7 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy { if (!tx.status.confirmed && tx.firstSeen) { this.transactionTime = tx.firstSeen; + this.openGraphService.waitOver('tx-time-' + this.txId); } else { this.getTransactionTime(); } @@ -177,15 +179,15 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy { bestDescendant: tx.bestDescendant, }; } else { - this.openGraphService.waitFor('cpfp-data'); + this.openGraphService.waitFor('cpfp-data-' + this.txId); this.fetchCpfp$.next(this.tx.txid); } } - this.openGraphService.waitOver('tx-data'); + this.openGraphService.waitOver('tx-data-' + this.txId); }, (error) => { - this.openGraphService.fail('tx-data'); + this.openGraphService.fail('tx-data-' + this.txId); this.error = error; this.isLoadingTx = false; } @@ -193,7 +195,6 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy { } getTransactionTime() { - this.openGraphService.waitFor('tx-time'); this.apiService .getTransactionTimes$([this.tx.txid]) .pipe( @@ -203,7 +204,7 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy { ) .subscribe((transactionTimes) => { this.transactionTime = transactionTimes[0]; - this.openGraphService.waitOver('tx-time'); + this.openGraphService.waitOver('tx-time-' + this.txId); }); } diff --git a/frontend/src/app/lightning/channel/channel-preview.component.ts b/frontend/src/app/lightning/channel/channel-preview.component.ts index c82adba66..10c57c085 100644 --- a/frontend/src/app/lightning/channel/channel-preview.component.ts +++ b/frontend/src/app/lightning/channel/channel-preview.component.ts @@ -16,6 +16,7 @@ export class ChannelPreviewComponent implements OnInit { channel$: Observable; error: any = null; channelGeo: number[] = []; + shortId: string; constructor( private lightningApiService: LightningApiService, @@ -28,8 +29,9 @@ export class ChannelPreviewComponent implements OnInit { this.channel$ = this.activatedRoute.paramMap .pipe( switchMap((params: ParamMap) => { - this.openGraphService.waitFor('channel-map'); - this.openGraphService.waitFor('channel-data'); + this.shortId = params.get('short_id') || ''; + this.openGraphService.waitFor('channel-map-' + this.shortId); + this.openGraphService.waitFor('channel-data-' + this.shortId); this.error = null; this.seoService.setTitle(`Channel: ${params.get('short_id')}`); return this.lightningApiService.getChannel$(params.get('short_id')) @@ -48,12 +50,12 @@ export class ChannelPreviewComponent implements OnInit { data.node_right.longitude, data.node_right.latitude, ]; } - this.openGraphService.waitOver('channel-data'); + this.openGraphService.waitOver('channel-data-' + this.shortId); }), catchError((err) => { this.error = err; - this.openGraphService.fail('channel-map'); - this.openGraphService.fail('channel-data'); + this.openGraphService.fail('channel-map-' + this.shortId); + this.openGraphService.fail('channel-data-' + this.shortId); return of(null); }) ); @@ -62,6 +64,6 @@ export class ChannelPreviewComponent implements OnInit { } onMapReady() { - this.openGraphService.waitOver('channel-map'); + this.openGraphService.waitOver('channel-map-' + this.shortId); } } diff --git a/frontend/src/app/lightning/node/node-preview.component.ts b/frontend/src/app/lightning/node/node-preview.component.ts index 0d6908eb1..c2c3ab72c 100644 --- a/frontend/src/app/lightning/node/node-preview.component.ts +++ b/frontend/src/app/lightning/node/node-preview.component.ts @@ -42,9 +42,9 @@ export class NodePreviewComponent implements OnInit { this.node$ = this.activatedRoute.paramMap .pipe( switchMap((params: ParamMap) => { - this.openGraphService.waitFor('node-map'); - this.openGraphService.waitFor('node-data'); - this.publicKey = params.get('public_key'); + this.publicKey = params.get('public_key'); + this.openGraphService.waitFor('node-map-' + this.publicKey); + this.openGraphService.waitFor('node-data-' + this.publicKey); return this.lightningApiService.getNode$(params.get('public_key')); }), map((node) => { @@ -75,14 +75,14 @@ export class NodePreviewComponent implements OnInit { this.socketTypes = Object.keys(socketTypesMap); node.avgCapacity = node.capacity / Math.max(1, node.active_channel_count); - this.openGraphService.waitOver('node-data'); + this.openGraphService.waitOver('node-data-' + this.publicKey); return node; }), catchError(err => { this.error = err; - this.openGraphService.fail('node-map'); - this.openGraphService.fail('node-data'); + this.openGraphService.fail('node-map-' + this.publicKey); + this.openGraphService.fail('node-data-' + this.publicKey); return [{ alias: this.publicKey, public_key: this.publicKey, @@ -100,6 +100,6 @@ export class NodePreviewComponent implements OnInit { } onMapReady() { - this.openGraphService.waitOver('node-map'); + this.openGraphService.waitOver('node-map-' + this.publicKey); } } diff --git a/frontend/src/app/services/opengraph.service.ts b/frontend/src/app/services/opengraph.service.ts index dc62db0f3..9e2fef781 100644 --- a/frontend/src/app/services/opengraph.service.ts +++ b/frontend/src/app/services/opengraph.service.ts @@ -83,13 +83,13 @@ export class OpenGraphService { waitOver(event) { if (this.previewLoadingEvents[event]) { this.previewLoadingEvents[event]--; - if (this.previewLoadingEvents[event] === 0) { + if (this.previewLoadingEvents[event] === 0 && this.previewLoadingCount > 0) { delete this.previewLoadingEvents[event] this.previewLoadingCount--; } - } - if (this.previewLoadingCount === 0) { - this.metaService.updateTag({ property: 'og:preview:ready', content: 'ready'}); + if (this.previewLoadingCount === 0) { + this.metaService.updateTag({ property: 'og:preview:ready', content: 'ready'}); + } } } diff --git a/unfurler/src/concurrency/ReusablePage.ts b/unfurler/src/concurrency/ReusablePage.ts index 9592ea702..ed400d004 100644 --- a/unfurler/src/concurrency/ReusablePage.ts +++ b/unfurler/src/concurrency/ReusablePage.ts @@ -87,6 +87,10 @@ export default class ReusablePage extends ConcurrencyImplementation { page.repairRequested = true; }); await page.goto(defaultUrl, { waitUntil: "load" }); + await Promise.race([ + page.waitForSelector('meta[property="og:preview:ready"]', { timeout: config.PUPPETEER.RENDER_TIMEOUT || 3000 }).then(() => true), + page.waitForSelector('meta[property="og:preview:fail"]', { timeout: config.PUPPETEER.RENDER_TIMEOUT || 3000 }).then(() => false) + ]) page.free = true; return page } diff --git a/unfurler/src/index.ts b/unfurler/src/index.ts index ff5e6963a..4ae1d088e 100644 --- a/unfurler/src/index.ts +++ b/unfurler/src/index.ts @@ -100,14 +100,13 @@ class Server { } } - const waitForReady = await page.$('meta[property="og:preview:loading"]'); - let success = true; - if (waitForReady != null) { - success = await Promise.race([ - page.waitForSelector('meta[property="og:preview:ready"]', { timeout: config.PUPPETEER.RENDER_TIMEOUT || 3000 }).then(() => true), - page.waitForSelector('meta[property="og:preview:fail"]', { timeout: config.PUPPETEER.RENDER_TIMEOUT || 3000 }).then(() => false) - ]) - } + // wait for preview component to initialize + await page.waitForSelector('meta[property="og:preview:loading"]', { timeout: config.PUPPETEER.RENDER_TIMEOUT || 3000 }) + let success = false; + success = await Promise.race([ + page.waitForSelector('meta[property="og:preview:ready"]', { timeout: config.PUPPETEER.RENDER_TIMEOUT || 3000 }).then(() => true), + page.waitForSelector('meta[property="og:preview:fail"]', { timeout: config.PUPPETEER.RENDER_TIMEOUT || 3000 }).then(() => false) + ]) if (success) { const screenshot = await page.screenshot(); return screenshot; From 80dfa0e937ba5a3f406548f97fdc0e8d3ad8ac64 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Wed, 31 Aug 2022 18:21:24 +0000 Subject: [PATCH 03/30] Fix null timestamps on transaction previews --- .../transaction/transaction-preview.component.html | 2 +- .../components/transaction/transaction-preview.component.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/transaction/transaction-preview.component.html b/frontend/src/app/components/transaction/transaction-preview.component.html index 44be1dcfa..1708d4b47 100644 --- a/frontend/src/app/components/transaction/transaction-preview.component.html +++ b/frontend/src/app/components/transaction/transaction-preview.component.html @@ -23,7 +23,7 @@ - ‎{{ (tx.status.confirmed ? tx.status.block_time : transactionTime) * 1000 | date:'yyyy-MM-dd HH:mm' }} + ‎{{ transactionTime * 1000 | date:'yyyy-MM-dd HH:mm' }} Fee {{ tx.fee | number }} sat diff --git a/frontend/src/app/components/transaction/transaction-preview.component.ts b/frontend/src/app/components/transaction/transaction-preview.component.ts index 040200cf6..914801e70 100644 --- a/frontend/src/app/components/transaction/transaction-preview.component.ts +++ b/frontend/src/app/components/transaction/transaction-preview.component.ts @@ -165,7 +165,10 @@ export class TransactionPreviewComponent implements OnInit, OnDestroy { this.opReturns = this.getOpReturns(this.tx); this.extraData = this.chooseExtraData(); - if (!tx.status.confirmed && tx.firstSeen) { + if (tx.status.confirmed) { + this.transactionTime = tx.status.block_time; + this.openGraphService.waitOver('tx-time-' + this.txId); + } else if (!tx.status.confirmed && tx.firstSeen) { this.transactionTime = tx.firstSeen; this.openGraphService.waitOver('tx-time-' + this.txId); } else { From c155598c0844a743f64680b4e183109489cf8271 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Wed, 31 Aug 2022 20:40:24 +0000 Subject: [PATCH 04/30] Use new mempool preview image as default --- unfurler/src/routes.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/unfurler/src/routes.ts b/unfurler/src/routes.ts index 24922c85d..c6e77e79a 100644 --- a/unfurler/src/routes.ts +++ b/unfurler/src/routes.ts @@ -56,8 +56,7 @@ const routes = { const networks = { bitcoin: { - fallbackImg: '/resources/mempool-space-preview.png', - staticImg: '/resources/previews/dashboard.png', + fallbackImg: '/resources/previews/dashboard.png', routes: { ...routes // all routes supported } From 3da76892d5bd64ddc414b0906c8c8da34eae0389 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Wed, 31 Aug 2022 22:49:59 +0000 Subject: [PATCH 05/30] Restyle ln preview titles to match main pages --- .../channel/channel-preview.component.html | 8 ++--- .../channel/channel-preview.component.scss | 23 +++++++++++--- .../node/node-preview.component.html | 8 ++--- .../node/node-preview.component.scss | 30 ++++++++++++++----- 4 files changed, 49 insertions(+), 20 deletions(-) diff --git a/frontend/src/app/lightning/channel/channel-preview.component.html b/frontend/src/app/lightning/channel/channel-preview.component.html index a847975c2..364e8c9fe 100644 --- a/frontend/src/app/lightning/channel/channel-preview.component.html +++ b/frontend/src/app/lightning/channel/channel-preview.component.html @@ -1,9 +1,9 @@
-

- Channel: - {{ channel.short_id }} -

+
+
Lightning channel
+

{{ channel.short_id }}

+
Inactive Active diff --git a/frontend/src/app/lightning/channel/channel-preview.component.scss b/frontend/src/app/lightning/channel/channel-preview.component.scss index e89733ff3..e8e08d5e2 100644 --- a/frontend/src/app/lightning/channel/channel-preview.component.scss +++ b/frontend/src/app/lightning/channel/channel-preview.component.scss @@ -1,11 +1,24 @@ -.title { - font-size: 52px; - margin: 0; +.title-container { + width: 0; + flex-grow: 1; + flex-shrink: 1; + overflow: hidden; + + h5 { + font-size: 28px; + margin-top: -4px; + } + + h1 { + font-size: 52px; + margin-bottom: 0; + margin-top: -8px; + } } .table { + margin-top: 14px; font-size: 32px; - margin-top: 36px; } .badges { @@ -23,6 +36,7 @@ .full-width-row { padding-left: 15px; padding-right: 15px; + flex-wrap: nowrap; &:nth-child(even) { background: #181b2d; @@ -33,6 +47,7 @@ .nodes { font-size: 36px; align-items: center; + margin-top: 0px; } .between-arrow { diff --git a/frontend/src/app/lightning/node/node-preview.component.html b/frontend/src/app/lightning/node/node-preview.component.html index a94882161..22a8095b1 100644 --- a/frontend/src/app/lightning/node/node-preview.component.html +++ b/frontend/src/app/lightning/node/node-preview.component.html @@ -1,9 +1,9 @@
-

- Node: - {{ node.alias }} -

+
+
Lightning node
+

{{ node.alias }}

+
{{ socketType }}
diff --git a/frontend/src/app/lightning/node/node-preview.component.scss b/frontend/src/app/lightning/node/node-preview.component.scss index c6b2ea9d7..b629bbcae 100644 --- a/frontend/src/app/lightning/node/node-preview.component.scss +++ b/frontend/src/app/lightning/node/node-preview.component.scss @@ -1,10 +1,23 @@ -.title { - font-size: 52px; - margin-bottom: 0; +.title-container { + width: 0; + flex-grow: 1; + flex-shrink: 1; + overflow: hidden; + + h5 { + font-size: 28px; + margin-top: -4px; + } + + h1 { + font-size: 52px; + margin-bottom: 0; + margin-top: -8px; + } } .table { - margin-top: 48px; + margin-top: 26px; font-size: 32px; } @@ -20,14 +33,14 @@ flex-grow: 0; flex-shrink: 0; width: 470px; - height: 390px; + height: 386px; min-width: 470px; - min-height: 390px; - max-height: 390px; + min-height: 386px; + max-height: 386px; padding: 0; background: #181b2d; overflow: hidden; - margin-top: 18px; + margin-top: 0; } .row { @@ -36,6 +49,7 @@ .full-width-row { padding-left: 15px; + flex-wrap: nowrap; } ::ng-deep .symbol { From 4ee5ef336c2ad6c39d201a01e50a17f6e1e5629e Mon Sep 17 00:00:00 2001 From: Mononaut Date: Thu, 1 Sep 2022 14:57:14 +0000 Subject: [PATCH 06/30] Move lightning preview headers to top bar --- .../master-page-preview.component.html | 6 ++-- .../master-page-preview.component.scss | 12 +++++++ .../channel/channel-preview.component.html | 6 ++-- .../channel/channel-preview.component.scss | 29 ++++++++-------- .../node/node-preview.component.html | 6 ++-- .../node/node-preview.component.scss | 34 +++++++++---------- 6 files changed, 50 insertions(+), 43 deletions(-) diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.html b/frontend/src/app/components/master-page-preview/master-page-preview.component.html index b08c991de..917a44486 100644 --- a/frontend/src/app/components/master-page-preview/master-page-preview.component.html +++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.html @@ -7,12 +7,12 @@
- Signet Lightning - Testnet Lightning + Signet + Testnet Bisq Liquid Liquid Testnet - Mainnet Lightning + Mainnet
diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss index 605c4f6d9..4d5f173fa 100644 --- a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss +++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss @@ -33,4 +33,16 @@ justify-content: flex-start; align-items: center; } + + ::ng-deep .preview-header { + position: absolute; + top: -80px; + width: 100%; + padding: 0 220px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + z-index: 101; + line-height: 80px; + } } diff --git a/frontend/src/app/lightning/channel/channel-preview.component.html b/frontend/src/app/lightning/channel/channel-preview.component.html index 364e8c9fe..bf7d5dab3 100644 --- a/frontend/src/app/lightning/channel/channel-preview.component.html +++ b/frontend/src/app/lightning/channel/channel-preview.component.html @@ -1,9 +1,7 @@
+

Lightning channel

-
-
Lightning channel
-

{{ channel.short_id }}

-
+

{{ channel.short_id }}

Inactive Active diff --git a/frontend/src/app/lightning/channel/channel-preview.component.scss b/frontend/src/app/lightning/channel/channel-preview.component.scss index e8e08d5e2..cee0f1bcb 100644 --- a/frontend/src/app/lightning/channel/channel-preview.component.scss +++ b/frontend/src/app/lightning/channel/channel-preview.component.scss @@ -1,28 +1,28 @@ -.title-container { +.title { + font-size: 52px; + margin: 0; width: 0; flex-grow: 1; flex-shrink: 1; overflow: hidden; - - h5 { - font-size: 28px; - margin-top: -4px; - } - - h1 { - font-size: 52px; - margin-bottom: 0; - margin-top: -8px; - } + text-overflow: ellipsis; + white-space: nowrap; } .table { - margin-top: 14px; font-size: 32px; + margin-top: 36px; } .badges { font-size: 28px; + flex-shrink: 0; + flex-grow: 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: baseline; + justify-content: flex-end; ::ng-deep .badge { margin-left: 0.5em; @@ -38,7 +38,7 @@ padding-right: 15px; flex-wrap: nowrap; - &:nth-child(even) { + &:nth-child(odd) { background: #181b2d; margin: 15px 0; } @@ -47,7 +47,6 @@ .nodes { font-size: 36px; align-items: center; - margin-top: 0px; } .between-arrow { diff --git a/frontend/src/app/lightning/node/node-preview.component.html b/frontend/src/app/lightning/node/node-preview.component.html index 22a8095b1..4ebbf5cfd 100644 --- a/frontend/src/app/lightning/node/node-preview.component.html +++ b/frontend/src/app/lightning/node/node-preview.component.html @@ -1,9 +1,7 @@
+

Lightning node

-
-
Lightning node
-

{{ node.alias }}

-
+

{{ node.alias }}

{{ socketType }}
diff --git a/frontend/src/app/lightning/node/node-preview.component.scss b/frontend/src/app/lightning/node/node-preview.component.scss index b629bbcae..c0b86ce42 100644 --- a/frontend/src/app/lightning/node/node-preview.component.scss +++ b/frontend/src/app/lightning/node/node-preview.component.scss @@ -1,28 +1,28 @@ -.title-container { +.title { + font-size: 52px; + margin: 0; width: 0; flex-grow: 1; flex-shrink: 1; overflow: hidden; - - h5 { - font-size: 28px; - margin-top: -4px; - } - - h1 { - font-size: 52px; - margin-bottom: 0; - margin-top: -8px; - } + text-overflow: ellipsis; + white-space: nowrap; } .table { - margin-top: 26px; + margin-top: 48px; font-size: 32px; } .badges { font-size: 28px; + flex-shrink: 0; + flex-grow: 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: baseline; + justify-content: flex-end; ::ng-deep .badge { margin-left: 0.5em; @@ -33,14 +33,14 @@ flex-grow: 0; flex-shrink: 0; width: 470px; - height: 386px; + height: 390px; min-width: 470px; - min-height: 386px; - max-height: 386px; + min-height: 390px; + max-height: 390px; padding: 0; background: #181b2d; overflow: hidden; - margin-top: 0; + margin-top: 18px; } .row { From 2a28ccc7588403b7651a03e213bc0567583d875f Mon Sep 17 00:00:00 2001 From: Mononaut Date: Thu, 1 Sep 2022 17:01:31 +0000 Subject: [PATCH 07/30] Update block, address & tx preview layouts --- .../address/address-preview.component.html | 10 ++-- .../address/address-preview.component.scss | 27 ++-------- .../block/block-preview.component.html | 23 ++++---- .../block/block-preview.component.scss | 14 ++--- .../master-page-preview.component.scss | 50 +++++++++++++++++ .../transaction-preview.component.html | 12 ++--- .../transaction-preview.component.scss | 53 ++----------------- .../channel/channel-preview.component.html | 26 ++++----- .../channel/channel-preview.component.scss | 23 +++----- .../node/node-preview.component.html | 8 ++- .../node/node-preview.component.scss | 21 ++------ frontend/src/styles.scss | 2 +- 12 files changed, 114 insertions(+), 155 deletions(-) diff --git a/frontend/src/app/components/address/address-preview.component.html b/frontend/src/app/components/address/address-preview.component.html index 30b9c29e6..6a2d1efee 100644 --- a/frontend/src/app/components/address/address-preview.component.html +++ b/frontend/src/app/components/address/address-preview.component.html @@ -1,12 +1,12 @@
+

Address

-
-

Address

+
+
+

{{addressString.slice(0,-4)}}{{addressString.slice(-4)}}

+
- - {{addressString.slice(0,-4)}}{{addressString.slice(-4)}} - diff --git a/frontend/src/app/components/address/address-preview.component.scss b/frontend/src/app/components/address/address-preview.component.scss index 2de368547..afa8cb4b4 100644 --- a/frontend/src/app/components/address/address-preview.component.scss +++ b/frontend/src/app/components/address/address-preview.component.scss @@ -1,6 +1,5 @@ -h1 { - font-size: 52px; - margin: 0; +.title-wrapper { + padding: 0 15px; } .qr-wrapper { @@ -23,27 +22,9 @@ h1 { .table { font-size: 32px; + margin-top: 48px; ::ng-deep .symbol { font-size: 24px; } -} - -.address-link { - font-size: 24px; - margin-bottom: 0.5em; - display: flex; - flex-direction: row; - align-items: baseline; - .truncated-address { - text-overflow: ellipsis; - overflow: hidden; - max-width: calc(640px - 4em); - display: inline-block; - white-space: nowrap; - } - .last-four { - display: inline-block; - white-space: nowrap; - } -} +} \ No newline at end of file diff --git a/frontend/src/app/components/block/block-preview.component.html b/frontend/src/app/components/block/block-preview.component.html index 768bc3da3..38018bbb4 100644 --- a/frontend/src/app/components/block/block-preview.component.html +++ b/frontend/src/app/components/block/block-preview.component.html @@ -1,19 +1,16 @@
+

Block

-

- Genesis - - {{ blockHeight }} - - - Block - - - {{ blockHeight }} - - -

+
+
+

+ Genesis + {{ blockHeight }} +

+
+
+ {{blockHash.slice(0,-4)}}{{blockHash.slice(-4)}}