Added missing block header API (#630)

* header API frontend

* Block Header API endpoint added to Node.js backend

* updated package-lock.json

Co-authored-by: Rishabh <rishabh@Rajeshs-MacBook-Pro.local>

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

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

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

@@ -60,6 +60,10 @@ class BitcoinApi implements AbstractBitcoinApi {
     return this.bitcoindClient.getBlockHash(height);
   }
 
+  $getBlockHeader(hash: string): Promise<string> {
+    return this.bitcoindClient.getBlockHeader(hash,false);
+  }
+
   async $getBlock(hash: string): Promise<IEsploraApi.Block> {
     const foundBlock = blocks.getBlocks().find((block) => block.id === hash);
     if (foundBlock) {

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

@@ -35,6 +35,11 @@ class ElectrsApi implements AbstractBitcoinApi {
       .then((response) => response.data);
   }
 
+  $getBlockHeader(hash: string): Promise<string> {
+    return axios.get<string>(config.ESPLORA.REST_API_URL + '/block/' + hash + '/header', 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/index.ts

@@ -238,6 +238,7 @@ class Server {
         .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 + '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/routes.ts

@@ -506,6 +506,15 @@ class Routes {
     }
   }
 
+  public async getBlockHeader(req: Request, res: Response) {
+    try {
+      const blockHeader = await bitcoinApi.$getBlockHeader(req.params.hash);
+      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/src/app/components/api-docs/api-docs.component.html

@@ -190,6 +190,26 @@
             </ng-template>
           </ngb-panel>
 
+          <ngb-panel id="blockHeader">
+            <ng-template ngbPanelTitle>
+              <span>GET Block Header</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/0000000000000000000065bda8f8a88f2e1e00d9a6887a43d640e52a4c7660f2/header" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/header</a>
+              </div>
+
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n>Returns the hex-encoded block header.</div>
+              </div>
+
+              <app-code-template [code]="code.blockHeader" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
           <ngb-panel id="blockHeight">
             <ng-template ngbPanelTitle>
               <span>GET Block Height</span>

frontend/src/app/components/api-docs/api-docs.component.ts

@@ -175,7 +175,15 @@ export class ApiDocsComponent implements OnInit {
     bits: 404111758,
     difficulty: 49402014931
   }`,
-    },
+      },
+      blockHeader: {
+        codeSample: {
+          esModule: `//to be added`,
+          commonJS: `//to be added`,
+          curl: `curl -X GET "https://mempool.space/api/block/:hash/header"`,
+        },
+        responseSample: `040000202c04d4c450187d1da9b1bc23ba47d67fe028d22486fd0c00000000000000000059a3a33d4642c799af9f54a4dd351fff9130e6a89d4e251130c60064878616e906b5ea60ce9813173a25caf3`,
+        },
     blockHeight: {
       codeSample: {
         esModule: `const { %{1}: { blocks } } = mempoolJS();

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

@@ -114,6 +114,11 @@
                   <td i18n="block.nonce">Nonce</td>
                   <td>{{ block.nonce | decimal2hex }}</td>
                 </tr>
+                <tr>
+                  <td i18n="block.header">Block Header Hex</td>
+                  <td><a target="_blank" href="/api/block/{{block.id}}/header" title="click to view">view</a> </td>
+                  
+                </tr>
               </tbody>
             </table>
           </div>