From 565aa499e52219b4b72feb35d76f926e1a007618 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Fri, 22 May 2020 00:35:45 +0700
Subject: [PATCH] Reveal coinbase scriptsig and op_return scriptpubkey ascii on
 hover.

---
 frontend/src/app/app.module.ts                |  2 ++
 .../transactions-list.component.html          |  4 ++--
 .../pipes/hex2ascii/hex2ascii.pipe.spec.ts    |  8 ++++++++
 .../src/app/pipes/hex2ascii/hex2ascii.pipe.ts | 19 +++++++++++++++++++
 frontend/src/styles.scss                      |  4 ++++
 5 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/app/pipes/hex2ascii/hex2ascii.pipe.spec.ts
 create mode 100644 frontend/src/app/pipes/hex2ascii/hex2ascii.pipe.ts

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 5fe6b2636..039fd548b 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -50,6 +50,7 @@ import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubke
 import { AssetsComponent } from './assets/assets.component';
 import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
 import { MinerComponent } from './pipes/miner/miner.component';
+import { Hex2asciiPipe } from './pipes/hex2ascii/hex2ascii.pipe';
 
 @NgModule({
   declarations: [
@@ -90,6 +91,7 @@ import { MinerComponent } from './pipes/miner/miner.component';
     AssetsComponent,
     RelativeUrlPipe,
     MinerComponent,
+    Hex2asciiPipe,
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index 2f3f3943d..5fa573095 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -35,7 +35,7 @@
               </td>
               <td>
                 <div [ngSwitch]="true">
-                  <ng-container *ngSwitchCase="vin.is_coinbase">Coinbase<ng-template [ngIf]="network !== 'liquid'"> (Newly Generated Coins)</ng-template></ng-container>
+                  <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></ng-container>
                   <ng-container *ngSwitchCase="vin.is_pegin">
                     Peg-in
                   </ng-container>
@@ -79,7 +79,7 @@
                     </a>
                   </ng-template>
                   <ng-template #defaultscriptpubkey_type>
-                    {{ vout.scriptpubkey_type | scriptpubkeyType }}
+                    <a placement="bottom" [ngbTooltip]="vout.scriptpubkey | hex2ascii">{{ vout.scriptpubkey_type | scriptpubkeyType }}</a>
                   </ng-template>
                 </ng-template>
               </td>
diff --git a/frontend/src/app/pipes/hex2ascii/hex2ascii.pipe.spec.ts b/frontend/src/app/pipes/hex2ascii/hex2ascii.pipe.spec.ts
new file mode 100644
index 000000000..7db7406ac
--- /dev/null
+++ b/frontend/src/app/pipes/hex2ascii/hex2ascii.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { Hex2asciiPipe } from './hex2ascii.pipe';
+
+describe('Hex2asciiPipe', () => {
+  it('create an instance', () => {
+    const pipe = new Hex2asciiPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/pipes/hex2ascii/hex2ascii.pipe.ts b/frontend/src/app/pipes/hex2ascii/hex2ascii.pipe.ts
new file mode 100644
index 000000000..0273e7f33
--- /dev/null
+++ b/frontend/src/app/pipes/hex2ascii/hex2ascii.pipe.ts
@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'hex2ascii'
+})
+export class Hex2asciiPipe implements PipeTransform {
+
+  transform(hex: string): string {
+    if (!hex) {
+      return '';
+    }
+    let str = '';
+    for (let i = 0; i < hex.length; i += 2) {
+      str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
+    }
+    return str;
+  }
+
+}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 23b53930d..af67879de 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -388,3 +388,7 @@ h1, h2, h3 {
 .mt-2-5, .my-2-5 {
   margin-top: 0.75rem !important;
 }
+
+.tooltip-inner {
+  max-width: inherit;
+}
\ No newline at end of file