New base code for mempool blockchain explorerer

frontend/src/app/components/search-form/search-form.component.html

@@ -0,0 +1,29 @@
+<ng-template [ngIf]="location === 'start'" [ngIfElse]="top">
+    
+  <form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
+    <div class="form-row">
+      <div class="col-12 col-md-10 mb-2 mb-md-0">
+        <input formControlName="searchText" type="text" class="form-control form-control-lg" [placeholder]="searchBoxPlaceholderText">
+      </div>
+      <div class="col-12 col-md-2">
+        <button type="submit" class="btn btn-block btn-lg btn-primary">{{ searchButtonText }}</button>
+      </div>
+    </div>
+  </form>
+
+</ng-template>
+
+<ng-template #top>
+
+  <form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
+    <div class="form-row">
+      <div style="width: 350px;" class="mr-2">
+        <input formControlName="searchText" type="text" class="form-control" [placeholder]="searchBoxPlaceholderText">
+      </div>
+      <div>
+        <button type="submit" class="btn btn-block btn-primary">{{ searchButtonText }}</button>
+      </div>
+    </div>
+  </form>
+
+</ng-template>

frontend/src/app/components/search-form/search-form.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchFormComponent } from './search-form.component';
+
+describe('SearchFormComponent', () => {
+  let component: SearchFormComponent;
+  let fixture: ComponentFixture<SearchFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/search-form/search-form.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-search-form',
+  templateUrl: './search-form.component.html',
+  styleUrls: ['./search-form.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SearchFormComponent implements OnInit {
+  @Input() location: string;
+  searchForm: FormGroup;
+
+  searchButtonText = 'Search';
+  searchBoxPlaceholderText = 'Transaction, address, block hash...';
+
+  regexAddress = /^([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 formBuilder: FormBuilder,
+    private router: Router,
+  ) { }
+
+  ngOnInit() {
+    this.searchForm = this.formBuilder.group({
+      searchText: ['', Validators.required],
+    });
+  }
+
+  search() {
+    const searchText = this.searchForm.value.searchText.trim();
+    if (searchText) {
+      if (this.regexAddress.test(searchText)) {
+        this.router.navigate(['/address/', searchText]);
+      } else {
+        this.router.navigate(['/tx/', searchText]);
+      }
+      this.searchForm.setValue({
+        searchText: '',
+      });
+    }
+  }
+}