Raw Hex of Objects in Details Tab #616 (#682)

* Added Block Hex in Details

* Added Raw Tx in Transaction Details

* Backend Updates

backend/src/api/bitcoin/bitcoin-api-abstract-factory.ts

@@ -7,8 +7,10 @@ export interface AbstractBitcoinApi {
   $getTxIdsForBlock(hash: string): Promise<string[]>;
   $getBlockHash(height: number): Promise<string>;
   $getBlockHeader(hash: string): Promise<string>;
+  $getRawBlock(hash: string): Promise<string>;
   $getBlock(hash: string): Promise<IEsploraApi.Block>;
   $getAddress(address: string): Promise<IEsploraApi.Address>;
   $getAddressTransactions(address: string, lastSeenTxId: string): Promise<IEsploraApi.Transaction[]>;
   $getAddressPrefix(prefix: string): string[];
+  
 }

backend/src/api/bitcoin/bitcoin-api.ts

@@ -56,6 +56,11 @@ class BitcoinApi implements AbstractBitcoinApi {
       .then((rpcBlock: IBitcoinApi.Block) => rpcBlock.tx);
   }
 
+  $getRawBlock(hash: string): Promise<string> {
+    return this.bitcoindClient.getBlock(hash, 0);
+  }
+
+
   $getBlockHash(height: number): Promise<string> {
     return this.bitcoindClient.getBlockHash(height);
   }

backend/src/api/bitcoin/esplora-api.ts

@@ -40,6 +40,12 @@ class ElectrsApi implements AbstractBitcoinApi {
       .then((response) => response.data);
   }
 
+  $getRawBlock(hash: string): Promise<string> {
+    return axios.get<string>(config.ESPLORA.REST_API_URL + '/block/' + hash + '/raw', this.axiosConfig)
+      .then((response) => response.data);
+  }
+
+
   $getBlock(hash: string): Promise<IEsploraApi.Block> {
     return axios.get<IEsploraApi.Block>(config.ESPLORA.REST_API_URL + '/block/' + hash, this.axiosConfig)
       .then((response) => response.data);

backend/src/api/transaction-utils.ts

@@ -25,6 +25,11 @@ class TransactionUtils {
     return this.extendTransaction(transaction);
   }
 
+  public async $getRawTransactionExtended(txId: string, addPrevouts = false): Promise<TransactionExtended> {
+    const transaction: IEsploraApi.Transaction = await bitcoinApi.$getRawTransaction(txId, true, addPrevouts);
+    return this.extendTransaction(transaction);
+  }
+
   private extendTransaction(transaction: IEsploraApi.Transaction): TransactionExtended {
     // @ts-ignore
     if (transaction.vsize) {

backend/src/index.ts

@@ -235,10 +235,12 @@ class Server {
         .get(config.MEMPOOL.API_URL_PREFIX + 'mempool/txids', routes.getMempoolTxIds)
         .get(config.MEMPOOL.API_URL_PREFIX + 'mempool/recent', routes.getRecentMempoolTransactions)
         .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId', routes.getTransaction)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/raw', routes.getRawTransaction)
         .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/status', routes.getTransactionStatus)
         .get(config.MEMPOOL.API_URL_PREFIX + 'tx/:txId/outspends', routes.getTransactionOutspends)
         .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash', routes.getBlock)
         .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash/header', routes.getBlockHeader)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'block/:hash/raw', routes.getRawBlock)
         .get(config.MEMPOOL.API_URL_PREFIX + 'blocks', routes.getBlocks)
         .get(config.MEMPOOL.API_URL_PREFIX + 'blocks/:height', routes.getBlocks)
         .get(config.MEMPOOL.API_URL_PREFIX + 'blocks/tip/height', routes.getBlockTipHeight)

backend/src/mempool.interfaces.ts

@@ -31,6 +31,7 @@ export interface TransactionExtended extends IEsploraApi.Transaction {
   bestDescendant?: BestDescendant | null;
   cpfpChecked?: boolean;
   deleteAfter?: number;
+  hex?:string
 }
 
 interface Ancestor {

backend/src/routes.ts

@@ -484,6 +484,20 @@ class Routes {
     }
   }
 
+  public async getRawTransaction(req: Request, res: Response) {
+    try {
+      const transaction = await transactionUtils.$getRawTransactionExtended(req.params.txId, true);
+      res.setHeader('content-type', 'text/plain');
+      res.send(transaction.hex);
+    } catch (e) {
+      let statusCode = 500;
+      if (e.message && e.message.indexOf('No such mempool or blockchain transaction') > -1) {
+        statusCode = 404;
+      }
+      res.status(statusCode).send(e.message || e);
+    }
+  }
+
   public async getTransactionStatus(req: Request, res: Response) {
     try {
       const transaction = await transactionUtils.$getTransactionExtended(req.params.txId, true);
@@ -516,6 +530,16 @@ class Routes {
     }
   }
 
+  public async getRawBlock(req: Request, res: Response) {
+    try {
+      const blockHeader = await bitcoinApi.$getRawBlock(req.params.hash);
+      res.setHeader('content-type', 'text/plain');
+      res.send(blockHeader);
+    } catch (e) {
+      res.status(500).send(e.message || e);
+    }
+  }
+
   public async getBlocks(req: Request, res: Response) {
     try {
       loadingIndicators.setProgress('blocks', 0);

frontend/angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

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

@@ -118,6 +118,10 @@
                   <td i18n="block.header">Block Header Hex</td>
                   <td><a target="_blank" href="/api/block/{{block.id}}/header"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
                 </tr>
+                <tr>
+                  <td i18n="block.raw">Raw Block</td>
+                  <td><a target="_blank" href="/api/block/{{block.id}}/raw"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
+                </tr>
               </tbody>
             </table>
           </div>

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

@@ -216,6 +216,10 @@
             <td i18n="transaction.weight|Transaction Weight">Weight</td>
             <td [innerHTML]="tx.weight | wuBytes: 2"></td>
           </tr>
+          <tr>
+            <td i18n="transaction.raw">Raw Tx</td>
+            <td><a target="_blank" href="/api/tx/{{ txId }}/raw"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
+          </tr>
         </tbody>
       </table>
     </div>