initial commit

2019-06-27 12:18:08 +05:30 · 2019-06-27 12:18:08 +05:30 · ea7843965f
commit ea7843965f
236 changed files with 51044 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
--- a/README.md
+++ b/README.md
@ -0,0 +1,27 @@
+# PlotlyAngular8
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.2.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/angular.json
+++ b/angular.json
@ -0,0 +1,146 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "explorer2.epic",
+  "projects": {
+    "explorer2-epic": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/browser",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css",
+              "src/assets/vendors/css/bootstrap.min.css",
+              "src/assets/css/style.css",
+              "src/assets/css/responsive.css",
+              "src/assets/vendors/css/font-awesome.min.css"
+            ],
+            "scripts": [
+              "src/assets/vendors/js/jquery-3.2.1.min.js",
+              "src/assets/vendors/js/bootstrap.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "explorer2-epic:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "explorer2-epic:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "explorer2-epic:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "explorer2-epic:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "explorer2-epic:serve:production"
+            }
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/server",
+            "main": "src/main.server.ts",
+            "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "explorer2-epic"
+}
--- a/12
+++ b/12
@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
@ -0,0 +1,32 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('Welcome to explorer2-epic!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get(browser.baseUrl) as Promise<any>;
+  }
+
+  getTitleText() {
+    return element(by.css('app-root h1')).getText() as Promise<string>;
+  }
+}
--- a/e2e/tsconfig.json
+++ b/e2e/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
--- a/karma.conf.js
+++ b/karma.conf.js
@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/explorer2-epic'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,58 @@
+{
+  "name": "explorer2-epic",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
+    "serve:ssr": "node dist/server",
+    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
+    "build:client-and-server-bundles": "ng build --prod && ng run explorer2-epic:server:production"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~8.0.0",
+    "@angular/common": "~8.0.0",
+    "@angular/compiler": "~8.0.0",
+    "@angular/core": "~8.0.0",
+    "@angular/forms": "~8.0.0",
+    "@angular/platform-browser": "~8.0.0",
+    "@angular/platform-browser-dynamic": "~8.0.0",
+    "@angular/platform-server": "~8.0.0",
+    "@angular/router": "~8.0.0",
+    "@nguniversal/express-engine": "^7.0.2",
+    "@nguniversal/module-map-ngfactory-loader": "v7.0.2",
+    "express": "^4.15.2",
+    "plotly.js": "^1.48.3",
+    "rxjs": "~6.4.0",
+    "tslib": "^1.9.0",
+    "zone.js": "~0.9.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.800.0",
+    "@angular/cli": "~8.0.2",
+    "@angular/compiler-cli": "~8.0.0",
+    "@angular/language-service": "~8.0.0",
+    "@types/node": "~8.9.4",
+    "@types/jasmine": "~3.3.8",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "^5.0.0",
+    "jasmine-core": "~3.4.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "protractor": "~5.4.0",
+    "ts-loader": "^5.2.0",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.15.0",
+    "typescript": "~3.4.3",
+    "webpack-cli": "^3.1.0"
+  }
+}
--- a/server.ts
+++ b/server.ts
@ -0,0 +1,50 @@
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+import {enableProdMode} from '@angular/core';
+// Express Engine
+import {ngExpressEngine} from '@nguniversal/express-engine';
+// Import module map for lazy loading
+import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
+
+import * as express from 'express';
+import {join} from 'path';
+
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
+
+// Express server
+const app = express();
+
+const PORT = process.env.PORT || 4000;
+const DIST_FOLDER = join(process.cwd(), 'dist/browser');
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
+
+// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+app.engine('html', ngExpressEngine({
+  bootstrap: AppServerModuleNgFactory,
+  providers: [
+    provideModuleMap(LAZY_MODULE_MAP)
+  ]
+}));
+
+app.set('view engine', 'html');
+app.set('views', DIST_FOLDER);
+
+// Example Express Rest API endpoints
+// app.get('/api/**', (req, res) => { });
+// Server static files from /browser
+app.get('*.*', express.static(DIST_FOLDER, {
+  maxAge: '1y'
+}));
+
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+  res.render('index', { req });
+});
+
+// Start up the Node server
+app.listen(PORT, () => {
+  console.log(`Node Express server listening on http://localhost:${PORT}`);
+});
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { NotFoundComponent } from './view/home/not-found/not-found.component';
+
+export const routes: Routes = [
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  {
+    path: '',
+    loadChildren: './view/view.module#ViewModule',
+  },
+  // { path: '**', redirectTo: 'home' },
+  { path: '404', component: NotFoundComponent },
+  { path: '**', redirectTo: '/404' },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, {
+      scrollPositionRestoration: 'enabled',
+    }),
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -0,0 +1 @@
+<router-outlet></router-outlet>
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@ -0,0 +1,35 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'explorer2-epic'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('explorer2-epic');
+  });
+
+  it('should render title in a h1 tag', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to explorer2-epic!');
+  });
+});
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'explorer2-epic';
+}
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -0,0 +1,24 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { HttpClientModule } from '@angular/common/http';
+
+import { NotFoundComponent } from './view/home/not-found/not-found.component';
+@NgModule({
+  declarations: [
+    AppComponent,NotFoundComponent
+  ],
+  imports: [
+    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    HttpClientModule,
+    AppRoutingModule,
+
+  ],
+  providers: [],
+  bootstrap: [AppComponent,NotFoundComponent]
+})
+export class AppModule { }
+
+
--- a/src/app/app.server.module.ts
+++ b/src/app/app.server.module.ts
@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}
--- a/src/app/shared/components/footer/footer.component.css
+++ b/src/app/shared/components/footer/footer.component.css
--- a/src/app/shared/components/footer/footer.component.html
+++ b/src/app/shared/components/footer/footer.component.html
@ -0,0 +1,41 @@
+ <footer>
+    <div class="footer">
+      <div class="container">
+        <div class="footer_div py-4">
+          <div class="row">
+            <div class="col-md-2">
+              <a href="#" class="chart_heading"><span class="txt_primary">COIN</span> <span
+                  class="txt_secondary">DATA</span></a>
+            </div>
+            <div class="col-md-5 col-lg-6 ftr_services">
+              <p><span class="gray_txt">Services:</span> <a href="#">Compare </a> | <a href="#">Charts New </a> | <a href="#">Feed </a> |
+                <a href="#">Broadcast </a> | <a href="#">Markets </a> | <a href="#">Dumps </a> <span class="ftr_links"><a href="#">About </a> | <a href="#">Issues and Requests </a> |
+                <a href="#">API </a> | <a href="#">Contacts </a> | <a href="#">Status </a></span></p>
+            </div>
+            <div class="col-md-2">
+              <p class="txt_primary privacy_txt">We care about your Privacy! <a href="#">Read Our Privacy Policy</a></p>
+
+            </div>
+            <div class="col-md-3 col-lg-2">
+              <div class="dropdown ftr_dropdown d-inline-block">
+
+                <a class="dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown"
+                  aria-haspopup="true" aria-expanded="false">
+                  <span class="flag" style="background-image: url('assets/img/uk.jpg')"></span>English
+                </a>
+                <div class="dropdown-menu " aria-labelledby="navbarDropdown1">
+                  <a class="dropdown-item p-2" href="#"><span class="flag"
+                      style="background-image: url('assets/img/uk.jpg')"></span>English</a>
+                  <a class="dropdown-item p-2" href="#"><span class="flag"
+                      style="background-image: url('assets/img/german.jpg')"></span>German</a>
+
+                </div>
+
+              </div>
+              <button (click)="ChangeTheme()" class="theme_switch btn"><img src="assets/img/dark_theme.webp" height="20" class="light_theme_display"><img src="assets/img/light_theme.webp" height="19"  class="dark_theme_display"></button>
+            </div>
+          </div>
+        </div>
+      </div>
+      </div>
+  </footer>
--- a/src/app/shared/components/footer/footer.component.spec.ts
+++ b/src/app/shared/components/footer/footer.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/shared/components/footer/footer.component.ts
+++ b/src/app/shared/components/footer/footer.component.ts
@ -0,0 +1,17 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Component({
+  selector: 'epic-explorer-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css'],
+})
+export class FooterComponent implements OnInit {
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
+  ngOnInit() {}
+
+  public ChangeTheme() {
+    this.document.body.classList.toggle('dark_theme');
+  }
+}
--- a/src/app/shared/components/header/header.component.css
+++ b/src/app/shared/components/header/header.component.css
--- a/src/app/shared/components/header/header.component.html
+++ b/src/app/shared/components/header/header.component.html
@ -0,0 +1,62 @@
+<header class="headerbg">
+  <nav class="navbar navbar-expand navbar-light bg-transparent">
+    <div class="container-fluid">
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item dropdown bg-white">
+            <a
+              class="nav-link dropdown-toggle"
+              href="#"
+              id="navbarDropdown"
+              role="button"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              <span
+                class="flag"
+                style="background-image: url('assets/img/uk.jpg')"
+              ></span
+              >English
+            </a>
+            <div class="dropdown-menu " aria-labelledby="navbarDropdown">
+              <a class="dropdown-item p-2" href="#"
+                ><span
+                  class="flag"
+                  style="background-image: url('assets/img/uk.jpg')"
+                ></span
+                >English</a
+              >
+              <a class="dropdown-item p-2" href="#"
+                ><span
+                  class="flag"
+                  style="background-image: url('assets/img/german.jpg')"
+                ></span
+                >German</a
+              >
+            </div>
+          </li>
+          <button (click)="ChangeTheme()" class="theme_switch btn">
+            <img
+              src="assets/img/dark_theme.webp"
+              height="20"
+              class="light_theme_display"
+            /><img
+              src="assets/img/light_theme.webp"
+              height="20"
+              class="dark_theme_display"
+            />
+          </button>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <h2 class="text-center mb-4 logo_txt">
+    <span class="txt_primary">COIN</span> DATA
+  </h2>
+  <div class="container">
+    <div class="search position-relative">
+      <epic-explorer-search></epic-explorer-search>
+    </div>
+  </div>
+</header>
--- a/src/app/shared/components/header/header.component.spec.ts
+++ b/src/app/shared/components/header/header.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/shared/components/header/header.component.ts
+++ b/src/app/shared/components/header/header.component.ts
@ -0,0 +1,17 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Component({
+  selector: 'epic-explorer-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css'],
+})
+export class HeaderComponent implements OnInit {
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
+  ngOnInit() {}
+
+  public ChangeTheme() {
+    this.document.body.classList.toggle('dark_theme');
+  }
+}
--- a/src/app/shared/components/layouts/home-layout/home-layout.component.css
+++ b/src/app/shared/components/layouts/home-layout/home-layout.component.css
--- a/src/app/shared/components/layouts/home-layout/home-layout.component.html
+++ b/src/app/shared/components/layouts/home-layout/home-layout.component.html
@ -0,0 +1,6 @@
+<epic-explorer-header></epic-explorer-header>
+<div >
+    <!-- [ngStyle]="{ 'min-height': screenHeight + 'px' }" -->
+  <router-outlet></router-outlet>
+</div>
+<epic-explorer-footer></epic-explorer-footer>
--- a/src/app/shared/components/layouts/home-layout/home-layout.component.spec.ts
+++ b/src/app/shared/components/layouts/home-layout/home-layout.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeLayoutComponent } from './home-layout.component';
+
+describe('HomeLayoutComponent', () => {
+  let component: HomeLayoutComponent;
+  let fixture: ComponentFixture<HomeLayoutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [HomeLayoutComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/shared/components/layouts/home-layout/home-layout.component.ts
+++ b/src/app/shared/components/layouts/home-layout/home-layout.component.ts
@ -0,0 +1,16 @@
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+
+@Component({
+  selector: 'epic-explorer-home-layout',
+  templateUrl: './home-layout.component.html',
+  styleUrls: ['./home-layout.component.css'],
+})
+export class HomeLayoutComponent implements OnInit, AfterViewInit {
+  screenHeight: number;
+  constructor() {
+    this.screenHeight = window.innerHeight;
+  }
+  ngOnInit() {}
+
+  ngAfterViewInit() {}
+}
--- a/src/app/shared/components/layouts/site-layout/site-layout.component.css
+++ b/src/app/shared/components/layouts/site-layout/site-layout.component.css
--- a/src/app/shared/components/layouts/site-layout/site-layout.component.html
+++ b/src/app/shared/components/layouts/site-layout/site-layout.component.html
@ -0,0 +1,5 @@
+<epic-explorer-siteheader></epic-explorer-siteheader>
+<div>
+  <router-outlet></router-outlet>
+</div>
+<epic-explorer-footer></epic-explorer-footer>
--- a/src/app/shared/components/layouts/site-layout/site-layout.component.spec.ts
+++ b/src/app/shared/components/layouts/site-layout/site-layout.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SiteLayoutComponent } from './site-layout.component';
+
+describe('SiteLayoutComponent', () => {
+  let component: SiteLayoutComponent;
+  let fixture: ComponentFixture<SiteLayoutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SiteLayoutComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SiteLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/shared/components/layouts/site-layout/site-layout.component.ts
+++ b/src/app/shared/components/layouts/site-layout/site-layout.component.ts
@ -0,0 +1,16 @@
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+
+@Component({
+  selector: 'epic-explorer-home-layout',
+  templateUrl: './site-layout.component.html',
+  styleUrls: ['./site-layout.component.css'],
+})
+export class SiteLayoutComponent implements OnInit, AfterViewInit {
+  screenHeight: number;
+  constructor() {
+    this.screenHeight = window.innerHeight;
+  }
+  ngOnInit() {}
+
+  ngAfterViewInit() {}
+}
--- a/src/app/shared/components/plotly/plotly.component.css
+++ b/src/app/shared/components/plotly/plotly.component.css
--- a/src/app/shared/components/plotly/plotly.component.html
+++ b/src/app/shared/components/plotly/plotly.component.html
@ -0,0 +1 @@
+<div #plotly></div>
--- a/src/app/shared/components/plotly/plotly.component.ts
+++ b/src/app/shared/components/plotly/plotly.component.ts
@ -0,0 +1,64 @@
+import {
+    Component,
+    ViewChild,
+    ElementRef,
+    Input,
+    AfterViewInit,
+  } from '@angular/core';
+  import { environment } from '../../../../environments/environment';
+
+  @Component({
+    selector: 'epic-explorer-plotly',
+    templateUrl: './plotly.component.html',
+    styleUrls: ['./plotly.component.css'],
+  })
+  export class PlotlyComponent implements AfterViewInit {
+    @ViewChild('plotly', {static: false}) plotly !: ElementRef;
+    private _data: any;
+    private _layout: any;
+    private _options: any;
+    private _plotlyJs: any;
+    constructor() {  }
+
+    @Input() set data(data: any) {
+      this._data = data;
+      if(this._plotlyJs){
+          this.showChart();
+        }
+    }
+    get data(): any {
+      return this._data;
+    }
+    @Input() set layout(layout: any) {
+      this._layout = layout;
+    }
+
+    get layout(): any {
+      return this._layout;
+    }
+    dataarr(data: any):void {
+      console.log(data);
+    }
+    @Input() set options(options: any) {
+       this._options = options;
+    }
+    get options(): any {
+      return this._options;
+    }
+    showChart(){
+      this._plotlyJs.newPlot(
+        this.plotly.nativeElement,
+        this._data,
+        this._layout,
+        this._options,
+      );
+    }
+    ngAfterViewInit() {
+      import('plotly.js/dist/plotly-cartesian.js').then(Plotly => {
+        //stringHelpers.reverse('Hello World');
+        this._plotlyJs=Plotly;
+        this.showChart();
+      });
+
+    }
+  }
--- a/src/app/shared/components/search/search.component.css
+++ b/src/app/shared/components/search/search.component.css
--- a/src/app/shared/components/search/search.component.html
+++ b/src/app/shared/components/search/search.component.html
@ -0,0 +1,2 @@
+<input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input mb-1" (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="Search by hash or height">
+<button (click)="ctrl.value ? onSearch(ctrl.value) : ''" class="btn search_btn"><i class="fa fa-search"></i></button>
--- a/src/app/shared/components/search/search.component.spec.ts
+++ b/src/app/shared/components/search/search.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchComponent } from './search.component';
+
+describe('SearchComponent', () => {
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SearchComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/shared/components/search/search.component.ts
+++ b/src/app/shared/components/search/search.component.ts
@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'epic-explorer-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.css'],
+})
+export class SearchComponent implements OnInit {
+  search: string = '';
+  constructor(private router: Router) {}
+
+  ngOnInit() {}
+
+  onSearch(hash) {
+    this.router.navigate(['blockdetail', hash]);
+  }
+}
--- a/src/app/shared/components/siteheader/siteheader.component.css
+++ b/src/app/shared/components/siteheader/siteheader.component.css
--- a/src/app/shared/components/siteheader/siteheader.component.html
+++ b/src/app/shared/components/siteheader/siteheader.component.html
@ -0,0 +1,47 @@
+<nav class="navbar navbar-expand-lg navbar-light view_page_header">
+  <div class="container">
+    <a class="navbar-brand chart_heading d-sm-block d-none" routerLink="/"><span
+        class="txt_primary">Coin</span><span>Data</span></a>
+
+
+    <div class="ml-auto">
+      <a class="chart_heading d-sm-none" routerLink="/"><span class="txt_primary">Coin</span><span>Data</span></a>
+      <div class="position-relative d-none d-sm-inline-block">
+        <input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input"
+          (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="Search by hash or height">
+        <button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''">
+          <!-- <a href="/blockdetail/{{ ctrl.value }}"  > -->
+          <i class="fa fa-search"></i>
+          <!-- </a> -->
+        </button>
+      </div>
+      <div class="mble_view_hdr">
+        <div class="nav-item dropdown bg-white d-inline-block ml-2 order-1 order-sm-2">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
+            aria-haspopup="true" aria-expanded="false">
+            <span class="flag" style="background-image: url('assets/img/uk.jpg')"></span>English
+          </a>
+          <div class="dropdown-menu " aria-labelledby="navbarDropdown">
+            <a class="dropdown-item p-2" href="#"><span class="flag"
+                style="background-image: url('assets/img/uk.jpg')"></span>English</a>
+            <a class="dropdown-item p-2" href="#"><span class="flag"
+                style="background-image: url('assets/img/german.jpg')"></span>German</a>
+
+          </div>
+        </div>
+        <button (click)="ChangeTheme()" class="theme_switch mr-2 btn order-2 order-sm-3"><img
+            src="assets/img/dark_theme.png" height="20" class="light_theme_display"><img
+            src="assets/img/light_theme.png" height="20" class="dark_theme_display"></button>
+      </div>
+    </div>
+    <div class="position-relative d-block d-sm-none w-100 mt-3">
+      <input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input"
+        (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="Search by hash or height">
+      <button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''">
+        <!-- <a href="/blockdetail/{{ ctrl.value }}"  > -->
+        <i class="fa fa-search"></i>
+        <!-- </a> -->
+      </button>
+    </div>
+  </div>
+</nav>
--- a/src/app/shared/components/siteheader/siteheader.component.spec.ts
+++ b/src/app/shared/components/siteheader/siteheader.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SiteheaderComponent } from './siteheader.component';
+
+describe('SiteheaderComponent', () => {
+  let component: SiteheaderComponent;
+  let fixture: ComponentFixture<SiteheaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SiteheaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SiteheaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/shared/components/siteheader/siteheader.component.ts
+++ b/src/app/shared/components/siteheader/siteheader.component.ts
@ -0,0 +1,27 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'epic-explorer-siteheader',
+  templateUrl: './siteheader.component.html',
+  styleUrls: ['./siteheader.component.css'],
+})
+export class SiteheaderComponent implements OnInit {
+  search: string = '';
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    private router: Router,
+  ) {}
+
+  ngOnInit() {}
+
+  public ChangeTheme() {
+    this.document.body.classList.toggle('dark_theme');
+  }
+
+  onSearch(hash) {
+    this.router.navigate(['blockdetail', hash]);
+  }
+}
--- a/src/app/shared/services/chart.service.spec.ts
+++ b/src/app/shared/services/chart.service.spec.ts
@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ChartService } from './chart.service';
+
+describe('ChartService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ChartService = TestBed.get(ChartService);
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/app/shared/services/chart.service.ts
+++ b/src/app/shared/services/chart.service.ts
@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpClient,
+  HttpErrorResponse,
+  HttpHeaders,
+} from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+import { throwError, Observable, BehaviorSubject } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ChartService {
+  constructor(private http: HttpClient) {}
+
+  public apiGetRequest(request: any, reqUrl): Observable<any> {
+    return this.http
+      .get(`${environment.apiUrl}` + reqUrl, {
+        params: request,
+      })
+      .pipe(
+        map(res => {
+          return res;
+        }),
+        catchError((error: HttpErrorResponse): any => throwError(error)),
+      );
+  }
+}
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component';
+import { HomeLayoutComponent } from './components/layouts/home-layout/home-layout.component';
+import { RouterModule } from '@angular/router';
+import { SearchComponent } from './components/search/search.component';
+import { SiteLayoutComponent } from './components/layouts/site-layout/site-layout.component';
+import { SiteheaderComponent } from './components/siteheader/siteheader.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { PlotlyComponent } from './components/plotly/plotly.component';
+
+const components = [
+  HeaderComponent,
+  FooterComponent,
+  HomeLayoutComponent,
+  SearchComponent,
+  SiteLayoutComponent,
+  SiteheaderComponent,
+  PlotlyComponent
+];
+
+@NgModule({
+  declarations: components,
+  exports: components,
+  imports: [CommonModule, RouterModule, FormsModule, ReactiveFormsModule],
+})
+export class SharedModule {}
--- a/src/app/shared/utils.ts
+++ b/src/app/shared/utils.ts
@ -0,0 +1,9 @@
+export class Utils {
+  constructor(public document) {}
+
+  public removeLoader(): void {
+    this.document.getElementById('loader')
+      ? this.document.getElementById('loader').remove()
+      : '';
+  }
+}
--- a/src/app/view/block-view/block-detail/block-detail.component.css
+++ b/src/app/view/block-view/block-detail/block-detail.component.css
--- a/src/app/view/block-view/block-detail/block-detail.component.html
+++ b/src/app/view/block-view/block-detail/block-detail.component.html
@ -0,0 +1,265 @@
+<div class="view_content py-4">
+  <div *ngIf="hasdata" class="container">
+    <div *ngIf="hashdata?.BlockchainBlockFetchQuery" class="box_shadow_large bg-white p-3 mb-4">
+      <h3 class="mb-0">
+        <img src="assets/img/block.png" height="30" class="block_rotate float-left mr-2" />
+        Block {{ hashdata.BlockchainBlockFetchQuery.Height }}
+      </h3>
+      <div class="row mb-3">
+        <div class="col-sm-6 col-md-4 mt-4">
+          <div class="d-inline-block align-middle">
+            <img src="assets/img/fee.png" height="60" />
+          </div>
+          <div class="d-inline-block align-middle ml-2">
+            <span class="">Fee</span>
+            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.Fee }} Epic</h6>
+          </div>
+        </div>
+        <div class="col-sm-6 col-md-4 mt-4">
+          <div class="d-inline-block align-middle">
+            <img src="assets/img/hash.png" height="60" />
+          </div>
+          <div [title]="hashdata.BlockchainBlockFetchQuery.Hash" class="d-inline-block align-middle ml-2">
+            <span class="">Hash</span>
+            <h6 *ngIf="hashdata?.BlockchainBlockFetchQuery" class="view_txt">
+              <!-- {{ hashdata.BlockchainBlockFetchQuery.Hash }} -->
+              <span class="blck_value">{{ hashdata.BlockchainBlockFetchQuery.hashstart
+              }}<span
+                *ngFor="let color of hashdata.BlockchainBlockFetchQuery.hasharray"
+                class="hash"
+                [ngStyle]="{ 'background-color': color }"
+              ></span
+              >{{ hashdata.BlockchainBlockFetchQuery.hashend }}</span>
+            </h6>
+          </div>
+        </div>
+        <div class="col-sm-6 col-md-4 mt-4">
+          <div class="d-inline-block align-middle">
+            <img src="assets/img/difficulty.png" height="60" />
+          </div>
+          <div class="d-inline-block align-middle ml-2">
+            <span class="">Difficulty</span>
+            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.TotalDifficulty }}</h6>
+          </div>
+        </div>
+        <div class="col-sm-6 col-md-4 mt-4 pt-2">
+          <div class="d-inline-block align-middle">
+            <img src="assets/img/block_reward.png" height="60" />
+          </div>
+          <div class="d-inline-block align-middle ml-2">
+            <span class="">Block Reward</span>
+            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.BlockReward }} Epic</h6>
+          </div>
+        </div>
+        <div class="col-sm-6 col-md-4 mt-4 pt-2">
+          <div class="d-inline-block align-middle">
+            <img src="assets/img/age.png" height="60" />
+          </div>
+          <div class="d-inline-block align-middle ml-2">
+            <span class="">Age</span>
+            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.Timestamp }}</h6>
+          </div>
+        </div>
+        <div class="col-sm-6 col-md-4 mt-4 pt-2">
+          <div class="d-inline-block align-middle">
+            <img src="assets/img/algorithm.png" height="60" />
+          </div>
+          <div class="d-inline-block align-middle ml-2">
+            <span class="">Pow Algorithm</span>
+            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.PoWAlgorithm }}</h6>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="box_shadow_large bg-white p-3 mb-4">
+      <div id="accordion">
+        <div class="card mb-3">
+          <div class="card-header" id="heading-1">
+            <a role="button" data-toggle="collapse" href="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
+              <h5 class="mb-0 tab_hdng">
+                Input ({{hashdata?.BlockchainBlockInputFetchQuery.length ? hashdata.BlockchainBlockInputFetchQuery.length : 0}})
+
+              </h5>
+            </a>
+          </div>
+          <!-- *ngIf="hashdata?.BlockchainBlockInputFetchQuery.length" -->
+          <div id="collapse-1" class="collapse" data-parent="#accordion" aria-labelledby="heading-1">
+            <div class="card-body">
+                <div class="view_moble_tble web_hdng">
+                    <div class="row">
+                        <div class="col-lg-2">
+                         <div class="block_div"><h5 class="mb-0">Commit</h5></div>
+                        </div>
+
+
+
+                      </div>
+                </div>
+                  <div class="view_moble_tble" *ngFor="let hashinput of hashdata.BlockchainBlockInputFetchQuery">
+                      <div class="row">
+                        <div class="col-12">
+                         <div class="block_div"><h6>Commit</h6><span class="blck_value">{{ hashinput.Data }}</span></div>
+                        </div>
+
+
+
+                      </div>
+                    </div>
+              <!-- <div class="table-responsive">
+                <table class="table table-striped">
+                  <tbody>
+                    <tr>
+                      <td>Commit</td>
+                    </tr>
+                    <tr>
+                      <td class="word_break">
+                        <p *ngFor="let hashinput of hashdata.BlockchainBlockInputFetchQuery">{{ hashinput.Data }}</p>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div> -->
+            </div>
+          </div>
+        </div>
+        <div class="card mb-3">
+          <div class="card-header" id="heading-2">
+
+            <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-2" aria-expanded="false"
+              aria-controls="collapse-2">
+              <h5 class="mb-0 tab_hdng">Output ({{hashdata?.BlockchainBlockOutputFetchQuery.length ? hashdata.BlockchainBlockOutputFetchQuery.length : 0}}) </h5>
+            </a>
+
+          </div>
+
+          <div id="collapse-2" class="collapse" data-parent="#accordion" aria-labelledby="heading-2">
+            <div class="card-body">
+              <div class="view_moble_tble web_hdng">
+                  <div class="row">
+                      <div class="col-lg-2">
+                       <div class="block_div"><h5 class="mb-0">Output Type</h5></div>
+                      </div>
+                      <div class="col-lg-2 order-3">
+                          <div class="block_div"><h5 class="mb-0">Spent</h5></div>
+                        </div>
+                      <div class="col-lg-8 order-2">
+                        <div class="block_div"><h5 class="mb-0">Commit</h5></div>
+                      </div>
+
+
+                    </div>
+              </div>
+                <div class="view_moble_tble"  *ngFor="let hashoutput of hashdata.BlockchainBlockOutputFetchQuery">
+                    <div class="row">
+                      <div class="col-12 col-sm-4 col-md-4 col-lg-2">
+                       <div class="block_div"><h6>Output Type</h6><span class="blck_value">{{ hashoutput.OutputType }}</span></div>
+                      </div>
+                      <div class="col-12 col-sm-4 col-md-4 col-lg-2 order-lg-3">
+                          <div class="block_div"><h6>Spent</h6><span class="blck_value">{{ hashoutput.Spent }}</span></div>
+                        </div>
+                      <div class="col-12 col-sm-4 col-md-4 col-lg-8 order-lg-2">
+                        <div class="block_div"><h6>Commit</h6><span class="blck_value">{{ hashoutput.Commit }}</span></div>
+                      </div>
+
+
+                    </div>
+                  </div>
+              <!-- <div class="table-responsive">
+                <table class="table table-striped">
+                  <tbody>
+                    <tr>
+                      <td>Output Type</td>
+                      <td>Commit</td>
+                      <td>Spent</td>
+                    </tr>
+                    <tr *ngFor="let hashoutput of hashdata.BlockchainBlockOutputFetchQuery">
+                      <td>{{ hashoutput.OutputType }}</td>
+                      <td>
+                        {{ hashoutput.Commit }}
+                      </td>
+                      <td>{{ hashoutput.Spent }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div> -->
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header" id="heading-3">
+
+            <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-3" aria-expanded="false"
+              aria-controls="collapse-3">
+              <h5 class="mb-0 tab_hdng">Kernals ({{hashdata?.BlockchainBlockKernalFetchQuery.length ? hashdata.BlockchainBlockKernalFetchQuery.length : 0}})</h5>
+            </a>
+
+          </div>
+          <div id="collapse-3" class="collapse" data-parent="#accordion" aria-labelledby="heading-3">
+            <div class="card-body">
+                <div class="view_moble_tble web_hdng">
+                    <div class="row">
+                        <div class="col-lg-4">
+                         <div class="block_div"><h5 class="mb-0">Features</h5></div>
+                        </div>
+                        <div class="col-lg-4 ">
+                          <div class="block_div"><h5 class="mb-0">Lock Height</h5></div>
+                        </div>
+                        <div class="col-lg-4 ">
+                            <div class="block_div"><h5 class="mb-0">Fee</h5></div>
+                          </div>
+
+                      </div>
+                </div>
+                  <div class="view_moble_tble"  *ngFor="let hashkernel of hashdata.BlockchainBlockKernalFetchQuery">
+                      <div class="row">
+                        <div class="col-12 col-sm-4 col-md-4 col-lg-4">
+                         <div class="block_div"><h6>Features</h6><span class="blck_value">{{ hashkernel.Features }}</span></div>
+                        </div>
+
+                        <div class="col-12 col-sm-4 col-md-4 col-lg-4">
+                          <div class="block_div"><h6>Lock Height</h6><span class="blck_value">{{ hashkernel.LockHeight }}</span></div>
+                        </div>
+                        <div class="col-12 col-sm-4 col-md-4 col-lg-4">
+                            <div class="block_div"><h6>Fee</h6><span class="blck_value">{{ hashkernel.Fee }} Epic</span></div>
+                          </div>
+
+
+                      </div>
+                    </div>
+              <!-- <div class="table-responsive">
+                <table class="table table-striped">
+                  <tbody>
+                    <tr>
+                      <td>Features</td>
+                      <td>Fee</td>
+                      <td>Lock Height</td>
+                    </tr>
+                    <tr *ngFor="let hashkernel of hashdata.BlockchainBlockKernalFetchQuery">
+                      <td>{{ hashkernel.Features }}</td>
+                      <td>
+                        {{ hashkernel.Fee }}
+                      </td>
+                      <td>{{ hashkernel.LockHeight }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+
+
+  </div>
+  <div *ngIf="!hasdata" class="container">
+
+    <div class="box_shadow_large bg-white p-3 mb-4 text-center">
+      <h4>Search Results for <span class="txt_primary">"{{params}}"</span></h4>
+      <p>Your search term {{params}} is too short, please enter at least six characters if searching by hash.</p>
+    </div>
+  </div>
+</div>
--- a/src/app/view/block-view/block-detail/block-detail.component.spec.ts
+++ b/src/app/view/block-view/block-detail/block-detail.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlockDetailComponent } from './block-detail.component';
+
+describe('BlockDetailComponent', () => {
+  let component: BlockDetailComponent;
+  let fixture: ComponentFixture<BlockDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [BlockDetailComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BlockDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/view/block-view/block-detail/block-detail.component.ts
+++ b/src/app/view/block-view/block-detail/block-detail.component.ts
@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpParams } from '@angular/common/http';
+import { ChartService } from '../../../shared/services/chart.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-block-detail',
+  templateUrl: './block-detail.component.html',
+  styleUrls: ['./block-detail.component.css'],
+})
+export class BlockDetailComponent implements OnInit {
+  public hashdata: any;
+  public hasdata: boolean = true;
+  public params: any;
+
+  constructor(
+    private route: ActivatedRoute,
+    private chartService: ChartService,
+    activate_route: ActivatedRoute,
+  ) {
+    activate_route.params.subscribe(val => {
+      this.params = this.route.snapshot.params.hash;
+
+      this.viewhash(this.params);
+    });
+  }
+
+  ngOnInit() {}
+
+  public viewhash(hashid) {
+    this.chartService
+      .apiGetRequest('', '/blockchain_block/' + hashid)
+      .subscribe(
+        res => {
+          if (res['status'] == 200) {
+            this.hasdata = true;
+            this.hashdata = res.response;
+          }
+        },
+        error => {
+          this.hasdata = false;
+        },
+      );
+  }
+}
--- a/src/app/view/block-view/block-view-routing.module.ts
+++ b/src/app/view/block-view/block-view-routing.module.ts
@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { BlockViewWorkspaceComponent } from './block-view-workspace.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BlockViewWorkspaceComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class BlockViewRoutingModule {}
--- a/src/app/view/block-view/block-view-workspace.component.spec.ts
+++ b/src/app/view/block-view/block-view-workspace.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlockViewWorkspaceComponent } from './block-view-workspace.component';
+
+describe('BlockViewWorkspaceComponent', () => {
+  let component: BlockViewWorkspaceComponent;
+  let fixture: ComponentFixture<BlockViewWorkspaceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [BlockViewWorkspaceComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BlockViewWorkspaceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/view/block-view/block-view-workspace.component.ts
+++ b/src/app/view/block-view/block-view-workspace.component.ts
@ -0,0 +1,23 @@
+import { Component, OnInit, Inject, AfterViewInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Utils } from 'src/app/shared/utils';
+
+@Component({
+  selector: 'epic-explorer-block-view-workspace',
+  template: `
+    <app-block-detail></app-block-detail>
+  `,
+  styles: [],
+})
+export class BlockViewWorkspaceComponent extends Utils
+  implements OnInit, AfterViewInit {
+  constructor(@Inject(DOCUMENT) public document: Document) {
+    super(document);
+  }
+
+  ngOnInit() {}
+
+  ngAfterViewInit() {
+    this.removeLoader();
+  }
+}
--- a/src/app/view/block-view/block-view.module.ts
+++ b/src/app/view/block-view/block-view.module.ts
@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BlockViewRoutingModule } from './block-view-routing.module';
+import { BlockViewWorkspaceComponent } from './block-view-workspace.component';
+import { BlockDetailComponent } from './block-detail/block-detail.component';
+
+@NgModule({
+  declarations: [BlockViewWorkspaceComponent, BlockDetailComponent],
+  imports: [CommonModule, BlockViewRoutingModule],
+})
+export class BlockViewModule {}
--- a/src/app/view/graph-view/graph-detail/graph-detail.component.css
+++ b/src/app/view/graph-view/graph-detail/graph-detail.component.css
--- a/src/app/view/graph-view/graph-detail/graph-detail.component.html
+++ b/src/app/view/graph-view/graph-detail/graph-detail.component.html
@ -0,0 +1,33 @@
+<div class="view_content py-4">
+  <div class="col-md-12">
+      <div class="box_shadow">
+        <div class="blocks">
+
+    <h2 class="chart_heading text-uppercase d-inline-block">{{this.title}}</h2>
+
+  <epic-explorer-plotly *ngIf="hashdata.data" [data]="hashdata.data" [layout]="hashdata.layout">
+  </epic-explorer-plotly>
+  <div class="day_filter">
+    <a href="JavaScript:void(0);" (click)="
+    ChartFromView('', '', '1 week', true, false); selectedItem = 1
+      " id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primay: true }">1 week</a>
+    <a href="JavaScript:void(0);" (click)="
+    ChartFromView('', '', '15 days', true, false); selectedItem = 2
+      " id="2" #item2 [ngClass]="{ active: selectedItem == item2.id, day15_txt: true }">15 days</a>
+    <a href="JavaScript:void(0);" (click)="
+    ChartFromView('', '', '30 days', true, false); selectedItem = 3
+      " id="3" #item3 [ngClass]="{ active: selectedItem == item3.id, day30_txt: true }">30 days</a>
+    <a href="JavaScript:void(0);" (click)="
+    ChartFromView('', '', '60 days', true, false); selectedItem = 4
+      " id="4" #item4 [ngClass]="{ active: selectedItem == item4.id, day60_txt: true }">60 days</a>
+    <a href="JavaScript:void(0);" (click)="
+    ChartFromView('', '', '3 months', true, false); selectedItem = 5
+      " id="5" #item5 [ngClass]="{ active: selectedItem == item5.id, day3m_txt: true }">3 months</a>
+  </div>
+
+
+  </div>
+
+</div>
+</div>
+</div>
--- a/src/app/view/graph-view/graph-detail/graph-detail.component.spec.ts
+++ b/src/app/view/graph-view/graph-detail/graph-detail.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GraphDetailComponent } from './graph-detail.component';
+
+describe('GraphDetailComponent', () => {
+  let component: GraphDetailComponent;
+  let fixture: ComponentFixture<GraphDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GraphDetailComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GraphDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/view/graph-view/graph-detail/graph-detail.component.ts
+++ b/src/app/view/graph-view/graph-detail/graph-detail.component.ts
@ -0,0 +1,203 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { HttpParams } from '@angular/common/http';
+import { ChartService } from '../../../shared/services/chart.service';
+import { ActivatedRoute } from '@angular/router';
+import { GraphListComponent } from '../../home/graph-list/graph-list.component';
+
+@Component({
+  providers: [GraphListComponent],
+  selector: 'app-graph-detail',
+  templateUrl: './graph-detail.component.html',
+  styleUrls: ['./graph-detail.component.css'],
+})
+export class GraphDetailComponent implements OnInit {
+  public hashdata: any = [];
+  public title: any;
+  public chartType : any = [];
+  public selectedItem=3;
+  constructor(
+    private route: ActivatedRoute,
+    private chartService: ChartService,
+    private comp: GraphListComponent,
+  ) {}
+  ngOnInit() {
+    this.chartType = this.route.snapshot.params.hashid;
+    switch(this.chartType){
+      case "difficulty":
+          this.comp.Difficultyreq().then(res => {
+            this.hashdata = this.comp.linearGraphData;
+            this.hashdata.layout.height=500;
+            this.title="Difficulty";
+            console.log(this.hashdata);
+          });
+      break;
+      case "transactionsbytime":
+          this.comp.Transactionheatmapreq().then(res => {
+            this.hashdata = this.comp.heatMapGrowthData;
+            this.hashdata.layout.height=500;
+            this.title="Transactions by time";
+          });
+      break;
+      case "block":
+          this.comp.Difficultyreq().then(res => {
+            this.hashdata = this.comp.barGraphData;
+            this.hashdata.layout.height=500;
+            this.title="Block";
+          });
+      break;
+      case "transactionsfee":
+          this.comp.Transcationreq().then(res => {
+            this.hashdata = this.comp.transcationGraphData;
+            console.log(this.hashdata);
+            this.hashdata.layout.height=500;
+            this.title="Transactions Fee";
+          });
+      break;
+      case "supplygrowth":
+          this.comp.Growthreq().then(res => {
+            this.hashdata = this.comp.growthGraphData;
+            this.hashdata.layout.height=500;
+            this.title="Supply Growth";
+          });
+      break;
+      case "blocksmined":
+          this.comp.Blockminedreq().then(res => {
+            this.hashdata = this.comp.doubleareaGraphData;
+            this.hashdata.layout.height=500;
+            this.title="Blocks Mined";
+          });
+      break;
+      case "hashrategrowth":
+          this.comp.Transactiondoublelinechartreq().then(res => {
+            this.hashdata = this.comp.blockGraphData;
+            this.hashdata.layout.height=500;
+            this.hashdata.layout.width=window.innerWidth-10;
+            this.title="Hash Rate Growth";
+          });
+      break;
+      case "blockinterval":
+          this.comp.Blockspersecreq().then(res => {
+            this.hashdata = this.comp.areaGraphData;
+            this.hashdata.layout.height=500;
+            this.title="Block Interval";
+          });
+      break;
+      case "transactionsdate":
+          this.comp.Transactionlinechartreq().then(res => {
+            this.hashdata = this.comp.feeGraphData;
+            this.hashdata.layout.height=500;
+            this.hashdata.layout.width=window.innerWidth-10;
+            console.log(this.hashdata.layout.width);
+            this.title="Transactions Vs Date";
+          });
+      break;
+
+    }
+
+  }
+  public ChartFromView(
+    p1,
+    p2,
+    p3,
+    p4,
+    p5
+  ) {
+    // (p1, p2, p3, p4, p5) for (fromDate, ToDate, interval, fordifficult, forblocks) for difficult and nar chart
+    // AND For heatmap and others - It will change
+
+    switch(this.chartType){
+      case "difficulty":
+        this.comp
+        .Difficultyreq(p1, p2, p3, p4, p5)
+        .then(res => {
+          this.hashdata = this.comp.linearGraphData;
+          this.hashdata.layout.height=500;
+          this.title="Difficulty";
+        });
+      break;
+      case "transactionsbytime":
+          this.comp
+        .transactionheatmapFunc(p1, p2, p3, p4)
+        .then(res => {
+          this.hashdata = this.comp.heatMapGrowthData;
+          this.hashdata.layout.height=500;
+          this.title="Transactions by time";
+        });
+      break;
+      case "block":
+          this.comp
+        .Difficultyreq(p1, p2, p3, false, true)
+        .then(res => {
+          this.hashdata = this.comp.barGraphData;
+          this.hashdata.layout.height=500;
+          this.title="Block";
+        });
+      break;
+      case 'blocksmined':
+        this.comp.Blockminedreq(p1, p2, p3).then(res => {
+          this.hashdata = this.comp.doubleareaGraphData;
+          this.hashdata.layout.height = 500;
+          this.title = 'Blocks Mined';
+        });
+        break;
+      case "transactionsfee":
+          this.comp
+        .Transcationreq(p1, p2, p3)
+        .then(res => {
+          this.hashdata = this.comp.transcationGraphData;
+          this.hashdata.layout.height=500;
+          this.title="Transactions Fee";
+        });
+      break;
+      case "supplygrowth":
+          this.comp
+        .Growthreq(p1, p2, p3)
+        .then(res => {
+          this.hashdata = this.comp.growthGraphData;
+          this.hashdata.layout.height=500;
+          this.title="Supply Growth";
+        });
+      break;
+      case "Transactiondoublelinechartreq":
+          this.comp
+        .Blockminedreq(p1, p2, p3)
+        .then(res => {
+          this.hashdata = this.comp.doubleareaGraphData;
+          this.hashdata.layout.height=500;
+          this.title="Blocks Mined";
+        });
+      break;
+      case "hashrategrowth":
+          this.comp
+        .Transactiondoublelinechartreq(p1, p2, p3)
+        .then(res => {
+          this.hashdata = this.comp.blockGraphData;
+          this.hashdata.layout.height=500;
+          this.hashdata.layout.width=window.innerWidth-10;
+          this.title="Hash Rate Growth";
+        });
+      break;
+      case "blockinterval":
+          this.comp
+        .Blockspersecreq(p1, p2, p3)
+        .then(res => {
+          this.hashdata = this.comp.areaGraphData;
+          this.hashdata.layout.height=500;
+          this.title="Block Interval";
+        });
+      break;
+      case "transactionsdate":
+          this.comp
+          .Transactionlinechartreq(p1, p2, p3)
+          .then(res => {
+            this.hashdata = this.comp.feeGraphData;
+            this.hashdata.layout.height=500;
+            this.hashdata.layout.width=window.innerWidth-10;
+            this.title="Transactions Vs Date";
+          });
+      break;
+    }
+
+    }
+
+}
--- a/src/app/view/graph-view/graph-view-routing.module.ts
+++ b/src/app/view/graph-view/graph-view-routing.module.ts
@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { GraphViewWorkspaceComponent } from './graph-view-workspace.component';
+
+const routes: Routes = [
+  {
+    path: ':hashid',
+    component: GraphViewWorkspaceComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GraphViewRoutingModule {}
--- a/src/app/view/graph-view/graph-view-workspace.component.spec.ts
+++ b/src/app/view/graph-view/graph-view-workspace.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GraphViewWorkspaceComponent } from './graph-view-workspace.component';
+
+describe('GraphViewWorkspaceComponent', () => {
+  let component: GraphViewWorkspaceComponent;
+  let fixture: ComponentFixture<GraphViewWorkspaceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GraphViewWorkspaceComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GraphViewWorkspaceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/view/graph-view/graph-view-workspace.component.ts
+++ b/src/app/view/graph-view/graph-view-workspace.component.ts
@ -0,0 +1,23 @@
+import { Component, OnInit, Inject, AfterViewInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Utils } from 'src/app/shared/utils';
+
+@Component({
+  selector: 'epic-explorer-graph-view-workspace',
+  template: `
+    <app-graph-detail></app-graph-detail>
+  `,
+  styles: [],
+})
+export class GraphViewWorkspaceComponent extends Utils
+  implements OnInit, AfterViewInit {
+  constructor(@Inject(DOCUMENT) public document: Document) {
+    super(document);
+  }
+
+  ngOnInit() {}
+
+  ngAfterViewInit() {
+    this.removeLoader();
+  }
+}
--- a/src/app/view/graph-view/graph-view.module.ts
+++ b/src/app/view/graph-view/graph-view.module.ts
@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GraphViewRoutingModule } from './graph-view-routing.module';
+import { GraphViewWorkspaceComponent } from './graph-view-workspace.component';
+import { GraphDetailComponent } from './graph-detail/graph-detail.component';
+import { HomeModule } from '../home/home.module';
+import { SharedModule } from '../../shared/shared.module';
+@NgModule({
+  declarations: [GraphViewWorkspaceComponent, GraphDetailComponent],
+  imports: [CommonModule, GraphViewRoutingModule, HomeModule,SharedModule
+  ],
+})
+export class GraphViewModule {}
--- a/src/app/view/home/block-detail-list/block-detail-list.component.css
+++ b/src/app/view/home/block-detail-list/block-detail-list.component.css
--- a/src/app/view/home/block-detail-list/block-detail-list.component.html
+++ b/src/app/view/home/block-detail-list/block-detail-list.component.html
@ -0,0 +1,52 @@
+<!-- <div class="row">
+  <div class="col-md-3">
+    <div class="text-center detail_div">
+      <p class="count mb-0">74,913</p>
+      <p class="mb-0 desc">Blockchain Height</p>
+    </div>
+  </div>
+  <div class="col-md-3">
+    <div class="text-center detail_div">
+      <p class="count mb-0">99 <span class="">seconds ago</span></p>
+      <p class="mb-0 desc">Latest Block</p>
+    </div>
+  </div>
+  <div class="col-md-3">
+    <div class="text-center detail_div">
+      <p class="count mb-0">99 / 43</p>
+      <p class="mb-0 desc">Latest Block Difficulty</p>
+    </div>
+  </div>
+  <div class="col-md-3">
+    <div class="text-center detail_div">
+      <p class="count mb-0">374,3913 <span class="">Epic</span></p>
+      <p class="mb-0 desc">Coin in Existence</p>
+    </div>
+  </div>
+</div> -->
+<div class="row" *ngIf="latestblockdetail">
+  <div class="col-md-3">
+    <div class="text-center detail_div">
+      <p class="count mb-0">{{ latestblockdetail.block_height | number }}</p>
+      <p class="mb-0 desc">Blockchain Height</p>
+    </div>
+  </div>
+  <div class="col-md-3">
+    <div class="text-center detail_div">
+      <p class="count mb-0">{{latestblockdetail.letest_block_num}} <span class="">{{latestblockdetail.letest_block_duration}}</span></p>
+      <p class="mb-0 desc">Latest Block</p>
+    </div>
+  </div>
+  <div class="col-md-3">
+    <div class="text-center detail_div">
+      <p class="count mb-0">{{latestblockdetail.difficulty | number}} / {{latestblockdetail.targetdifficulty | number}}</p>
+      <p class="mb-0 desc">Latest Block Difficulty</p>
+    </div>
+  </div>
+  <div class="col-md-3">
+    <div class="text-center detail_div">
+      <p class="count mb-0">{{latestblockdetail.coin_existence | number}} <span class="">Epic</span></p>
+      <p class="mb-0 desc">Coins in Existence</p>
+    </div>
+  </div>
+</div>
--- a/src/app/view/home/block-detail-list/block-detail-list.component.spec.ts
+++ b/src/app/view/home/block-detail-list/block-detail-list.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlockDetailListComponent } from './block-detail-list.component';
+
+describe('BlockDetailListComponent', () => {
+  let component: BlockDetailListComponent;
+  let fixture: ComponentFixture<BlockDetailListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [BlockDetailListComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BlockDetailListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/view/home/block-detail-list/block-detail-list.component.ts
+++ b/src/app/view/home/block-detail-list/block-detail-list.component.ts
@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { ChartService } from '../../../shared/services/chart.service';
+import { HttpParams } from '@angular/common/http';
+
+@Component({
+  selector: 'app-block-detail-list',
+  templateUrl: './block-detail-list.component.html',
+  styleUrls: ['./block-detail-list.component.css'],
+})
+export class BlockDetailListComponent implements OnInit {
+  public latestblockdetail: any = [];
+
+  constructor(private chartService: ChartService) {}
+
+  ngOnInit() {
+    this.gettinglatesthashList();
+  }
+
+  public gettinglatesthashList() {
+    this.chartService
+      .apiGetRequest('', '/blockchain_block/latesblockdetails')
+      .subscribe(
+        res => {
+          if (res['status'] == 200) {
+            // var hasharray = res.response;
+            this.latestblockdetail = res.response;
+          }
+        },
+        error => {},
+      );
+  }
+}
--- a/src/app/view/home/graph-list/graph-list.component.css
+++ b/src/app/view/home/graph-list/graph-list.component.css
--- a/src/app/view/home/graph-list/graph-list.component.html
+++ b/src/app/view/home/graph-list/graph-list.component.html
@ -0,0 +1,394 @@
+<div class="row">
+  <div class="col-md-6 col-lg-4 mb-4">
+    <div class="box_shadow">
+      <div class="blocks">
+        <h2 class="chart_heading d-inline-block">Total Difficulty</h2>
+        <span class="txn_count" *ngIf="this.lg_last">{{
+          this.lg_last | number
+        }}</span>
+        <div class="chart_show">
+          <epic-explorer-plotly *ngIf="linearGraphData.data" [data]="linearGraphData.data" [layout]="linearGraphData.layout">
+          </epic-explorer-plotly>
+          <div *ngIf="!linearGraphData.data" class="feedback_div news_desc text-center">
+            <div class="graph_img background_loading mx-auto mb-3"></div>
+            <div class=" p-3 bg-white">
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="day_filter">
+        <a href="JavaScript:void(0);" (click)="
+            Difficultyreq('', '', '1 week', true, false); selectedItem = 1
+          " id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primay: true }">1 week</a>
+        <a href="JavaScript:void(0);" (click)="
+            Difficultyreq('', '', '15 days', true, false); selectedItem = 2
+          " id="2" #item2 [ngClass]="{ active: selectedItem == item2.id, day15_txt: true }">15 days</a>
+        <a href="JavaScript:void(0);" (click)="
+            Difficultyreq('', '', '30 days', true, false); selectedItem = 3
+          " id="3" #item3 [ngClass]="{ active: selectedItem == item3.id, day30_txt: true }">30 days</a>
+        <a href="JavaScript:void(0);" (click)="
+            Difficultyreq('', '', '60 days', true, false); selectedItem = 4
+          " id="4" #item4 [ngClass]="{ active: selectedItem == item4.id, day60_txt: true }">60 days</a>
+        <a href="JavaScript:void(0);" (click)="
+            Difficultyreq('', '', '3 months', true, false); selectedItem = 5
+          " id="5" #item5 [ngClass]="{ active: selectedItem == item5.id, day3m_txt: true }">3 months</a>
+      </div>
+      <div class="explore_all text-right">
+        <a routerLink="/chart/difficulty"><span class="text-uppercase d-block">explore all <i
+          class="fa fa-long-arrow-right"></i></span></a>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-lg-4 mb-4">
+    <div class="box_shadow">
+      <div class="blocks">
+        <h2 class="chart_heading d-inline-block">Transactions By Time</h2>
+        <div class="chart_show heatmapshow">
+          <epic-explorer-plotly *ngIf="heatMapGrowthData.data" [data]="heatMapGrowthData.data"
+            [layout]="heatMapGrowthData.layout"></epic-explorer-plotly>
+          <div *ngIf="!heatMapGrowthData.data" class="feedback_div news_desc text-center">
+            <div class="graph_img background_loading mx-auto mb-3"></div>
+            <div class=" p-3 bg-white">
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+    <div class="day_filter">
+      <a href="JavaScript:void(0);" (click)="transactionheatmapFunc(tDate, tHour, tInput,'Input'); selectedItem8 = 1" id="1" #item1
+        [ngClass]="{ active: selectedItem8 == item1.id, txt_primay: true }">Input</a>
+      <a href="JavaScript:void(0);" (click)="transactionheatmapFunc(tDate, tHour, tKernal,'Kernal'); selectedItem8 = 2" id="2" #item2
+        [ngClass]="{ active: selectedItem8 == item2.id, day15_txt: true }">Kernel</a>
+      <a href="JavaScript:void(0);" (click)="transactionheatmapFunc(tDate, tHour, tOutput,'Output'); selectedItem8 = 3" id="3" #item3
+        [ngClass]="{ active: selectedItem8 == item3.id, day30_txt: true }">Output</a>
+    </div>
+    <div class="explore_all text-right">
+      <a routerLink="/chart/transactionsbytime"><span class="text-uppercase d-block">explore all <i
+            class="fa fa-long-arrow-right"></i></span></a>
+    </div>
+  </div>
+</div>
+<div class="col-md-6 col-lg-4 mb-4">
+  <div class="box_shadow">
+    <div class="blocks">
+      <h2 class="chart_heading d-inline-block">Blocks</h2>
+      <span class="txn_count" *ngIf="this.brg_last">{{
+          this.brg_last | number
+        }}</span>
+      <div class="chart_show">
+        <epic-explorer-plotly *ngIf="barGraphData.data" [data]="barGraphData.data" [layout]="barGraphData.layout"></epic-explorer-plotly>
+        <div *ngIf="!barGraphData.data" class="feedback_div news_desc text-center">
+          <div class="graph_img background_loading mx-auto mb-3"></div>
+          <div class=" p-3 bg-white">
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="day_filter">
+      <a href="JavaScript:void(0);" (click)="
+            Difficultyreq('', '', '1 week', false, true); selectedItem3 = 1
+          " id="1" #item31 [ngClass]="{ active: selectedItem3 == item1.id, txt_primay: true }">1 week</a>
+      <a href="JavaScript:void(0);" (click)="
+            Difficultyreq('', '', '15 days', false, true); selectedItem3 = 2
+          " id="2" #item32 [ngClass]="{ active: selectedItem3 == item2.id, day15_txt: true }">15 days</a>
+      <a href="JavaScript:void(0);" (click)="
+            Difficultyreq('', '', '30 days', false, true); selectedItem3 = 3
+          " id="3" #item33 [ngClass]="{ active: selectedItem3 == item3.id, day30_txt: true }">30 days</a>
+      <a href="JavaScript:void(0);" (click)="
+            Difficultyreq('', '', '60 days', false, true); selectedItem3 = 4
+          " id="4" #item34 [ngClass]="{ active: selectedItem3 == item4.id, day60_txt: true }">60 days</a>
+      <a href="JavaScript:void(0);" (click)="
+            Difficultyreq('', '', '3 months', false, true); selectedItem3 = 5
+          " id="5" #item35 [ngClass]="{ active: selectedItem3 == item5.id, day3m_txt: true }">3 months</a>
+    </div>
+    <div class="explore_all text-right">
+      <a routerLink="/chart/block"><span class="text-uppercase d-block">explore all <i class="fa fa-long-arrow-right"></i></span></a>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="col-md-6 col-lg-4 mb-4">
+  <div class="box_shadow">
+    <div class="blocks">
+      <h2 class="chart_heading d-inline-block">Transactions Fee</h2>
+      <span class="txn_count" *ngIf="this.fg_last">{{this.fg_last |number}}</span>
+
+      <div class="chart_show">
+        <epic-explorer-plotly *ngIf="transcationGraphData.data" [data]="transcationGraphData.data"
+          [layout]="transcationGraphData.layout">
+        </epic-explorer-plotly>
+        <div *ngIf="!transcationGraphData.data" class="feedback_div news_desc text-center">
+          <div class="graph_img background_loading mx-auto mb-3"></div>
+          <div class=" p-3 bg-white">
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+<div class="day_filter">
+  <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '1 week'); selectedItem4 = 1" id="1" #item1
+    [ngClass]="{ active: selectedItem4 == item1.id, txt_primay: true }">1 week</a>
+  <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '15 days'); selectedItem4 = 2" id="2" #item2
+    [ngClass]="{ active: selectedItem4 == item2.id, day15_txt: true }">15 days</a>
+  <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '30 days'); selectedItem4 = 3" id="3" #item3
+    [ngClass]="{ active: selectedItem4 == item3.id, day30_txt: true }">30 days</a>
+  <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '60 days'); selectedItem4 = 4" id="4" #item4
+    [ngClass]="{ active: selectedItem4 == item4.id, day60_txt: true }">60 days</a>
+  <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '3 months'); selectedItem4 = 5" id="5" #item5
+    [ngClass]="{ active: selectedItem4 == item5.id, day3m_txt: true }">3 months</a>
+</div>
+<div class="explore_all text-right">
+  <a routerLink="/chart/transactionsfee"><span class="text-uppercase d-block">explore all <i class="fa fa-long-arrow-right"></i></span></a>
+</div>
+</div>
+</div>
+<div class="col-md-6 col-lg-4 mb-4">
+  <div class="box_shadow">
+    <div class="blocks">
+      <h2 class="chart_heading d-inline-block">Supply Growth</h2>
+      <span class="txn_count" *ngIf="this.gg_last">{{
+          this.gg_last | number
+        }}</span>
+      <div class="chart_show">
+        <epic-explorer-plotly *ngIf="growthGraphData.data" [data]="growthGraphData.data" [layout]="growthGraphData.layout">
+        </epic-explorer-plotly>
+        <div *ngIf="!growthGraphData.data" class="feedback_div news_desc text-center">
+          <div class="graph_img background_loading mx-auto mb-3"></div>
+          <div class=" p-3 bg-white">
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="day_filter">
+      <a href="JavaScript:void(0);" (click)="Growthreq('', '', '1 week'); selectedItem5 = 1" id="1" #item1
+        [ngClass]="{ active: selectedItem5 == item1.id, txt_primay: true }">1 week</a>
+      <a href="JavaScript:void(0);" (click)="Growthreq('', '', '15 days'); selectedItem5 = 2" id="2" #item2
+        [ngClass]="{ active: selectedItem5 == item2.id, day15_txt: true }">15 days</a>
+      <a href="JavaScript:void(0);" (click)="Growthreq('', '', '30 days'); selectedItem5 = 3" id="3" #item3
+        [ngClass]="{ active: selectedItem5 == item3.id, day30_txt: true }">30 days</a>
+      <a href="JavaScript:void(0);" (click)="Growthreq('', '', '60 days'); selectedItem5 = 4" id="4" #item4
+        [ngClass]="{ active: selectedItem5 == item4.id, day60_txt: true }">60 days</a>
+      <a href="JavaScript:void(0);" (click)="Growthreq('', '', '3 months'); selectedItem5 = 5" id="5" #item5
+        [ngClass]="{ active: selectedItem5 == item5.id, day3m_txt: true }">3 months</a>
+    </div>
+    <div class="explore_all text-right">
+      <a  routerLink="/chart/supplygrowth"><span class="text-uppercase d-block">explore all <i
+            class="fa fa-long-arrow-right"></i></span></a>
+    </div>
+  </div>
+</div>
+<div class="col-md-6 col-lg-4 mb-4">
+  <div class="box_shadow">
+    <div class="blocks">
+      <h2 class="chart_heading d-inline-block">Blocks Mined</h2>
+      <span class="txn_count" *ngIf="this.dg_last">{{
+          this.dg_last | number
+        }}</span>
+
+      <div class="chart_show">
+        <epic-explorer-plotly *ngIf="doubleareaGraphData.data" [data]="doubleareaGraphData.data"
+          [layout]="doubleareaGraphData.layout">
+        </epic-explorer-plotly>
+        <div *ngIf="!doubleareaGraphData.data" class="feedback_div news_desc text-center">
+          <div class="graph_img background_loading mx-auto mb-3"></div>
+          <div class=" p-3 bg-white">
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+            <p class="mb-2 background_loading para_load"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="day_filter">
+      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '1 week'); selectedItem7 = 1" id="1" #item1
+        [ngClass]="{ active: selectedItem7 == item1.id, txt_primay: true }">1 week</a>
+      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '15 days'); selectedItem7 = 2" id="2" #item2
+        [ngClass]="{ active: selectedItem7 == item2.id, day15_txt: true }">15 days</a>
+      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '30 days'); selectedItem7 = 3" id="3" #item3
+        [ngClass]="{ active: selectedItem7 == item3.id, day30_txt: true }">30 days</a>
+      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '60 days'); selectedItem7 = 4" id="4" #item4
+        [ngClass]="{ active: selectedItem7 == item4.id, day60_txt: true }">60 days</a>
+      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '3 months'); selectedItem7 = 5" id="5" #item5
+        [ngClass]="{ active: selectedItem7 == item5.id, day3m_txt: true }">3 months</a>
+    </div>
+    <div class="explore_all text-right">
+      <a routerLink="/chart/blocksmined"><span class="text-uppercase d-block">explore all <i
+            class="fa fa-long-arrow-right"></i></span></a>
+    </div>
+  </div>
+
+</div>
+
+  <div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
+    <div class="box_shadow">
+      <div class="blocks">
+        <h2 class="chart_heading d-inline-block">HashRate Growth Chart</h2>
+        <span class="txn_count" *ngIf="this.hg_last">{{
+          this.hg_last | number
+        }}</span>
+        <div class="chart_show">
+          <epic-explorer-plotly *ngIf="blockGraphData.data" [data]="blockGraphData.data" [layout]="blockGraphData.layout">
+          </epic-explorer-plotly>
+          <div *ngIf="!blockGraphData.data" class="feedback_div news_desc text-center">
+            <div class="graph_img background_loading mx-auto mb-3"></div>
+            <div class=" p-3 bg-white">
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="day_filter">
+          <a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '1 week'); selectedItem9 = 1" id="1" #item1
+          [ngClass]="{ active: selectedItem9 == item1.id, txt_primay: true }">1 week</a>
+        <a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '15 days'); selectedItem9 = 2" id="2" #item2
+          [ngClass]="{ active: selectedItem9 == item2.id, day15_txt: true }">15 days</a>
+        <a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '30 days'); selectedItem9 = 3" id="3" #item3
+          [ngClass]="{ active: selectedItem9 == item3.id, day30_txt: true }">30 days</a>
+        <a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '60 days'); selectedItem9 = 4" id="4" #item4
+          [ngClass]="{ active: selectedItem9 == item4.id, day60_txt: true }">60 days</a>
+        <a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '3 months'); selectedItem9 = 5" id="5" #item5
+          [ngClass]="{ active: selectedItem9 == item5.id, day3m_txt: true }">3 months</a>
+      </div>
+      <div class="explore_all text-right">
+        <a routerLink="/chart/hashrategrowth"><span class="text-uppercase d-block">explore all <i
+              class="fa fa-long-arrow-right"></i></span></a>
+      </div>
+    </div>
+  </div>
+  <div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
+    <div class="box_shadow">
+      <div class="blocks">
+        <h2 class="chart_heading d-inline-block">Block Interval</h2>
+        <span class="txn_count" *ngIf="this.ag_last">{{ this.ag_last | number }} sec</span>
+
+        <div class="chart_show">
+          <epic-explorer-plotly *ngIf="areaGraphData.data" [data]="areaGraphData.data" [layout]="areaGraphData.layout">
+          </epic-explorer-plotly>
+          <div *ngIf="!areaGraphData.data" class="feedback_div news_desc text-center">
+            <div class="graph_img background_loading mx-auto mb-3"></div>
+            <div class=" p-3 bg-white">
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="day_filter">
+        <a href="JavaScript:void(0);" (click)="Blockspersecreq('', '', '1 week'); selectedItem2 = 1" id="1" #item1
+          [ngClass]="{ active: selectedItem2 == item1.id, txt_primay: true }">1 week</a>
+        <a href="JavaScript:void(0);" (click)="Blockspersecreq('', '', '15 days'); selectedItem2 = 2" id="2" #item2
+          [ngClass]="{ active: selectedItem2 == item2.id, day15_txt: true }">15 days</a>
+        <a href="JavaScript:void(0);" (click)="Blockspersecreq('', '', '30 days'); selectedItem2 = 3" id="3" #item3
+          [ngClass]="{ active: selectedItem2 == item3.id, day30_txt: true }">30 days</a>
+        <a href="JavaScript:void(0);" (click)="Blockspersecreq('', '', '60 days'); selectedItem2 = 4" id="4" #item4
+          [ngClass]="{ active: selectedItem2 == item4.id, day60_txt: true }">60 days</a>
+        <a href="JavaScript:void(0);" (click)="Blockspersecreq('', '', '3 months'); selectedItem2 = 5" id="5" #item5
+          [ngClass]="{ active: selectedItem2 == item5.id, day3m_txt: true }">3 months</a>
+      </div>
+      <div class="explore_all text-right">
+        <a routerLink="/chart/blockinterval"><span class="text-uppercase d-block">explore all <i
+              class="fa fa-long-arrow-right"></i></span></a>
+      </div>
+    </div>
+  </div>
+  <div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
+    <div class="box_shadow">
+      <div class="blocks">
+        <h2 class="chart_heading d-inline-block">Transactions vs Date</h2>
+        <span class="txn_count" *ngIf="this.tg_last">{{
+          this.tg_last | number
+        }}</span>
+
+        <div class="chart_show">
+          <epic-explorer-plotly *ngIf="feeGraphData.data" [data]="feeGraphData.data" [layout]="feeGraphData.layout">
+          </epic-explorer-plotly>
+          <div *ngIf="!feeGraphData.data" class="feedback_div news_desc text-center">
+            <div class="graph_img background_loading mx-auto mb-3"></div>
+            <div class=" p-3 bg-white">
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="day_filter">
+        <a href="JavaScript:void(0);" (click)="Transactionlinechartreq('', '', '1 week'); selectedItem8 = 1" id="1"
+          #item1 [ngClass]="{ active: selectedItem8 == item1.id, txt_primay: true }">1 week</a>
+        <a href="JavaScript:void(0);" (click)="
+            Transactionlinechartreq('', '', '15 days'); selectedItem8 = 2
+          " id="2" #item2 [ngClass]="{ active: selectedItem8 == item2.id, day15_txt: true }">15 days</a>
+        <a href="JavaScript:void(0);" (click)="
+            Transactionlinechartreq('', '', '30 days'); selectedItem8 = 3
+          " id="3" #item3 [ngClass]="{ active: selectedItem8 == item3.id, day30_txt: true }">30 days</a>
+        <a href="JavaScript:void(0);" (click)="
+            Transactionlinechartreq('', '', '60 days'); selectedItem8 = 4
+          " id="4" #item4 [ngClass]="{ active: selectedItem8 == item4.id, day60_txt: true }">60 days</a>
+        <a href="JavaScript:void(0);" (click)="
+            Transactionlinechartreq('', '', '3 months'); selectedItem8 = 5
+          " id="5" #item5 [ngClass]="{ active: selectedItem8 == item5.id, day3m_txt: true }">3 months</a>
+      </div>
+      <div class="explore_all text-right">
+        <a routerLink="/chart/transactionsdate"><span class="text-uppercase d-block">explore all <i
+              class="fa fa-long-arrow-right"></i></span></a>
+      </div>
+    </div>
+  </div>
+</div>
--- a/src/app/view/home/graph-list/graph-list.component.spec.ts
+++ b/src/app/view/home/graph-list/graph-list.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GraphListComponent } from './graph-list.component';
+
+describe('GraphListComponent', () => {
+  let component: GraphListComponent;
+  let fixture: ComponentFixture<GraphListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GraphListComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GraphListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/view/home/graph-list/graph-list.component.ts
+++ b/src/app/view/home/graph-list/graph-list.component.ts
@ -0,0 +1,720 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ChartService } from '../../../shared/services/chart.service';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+@Component({
+  selector: 'epic-explorer-graph-list',
+  templateUrl: './graph-list.component.html',
+  styleUrls: ['./graph-list.component.css'],
+})
+export class GraphListComponent implements OnInit {
+  @Input()
+  viewchart: boolean = true;
+  public linearGraphData: any = [];
+  public areaGraphData: any = [];
+  public doubleareaGraphData: any = [];
+  public barGraphData: any = [];
+  public blockGraphData: any = [];
+  public bubbleGraphdData: any = [];
+  public feeGraphData: any = [];
+  public growthGraphData: any = [];
+  public heatMapGrowthData: any = [];
+  public transcationGraphData: any = [];
+
+  public lg_last: any = '';
+  public ag_last: any = '';
+  public dg_last: any = '';
+  public brg_last: any = '';
+  public bg_last: any = '';
+  public bubg_last: any = '';
+  public fg_last: any = '';
+  public gg_last: any = '';
+  public tg_last: any = '';
+  public hg_last: any = '';
+
+  public selectedItem: Number = 3;
+  public selectedItem3: Number = 3;
+  public selectedItem2: Number = 3;
+  public selectedItem4: Number = 3;
+  public selectedItem5: Number = 3;
+  public selectedItem7: Number = 3;
+  public selectedItem8: Number = 1;
+  public selectedItem9: Number = 3;
+
+  public tInput: any;
+  public tOutput: any;
+  public tKernal: any;
+  public tDate: any;
+  public tHour: any;
+
+  constructor(private chartService: ChartService, private http: HttpClient) {}
+
+  ngOnInit() {
+    /* Total Difficulty and blocks chart fetching */
+    this.Difficultyreq();
+
+    /* Transcation fee chart fetching */
+    this.Transcationreq();
+
+    /* Growth chart fetching */
+    this.Growthreq();
+
+    /* Blockspersec chart fetching */
+    this.Blockspersecreq();
+
+    /* Blockmined chart fetching */
+    this.Blockminedreq();
+
+    /* Transactionheatmap chart fetching */
+    this.Transactionheatmapreq();
+
+    /* Transactionline chart fetching */
+    this.Transactionlinechartreq();
+
+    /* Transaction2line chart fetching */
+    this.Transactiondoublelinechartreq();
+
+    this.bubbleGraphdData = {};
+  }
+
+  Transactiondoublelinechartreq(fromDate = '', ToDate = '', interval = '') {
+    return new Promise((resolve, reject) => {
+      let params = new HttpParams();
+      params = params.append('FromDate', fromDate);
+      params = params.append('ToDate', ToDate);
+      params = params.append('Interval', interval);
+      this.chartService
+        .apiGetRequest(params, '/blockchain_block/hashrate')
+        .subscribe(
+          res => {
+            if (res['status'] == 200) {
+              let Hdate = res.response.date;
+              let H29 = res.response.hashrate29;
+              let H31 = res.response.hashrate31;
+              this.hg_last = H31[H31.length - 1];
+              this.transactiondoublelinechartFunc(Hdate, H29, H31);
+              resolve();
+            }
+          },
+          error => {},
+        );
+    });
+  }
+
+  Transactionlinechartreq(fromDate = '', ToDate = '', interval = '') {
+    return new Promise((resolve, reject) => {
+      let params = new HttpParams();
+      params = params.append('FromDate', fromDate);
+      params = params.append('ToDate', ToDate);
+      params = params.append('Interval', interval);
+      this.chartService
+        .apiGetRequest(params, '/blockchain_kernel/transactionlinechart')
+        .subscribe(
+          res => {
+            if (res['status'] == 200) {
+              let Tdate = res.response.date;
+              let Ttotalinput = res.response.totalinput;
+              let Ttotalkernal = res.response.totalkernal;
+              let Ttotaloutput = res.response.totaloutput;
+              this.tg_last = Ttotaloutput[Ttotaloutput.length - 1];
+              this.transactionlinechartFunc(
+                Tdate,
+                Ttotalinput,
+                Ttotalkernal,
+                Ttotaloutput,
+              );
+              resolve();
+            }
+          },
+          error => {},
+        );
+    });
+  }
+
+  Transactionheatmapreq() {
+    return new Promise((resolve, reject) => {
+      this.chartService
+        .apiGetRequest('', '/blockchain_kernel/transactionheatmap')
+        .subscribe(
+          res => {
+            if (res['status'] == 200) {
+              this.tDate = res.response.date;
+              this.tHour = res.response.hour[0];
+              this.tInput = res.response.totalinput;
+              this.tOutput = res.response.totaloutput;
+              this.tKernal = res.response.totalkernal;
+              // let transtypepassed =
+              //   transtype == 'input'
+              //     ? tInput
+              //     : transtype == 'output'
+              //     ? tOutput
+              //     : transtype == 'kernal'
+              //     ? tKernal
+              //     : tInput;
+              // let transpassed =
+              //   transtype == 'input'
+              //     ? 'Input'
+              //     : transtype == 'output'
+              //     ? 'Output'
+              //     : transtype == 'kernal'
+              //     ? 'Kernel'
+              //     : 'Input';
+              this.transactionheatmapFunc(
+                this.tDate,
+                this.tHour,
+                this.tInput,
+                'Input',
+              );
+              resolve();
+            }
+          },
+          error => {},
+        );
+    });
+  }
+
+  Blockminedreq(fromDate = '', ToDate = '', interval = '') {
+    return new Promise((resolve, reject) => {
+      let params = new HttpParams();
+      params = params.append('FromDate', fromDate);
+      params = params.append('ToDate', ToDate);
+      params = params.append('Interval', interval);
+      this.chartService
+        .apiGetRequest(params, '/blockchain_block/blockminedchart')
+        .subscribe(
+          res => {
+            if (res['status'] == 200) {
+              let mDate = res.response.date;
+              let mcuck29 = res.response.cuckARoo29per;
+              let mcuck31 = res.response.cuckAToo31per;
+              let mcuck29val = res.response.cuckARoo29Val;
+              let mcuck31val = res.response.cuckAToo31Val;
+              this.dg_last = mcuck29val[mcuck29val.length - 1];
+              this.blockminedFunc(
+                mDate,
+                mcuck29,
+                mcuck31,
+                mcuck29val,
+                mcuck31val,
+              );
+              resolve();
+            }
+          },
+          error => {},
+        );
+    });
+  }
+
+  Blockspersecreq(fromDate = '', ToDate = '', interval = '') {
+    return new Promise((resolve, reject) => {
+      let params = new HttpParams();
+      params = params.append('FromDate', fromDate);
+      params = params.append('ToDate', ToDate);
+      params = params.append('Interval', interval);
+      this.chartService
+        .apiGetRequest(params, '/blockchain_block/blockspersec')
+        .subscribe(
+          res => {
+            if (res['status'] == 200) {
+              let bDate = res.response.date;
+              let bPeriod = res.response.period;
+              this.ag_last = bPeriod[bPeriod.length - 1];
+              this.blockspersecFunc(bDate, bPeriod);
+              resolve();
+            }
+          },
+          error => {},
+        );
+    });
+  }
+
+  Growthreq(fromDate = '', ToDate = '', interval = '') {
+    return new Promise((resolve, reject) => {
+      let params = new HttpParams();
+      params = params.append('FromDate', fromDate);
+      params = params.append('ToDate', ToDate);
+      params = params.append('Interval', interval);
+      this.chartService
+        .apiGetRequest(params, '/blockchain_block/supplygrowth')
+        .subscribe(
+          res => {
+            if (res['status'] == 200) {
+              let gDate = res.response.date;
+              let gReward = res.response.total_reward_per_day;
+              let gaddedreward = res.response.addedreward;
+              this.gg_last = gReward[gReward.length - 1];
+              this.growthFunc(gDate, gReward, gaddedreward);
+              resolve();
+            }
+          },
+          error => {},
+        );
+    });
+  }
+
+  Transcationreq(fromDate = '', ToDate = '', interval = '') {
+    return new Promise((resolve, reject) => {
+      let params = new HttpParams();
+      params = params.append('FromDate', fromDate);
+      params = params.append('ToDate', ToDate);
+      params = params.append('Interval', interval);
+      this.chartService
+        .apiGetRequest(params, '/blockchain_kernel/transactionfee')
+        .subscribe(
+          res => {
+            if (res['status'] == 200) {
+              let TfDate = res.response.Date;
+              let TfFee = res.response.Fee;
+              this.fg_last = TfFee[TfFee.length - 1];
+              this.transcationfeeFunc(TfDate, TfFee);
+              resolve();
+            }
+          },
+          error => {},
+        );
+    });
+  }
+
+  Difficultyreq(
+    fromDate = '',
+    ToDate = '',
+    interval = '',
+    fordifficult = true,
+    forblocks = true,
+  ) {
+    return new Promise((resolve, reject) => {
+      let params = new HttpParams();
+      params = params.append('FromDate', fromDate);
+      params = params.append('ToDate', ToDate);
+      params = params.append('Interval', interval);
+      this.chartService
+        .apiGetRequest(params, '/blockchain_block/totaldiffnblock')
+        .subscribe(
+          res => {
+            if (res['status'] == 200) {
+              let DifficultychartDate = res.response.Date;
+              if (fordifficult) {
+                let Difficultychartval = res.response.TotalDifficulty;
+                this.lg_last =
+                  Difficultychartval[Difficultychartval.length - 1];
+                this.difficultyChartFunc(
+                  DifficultychartDate,
+                  Difficultychartval,
+                );
+              }
+              if (forblocks) {
+                let Blockval = res.response.Blocks;
+                this.brg_last = Blockval[Blockval.length - 1];
+                this.totalBlocksFunc(DifficultychartDate, Blockval);
+              }
+              resolve();
+            }
+          },
+          error => {},
+        );
+    });
+  }
+
+  difficultyChartFunc(DifficultychartDate, Difficultychartval) {
+    this.linearGraphData = {
+      data: [
+        {
+          x: DifficultychartDate,
+          y: Difficultychartval,
+          text: Difficultychartval,
+          mode: 'lines+markers',
+          type: 'scatter',
+          name: '',
+          line: { color: '#ac3333' },
+          hovertemplate: '%{x}<br> Total Difficulty : %{text:,}',
+        },
+      ],
+      layout: {
+        hovermode: 'closest',
+        height: 250,
+        autosize: true,
+        showlegend: false,
+        xaxis: {
+          tickangle: -45,
+          tickformat: '%m-%d',
+        },
+        yaxis: {
+          title: 'Diff',
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+      },
+    };
+  }
+
+  totalBlocksFunc(DifficultychartDate, Blockval) {
+    this.barGraphData = {
+      data: [
+        {
+          x: DifficultychartDate,
+          y: Blockval,
+          text: Blockval,
+          name: '',
+          hovertemplate: '%{x}<br> Block : %{text:,}',
+          type: 'bar',
+          marker: {
+            color: Blockval,
+            colorscale: 'Viridis',
+          },
+        },
+      ],
+      layout: {
+        hovermode: 'closest',
+        height: 250,
+        autosize: true,
+        showlegend: false,
+        xaxis: {
+          tickangle: -45,
+          tickformat: '%m-%d',
+        },
+        yaxis: {
+          title: 'Block',
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+      },
+      options: null,
+    };
+  }
+
+  transcationfeeFunc(TfDate, TfFee) {
+    this.transcationGraphData = {
+      data: [
+        {
+          x: TfDate,
+          y: TfFee,
+          text: TfFee,
+          name: '',
+          hovertemplate: '%{x}<br> Fee : %{text:,}',
+          type: 'lines',
+        },
+      ],
+      layout: {
+        hovermode: 'closest',
+        height: 250,
+        autosize: true,
+        xaxis: {
+          tickangle: -45,
+          tickformat: '%m-%d',
+        },
+        yaxis: {
+          title: 'Tx Fee',
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+      },
+      options: null,
+    };
+  }
+
+  growthFunc(gDate, gReward, gaddedreward) {
+    this.growthGraphData = {
+      data: [
+        {
+          x: gDate,
+          y: gaddedreward,
+          type: 'scatter',
+          mode: 'lines',
+          name: '',
+          line: {
+            color: '#17BECF',
+            width: 3,
+          },
+          text: gReward,
+          hovertemplate:
+            '%{x}<br> supply per day: %{text:,}<br> Total supply: %{y:,}',
+        },
+      ],
+      layout: {
+        hovermode: 'closest',
+        height: 250,
+        autosize: true,
+        xaxis: {
+          linecolor: 'rgb(204,204,204)',
+          linewidth: 2,
+          tickformat: '%m-%d',
+          tickangle: -45,
+        },
+        yaxis: {
+          title: 'Total Reward Supply',
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+      },
+      options: null,
+    };
+  }
+
+  blockspersecFunc(bDate, bPeriod) {
+    this.areaGraphData = {
+      data: [
+        {
+          x: bDate,
+          y: bPeriod,
+          text: bPeriod,
+          name: '',
+          hovertemplate: '%{x}<br> Blocks Per Sec : %{text:,}',
+          fill: 'tozeroy',
+          type: 'line',
+          line: {
+            color: 'rgb(100, 0, 160)',
+          },
+        },
+      ],
+      layout: {
+        hovermode: 'closest',
+        width: 350,
+        height: 250,
+        autosize: false,
+        xaxis: {
+          tickformat: '%m-%d',
+          tickangle: -45,
+        },
+        yaxis: {
+          title: 'Block / sec',
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+      },
+      options: null,
+    };
+  }
+
+  blockminedFunc(mDate, mcuck29, mcuck31, mcuck29val, mcuck31val) {
+    this.doubleareaGraphData = {
+      data: [
+        {
+          x: mDate,
+          y: mcuck29,
+          text: mcuck29val,
+          hovertemplate: 'cuckARoo29 :%{y} % ( %{text:,} )',
+          name: '',
+          fill: 'tozeroy',
+          type: 'line',
+          line: {
+            color: '#f5ca19',
+          },
+        },
+        {
+          x: mDate,
+          y: mcuck31,
+          text: mcuck31val,
+          hovertemplate: 'cuckAToo31 :%{y} % ( %{text:,} )',
+          fill: 'tozeroy',
+          type: 'line',
+          name: '',
+          line: {
+            color: '#1ad5e9',
+          },
+        },
+      ],
+      layout: {
+        hovermode: 'closest',
+        height: 250,
+        autosize: true,
+        showlegend: false,
+        xaxis: {
+          tickformat: '%m-%d',
+          tickangle: -45,
+        },
+        yaxis: {
+          title: 'Percentage(%)',
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+      },
+      options: null,
+    };
+  }
+
+  transactionheatmapFunc(tDate, tHour, tInput, hovertext) {
+    return new Promise((resolve, reject) => {
+    this.heatMapGrowthData = {
+      data: [
+        {
+          x: tHour,
+          y: tDate,
+          z: tInput,
+          name: '',
+          text: hovertext,
+          hovertemplate: hovertext + ': %{z:,} ',
+          colorscale: 'Rainbow',
+          type: 'heatmap',
+          visible: true,
+          colorbar: { thickness: 3 },
+          xgap: 1,
+          ygap: 1,
+        },
+      ],
+      layout: {
+        hovermode: 'closest',
+        height: 250,
+        width: 365,
+        autosize: true,
+        annotations: [],
+        font: {
+          size: 8.5,
+        },
+        xaxis: {
+          ticks: '',
+          tickangle: 360,
+          side: 'top',
+          autotick: false,
+          showgrid: true,
+        },
+        yaxis: {
+          ticks: '',
+          ticksuffix: ' ',
+          tickformat: '%m-%d',
+          autosize: false,
+          showgrid: true,
+          autotick: false,
+        },
+        margin: {
+          l: 30,
+          r: 30,
+          b: 60,
+          t: 60,
+        },
+        showlegend: false,
+      },
+      options: null,
+    };
+  });
+  }
+  transactionlinechartFunc(Tdate, Ttotalinput, Ttotalkernal, Ttotaloutput) {
+    this.feeGraphData = {
+      data: [
+        {
+          type: 'scatter',
+          mode: 'lines',
+          name: '',
+          x: Tdate,
+          y: Ttotalinput,
+          text: Ttotalinput,
+          hovertemplate: 'Total Input : %{text:,} ',
+          line: { color: '#6ebe58' },
+        },
+        {
+          type: 'scatter',
+          mode: 'lines',
+          name: '',
+          x: Tdate,
+          y: Ttotalkernal,
+          text: Ttotalkernal,
+          hovertemplate: 'Total Kernel : %{text:,} ',
+          line: { color: '#f57979' },
+        },
+        {
+          type: 'scatter',
+          mode: 'lines',
+          name: '',
+          x: Tdate,
+          y: Ttotaloutput,
+          text: Ttotaloutput,
+          hovertemplate: 'Total Output : %{text:,} ',
+          line: { color: '#f7d340' },
+        },
+      ],
+      layout: {
+        autosize: true,
+        width: 350,
+        height: 250,
+        xaxis: {
+          showgrid: false,
+          zeroline: false,
+          tickformat: '%m-%d',
+        },
+        yaxis: {
+          showline: false,
+          title: 'Transactions',
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+        showlegend: false,
+      },
+      options: null,
+    };
+  }
+  transactiondoublelinechartFunc(Hdate, H29, H31) {
+    this.blockGraphData = {
+      data: [
+        {
+          type: 'scatter',
+          mode: 'lines',
+          name: '',
+          x: Hdate,
+          y: H29,
+          text: H29,
+          hovertemplate: 'cuckARoo29 : %{text:,} GH/s',
+          line: { color: '#2a4bf7' },
+        },
+        {
+          type: 'scatter',
+          mode: 'lines',
+          name: '',
+          x: Hdate,
+          y: H31,
+          text: H31,
+          hovertemplate: 'cuckAToo31 : %{text:,} GH/s',
+          line: { color: '#3ff367' },
+        },
+      ],
+      layout: {
+        autosize: true,
+        width: 350,
+        height: 250,
+        xaxis: {
+          showgrid: false,
+          zeroline: false,
+          tickformat: '%m-%d',
+        },
+        yaxis: {
+          showline: false,
+          title: 'Estimated Hashrate (GH/s)',
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+        showlegend: false,
+      },
+      options: null,
+    };
+  }
+}
--- a/src/app/view/home/home-routing.module.ts
+++ b/src/app/view/home/home-routing.module.ts
@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { HomeWorksapceComponent } from './home-worksapce.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeWorksapceComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class HomeRoutingModule {}
--- a/src/app/view/home/home-worksapce.component.ts
+++ b/src/app/view/home/home-worksapce.component.ts
@ -0,0 +1,58 @@
+import { Component, OnInit, Inject, AfterViewInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Utils } from 'src/app/shared/utils';
+
+@Component({
+  selector: 'epic-explorer-home-worksapce',
+  template: `
+    <div class="body_bg py-4">
+      <div class="chart_section mt-4">
+        <div class="container">
+          <div class="explore_charts pt-3">
+            <epic-explorer-graph-list
+              [viewchart]="viewchartvar"
+            ></epic-explorer-graph-list>
+          </div>
+        </div>
+        <div
+          *ngIf="viewchartvar"
+          (click)="viewchartenable()"
+          class="text-center my-3"
+        >
+          <button class="btn btn_primary align-middle">
+            View All Charts <i class="fa fa-long-arrow-right ml-3 "></i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="block_details mt-5">
+      <div class="container">
+        <app-block-detail-list></app-block-detail-list>
+      </div>
+    </div>
+    <div class="latest_blocks my-5">
+      <div class="container">
+        <div class="filter_shadow">
+          <epic-explorer-latestblocks></epic-explorer-latestblocks>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [],
+})
+export class HomeWorksapceComponent extends Utils
+  implements OnInit, AfterViewInit {
+  viewchartvar: boolean = true;
+  constructor(@Inject(DOCUMENT) public document: Document) {
+    super(document);
+  }
+
+  ngOnInit() {}
+
+  viewchartenable() {
+    this.viewchartvar = false;
+  }
+  ngAfterViewInit() {
+    this.removeLoader();
+  }
+}
--- a/src/app/view/home/home.module.ts
+++ b/src/app/view/home/home.module.ts
@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HomeRoutingModule } from './home-routing.module';
+import { HomeWorksapceComponent } from './home-worksapce.component';
+import { LatestblocksComponent } from './latestblocks/latestblocks.component';
+import { GraphListComponent } from './graph-list/graph-list.component';
+import { BlockDetailListComponent } from './block-detail-list/block-detail-list.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SharedModule } from '../../shared/shared.module';
+@NgModule({
+  declarations: [
+    HomeWorksapceComponent,
+    LatestblocksComponent,
+    GraphListComponent,
+    BlockDetailListComponent,
+  ],
+  imports: [
+    CommonModule,
+    HomeRoutingModule,
+    FormsModule,
+    ReactiveFormsModule,
+    SharedModule
+  ],
+})
+export class HomeModule {}
--- a/src/app/view/home/latestblocks/latestblocks.component.css
+++ b/src/app/view/home/latestblocks/latestblocks.component.css
--- a/src/app/view/home/latestblocks/latestblocks.component.html
+++ b/src/app/view/home/latestblocks/latestblocks.component.html
@ -0,0 +1,142 @@
+<div class="latest_table">
+  <h2 class="mb-3 chart_heading px-0">Latest Blocks</h2>
+  <div class="mobile_table web_hdng">
+     
+      <div class="row">
+        <div class="col-6 col-md-4 tble_col">
+         <div class="block_div"> <h5 class="mb-0">Height</h5></div>
+        </div>
+        <div class="col-6 col-md-4 tble_col">
+          <div class="block_div"><h5 class="mb-0">Hash</h5></div>
+        </div>
+        <div class="col-6 col-md-4 tble_col">
+          <div class="block_div"><h5 class="mb-0" >Age</h5></div>
+        </div>
+        <div class="col-6 col-md-4 tble_col">
+          <div class="block_div"><h5 class="mb-0">Difficulty</h5></div>
+        </div>
+        <div class="col-7 col-sm-6 col-md-4 tble_col">
+          <div class="block_div"><h5 class="mb-0">Pow Algo</h5></div>
+        </div>
+        <div class="col-5 col-sm-6 col-md-4 tble_col">
+          <div class="block_div"><h5 class="mb-0">#Inputs</h5></div>
+        </div>
+        <div class="col-6 col-md-4 tble_col">
+          <div class="block_div"><h5  class="mb-0">#Outputs</h5></div>
+        </div>
+        <div class="col-6 col-md-4 tble_col">
+          <div class="block_div" ><h5 class="mb-0">#Kernels</h5></div>
+        </div>
+      </div>
+    </div>
+  <div [ngClass]="{mobile_table : true, hght_40: item.id != clickValue }"  id="hash_{{hashvalue.blockchain_block_height}}" #item *ngFor="let hashvalue of hashvalues">
+     
+    <div class="row">
+      <div class="col-6 col-md-3 tble_col">
+       <div class="block_div">  <span *ngIf="item.id != clickValue" (click)="onClickPlus(hashvalue.blockchain_block_height);" class="expnd_blck"><i class="fa fa-plus"></i></span>
+        <span  *ngIf="item.id == clickValue" (click)="onClickMinus(hashvalue.blockchain_block_height);" class="expnd_blck"><i class="fa fa-minus"></i></span><h6>Height</h6><span class="blck_value link_to_detail" routerLink="/blockdetail/{{ hashvalue.blockchain_block_height }}">{{ hashvalue.blockchain_block_height }}</span></div>
+      </div>
+      <div class="col-6 col-md-3 tble_col">
+        <div [title]="hashvalue.blockchain_block_hash" routerLink="/blockdetail/{{ hashvalue.blockchain_block_hash }}" class="block_div"><h6>Hash</h6><span class="blck_value">{{ hashvalue.hashstart
+        }}<span
+          *ngFor="let color of hashvalue.hasharray"
+          class="hash"
+          [ngStyle]="{ 'background-color': color }"
+        ></span
+        >{{ hashvalue.hashend }}</span></div>
+      </div>
+      <div class="col-6 col-md-3 tble_col">
+        <div class="block_div"><h6 >Age</h6><span class="blck_value">{{ hashvalue.age }}</span></div>
+      </div>
+      <div class="col-6 col-md-3 tble_col">
+        <div class="block_div"><h6>Difficulty</h6><span class="blck_value">{{ hashvalue.target_difficulty | number }}</span></div>
+      </div>
+      <div class="col-6 col-sm-6 col-md-3 tble_col">
+        <div class="block_div"><h6 class="mb-0">Pow Algo</h6><span class="blck_value">{{ hashvalue.PoWAlgo }}</span></div>
+      </div>
+      <div class="col-6 col-sm-6 col-md-3 tble_col">
+        <div class="block_div"><h6>#Inputs</h6><span class="blck_value">{{ hashvalue.input_count }}</span></div>
+      </div>
+      <div class="col-6 col-md-3 tble_col">
+        <div class="block_div"><h6 >#Outputs</h6><span class="blck_value">{{ hashvalue.output_count }}</span></div>
+      </div>
+      <div class="col-6 col-md-3 tble_col">
+        <div class="block_div" ><h6>#Kernels</h6><span class="blck_value">{{ hashvalue.kernal_count }}</span></div>
+      </div>
+      <!-- <div class="col-6 col-md-4">
+          <a class="txt_secondary" href="JavaScript:Void(0);"
+            ><i class="fa fa-eye"></i
+          ></a>
+            </div> -->
+    </div>
+  </div>
+  
+  
+</div>
+
+<div class="explore_all text-right">
+  <form [formGroup]="paginationForm">
+    <div class="d-inline-block float-left mt-2">
+      <span>Items Per Page:</span>&nbsp;&nbsp;
+      <div class="item_select d-inline-block position-relative">
+        <select
+          class=""
+          formControlName="pagesize"
+          (change)="gettinghashList(pagedata.currentPage, $event.target.value)"
+        >
+          <option value="20">20</option>
+          <option value="50">50</option>
+          <option value="100">100</option>
+          <option value="250">250</option>
+          <option value="500">500</option>
+          <option value="1000">1000</option>
+        </select>
+      </div>
+    </div>
+    <ul class="pagination justify-content-end m-0 d-inline-flex">
+      <li
+        class="page-item d-none d-md-inline-flex"
+        (click)="
+          gettinghashList(pagedata.startPage, paginationForm.value.pagesize)
+        "
+      >
+        <a class="page-link"><i class="fa fa-angle-double-left"></i></a>
+      </li>
+      <li
+        class="page-item"
+        (click)="
+          gettinghashList(
+            pagedata.currentPage - 1,
+            paginationForm.value.pagesize
+          )
+        "
+      >
+        <a class="page-link"><i class="fa fa-angle-left"></i></a>
+      </li>
+      <li class="page-item d-none d-md-inline-flex">
+        <a class="page-link"
+          >{{ pagedata.currentPage }} / {{ pagedata.totalPages }}</a
+        >
+      </li>
+      <li
+        class="page-item"
+        (click)="
+          gettinghashList(
+            pagedata.currentPage + 1,
+            paginationForm.value.pagesize
+          )
+        "
+      >
+        <a class="page-link"><i class="fa fa-angle-right"></i></a>
+      </li>
+      <li
+        class="page-item d-none d-md-inline-flex"
+        (click)="
+          gettinghashList(pagedata.totalPages, paginationForm.value.pagesize)
+        "
+      >
+        <a class="page-link"><i class="fa fa-angle-double-right"></i></a>
+      </li>
+    </ul>
+  </form>
+</div>
--- a/src/app/view/home/latestblocks/latestblocks.component.spec.ts
+++ b/src/app/view/home/latestblocks/latestblocks.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LatestblocksComponent } from './latestblocks.component';
+
+describe('LatestblocksComponent', () => {
+  let component: LatestblocksComponent;
+  let fixture: ComponentFixture<LatestblocksComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LatestblocksComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LatestblocksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/view/home/latestblocks/latestblocks.component.ts
+++ b/src/app/view/home/latestblocks/latestblocks.component.ts
@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpParams } from '@angular/common/http';
+import { ChartService } from '../../../shared/services/chart.service';
+import { FormGroup, FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'epic-explorer-latestblocks',
+  templateUrl: './latestblocks.component.html',
+  styleUrls: ['./latestblocks.component.css'],
+})
+export class LatestblocksComponent implements OnInit {
+  public hashvalues: any;
+  public pagedata: any = [];
+  public clickValue: any;
+  public beforeClick: boolean = false;
+  public clickonMobile: boolean = true;
+  paginationForm = new FormGroup({
+    pagesize: new FormControl(20),
+  });
+
+  constructor(private chartService: ChartService) {}
+
+  ngOnInit() {
+    this.gettinghashList(1, 20);
+  }
+
+  public gettinghashList(CurrentPage, PageSize) {
+    let params = new HttpParams();
+    params = params.append('CurrentPage', CurrentPage);
+    params = params.append('PageSize', PageSize);
+    this.chartService.apiGetRequest(params, '/blockchain_block/list').subscribe(
+      res => {
+        if (res['status'] == 200) {
+          this.pagedata = res.response;
+          this.hashvalues = res.response.BlockchainBlockResult;
+        }
+      },
+      error => {},
+    );
+  }
+
+  public onClickPlus(height) {
+    // this.beforeClick = true;
+    this.clickValue = 'hash_' + height;
+  }
+
+  public onClickMinus(height) {
+    this.clickValue = 0;
+  }
+}
--- a/src/app/view/home/not-found/not-found.component.css
+++ b/src/app/view/home/not-found/not-found.component.css
@ -0,0 +1 @@
+.not_txt{font-size: 100px;}
--- a/src/app/view/home/not-found/not-found.component.html
+++ b/src/app/view/home/not-found/not-found.component.html
@ -0,0 +1,13 @@
+<div class="body_bg not_found h-100">
+    <div class="container h-100">
+        <div class=" justify-content-center align-items-center h-100 d-flex">
+          <div class="text-center">
+            
+            <h1 class="w-100 txt_primary not_txt">4<img src="assets/img/404.png" height="100">4 </h1>
+            <h1>Page Not Found</h1>
+            <p class="w-100">Page you are looking for is not found</p>
+            <button class="btn btn_primary">Go to Explorer</button>
+          </div>
+        </div>
+        </div>
+</div>
--- a/src/app/view/home/not-found/not-found.component.spec.ts
+++ b/src/app/view/home/not-found/not-found.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotFoundComponent } from './not-found.component';
+
+describe('NotFoundComponent', () => {
+  let component: NotFoundComponent;
+  let fixture: ComponentFixture<NotFoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [NotFoundComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/view/home/not-found/not-found.component.ts
+++ b/src/app/view/home/not-found/not-found.component.ts
@ -0,0 +1,19 @@
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { Utils } from 'src/app/shared/utils';
+
+@Component({
+  selector: 'app-not-found',
+  templateUrl: './not-found.component.html',
+  styleUrls: ['./not-found.component.css'],
+})
+export class NotFoundComponent extends Utils implements OnInit, AfterViewInit {
+  constructor() {
+    super(document);
+  }
+
+  ngOnInit() {}
+
+  ngAfterViewInit() {
+    this.removeLoader();
+  }
+}
--- a/src/app/view/view-routing.module.ts
+++ b/src/app/view/view-routing.module.ts
@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { HomeLayoutComponent } from '../shared/components/layouts/home-layout/home-layout.component';
+import { SiteLayoutComponent } from '../shared/components/layouts/site-layout/site-layout.component';
+
+const viewRoutes: Routes = [
+  {
+    path: 'home',
+    loadChildren: './home/home.module#HomeModule',
+  },
+];
+
+const siteRoutes: Routes = [
+  {
+    path: 'blockdetail/:hash',
+    loadChildren: './block-view/block-view.module#BlockViewModule',
+  },
+  {
+    path: 'chart',
+    loadChildren: './graph-view/graph-view.module#GraphViewModule',
+  },
+];
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeLayoutComponent,
+    children: viewRoutes,
+  },
+  {
+    path: '',
+    component: SiteLayoutComponent,
+    children: siteRoutes,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ViewRoutingModule {}
--- a/src/app/view/view.module.ts
+++ b/src/app/view/view.module.ts
@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ViewRoutingModule } from './view-routing.module';
+import { SharedModule } from '../shared/shared.module';
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule, ViewRoutingModule, SharedModule],
+})
+export class ViewModule {}
--- a/src/assets/.gitkeep
+++ b/src/assets/.gitkeep
--- a/src/assets/css/dark.css
+++ b/src/assets/css/dark.css
@ -0,0 +1,22 @@
+body{background-color: #27314b;}
+.light_theme_display{display: none;}
+.dark_theme_display{display: block;}
+.body_bg{background: url(../img/dark_bg.jpg) no-repeat center / cover;}
+.logo_txt, .ip_filter a{color: #ffffff;}
+.search_input{background-color: #27314b;}
+.blocks, .explore_all{background-color: #27314b;}
+.day_filter, .detail_div{background-color: #384566; border-color: #1c2437;}
+.detail_div .count span{color: #ffffff;}
+.detail_div .desc{color: #c0d2ff;}
+.day_filter a, .table th{color: #ffffff;}
+.table td{color: #c0d2ff;}
+.day_filter a.active{background-color: #27314b;}
+.chart_heading{color: #ffffff;}
+.latest_table { background-color: #1c2437;border-color: #1c2437;}
+.latest_blocks .explore_all{background-color: #384566;border-color: #1c2437;}
+.table td, .table th, .table thead th{border-color: #384566;}
+.footer_div  .chart_heading .txt_secondary{color: #ffffff !important; color: #c0d2ff;}
+.ftr_services a, .ftr_services{color: #c0d2ff;}
+.ftr_services .gray_txt{color: #3b4e7c;}
+.dropdown.bg-white, .dropdown-menu, .theme_switch, .footer_div .theme_switch, .ftr_dropdown{background-color: #1c2437 !important; color: #ffffff !important;}
+.dropdown a{color: #ffffff !important;}
--- a/src/assets/css/responsive.css
+++ b/src/assets/css/responsive.css
@ -0,0 +1,78 @@
+@media(min-width: 992px){
+    .block_div {min-width: 136px; text-align: center;padding: .75rem; }
+    .mobile_table{border-bottom: 1px solid #dee2e6; padding: 0 15px;display: table;  width: 100%;}
+    .view_moble_tble{border-bottom: 1px solid #dee2e6;}
+    .mobile_table .row{display: table;}
+.mobile_table .tble_col{padding: 0;display: table-cell;  max-width: unset;  flex: unset;}
+.mobile_table h6, .view_moble_tble h6{display: none;}
+.view_moble_tble .block_div{text-align: left;}
+}
+@media(max-width: 1199px){
+    .ftr_links{padding-left: 0px;}
+    .ftr_links::before{content: '|'; }
+    .footer_div{font-size: 12px;}
+}
+@media (min-width: 992px) and (max-width: 1199px){
+    .detail_div .count{font-size: 20px;}
+    .detail_div .desc{font-size: 15px;}
+    .detail_div .count span{font-size: 14px;}
+    .chart_heading{font-size: 18px;}
+    .day_filter a{font-size: 11px; margin: 0 4px;}
+    .blck_value {font-size: 13px; }
+    .block_div {min-width: 110px;}
+    
+}
+@media (min-width: 768px) and (max-width: 991px){
+    .detail_div{padding: 10px 0;}
+    .detail_div .count{font-size: 20px;}
+    .detail_div .desc{font-size: 13px;}
+    .detail_div .count span{font-size: 12px;}
+    .chart_heading{font-size: 18px;}
+    .day_filter a{font-size: 12px;}
+    .theme_switch{margin-left: 11px;}
+    .view_txt{font-size: 13px;}
+}
+@media(max-width: 991px){
+    .container{max-width: 100%;}
+    .hght_40{height: 40px;overflow: hidden;}
+    .web_hdng{display: none;}
+    .mobile_table{padding: 10px 0;padding-left: 30px;}
+    /* .view_moble_tble .col-md-4{padding: 0;} */
+    .mobile_table h6, .view_moble_tble h6{color: #0091ff; font-size: 13px; display: inline-block;}
+    .mobile_table span.blck_value, .view_moble_tble span.blck_value{font-size: 13px;}
+    .mobile_table span.blck_value::before, .view_moble_tble span.blck_value::before{content: ' - ';}
+    .view_moble_tble{border-bottom: 1px solid #dee2e6;padding-bottom: 10px;  margin-bottom: 10px;}
+    .expnd_blck {font-size: 13px; margin-right: 5px; color: green;position: absolute;  left: -15px;  top: 5px; display: inline-block;}
+}
+@media(max-width:767px){
+    .day_filter a{margin: 0 4px; font-size: 11px;}
+    .chart_heading{font-size: 20px;}
+    .txn_count{font-size: 12px;}
+    .day_filter{padding: 10px 15px;}
+    .explore_all{font-size: 13px; padding: 10px 15px;}
+    .btn_primary{font-size: 13px;}
+    .search{max-width: 100%; margin-bottom: 15px !important;}
+    .logo_txt{font-size: 35px;}
+    .footer_div{text-align: center;}
+    .view_txt{font-size: 15px;}
+}
+@media(max-width: 575px){
+    .mobile_table h6, .mobile_table span.blck_value{font-size: 12px;}
+    .view_page_header .ml-auto{margin: 0 !important; display: inherit;width: 100%;}
+    .mble_view_hdr{margin-left: auto;}
+    .mble_view_hdr .nav-item{font-size: 13px;}
+    .mble_view_hdr .flag{width: 20px; height: 20px;}
+    .mble_view_hdr .nav-link{padding: .5rem;}
+    .theme_switch{padding-top: 8px; padding-bottom: 8px;}
+    .theme_switch img{height: 15px;}
+}
+@media(max-width: 588px){
+    /* .view_page_header{text-align: center;} */
+    .view_page_header .navbar-brand{display: block; margin: 0 auto;}
+    .view_page_header .ml-auto{margin: 0 !important; display: inherit;}
+    
+}
+@media(max-width: 365px){
+    .mobile_table .col-6 {flex: 0 0 100%;max-width: 100%;}
+    .view_page_header .search_btn{display: none;}
+}
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@ -0,0 +1,595 @@
+@font-face {
+  font-family: 'Bahnschrift';
+  src: url('/assets/fonts/Bahnschrift.eot');
+  src: url('/assets/fonts/Bahnschrift.eot?#iefix') format('embedded-opentype'),
+    url('/assets/fonts/Bahnschrift.woff2') format('woff2'),
+    url('/assets/fonts/Bahnschrift.woff') format('woff'),
+    url('/assets/fonts/Bahnschrift.ttf') format('truetype'),
+    url('/assets/fonts/Bahnschrift.svg#Bahnschrift') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+html, body{height: 100%;}
+body {
+  font-family: 'Bahnschrift';
+  color: #111111;
+  letter-spacing: 0.5px;
+}
+.search {
+  max-width: 75%;
+  margin: 0 auto;
+}
+a:hover,
+a:focus {
+  text-decoration: none;
+  outline: none;
+}
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1170px;
+  }
+}
+.loaders {
+  color: #0091ff;
+  font-size: 90px;
+  text-indent: -9999em;
+  overflow: hidden;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  margin: 72px auto;
+  position: relative;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
+  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
+}
+@-webkit-keyframes load6 {
+  0% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+  5%,
+  95% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+  10%,
+  59% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
+      -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
+      -0.297em -0.775em 0 -0.477em;
+  }
+  20% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
+      -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
+      -0.749em -0.34em 0 -0.477em;
+  }
+  38% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
+      -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
+      -0.82em -0.09em 0 -0.477em;
+  }
+  100% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+}
+@keyframes load6 {
+  0% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+  5%,
+  95% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+  10%,
+  59% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
+      -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
+      -0.297em -0.775em 0 -0.477em;
+  }
+  20% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
+      -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
+      -0.749em -0.34em 0 -0.477em;
+  }
+  38% {
+    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
+      -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
+      -0.82em -0.09em 0 -0.477em;
+  }
+  100% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+}
+@-webkit-keyframes round {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes round {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+/************************************************texts*****************************************/
+.txt_primary {
+  color: #0091ff;
+}
+.txt_secondary {
+  color: #333333;
+}
+.gray_txt {
+  color: #555555;
+}
+.day15_txt {
+  color: #0079d4;
+}
+.day30_txt {
+  color: #015a9d;
+}
+.day60_txt {
+  color: #013862;
+}
+.day3m_txt {
+  color: #001424;
+}
+.btn:focus {
+  box-shadow: none;
+}
+/*******************************************Button**********************************************/
+.theme_switch {
+  background: #fff;
+  border: none;
+  margin-left: 14px;
+  border-radius: 0px;
+}
+.light_theme_display {
+  display: block;
+}
+.dark_theme_display {
+  display: none;
+}
+/************************************************Home Page*****************************************/
+.logo_txt {
+  color: #001220;
+  font-size: 50px;
+}
+.flag {
+  height: 25px;
+  width: 25px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  vertical-align: middle;
+  margin-right: 5px;
+}
+.headerbg {
+  background: url(/assets/img/body_bg.jpg);
+  overflow: hidden;
+}
+.body_bg {
+  background: url(/assets/img/body_bg.jpg);
+}
+.search_input {
+  border-radius: 25px;
+  padding: 15px;
+  padding-right: 45px;
+  height: 45px;
+  border: none;
+}
+.search_btn {
+  position: absolute;
+  top: 4px;
+  right: 10px;
+  color: #0091ff;
+}
+.blocks {
+  background: #fff;
+  padding: 10px;
+}
+.box_shadow {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+.filter_shadow {
+  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.1));
+}
+.chart_heading {
+  font-size: 25px;
+  font-weight: 400;
+  color: #111111;
+  padding: 5px 10px;
+  vertical-align: middle;
+  margin-bottom: 0px;
+  position: relative;
+  z-index: 1;
+}
+.txn_count {
+  background: #0091ff;
+  vertical-align: middle;
+  border-radius: 25px;
+  font-size: 13px;
+  color: #fff;
+  padding: 4px 18px 2px;
+  display: inline-block;
+  margin-left: 5px;
+  position: relative;
+  z-index: 1;
+}
+.day_filter {
+  background-color: #f9f9f7;
+  font-size: 14px;
+  padding: 15px;
+}
+.day_filter a {
+  margin: 0 5px;
+  text-decoration: none !important;
+  display: inline-block;
+}
+.day_filter a.active {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  background: #fff;
+  padding: 0 5px;
+}
+.explore_all {
+  background: #ecf2ff;
+  padding: 15px;
+  font-size: 13px;
+  color: #777777;
+  border-top: 1px solid #0091ff;
+}
+.explore_all a {
+  color: #777777;
+}
+.ip_filter {
+  padding: 12px 6px;
+}
+.ip_filter a {
+  margin-right: 10px;
+  color: #000000;
+  font-size: 13px;
+}
+.ip_filter a.active {
+  color: #0091ff;
+}
+.btn_primary {
+  background: #0091ff;
+  border-radius: 25px;
+  color: #fff !important;
+  text-transform: uppercase;
+  padding: 10px 20px;
+}
+.detail_div {
+  background-color: #ecf2ff;
+  border: 1px solid rgb(220, 228, 245);
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  transition: 0.3s linear all;
+}
+.detail_div .count {
+  font-size: 25px;
+  color: #0091ff;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.detail_div .desc {
+  font-size: 20px;
+}
+.detail_div .count span {
+  font-size: 15px;
+  color: #002f5b;
+}
+.detail_div:hover {
+  box-shadow: none;
+  transition: 0.3s linear all;
+}
+.latest_table {
+  background-color: #fff;
+  border: 1px solid rgb(220, 228, 245);
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  padding: 15px;
+  border-bottom: none;
+}
+.latest_blocks .explore_all {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border: 1px solid rgb(220, 228, 245);
+  border-top: none;
+}
+.table th {
+  border-top: none;
+  color: #555555;
+  white-space: nowrap;
+}
+.table td {
+  color: #111111;
+  white-space: nowrap;
+}
+.hash {
+  height: 12px;
+  width: 5px;
+  display: inline-block;
+}
+.table thead th {
+  border-width: 1px;
+}
+.item_select select {
+  appearance: none;
+  -moz-appearance: none;
+  background-color: #fff;
+  -webkit-appearance: none;
+  border: 1px solid #dee2e6;
+  width: 47px;
+  padding-left: 5px;
+}
+.item_select::after {
+  position: absolute;
+  content: '\f107';
+  font-family: FontAwesome;
+  right: 5px;
+  top: 1px;
+}
+/************************************************Footer*****************************************/
+.footer_div {
+  border-top: 1px solid rgba(0, 0, 0, 0.15);
+  font-size: 14px;
+}
+.ftr_services a {
+  padding: 0 7px;
+  color: #000000;
+}
+.ftr_dropdown {
+  background-color: #ecf2ff;
+  padding: 5px;
+}
+.ftr_dropdown a {
+  color: #777777;
+}
+.footer_div .theme_switch {
+  background: #ecf2ff;
+}
+.privacy_txt {
+  font-size: 12px;
+}
+.ftr_links {
+  padding-left: 67px;
+}
+.theme_switch{padding-top: 11px; padding-bottom: 11px;}
+/*******************************************View Page**************************************************/
+.view_page_header{background: #f5f5f5;box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);}
+.view_content{background-color: #eeeeee;min-height: 800px;}
+.mble_view_hdr{display: inline-block;}
+.box_shadow_large{box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);}
+.view_txt{color: #acacac;font-size: 17px;}
+.block_rotate {
+  animation: rotation 2s infinite linear;
+  -webkit-animation: rotation 2s infinite linear;
+  -moz-animation: rotation 2s infinite linear;
+  -o-animation: rotation 2s infinite linear;
+  -ms-animation: rotation 2s infinite linear;
+}
+@keyframes rotation {
+  from {
+      -webkit-transform: rotate(0deg);
+  }
+  to {
+      -webkit-transform: rotate(359deg);
+  }
+}
+@-moz-keyframes rotation {
+  from {
+      -webkit-transform: rotate(0deg);
+  }
+  to {
+      -webkit-transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes rotation {
+  from {
+      -webkit-transform: rotate(0deg);
+  }
+  to {
+      -webkit-transform: rotate(359deg);
+  }
+}
+@-o-keyframes rotation {
+  from {
+      -webkit-transform: rotate(0deg);
+  }
+  to {
+      -webkit-transform: rotate(359deg);
+  }
+}
+@-ms-keyframes rotation {
+  from {
+      -webkit-transform: rotate(0deg);
+  }
+  to {
+      -webkit-transform: rotate(359deg);
+  }
+}
+.link_to_detail{cursor: pointer;color: #0091ff;}
+.link_to_detail:hover{color: #0091ff;text-decoration: underline;}
+.mobile_table{border-bottom: 1px solid #dee2e6;position: relative;}
+.mobile_table .tble_col{padding: 0;}
+.expnd_blck{display: none;}
+.block_div h5{color: #555;font-size: 16px;}
+.blck_value{font-size: 15px;}
+.tab_hdng{
+  display: block;
+  position: relative;
+}
+.tab_hdng:after {
+  content: "\f078"; /* fa-chevron-down */
+  font-family: 'FontAwesome';
+  position: absolute;
+  right: 0;
+}
+a[aria-expanded="true"] > .tab_hdng:after {
+  content: "\f077"; /* fa-chevron-up */
+}
+.tab_hdng{color: #333333;}
+.view_content table{border: 1px solid #dee2e6; border-top: none;}
+.word_break{word-break: break-all;white-space: normal !important;}
+.view_content .mobile_table{text-align: left; min-width: unset;}
+/**********************************************Dark Theme CSS********************************/
+body.dark_theme {
+  background-color: #27314b;
+}
+.dark_theme .light_theme_display {
+  display: none;
+}
+.dark_theme .dark_theme_display {
+  display: block;
+}
+.dark_theme .headerbg {
+  background: url(/assets/img/dark_bg.jpg);
+}
+.dark_theme .body_bg {
+  background: url(/assets/img/dark_bg.jpg);
+}
+.dark_theme .logo_txt,
+.dark_theme .ip_filter a {
+  color: #ffffff;
+}
+.dark_theme .search_input {
+  background-color: #27314b;
+}
+.dark_theme .blocks,
+.dark_theme .explore_all {
+  background-color: #27314b;
+}
+.dark_theme .day_filter,
+.dark_theme .detail_div {
+  background-color: #384566;
+  border-color: #1c2437;
+}
+.dark_theme .detail_div .count span {
+  color: #ffffff;
+}
+.dark_theme .detail_div .desc {
+  color: #c0d2ff;
+}
+.dark_theme .day_filter a,
+.dark_theme .table th {
+  color: #ffffff;
+}
+.dark_theme .table td {
+  color: #c0d2ff;
+}
+.dark_theme .day_filter a.active {
+  background-color: #27314b;
+}
+.dark_theme .chart_heading {
+  color: #ffffff;
+}
+.dark_theme .latest_table {
+  background-color: #1c2437;
+  border-color: #1c2437;
+}
+.dark_theme .latest_blocks .explore_all {
+  background-color: #384566;
+  border-color: #1c2437;
+  color: #c0d2ff;
+}
+.dark_theme .latest_blocks .explore_all a {
+  color: #c0d2ff;
+}
+.dark_theme .table td,
+.dark_theme .table th,
+.dark_theme .table thead th {
+  border-color: #384566;
+}
+.dark_theme .footer_div .chart_heading .txt_secondary {
+  color: #ffffff !important;
+  color: #c0d2ff;
+}
+.dark_theme .blck_value{color: #c0d2ff;}
+.dark_theme .block_div h5{color: #ffffff;}
+.dark_theme .ftr_services a,
+.dark_theme .ftr_services {
+  color: #c0d2ff;
+}
+.dark_theme .ftr_services .gray_txt {
+  color: #3b4e7c;
+}
+.dark_theme .dropdown .bg-white,
+.dark_theme .dropdown-menu,
+.dark_theme .theme_switch,
+.dark_theme .footer_div .theme_switch,
+.dark_theme .ftr_dropdown,
+.dark_theme .bg-white {
+  background-color: #1c2437 !important;
+  color: #ffffff !important;
+}
+.dark_theme .dropdown a {
+  color: #ffffff !important;
+}
+.dark_theme td a.txt_secondary {
+  color: #c0d2ff;
+}
+.dark_theme .main-svg:first-child {
+  background: rgb(39, 49, 75) !important;
+}
+.dark_theme .g-ytitle text,
+.dark_theme .xtick text,
+.dark_theme .ytick text {
+  fill: #e0e3e6 !important;
+}
+.dark_theme .crisp,
+.dark_theme .xgrid,
+.dark_theme .zerolinelayer path {
+  stroke: #384566 !important;
+}
+.dark_theme .page-link {
+  background-color: #1c2437;
+  border-color: #384566;
+}
+.dark_theme .item_select select {
+  border-color: #1c2437;
+  background-color: #1c2437;
+  color: #c0d2ff;
+}
+.dark_theme .view_page_header {background: #1c2437;}
+.dark_theme .view_content {background-color: #27314b;}
+.js-plotly-plot .plotly .modebar,
+.zerolinelayer {
+  display: none;
+}
+.dark_theme .not_found{color: #ffffff;}
+.dark_theme .card, .dark_theme .card-header{background-color: #27314b; border-color: #27314b;}
+.dark_theme .tab_hdng{color: #ffffff;}
+.dark_theme .view_content table{border-color: #384566;}
+.dark_theme .card-body{background-color: #1c2437;}
+.loader {
+  display: flex;
+  height: 100vh;
+  text-align: center;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+ 
--- a/src/assets/d3img/angular1.png
+++ b/src/assets/d3img/angular1.png
--- a/src/assets/d3img/angular2.svg
+++ b/src/assets/d3img/angular2.svg
@ -0,0 +1 @@
+<svg width="2500" height="2500" viewBox="0 0 256 272" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M.1 45.522L125.908.697l129.196 44.028-20.919 166.45-108.277 59.966-106.583-59.169L.1 45.522z" fill="#E23237"/><path d="M255.104 44.725L125.908.697v270.444l108.277-59.866 20.919-166.55z" fill="#B52E31"/><path d="M126.107 32.274L47.714 206.693l29.285-.498 15.739-39.347h70.325l17.233 39.845 27.99.498-82.179-174.917zm.2 55.882l26.496 55.383h-49.806l23.31-55.383z" fill="#FFF"/></svg>
--- a/src/assets/d3img/atom.png
+++ b/src/assets/d3img/atom.png
--- a/src/assets/d3img/babel
+++ b/src/assets/d3img/babel
--- a/src/assets/d3img/babel.png
+++ b/src/assets/d3img/babel.png
--- a/src/assets/d3img/backbone.png
+++ b/src/assets/d3img/backbone.png
--- a/src/assets/d3img/bootstrap.svg
+++ b/src/assets/d3img/bootstrap.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612"><g sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"><path fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/><path fill="#FFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></svg>
--- a/src/assets/d3img/chrome-devtools.svg
+++ b/src/assets/d3img/chrome-devtools.svg
@ -0,0 +1 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>chrome_devtools</title><defs><path id="a" d="M373.333 405.333H32c-17.6 0-32-14.4-32-32V32C0 14.4 14.4 0 32 0h341.333c17.6 0 32 14.4 32 32v341.333c0 17.6-14.4 32-32 32z"/><linearGradient x1="32.638%" y1="-4.629%" x2="42.953%" y2="27.821%" id="c"><stop stop-color="#D7D7D7" offset="0%"/><stop stop-color="#F9F9F9" offset="100%"/></linearGradient><radialGradient cx="41.34%" cy="0%" fx="41.34%" fy="0%" r="56.544%" id="d"><stop stop-color="#1A237E" stop-opacity=".15" offset="0%"/><stop stop-color="#1A237E" stop-opacity="0" offset="100%"/></radialGradient><radialGradient cx="-.167%" cy=".103%" fx="-.167%" fy=".103%" r="136.321%" id="e"><stop stop-color="#1A237E" stop-opacity=".2" offset="0%"/><stop stop-color="#1A237E" stop-opacity="0" offset="100%"/></radialGradient><radialGradient cx="85.084%" cy="13.4%" fx="85.084%" fy="13.4%" r="153.655%" id="f"><stop stop-color="#1A237E" stop-opacity=".12" offset="0%"/><stop stop-color="#1A237E" stop-opacity="0" offset="100%"/></radialGradient><radialGradient cx="14.935%" cy="13.644%" fx="14.935%" fy="13.644%" r="100.424%" id="g"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></radialGradient><radialGradient cx="2.81%" cy="2.846%" fx="2.81%" fy="2.846%" r="134.115%" id="h"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></radialGradient></defs><g fill="none" fill-rule="evenodd"><g><g><path d="M0 0H512V512H0z"/><g transform="translate(53.333 53.333)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#2879FF" xlink:href="#a"/><path d="M373.333 402.667H32c-17.6 0-32-14.4-32-32v2.666c0 17.6 14.4 32 32 32h341.333c17.6 0 32-14.4 32-32v-2.666c0 17.6-14.4 32-32 32z" opacity=".2" fill="#0D254C" mask="url(#b)"/><path d="M373.333 0H32C14.4 0 0 14.4 0 32v2.667c0-17.6 14.4-32 32-32h341.333c17.6 0 32 14.4 32 32V32c0-17.6-14.4-32-32-32z" fill="#5496FF" mask="url(#b)"/><circle stroke="#47A4FB" stroke-width="1.333" mask="url(#b)" cx="202.667" cy="202.667" r="106.667"/><path d="M-53.333-53.333l512 512m0-512l-512 512m330.666-512v512M128-53.333v512m330.667-181.334h-512m512-149.333h-512m0 74.667h512m-256-256v512" stroke="#47A4FB" stroke-width="1.333" mask="url(#b)"/></g><g transform="translate(96 96)"><path d="M223.202 196.496h.027L152.28 320.58S48 317.333 13.333 229.333C-21.333 141.333 24 74.667 24 74.667l72.407 121.188c12.528 22.16 36.307 37.12 63.58 37.12 27.01 0 50.593-14.671 63.215-36.48z" opacity=".32" fill="#458BFF"/><path d="M152.383 320.404l70.846-123.908-.014-.024c6.207-10.733 9.76-23.194 9.76-36.485 0-39.936-32.076-72.381-71.87-72.978h141.967c11.195 21.899 17.51 46.708 17.51 72.991 0 88.687-71.895 160.581-160.582 160.581-2.553 0-5.093-.06-7.617-.177z" opacity=".05" fill="url(#c)"/><path d="M213.935 110.825l89.128-23.816H161.105a74.463 74.463 0 0 0-1.117-.009C119.678 87 87 119.678 87 159.987c0 40.31 32.678 72.988 72.988 72.988s72.987-32.678 72.987-72.988c0-18.937-7.213-36.19-19.04-49.162z" fill="url(#d)"/><path d="M90.209 138.518L24.911 73.231 96.173 195.44C90.33 184.942 87 172.854 87 159.987a72.974 72.974 0 0 1 3.209-21.469z" fill="url(#e)"/><path d="M176.309 231.143l-23.918 89.237 70.838-123.884-.02-.012c-10 17.284-26.882 30.086-46.9 34.659z" fill="url(#f)"/><path d="M96.533 197.13l-2.154 1.27L24 75.936l2.155-1.27 70.378 122.465zm56.134 122.244l72-124.707 2.31 1.333-72 124.708-2.31-1.334zM160 84h141.333v2.667H160V84z" fill="#FFF"/><circle stroke="#FFF" stroke-width="2.667" cx="160" cy="160" r="58.667"/><circle stroke="#FFF" stroke-width="2.667" cx="160" cy="160" r="74.667"/><circle stroke="#FFF" stroke-width="5.333" cx="160" cy="160" r="160"/><circle fill="url(#g)" cx="160" cy="160" r="160"/></g><path d="M85.333 458.667c-17.6 0-32-14.4-32-32V85.333c0-17.6 14.4-32 32-32h341.334c17.6 0 32 14.4 32 32v341.334c0 17.6-14.4 32-32 32H85.333z" fill="url(#h)"/></g></g></g></svg>
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg width="2500" height="2500" viewBox="0 0 256 272" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M.1 45.522L125.908.697l129.196 44.028-20.919 166.45-108.277 59.966-106.583-59.169L.1 45.522z" fill="#E23237"/><path d="M255.104 44.725L125.908.697v270.444l108.277-59.866 20.919-166.55z" fill="#B52E31"/><path d="M126.107 32.274L47.714 206.693l29.285-.498 15.739-39.347h70.325l17.233 39.845 27.99.498-82.179-174.917zm.2 55.882l26.496 55.383h-49.806l23.31-55.383z" fill="#FFF"/></svg>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612"><g sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"><path fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/><path fill="#FFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></svg>
				`@ -0,0 +1 @@`
				<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>chrome_devtools</title><defs><path id="a" d="M373.333 405.333H32c-17.6 0-32-14.4-32-32V32C0 14.4 14.4 0 32 0h341.333c17.6 0 32 14.4 32 32v341.333c0 17.6-14.4 32-32 32z"/><linearGradient x1="32.638%" y1="-4.629%" x2="42.953%" y2="27.821%" id="c"><stop stop-color="#D7D7D7" offset="0%"/><stop stop-color="#F9F9F9" offset="100%"/></linearGradient><radialGradient cx="41.34%" cy="0%" fx="41.34%" fy="0%" r="56.544%" id="d"><stop stop-color="#1A237E" stop-opacity=".15" offset="0%"/><stop stop-color="#1A237E" stop-opacity="0" offset="100%"/></radialGradient><radialGradient cx="-.167%" cy=".103%" fx="-.167%" fy=".103%" r="136.321%" id="e"><stop stop-color="#1A237E" stop-opacity=".2" offset="0%"/><stop stop-color="#1A237E" stop-opacity="0" offset="100%"/></radialGradient><radialGradient cx="85.084%" cy="13.4%" fx="85.084%" fy="13.4%" r="153.655%" id="f"><stop stop-color="#1A237E" stop-opacity=".12" offset="0%"/><stop stop-color="#1A237E" stop-opacity="0" offset="100%"/></radialGradient><radialGradient cx="14.935%" cy="13.644%" fx="14.935%" fy="13.644%" r="100.424%" id="g"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></radialGradient><radialGradient cx="2.81%" cy="2.846%" fx="2.81%" fy="2.846%" r="134.115%" id="h"><stop stop-color="#FFF" stop-opacity=".1" offset="0%"/><stop stop-color="#FFF" stop-opacity="0" offset="100%"/></radialGradient></defs><g fill="none" fill-rule="evenodd"><g><g><path d="M0 0H512V512H0z"/><g transform="translate(53.333 53.333)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#2879FF" xlink:href="#a"/><path d="M373.333 402.667H32c-17.6 0-32-14.4-32-32v2.666c0 17.6 14.4 32 32 32h341.333c17.6 0 32-14.4 32-32v-2.666c0 17.6-14.4 32-32 32z" opacity=".2" fill="#0D254C" mask="url(#b)"/><path d="M373.333 0H32C14.4 0 0 14.4 0 32v2.667c0-17.6 14.4-32 32-32h341.333c17.6 0 32 14.4 32 32V32c0-17.6-14.4-32-32-32z" fill="#5496FF" mask="url(#b)"/><circle stroke="#47A4FB" stroke-width="1.333" mask="url(#b)" cx="202.667" cy="202.667" r="106.667"/><path d="M-53.333-53.333l512 512m0-512l-512 512m330.666-512v512M128-53.333v512m330.667-181.334h-512m512-149.333h-512m0 74.667h512m-256-256v512" stroke="#47A4FB" stroke-width="1.333" mask="url(#b)"/></g><g transform="translate(96 96)"><path d="M223.202 196.496h.027L152.28 320.58S48 317.333 13.333 229.333C-21.333 141.333 24 74.667 24 74.667l72.407 121.188c12.528 22.16 36.307 37.12 63.58 37.12 27.01 0 50.593-14.671 63.215-36.48z" opacity=".32" fill="#458BFF"/><path d="M152.383 320.404l70.846-123.908-.014-.024c6.207-10.733 9.76-23.194 9.76-36.485 0-39.936-32.076-72.381-71.87-72.978h141.967c11.195 21.899 17.51 46.708 17.51 72.991 0 88.687-71.895 160.581-160.582 160.581-2.553 0-5.093-.06-7.617-.177z" opacity=".05" fill="url(#c)"/><path d="M213.935 110.825l89.128-23.816H161.105a74.463 74.463 0 0 0-1.117-.009C119.678 87 87 119.678 87 159.987c0 40.31 32.678 72.988 72.988 72.988s72.987-32.678 72.987-72.988c0-18.937-7.213-36.19-19.04-49.162z" fill="url(#d)"/><path d="M90.209 138.518L24.911 73.231 96.173 195.44C90.33 184.942 87 172.854 87 159.987a72.974 72.974 0 0 1 3.209-21.469z" fill="url(#e)"/><path d="M176.309 231.143l-23.918 89.237 70.838-123.884-.02-.012c-10 17.284-26.882 30.086-46.9 34.659z" fill="url(#f)"/><path d="M96.533 197.13l-2.154 1.27L24 75.936l2.155-1.27 70.378 122.465zm56.134 122.244l72-124.707 2.31 1.333-72 124.708-2.31-1.334zM160 84h141.333v2.667H160V84z" fill="#FFF"/><circle stroke="#FFF" stroke-width="2.667" cx="160" cy="160" r="58.667"/><circle stroke="#FFF" stroke-width="2.667" cx="160" cy="160" r="74.667"/><circle stroke="#FFF" stroke-width="5.333" cx="160" cy="160" r="160"/><circle fill="url(#g)" cx="160" cy="160" r="160"/></g><path d="M85.333 458.667c-17.6 0-32-14.4-32-32V85.333c0-17.6 14.4-32 32-32h341.334c17.6 0 32 14.4 32 32v341.334c0 17.6-14.4 32-32 32H85.333z" fill="url(#h)"/></g></g></g></svg>