Merge branch 'master' into simon/angular-universal

* master: Tweak ASM opcode styling colors Add some color and styling to the Bitcoin ASM opcodes Correcting title text on graph invert button. Modify upgrade script to include "tag @ hash" in notification msg Adding a button to invert the graph globally. Display P2PK instead of OP_RETURN fixes #161 Improved utxo script design. fixes #46 Adding prevout script. Fixed padding. refs #46 Correcting details button padding on mobile. Fix nginx.conf reverse proxy cache URL path for sponsor images Add missing "engines" metadata into package-lock.json Upgrade backend/package-lock.json to version 2 Toggle display UTXO details and scripts for transactions fixes #46 Axios error handle sponsor proxy requests. Replacing request.js with axios fixes #153 Add basic websocket error handler as emergency fix for site crashing # Conflicts: # frontend/src/app/services/storage.service.ts
2020-11-22 20:53:12 +07:00 · 2020-11-22 20:53:12 +07:00 · 75726df275
commit 75726df275
parent 36022680cb 30fb0bad78
24 changed files with 1601 additions and 665 deletions
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/backend/package.json
+++ b/backend/package.json
@ -25,19 +25,19 @@
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
+    "@types/axios": "^0.14.0",
+    "axios": "^0.21.0",
    "express": "^4.17.1",
    "locutus": "^2.0.12",
    "mysql2": "^1.6.1",
    "node-worker-threads-pool": "^1.4.2",
-    "request": "^2.88.2",
    "ws": "^7.3.1"
  },
  "devDependencies": {
    "@types/compression": "^1.0.1",
    "@types/express": "^4.17.2",
-    "@types/request": "^2.48.2",
-    "@types/ws": "^6.0.4",
    "@types/locutus": "^0.0.6",
+    "@types/ws": "^6.0.4",
    "tslint": "~6.1.0",
    "typescript": "~3.9.7"
  }
--- a/backend/src/api/bisq/bisq.ts
+++ b/backend/src/api/bisq/bisq.ts
@ -1,6 +1,6 @@
 import config from '../../config';
 import * as fs from 'fs';
-import * as request from 'request';
+import axios from 'axios';
 import { BisqBlocks, BisqBlock, BisqTransaction, BisqStats, BisqTrade } from './interfaces';
 import { Common } from '../common';
 import { Block } from '../../interfaces';
@ -138,18 +138,19 @@ class Bisq {
  }

  private updatePrice() {
-    request('https://bisq.markets/api/trades/?market=bsq_btc', { json: true }, (err, res, trades: BisqTrade[]) => {
-      if (err || !Array.isArray(trades)) { return logger.err('Error updating Bisq market price: ' + err); }
-
-      const prices: number[] = [];
-      trades.forEach((trade) => {
-        prices.push(parseFloat(trade.price) * 100000000);
-      });
-      prices.sort((a, b) => a - b);
-      this.price = Common.median(prices);
-      if (this.priceUpdateCallbackFunction) {
-        this.priceUpdateCallbackFunction(this.price);
-      }
+    axios.get<BisqTrade[]>('https://bisq.markets/api/trades/?market=bsq_btc')
+      .then((response) => {
+        const prices: number[] = [];
+        response.data.forEach((trade) => {
+          prices.push(parseFloat(trade.price) * 100000000);
+        });
+        prices.sort((a, b) => a - b);
+        this.price = Common.median(prices);
+        if (this.priceUpdateCallbackFunction) {
+          this.priceUpdateCallbackFunction(this.price);
+        }
+    }).catch((err) => {
+      logger.err('Error updating Bisq market price: ' + err);
    });
  }

--- a/backend/src/api/bitcoin/electrs-api.ts
+++ b/backend/src/api/bitcoin/electrs-api.ts
@ -1,6 +1,6 @@
 import config from '../../config';
 import { Transaction, Block, MempoolInfo } from '../../interfaces';
-import * as request from 'request';
+import axios from 'axios';

 class ElectrsApi {

@ -8,138 +8,48 @@ class ElectrsApi {
  }

  getMempoolInfo(): Promise<MempoolInfo> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS.REST_API_URL + '/mempool', { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject('getMempoolInfo error: ' + err.message || err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          if (typeof response.count !== 'number') {
-            reject('Empty data');
-            return;
-          }
-          resolve({
-            size: response.count,
-            bytes: response.vsize,
-          });
-        }
+    return axios.get<any>(config.ELECTRS.REST_API_URL + '/mempool', { timeout: 10000 })
+      .then((response) => {
+        return {
+          size: response.data.count,
+          bytes: response.data.vsize,
+        };
      });
-    });
  }

  getRawMempool(): Promise<Transaction['txid'][]> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS.REST_API_URL + '/mempool/txids', { json: true, timeout: 10000, forever: true }, (err, res, response) => {
-        if (err) {
-          reject('getRawMempool error: ' + err.message || err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          if (response.constructor === Array) {
-            resolve(response);
-          } else {
-            reject('returned invalid data');
-          }
-        }
-      });
-    });
+    return axios.get<Transaction['txid'][]>(config.ELECTRS.REST_API_URL + '/mempool/txids')
+      .then((response) => response.data);
  }

  getRawTransaction(txId: string): Promise<Transaction> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS.REST_API_URL + '/tx/' + txId, { json: true, timeout: 10000, forever: true }, (err, res, response) => {
-        if (err) {
-          reject('getRawTransaction error: ' + err.message || err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          if (response.constructor === Object) {
-            resolve(response);
-          } else {
-            reject('returned invalid data');
-          }
-        }
-      });
-    });
+    return axios.get<Transaction>(config.ELECTRS.REST_API_URL + '/tx/' + txId)
+      .then((response) => response.data);
  }

  getBlockHeightTip(): Promise<number> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS.REST_API_URL + '/blocks/tip/height', { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject('getBlockHeightTip error: ' + err.message || err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          resolve(response);
-        }
-      });
-    });
+    return axios.get<number>(config.ELECTRS.REST_API_URL + '/blocks/tip/height')
+      .then((response) => response.data);
  }

  getTxIdsForBlock(hash: string): Promise<string[]> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS.REST_API_URL + '/block/' + hash + '/txids', { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject('getTxIdsForBlock error: ' + err.message || err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          if (response.constructor === Array) {
-            resolve(response);
-          } else {
-            reject('returned invalid data');
-          }
-        }
-      });
-    });
+    return axios.get<string[]>(config.ELECTRS.REST_API_URL + '/block/' + hash + '/txids')
+      .then((response) => response.data);
  }

  getBlockHash(height: number): Promise<string> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS.REST_API_URL + '/block-height/' + height, { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject('getBlockHash error: ' + err.message || err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else  {
-          resolve(response);
-        }
-      });
-    });
+    return axios.get<string>(config.ELECTRS.REST_API_URL + '/block-height/' + height)
+      .then((response) => response.data);
  }

  getBlocksFromHeight(height: number): Promise<string> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS.REST_API_URL + '/blocks/' + height, { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject('getBlocksFromHeight error: ' + err.message || err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else  {
-          resolve(response);
-        }
-      });
-    });
+    return axios.get<string>(config.ELECTRS.REST_API_URL + '/blocks/' + height)
+      .then((response) => response.data);
  }

  getBlock(hash: string): Promise<Block> {
-    return new Promise((resolve, reject) => {
-      request(config.ELECTRS.REST_API_URL + '/block/' + hash, { json: true, timeout: 10000 }, (err, res, response) => {
-        if (err) {
-          reject('getBlock error: ' + err.message || err);
-        } else if (res.statusCode !== 200) {
-          reject(response);
-        } else {
-          if (response.constructor === Object) {
-            resolve(response);
-          } else {
-            reject('getBlock returned invalid data');
-          }
-        }
-      });
-    });
+    return axios.get<Block>(config.ELECTRS.REST_API_URL + '/block/' + hash)
+      .then((response) => response.data);
  }
 }

--- a/backend/src/api/donations.ts
+++ b/backend/src/api/donations.ts
@ -1,12 +1,12 @@
 import config from '../config';
-import * as request from 'request';
+import axios from 'axios';
 import { DB } from '../database';
 import logger from '../logger';

 class Donations {
  private notifyDonationStatusCallback: ((invoiceId: string) => void) | undefined;
  private options = {
-    baseUrl: config.SPONSORS.BTCPAY_URL,
+    baseURL: config.SPONSORS.BTCPAY_URL,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': config.SPONSORS.BTCPAY_AUTH,
@ -34,7 +34,7 @@ class Donations {
    this.notifyDonationStatusCallback = fn;
  }

-  $createRequest(amount: number, orderId: string): Promise<any> {
+  async $createRequest(amount: number, orderId: string): Promise<any> {
    logger.notice('New invoice request. Handle: ' + orderId + ' Amount: ' + amount + ' BTC');

    const postData = {
@ -43,30 +43,21 @@ class Donations {
      'currency': 'BTC',
      'itemDesc': 'Sponsor mempool.space',
      'notificationUrl': config.SPONSORS.BTCPAY_WEBHOOK_URL,
-      'redirectURL': 'https://mempool.space/about'
+      'redirectURL': 'https://mempool.space/about',
+    };
+    const response = await axios.post('/invoices', postData, this.options);
+    return {
+      id: response.data.data.id,
+      amount: parseFloat(response.data.data.btcPrice),
+      addresses: response.data.data.addresses,
    };
-    return new Promise((resolve, reject) => {
-      request.post({
-        uri: '/invoices',
-        json: postData,
-        ...this.options,
-      }, (err, res, body) => {
-        if (err) { return reject(err); }
-        const formattedBody = {
-          id: body.data.id,
-          amount: parseFloat(body.data.btcPrice),
-          addresses: body.data.addresses,
-        };
-        resolve(formattedBody);
-      });
-    });
  }

  async $handleWebhookRequest(data: any): Promise<void> {
    if (!data || !data.id) {
      return;
    }
-    const response = await this.getStatus(data.id);
+    const response = await this.$getStatus(data.id);
    logger.notice(`Received BTCPayServer webhook. Invoice ID: ${data.id} Status: ${response.status} BTC Paid: ${response.btcPaid}`);
    if (response.status !== 'complete' && response.status !== 'confirmed' && response.status !== 'paid') {
      return;
@ -128,19 +119,11 @@ class Donations {
    }
  }

-  private getStatus(id: string): Promise<any> {
-    return new Promise((resolve, reject) => {
-      logger.debug('Fetching status for invoice: ' + id);
-      request.get({
-        uri: '/invoices/' + id,
-        json: true,
-        ...this.options,
-      }, (err, res, body) => {
-        if (err) { return reject(err); }
-        logger.debug('Invoice status received: ' + JSON.stringify(body.data));
-        resolve(body.data);
-      });
-    });
+  private async $getStatus(id: string): Promise<any> {
+    logger.debug('Fetching status for invoice: ' + id);
+    const response = await axios.get('/invoices/' + id, this.options);
+    logger.debug('Invoice status received: ' + JSON.stringify(response.data));
+    return response.data.data;
  }

  private async $addDonationToDatabase(btcPaid: number, handle: string, twitter_id: number | null,
@ -182,34 +165,21 @@ class Donations {
  }

  private async $getTwitterUserData(handle: string): Promise<any> {
-    return new Promise((resolve, reject) => {
-      logger.debug('Fetching Twitter API data...');
-      request.get({
-        uri: `https://api.twitter.com/1.1/users/show.json?screen_name=${handle}`,
-        json: true,
-        headers: {
-          Authorization: 'Bearer ' + config.SPONSORS.TWITTER_BEARER_AUTH
-        },
-      }, (err, res, body) => {
-        if (err) { return reject(err); }
-        logger.debug('Twitter user data fetched:' + JSON.stringify(body.data));
-        resolve(body);
-      });
+    logger.debug('Fetching Twitter API data...');
+    const res = await axios.get(`https://api.twitter.com/1.1/users/show.json?screen_name=${handle}`, {
+      headers: {
+        Authorization: 'Bearer ' + config.SPONSORS.TWITTER_BEARER_AUTH
+      }
    });
+    logger.debug('Twitter user data fetched:' + JSON.stringify(res.data));
+    return res.data;
  }

  private async $downloadProfileImageBlob(url: string): Promise<string> {
-    return new Promise((resolve, reject) => {
-      logger.debug('Fetching image blob...');
-      request.get({
-        uri: url,
-        encoding: null,
-      }, (err, res, body) => {
-        if (err) { return reject(err); }
-        logger.debug('Image downloaded.');
-        resolve(Buffer.from(body, 'utf8').toString('base64'));
-      });
-    });
+    logger.debug('Fetching image blob...');
+    const res = await axios.get(url, { responseType: 'arraybuffer' });
+    logger.debug('Image downloaded.');
+    return Buffer.from(res.data, 'utf8').toString('base64');
  }

  private async refreshSponsors(): Promise<void> {
--- a/backend/src/api/fiat-conversion.ts
+++ b/backend/src/api/fiat-conversion.ts
@ -1,5 +1,5 @@
-import * as request from 'request';
 import logger from '../logger';
+import axios from 'axios';

 class FiatConversion {
  private tickers = {
@ -20,13 +20,13 @@ class FiatConversion {
    return this.tickers;
  }

-  private updateCurrency() {
-    request('https://api.opennode.co/v1/rates', { json: true }, (err, res, body) => {
-      if (err) { return logger.err('Error updating currency from OpenNode: ' + err); }
-      if (body && body.data) {
-        this.tickers = body.data;
-      }
-    });
+  private async updateCurrency(): Promise<void> {
+    try {
+      const response = await axios.get('https://api.opennode.co/v1/rates');
+      this.tickers = response.data.data;
+    } catch (e) {
+      logger.err('Error updating currency from OpenNode: ' + e);
+    }
  }
 }

--- a/backend/src/api/websocket-handler.ts
+++ b/backend/src/api/websocket-handler.ts
@ -29,6 +29,7 @@ class WebsocketHandler {
    }

    this.wss.on('connection', (client: WebSocket) => {
+      client.on('error', logger.info);
      client.on('message', (message: string) => {
        try {
          const parsedMessage: WebsocketResponse = JSON.parse(message);
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@ -4,7 +4,7 @@ import * as http from 'http';
 import * as https from 'https';
 import * as WebSocket from 'ws';
 import * as cluster from 'cluster';
-import * as request from 'request';
+import axios from 'axios';

 import { checkDbConnection } from './database';
 import config from './config';
@ -191,11 +191,21 @@ class Server {
      ;
    } else {
      this.app
-        .get(config.MEMPOOL.API_URL_PREFIX + 'donations', (req, res) => {
-          req.pipe(request('https://mempool.space/api/v1/donations')).pipe(res);
+        .get(config.MEMPOOL.API_URL_PREFIX + 'donations', async (req, res) => {
+          try {
+            const response = await axios.get('https://mempool.space/api/v1/donations', { responseType: 'stream' });
+            response.data.pipe(res);
+          } catch (e) {
+            res.status(500).end();
+          }
        })
-        .get(config.MEMPOOL.API_URL_PREFIX + 'donations/images/:id', (req, res) => {
-          req.pipe(request('https://mempool.space/api/v1/donations/images/' + req.params.id)).pipe(res);
+        .get(config.MEMPOOL.API_URL_PREFIX + 'donations/images/:id', async (req, res) => {
+          try {
+            const response = await axios.get('https://mempool.space/api/v1/donations/images/' + req.params.id, { responseType: 'stream' });
+            response.data.pipe(res);
+          } catch (e) {
+            res.status(500).end();
+          }
        });
    }
  }
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@ -43,7 +43,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { faAngleDoubleDown, faAngleDoubleUp, faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faInfoCircle,
+import { faAngleDoubleDown, faAngleDoubleUp, faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
  faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
@ -121,5 +121,6 @@ export class AppModule {
    library.addIcons(faTint);
    library.addIcons(faAngleDown);
    library.addIcons(faAngleUp);
+    library.addIcons(faExchangeAlt);
  }
 }
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@ -4,6 +4,7 @@ import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
 import * as Chartist from '@mempool/chartist';
 import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
+import { StorageService } from 'src/app/services/storage.service';

@Component({
  selector: 'app-mempool-graph',
@ -21,11 +22,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
  mempoolVsizeFeesData: any;

  isMobile = window.innerWidth <= 767.98;
+  inverted: boolean;

  constructor(
    private vbytesPipe: VbytesPipe,
    private stateService: StateService,
    @Inject(LOCALE_ID) private locale: string,
+    private storageService: StorageService,
  ) { }

  ngOnInit(): void {
@ -62,7 +65,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
      showLine: false,
      fullWidth: true,
      showPoint: false,
-      stackedLine: true,
+      stackedLine: !this.inverted,
      low: 0,
      axisX: {
        labelInterpolationFnc: labelInterpolationFnc,
@ -72,7 +75,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
        labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2),
        offset: showLegend ? 160 : 60,
      },
-      plugins: []
+      plugins: this.inverted ? [Chartist.plugins.ctTargetLine({ value: 1000000 })] : []
    };

    if (showLegend) {
@ -97,6 +100,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
  }

  ngOnChanges() {
+    this.inverted = this.storageService.getValue('inverted-graph') === 'true';
    this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
  }

@ -131,10 +135,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
          feesArray.push(0);
        }
      });
+      if (this.inverted && finalArray.length) {
+        feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
+      }
      finalArray.push(feesArray);
    }
    finalArray.reverse();
    return finalArray;
  }
-
 }
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@ -40,6 +40,7 @@
                <input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
              </label>
            </div>
+            <button (click)="invertGraph()" class="btn btn-primary btn-sm ml-2 d-none d-md-inline"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" title="Invert"></fa-icon></button>
          </form>
        </div>
        <div class="card-body">
--- a/frontend/src/app/components/statistics/statistics.component.ts
+++ b/frontend/src/app/components/statistics/statistics.component.ts
@ -12,6 +12,7 @@ import { ApiService } from '../../services/api.service';
 import * as Chartist from '@mempool/chartist';
 import { StateService } from 'src/app/services/state.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { StorageService } from 'src/app/services/storage.service';

@Component({
  selector: 'app-statistics',
@ -33,6 +34,7 @@ export class StatisticsComponent implements OnInit {
  transactionsWeightPerSecondOptions: any;

  radioGroupForm: FormGroup;
+  inverted: boolean;

  constructor(
    @Inject(LOCALE_ID) private locale: string,
@ -42,6 +44,7 @@ export class StatisticsComponent implements OnInit {
    private apiService: ApiService,
    private stateService: StateService,
    private seoService: SeoService,
+    private storageService: StorageService,
  ) {
    this.radioGroupForm = this.formBuilder.group({
      dateSpan: '2h'
@ -51,6 +54,7 @@ export class StatisticsComponent implements OnInit {
  ngOnInit() {
    this.seoService.setTitle('Graphs');
    this.stateService.networkChanged$.subscribe((network) => this.network = network);
+    this.inverted = this.storageService.getValue('inverted-graph') === 'true';
    const isMobile = window.innerWidth <= 767.98;
    let labelHops = isMobile ? 48 : 24;

@ -157,4 +161,9 @@ export class StatisticsComponent implements OnInit {
      series: [mempoolStats.map((stats) => stats.vbytes_per_second)],
    };
  }
+
+  invertGraph() {
+    this.storageService.setValue('inverted-graph', !this.inverted);
+    document.location.reload();
+  }
 }
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@ -162,9 +162,13 @@

    <br>

-    <h2>Inputs & Outputs</h2>
+    <h2 class="float-left">Inputs & Outputs</h2>

-    <app-transactions-list [transactions]="[tx]" [transactionPage]="true"></app-transactions-list>
+    <button type="button" class="btn btn-outline-info btn-sm float-right mr-1 mt-0 mt-md-2" (click)="txList.toggleDetails()">Details</button>
+
+    <div class="clearfix"></div>
+
+    <app-transactions-list #txList [transactions]="[tx]" [transactionPage]="true"></app-transactions-list>

    <h2>Details</h2>
    <div class="box">
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@ -17,50 +17,90 @@
      <div class="col">
        <table class="table table-borderless smaller-text table-xs" style="margin: 0;">
          <tbody>
-            <tr *ngFor="let vin of (tx['@vinLimit'] ? tx.vin.slice(0, 10) : tx.vin); trackBy: trackByIndexFn">
-              <td class="arrow-td">
-                <ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
-                  <i class="arrow grey"></i>
-                </ng-template>
-                <ng-template #hasPrevout>
-                  <a *ngIf="vin.is_pegin; else defaultPrevout" [routerLink]="['/tx/', vin.txid]">
-                    <i class="arrow red"></i>
-                  </a>
-                  <ng-template #defaultPrevout>
-                    <a [routerLink]="['/tx/' | relativeUrl, vin.txid]">
+            <ng-template ngFor let-vin [ngForOf]="tx['@vinLimit'] ? tx.vin.slice(0, 10) : tx.vin" [ngForTrackBy]="trackByIndexFn">
+              <tr>
+                <td class="arrow-td">
+                  <ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
+                    <i class="arrow grey"></i>
+                  </ng-template>
+                  <ng-template #hasPrevout>
+                    <a *ngIf="vin.is_pegin; else defaultPrevout" [routerLink]="['/tx/', vin.txid]">
                      <i class="arrow red"></i>
                    </a>
+                    <ng-template #defaultPrevout>
+                      <a [routerLink]="['/tx/' | relativeUrl, vin.txid]">
+                        <i class="arrow red"></i>
+                      </a>
+                    </ng-template>
                  </ng-template>
-                </ng-template>
-              </td>
-              <td>
-                <div [ngSwitch]="true">
-                  <ng-container *ngSwitchCase="vin.is_coinbase"><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii">Coinbase<ng-template [ngIf]="network !== 'liquid'"> (Newly Generated Coins)</ng-template></a><br><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></ng-container>
-                  <ng-container *ngSwitchCase="vin.is_pegin">
-                    Peg-in
-                  </ng-container>
-                  <ng-container *ngSwitchDefault>
-                    <a [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
-                      <span class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
-                      <span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 35 }}</span>
-                    </a>
-                    <div>
-                      <app-address-labels [vin]="vin"></app-address-labels>
-                    </div>
-                  </ng-container>
-                </div>
-              </td>
-              <td class="text-right nowrap">
-                <ng-template [ngIf]="vin.prevout && vin.prevout.asset && vin.prevout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
-                  <div *ngIf="assetsMinimal && assetsMinimal[vin.prevout.asset]">
-                    <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vin.prevout }"></ng-container>
+                </td>
+                <td>
+                  <div [ngSwitch]="true">
+                    <ng-container *ngSwitchCase="vin.is_coinbase"><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii">Coinbase<ng-template [ngIf]="network !== 'liquid'"> (Newly Generated Coins)</ng-template></a><br><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></ng-container>
+                    <ng-container *ngSwitchCase="vin.is_pegin">
+                      Peg-in
+                    </ng-container>
+                    <ng-container *ngSwitchDefault>
+                      <a [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
+                        <span class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
+                        <span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 35 }}</span>
+                      </a>
+                      <div>
+                        <app-address-labels [vin]="vin"></app-address-labels>
+                      </div>
+                    </ng-container>
                  </div>
-                </ng-template>
-                <ng-template #defaultOutput>
-                  <app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
-                </ng-template>
-              </td>
-            </tr>
+                </td>
+                <td class="text-right nowrap">
+                  <ng-template [ngIf]="vin.prevout && vin.prevout.asset && vin.prevout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
+                    <div *ngIf="assetsMinimal && assetsMinimal[vin.prevout.asset]">
+                      <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vin.prevout }"></ng-container>
+                    </div>
+                  </ng-template>
+                  <ng-template #defaultOutput>
+                    <app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
+                  </ng-template>
+                </td>
+              </tr>
+              <tr *ngIf="displayDetails">
+                <td colspan="3">
+                  <table class="table table-striped table-borderless details-table mb-3">
+                    <tbody>
+                      <ng-template [ngIf]="vin.scriptsig">
+                        <tr>
+                          <td>ScriptSig (ASM)</td>
+                          <td [innerHTML]="vin.scriptsig_asm | asmStyler"></td>
+                        </tr>
+                        <tr>
+                          <td>ScriptSig (HEX)</td>
+                          <td>{{ vin.scriptsig }}</td>
+                        </tr>
+                      </ng-template>
+                      <tr *ngIf="vin.witness">
+                        <td>Witness</td>
+                        <td>{{ vin.witness.join(' ') }}</td>
+                      </tr>
+                      <tr *ngIf="vin.inner_redeemscript_asm">
+                        <td>P2SH redeem script</td>
+                        <td [innerHTML]="vin.inner_redeemscript_asm | asmStyler"></td>
+                      </tr>
+                      <tr *ngIf="vin.inner_witnessscript_asm">
+                        <td>P2WSH witness script</td>
+                        <td [innerHTML]="vin.inner_witnessscript_asm | asmStyler"></td>
+                      </tr>
+                      <tr>
+                        <td>nSequence</td>
+                        <td>{{ formatHex(vin.sequence) }}</td>
+                      </tr>
+                      <tr *ngIf="vin.prevout">
+                        <td>Previous output script</td>
+                        <td [innerHTML]="vin.prevout.scriptpubkey_asm | asmStyler">{{ vin.prevout.scriptpubkey_type ? ('(' + vin.prevout.scriptpubkey_type + ')') : '' }}"</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            </ng-template>
            <tr *ngIf="tx.vin.length > 10 && tx['@vinLimit']">
              <td colspan="3" class="text-center">
                <button class="btn btn-sm btn-primary mt-2" (click)="tx['@vinLimit'] = false;">Load all ({{ tx.vin.length - 10 }})</button>
@ -73,44 +113,73 @@
      <div class="col mobile-bottomcol">
        <table class="table table-borderless smaller-text table-xs"  style="margin: 0;">
          <tbody>
-            <tr *ngFor="let vout of (tx['@voutLimit'] ? tx.vout.slice(0, 10) : tx.vout); let vindex = index; trackBy: trackByIndexFn">
-              <td>
-                <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
-                  <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
-                  <span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 35 }}</span>
-                </a>
-                <ng-template #scriptpubkey_type>
-                  <ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
-                    Peg-out to <a [routerLink]="['/address/', vout.pegout.scriptpubkey_address]" title="{{ vout.pegout.scriptpubkey_address }}">
-                      <span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
-                      <span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 35 }}</span>
-                    </a>
+            <ng-template ngFor let-vout let-vindex="index"  [ngForOf]="tx['@voutLimit'] ? tx.vout.slice(0, 10) : tx.vout" [ngForTrackBy]="trackByIndexFn">
+              <tr>
+                <td>
+                  <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
+                    <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
+                    <span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 35 }}</span>
+                  </a>
+                  <ng-template #scriptpubkey_type>
+                    <ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
+                      Peg-out to <a [routerLink]="['/address/', vout.pegout.scriptpubkey_address]" title="{{ vout.pegout.scriptpubkey_address }}">
+                        <span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
+                        <span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 35 }}</span>
+                      </a>
+                    </ng-template>
+                    <ng-template #defaultscriptpubkey_type>
+                      <ng-template [ngIf]="vout.scriptpubkey_type === 'op_return'" [ngIfElse]="otherPubkeyType">
+                        <a placement="bottom" [ngbTooltip]="vout.scriptpubkey | hex2ascii">OP_RETURN</a>&nbsp;<span class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | hex2ascii }}</span>
+                      </ng-template>
+                      <ng-template #otherPubkeyType>{{ vout.scriptpubkey_type | scriptpubkeyType }}</ng-template>
+                    </ng-template>
                  </ng-template>
-                  <ng-template #defaultscriptpubkey_type>
-                    <a placement="bottom" [ngbTooltip]="vout.scriptpubkey | hex2ascii">{{ vout.scriptpubkey_type | scriptpubkeyType }}</a>&nbsp;<span class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | hex2ascii }}</span>
+                </td>
+                <td class="text-right nowrap">
+                  <ng-template [ngIf]="vout.asset && vout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
+                    <div *ngIf="assetsMinimal && assetsMinimal[vout.asset]">
+                      <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vout }"></ng-container>
+                  </div>
                  </ng-template>
-                </ng-template>
-              </td>
-              <td class="text-right nowrap">
-                <ng-template [ngIf]="vout.asset && vout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
-                  <div *ngIf="assetsMinimal && assetsMinimal[vout.asset]">
-                    <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vout }"></ng-container>
-                </div>
-                </ng-template>
-                <ng-template #defaultOutput>
-                  <app-amount [satoshis]="vout.value"></app-amount>
-                </ng-template>
-              </td>
-              <td class="pl-1 arrow-td">
-                <i *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="arrow grey"></i>
-                <ng-template #outspend>
-                  <i *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="arrow green"></i>
-                  <ng-template #spent>
-                    <a [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]"><i class="arrow red"></i></a>
+                  <ng-template #defaultOutput>
+                    <app-amount [satoshis]="vout.value"></app-amount>
                  </ng-template>
-                </ng-template>
-              </td>
-            </tr>
+                </td>
+                <td class="pl-1 arrow-td">
+                  <i *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="arrow grey"></i>
+                  <ng-template #outspend>
+                    <i *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="arrow green"></i>
+                    <ng-template #spent>
+                      <a [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]"><i class="arrow red"></i></a>
+                    </ng-template>
+                  </ng-template>
+                </td>
+              </tr>
+              <tr *ngIf="displayDetails">
+                <td colspan="3">
+                  <table class="table table-striped table-borderless details-table mb-3">
+                    <tbody>
+                      <tr *ngIf="vout.scriptpubkey_type">
+                        <td>Type</td>
+                        <td>{{ vout.scriptpubkey_type.toUpperCase() }}</td>
+                      </tr>
+                      <tr>
+                        <td>scriptPubKey (ASM)</td>
+                        <td [innerHTML]="vout.scriptpubkey_asm | asmStyler"></td>
+                      </tr>
+                      <tr>
+                        <td>scriptPubKey (HEX)</td>
+                        <td>{{ vout.scriptpubkey }}</td>
+                      </tr>
+                      <tr *ngIf="vout.scriptpubkey_type == 'op_return'">
+                        <td>OP_RETURN data</td>
+                        <td>{{ vout.scriptpubkey_asm | hex2ascii }}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            </ng-template>
            <tr *ngIf="tx.vout.length > 10 && tx['@voutLimit']">
              <td colspan="3" class="text-center">
                <button class="btn btn-sm btn-primary mt-2" (click)="tx['@voutLimit'] = false;">Load all ({{ tx.vout.length - 10 }})</button>
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@ -81,4 +81,23 @@
 	.scriptmessage.longer {
 		max-width: 280px !important;
 	}
-}
+
+	.details-table td:first-child {
+		white-space: pre-wrap;
+	}
+}
+
+.details-table {
+	margin-top: 5px;
+}
+
+.details-table td {
+	padding: 0.75rem;
+}
+
+.details-table td:nth-child(2) {
+	word-break: break-all;
+	white-space: normal;
+	font-family: "Courier New", Courier, monospace;
+	font-size: 12px;
+}
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@ -16,6 +16,7 @@ import { map } from 'rxjs/operators';
 export class TransactionsListComponent implements OnInit, OnChanges {
  network = '';
  nativeAssetId = environment.nativeAssetId;
+  displayDetails = false;

  @Input() transactions: Transaction[];
  @Input() showConfirmations = false;
@ -95,4 +96,14 @@ export class TransactionsListComponent implements OnInit, OnChanges {
  trackByIndexFn(index: number) {
    return index;
  }
+
+  formatHex(num: number): string {
+    const str = num.toString(16);
+    return '0x' + (str.length % 2 ? '0' : '') + str;
+  }
+
+  toggleDetails() {
+    this.displayDetails = !this.displayDetails;
+    this.ref.markForCheck();
+  }
 }
--- a/frontend/src/app/services/storage.service.ts
+++ b/frontend/src/app/services/storage.service.ts
@ -7,12 +7,17 @@ export class StorageService {
  getValue(key: string): string {
    try {
      return localStorage.getItem(key);
-    } catch (e) { }
+    } catch (e) {
+      console.log(e);
+      return '';
+    }
  }

  setValue(key: string, value: any): void {
    try {
      localStorage.setItem(key, value);
-    } catch (e) { }
+    } catch (e) {
+      console.log(e);
+    }
  }
 }
--- a/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.spec.ts
+++ b/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.spec.ts
@ -0,0 +1,8 @@
+import { AsmStylerPipe } from './asm-styler.pipe';
+
+describe('OpcodesStylerPipe', () => {
+  it('create an instance', () => {
+    const pipe = new AsmStylerPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
--- a/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts
+++ b/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts
@ -0,0 +1,316 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'asmStyler'
+})
+export class AsmStylerPipe implements PipeTransform {
+
+  transform(asm: string): string {
+    const instructions = asm.split('OP_');
+    let out = '';
+    for (const instruction of instructions) {
+      if (instruction === '') {
+        continue;
+      }
+      out += this.addStyling(instruction);
+    }
+    return out;
+  }
+
+  addStyling(instruction: string): string {
+    const opcode = instruction.split(' ')[0];
+    let style = '';
+    switch (opcode) {
+      case '0':
+      case 'FALSE':
+      case 'PUSHBYTES_1':
+      case 'PUSHBYTES_2':
+      case 'PUSHBYTES_3':
+      case 'PUSHBYTES_4':
+      case 'PUSHBYTES_5':
+      case 'PUSHBYTES_6':
+      case 'PUSHBYTES_7':
+      case 'PUSHBYTES_8':
+      case 'PUSHBYTES_9':
+      case 'PUSHBYTES_10':
+      case 'PUSHBYTES_11':
+      case 'PUSHBYTES_12':
+      case 'PUSHBYTES_13':
+      case 'PUSHBYTES_14':
+      case 'PUSHBYTES_15':
+      case 'PUSHBYTES_16':
+      case 'PUSHBYTES_17':
+      case 'PUSHBYTES_18':
+      case 'PUSHBYTES_19':
+      case 'PUSHBYTES_20':
+      case 'PUSHBYTES_21':
+      case 'PUSHBYTES_22':
+      case 'PUSHBYTES_23':
+      case 'PUSHBYTES_24':
+      case 'PUSHBYTES_25':
+      case 'PUSHBYTES_26':
+      case 'PUSHBYTES_27':
+      case 'PUSHBYTES_28':
+      case 'PUSHBYTES_29':
+      case 'PUSHBYTES_30':
+      case 'PUSHBYTES_31':
+      case 'PUSHBYTES_32':
+      case 'PUSHBYTES_33':
+      case 'PUSHBYTES_34':
+      case 'PUSHBYTES_35':
+      case 'PUSHBYTES_36':
+      case 'PUSHBYTES_37':
+      case 'PUSHBYTES_38':
+      case 'PUSHBYTES_39':
+      case 'PUSHBYTES_40':
+      case 'PUSHBYTES_41':
+      case 'PUSHBYTES_42':
+      case 'PUSHBYTES_43':
+      case 'PUSHBYTES_44':
+      case 'PUSHBYTES_45':
+      case 'PUSHBYTES_46':
+      case 'PUSHBYTES_47':
+      case 'PUSHBYTES_48':
+      case 'PUSHBYTES_49':
+      case 'PUSHBYTES_50':
+      case 'PUSHBYTES_51':
+      case 'PUSHBYTES_52':
+      case 'PUSHBYTES_53':
+      case 'PUSHBYTES_54':
+      case 'PUSHBYTES_55':
+      case 'PUSHBYTES_56':
+      case 'PUSHBYTES_57':
+      case 'PUSHBYTES_58':
+      case 'PUSHBYTES_59':
+      case 'PUSHBYTES_60':
+      case 'PUSHBYTES_61':
+      case 'PUSHBYTES_62':
+      case 'PUSHBYTES_63':
+      case 'PUSHBYTES_64':
+      case 'PUSHBYTES_65':
+      case 'PUSHBYTES_66':
+      case 'PUSHBYTES_67':
+      case 'PUSHBYTES_68':
+      case 'PUSHBYTES_69':
+      case 'PUSHBYTES_70':
+      case 'PUSHBYTES_71':
+      case 'PUSHBYTES_72':
+      case 'PUSHBYTES_73':
+      case 'PUSHBYTES_74':
+      case 'PUSHBYTES_75':
+      case 'PUSHDATA1':
+      case 'PUSHDATA2':
+      case 'PUSHDATA4':
+      case 'PUSHNUM_NEG1':
+      case 'TRUE':
+      case 'PUSHNUM_1':
+      case 'PUSHNUM_2':
+      case 'PUSHNUM_3':
+      case 'PUSHNUM_4':
+      case 'PUSHNUM_5':
+      case 'PUSHNUM_6':
+      case 'PUSHNUM_7':
+      case 'PUSHNUM_8':
+      case 'PUSHNUM_9':
+      case 'PUSHNUM_10':
+      case 'PUSHNUM_11':
+      case 'PUSHNUM_12':
+      case 'PUSHNUM_13':
+      case 'PUSHNUM_14':
+      case 'PUSHNUM_15':
+      case 'PUSHNUM_16':
+        style = 'constants';
+        break;
+
+      case 'NOP':
+      case 'IF':
+      case 'NOTIF':
+      case 'ELSE':
+      case 'ENDIF':
+      case 'VERIFY':
+      case 'RETURN':
+      case 'RETURN_186':
+      case 'RETURN_187':
+      case 'RETURN_188':
+      case 'RETURN_189':
+      case 'RETURN_190':
+      case 'RETURN_191':
+      case 'RETURN_192':
+      case 'RETURN_193':
+      case 'RETURN_194':
+      case 'RETURN_195':
+      case 'RETURN_196':
+      case 'RETURN_197':
+      case 'RETURN_198':
+      case 'RETURN_199':
+      case 'RETURN_200':
+      case 'RETURN_201':
+      case 'RETURN_202':
+      case 'RETURN_203':
+      case 'RETURN_204':
+      case 'RETURN_205':
+      case 'RETURN_206':
+      case 'RETURN_207':
+      case 'RETURN_208':
+      case 'RETURN_209':
+      case 'RETURN_210':
+      case 'RETURN_211':
+      case 'RETURN_212':
+      case 'RETURN_213':
+      case 'RETURN_214':
+      case 'RETURN_215':
+      case 'RETURN_216':
+      case 'RETURN_217':
+      case 'RETURN_218':
+      case 'RETURN_219':
+      case 'RETURN_220':
+      case 'RETURN_221':
+      case 'RETURN_222':
+      case 'RETURN_223':
+      case 'RETURN_224':
+      case 'RETURN_225':
+      case 'RETURN_226':
+      case 'RETURN_227':
+      case 'RETURN_228':
+      case 'RETURN_229':
+      case 'RETURN_230':
+      case 'RETURN_231':
+      case 'RETURN_232':
+      case 'RETURN_233':
+      case 'RETURN_234':
+      case 'RETURN_235':
+      case 'RETURN_236':
+      case 'RETURN_237':
+      case 'RETURN_238':
+      case 'RETURN_239':
+      case 'RETURN_240':
+      case 'RETURN_241':
+      case 'RETURN_242':
+      case 'RETURN_243':
+      case 'RETURN_244':
+      case 'RETURN_245':
+      case 'RETURN_246':
+      case 'RETURN_247':
+      case 'RETURN_248':
+      case 'RETURN_249':
+      case 'RETURN_250':
+      case 'RETURN_251':
+      case 'RETURN_252':
+      case 'RETURN_253':
+      case 'RETURN_254':
+      case 'RETURN_255':
+        style = 'control';
+        break;
+
+      case 'TOALTSTACK':
+      case 'FROMALTSTACK':
+      case 'IFDUP':
+      case 'DEPTH':
+      case 'DROP':
+      case 'DUP':
+      case 'NIP':
+      case 'OVER':
+      case 'PICK':
+      case 'ROLL':
+      case 'ROT':
+      case 'SWAP':
+      case 'TUCK':
+      case '2DROP':
+      case '2DUP':
+      case '3DUP':
+      case '2OVER':
+      case '2ROT':
+      case '2SWAP':
+        style = 'stack';
+        break;
+
+      case 'CAT':
+      case 'SUBSTR':
+      case 'LEFT':
+      case 'RIGHT':
+      case 'SIZE':
+        style = 'splice';
+        break;
+
+      case 'INVERT':
+      case 'AND':
+      case 'OR':
+      case 'XOR':
+      case 'EQUAL':
+      case 'EQUALVERIFY':
+        style = 'logic';
+        break;
+
+      case '1ADD':
+      case '1SUB':
+      case '2MUL':
+      case '2DIV':
+      case 'NEGATE':
+      case 'ABS':
+      case 'NOT':
+      case '0NOTEQUAL':
+      case 'ADD':
+      case 'SUB':
+      case 'MUL':
+      case 'DIV':
+      case 'MOD':
+      case 'LSHIFT':
+      case 'RSHIFT':
+      case 'BOOLAND':
+      case 'BOOLOR':
+      case 'NUMEQUAL':
+      case 'NUMEQUALVERIFY':
+      case 'NUMNOTEQUAL':
+      case 'LESSTHAN':
+      case 'GREATERTHAN':
+      case 'LESSTHANOREQUAL':
+      case 'MIN':
+      case 'MAX':
+      case 'WITHIN':
+        style = 'arithmetic';
+        break;
+
+      case 'RIPEMD160':
+      case 'SHA1':
+      case 'SHA256':
+      case 'HASH160':
+      case 'HASH256':
+      case 'CODESEPARATOR':
+      case 'CHECKSIG':
+      case 'CHECKSIGVERIFY':
+      case 'CHECKMULTISIG':
+      case 'CHCEKMULTISIGVERIFY':
+        style = 'crypto';
+        break;
+
+      case 'CHECKLOCKTIMEVERIFY':
+      case 'CHECKSEQUENCEVERIFY':
+        style = 'locktime';
+        break;
+
+      case 'RESERVED':
+      case 'VER':
+      case 'VERIF':
+      case 'VERNOTIF':
+      case 'RESERVED1':
+      case 'RESERVED2':
+      case 'NOP1':
+      case 'NOP4':
+      case 'NOP5':
+      case 'NOP6':
+      case 'NOP7':
+      case 'NOP8':
+      case 'NOP9':
+      case 'NOP10':
+        style = 'reserved';
+        break;
+    }
+
+    let args = instruction.substr(instruction.indexOf(' ') + 1);
+    if (args === opcode) {
+      args = '';
+    }
+    return `<span class='${style}'>OP_${opcode}</span> ${args}<br>`;
+  }
+
+}
--- a/frontend/src/app/shared/pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe.ts
+++ b/frontend/src/app/shared/pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe.ts
@ -9,9 +9,12 @@ export class ScriptpubkeyTypePipe implements PipeTransform {
    switch (value) {
      case 'fee':
        return 'Transaction fee';
+      case 'p2pk':
+        return 'P2PK';
      case 'op_return':
+        return 'OP_RETURN';
      default:
-          return 'OP_RETURN';
+        return value.toUpperCase();
    }
  }

--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@ -4,6 +4,7 @@ import { VbytesPipe } from './pipes/bytes-pipe/vbytes.pipe';
 import { ShortenStringPipe } from './pipes/shorten-string-pipe/shorten-string.pipe';
 import { CeilPipe } from './pipes/math-ceil/math-ceil.pipe';
 import { Hex2asciiPipe } from './pipes/hex2ascii/hex2ascii.pipe';
+import { AsmStylerPipe } from './pipes/asm-styler/asm-styler.pipe';
 import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
 import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe';
 import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
@ -28,6 +29,7 @@ import { ReactiveFormsModule } from '@angular/forms';
    ScriptpubkeyTypePipe,
    RelativeUrlPipe,
    Hex2asciiPipe,
+    AsmStylerPipe,
    BytesPipe,
    VbytesPipe,
    WuBytesPipe,
@ -63,6 +65,7 @@ import { ReactiveFormsModule } from '@angular/forms';
    ScriptpubkeyTypePipe,
    RelativeUrlPipe,
    Hex2asciiPipe,
+    AsmStylerPipe,
    BytesPipe,
    VbytesPipe,
    WuBytesPipe,
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@ -10,6 +10,7 @@ $nav-tabs-link-active-bg: #11131f;
 $primary: #105fb0;
 $secondary: #2d3348;
 $success: #1a9436;
+$info: #1bd8f4;

 $pagination-bg: $body-bg;
 $pagination-border-color: $gray-800;
@ -428,3 +429,15 @@ h1, h2, h3 {
 th {
  white-space: nowrap;
 }
+
+// ASM opcode colors
+
+.constants { color: #ff8c00 }
+.control { color: #87ceeb }
+.stack { color: #ffa500 }
+.splice { color: #46b5e2 }
+.logic { color: #46b5e2 }
+.arithmetic { color: #cae8d0 }
+.crypto { color: #fa3d3d }
+.locktime { color: #ff8c00 }
+.reserved { color: #ff8c00 }
--- a/production/mempool-upgrade-all
+++ b/production/mempool-upgrade-all
@ -45,6 +45,6 @@ do
 done

 hostname=$(hostname)
-keybase chat send --channel dev mempool "${hostname} updated to ${hash}"
+keybase chat send mempool.space "${hostname} updated to ${TAG} @ ${hash}"

 rm "$HOME/lock"
--- a/production/nginx.conf
+++ b/production/nginx.conf
@ -133,7 +133,7 @@ http {
 		location = /api/ {
 			try_files $uri $uri/ /index.html =404;
 		}
-		location /api/v1/donations {
+		location /api/v1/donations/images {
 			# don't rate limit this URL prefix
 			proxy_pass http://127.0.0.1:8999;
 			proxy_cache cache;