Search box for explorer.

backend/src/routes.ts

@@ -96,7 +96,11 @@ class Routes {
       const result = await bitcoinApi.getRawTransaction(req.params.id);
       res.send(result);
     } catch (e) {
-      res.status(500).send(e.message);
+      if (e.response) {
+        res.status(e.response.status).send(e.response.data);
+      } else {
+        e.status(500, e.message);
+      }
     }
   }
 
@@ -105,7 +109,11 @@ class Routes {
       const result = await bitcoinApi.getBlock(req.params.hash);
       res.send(result);
     } catch (e) {
-      res.status(500).send(e.message);
+      if (e.response) {
+        res.status(e.response.status).send(e.response.data);
+      } else {
+        e.status(500, e.message);
+      }
     }
   }
 
@@ -114,7 +122,15 @@ class Routes {
       const result = await bitcoinApi.getBlockTransactions(req.params.hash);
       res.send(result);
     } catch (e) {
-      res.status(500).send(e.message);
+      if (e.response) {
+        res.status(e.response.status).send(e.response.data);
+      } else {
+        if (e.response) {
+          res.status(e.response.status).send(e.response.data);
+        } else {
+          e.status(500, e.message);
+        }
+      }
     }
   }
 
@@ -123,7 +139,15 @@ class Routes {
       const result = await bitcoinApi.getBlockTransactionsFromIndex(req.params.hash, req.params.index);
       res.send(result);
     } catch (e) {
-      res.status(500).send(e.message);
+      if (e.response) {
+        res.status(e.response.status).send(e.response.data);
+      } else {
+        if (e.response) {
+          res.status(e.response.status).send(e.response.data);
+        } else {
+          e.status(500, e.message);
+        }
+      }
     }
   }
 
@@ -132,7 +156,15 @@ class Routes {
       const result = await bitcoinApi.getAddress(req.params.address);
       res.send(result);
     } catch (e) {
-      res.status(500).send(e.message);
+      if (e.response) {
+        res.status(e.response.status).send(e.response.data);
+      } else {
+        if (e.response) {
+          res.status(e.response.status).send(e.response.data);
+        } else {
+          e.status(500, e.message);
+        }
+      }
     }
   }
 
@@ -141,7 +173,11 @@ class Routes {
       const result = await bitcoinApi.getAddressTransactions(req.params.address);
       res.send(result);
     } catch (e) {
-      res.status(500).send(e.message);
+      if (e.response) {
+        res.status(e.response.status).send(e.response.data);
+      } else {
+        e.status(500, e.message);
+      }
     }
   }
 
@@ -150,7 +186,11 @@ class Routes {
       const result = await bitcoinApi.getAddressTransactionsFromLastSeenTxid(req.params.address, req.params.txid);
       res.send(result);
     } catch (e) {
-      res.status(500).send(e.message);
+      if (e.response) {
+        res.status(e.response.status).send(e.response.data);
+      } else {
+        e.status(500, e.message);
+      }
     }
   }
 }

frontend/src/app/explorer/address/address.component.html

@@ -36,7 +36,7 @@
             </tbody>
           </table>
         </div>
-        <div class="col text-center">
+        <div class="col text-right">
           <div class="qr-wrapper">
             <qrcode id="qrCode" [qrdata]="address.address" [size]="128" [level]="'M'"></qrcode>
           </div>
@@ -72,7 +72,7 @@
       <div class="text-center">
         Error loading address data.
         <br>
-        <i>{{ error.message }}</i>
+        <i>{{ error.error }}</i>
       </div>
     </ng-template>
 

frontend/src/app/explorer/address/address.component.scss

@@ -11,4 +11,5 @@
   background-color: #FFF;
   padding: 10px;
   display: inline-block;
+  margin-right: 25px;
 }

frontend/src/app/explorer/address/address.component.ts

@@ -38,6 +38,7 @@ export class AddressComponent implements OnInit {
       this.ref.markForCheck();
     },
     (error) => {
+      console.log(error);
       this.error = error;
       this.isLoadingAddress = false;
     });

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

@@ -77,7 +77,7 @@
       <div class="text-center">
         Error loading block data.
         <br>
-        <i>{{ error.message }}</i>
+        <i>{{ error.error }}</i>
       </div>
     </ng-template>
 

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

@@ -61,7 +61,7 @@
     <div class="text-center">
       Error loading transaction data.
       <br>
-      <i>{{ error.message }}</i>
+      <i>{{ error.error }}</i>
     </div>
   </ng-template>
 </div>

frontend/src/app/master-page/master-page.component.html

@@ -26,8 +26,16 @@
       </li>
     </ul>
     <form [formGroup]="searchForm" class="form-inline mt-2 mt-md-0 mr-4" (submit)="searchForm.valid && search()" novalidate>
-      <input formControlName="txId" required style="width: 300px;" class="form-control mr-sm-2" type="text" placeholder="Search transaction ID" aria-label="Search">
+      
-      <button class="btn btn-primary my-2 my-sm-0" type="submit">Track</button>
+      <ng-template [ngIf]="currentBaseRoot === 'explorer'" [ngIfElse]="defaultSearchBar">
+        <input formControlName="txId" required style="width: 310px;" class="form-control mr-sm-2" type="text" placeholder="Search transaction id or address..." aria-label="Search">
+        <button class="btn btn-primary my-2 my-sm-0" type="submit" style="width: 78px;">Search</button>
+      </ng-template>
+      
+      <ng-template #defaultSearchBar>
+        <input formControlName="txId" required style="width: 310px;" class="form-control mr-sm-2" type="text" placeholder="Track transaction (txid)" aria-label="Search">
+        <button class="btn btn-primary my-2 my-sm-0" type="submit" style="width: 78px;">Track</button>
+      </ng-template>
     </form>
   </div>
 </nav>

frontend/src/app/master-page/master-page.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { MemPoolService } from '../services/mem-pool.service';
-import { Router } from '@angular/router';
+import { Router, NavigationEnd } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { environment } from '../../environments/environment';
 
@@ -10,11 +10,13 @@ import { environment } from '../../environments/environment';
   styleUrls: ['./master-page.component.scss']
 })
 export class MasterPageComponent implements OnInit {
-
   navCollapsed = false;
   isOffline = false;
   searchForm: FormGroup;
   isEsploraEnabled = !!environment.esplora;
+  currentBaseRoot = '';
+
+  regexAddr = /^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,87})$/;
 
   constructor(
     private memPoolService: MemPoolService,
@@ -24,13 +26,20 @@ export class MasterPageComponent implements OnInit {
 
   ngOnInit() {
     this.searchForm = this.formBuilder.group({
-      txId: ['', Validators.pattern('^[a-fA-F0-9]{64}$')],
+      txId: [''],
     });
 
     this.memPoolService.isOffline$
       .subscribe((state) => {
         this.isOffline = state;
       });
+
+      this.currentBaseRoot = this.router.url.split('/')[1];
+      this.router.events.subscribe((event) => {
+        if (event instanceof NavigationEnd ) {
+          this.currentBaseRoot = event.url.split('/')[1];
+        }
+    });
   }
 
   collapse(): void {
@@ -38,14 +47,22 @@ export class MasterPageComponent implements OnInit {
   }
 
   search() {
-    const txId = this.searchForm.value.txId;
+    const searchText = this.searchForm.value.txId;
-    if (txId) {
+    if (searchText) {
-      if (window.location.pathname === '/' || window.location.pathname.substr(0, 4) === '/tx/') {
+      if (this.currentBaseRoot === 'explorer') {
-        window.history.pushState({}, '', `/tx/${txId}`);
+        if (this.regexAddr.test(searchText)) {
+          this.router.navigate(['/explorer/address/', searchText]);
+        } else {
+          this.router.navigate(['/explorer/tx/', searchText]);
+        }
       } else {
-        this.router.navigate(['/tx/', txId]);
+        if (window.location.pathname === '/' || window.location.pathname.substr(0, 4) === '/tx/') {
+          window.history.pushState({}, '', `/tx/${searchText}`);
+        } else {
+          this.router.navigate(['/tx/', searchText]);
+        }
+        this.memPoolService.txIdSearch$.next(searchText);
       }
-      this.memPoolService.txIdSearch$.next(txId);
       this.searchForm.setValue({
         txId: '',
       });