Merge pull request #4419 from mempool/nymkappa/fix-about-page-ctas

[about page] fix wrapping perk

backend/src/api/audit.ts

@@ -9,7 +9,7 @@ class Audit {
   auditBlock(transactions: MempoolTransactionExtended[], projectedBlocks: MempoolBlockWithTransactions[], mempool: { [txId: string]: MempoolTransactionExtended }, useAccelerations: boolean = false)
    : { censored: string[], added: string[], fresh: string[], sigop: string[], fullrbf: string[], accelerated: string[], score: number, similarity: number } {
     if (!projectedBlocks?.[0]?.transactionIds || !mempool) {
-      return { censored: [], added: [], fresh: [], sigop: [], fullrbf: [], accelerated: [], score: 0, similarity: 1 };
+      return { censored: [], added: [], fresh: [], sigop: [], fullrbf: [], accelerated: [], score: 1, similarity: 1 };
     }
 
     const matches: string[] = []; // present in both mined block and template
@@ -144,7 +144,12 @@ class Audit {
 
     const numCensored = Object.keys(isCensored).length;
     const numMatches = matches.length - 1; // adjust for coinbase tx
-    const score = numMatches > 0 ? (numMatches / (numMatches + numCensored)) : 0;
+    let score = 0;
+    if (numMatches <= 0 && numCensored <= 0) {
+      score = 1;
+    } else if (numMatches > 0) {
+      score = (numMatches / (numMatches + numCensored));
+    }
     const similarity = projectedWeight ? matchedWeight / projectedWeight : 1;
 
     return {

frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts

@@ -30,7 +30,7 @@ export class BisqDashboardComponent implements OnInit {
 
   ngOnInit(): void {
     this.seoService.setTitle($localize`:@@meta.title.bisq.markets:Markets`);
-    this.seoService.setDescription($localize`:@@meta.description.bisq.markets:Explore the full Bitcoin ecosystem with The Mempool Open Project™. See Bisq market prices, trading activity, and more.`);
+    this.seoService.setDescription($localize`:@@meta.description.bisq.markets:Explore the full Bitcoin ecosystem with The Mempool Open Source Project™. See Bisq market prices, trading activity, and more.`);
     this.websocketService.want(['blocks']);
 
     this.volumes$ = this.bisqApiService.getAllVolumesDay$()

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

@@ -36,14 +36,14 @@
     <div id="become-sponsor-container">
       <div class="become-sponsor community">
         <p style="font-weight: 700; font-size: 18px;">If you're an individual...</p>
-        <a href="/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.community-sponsor-button">Become a Community Sponsor</a>
+        <a href="https://mempool.space/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.community-sponsor-button">Become a Community Sponsor</a>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Exclusive swag</p>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Your avatar on the About page</p>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> And more coming soon :)</p>
       </div>
       <div class="become-sponsor enterprise">
         <p style="font-weight: 700; font-size: 18px;">If you're a business...</p>
-        <a href="/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.enterprise-sponsor-button">Become an Enterprise Sponsor</a>
+        <a href="https://mempool.space/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.enterprise-sponsor-button">Become an Enterprise Sponsor</a>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Increased API limits</p>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Co-branded instance</p>
         <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> 99% service-level agreement</p>

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

@@ -282,6 +282,7 @@
   text-align: left;
   width: 250px;
   margin: 12px auto;
+  white-space: nowrap;
 }
 
 @media (max-width: 992px) {

frontend/src/app/components/accelerate-preview/accelerate-preview.component.html

@@ -1,14 +1,16 @@
+<span id="successAlert" class="m-0 p-0 d-block" style="height: 1px;"></span>
 <div class="row" *ngIf="showSuccess">
-  <div class="col" id="successAlert">
+  <div class="col">
     <div class="alert alert-success">
       Transaction has now been <a class="alert-link" routerLink="/services/accelerator/history">submitted</a> to mining pools for acceleration.
     </div>
   </div>
 </div>
 
+<span id="mempoolError" class="m-0 p-0 d-block" style="height: 1px;"></span>
 <div class="row" *ngIf="error">
-  <div class="col" id="mempoolError">
-    <app-mempool-error [error]="error"></app-mempool-error>
+  <div class="col">
+    <app-mempool-error [error]="error" [alertClass]="error === 'waitlisted' ? 'alert-mempool' : 'alert-danger'"></app-mempool-error>
   </div>
 </div>
 
@@ -37,10 +39,10 @@
                 <td class="item">
                   Virtual size
                 </td>
-                <td class="units" [innerHTML]="'&lrm;' + (estimate.txSummary.effectiveVsize | vbytes: 2)"></td>
+                <td style="text-align: end;" [innerHTML]="'&lrm;' + (estimate.txSummary.effectiveVsize | vbytes: 2)"></td>
               </tr>
               <tr class="info">
-                <td class="info">
+                <td class="info" colspan=3>
                   <i><small>Size in vbytes of this transaction<span *ngIf="hasAncestors"> and its unconfirmed ancestors</span></small></i>
                 </td>
               </tr>
@@ -48,12 +50,12 @@
                 <td class="item">
                   In-band fees
                 </td>
-                <td class="units">
-                  {{ estimate.txSummary.effectiveFee | number : '1.0-0' }} <span class="symbol" i18n="shared.sats|sats">sats</span>
+                <td style="text-align: end;">
+                  {{ estimate.txSummary.effectiveFee | number : '1.0-0' }} <span class="symbol" i18n="shared.sats">sats</span>
                 </td>
               </tr>
               <tr class="info group-last">
-                <td class="info">
+                <td class="info" colspan=3>
                   <i><small>Fees already paid by this transaction<span *ngIf="hasAncestors"> and its unconfirmed ancestors</span></small></i>
                 </td>
               </tr>
@@ -74,7 +76,7 @@
               <div class="d-flex mb-0">
                 <ng-container *ngFor="let option of maxRateOptions">
                   <button type="button" class="btn btn-primary flex-grow-1 btn-border btn-sm feerate" [class]="{active: selectFeeRateIndex === option.index}" (click)="setUserBid(option)">
-                    <span class="fee">{{ option.fee + estimate.mempoolBaseFee + estimate.vsizeFee | number }} <span class="symbol" i18n="shared.sats|sats">sats</span></span>
+                    <span class="fee">{{ option.fee + estimate.mempoolBaseFee + estimate.vsizeFee | number }} <span class="symbol" i18n="shared.sats">sats</span></span>
                     <span class="rate">~<app-fee-rate [fee]="option.rate" rounding="1.0-0"></app-fee-rate></span>
                   </button>
                 </ng-container>
@@ -95,7 +97,7 @@
                   <td class="item">
                     Next block market rate
                   </td>
-                  <td class="amt" style="font-size: 20px">
+                  <td class="amt" style="font-size: 16px">
                     {{ estimate.targetFeeRate | number : '1.0-0' }}
                   </td>
                   <td class="units"><span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
@@ -108,8 +110,8 @@
                     {{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }}
                   </td>
                   <td class="units">
-                    <span class="symbol" i18n="shared.sats|sats">sats</span>
-                    <span class="fiat"><app-fiat [value]="math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee)"></app-fiat></span>
+                    <span class="symbol" i18n="shared.sats">sats</span>
+                    <span class="fiat ml-1"><app-fiat [value]="math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee)"></app-fiat></span>
                   </td>
                 </tr>
               </ng-container>
@@ -128,8 +130,8 @@
                   +{{ estimate.mempoolBaseFee | number }}
                 </td>
                 <td class="units">
-                  <span class="symbol" i18n="shared.sats|sats">sats</span>
-                  <span class="fiat"><app-fiat [value]="estimate.mempoolBaseFee"></app-fiat></span>
+                  <span class="symbol" i18n="shared.sats">sats</span>
+                  <span class="fiat ml-1"><app-fiat [value]="estimate.mempoolBaseFee"></app-fiat></span>
                 </td>
               </tr>
               <tr class="info group-last">
@@ -140,8 +142,8 @@
                   +{{ estimate.vsizeFee | number }}
                 </td>
                 <td class="units">
-                  <span class="symbol" i18n="shared.sats|sats">sats</span>
-                  <span class="fiat"><app-fiat [value]="estimate.vsizeFee"></app-fiat></span>
+                  <span class="symbol" i18n="shared.sats">sats</span>
+                  <span class="fiat ml-1"><app-fiat [value]="estimate.vsizeFee"></app-fiat></span>
                 </td>
               </tr>
 
@@ -157,12 +159,12 @@
                     </span>
                   </td>
                   <td class="units">
-                    <span class="symbol" i18n="shared.sats|sats">sats</span>
-                    <span class="fiat"><app-fiat [value]="estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee"></app-fiat></span>
+                    <span class="symbol" i18n="shared.sats">sats</span>
+                    <span class="fiat ml-1"><app-fiat [value]="estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee"></app-fiat></span>
                   </td>
                 </tr>
                 <tr class="info group-last" style="border-bottom: 1px solid lightgrey">
-                  <td class="info">
+                  <td class="info" colspan=3>
                     <i><small>If your tx is accelerated to </small><small>{{ estimate.targetFeeRate | number : '1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></small></i>
                   </td>
                 </tr>
@@ -180,14 +182,14 @@
                     </span>
                   </td>
                   <td class="units">
-                    <span class="symbol" i18n="shared.sats|sats">sats</span>
-                    <span class="fiat">
+                    <span class="symbol" i18n="shared.sats">sats</span>
+                    <span class="fiat ml-1">
                       <app-fiat [value]="maxCost" [colorClass]="estimate.userBalance < maxCost ? 'red-color' : 'green-color'"></app-fiat>
                     </span>
                   </td>
                 </tr>
                 <tr class="info group-last">
-                  <td class="info">
+                  <td class="info" colspan=3>
                     <i><small>If your tx is accelerated to </small><small>~{{ ((estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize) | number : '1.0-0' }}  <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></small></i>
                   </td>
                 </tr>
@@ -203,8 +205,8 @@
                     {{ estimate.userBalance | number }}
                   </td>
                   <td class="units">
-                    <span class="symbol" i18n="shared.sats|sats">sats</span>
-                    <span class="fiat">
+                    <span class="symbol" i18n="shared.sats">sats</span>
+                    <span class="fiat ml-1">
                       <app-fiat [value]="estimate.userBalance" [colorClass]="estimate.userBalance < maxCost ? 'red-color' : 'green-color'"></app-fiat>
                     </span>
                   </td>

frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss

@@ -8,9 +8,6 @@
     align-items: center;
     justify-content: center;
 
-    .fee {
-      font-size: 1.2em;
-    }
     .rate {
       font-size: 0.9em;
       .symbol {
@@ -64,8 +61,6 @@
 
 .table-accelerator {
   tr {
-    text-wrap: wrap;
-
     td {
       padding-top: 0;
       padding-bottom: 0;
@@ -89,6 +84,7 @@
     }
     &.info {
       color: #6c757d;
+      white-space: initial;
     }
     &.amt {
       text-align: right;
@@ -97,6 +93,9 @@
     &.units {
       padding-left: 0.2em;
       white-space: nowrap;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
   }
 }
@@ -106,4 +105,8 @@
   flex-direction: row;
   align-items: stretch;
   margin-top: 1em;
+}
+
+.item {
+  white-space: initial;
 }

frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts

@@ -1,5 +1,4 @@
-import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, OnInit, Input, OnDestroy, OnChanges, SimpleChanges, HostListener, ChangeDetectorRef } from '@angular/core';
 import { ApiService } from '../../services/api.service';
 import { Subscription, catchError, of, tap } from 'rxjs';
 import { StorageService } from '../../services/storage.service';
@@ -63,7 +62,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   constructor(
     private apiService: ApiService,
     private storageService: StorageService,
-    private router: Router,
+    private cd: ChangeDetectorRef
   ) { }
 
   ngOnDestroy(): void {
@@ -163,13 +162,14 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   scrollToPreview(id: string, position: ScrollLogicalPosition) {
     const acceleratePreviewAnchor = document.getElementById(id);
     if (acceleratePreviewAnchor) {
+      this.cd.markForCheck();
       acceleratePreviewAnchor.scrollIntoView({
         behavior: 'smooth',
         inline: position,
         block: position,
       });
     }
-}
+  }
 
   /**
    * Send acceleration request

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

@@ -262,7 +262,7 @@
               <tbody>
                 <tr>
                   <td class="td-width" i18n="transaction.version">Version</td>
-                  <td>{{ block.version | decimal2hex }} <span *ngIf="displayTaprootStatus() && hasTaproot(block.version)" class="badge badge-success ml-1" >Taproot</span></td>
+                  <td>{{ block.version | decimal2hex }} <span *ngIf="displayTaprootStatus() && hasTaproot(block.version)" class="badge badge-success ml-1" i18n="tx-features.tag.taproot|Taproot">Taproot</span></td>
                 </tr>
                 <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
                   <td i18n="block.bits">Bits</td>

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

@@ -55,7 +55,9 @@ export class BlocksList implements OnInit {
     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
 
-    this.seoService.setTitle($localize`:@@meta.title.blocks-list:Blocks`);
+    if (!this.widget) {
+      this.seoService.setTitle($localize`:@@m8a7b4bd44c0ac71b2e72de0398b303257f7d2f54:Blocks`);
+    }
     if( this.stateService.network==='liquid'||this.stateService.network==='liquidtestnet' ) {
       this.seoService.setDescription($localize`:@@meta.description.liquid.blocks:See the most recent Liquid${seoDescriptionNetwork(this.stateService.network)} blocks along with basic stats such as block height, block size, and more.`);
     } else {

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

@@ -1,6 +1,6 @@
 <div class="container-xl">
   <div class="text-center">
-    <h2>Calculator</h2>
+    <h2 i18n="shared.calculator">Calculator</h2>
   </div>
 
   <ng-container *ngIf="price$ | async; else loading">
@@ -26,7 +26,7 @@
 
         <div class="input-group input-group-lg mb-1">
           <div class="input-group-prepend">
-            <span class="input-group-text">sats</span>
+            <span class="input-group-text" i18n="shared.sats">sats</span>
           </div>
           <input type="text" class="form-control" formControlName="satoshis" (input)="transformInput('satoshis')" (click)="selectAll($event)">
           <app-clipboard [button]="true" [text]="form.get('satoshis').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
@@ -41,7 +41,7 @@
       <div class="bitcoin-satoshis-text">
         ₿
          <span [innerHTML]="form.get('bitcoin').value | bitcoinsatoshis"></span> 
-        <span class="sats"> sats</span>
+        <span class="sats" i18n="shared.sats">sats</span>
       </div>
     </div>
 

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

@@ -38,36 +38,35 @@
   </div>
   <ng-container *ngIf="!hideStats">
     <div class="stats top left">
-      <p class="label" i18n="clock.fiat-price">fiat price</p>
+      <p class="label" i18n>Price</p>
       <p>
         <app-fiat [value]="100000000" digitsInfo="1.2-2" colorClass="white-color"></app-fiat>
       </p>
     </div>
     <div class="stats top right">
-      <p class="label" i18n="clock.priority-rate|priority fee rate">priority rate</p>
+      <p class="label" i18n="fees-box.high-priority">High Priority</p>
       <p *ngIf="recommendedFees$ | async as recommendedFees;">
         <app-fee-rate [fee]="recommendedFees.fastestFee" unitClass="" rounding="1.0-0"></app-fee-rate>
       </p>
     </div>
     <div *ngIf="mode !== 'mempool' && blocks?.length" class="stats bottom left">
       <p [innerHTML]="blocks[blockIndex].size | bytes: 2"></p>
-      <p class="label" i18n="clock.block-size">block size</p>
+      <p class="label" i18n="block.size">Size</p>
     </div>
     <div *ngIf="mode !== 'mempool' && blocks?.length" class="stats bottom right">
       <p class="force-wrap">
-        <ng-container *ngTemplateOutlet="blocks[blockIndex].tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: blocks[blockIndex].tx_count | number}"></ng-container>
-        <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} <span class="label">transaction</span></ng-template>
-        <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} <span class="label">transactions</span></ng-template>
+        {{ blocks[blockIndex].tx_count | number }}
+        <span class="label" i18n="dashboard.txs">Transactions</span>
       </p>
     </div>
     <ng-container *ngIf="mempoolInfo$ | async as mempoolInfo;">
       <div *ngIf="mode === 'mempool'" class="stats bottom left">
         <p [innerHTML]="mempoolInfo.usage | bytes: 0"></p>
-        <p class="label" i18n="dashboard.memory-usage|Memory usage">memory usage</p>
+        <p class="label" i18n="dashboard.memory-usage|Memory usage">Memory Usage</p>
       </div>
       <div *ngIf="mode === 'mempool'" class="stats bottom right">
         <p>{{ mempoolInfo.size | number }}</p>
-        <p class="label" i18n="dashboard.unconfirmed|Unconfirmed count">unconfirmed</p>
+        <p class="label" i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</p>
       </div>
     </ng-container>
   </ng-container>

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

@@ -63,6 +63,7 @@
     .label {
       font-size: calc(0.04 * var(--clock-width));
       line-height: calc(0.05 * var(--clock-width));
+      text-transform: lowercase;
     }
 
     &.top {

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

@@ -11,7 +11,7 @@
             <div class="progress inc-tx-progress-bar">
               <div class="progress-bar" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth, 'background-color': mempoolInfoData.progressColor}">&nbsp;</div>
               <div class="progress-text" *only-vsize>&lrm;{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
-              <div class="progress-text" *only-weight>&lrm;{{ mempoolInfoData.vBytesPerSecond * 4 | ceil | number }} <ng-container i18n="shared.weight-units-per-second|vB/s">WU/s</ng-container></div>
+              <div class="progress-text" *only-weight>&lrm;{{ mempoolInfoData.vBytesPerSecond * 4 | ceil | number }} <ng-container i18n="shared.weight-per-second|WU/s">WU/s</ng-container></div>
             </div>
           </ng-template>
         </ng-template>  

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

@@ -22,7 +22,7 @@
       <a class="dropdown-item" routerLinkActive="active"
         [routerLink]="['/graphs/mining/block-sizes-weights' | relativeUrl]" i18n="mining.block-sizes-weights">Block Sizes and Weights</a>
       <a *ngIf="stateService.env.AUDIT" class="dropdown-item" routerLinkActive="active"
-        [routerLink]="['/graphs/mining/block-health' | relativeUrl]" i18n="mining.block-health">Block Health</a>
+        [routerLink]="['/graphs/mining/block-health' | relativeUrl]" i18n="mining.blocks-health">Block Health</a>
     </div>
   </div>
 

frontend/src/app/components/master-page/master-page.component.scss

@@ -244,10 +244,9 @@ main {
 .sidenav {
   z-index: 1;
   background-color: transparent;
-  width: 225px;
+  width: 0px;
   height: calc(100vh - 65px);
   position: sticky;
   top: 65px;
-  margin-left: -225px;
   padding-bottom: 20px;
 }

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

@@ -7,7 +7,7 @@
       </span>
       <a *ngIf="!userAuth" class="d-flex justify-content-center align-items-center nav-link m-0  menu-click" routerLink="/login" role="tab" (click)="onLinkClick('/login')">
         <fa-icon class="menu-click" [icon]="['fas', 'user-circle']" [fixedWidth]="true" style="font-size: 25px;margin-right: 15px;"></fa-icon>
-        <span class="menu-click" style="font-size: 20px;">Sign in</span>
+        <span class="menu-click" style="font-size: 20px;" i18n="shared.sign-in">Sign in</span>
       </a>
 
       <ng-container *ngIf="userMenuGroups$ | async as menuGroups">

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

@@ -29,6 +29,7 @@
   margin-left: 0px;
   left: 0px;
   display: block;
+  background-color: #1d1f31;
 }
 
 .sidenav a, button{

frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

@@ -44,12 +44,12 @@
       </div>
     </div>
 
-    <!-- Latest blocks -->
+    <!-- Recent blocks -->
     <div class="col">
       <div class="card">
         <div class="card-body">
           <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
-            <h5 class="card-title d-inline" i18n="dashboard.latest-blocks">Latest blocks</h5>
+            <h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
             <span>&nbsp;</span>
             <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
           </a>

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -6,7 +6,7 @@
     <div class="pool-distribution" *ngIf="(miningStatsObservable$ | async) as miningStats; else loadingReward">
       <div class="item">
         <h5 class="card-title d-inline-block" i18n="mining.miners-luck" i18n-ngbTooltip="mining.miners-luck-1w"
-        ngbTooltip="Pools luck (1 week)" placement="bottom" #minersluck [disableTooltip]="!isEllipsisActive(minersluck)">Pools luck</h5>
+        ngbTooltip="Pools luck (1 week)" placement="bottom" #minersluck [disableTooltip]="!isEllipsisActive(minersluck)">Pools Luck</h5>
         <p class="card-text" i18n-ngbTooltip="mining.pools-luck-desc"
         ngbTooltip="The overall luck of all mining pools over the past week. A luck bigger than 100% means the average block time for the current epoch is less than 10 minutes." placement="bottom">
           {{ miningStats['minersLuck'] }}%
@@ -14,14 +14,14 @@
       </div>
       <div class="item">
         <h5 class="card-title d-inline-block" i18n="mining.miners-count" i18n-ngbTooltip="mining.miners-count-1w"
-        ngbTooltip="Pools count (1w)" placement="bottom" #poolscount [disableTooltip]="!isEllipsisActive(poolscount)">Pools count</h5>
+        ngbTooltip="Pools count (1w)" placement="bottom" #poolscount [disableTooltip]="!isEllipsisActive(poolscount)">Pools Count</h5>
         <p class="card-text" i18n-ngbTooltip="mining.pools-count-desc"
         ngbTooltip="How many unique pools found at least one block over the past week." placement="bottom">
           {{ miningStats.pools.length }}
         </p>
       </div>
       <div class="item">
-        <h5 class="card-title d-inline-block" i18n="master-page.blocks" i18n-ngbTooltip="master-page.blocks"
+        <h5 class="card-title d-inline-block" i18n="shared.blocks-1w" i18n-ngbTooltip="master-page.blocks"
         ngbTooltip="Blocks (1w)" placement="bottom" #blockscount [disableTooltip]="!isEllipsisActive(blockscount)">Blocks (1w)</h5>
         <p class="card-text" i18n-ngbTooltip="mining.blocks-count-desc"
         ngbTooltip="The number of blocks found over the past week." placement="bottom">
@@ -95,7 +95,7 @@
           <th *ngIf="auditAvailable" class="health text-right widget" i18n="latest-blocks.avg_health"
             i18n-ngbTooltip="latest-blocks.avg_health" ngbTooltip="Avg Health" placement="bottom" #health [disableTooltip]="!isEllipsisActive(health)">Avg Health</th>
           <th *ngIf="auditAvailable" class="d-none d-sm-table-cell" i18n="mining.fees-per-block">Avg Block Fees</th>
-          <th class="d-none d-lg-table-cell" i18n="mining.empty-blocks">Empty blocks</th>
+          <th class="d-none d-lg-table-cell" i18n="mining.empty-blocks">Empty Blocks</th>
         </tr>
       </thead>
       <tbody [attr.data-cy]="'pools-table'" *ngIf="(miningStatsObservable$ | async) as miningStats">
@@ -153,19 +153,19 @@
 <ng-template #loadingReward>
   <div class="pool-distribution">
     <div class="item">
-      <h5 class="card-title" i18n="mining.miners-luck">Pools Luck (1w)</h5>
+      <h5 class="card-title" i18n="mining.miners-luck">Pools Luck</h5>
       <p class="card-text">
         <span class="skeleton-loader skeleton-loader-big"></span>
       </p>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="master-page.blocks">Blocks (1w)</h5>
+      <h5 class="card-title" i18n="mining.miners-count" >Pools Count</h5>
       <p class="card-text">
         <span class="skeleton-loader skeleton-loader-big"></span>
       </p>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.miners-count">Pools Count (1w)</h5>
+      <h5 class="card-title" i18n="shared.blocks-1w">Blocks (1w)</h5>
       <p class="card-text">
         <span class="skeleton-loader skeleton-loader-big"></span>
       </p>

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

@@ -143,7 +143,7 @@
                   <table class="table table-xs table-data">
                     <thead>
                       <tr>
-                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks (24h)</th>
                         <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
                         <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
                       </tr>
@@ -165,7 +165,7 @@
                   <table class="table table-xs table-data">
                     <thead>
                       <tr>
-                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks (24h)</th>
                         <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
                         <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
                       </tr>
@@ -433,7 +433,7 @@
                   <table class="table table-xs table-data text-center">
                     <thead>
                       <tr>
-                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks (24h)</th>
                         <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
                         <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
                       </tr>
@@ -458,7 +458,7 @@
                   <table class="table table-xs table-data text-center">
                     <thead>
                       <tr>
-                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks (24h)</th>
                         <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
                         <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
                       </tr>

frontend/src/app/components/privacy-policy/privacy-policy.component.html

@@ -5,7 +5,7 @@
     <br><br>
 
     <h2>Privacy Policy</h2>
-    <h6>Updated: November 18, 2021</h6>
+    <h6>Updated: November 23, 2023</h6>
 
     <br><br>
 
@@ -59,7 +59,7 @@
 
       <ol>
 
-        <li>If you provide your e-mail address, we may contact you regarding your account, billing purposess, or to update you about our services. We will not share this with any third-party.</li>
+        <li>If you provide your name, country, and/or e-mail address, we may use this information to manage your user account, for billing purposes, or to update you about our services. We will not share this with any third-party, except as detailed below if you sponsor The Mempool Open Source Project®, purchase a subscription to Mempool Enterprise®, or accelerate transactions using Mempool Accelerator™.</li>
 
         <li>If you connect your Twitter account, we may store your Twitter identity, e-mail address, and profile photo. We may publicly display your profile photo or link to your profile on our website, if you sponsor The Mempool Open Source Project, claim your Lightning node, or other such use cases.</li>
 
@@ -67,7 +67,7 @@
 
         <li>If you make a Bitcoin or Liquid payment, we will process your payment using our self-hosted BTCPay Server instance and not share these details with any third-party.</li>
 
-        <li>If you accelerate transactions using Mempool Accelerator(tm), we will store the TXID of your transactions you accelerate with us. We share this information with our mining pool partners, as well as publicly display accelerated transaction details on our website and APIs.</li>
+        <li>If you accelerate transactions using Mempool Accelerator™, we will store the TXID of your transactions you accelerate with us. We share this information with our mining pool partners, as well as publicly display accelerated transaction details on our website and APIs.</li>
 
       </ol>
 

frontend/src/app/components/rbf-list/rbf-list.component.html

@@ -6,11 +6,9 @@
     <form class="formRadioGroup">
       <div class="btn-group btn-group-toggle" name="radioBasic">
         <label class="btn btn-primary btn-sm" [class.active]="!fullRbf">
-          <input type="radio" [value]="'All'" fragment="" [routerLink]="[]"> All
-        </label>
+          <input type="radio" [value]="'All'" fragment="" [routerLink]="[]"><span i18n="all">All</span></label>
         <label class="btn btn-primary btn-sm" [class.active]="fullRbf">
-          <input type="radio" [value]="'Full RBF'" fragment="fullrbf" [routerLink]="[]"> Full RBF
-        </label>
+          <input type="radio" [value]="'Full RBF'" fragment="fullrbf" [routerLink]="[]" i18n="transaction.full-rbf">Full RBF</label>
       </div>
     </form>
   </div>
@@ -33,7 +31,7 @@
       </div>
 
       <div class="no-replacements" *ngIf="!trees?.length">
-        <p i18n="rbf.no-replacements-yet">there are no replacements in the mempool yet!</p>
+        <p i18n="rbf.no-replacements-yet">There are no replacements in the mempool yet!</p>
       </div>
     </ng-container>
   </div>

frontend/src/app/components/rbf-list/rbf-list.component.ts

@@ -55,7 +55,7 @@ export class RbfList implements OnInit, OnDestroy {
       })
     );
 
-    this.seoService.setTitle($localize`:@@meta.title.rbf-list:RBF Replacements`);
+    this.seoService.setTitle($localize`:@@5e3d5a82750902f159122fcca487b07f1af3141f:RBF Replacements`);
     this.seoService.setDescription($localize`:@@meta.description.rbf-list:See the most recent RBF replacements on the Bitcoin${seoDescriptionNetwork(this.stateService.network)} network, updated in real-time.`);
   }
 

frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html

@@ -32,9 +32,9 @@
       <tr>
         <td class="td-width" i18n="transaction.status|Transaction Status">Status</td>
         <td>
-          <span *ngIf="rbfInfo.tx.fullRbf" class="badge badge-info" i18n="rbfInfo-features.tag.full-rbf|Full RBF">Full RBF</span>
+          <span *ngIf="rbfInfo.tx.fullRbf" class="badge badge-info" i18n="transaction.full-rbf">Full RBF</span>
           <span *ngIf="rbfInfo.tx.rbf; else rbfDisabled" class="badge badge-success" i18n="rbfInfo-features.tag.rbf|RBF">RBF</span>
-          <ng-template #rbfDisabled><span class="badge badge-danger mr-1"><del i18n="rbfInfo-features.tag.rbf|RBF">RBF</del></span></ng-template>
+          <ng-template #rbfDisabled><span class="badge badge-danger mr-1"><del i18n="tx-features.tag.rbf|RBF">RBF</del></span></ng-template>
           <span *ngIf="rbfInfo.tx.mined" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
         </td>
       </tr>

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

@@ -14,7 +14,7 @@
             [class]="(stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING) ? 'mining' : 'no-menu'" (click)="saveGraphPreference()">
             <div class="small-buttons">
               <a class="btn btn-primary btn-sm mb-0" [routerLink]="['/clock/mempool/0' | relativeUrl]" style="color: white" id="btn-clock">
-                <fa-icon [icon]="['fas', 'clock']" [fixedWidth]="true" i18n-title="master-page.clockview" title="Clock view"></fa-icon>
+                <fa-icon [icon]="['fas', 'clock']" [fixedWidth]="true" i18n-title="master-page.clockview" i18n-title="footer.clock-mempool" title="Clock (Mempool)"></fa-icon>
               </a>
               <a *ngIf="!isMobile()" class="btn btn-primary btn-sm mb-0" [routerLink]="['/tv' | relativeUrl]" style="color: white" id="btn-tv">
                 <fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon>

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

@@ -40,7 +40,7 @@
       <ng-container [ngSwitch]="extraData">
         <div class="opreturns" *ngSwitchCase="'coinbase'">
             <div class="opreturn-row">
-              <span class="label">Coinbase</span>
+              <span class="label" i18n="transactions-list.coinbase">Coinbase</span>
               <span class="message">{{ tx.vin[0].scriptsig | hex2ascii }}</span>
             </div>
         </div>

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

@@ -120,7 +120,7 @@
                       <ng-template [ngIf]="this.mempoolPosition.block >= 7" [ngIfElse]="belowBlockLimit">
                         <span [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'etaDeepMempool d-flex justify-content-end align-items-center' : ''">
                           <span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
-                          <a *ngIf="!tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerateDeepMempool" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+                          <a *ngIf="!tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerateDeepMempool btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
                         </span>
                       </ng-template>
                       <ng-template #belowBlockLimit>
@@ -130,7 +130,7 @@
                         <ng-template #timeEstimateDefault>
                           <span class="eta justify-content-end" [class]="(acceleratorAvailable && accelerateCtaType === 'button') ? 'd-flex align-items-center' : ''">
                             <app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.timeAvg * (this.mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
-                            <a *ngIf="!tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerate" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+                            <a *ngIf="!tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration" [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerate btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
                           </span>
                         </ng-template>
                       </ng-template>

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

@@ -61,7 +61,7 @@
 }
 
 .btn-small-height {
-	line-height: 1.1;
+	line-height: 1;
 }
 
 .arrow-green {
@@ -259,7 +259,6 @@
 .accelerate {
   display: flex !important;
   align-self: auto;
-  margin-top: 3px;
   margin-left: auto;
   background-color: #653b9c;
   @media (max-width: 849px) {

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

@@ -16,7 +16,7 @@
 
   <ng-template #coinbase>
     <ng-container *ngIf="line.coinbase; else pegin">
-      <p>Coinbase</p>
+      <p i18n="transactions-list.coinbase">Coinbase</p>
     </ng-container>
   </ng-template>
 

frontend/src/app/dashboard/dashboard.component.html

@@ -76,7 +76,7 @@
       <div class="card" *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'; else latestBlocks">
         <div class="card-body">
           <a class="title-link" href="" [routerLink]="['/rbf' | relativeUrl]">
-            <h5 class="card-title d-inline" i18n="dashboard.latest-rbf-replacements">Latest replacements</h5>
+            <h5 class="card-title d-inline" i18n="dashboard.recent-rbf-replacements">Recent Replacements</h5>
             <span>&nbsp;</span>
             <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
           </a>
@@ -99,7 +99,7 @@
                 <td class="table-cell-badges">
                   <span *ngIf="replacement.mined" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
                   <span *ngIf="replacement.fullRbf" class="badge badge-info" i18n="transaction.full-rbf">Full RBF</span>
-                  <span *ngIf="!replacement.fullRbf" class="badge badge-success" i18n="transaction.rbf">RBF</span>
+                  <span *ngIf="!replacement.fullRbf" class="badge badge-success" i18n="tx-features.tag.rbf|RBF">RBF</span>
                 </td>
               </tr>
             </tbody>
@@ -110,7 +110,7 @@
         <div class="card">
           <div class="card-body">
             <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
-              <h5 class="card-title d-inline" i18n="dashboard.latest-blocks">Latest blocks</h5>
+              <h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
               <span>&nbsp;</span>
               <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
             </a>
@@ -150,7 +150,7 @@
     <div class="col" style="max-height: 410px">
       <div class="card">
         <div class="card-body">
-          <h5 class="card-title" i18n="dashboard.latest-transactions">Latest transactions</h5>
+          <h5 class="card-title" i18n="dashboard.recent-transactions">Recent Transactions</h5>
           <table class="table latest-transactions">
             <thead>
               <th class="table-cell-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
@@ -233,7 +233,7 @@
       </p>
     </div>
     <div class="item bar">
-      <h5 class="card-title" i18n="dashboard.memory-usage|Memory usage">Memory usage</h5>
+      <h5 class="card-title" i18n="dashboard.memory-usage|Memory usage">Memory Usage</h5>
       <div class="card-text" *ngIf="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value; else loadingbig">
         <div class="progress">
           <div class="progress-bar {{ mempoolInfoData.value.mempoolSizeProgress }}" role="progressbar" [ngStyle]="{'width': (mempoolInfoData.value.memPoolInfo.usage / mempoolInfoData.value.memPoolInfo.maxmempool * 100) + '%' }">&nbsp;</div>
@@ -256,7 +256,7 @@
 </ng-template>
 
 <ng-template #txPerSecond let-mempoolInfoData>
-  <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming transactions</h5>
+  <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming Transactions</h5>
   <ng-template [ngIf]="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value" [ngIfElse]="loadingTransactions">
     <span *ngIf="(mempoolLoadingStatus$ | async) !== 100; else inSync">
       &nbsp;<span class="badge badge-pill badge-warning"><ng-container i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</ng-container> ({{ mempoolLoadingStatus$ | async }}%)</span>

frontend/src/app/docs/api-docs/api-docs.component.html

@@ -10,9 +10,9 @@
       <div class="doc-content">
 
         <div id="disclaimer">
-          <table *ngIf="!mobileViewport"><tr><td><app-svg-images name="warning" class="disclaimer-warning" viewBox="0 0 304 304" fill="#ffc107" width="50" height="50"></app-svg-images></td><td><p i18n="faq.big-disclaimer"><b>mempool.space merely provides data about the Bitcoin network.</b> It cannot help you with retrieving funds, wallet issues, etc.</p><p>For any such requests, you need to get in touch with the entity that helped make the transaction (wallet software, exchange company, etc).</p></td></tr></table>
-          <div *ngIf="mobileViewport"><app-svg-images name="warning" class="disclaimer-warning" viewBox="0 0 304 304" fill="#ffc107" width="50" height="50"></app-svg-images><p i18n="faq.big-disclaimer"><b>mempool.space merely provides data about the Bitcoin network.</b> It cannot help you with retrieving funds, wallet issues, etc.</p><p>For any such requests, you need to get in touch with the entity that helped make the transaction (wallet software, exchange company, etc).</p></div>
-
+          <table *ngIf="!mobileViewport"><tr><td><app-svg-images name="warning" class="disclaimer-warning" viewBox="0 0 304 304" fill="#ffc107" width="50" height="50"></app-svg-images></td><td> <ng-container *ngTemplateOutlet="faqDisclaimer"></ng-container></td></tr></table>
+          <div *ngIf="mobileViewport"><app-svg-images name="warning" class="disclaimer-warning" viewBox="0 0 304 304" fill="#ffc107" width="50" height="50"></app-svg-images><ng-container *ngTemplateOutlet="faqDisclaimer"></ng-container></div>
+          <ng-template #faqDisclaimer i18n="faq.big-disclaimer"><p><b>mempool.space merely provides data about the Bitcoin network.</b> It cannot help you with retrieving funds, wallet issues, etc.</p><p>For any such requests, you need to get in touch with the entity that helped make the transaction (wallet software, exchange company, etc).</p></ng-template>
         </div>
 
         <div class="doc-item-container" *ngFor="let item of faq">

frontend/src/app/docs/docs/docs.component.ts

@@ -64,10 +64,9 @@ export class DocsComponent implements OnInit {
       }
     } else {
       this.activeTab = 3;
-      this.seoService.setTitle($localize`:@@meta.title.docs.websocket:Electrum RPC`);
+      this.seoService.setTitle($localize`:@@meta.title.docs.electrum:Electrum RPC`);
       this.seoService.setDescription($localize`:@@meta.description.docs.electrumrpc:Documentation for our Electrum RPC interface: get instant, convenient, and reliable access to an Esplora instance.`);
     }
-
   }
 
   ngOnDestroy(): void {

frontend/src/app/lightning/channels-list/channels-list.component.html

@@ -37,7 +37,7 @@
   <thead>
     <th class="alias text-left" i18n="lightning.alias">Alias</th>
     <th class="nodedetails text-left">&nbsp;</th>
-    <th class="status text-left" i18n="status">Status</th>
+    <th class="status text-left" i18n="transaction.status|Transaction Status">Status</th>
     <th class="feerate text-left" *ngIf="status !== 'closed'" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
     <th class="feerate text-left" *ngIf="status === 'closed'" i18n="channels.closing_date">Closing date</th>
     <th class="liquidity text-right" i18n="lightning.capacity">Capacity</th>

frontend/src/app/lightning/group/group.component.html

@@ -14,7 +14,7 @@
         <table class="table table-borderless table-striped">
           <tbody>
             <tr>
-              <td>Description</td>
+              <td i18n>Description</td>
               <td><div class="description-text">These are the Lightning nodes operated by The Mempool Open Source Project that provide data for the mempool.space website. Connect to us!
                 </div>
               </td>
@@ -70,7 +70,7 @@
     <table class="table table-borderless">
       <thead>
         <th class="alias text-left" i18n="lightning.alias">Alias</th>
-        <th class="text-left">Connect</th>
+        <th class="text-left" i18n="lightning.connect-to-node|Connect">Connect</th>
         <th class="city text-right d-none d-md-table-cell" i18n="lightning.location">Location</th>
       </thead>
       <tbody *ngIf="nodes$ | async as response; else skeleton">

frontend/src/app/lightning/node/node-preview.component.html

@@ -49,7 +49,7 @@
           <tr *ngIf="!node.city && !node.country">
             <td i18n="lightning.location">Location</td>
             <td>
-              <span>unknown</span>
+              <span i18n="unknown">Unknown</span>
             </td>
           </tr>
         </tbody>

frontend/src/app/lightning/node/node.component.html

@@ -119,7 +119,7 @@
   </div>
 
   <ng-template #featurebits let-bits="bits">
-    <td i18n="lightning.features" class="text-truncate label">Features</td>
+    <td i18n="transaction.features|Transaction features" class="text-truncate label">Features</td>
     <td class="d-flex justify-content-between">
       <span class="text-truncate w-90">{{ bits }}</span>
       <button type="button" class="btn btn-outline-info btn-xs" (click)="toggleFeatures()" i18n="transaction.details|Transaction Details">Details</button>
@@ -133,11 +133,11 @@
           <h5>Raw bits</h5>
           <span class="text-wrap w-100"><small>{{ node.featuresBits }}</small></span>
         </div>
-        <h5>Decoded</h5>
+        <h5 i18n="lightning.decoded|Decoded">Decoded</h5>
         <table class="table table-borderless table-striped table-fixed">
           <thead>
             <th style="width: 13%">Bit</th>
-            <th>Name</th>
+            <th i18n="lightning.as-name">Name</th>
             <th style="width: 25%; text-align: right">Required</th>
           </thead>
           <tbody>

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html

@@ -1,22 +1,28 @@
-<div class="map-wrapper" [class]="style">
+<div class="map-wrapper" [class]="style" *ngIf="style !== 'graph'">
   <ng-container *ngIf="channelsObservable | async">
     <div *ngIf="chartOptions" [class]="'full-container ' + style + (fitContainer ? ' fit-container' : '')">
-      <div *ngIf="style === 'graph'" class="card-header">
-        <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
-          <span i18n="lightning.nodes-channels-world-map">Lightning Nodes Channels World Map</span>
-        </div>
-        <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
-      </div>
-
       <div class="chart" [class]="style" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
         (chartInit)="onChartInit($event)" (chartFinished)="onChartFinished($event)">
       </div>
-
       <div *ngIf="!chartOptions && style === 'nodepage'" style="padding-top: 30px"></div>
     </div>
-
     <div class="text-center loading-spinner" [class]="style" *ngIf="isLoading && !disableSpinner">
       <div class="spinner-border text-light"></div>
     </div>
   </ng-container>
 </div>
+
+<div class="full-container-graph" *ngIf="style === 'graph'">
+
+  <div class="card-header">
+    <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
+      <span i18n="lightning.nodes-channels-world-map">Lightning Nodes Channels World Map</span>
+    </div>
+    <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
+  </div>
+
+  <div *ngIf="channelsObservable | async" class="chart-graph" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    (chartInit)="onChartInit($event)" (chartFinished)="onChartFinished($event)">
+  </div>
+
+</div>

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss

@@ -143,3 +143,55 @@
   text-align: center;
   margin-top: 100px;
 }
+
+.full-container-graph {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 15px;
+  width: 100%;
+  height: calc(100vh - 225px);
+  min-height: 400px;
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
+}
+.full-container-graph.widget {
+  min-height: 240px;
+  height: 240px;
+  padding: 0px;
+}
+.full-container-graph.fit-container {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  min-height: 100px;
+
+  .chart {
+    padding: 0;
+    min-height: 100px;
+  }
+}
+
+.chart-graph {
+  display: flex;
+  flex: 1;
+  height: 100%;
+  padding-top: 30px;
+  padding-bottom: 20px;
+  padding-right: 10px;
+  @media (max-width: 992px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 829px) {
+    padding-bottom: 50px;
+  }
+  @media (max-width: 767px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 629px) {
+    padding-bottom: 55px;
+  }
+  @media (max-width: 567px) {
+    padding-bottom: 55px;
+  }
+}

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts

@@ -65,6 +65,7 @@ export class NodesChannelsMap implements OnInit {
     }
 
     if (this.style === 'graph') {
+      this.center = [0, 5];
       this.seoService.setTitle($localize`Lightning Nodes Channels World Map`);
       this.seoService.setDescription($localize`:@@meta.description.lightning.node-map:See the channels of non-Tor Lightning network nodes visualized on a world map. Hover/tap on points on the map for node names and details.`);
     }
@@ -238,7 +239,6 @@ export class NodesChannelsMap implements OnInit {
       title: title ?? undefined,
       tooltip: {},
       geo: {
-        top: 75,
         animation: false,
         silent: true,
         center: this.center,

frontend/src/app/master-page.module.ts

@@ -7,6 +7,7 @@ import { SharedModule } from './shared/shared.module';
 import { StartComponent } from './components/start/start.component';
 import { AddressComponent } from './components/address/address.component';
 import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
+import { CalculatorComponent } from './components/calculator/calculator.component';
 import { BlocksList } from './components/blocks-list/blocks-list.component';
 import { RbfList } from './components/rbf-list/rbf-list.component';
 
@@ -87,6 +88,10 @@ const routes: Routes = [
         loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule),
         data: { preload: browserWindowEnv && browserWindowEnv.LIGHTNING === true, networks: ['bitcoin'] },
       },
+      {
+        path: 'tools/calculator',
+        component: CalculatorComponent
+      },
     ],
   }
 ];

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

@@ -10,7 +10,7 @@ import { StateService } from './state.service';
 export class SeoService {
   network = '';
   baseTitle = 'mempool';
-  baseDescription = 'Explore the full Bitcoin ecosystem with The Mempool Open Project™.';
+  baseDescription = 'Explore the full Bitcoin ecosystem with The Mempool Open Source Project™.';
 
   canonicalLink: HTMLElement = document.getElementById('canonical');
 

frontend/src/app/shared/components/fee-rate/fee-rate.component.html

@@ -1,4 +1,4 @@
 <ng-container *ngIf="rateUnits$ | async as units">
-  <ng-container *ngIf="units !== 'wu'">{{ fee / (weight / 4) | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle">sat/vB</span></ng-container>
-  <ng-container *ngIf="units === 'wu'">{{ fee / weight | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle">sat/WU</span></ng-container>
+  <ng-container *ngIf="units !== 'wu'">{{ fee / (weight / 4) | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></ng-container>
+  <ng-container *ngIf="units === 'wu'">{{ fee / weight | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-weight-units|sat/WU">sat/WU</span></ng-container>
 </ng-container>

frontend/src/app/shared/components/global-footer/global-footer.component.html

@@ -38,45 +38,45 @@
     </div>
     <div class="row col-md-12 link-tree" [class]="{'services': isServicesPage}">
         <div class="links">
-          <p class="category">Explore</p>
-          <p><a [routerLink]="['/mining' | relativeUrl]">Mining Dashboard</a></p>
-          <p><a *ngIf="env.LIGHTNING" [routerLink]="['/lightning' | relativeUrl]">Lightning Dashboard</a></p>
-          <p><a [routerLink]="['/blocks' | relativeUrl]">Recent Blocks</a></p>
+          <p class="category" i18n="footer.explore">Explore</p>
+          <p><a [routerLink]="['/mining' | relativeUrl]" i18n="mining.mining-dashboard">Mining Dashboard</a></p>
+          <p><a *ngIf="env.LIGHTNING" [routerLink]="['/lightning' | relativeUrl]" i18n="master-page.lightning">Lightning Explorer</a></p>
+          <p><a [routerLink]="['/blocks' | relativeUrl]" i18n="dashboard.recent-blocks">Recent Blocks</a></p>
           <p><a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a></p>
           <p *ngIf="officialMempoolSpace"><a [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]" i18n="footer.connect-to-our-nodes">Connect to our Nodes</a></p>
-          <p><a [routerLink]="['/docs/api' | relativeUrl]">API Documentation</a></p>
+          <p><a [routerLink]="['/docs/api' | relativeUrl]" i18n="footer.api-documentation">API Documentation</a></p>
         </div>
         <div class="links">
-          <p class="category">Learn</p>
-          <p><a [routerLink]="['/docs/faq']" fragment="what-is-a-mempool">What is a mempool?</a></p>
-          <p><a [routerLink]="['/docs/faq']" fragment="what-is-a-block-explorer">What is a block explorer?</a></p>
-          <p><a [routerLink]="['/docs/faq']" fragment="what-is-a-mempool-explorer">What is a mempool explorer?</a></p>
-          <p><a [routerLink]="['/docs/faq']" fragment="why-is-transaction-stuck-in-mempool">Why isn't my transaction confirming?</a></p>
-          <p><a [routerLink]="['/docs/faq' | relativeUrl]">More FAQs ›</a></p>
+          <p class="category" i18n="footer.learn">Learn</p>
+          <p><a [routerLink]="['/docs/faq']" fragment="what-is-a-mempool" i18n="faq.what-is-a-mempool">What is a mempool?</a></p>
+          <p><a [routerLink]="['/docs/faq']" fragment="what-is-a-block-explorer" i18n="faq.what-is-a-block-exlorer">What is a block explorer?</a></p>
+          <p><a [routerLink]="['/docs/faq']" fragment="what-is-a-mempool-explorer" i18n="faq.what-is-a-mempool-exlorer">What is a mempool explorer?</a></p>
+          <p><a [routerLink]="['/docs/faq']" fragment="why-is-transaction-stuck-in-mempool" i18n="faq.why-isnt-my-transaction-confirming">Why isn't my transaction confirming?</a></p>
+          <p><a [routerLink]="['/docs/faq' | relativeUrl]" i18n="faq.more-faq">More FAQs &raquo;</a></p>
         </div>
 
         <div class="links" *ngIf="officialMempoolSpace || env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.LIQUID_TESTNET_ENABLED else toolBox" >
-          <p class="category">Networks</p>
-          <p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== '') && (currentNetwork !== 'mainnet')"><a [href]="networkLink('mainnet')">Mainnet Explorer</a></p>
-          <p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== 'testnet') && env.TESTNET_ENABLED"><a [href]="networkLink('testnet')">Testnet Explorer</a></p>
-          <p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== 'signet') && env.SIGNET_ENABLED"><a [href]="networkLink('signet')">Signet Explorer</a></p>
-          <p *ngIf="(officialMempoolSpace || env.LIQUID_ENABLED) && (currentNetwork !== 'liquidtestnet')"><a [href]="networkLink('liquidtestnet')">Liquid Testnet Explorer</a></p>
-          <p *ngIf="(officialMempoolSpace || env.LIQUID_ENABLED) && (currentNetwork !== 'liquid')"><a [href]="networkLink('liquid')">Liquid Explorer</a></p>
-          <p *ngIf="(officialMempoolSpace && (currentNetwork !== 'bisq'))"><a [href]="networkLink('bisq')">Bisq Explorer</a></p>
+          <p class="category" i18n="footer.networks">Networks</p>
+          <p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== '') && (currentNetwork !== 'mainnet')"><a [href]="networkLink('mainnet')" i18n="footer.mainnet-explorer">Mainnet Explorer</a></p>
+          <p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== 'testnet') && env.TESTNET_ENABLED"><a [href]="networkLink('testnet')" i18n="footer.testnet-explorer">Testnet Explorer</a></p>
+          <p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== 'signet') && env.SIGNET_ENABLED"><a [href]="networkLink('signet')" i18n="footer.signet-explorer">Signet Explorer</a></p>
+          <p *ngIf="(officialMempoolSpace || env.LIQUID_ENABLED) && (currentNetwork !== 'liquidtestnet')"><a [href]="networkLink('liquidtestnet')" i18n="footer.liquid-testnet-explorer">Liquid Testnet Explorer</a></p>
+          <p *ngIf="(officialMempoolSpace || env.LIQUID_ENABLED) && (currentNetwork !== 'liquid')"><a [href]="networkLink('liquid')" i18n="footer.liquid-explorer">Liquid Explorer</a></p>
+          <p *ngIf="(officialMempoolSpace && (currentNetwork !== 'bisq'))"><a [href]="networkLink('bisq')" i18n="footer.bisq-explorer">Bisq Explorer</a></p>
         </div>
         <ng-template #toolBox>
         <div class="links">
-          <p class="category">Tools</p>
-          <p><a [routerLink]="['/clock/mempool/0']">Clock (Mempool)</a></p>
-          <p><a [routerLink]="['/clock/mined/0']">Clock (Mined)</a></p>
-          <p><a [routerLink]="['/tools/calculator']">BTC/Fiat Converter</a></p>
+          <p class="category" i18n="footer.tools">Tools</p>
+          <p><a [routerLink]="['/clock/mempool/0']" i18n="footer.clock-mempool">Clock (Mempool)</a></p>
+          <p><a [routerLink]="['/clock/mined/0']" i18n="footer.clock-mined">Clock (Mined)</a></p>
+          <p><a [routerLink]="['/tools/calculator']" i18n="shared.calculator">Calculator</a></p>
         </div>
         </ng-template>
         <div class="links">
-          <p class="category">Legal</p>
+          <p class="category" i18n="footer.legal">Legal</p>
           <p><a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a></p>
           <p><a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a></p>
-          <p><a [routerLink]="['/trademark-policy']">Trademark Policy</a></p>
+          <p><a [routerLink]="['/trademark-policy']" i18n="shared.trademark-policy|Trademark Policy">Trademark Policy</a></p>
         </div>
     </div>
     <div class="row social-links">

frontend/src/app/shared/components/mempool-error/mempool-error.component.html

@@ -1,2 +1,2 @@
-<div class="alert alert-danger" [innerHTML]="errorContent">
+<div class="alert" [class]="alertClass" [innerHTML]="errorContent">
 </div>

frontend/src/app/shared/components/mempool-error/mempool-error.component.ts

@@ -33,6 +33,7 @@ export function isMempoolError(error: string) {
 })
 export class MempoolErrorComponent implements OnInit {
   @Input() error: string;
+  @Input() alertClass = 'alert-danger';
   errorContent: SafeHtml;
 
   constructor(private sanitizer: DomSanitizer) { }

frontend/src/resources/bimi.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny-ps" viewBox="0 0 241 241" xml:space="preserve"><title>Mempool Space K.K.</title><g><g><path fill="#2E3349" d="M241.37,211.23c0,16.56-13.43,29.99-29.99,29.99H30.36c-16.56,0-29.99-13.43-29.99-29.99V30.21    c0-16.56,13.43-29.99,29.99-29.99h181.02c16.56,0,29.99,13.43,29.99,29.99V211.23z"></path><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="120.8689" y1="68.6556" x2="120.8689" y2="301.1491"><stop offset="0" stop-color="#AE61FF"></stop><stop offset="1" stop-color="#13EFD8"></stop></linearGradient><path fill="url(#SVGID_1_)" d="M0.32,120.99v90.24c0,16.56,13.49,29.99,30.14,29.99h180.82c16.64,0,30.13-13.43,30.13-29.99    v-90.24H0.32z"></path></g><g><path fill="#FFFFFF" fill-opacity="0.3" d="M212.72,209c0,3.7-2.53,6.7-5.65,6.7h-31.24c-3.12,0-5.65-3-5.65-6.7V32.44c0-3.7,2.53-6.7,5.65-6.7h31.24    c3.12,0,5.65,3,5.65,6.7V209z"></path></g></g></svg>