Adaptive decimal number length in amount shortener

Fix address balance graph

backend/src/api/mempool-blocks.ts

@@ -382,7 +382,7 @@ class MempoolBlocks {
 
     const ancestors: Ancestor[] = [];
     const descendants: Ancestor[] = [];
-    let ancestor: MempoolTransactionExtended
+    let ancestor: MempoolTransactionExtended;
     for (const cluster of clusters) {
       for (const memberTxid of cluster) {
         const mempoolTx = mempool[memberTxid];
@@ -462,7 +462,7 @@ class MempoolBlocks {
 
       for (let i = 0; i < block.length; i++) {
         const txid = block[i];
-        if (txid) {
+        if (txid in mempool) {
           mempoolTx = mempool[txid];
           // save position in projected blocks
           mempoolTx.position = {
@@ -481,6 +481,9 @@ class MempoolBlocks {
               mempoolTx.acceleratedAt = acceleration?.added;
               mempoolTx.feeDelta = acceleration?.feeDelta;
               for (const ancestor of mempoolTx.ancestors || []) {
+                if (!(ancestor.txid in mempool)) {
+                  continue;
+                }
                 if (!mempool[ancestor.txid].acceleration) {
                   mempool[ancestor.txid].cpfpDirty = true;
                 }
@@ -688,7 +691,7 @@ class MempoolBlocks {
       [pool: string]: { name: string, block: number, vsize: number, accelerations: string[], complete: boolean };
     } = {};
     // prepare a list of accelerations in ascending order (we'll pop items off the end of the list)
-    const accQueue: { acceleration: Acceleration, rate: number, vsize: number }[] = Object.values(accelerations).map(acc => {
+    const accQueue: { acceleration: Acceleration, rate: number, vsize: number }[] = Object.values(accelerations).filter(acc => acc.txid in mempoolCache).map(acc => {
       let vsize = mempoolCache[acc.txid].vsize;
       for (const ancestor of mempoolCache[acc.txid].ancestors || []) {
         vsize += (ancestor.weight / 4);

frontend/custom-meta-config.json

@@ -0,0 +1,51 @@
+{
+  "theme": "contrast",
+  "enterprise": "meta",
+  "branding": {
+    "name": "metaplanet",
+    "title": "Metaplanet",
+    "site_id": 21,
+    "header_img": "/resources/metalogo.svg",
+    "footer_img": "/resources/metalogo.svg"
+  },
+  "dashboard": {
+    "widgets": [
+      {
+        "component": "fees",
+        "mobileOrder": 4
+      },
+      {
+        "component": "walletBalance",
+        "mobileOrder": 1,
+        "props": {
+          "wallet": "3350"
+        }
+      },
+      {
+        "component": "twitter",
+        "mobileOrder": 5,
+        "props": {
+          "handle": "Metaplanet_JP"
+        }
+      },
+      {
+        "component": "wallet",
+        "mobileOrder": 2,
+        "props": {
+          "wallet": "3350",
+          "period": "all"
+        }
+      },
+      {
+        "component": "blocks"
+      },
+      {
+        "component": "walletTransactions",
+        "mobileOrder": 3,
+        "props": {
+          "wallet": "3350"
+        }
+      }
+    ]
+  }
+}

frontend/src/app/components/address-graph/address-graph.component.ts

@@ -10,7 +10,6 @@ import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pip
 import { StateService } from '@app/services/state.service';
 import { PriceService } from '@app/services/price.service';
 import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';
-import { FiatShortenerPipe } from '@app/shared/pipes/fiat-shortener.pipe';
 
 const periodSeconds = {
   '1d': (60 * 60 * 24),
@@ -77,7 +76,6 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
     private relativeUrlPipe: RelativeUrlPipe,
     private priceService: PriceService,
     private fiatCurrencyPipe: FiatCurrencyPipe,
-    private fiatShortenerPipe: FiatShortenerPipe,
     private zone: NgZone,
   ) {}
 
@@ -245,18 +243,19 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
           let tooltip = '<div>';
 
           const hasTx = data[0].data[2].txid;
+          const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
+          
+          tooltip += `<div>
+            <div style="text-align: right;">
+            <div><b>${date}</b></div>`;
+
           if (hasTx) {
             const header = data.length === 1
             ? `${data[0].data[2].txid.slice(0, 6)}...${data[0].data[2].txid.slice(-6)}`
             : `${data.length} transactions`;
-            tooltip += `<span><b>${header}</b></span>`;
+            tooltip += `<div><b>${header}</b></div>`;
           }
           
-          const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
-          
-          tooltip += `<div>
-            <div style="text-align: right;">`;
-          
           const formatBTC = (val, decimal) => (val / 100_000_000).toFixed(decimal);
           const formatFiat = (val) => this.fiatCurrencyPipe.transform(val, null, 'USD');
           
@@ -291,7 +290,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
             }
           }
 
-          tooltip += `</div><span>${date}</span></div>`;
+          tooltip += `</div></div>`;
           return tooltip;
         }.bind(this)
       },
@@ -311,18 +310,21 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
             formatter: (val): string => {
               let valSpan = maxValue - (this.period === 'all' ? 0 : minValue);
               if (valSpan > 100_000_000_000) {
-                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 0)} BTC`;
+                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 0, undefined, true, true)} BTC`;
               }
               else if (valSpan > 1_000_000_000) {
-                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2)} BTC`;
+                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2, undefined, true, true)} BTC`;
               } else if (valSpan > 100_000_000) {
                 return `${(val / 100_000_000).toFixed(1)} BTC`;
               } else if (valSpan > 10_000_000) {
                 return `${(val / 100_000_000).toFixed(2)} BTC`;
               } else if (valSpan > 1_000_000) {
+                if (maxValue > 100_000_000_000) {
+                  return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 3, undefined, true, true)} BTC`;
+                }
                 return `${(val / 100_000_000).toFixed(3)} BTC`;
               } else {
-                return `${this.amountShortenerPipe.transform(val, 0)} sats`;
+                return `${this.amountShortenerPipe.transform(val, 0, undefined, true, true)} sats`;
               }
             }
           },
@@ -336,7 +338,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
           axisLabel: {
             color: 'rgb(110, 112, 121)',
             formatter: function(val) {
-              return this.fiatShortenerPipe.transform(val, null, 'USD');
+              return `$${this.amountShortenerPipe.transform(val, 0, undefined, true, true)}`;
             }.bind(this)
           },
           splitLine: {

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

@@ -1,15 +1,17 @@
 <ng-template [ngIf]="button" [ngIfElse]="btnLink">
-  <button #btn [attr.data-clipboard-text]="text" [class]="class" type="button" [disabled]="text === ''">
-    <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;top: -2px;left: 1px;">
+  <button [class]="class" type="button" [disabled]="text === ''" style="box-shadow: none;" (click)="copyText()">
+    <span style="position: relative;top: -2px;left: 1px;">
       <app-svg-images name="clippy" [width]="widths[size]" viewBox="0 0 1000 1000"></app-svg-images>
+      <span *ngIf="showMessage" class="copied-message" style="top: 29px; left: -23.5px;">{{ copiedMessage }}</span>
     </span>
   </button>
 </ng-template>
 
 <ng-template #btnLink>
-  <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;">
-    <button #btn class="btn btn-sm btn-link pt-0 {{ leftPadding ? 'padding' : '' }}" [attr.data-clipboard-text]="text"> 
+  <span style="position: relative;">
+    <button class="btn btn-sm btn-link pt-0 {{ leftPadding ? 'padding' : '' }}" style="box-shadow: none;" (click)="copyText()">
       <app-svg-images name="clippy" [width]="widths[size]" viewBox="0 0 1000 1000"></app-svg-images>
     </button>
+    <span *ngIf="showMessage" class="copied-message" style="top: 29px; left: -23.5px;">{{ copiedMessage }}</span>
   </span>
 </ng-template>

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

@@ -7,7 +7,19 @@
   padding-left: 0.4rem;
 }
 
-img {
-  position: relative;
-  left: -3px;
-}
+.copied-message {
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
+  color: var(--fg);
+  font-family: sans-serif;
+  font-size: .8rem;
+  font-weight: 400;
+  text-decoration: none;
+  text-align: left;
+  padding: .6em .75rem;
+  border-radius: 4px;
+  position: absolute;
+  white-space: nowrap;
+  box-shadow: 0 .5rem 1rem -.5rem #000;
+  z-index: 1000;
+  opacity: .9;
+}

frontend/src/app/components/clipboard/clipboard.component.ts

@@ -1,6 +1,4 @@
-import { Component, ViewChild, ElementRef, AfterViewInit, Input, ChangeDetectionStrategy } from '@angular/core';
-import * as ClipboardJS from 'clipboard';
-import * as tlite from 'tlite';
+import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 
 @Component({
   selector: 'app-clipboard',
@@ -8,15 +6,14 @@ import * as tlite from 'tlite';
   styleUrls: ['./clipboard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ClipboardComponent implements AfterViewInit {
-  @ViewChild('btn') btn: ElementRef;
-  @ViewChild('buttonWrapper') buttonWrapper: ElementRef;
+export class ClipboardComponent {
   @Input() button = false;
   @Input() class = 'btn btn-secondary ml-1';
   @Input() size: 'small' | 'normal' | 'large' = 'normal';
   @Input() text: string;
   @Input() leftPadding = true;
   copiedMessage: string = $localize`:@@clipboard.copied-message:Copied!`;
+  showMessage = false;
 
   widths = {
     small: '10',
@@ -24,22 +21,40 @@ export class ClipboardComponent implements AfterViewInit {
     large: '18',
   };
 
-  clipboard: any;
+  constructor(
+    private cd: ChangeDetectorRef,
+  ) { }
 
-  constructor() { }
-
-  ngAfterViewInit() {
-    this.clipboard = new ClipboardJS(this.btn.nativeElement);
-    this.clipboard.on('success', () => {
-      tlite.show(this.buttonWrapper.nativeElement);
-      setTimeout(() => {
-        tlite.hide(this.buttonWrapper.nativeElement);
-      }, 1000);
-    });
+  async copyText() {
+    if (this.text && !this.showMessage) {
+      try {
+        await this.copyToClipboard(this.text);
+        this.showMessage = true;
+        this.cd.markForCheck();
+        setTimeout(() => {
+          this.showMessage = false;
+          this.cd.markForCheck();
+        }, 1000);
+      } catch (error) {
+        console.error('Clipboard copy failed:', error);
+      }
+    }
   }
 
-  onDestroy() {
-    this.clipboard.destroy();
+  async copyToClipboard(text: string) {
+    if (navigator.clipboard) {
+      await navigator.clipboard.writeText(text);
+    } else {
+      // Use the 'out of viewport hidden text area' trick on non-secure contexts
+      const textarea = document.createElement('textarea');
+      textarea.value = this.text;
+      textarea.style.opacity = '0';
+      textarea.setAttribute('readonly', 'true'); // Don't trigger keyboard on mobile
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      textarea.remove();
+    }
   }
 
 }

frontend/src/app/components/transaction/transaction-details/transaction-details.component.html

@@ -217,10 +217,10 @@
     <tr>
       <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
       <td class="text-wrap">{{ tx.fee | number }} <span class="symbol" i18n="shared.sats">sats</span>
-        @if (accelerationInfo?.bidBoost ?? tx.feeDelta > 0) {
+        @if (isAcceleration && accelerationInfo?.bidBoost ?? tx.feeDelta > 0) {
           <span class="oobFees" i18n-ngbTooltip="Acceleration Fees" ngbTooltip="Acceleration fees paid out-of-band"> +{{ accelerationInfo?.bidBoost ?? tx.feeDelta | number }} </span><span class="symbol" i18n="shared.sats">sats</span>
         }
-        <span class="fiat"><app-fiat [blockConversion]="tx.price" [value]="tx.fee + ((accelerationInfo?.bidBoost ?? tx.feeDelta) || 0)"></app-fiat></span>
+        <span class="fiat"><app-fiat [blockConversion]="tx.price" [value]="tx.fee + (isAcceleration ? ((accelerationInfo?.bidBoost ?? tx.feeDelta) || 0) : 0)"></app-fiat></span>
       </td>
     </tr>
   } @else {

frontend/src/app/components/transaction/transaction.component.ts

@@ -879,6 +879,9 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       this.tx.acceleratedAt = cpfpInfo.acceleratedAt;
       this.tx.feeDelta = cpfpInfo.feeDelta;
       this.setIsAccelerated(firstCpfp);
+    } else if (this.tx.acceleration) { // Acceleration was cancelled while on the tx page, reset acceleration state
+      this.tx.acceleration = false;
+      this.setIsAccelerated(firstCpfp);
     }
     
     if (this.notAcceleratedOnLoad === null) {

frontend/src/app/services/websocket.service.ts

@@ -37,6 +37,7 @@ export class WebsocketService {
   private isTrackingWallet: boolean = false;
   private trackingWalletName: string;
   private trackingMempoolBlock: number;
+  private trackingMempoolBlockNetwork: string;
   private stoppingTrackMempoolBlock: any | null = null;
   private latestGitCommit = '';
   private onlineCheckTimeout: number;
@@ -226,10 +227,11 @@ export class WebsocketService {
       clearTimeout(this.stoppingTrackMempoolBlock);
     }
     // skip duplicate tracking requests
-    if (force || this.trackingMempoolBlock !== block) {
+    if (force || this.trackingMempoolBlock !== block || this.network !== this.trackingMempoolBlockNetwork) {
       this.websocketSubject.next({ 'track-mempool-block': block });
       this.isTrackingMempoolBlock = true;
       this.trackingMempoolBlock = block;
+      this.trackingMempoolBlockNetwork = this.network;
       return true;
     }
     return false;

frontend/src/app/shared/pipes/amount-shortener.pipe.ts

@@ -5,9 +5,10 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class AmountShortenerPipe implements PipeTransform {
   transform(num: number, ...args: any[]): unknown {
-    const digits = args[0] ?? 1;
+    let digits = args[0] ?? 1;
     const unit = args[1] || undefined;
     const isMoney = args[2] || false;
+    const addMoreDigits = args[3] || false;
 
     if (num < 1000) {
       return num.toFixed(digits);
@@ -25,6 +26,12 @@ export class AmountShortenerPipe implements PipeTransform {
     const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
     const item = lookup.slice().reverse().find((item) => num >= item.value);
 
+    if (addMoreDigits) {
+      // Add more decimal digits if the integer part is small
+      const integerPartLength = Math.floor(num / item.value).toString().length;
+      digits += Math.max(0, 3 - integerPartLength);
+    }
+
     if (unit !== undefined) {
       return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + ' ' + item.symbol + unit : '0';
     } else {

frontend/src/index.mempool.meta.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Metaplanet Inc</title>
+  <script src="/resources/config.js"></script>
+  <script src="/resources/customize.js"></script>
+  <base href="/">
+
+  <meta name="description" content="Secure the Future with Bitcoin." />
+  <meta property="og:image" content="https://mempool.space/resources/meta/meta-preview.jpg" />
+  <meta property="og:image:type" content="image/jpeg" />
+  <meta property="og:image:width" content="2000" />
+  <meta property="og:image:height" content="1000" />
+  <meta property="og:description" content="Secure the Future with Bitcoin." />
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@mempool">
+  <meta name="twitter:creator" content="@mempool">
+  <meta name="twitter:title" content="Metaplanet Inc">
+  <meta name="twitter:description" content="Secure the Future with Bitcoin." />
+  <meta name="twitter:image" content="https://mempool.space/resources/meta/meta-preview.jpg" />
+  <meta name="twitter:domain" content="metaplanet.mempool.space">
+
+  <link rel="apple-touch-icon" sizes="180x180" href="/resources/meta/favicons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/resources/meta/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/resources/meta/favicons/favicon-16x16.png">
+  <link rel="manifest" href="/resources/meta/favicons/site.webmanifest">
+  <link rel="shortcut icon" href="/resources/meta/favicons/favicon.ico">
+  <link id="canonical" rel="canonical" href="https://metaplanet.mempool.space">
+
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="msapplication-TileColor" content="#000000">
+  <meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
+  <meta name="theme-color" content="#1d1f31">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  <app-root></app-root>
+</body>
+
+</html>

frontend/src/resources/meta/favicons/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

production/bitcoin.conf

@@ -4,7 +4,6 @@ txindex=1
 coinstatsindex=1
 listen=1
 discover=1
-par=16
 dbcache=8192
 mempoolfullrbf=1
 maxconnections=100

production/mempool-config.mainnet.json

@@ -153,6 +153,6 @@
   },
   "WALLETS": {
     "ENABLED": true,
-    "WALLETS": ["BITB"]
+    "WALLETS": ["BITB", "3350"]
   }
 }