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);