Identify and display mining pool.

fixes #59

backend/src/interfaces.ts

@@ -76,7 +76,7 @@ export interface Vout {
   scriptpubkey: string;
   scriptpubkey_asm: string;
   scriptpubkey_type: string;
-  scriptpubkey_address: string;
+  scriptpubkey_address?: string;
   value: number;
 
   asset?: string;

frontend/.gitignore

@@ -47,3 +47,4 @@ Thumbs.db
 
 src/resources/assets.json
 src/resources/assets.minimal.json
+src/resources/pools.json

frontend/package.json

@@ -23,8 +23,8 @@
     "ng": "ng",
     "start": "npm run sync-assets-dev && ng serve --proxy-config proxy.conf.json",
     "build": "ng build --prod && npm run sync-assets",
-    "sync-assets": "node sync-asset-registry.js",
-    "sync-assets-dev": "node sync-asset-registry.js dev",
+    "sync-assets": "node sync-assets.js",
+    "sync-assets-dev": "node sync-assets.js dev",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

frontend/src/app/app.module.ts

@@ -49,6 +49,7 @@ import { AssetComponent } from './components/asset/asset.component';
 import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe';
 import { AssetsComponent } from './assets/assets.component';
 import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
+import { MinerComponent } from './pipes/miner/miner.component';
 
 @NgModule({
   declarations: [
@@ -88,6 +89,7 @@ import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
     ScriptpubkeyTypePipe,
     AssetsComponent,
     RelativeUrlPipe,
+    MinerComponent,
   ],
   imports: [
     BrowserModule,

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

@@ -49,12 +49,12 @@
               <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
                 <tr>
                   <td>Total fees</td>
-                  <td><app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-8"></app-amount> (<app-fiat [value]="fees * 100000000" digitsInfo="1.0-0"></app-fiat>)</td>
+                  <td><app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2"></app-amount> (<app-fiat [value]="fees * 100000000" digitsInfo="1.0-0"></app-fiat>)</td>
                 </tr>
                 <tr>
                   <td>Reward + fees:</td>
                   <td>
-                    <app-amount [satoshis]="(blockSubsidy + fees) * 100000000" digitsInfo="1.2-8"></app-amount> (<app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>)
+                    <app-amount [satoshis]="(blockSubsidy + fees) * 100000000" digitsInfo="1.2-2"></app-amount> (<app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>)
                   </td>
                 </tr>
               </ng-template>
@@ -68,6 +68,10 @@
                   <td><span class="skeleton-loader"></span></td>
                 </tr>
               </ng-template>
+              <tr>
+                <td>Miner</td>
+                <td><app-miner [coinbaseTransaction]="transactions && transactions[0]"></app-miner></td>
+              </tr>
             </tbody>
           </table>
         </div>

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

@@ -37,6 +37,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     .pipe(
       switchMap((params: ParamMap) => {
         const blockHash: string = params.get('id') || '';
+        this.block = undefined;
         this.error = undefined;
         this.fees = undefined;
 

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

@@ -57,7 +57,7 @@
   width: 100%;
   left: -12px;
   text-shadow: 0px 32px 3px #111;
-  z-index: 100;
+  z-index: 1;
 }
 
 .bitcoin-block::after {

frontend/src/app/pipes/miner/miner.component.html

@@ -0,0 +1,12 @@
+<ng-template [ngIf]="loading" [ngIfElse]="done">
+  <span class="skeleton-loader"></span>
+</ng-template>
+
+<ng-template #done>
+  <ng-template [ngIf]="miner" [ngIfElse]="unknownMiner">
+    <a [title]="title" [href]="url" target="_blank" class="badge badge-primary">{{ miner }}</a>
+  </ng-template>
+  <ng-template #unknownMiner>
+    <span class="badge badge-secondary">Unknown</span>
+  </ng-template>
+</ng-template>

frontend/src/app/pipes/miner/miner.component.scss

@@ -0,0 +1,3 @@
+.badge {
+  font-size: 14px;
+}

frontend/src/app/pipes/miner/miner.component.ts

@@ -0,0 +1,68 @@
+import { Component, Input, OnChanges } from '@angular/core';
+import { AssetsService } from 'src/app/services/assets.service';
+import { Transaction } from 'src/app/interfaces/electrs.interface';
+
+@Component({
+  selector: 'app-miner',
+  templateUrl: './miner.component.html',
+  styleUrls: ['./miner.component.scss'],
+})
+export class MinerComponent implements OnChanges {
+  @Input() coinbaseTransaction: Transaction;
+  miner = '';
+  title = '';
+  url = '';
+  loading = true;
+
+  constructor(
+    private assetsService: AssetsService,
+  ) { }
+
+  ngOnChanges() {
+    this.loading = true;
+    this.findMinerFromCoinbase();
+  }
+
+  findMinerFromCoinbase() {
+    if (this.coinbaseTransaction == null || this.coinbaseTransaction.vin == null || this.coinbaseTransaction.vin.length === 0) {
+      return null;
+    }
+
+    this.assetsService.getMiningPools$.subscribe((pools) => {
+      for (const vout of this.coinbaseTransaction.vout) {
+        if (!vout.scriptpubkey_address) {
+          continue;
+        }
+
+        if (pools.payout_addresses[vout.scriptpubkey_address]) {
+            this.miner = pools.payout_addresses[vout.scriptpubkey_address].name;
+            this.title = 'Identified by payout address: ' + vout.scriptpubkey_address;
+            this.url = pools.payout_addresses[vout.scriptpubkey_address].link;
+            break;
+        }
+
+        for (const tag in pools.coinbase_tags) {
+          if (pools.coinbase_tags.hasOwnProperty(tag)) {
+            const coinbaseAscii = this.hex2ascii(this.coinbaseTransaction.vin[0].scriptsig);
+            if (coinbaseAscii.indexOf(tag) > -1) {
+              this.miner = pools.coinbase_tags[tag].name;
+              this.title = 'Identified by coinbase tag: ' + tag;
+              this.url = pools.coinbase_tags[tag].link;
+              break;
+            }
+          }
+        }
+      }
+
+      this.loading = false;
+    });
+  }
+
+  hex2ascii(hex: string) {
+    let str = '';
+    for (let i = 0; i < hex.length; i += 2) {
+      str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
+    }
+    return str;
+  }
+}

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

@@ -9,11 +9,13 @@ import { shareReplay } from 'rxjs/operators';
 export class AssetsService {
   getAssetsJson$: Observable<any>;
   getAssetsMinimalJson$: Observable<any>;
+  getMiningPools$: Observable<any>;
 
   constructor(
     private httpClient: HttpClient,
   ) {
     this.getAssetsJson$ = this.httpClient.get('/resources/assets.json').pipe(shareReplay());
     this.getAssetsMinimalJson$ = this.httpClient.get('/resources/assets.minimal.json').pipe(shareReplay());
+    this.getMiningPools$ = this.httpClient.get('/resources/pools.json').pipe(shareReplay());
   }
 }

frontend/sync-assets.js

@@ -17,3 +17,5 @@ console.log('Downloading assets');
 download(PATH + 'assets.json', 'https://raw.githubusercontent.com/Blockstream/asset_registry_db/master/index.json');
 console.log('Downloading assets minimal');
 download(PATH + 'assets.minimal.json', 'https://raw.githubusercontent.com/Blockstream/asset_registry_db/master/index.minimal.json');
+console.log('Downloading mining pools info');
+download(PATH + 'pools.json', 'https://raw.githubusercontent.com/btccom/Blockchain-Known-Pools/master/pools.json');