Merge pull request #3325 from mempool/mononaut/fix-liquid-asset-tooltips

Fix units in flow diagram tooltips for liquid assets

frontend/src/app/components/about/about.component.html

@@ -209,7 +209,7 @@
         <span>EmbassyOS</span>
       </a>
       <a href="https://github.com/btcpayserver/btcpayserver" target="_blank" title="BTCPay Server">
-        <img class="image" src="/resources/profile/btcpayserver.svg" />
+        <img class="image not-rounded" src="/resources/profile/btcpayserver.svg" />
         <span>BTCPay</span>
       </a>
       <a href="https://github.com/bisq-network/bisq" target="_blank" title="Bisq">
@@ -268,6 +268,22 @@
         <img class="image" src="/resources/profile/nunchuk.svg" />
         <span>Nunchuk</span>
       </a>
+      <a href="https://github.com/bitcoin-s/bitcoin-s" target="_blank" title="bitcoin-s">
+        <img class="image" src="/resources/profile/bitcoin-s.svg" />
+        <span>bitcoin-s</span>
+      </a>
+      <a href="https://github.com/EdgeApp" target="_blank" title="Edge">
+        <img class="image not-rounded" src="/resources/profile/edge.svg" />
+        <span>Edge</span>
+      </a>
+      <a href="https://github.com/GaloyMoney" target="_blank" title="Galoy">
+        <img class="image" src="/resources/profile/galoy.svg" />
+        <span>Galoy</span>
+      </a>
+      <a href="https://github.com/BoltzExchange" target="_blank" title="Boltz">
+        <img class="image" src="/resources/profile/boltz.svg" />
+        <span>Boltz</span>
+      </a>
     </div>
   </div>
 

frontend/src/app/components/about/about.component.scss

@@ -11,6 +11,12 @@
     line-height: 32px;
   }
 
+  .image.not-rounded {
+    border-radius: 0;
+    width: 74px;
+    height: 74px;
+  }
+
   .intro {
     margin: 25px auto 30px;
     width: 250px;
@@ -225,3 +231,8 @@
   max-width: 965px;
   margin: auto;
 }
+
+.community-integrations-sponsor img.image {
+  width: 78px;
+  height: 78px;
+}

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -20,8 +20,8 @@ interface BlockchainBlock extends BlockExtended {
 export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   @Input() static: boolean = false;
   @Input() offset: number = 0;
-  @Input() height: number = 0;
-  @Input() count: number = 8;
+  @Input() height: number = 0; // max height of blocks in chunk (dynamic blocks only)
+  @Input() count: number = 8; // number of blocks in this chunk (dynamic blocks only)
   @Input() loadingTip: boolean = false;
   @Input() connected: boolean = true;
   
@@ -31,6 +31,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   dynamicBlocksAmount: number = 8;
   emptyBlocks: BlockExtended[] = this.mountEmptyBlocks();
   markHeight: number;
+  chainTip: number;
   blocksSubscription: Subscription;
   blockPageSubscription: Subscription;
   networkSubscription: Subscription;
@@ -73,6 +74,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit() {
+    this.chainTip = this.stateService.latestBlockHeight;
     this.dynamicBlocksAmount = Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT);
 
     if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
@@ -107,7 +109,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
           this.blocks.unshift(block);
           this.blocks = this.blocks.slice(0, this.dynamicBlocksAmount);
 
-          if (txConfirmed && this.height === block.height) {
+          if (txConfirmed && block.height > this.chainTip) {
             this.markHeight = block.height;
             this.moveArrowToPosition(true, true);
           } else {
@@ -115,7 +117,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
           }
 
           this.blockStyles = [];
-          if (this.blocksFilled) {
+          if (this.blocksFilled && block.height > this.chainTip) {
             this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205)));
             setTimeout(() => {
               this.blockStyles = [];
@@ -129,6 +131,8 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
           if (this.blocks.length === this.dynamicBlocksAmount) {
             this.blocksFilled = true;
           }
+
+          this.chainTip = Math.max(this.chainTip, block.height);
           this.cd.markForCheck();
         });
     } else {

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html

@@ -56,9 +56,25 @@
           </ng-container>
       </ng-container>
       <p *ngIf="line.value == null && line.confidential" i18n="shared.confidential">Confidential</p>
-      <p *ngIf="line.value != null"><app-amount [blockConversion]="blockConversion" [satoshis]="line.value"></app-amount></p>
+      <p *ngIf="line.value != null">
+        <ng-template [ngIf]="line.asset && line.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
+          <div *ngIf="assetsMinimal && assetsMinimal[line.asset] else assetNotFound">
+            <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: line }"></ng-container>
+          </div>
+          <ng-template #assetNotFound>
+            {{ line.value }} <span class="symbol">{{ line.asset | slice : 0 : 7 }}</span>
+          </ng-template>
+        </ng-template>
+        <ng-template #defaultOutput>
+          <app-amount [blockConversion]="blockConversion" [satoshis]="line.value"></app-amount>
+        </ng-template>
+      </p>
       <p *ngIf="line.type !== 'fee' && line.address" class="address">
         <app-truncate [text]="line.address"></app-truncate>
       </p>
   </ng-template>
 </div>
+
+<ng-template #assetBox let-item>
+  {{ item.value / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} <span class="symbol">{{ assetsMinimal[item.asset][1] }}</span>
+</ng-template>

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts

@@ -1,6 +1,8 @@
 import { Component, ElementRef, ViewChild, Input, OnChanges, OnInit } from '@angular/core';
 import { tap } from 'rxjs';
 import { Price, PriceService } from '../../services/price.service';
+import { StateService } from '../../services/state.service';
+import { environment } from '../../../environments/environment';
 
 interface Xput {
   type: 'input' | 'output' | 'fee';
@@ -16,6 +18,7 @@ interface Xput {
   pegout?: string;
   confidential?: boolean;
   timestamp?: number;
+  asset?: string;
 }
 
 @Component({
@@ -27,13 +30,19 @@ export class TxBowtieGraphTooltipComponent implements OnChanges {
   @Input() line: Xput | void;
   @Input() cursorPosition: { x: number, y: number };
   @Input() isConnector: boolean = false;
+  @Input() assetsMinimal: any;
 
   tooltipPosition = { x: 0, y: 0 };
   blockConversion: Price;
 
+  nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
+
   @ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
 
-  constructor(private priceService: PriceService) {}
+  constructor(
+    private priceService: PriceService,
+    private stateService: StateService,
+  ) {}
 
   ngOnChanges(changes): void {
     if (changes.line?.currentValue) {
@@ -60,4 +69,8 @@ export class TxBowtieGraphTooltipComponent implements OnChanges {
       this.tooltipPosition = { x, y };
     }
   }
+
+  pow(base: number, exponent: number): number {
+    return Math.pow(base, exponent);
+  }
 }

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html

@@ -172,5 +172,6 @@
     [line]="hoverLine"
     [cursorPosition]="tooltipPosition"
     [isConnector]="hoverConnector"
+    [assetsMinimal]="assetsMinimal"
   ></app-tx-bowtie-graph-tooltip>
 </div>

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts

@@ -6,6 +6,7 @@ import { ReplaySubject, merge, Subscription, of } from 'rxjs';
 import { tap, switchMap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { AssetsService } from '../../services/assets.service';
 
 interface SvgLine {
   path: string;
@@ -30,6 +31,7 @@ interface Xput {
   pegout?: string;
   confidential?: boolean;
   timestamp?: number;
+  asset?: string;
 }
 
 @Component({
@@ -71,6 +73,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   zeroValueWidth = 60;
   zeroValueThickness = 20;
   hasLine: boolean;
+  assetsMinimal: any;
 
   outspendsSubscription: Subscription;
   refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
@@ -95,6 +98,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     private relativeUrlPipe: RelativeUrlPipe,
     private stateService: StateService,
     private apiService: ApiService,
+    private assetsService: AssetsService,
     @Inject(LOCALE_ID) private locale: string,
   ) {
     if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
@@ -105,6 +109,12 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   ngOnInit(): void {
     this.initGraph();
 
+    if (this.network === 'liquid' || this.network === 'liquidtestnet') {
+      this.assetsService.getAssetsMinimalJson$.subscribe((assets) => {
+        this.assetsMinimal = assets;
+      });
+    }
+
     this.outspendsSubscription = merge(
       this.refreshOutspends$
         .pipe(
@@ -162,7 +172,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
         index: i,
         pegout: v?.pegout?.scriptpubkey_address,
         confidential: (this.isLiquid && v?.value === undefined),
-        timestamp: this.tx.status.block_time
+        timestamp: this.tx.status.block_time,
+        asset: v?.asset,
       } as Xput;
     });
 
@@ -182,7 +193,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
         coinbase: v?.is_coinbase,
         pegin: v?.is_pegin,
         confidential: (this.isLiquid && v?.prevout?.value === undefined),
-        timestamp: this.tx.status.block_time
+        timestamp: this.tx.status.block_time,
+        asset: v?.prevout?.asset,
       } as Xput;
     });
 

frontend/src/app/components/tx-fee-rating/tx-fee-rating.component.ts

@@ -3,6 +3,7 @@ import { Transaction } from '../../interfaces/electrs.interface';
 import { StateService } from '../../services/state.service';
 import { Subscription } from 'rxjs';
 import { BlockExtended } from '../../interfaces/node-api.interface';
+import { CacheService } from '../../services/cache.service';
 
 @Component({
   selector: 'app-tx-fee-rating',
@@ -23,12 +24,12 @@ export class TxFeeRatingComponent implements OnInit, OnChanges, OnDestroy {
 
   constructor(
     private stateService: StateService,
+    private cacheService: CacheService,
     private cd: ChangeDetectorRef,
   ) { }
 
   ngOnInit() {
-    this.blocksSubscription = this.stateService.blocks$.subscribe(([block]) => {
-      this.blocks.push(block);
+    this.blocksSubscription = this.cacheService.loadedBlocks$.subscribe((block) => {
       if (this.tx.status.confirmed && this.tx.status.block_height === block.height && block?.extras?.medianFee > 0) {
         this.calculateRatings(block);
         this.cd.markForCheck();
@@ -41,8 +42,9 @@ export class TxFeeRatingComponent implements OnInit, OnChanges, OnDestroy {
     if (!this.tx.status.confirmed) {
       return;
     }
+    this.cacheService.loadBlock(this.tx.status.block_height);
 
-    const foundBlock = this.blocks.find((b) => b.height === this.tx.status.block_height);
+    const foundBlock = this.cacheService.getCachedBlock(this.tx.status.block_height) || null;
     if (foundBlock && foundBlock?.extras?.medianFee > 0) {
       this.calculateRatings(foundBlock);
     }

frontend/src/resources/profile/bitcoin-s.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="75.845146"
+   height="68.671829"
+   viewBox="0 0 75.845148 68.671834"
+   version="1.1"
+   id="svg382"
+   sodipodi:docname="bitcoin-s.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview384"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="2.9911866"
+     inkscape:cx="224.49285"
+     inkscape:cy="34.935968"
+     inkscape:window-width="2676"
+     inkscape:window-height="1439"
+     inkscape:window-x="1156"
+     inkscape:window-y="676"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g380" />
+  <defs
+     id="defs372">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="a">
+      <path
+         d="M 0,96.978 H 360.81 V 0 H 0 Z"
+         id="path369" />
+    </clipPath>
+  </defs>
+  <g
+     clip-path="url(#a)"
+     transform="matrix(1.33333,0,0,-1.33333,-42.513227,99.207752)"
+     id="g380">
+    <path
+       d="m 60.327,74.406 c -15.708,0 -28.442,-12.734 -28.442,-28.442 0,-9.185 4.357,-17.347 11.112,-22.546 3.014,1.79 8.559,4.834 10.472,4.2 2.675,-0.886 5.147,-1.348 7.414,-1.385 2.139,-0.034 3.845,0.313 5.121,1.035 1.276,0.726 1.926,1.866 1.951,3.419 0.027,1.62 -0.746,2.88 -2.32,3.78 -1.573,0.902 -4.068,1.867 -7.487,2.894 -3.611,1.162 -6.574,2.295 -8.889,3.402 -2.316,1.107 -4.314,2.728 -5.998,4.86 -1.682,2.135 -2.496,4.92 -2.44,8.352 0.082,5.055 2.089,8.91 6.022,11.57 3.931,2.659 8.847,3.938 14.742,3.842 A 37.212,37.212 0 0 0 73.314,67.3 c 3.804,-1.325 5.115,-14.326 5.115,-14.326 -2.3,2.047 -5.06,3.664 -8.283,4.85 -3.22,1.188 -6.289,1.805 -9.205,1.852 -2.333,0.038 -4.201,-0.336 -5.608,-1.124 -1.406,-0.788 -2.123,-1.992 -2.149,-3.611 -0.03,-1.813 0.759,-3.187 2.363,-4.122 1.606,-0.933 4.214,-1.978 7.824,-3.141 3.482,-1.092 6.317,-2.16 8.503,-3.202 2.187,-1.04 4.075,-2.592 5.66,-4.661 1.587,-2.067 2.354,-4.753 2.3,-8.057 -0.058,-3.56 -1.028,-6.5 -2.867,-8.856 7.147,5.166 11.802,13.567 11.802,23.06 0,15.709 -12.734,28.443 -28.442,28.443"
+       id="path675"
+       style="fill:#ed5039;fill-opacity:1" />
+  </g>
+</svg>

frontend/src/resources/profile/boltz.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="78px" height="78px" viewBox="0 0 78 78" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFE96D" offset="0%"></stop>
+            <stop stop-color="#E1C218" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FFE96D" offset="0%"></stop>
+            <stop stop-color="#ECD138" offset="62.3511283%"></stop>
+            <stop stop-color="#E1C218" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group">
+            <circle id="Oval" stroke="#EED33E" stroke-width="3" fill="#081E36" cx="39" cy="39" r="37.5"></circle>
+            <path d="M36.4583326,43.7755404 L40.53965,35.2316544 L39.4324865,35.2316544 L46.0754873,17.6071752 C46.292579,17.0204094 46.3287609,16.5159331 46.1840331,16.0937464 C46.0393053,15.671561 45.7860319,15.3674444 45.4242131,15.1813966 C45.0623942,14.9953487 44.6535376,14.9524146 44.1976433,15.0525945 C43.7417511,15.1527743 43.3256596,15.4461573 42.9493689,15.9327433 L22.6078557,40.7701025 C22.2026186,41.2710003 22,41.7575877 22,42.2298646 C22,42.6735173 22.1592003,43.0420366 22.477601,43.3354226 C22.7960017,43.6288058 23.1940025,43.7755404 23.6716036,43.7755404 L36.4583326,43.7755404 Z" id="Path" fill="url(#linearGradient-1)"></path>
+            <path d="M44.4883879,63.7755404 L48.8604707,55.165009 L47.6744296,55.165009 L54.7906978,37.4030526 C55.0232558,36.8117097 55.0620155,36.3032983 54.9069768,35.8778185 C54.7519381,35.4523399 54.4806208,35.1458511 54.0930248,34.958352 C53.7054289,34.7708528 53.2674441,34.7275839 52.7790706,34.8285452 C52.2906992,34.9295065 51.8449641,35.2251779 51.4418653,35.7155595 L29.6511611,60.746659 C29.2170537,61.251464 29,61.7418469 29,62.2178078 C29,62.6649211 29.1705423,63.036315 29.5116268,63.3319895 C29.8527113,63.6276613 30.2790669,63.7755404 30.7906936,63.7755404 L44.4883879,63.7755404 Z" id="Path-Copy" fill="url(#linearGradient-2)" transform="translate(42.000000, 49.275540) rotate(-180.000000) translate(-42.000000, -49.275540) "></path>
+        </g>
+    </g>
+</svg>

frontend/src/resources/profile/edge.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg id="Layer_1" data-name="Layer 1" version="1.1" width="24.63" height="23.44" xmlns="http://www.w3.org/2000/svg"><defs id="defs4"><style id="style2">.edge-logo-cls-2{fill-rule:evenodd;fill:#66eda8}</style></defs><g id="Navigation_header_L_sticky" data-name="Navigation/header_L_sticky"><g id="edge_logo_dark" data-name="edge logo dark"><path id="Fill-10" class="edge-logo-cls-2" d="M.43 23.44 4.22 13h6.66l3.5-9.63h10.25l-7.3 20.07z"/><path id="Fill-12" class="edge-logo-cls-2" d="M0 10.46 3.82 0h9.04L9.05 10.46z"/></g></g></svg>

frontend/src/resources/profile/galoy.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="56.91" height="56.91" fill="none" xmlns="http://www.w3.org/2000/svg"><path style="fill:#3654ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4" d="M0 0h56.91v56.91H0z"/><path d="M35.097 23.313a6.521 6.521 0 0 0-.838-1.839 5.378 5.378 0 0 0-1.314-1.364 5.868 5.868 0 0 0-1.761-.859 7.545 7.545 0 0 0-2.18-.298c-1.487 0-2.792.37-3.914 1.108-1.122.738-1.996 1.811-2.621 3.217-.625 1.406-.938 3.123-.938 5.15 0 2.025.308 3.75.923 5.17s1.486 2.502 2.613 3.245c1.127.743 2.458 1.115 3.992 1.115 1.392 0 2.583-.249 3.572-.746.99-.497 1.748-1.2 2.273-2.109.498-.863.76-1.876.786-3.04h-6.248v-4.63h12.174v3.664c0 2.557-.54 4.752-1.62 6.584a10.975 10.975 0 0 1-4.46 4.233c-1.893.99-4.061 1.484-6.504 1.484-2.728 0-5.123-.604-7.188-1.812-2.065-1.208-3.672-2.926-4.823-5.156-1.15-2.23-1.726-4.879-1.726-7.947 0-2.358.343-4.463 1.03-6.313.687-1.852 1.65-3.42 2.89-4.709a12.495 12.495 0 0 1 4.334-2.94c1.647-.673 3.433-1.009 5.355-1.009 1.648 0 3.182.24 4.602.718 1.42.478 2.683 1.152 3.786 2.023a11.025 11.025 0 0 1 2.706 3.104 10.648 10.648 0 0 1 1.35 3.955z" fill="#fff"/></svg>