Merge remote-tracking branch 'origin/master' into simon/angular-universal

frontend/src/app/app.constants.ts

@@ -56,13 +56,12 @@ export const languages: Language[] = [
    { code: 'fa', name: 'فارسی' },           // Persian
    { code: 'fr', name: 'Français' },        // French
 // { code: 'gl', name: 'Galego' },          // Galician
-   { code: 'ka', name: 'ქართული' },         // Georgian
-// { code: 'ko', name: '한국어' },          // Korean
+   { code: 'ko', name: '한국어' },          // Korean
 // { code: 'hr', name: 'Hrvatski' },        // Croatian
 // { code: 'id', name: 'Bahasa Indonesia' },// Indonesian
 // { code: 'it', name: 'Italiano' },        // Italian
 // { code: 'he', name: 'עברית' },           // Hebrew
-// { code: 'ka', name: 'ქართული' },         // Georgian
+   { code: 'ka', name: 'ქართული' },         // Georgian
 // { code: 'lv', name: 'Latviešu' },        // Latvian
 // { code: 'lt', name: 'Lietuvių' },        // Lithuanian
 // { code: 'hu', name: 'Magyar' },          // Hungarian
@@ -81,11 +80,11 @@ export const languages: Language[] = [
    { code: 'sl', name: 'Slovenščina' },     // Slovenian
 // { code: 'sr', name: 'Српски / srpski' }, // Serbian
 // { code: 'sh', name: 'Srpskohrvatski / српскохрватски' },// Serbo-Croatian
-// { code: 'fi', name: 'Suomi' },           // Finnish
+   { code: 'fi', name: 'Suomi' },           // Finnish
    { code: 'sv', name: 'Svenska' },         // Swedish
 // { code: 'th', name: 'ไทย' },             // Thai
    { code: 'tr', name: 'Türkçe' },          // Turkish
    { code: 'uk', name: 'Українська' },      // Ukrainian
-// { code: 'vi', name: 'Tiếng Việt' },      // Vietnamese
+   { code: 'vi', name: 'Tiếng Việt' },      // Vietnamese
    { code: 'zh', name: '中文' },            // Chinese
 ];

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

@@ -1,5 +1,5 @@
 <div class="container-xl">
-  <h1 style="float: left;" i18n="shared.address">Address</h1>
+  <h1 class="float-left" i18n="shared.address">Address</h1>
   <a [routerLink]="['/address/' | relativeUrl, addressString]" style="line-height: 56px; margin-left: 10px;">
     <span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
     <span class="d-none d-lg-inline">{{ addressString }}</span>

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

@@ -6,7 +6,7 @@
     <span i18n="shared.confidential">Confidential</span>
   </ng-template>
   <ng-template #default>
-    {{ satoshis / 100000000 | number : digitsInfo }}
+    &lrm;{{ satoshis / 100000000 | number : digitsInfo }}
     <ng-template [ngIf]="network === 'liquid'">L-</ng-template>
     <ng-template [ngIf]="network === 'testnet'">t</ng-template>BTC
   </ng-template>

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

@@ -21,10 +21,13 @@ export class AppComponent implements OnInit {
   ) {
     if (this.locale.startsWith('ar') || this.locale.startsWith('fa')) {
       this.dir = 'rtl';
+      this.class = 'rtl-layout';
     }
   }
 
   @HostBinding('attr.dir') dir = 'ltr';
+  @HostBinding('class') class;
+
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvents(event: KeyboardEvent) {
     if (event.target instanceof HTMLInputElement) {

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

@@ -12,7 +12,7 @@
         <div class="fee-span">
           {{ block.feeRange[1] | number:'1.0-0' }} - {{ block.feeRange[block.feeRange.length - 1] | number:'1.0-0' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
         </div>
-        <div class="block-size">{{ block.size | bytes: 2 }}</div>
+        <div class="block-size">&lrm;{{ block.size | bytes: 2 }}</div>
         <div class="transaction-count">
           <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
           <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>

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

@@ -8,17 +8,19 @@
         </span>
         <ng-template #inSync>
           <div class="progress sub-text">
-            <div class="progress-bar {{ mempoolInfoData.progressClass }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <span i18n="shared.vbytes-per-second">vBytes/s</span></div>
+            <div class="progress-bar {{ mempoolInfoData.progressClass }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
           </div>
         </ng-template>    
       </div>
       <div class="col">
-        <span class="unconfirmedTx"><span i18n="shared.unconfirmed">Unconfirmed</span> <span class="extra-text" i18n="shared.transactions">transactions</span>:</span>
+        <span class="unconfirmedTx"><ng-container i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</ng-container>:</span>
         <div class="sub-text">{{ mempoolInfoData.memPoolInfo.size | number }}</div>
       </div>
       <div class="col">
-        <span class="mempoolSize" i18n="footer.mempool-size">Mempool size:</span>
-        <div class="sub-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</div>
+        <span class="mempoolSize"><ng-container i18n="dashboard.mempool-size|Mempool size">Mempool size</ng-container>:</span>
+        <div class="sub-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData">{{ mempoolBlocksData.size | bytes }} (<ng-container *ngTemplateOutlet="mempoolBlocksData.blocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: mempoolBlocksData.blocks }"></ng-container>)</div>
+          <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} block</ng-template>
+          <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
       </div>
     </div>
   </div>

frontend/src/app/components/latest-blocks/latest-blocks.component.html

@@ -1,5 +1,5 @@
 <div class="container-xl">
-  <h1 style="float: left;" i18n="latest-blocks.blocks">Blocks</h1>
+  <h1 class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
   <br>
 
   <div class="clearfix"></div>

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -10,7 +10,7 @@
           <div class="fee-span">
             {{ projectedBlock.feeRange[0] | number:'1.0-0' }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
           </div>
-          <div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
+          <div class="block-size">&lrm;{{ projectedBlock.blockSize | bytes: 2 }}</div>
           <div class="transaction-count">
             <ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
             <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
@@ -26,8 +26,8 @@
           </div>
           <ng-template #mergedBlock>
             <div class="time-difference">
-              <ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / 1000000 | ceil }"></ng-container>
-              <b>(<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>)</b>
+              <b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / 1000000 | ceil }"></ng-container>)</b>
+              <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} blocks</ng-template>
             </div>
           </ng-template>
         </div>

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

@@ -1,4 +1,4 @@
-<div id="blockchain-container">
+<div id="blockchain-container" dir="ltr">
   <app-blockchain></app-blockchain>
 </div>
 

frontend/src/app/components/status-view/status-view.component.ts

@@ -1,9 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { WebsocketService } from 'src/app/services/websocket.service';
 
 @Component({
   selector: 'app-status-view',
   templateUrl: './status-view.component.html'
 })
-export class StatusViewComponent {
-  constructor() { }
+export class StatusViewComponent implements OnInit {
+  constructor(
+    private websocketService: WebsocketService,
+  ) { }
+
+  ngOnInit() {
+    this.websocketService.want(['mempool-blocks', 'stats']);
+    this.websocketService.want(['blocks', 'stats']);
+  }
 }

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

@@ -173,7 +173,7 @@
 
     <app-transactions-list #txList [transactions]="[tx]" [transactionPage]="true"></app-transactions-list>
 
-    <h2 i18n="transaction.details">Details</h2>
+    <h2 class="text-left" i18n="transaction.details">Details</h2>
     <div class="box">
       <table class="table table-borderless table-striped">
         <tbody>

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

@@ -1,6 +1,6 @@
 <ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
   <div *ngIf="!transactionPage" class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
-    <a [routerLink]="['/tx/' | relativeUrl, tx.txid]" [state]="{ data: tx }">
+    <a class="float-left" [routerLink]="['/tx/' | relativeUrl, tx.txid]" [state]="{ data: tx }">
       <span style="float: left;" class="d-block d-md-none">{{ tx.txid | shortenString : 16 }}</span>
       <span style="float: left;" class="d-none d-md-block">{{ tx.txid }}</span>
     </a>
@@ -69,32 +69,32 @@
                       <ng-template [ngIf]="vin.scriptsig">
                         <tr>
                           <td i18n="transactions-list.scriptsig.asm|ScriptSig (ASM)">ScriptSig (ASM)</td>
-                          <td [innerHTML]="vin.scriptsig_asm | asmStyler"></td>
+                          <td style="text-align: left;" [innerHTML]="vin.scriptsig_asm | asmStyler"></td>
                         </tr>
                         <tr>
                           <td i18n="transactions-list.scriptsig.hex|ScriptSig (HEX)">ScriptSig (HEX)</td>
-                          <td>{{ vin.scriptsig }}</td>
+                          <td style="text-align: left;">{{ vin.scriptsig }}</td>
                         </tr>
                       </ng-template>
                       <tr *ngIf="vin.witness">
                         <td i18n="transactions-list.witness">Witness</td>
-                        <td>{{ vin.witness.join(' ') }}</td>
+                        <td style="text-align: left;">{{ vin.witness.join(' ') }}</td>
                       </tr>
                       <tr *ngIf="vin.inner_redeemscript_asm">
                         <td i18n="transactions-list.p2sh-redeem-script">P2SH redeem script</td>
-                        <td [innerHTML]="vin.inner_redeemscript_asm | asmStyler"></td>
+                        <td style="text-align: left;" [innerHTML]="vin.inner_redeemscript_asm | asmStyler"></td>
                       </tr>
                       <tr *ngIf="vin.inner_witnessscript_asm">
                         <td i18n="transactions-list.p2wsh-witness-script">P2WSH witness script</td>
-                        <td [innerHTML]="vin.inner_witnessscript_asm | asmStyler"></td>
+                        <td style="text-align: left;" [innerHTML]="vin.inner_witnessscript_asm | asmStyler"></td>
                       </tr>
                       <tr>
                         <td i18n="transactions-list.nsequence">nSequence</td>
-                        <td>{{ formatHex(vin.sequence) }}</td>
+                        <td style="text-align: left;">{{ formatHex(vin.sequence) }}</td>
                       </tr>
                       <tr *ngIf="vin.prevout">
                         <td i18n="transactions-list.previous-output-script">Previous output script</td>
-                        <td [innerHTML]="vin.prevout.scriptpubkey_asm | asmStyler">{{ vin.prevout.scriptpubkey_type ? ('(' + vin.prevout.scriptpubkey_type + ')') : '' }}"</td>
+                        <td style="text-align: left;" [innerHTML]="vin.prevout.scriptpubkey_asm | asmStyler">{{ vin.prevout.scriptpubkey_type ? ('(' + vin.prevout.scriptpubkey_type + ')') : '' }}"</td>
                       </tr>
                     </tbody>
                   </table>
@@ -164,19 +164,19 @@
                     <tbody>
                       <tr *ngIf="vout.scriptpubkey_type">
                         <td i18n="transactions-list.vout.scriptpubkey-type">Type</td>
-                        <td>{{ vout.scriptpubkey_type.toUpperCase() }}</td>
+                        <td style="text-align: left;">{{ vout.scriptpubkey_type.toUpperCase() }}</td>
                       </tr>
                       <tr>
                         <td i18n="transactions-list.scriptpubkey.asm|ScriptPubKey (ASM)">ScriptPubKey (ASM)</td>
-                        <td [innerHTML]="vout.scriptpubkey_asm | asmStyler"></td>
+                        <td style="text-align: left;" [innerHTML]="vout.scriptpubkey_asm | asmStyler"></td>
                       </tr>
                       <tr>
                         <td i18n="transactions-list.scriptpubkey.hex|ScriptPubKey (HEX)">ScriptPubKey (HEX)</td>
-                        <td>{{ vout.scriptpubkey }}</td>
+                        <td style="text-align: left;">{{ vout.scriptpubkey }}</td>
                       </tr>
                       <tr *ngIf="vout.scriptpubkey_type == 'op_return'">
                         <td>OP_RETURN <span i18n="transactions-list.vout.scriptpubkey-type.data">data</span></td>
-                        <td>{{ vout.scriptpubkey_asm | hex2ascii }}</td>
+                        <td style="text-align: left;">{{ vout.scriptpubkey_asm | hex2ascii }}</td>
                       </tr>
                     </tbody>
                   </table>
@@ -206,7 +206,7 @@
             <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
           </button>
           <ng-template #unconfirmedButton>
-            <button type="button" class="btn btn-sm btn-danger mt-2" i18n="transactions-list.unconfirmed">Unconfirmed</button>
+            <button type="button" class="btn btn-sm btn-danger mt-2" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
           </ng-template>
           &nbsp;
         </span>

frontend/src/locale/messages.xlf

@@ -86,6 +86,10 @@
           <context context-type="sourcefile">src/app/components/transaction/transaction.component.html</context>
           <context context-type="linenumber">22</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
+          <context context-type="linenumber">209</context>
+        </context-group>
         <note priority="1" from="description">Transaction unconfirmed state</note>
         <note priority="1" from="meaning">transaction.unconfirmed</note>
       </trans-unit>
@@ -410,6 +414,10 @@
           <context context-type="sourcefile">src/app/components/transaction/transaction.component.html</context>
           <context context-type="linenumber">297</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/footer/footer.component.html</context>
+          <context context-type="linenumber">22</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
           <context context-type="linenumber">165</context>
@@ -426,6 +434,10 @@
           <context context-type="sourcefile">src/app/components/mempool-blocks/mempool-blocks.component.html</context>
           <context context-type="linenumber">30</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/footer/footer.component.html</context>
+          <context context-type="linenumber">23</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
           <context context-type="linenumber">166</context>
@@ -585,18 +597,6 @@
         <note priority="1" from="description">sat</note>
         <note priority="1" from="meaning">shared.sat</note>
       </trans-unit>
-      <trans-unit id="dbc2df5fb208e52733f39fc22e55d0b4b38e420f" datatype="html">
-        <source>Unconfirmed</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/transactions-list/transactions-list.component.html</context>
-          <context context-type="linenumber">209</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/footer/footer.component.html</context>
-          <context context-type="linenumber">16</context>
-        </context-group>
-        <note priority="1" from="description">transactions-list.unconfirmed</note>
-      </trans-unit>
       <trans-unit id="30751732ff4b8f6ddb2a906e0173072ac29d412a" datatype="html">
         <source>Confidential</source>
         <context-group purpose="location">
@@ -1329,21 +1329,31 @@
         </context-group>
         <note priority="1" from="description">footer.tx-vbytes-per-second</note>
       </trans-unit>
-      <trans-unit id="3be4e3c0a506f2d238c116f1bdeeae8da389efa3" datatype="html">
-        <source>transactions</source>
+      <trans-unit id="60cd6fa18f925b42065d8cfb1a791efdc228b4c3" datatype="html">
+        <source>Unconfirmed</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/footer/footer.component.html</context>
           <context context-type="linenumber">16</context>
         </context-group>
-        <note priority="1" from="description">shared.transactions</note>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
+          <context context-type="linenumber">170</context>
+        </context-group>
+        <note priority="1" from="description">Unconfirmed count</note>
+        <note priority="1" from="meaning">dashboard.unconfirmed</note>
       </trans-unit>
-      <trans-unit id="7b8ceef54c3151c632777d309944c67d676a585f" datatype="html">
-        <source>Mempool size:</source>
+      <trans-unit id="6f7832e2e8db3c4b16c41681ba334a2ab9726cc3" datatype="html">
+        <source>Mempool size</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/footer/footer.component.html</context>
           <context context-type="linenumber">20</context>
         </context-group>
-        <note priority="1" from="description">footer.mempool-size</note>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
+          <context context-type="linenumber">162</context>
+        </context-group>
+        <note priority="1" from="description">Mempool size</note>
+        <note priority="1" from="meaning">dashboard.mempool-size</note>
       </trans-unit>
       <trans-unit id="a5950b2ce4c3ea32de91034de8269781eb333d73" datatype="html">
         <source>Backend is synchronizing</source>
@@ -1357,13 +1367,18 @@
         </context-group>
         <note priority="1" from="description">footer.backend-is-synchronizing</note>
       </trans-unit>
-      <trans-unit id="64d40decf56cbb1187e01f1fe47b92e10ddfa45d" datatype="html">
-        <source>vBytes/s</source>
+      <trans-unit id="50904e472d4671388a20fbbb1ee9dfc0a4586fa1" datatype="html">
+        <source>vB/s</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/footer/footer.component.html</context>
           <context context-type="linenumber">11</context>
         </context-group>
-        <note priority="1" from="description">shared.vbytes-per-second</note>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
+          <context context-type="linenumber">187</context>
+        </context-group>
+        <note priority="1" from="description">vB/s</note>
+        <note priority="1" from="meaning">shared.vbytes-per-second</note>
       </trans-unit>
       <trans-unit id="mempool-block.next.block" datatype="html">
         <source>Next block</source>
@@ -1760,24 +1775,6 @@
         </context-group>
         <note priority="1" from="description">dashboard.collapse</note>
       </trans-unit>
-      <trans-unit id="6f7832e2e8db3c4b16c41681ba334a2ab9726cc3" datatype="html">
-        <source>Mempool size</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
-          <context context-type="linenumber">162</context>
-        </context-group>
-        <note priority="1" from="description">Mempool size</note>
-        <note priority="1" from="meaning">dashboard.mempool-size</note>
-      </trans-unit>
-      <trans-unit id="60cd6fa18f925b42065d8cfb1a791efdc228b4c3" datatype="html">
-        <source>Unconfirmed</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
-          <context context-type="linenumber">170</context>
-        </context-group>
-        <note priority="1" from="description">Unconfirmed count</note>
-        <note priority="1" from="meaning">dashboard.unconfirmed</note>
-      </trans-unit>
       <trans-unit id="926c571b25cca7e2a294619f145960c0cd3848b6" datatype="html">
         <source>Incoming transactions</source>
         <context-group purpose="location">
@@ -1786,15 +1783,6 @@
         </context-group>
         <note priority="1" from="description">dashboard.incoming-transactions</note>
       </trans-unit>
-      <trans-unit id="50904e472d4671388a20fbbb1ee9dfc0a4586fa1" datatype="html">
-        <source>vB/s</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/dashboard/dashboard.component.html</context>
-          <context context-type="linenumber">187</context>
-        </context-group>
-        <note priority="1" from="description">vB/s</note>
-        <note priority="1" from="meaning">shared.vbytes-per-second</note>
-      </trans-unit>
       <trans-unit id="125c154b4a63daa7e993e1f4a8bea4c98a645142" datatype="html">
         <source>Difficulty adjustment</source>
         <context-group purpose="location">

frontend/src/styles.scss

@@ -450,3 +450,52 @@ th {
 .crypto { color: #fa3d3d }
 .locktime { color: #ff8c00 }
 .reserved { color: #ff8c00 }
+
+.rtl-layout {
+    .arrow {
+        @extend .arrow;
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
+    }
+
+    .table td {
+        text-align: right;
+    }
+
+    .table th {
+        text-align: right;
+    }
+
+    .title-block {
+        text-align: right;
+    }
+
+    .mr-3 {
+        @extend .ml-3;
+        margin-right: 0 !important;
+    }
+
+    .mr-1 {
+        @extend .ml-1;
+    }
+
+    .float-left {
+        float: right !important;
+    }
+
+    .float-right {
+        float: left !important;
+    }
+
+    .text-left {
+        text-align: right !important;
+    }
+
+    .text-right {
+        text-align: left !important;
+    }
+
+    .bitcoin-block {
+        direction: rtl;
+    }
+}