chart and new changes

angular.json

@@ -32,7 +32,9 @@
             ],
             "scripts": [
               "src/assets/vendors/js/jquery-3.2.1.min.js",
-              "src/assets/vendors/js/bootstrap.min.js"
+              "src/assets/vendors/js/bootstrap.min.js",
+              "src/assets/js/OpenLayers/OpenLayers.js",
+              "src/assets/js/OpenLayers/51pool.online.min.js"
             ]
           },
           "configurations": {

app.js

@@ -0,0 +1,39 @@
+var request = require('request');
+const fs = require("fs"); 
+request('https://explorer.epic.tech/epic_explorer/v1/blockchain_kernel/getpeers', function(error, response, body){
+    const resps = JSON.parse(body);
+    const dataJson = resps.response.dataJson;
+    console.log(dataJson.length);
+    if (dataJson.length > 0) {
+        fs.readFile("./src/assets/geojson.json", function(err, data) { 
+            const users = JSON.parse(data);
+            
+        for (let i = 0; i < dataJson.length; i++) {
+            var ddd = [];
+            const getIP = dataJson[i].addr.split(':')[0];
+            request(`https://api.ipgeolocationapi.com/geolocate/${getIP}`, function(error, response, bodyresp){
+                const ipResp = JSON.parse(bodyresp);
+                const ipLatitude = ipResp.geo.latitude;
+                const ipLongitude = ipResp.geo.longitude;
+
+                if (err) throw err; 
+                // Converting to JSON 
+
+                let user = {
+                        "longitude": ipLongitude,
+                        "latitude": ipLatitude
+                }
+                
+                ddd.push(user);  
+                users.locations = ddd;
+                 fs.writeFile("./src/assets/geojson.json", JSON.stringify(users), err => { 
+                    // Checking for errors 
+                    if (err) throw err;  
+                    }); 
+          });
+          
+        }
+    });
+    }
+    
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "explorer2-epic",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -36,6 +36,7 @@
     "class-transformer": "^0.2.3",
     "class-validator": "^0.9.1",
     "cors": "^2.8.5",
+    "cross-blob": "^2.0.0",
     "dotenv": "^8.0.0",
     "express": "^4.15.2",
     "express-static-gzip": "^1.1.3",
@@ -43,9 +44,11 @@
     "jsdom": "^15.1.1",
     "moment": "^2.24.0",
     "morgan": "^1.9.1",
+    "ng2-odometer": "^1.1.3",
     "ngx-cookie-service": "^2.2.0",
     "ngx-pagination": "^4.1.0",
     "node-cron": "^2.0.3",
+    "ol": "^6.4.0",
     "pg": "^7.11.0",
     "pg-native": "^3.0.0",
     "plotly.js": "^1.48.3",
@@ -58,12 +61,13 @@
     "swagger-jsdoc": "^3.2.9",
     "tslib": "^1.9.0",
     "typeorm": "^0.2.18",
+    "webpack": "^4.39.2",
     "webpack-filter-warnings-plugin": "^1.2.1",
     "winston": "^3.2.1",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.800.0",
+    "@angular-devkit/build-angular": "~0.803.5",
     "@angular/cli": "~8.0.2",
     "@angular/compiler-cli": "~8.0.0",
     "@angular/language-service": "~8.0.0",

server.ts

@@ -9,6 +9,7 @@ const jsdom = require("jsdom");
 const { JSDOM } = jsdom;
 const { window } = new JSDOM(template);
 global["window"] = window;
+
 Object.defineProperty(window.document.body.style, "transform", {
   value: () => {
     return {
@@ -17,6 +18,14 @@ Object.defineProperty(window.document.body.style, "transform", {
     };
   }
 });
+
+// function noOp () { }
+// if (typeof window.URL.createObjectURL === 'undefined') {
+//   Object.defineProperty(window.URL, 'createObjectURL', { value: noOp})
+// }
+// global["URL"] = window.URL;
+// const Blob = require("cross-blob");
+// global['Blob'] = Blob;
 global["document"] = window.document;
 
 import { enableProdMode } from "@angular/core";
@@ -52,6 +61,7 @@ BlockchainBlock,
 BlockchainInput,
 BlockchainKernel,
 BlockchainOutput
+// PeerIp
 } from "./server/entities";
 import { universalGetLatestBlockDetails } from "./server/socket";
 import { dbConfig } from "./server/ormconfig";
@@ -71,7 +81,7 @@ enableProdMode();
 // Express server
 const app = express();
 
-const PORT = process.env.PORT || 4000;
+const PORT = process.env.PORT || 4001;
 const DIST_FOLDER = join(process.cwd(), "live");
 
 const controllers = [
@@ -82,9 +92,9 @@ const controllers = [
 ];
 
 app.use(function(req, res, next) {
-  res.header('Access-Control-Allow-Origin', '*');
-  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
-  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, Accept, Authtoken,cookie_id');
+  // res.header('Access-Control-Allow-Origin', '*');
+  // res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
+  // res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, Accept, Authtoken,cookie_id');
 
   // intercept OPTIONS method
   if ('OPTIONS' == req.method) {
@@ -120,6 +130,7 @@ controllers.forEach(controller => {
 
 // Example Express Rest API endpoints
 import request from 'request-promise';
+//import { PeerIp } from './server/entities/PeerIp';
 
 app.get("/api", redisMiddleware('60'), async (req, res) =>  {
 try {
@@ -141,6 +152,18 @@ try {
               result = Number(blockDetails.TotalCuckoo);
         else if(option == "getdifficulty-progpow")
               result = Number(blockDetails.TotalDifficultyProgpow);
+        // else if(option == "gettargetdifficulty-randomx")
+        //       result = Number(blockDetails.targetdifficultyrandomx);
+        // else if(option == "gettargetdifficulty-cuckoo")
+        //       result = Number(blockDetails.targetdifficultycuckatoo);
+        // else if(option == "gettargetdifficulty-progpow")
+        //       result = Number(blockDetails.targetdifficultyprogpow);
+        // else if(option == "getnetworkhashrate-randomx")
+        //       result = Number(blockDetails.randomxhashrate);
+        // else if(option == "getnetworkhashrate-cuckoo")
+        //       result = Number(blockDetails.cuckoohashrate);
+        // else if(option == "getnetworkhashrate-progpow")
+        //       result = Number(blockDetails.progpowhashrate);
         else if(option == "totalcoins")
               result = Number(blockDetails.coin_existence);
         else if(option == "maxcoins")

server.tsconfig.json

@@ -14,7 +14,8 @@
     "removeComments": false,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "strictPropertyInitialization": false
+    "strictPropertyInitialization": false,
+	"skipLibCheck": true
   },
-  "include": ["server.ts", "prerender.ts"]
+  "include": ["server.ts", "prerender.ts"],
 }

server/controllers/BlockchainBlock.ts

@@ -22,7 +22,10 @@ import {
   TotalDifficultyNBlockDto,
 } from '../dtos';
 import { Paginate } from '../utils';
-import {latestBlockDetails} from '../utils/common';
+import { 
+  latestBlockDetails,
+  previousBlockDetails
+} from '../utils/common';
 var moment = require('moment');
 moment.updateLocale('en', {
   relativeTime: {
@@ -256,6 +259,12 @@ export class BlockchainBlockController {
       this.TotalDifficultyNBlock,
     );
 
+    this.router.get(
+      `${this.path}/get51poolapi`,
+      redisMiddleware(process.env.REDIS_EXPIRY),
+      this.get51poolapi,
+    );
+
        /**
      * @swagger
      * /epic_explorer/v1/blockchain_block/blockcount:
@@ -446,6 +455,7 @@ export class BlockchainBlockController {
      *       200:
      *         description: Total Difficulty and No. of blocks   fetched successfully
      */
+    // Last Block home page function
     this.router.get(
       `${this.path}/latesblockdetails`,
       validationMiddleware(TotalDifficultyNBlockDto, true),
@@ -453,6 +463,14 @@ export class BlockchainBlockController {
       this.LatestDifficultyNBlock,
     );
 
+    // Previous Block home page function
+    this.router.get(
+      `${this.path}/previousblockdetails`,
+      validationMiddleware(TotalDifficultyNBlockDto, true),
+      redisMiddleware(process.env.REDIS_EXPIRY),
+      this.PreviousDifficultyNBlock,
+    );
+
     /**
      * @swagger
      * /epic_explorer/v1/blockchain_block/blockspersec:
@@ -684,6 +702,33 @@ export class BlockchainBlockController {
     );
   }
 
+  // get 51poolapi 
+  private get51poolapi = ( request: Request,res: Response) => {
+    // var request = require('request');
+    var axios = require('axios');
+    try {
+      var config = {
+        method: 'get',
+        url: 'https://51pool.online/api',
+        headers: { }
+      };
+      axios(config).then(function (response) {
+        console.log('response.body----------');
+        console.log(JSON.stringify(response.data));
+        res.status(200).json({
+          status: 200,
+          response: response.data
+        });
+      })
+      .catch(function (error) {
+        console.log('axios-error');
+        console.log(error);
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   private BlockchainBlockCreate = async (
     request: Request,
     response: Response,
@@ -1739,6 +1784,7 @@ export class BlockchainBlockController {
     }
   };
 
+  // Last Block home page function
   private LatestDifficultyNBlock = async (
     request: Request,
     response: Response,
@@ -1758,6 +1804,28 @@ export class BlockchainBlockController {
       next(new InternalServerErrorException(error));
     }
   };
+    // Previous Block home page function
+    private PreviousDifficultyNBlock = async (
+      request: Request,
+      response: Response,
+      next: NextFunction,
+    ) => {
+      try {
+        let result = await previousBlockDetails()
+        response.status(200).json({
+          status: 200,
+          timestamp: Date.now(),
+          message: 'Previous Block Details fetched Successfully',
+          response: {
+            ...result
+          },
+        });
+      } catch (error) {
+        next(new InternalServerErrorException(error));
+      }
+    };
+  
+  
 
   private BlockchainBlockPerSecond = async (
     request: Request,

server/controllers/BlockchainKernel.ts

@@ -172,6 +172,7 @@ export class BlockchainKernelController {
       this.changeNetwok,
     );
 
+
     /**
      * @swagger
      * /epic_explorer/v1/getpeers:
@@ -562,6 +563,212 @@ export class BlockchainKernelController {
     }
   };
 
+  /*
+  private getPeersLocation = async (
+    request: Request,
+    response: Response,
+    next: NextFunction,
+  ) => {
+    var self = this;
+    try {
+      if (Global.network == "Floonet") {
+        var peer_url = process.env.FLOONET_PEER_URL;
+      } else {
+        var peer_url = process.env.TESTNET_PEER_URL;
+      }
+      let finalresult = await request_promise(peer_url);
+      if (finalresult) {
+        var jsonresponse = JSON.parse(finalresult);
+      }
+
+
+      let getAllIp = [];
+      let getExistingIp = [];
+      let result = jsonresponse.map(function (value, i) {
+        value['id'] = i;
+        let getIP = value['addr'].split(':')[0];
+        getAllIp.push(getIP);
+        return value;
+      });
+
+      const fetchAllIps = await getConnection(Global.network).query(`SELECT ip, longitude, latitude FROM public.peer_ip`);
+
+      // const fetchAllIps = await getConnection(Global.network).getRepository(
+      //   PeerIp,
+      // ).find({
+      //   select: ['IpAddress']
+      // });
+
+      let markers = [];
+      for (let ip = 0; ip < fetchAllIps.length; ip++) {
+        getExistingIp.push(fetchAllIps[ip]['ip'].replace(/['"]+/g, ''));
+        const mapMarker = {
+          "longitude": fetchAllIps[ip]['longitude'],
+          "latitude": fetchAllIps[ip]['latitude']
+        };
+
+        markers.push(mapMarker);
+      }
+      let users = {};
+      users['locations'] = markers;
+      response.status(200).json({
+        status: 200,
+        timestamp: Date.now(),
+        message: 'Peers location list fetched successfully',
+        response: {
+          dataJson: users
+        },
+      });
+    }
+    catch (error) {
+      console.log('getpeerslocation-error', error);
+      next(new InternalServerErrorException(error));
+    }
+  }
+  */
+
+  /*
+  private getPeers = async (
+    request: Request,
+    response: Response,
+    next: NextFunction,
+  ) => {
+    var self = this;
+    try {
+      if (Global.network == "Floonet") {
+        var peer_url = process.env.FLOONET_PEER_URL;
+      } else {
+        var peer_url = process.env.TESTNET_PEER_URL;
+      }
+      let finalresult = await request_promise(peer_url);
+      if (finalresult) {
+        var jsonresponse = JSON.parse(finalresult);
+      }
+
+
+      let getAllIp = [];
+      let getExistingIp = [];
+      let result = jsonresponse.map(function (value, i) {
+        value['id'] = i;
+        let getIP = value['addr'].split(':')[0];
+        getAllIp.push(getIP);
+        return value;
+      });
+
+      const fetchAllIps = await getConnection(Global.network).query(`SELECT ip, longitude, latitude FROM public.peer_ip`);
+
+      // const fetchAllIps = await getConnection(Global.network).getRepository(
+      //   PeerIp,
+      // ).find({
+      //   select: ['IpAddress']
+      // });
+
+      let markers = [];
+      for (let ip = 0; ip < fetchAllIps.length; ip++) {
+        getExistingIp.push(fetchAllIps[ip]['ip'].replace(/['"]+/g, ''));
+        const mapMarker = {
+          "longitude": fetchAllIps[ip]['longitude'],
+          "latitude": fetchAllIps[ip]['latitude']
+        };
+
+        markers.push(mapMarker);
+      }
+      let users = {};
+      users['locations'] = markers;
+      fs.writeFile(path.join(__dirname, "../../", "browser", "assets/geojson.json"), JSON.stringify(users), err => {
+        // Checking for errors
+        if (err) { throw err; }
+      });
+
+
+      const missingIp = getAllIp.filter(item => getExistingIp.indexOf(item) < 0);
+
+      if (missingIp.length > 0) {
+        fs.readFile(path.join(__dirname, "../../", "browser", "assets/geojson.json"), (err, data) => {
+          if (err) { throw err; }
+          const users = JSON.parse(data);
+
+          for (let i = 0; i < missingIp.length; i++) {
+            const markers = [];
+            const ips = missingIp[i];
+            httpRequest(`https://api.ipgeolocationapi.com/geolocate/${ips}`, async (error, response, resp) => {
+              if (error) { throw error; }
+              const ipResp = JSON.parse(resp);
+              const ipLatitude = ipResp.geo.latitude;
+              const ipLongitude = ipResp.geo.longitude;
+
+              const insertQuery = await getConnection(Global.network)
+                .query(`INSERT INTO public.peer_ip(ip, longitude, latitude) VALUES ('${ips}', '${ipLongitude}', '${ipLatitude}');`);
+
+              //   let mapMarker = {
+              //     "type": "Feature",
+              //     "geometry": {
+              //         "type": "Point",
+              //         "coordinates": [ipLongitude, ipLatitude]
+              //     }
+              // }
+              const mapMarker = {
+                "longitude": ipLongitude,
+                "latitude": ipLatitude
+              };
+
+              markers.push(mapMarker);
+              users.locations = markers;
+              fs.writeFile(path.join(__dirname, "../../", "browser", "assets/geojson.json"), JSON.stringify(users), err => {
+                // Checking for errors
+                if (err) { throw err; }
+              });
+            });
+          }
+        });
+      }
+
+      response.status(200).json({
+        status: 200,
+        timestamp: Date.now(),
+        message: 'Peers list fetched successfully',
+        response: {
+          dataJson: result
+        },
+      });
+      // http.get(peer_url,
+      // async (resp) => {
+      //   // console.log('resp resp respresp',resp);
+      //   let data = '';
+      //   let result ;
+
+      //   // A chunk of data has been recieved.
+      //   await new Promise((resolve) => {
+      //   resp.on('data', function (chunk) {
+      //      data += chunk;
+
+      //      let dataJson = self.IsJsonString(data);
+      //      if(dataJson.length > 0){
+
+      //     result = dataJson.map(function (value, i) {
+      //         value['id'] = i;
+      //         return value;
+      //      });
+      //    }
+      //    resolve();
+      //    });
+      // });
+      //   response.status(200).json({
+      //     status: 200,
+      //     timestamp: Date.now(),
+      //     message: 'Peers list fetched successfully',
+      //     response: {
+      //     dataJson:  result
+      //     },
+      //   });
+      // });
+    } catch (error) {
+      console.log('error 3###########', error);
+      next(new InternalServerErrorException(error));
+    }
+  };
+  */
+ 
   private getPeers = async (
     request: Request,
     response: Response,
@@ -914,8 +1121,7 @@ LEFT JOIN (select block_id, count(block_id) as block_id_count from blockchain_ou
         totaloutput = [];
 
       TransactionHeatmapChartQuery.forEach(e => {
-        if(moment(e.hour).format('YYYY-MM-DD') >= moment('2019-09-03').format('YYYY-MM-DD'))
-        {
+        if (moment(e.hour).format('YYYY-MM-DD') >= moment('2019-09-03').format('YYYY-MM-DD')) {
           date.push(moment(e.hour).format('YYYY-MM-DD'));
           totalinput.push(e.totalinput != null ? e.totalinput : 0);
           totalkernal.push(e.totalkernal != null ? e.totalkernal : 0);

server/entities/PeerIp.ts

@@ -0,0 +1,41 @@
+import {
+    BaseEntity,
+    Column,
+    Entity,
+    Index,
+    JoinColumn,
+    ManyToOne,
+    PrimaryGeneratedColumn,
+  } from 'typeorm';
+
+@Entity('peer_ip', { schema: 'public' })
+  export class PeerIp {
+    @PrimaryGeneratedColumn({
+      type: 'integer',
+      name: 'id',
+    })
+    Id: number;
+
+    @Column('character varying', {
+      nullable: false,
+      primary: true,
+      length: 142,
+      name: 'ip',
+    })
+    IpAddress: string;
+
+    @Column('character varying', {
+      nullable: false,
+      length: 142,
+      name: 'longitude',
+    })
+    Longitude: string;
+
+    @Column('character varying', {
+        nullable: false,
+        length: 142,
+        name: 'latitude',
+    })
+    Latitude: string;
+
+  }

server/i18n/de.json

@@ -103,6 +103,12 @@
         "getdifficulty-randomx" : "Gibt die RandomX-Schwierigkeit als reine Textzeichenfolge zurück",
         "getdifficulty-progpow" : "Gibt die ProgPoW-Schwierigkeit als reine Textzeichenfolge zurück",
         "getdifficulty-cuckoo" : "Gibt die Cuckoo-Schwierigkeit als einfache Textzeichenfolge zurück",
+        "gettargetdifficulty-randomx" : "Gibt die RandomX-Zielschwierigkeit als Nur-Text-Zeichenfolge zurück",
+        "gettargetdifficulty-progpow" : "Gibt die ProgPoW-Zielschwierigkeit als Nur-Text-Zeichenfolge zurück",
+        "gettargetdifficulty-cuckoo" : "Gibt die Cuckoo-Zielschwierigkeit als Nur-Text-Zeichenfolge zurück",
+        "getnetworkhashrate-randomx" : "Gibt die RandomX-Netzwerk-Hashrate als Nur-Text-Zeichenfolge zurück",
+        "getnetworkhashrate-progpow" : "Gibt die ProgPoW-Netzwerk-Hashrate als Nur-Text-Zeichenfolge zurück",
+        "getnetworkhashrate-cuckoo" : "Gibt die Cuckoo-Netzwerk-Hashrate als Nur-Text-Zeichenfolge zurück",  
         "totalcoins" : "Gibt die ausstehende Anzahl von Münzen zurück",
         "Block-Queries": "Block Abfragen",
         "real-time-simple-query" : "Einfache Echtzeits abfragen",

server/i18n/en.json

@@ -20,7 +20,7 @@
         "EXPLORE_IT": "Explore",
         "blocks-by-algorithm" : "Blocks by Algorithm",
         "VIEWALL": "View All Charts",
-        "BLOCKCHAIN_HEIGHT": "Blockchain Height",
+        "BLOCKCHAIN_HEIGHT": "Block Height",
         "BLOCKCHAIN_SIZE":"Blockchain Size",
         "LATEST_BLOCKS" : "Latest Blocks",
         "LATEST_BLOCK_AGE": "Latest Block",
@@ -103,6 +103,12 @@
         "getdifficulty-randomx" : "returns the RandomX difficulty as a plain text string",
         "getdifficulty-progpow" : "returns the ProgPoW difficulty as a plain text string",
         "getdifficulty-cuckoo" : "returns the Cuckoo difficulty as a plain text string",
+        "gettargetdifficulty-randomx" : "returns the RandomX target difficulty as a plain text string",
+        "gettargetdifficulty-progpow" : "returns the ProgPoW target difficulty as a plain text string",
+        "gettargetdifficulty-cuckoo" : "returns the Cuckoo target difficulty as a plain text string",
+        "getnetworkhashrate-randomx" : "returns the RandomX network hashrate as a plain text string",
+        "getnetworkhashrate-progpow" : "returns the ProgPoW network hashrate as a plain text string",
+        "getnetworkhashrate-cuckoo" : "returns the Cuckoo network hashrate as a plain text string",
         "totalcoins" : "returns the outstanding number of coins",
         "Block-Queries": "Block Queries",
         "real-time-simple-query" : "Real-Time Simple Queries",

server/utils/common.ts

@@ -88,7 +88,7 @@ const getTotalRewardByHeight= async(height) => {
       currentReward = 8;
     } else if (height <= BLOCK_ERA_3) {
       remaining_height = height - BLOCK_ERA_2;
-      coin_existence =  (16 * BLOCK_ERA_1) + (8 * BLOCK_ERA_2) + 4 * remaining_height;
+      coin_existence =  (16 * BLOCK_ERA_1) + (8 * (BLOCK_ERA_2 - BLOCK_ERA_1 )) + 4 * remaining_height;
       currentReward = 4;
     } else if (height <= BLOCK_ERA_4) {
       remaining_height = height - BLOCK_ERA_3;
@@ -225,12 +225,12 @@ else if(height < (first_duration + (7 * year_height)) ) {
 
 
 
+// Last Block home page function
 const latestBlockDetails = async()=> {
   let block_height = '',
     letest_block,
     letest_block_num = '',
     letest_block_duration = '';
-
   const BlockchainLatestBlockQuery = await getConnection(Global.network)
     .query(
       'SELECT timestamp,height,edge_bits,hash,secondary_scaling, previous_id, total_difficulty_cuckaroo, total_difficulty_cuckatoo, total_difficulty_progpow, total_difficulty_randomx FROM blockchain_block ORDER BY timestamp DESC LIMIT 1',
@@ -244,96 +244,30 @@ const latestBlockDetails = async()=> {
       "'" +
       BlockchainLatestBlockQuery[0].previous_id +
       "'",
-        )
-        .catch(err_msg => {
+    ).catch(err_msg => {
       return(err_msg);
     });
 
+  /*
+  // const space = await exec('du -sh /root/.epic/main/chain_data/ --exclude=*.zip');
+  const space = "1.7G    /var/www/html/"
+  // let disk_space = space.stdout.split('\t')[0];
+    const disk_space  = "1.7"
+
+  // const space_new = await exec('du -sk /root/.epic/main/chain_data/ --exclude=*.zip');
+  const space_new  = "1.7G    /var/www/html/"
+  //let disk_space_kb = space_new.stdout.split('\t')[0];
+  // let disk_space_kb = (space_new.stdout.split('\t')[0] / 1000000).toFixed(2)+"G";
+  let disk_space_kb = "1.7G"
+  */
   const space = await exec('du -sh /root/.epic/main/chain_data/ --exclude=*.zip');
   let disk_space = space.stdout.split('\t')[0];
-
   const space_new = await exec('du -sk /root/.epic/main/chain_data/ --exclude=*.zip');
   //let disk_space_kb = space_new.stdout.split('\t')[0];
   let disk_space_kb = (space_new.stdout.split('\t')[0] / 1000000).toFixed(2)+"G";
+
   let height = BlockchainLatestBlockQuery[0].height;
   var coin_existence;      
-      // if (height > 12960) {
-      //   var remain_block = height - 12960;
-      //   var coin_existence =
-      //     1440 * 200 +
-      //     1440 * 180 +
-      //     1440 * 160 +
-      //     1440 * 140 +
-      //     1440 * 120 +
-      //     1440 * 100 +
-      //     1440 * 80 +
-      //     1440 * 60 +
-      //     1440 * 50 +
-      //     25 * remain_block;
-      // } else if (height > 11520) {
-      //   var remain_block = height - 11520;
-      //   var coin_existence =
-      //     1440 * 200 +
-      //     1440 * 180 +
-      //     1440 * 160 +
-      //     1440 * 140 +
-      //     1440 * 120 +
-      //     1440 * 100 +
-      //     1440 * 80 +
-      //     1440 * 60 +
-      //     remain_block * 50;
-      // } else if (height > 10080) {
-      //   var remain_block = height - 10080;
-      //   var coin_existence =
-      //     1440 * 200 +
-      //     1440 * 180 +
-      //     1440 * 160 +
-      //     1440 * 140 +
-      //     1440 * 120 +
-      //     1440 * 100 +
-      //     1440 * 80 +
-      //     remain_block * 60;
-      // } else if (height > 8640) {
-      //   var remain_block = height - 8640;
-      //   var coin_existence =
-      //     1440 * 200 +
-      //     1440 * 180 +
-      //     1440 * 160 +
-      //     1440 * 140 +
-      //     1440 * 120 +
-      //     1440 * 100 +
-      //     remain_block * 80;
-      // } else if (height > 7200) {
-      //   var remain_block = height - 7200;
-      //   var coin_existence =
-      //     1440 * 200 +
-      //     1440 * 180 +
-      //     1440 * 160 +
-      //     1440 * 140 +
-      //     1440 * 120 +
-      //     remain_block * 100;
-      // } else if (height > 5760) {
-      //   var remain_block = height - 5760;
-      //   var coin_existence =
-      //     1440 * 200 +
-      //     1440 * 180 +
-      //     1440 * 160 +
-      //     1440 * 140 +
-      //     remain_block * 120;
-      // } else if (height > 4320) {
-      //   var remain_block = height - 4320;
-      //   var coin_existence =
-      //     1440 * 200 + 1440 * 180 + 1440 * 160 + remain_block * 140;
-      // } else if (height > 2880) {
-      //   var remain_block = height - 2880;
-      //   var coin_existence = 1440 * 200 + 1440 * 180 + remain_block * 160;
-      // } else if (height > 1440) {
-      //   var remain_block = height - 1440;
-      //   var coin_existence = 1440 * 200 + remain_block * 180;
-      // } else {
-      //   var coin_existence = height * 200;
-      // }
-      
   let DAY_HEIGHT = 1440
   /// Height of the first epic block emission era
   const BLOCK_ERA_1 = DAY_HEIGHT * 334;
@@ -362,7 +296,7 @@ let currentReward = 16;
       currentReward = 8;
     } else if (height <= BLOCK_ERA_3) {
       remaining_height = height - BLOCK_ERA_2;
-    coin_existence =  (16 * BLOCK_ERA_1) + (8 * BLOCK_ERA_2) + 4 * remaining_height;
+      coin_existence =  (16 * BLOCK_ERA_1) + (8 *  (BLOCK_ERA_2 - BLOCK_ERA_1 )) + 4 * remaining_height;
       currentReward = 4;
     } else if (height <= BLOCK_ERA_4) {
       remaining_height = height - BLOCK_ERA_3;
@@ -430,12 +364,10 @@ let currentReward = 16;
   var TotalCuckoo=parseInt(BlockchainLatestBlockQuery[0].total_difficulty_cuckatoo) +
                   parseInt(BlockchainLatestBlockQuery[0].total_difficulty_cuckaroo);
 
-
   let FOUNDATION_LEVY_ERA_1 = DAY_HEIGHT * 120;
   /// After the first foundation levy era, we decrease the foundation levy each year
   let FOUNDATION_LEVY_ERA_2_ONWARDS = DAY_HEIGHT * 365;
 
-
   /// The foundation levy in each era
   let FOUNDATION_LEVY = [
         0.0888, 0.0777, 0.0666, 0.0555, 0.0444, 0.0333, 0.0222, 0.0111, 0.0111,
@@ -455,7 +387,6 @@ let currentReward = 16;
     let height_with_offset = height - FOUNDATION_LEVY_ERA_1 - 1;
     // We used the index 0 in the first era, therefore we offset the index by 1
     let index = (height_with_offset / FOUNDATION_LEVY_ERA_2_ONWARDS) + 1;
-            
     if (index < FOUNDATION_LEVY.length ) {
       foundationReward = currentReward  *  FOUNDATION_LEVY[index];
       userReward = currentReward -foundationReward;
@@ -471,20 +402,6 @@ let currentReward = 16;
   cuckoohashrate = Math.round(cuckoohashrate)
   progpowhashrate = Math.round(progpowhashrate)
   randomxhashrate = Math.round(randomxhashrate)
-        
-        // // Test purpose
-        // let test_cuckoo = await testavgBlockTime(block_height,"Cuckoo")
-        // let test_randomx = await testavgBlockTime(block_height,"RandomX")
-        // let test_progpow = await testavgBlockTime(block_height,"ProgPow")
-
-        // console.log("-----------------")
-        // console.log("Cuckoo avg block time ", test_cuckoo)
-        // console.log("randomx avg block time ", test_randomx)
-        // console.log("Progpow avg block time ", test_progpow)
-        
-
-
-        // Total foundation reward
   let totalFoundationReward = await circulationsupply(height) 
 
   return {
@@ -515,6 +432,221 @@ let currentReward = 16;
   };
 }
 
+// Previous Block home page function
+const previousBlockDetails = async() => {
+  let block_height = '',
+    letest_block,
+    letest_block_num = '',
+    letest_block_duration = '';
+  const CurrentBlock = await getConnection(Global.network)
+  .query(
+    'SELECT timestamp,height,edge_bits,hash,secondary_scaling, previous_id, total_difficulty_cuckaroo, total_difficulty_cuckatoo, total_difficulty_progpow, total_difficulty_randomx FROM blockchain_block ORDER BY timestamp DESC LIMIT 1',
+  ).catch(err_msg => {
+    return(err_msg);
+  });
+  const BlockchainLatestBlockQuery = await getConnection(Global.network)
+    .query(
+      'SELECT timestamp,height,edge_bits,hash,secondary_scaling, previous_id, total_difficulty_cuckaroo, total_difficulty_cuckatoo, total_difficulty_progpow, total_difficulty_randomx FROM blockchain_block WHERE hash=' +
+      "'" +
+      CurrentBlock[0].previous_id +
+      "'",
+    )
+    .catch(err_msg => {
+      return(err_msg);
+    });
+  const BlockchainPreviousBlockQuery = await getConnection(Global.network)
+    .query(
+      'SELECT total_difficulty_cuckaroo, total_difficulty_cuckatoo, total_difficulty_progpow, total_difficulty_randomx FROM blockchain_block WHERE hash=' +
+      "'" +
+      BlockchainLatestBlockQuery[0].previous_id +
+      "'",
+    ).catch(err_msg => {
+      return(err_msg);
+    });
+
+  /*
+  // const space = await exec('du -sh /root/.epic/main/chain_data/ --exclude=*.zip');
+  const space = "1.7G    /var/www/html/"
+  // let disk_space = space.stdout.split('\t')[0];
+    const disk_space  = "1.7"
+
+  // const space_new = await exec('du -sk /root/.epic/main/chain_data/ --exclude=*.zip');
+  const space_new  = "1.7G    /var/www/html/"
+  //let disk_space_kb = space_new.stdout.split('\t')[0];
+  // let disk_space_kb = (space_new.stdout.split('\t')[0] / 1000000).toFixed(2)+"G";
+  let disk_space_kb = "1.7G"
+  */
+  const space = await exec('du -sh /root/.epic/main/chain_data/ --exclude=*.zip');
+  let disk_space = space.stdout.split('\t')[0];
+  const space_new = await exec('du -sk /root/.epic/main/chain_data/ --exclude=*.zip');
+  //let disk_space_kb = space_new.stdout.split('\t')[0];
+  let disk_space_kb = (space_new.stdout.split('\t')[0] / 1000000).toFixed(2)+"G";
+
+  let height = BlockchainLatestBlockQuery[0].height;
+  var coin_existence;      
+  let DAY_HEIGHT = 1440
+  /// Height of the first epic block emission era
+  const BLOCK_ERA_1 = DAY_HEIGHT * 334;
+  /// Height of the second epic block emission era
+  const BLOCK_ERA_2 = BLOCK_ERA_1 + (DAY_HEIGHT * 470);
+  /// Height of the third epic block emission era
+  const BLOCK_ERA_3 = BLOCK_ERA_2 + (DAY_HEIGHT * 601);
+  /// Height of the fourth epic block emission era
+  const BLOCK_ERA_4 = BLOCK_ERA_3 + (DAY_HEIGHT * 800);
+  /// Height of the fifth epic block emission era
+  const BLOCK_ERA_5 = BLOCK_ERA_4 + (DAY_HEIGHT * 1019);
+  /// After the epic block emission era 6, each era will last 4 years (approximately 1460 days)
+  const BLOCK_ERA_6_ONWARDS = DAY_HEIGHT * 1460;
+  /// Block Reward that will be assigned after we change from era 5 to era 6.
+  const BASE_REWARD_ERA_6_ONWARDS = 0.15625;
+
+  let remaining_height = 0;
+  let currentReward = 16;
+  /// Compute the total reward generated by each block in a given height.
+  if (height <= BLOCK_ERA_1) {
+      coin_existence =  height * 16;
+      currentReward = 16;
+    } else if (height <= BLOCK_ERA_2) {
+      remaining_height = height - BLOCK_ERA_1;
+      coin_existence =  (16 * BLOCK_ERA_1) + 8 * remaining_height;
+      currentReward = 8;
+    } else if (height <= BLOCK_ERA_3) {
+      remaining_height = height - BLOCK_ERA_2;
+      coin_existence =  (16 * BLOCK_ERA_1) + (8 *  (BLOCK_ERA_2 - BLOCK_ERA_1 )) + 4 * remaining_height;
+      currentReward = 4;
+    } else if (height <= BLOCK_ERA_4) {
+      remaining_height = height - BLOCK_ERA_3;
+      coin_existence =  (16 * BLOCK_ERA_1) + (8 * BLOCK_ERA_2) + (4 * BLOCK_ERA_3) + 2 * remaining_height;
+      currentReward = 2;
+    } else if (height <= BLOCK_ERA_5) {
+      remaining_height = height - BLOCK_ERA_4;
+      coin_existence =  (16 * BLOCK_ERA_1) + (8 * BLOCK_ERA_2) + (4 * BLOCK_ERA_3) + (2 * BLOCK_ERA_4) +1 * remaining_height; 
+      currentReward = 1;
+    } else {
+    // After the era 6, we reduce the block rewards by half each 1460 days.
+    // Minus 1 to include multiples in the same index
+    // (i.e changes greater than to greater or equals to)
+    
+    let preious_circulation = (16 * BLOCK_ERA_1) + (8 * BLOCK_ERA_2) + (4 * BLOCK_ERA_3) + (2 * BLOCK_ERA_4) + (1 * BLOCK_ERA_5);
+
+    let height_with_offset = height - (BLOCK_ERA_5 - 1);
+    let exp = height_with_offset / BLOCK_ERA_6_ONWARDS;
+    let reward_emission =  BASE_REWARD_ERA_6_ONWARDS / (1 << exp);
+    coin_existence = preious_circulation + reward_emission ;
+    currentReward = reward_emission;
+  }
+
+  letest_block = dateDiff(BlockchainLatestBlockQuery[0].timestamp,true);
+  letest_block_num = letest_block; // "72"
+  letest_block_duration = letest_block == 1 ? 'second ago' : 'seconds ago';
+  const SECOND_POW_EDGE_BITS = 29;
+  const BASE_EDGE_BITS = 24;
+
+  if (BlockchainLatestBlockQuery[0].edge_bits == SECOND_POW_EDGE_BITS) {
+    var hashvalue = BlockchainLatestBlockQuery[0].hash;
+    var diff =
+      (BlockchainLatestBlockQuery[0].secondary_scaling * 2 ** 64) /
+      parseInt(hashvalue.substring(0, 16), 16);
+    var result = Math.min(diff, 0xffffffffffffffff);
+    var difficulty = Math.round(result);
+  } else {
+    var graph_weight =
+      2 *
+      2 ** (BlockchainLatestBlockQuery[0].edge_bits - BASE_EDGE_BITS) *
+      BlockchainLatestBlockQuery[0].edge_bits;
+    var hashvalue = BlockchainLatestBlockQuery[0].hash;
+    var diff =
+      (graph_weight * 2 ** 64) / parseInt(hashvalue.substring(0, 16), 16);
+    var result = Math.min(diff, 0xffffffffffffffff);
+    var difficulty = Math.round(result);
+  }
+
+  if (BlockchainLatestBlockQuery[0].previous_id) {
+    var targetdifficultycuckaroo =
+      BlockchainLatestBlockQuery[0].total_difficulty_cuckaroo -
+      BlockchainPreviousBlockQuery[0].total_difficulty_cuckaroo;
+    var targetdifficultycuckatoo =
+      BlockchainLatestBlockQuery[0].total_difficulty_cuckatoo -
+      BlockchainPreviousBlockQuery[0].total_difficulty_cuckatoo;
+    var targetdifficultyprogpow =
+      BlockchainLatestBlockQuery[0].total_difficulty_progpow -
+      BlockchainPreviousBlockQuery[0].total_difficulty_progpow;
+    var targetdifficultyrandomx =
+      BlockchainLatestBlockQuery[0].total_difficulty_randomx -
+      BlockchainPreviousBlockQuery[0].total_difficulty_randomx;
+  }
+
+  block_height = BlockchainLatestBlockQuery[0].height;
+  var TotalCuckoo=parseInt(BlockchainLatestBlockQuery[0].total_difficulty_cuckatoo) +
+                  parseInt(BlockchainLatestBlockQuery[0].total_difficulty_cuckaroo);
+
+  let FOUNDATION_LEVY_ERA_1 = DAY_HEIGHT * 120;
+  /// After the first foundation levy era, we decrease the foundation levy each year
+  let FOUNDATION_LEVY_ERA_2_ONWARDS = DAY_HEIGHT * 365;
+
+  /// The foundation levy in each era
+  let FOUNDATION_LEVY = [
+        0.0888, 0.0777, 0.0666, 0.0555, 0.0444, 0.0333, 0.0222, 0.0111, 0.0111,
+    ];
+    
+    /// Compute the foundation levy for each block.
+  let foundationReward = 16 * FOUNDATION_LEVY[0];
+  let userReward = 16 - (FOUNDATION_LEVY[0]);
+  if (height <= 0) {
+    foundationReward =0;
+    userReward = 0;
+  } else if (height <= FOUNDATION_LEVY_ERA_1) { 
+    foundationReward = currentReward  * FOUNDATION_LEVY[0];
+    userReward = currentReward -foundationReward;
+  } else {
+    // We subtract 1 to include the last block of an era.
+    let height_with_offset = height - FOUNDATION_LEVY_ERA_1 - 1;
+    // We used the index 0 in the first era, therefore we offset the index by 1
+    let index = (height_with_offset / FOUNDATION_LEVY_ERA_2_ONWARDS) + 1;
+    if (index < FOUNDATION_LEVY.length ) {
+      foundationReward = currentReward  *  FOUNDATION_LEVY[index];
+      userReward = currentReward -foundationReward;
+    } else {
+      foundationReward = 0;
+      userReward = 0;
+    }
+  }
+        
+  let cuckoohashrate = await network_hashrate(block_height,31,targetdifficultycuckatoo+targetdifficultycuckaroo,"Cuckoo");
+  let progpowhashrate = await network_hashrate(block_height,16,targetdifficultyprogpow,"ProgPow");
+  let randomxhashrate = await network_hashrate(block_height,16,targetdifficultyrandomx,"RandomX");
+  cuckoohashrate = Math.round(cuckoohashrate)
+  progpowhashrate = Math.round(progpowhashrate)
+  randomxhashrate = Math.round(randomxhashrate)
+  let totalFoundationReward = await circulationsupply(height) 
+
+  return {
+    block_height,
+    letest_block,
+    letest_block_num,
+    letest_block_duration,
+    coin_existence,
+    difficulty,
+    targetdifficultycuckaroo,
+    targetdifficultycuckatoo,
+    targetdifficultyprogpow,
+    targetdifficultyrandomx,
+    TotalCuckoo,
+    TotalDifficultyCuckaroo:BlockchainLatestBlockQuery[0].total_difficulty_cuckaroo,
+    TotalDifficultyCuckatoo:BlockchainLatestBlockQuery[0].total_difficulty_cuckatoo,
+    TotalDifficultyProgpow:BlockchainLatestBlockQuery[0].total_difficulty_progpow,
+    TotalDifficultyRandomx:BlockchainLatestBlockQuery[0].total_difficulty_randomx,
+    currentReward,
+    foundationReward,
+    userReward,
+    cuckoohashrate,
+    progpowhashrate,
+    randomxhashrate,
+    totalFoundationReward,
+    diskSpace:disk_space_kb,
+    diskSpaceKb : disk_space_kb
+  };
+}
 
 async function Details (height) {
    if(height){
@@ -648,5 +780,6 @@ async function network_hashrate(height, edge_bits, difficulty,proof) {
 export  {network_hashrate};        
 export  {averageblockdifficulty};
 export  {latestBlockDetails};
+export  {previousBlockDetails};
 export  {GetBlocktime};
 export  {Details};

src/app/shared/components/footer/footer.component.html

@@ -4,8 +4,7 @@
       <div class="footer_div py-4">
         <div class="row">
           <!-- <div class="col-md-4"> -->
-                <div class="col-sm-6">
-              
+          <div class="col-sm-12">
             <!-- <span class="txt_primary">Epic </span><span
                   class="txt_secondary">Explorer</span> -->
             <div class="logo_img">
@@ -14,29 +13,47 @@
                 <img src="/assets/img/ftrlogo_dark.png" height="50" class="dark_theme_display">
               </a>
             </div>
-                
           </div>
-            <div class="col-md-5 col-lg-6 ftr_services d-none">
-              <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-4 d-none">
-              <p class="txt_primary privacy_txt mb-0 mt-2 pt-1 ">We care about your Privacy! <a href="#">Read Our Privacy Policy</a></p>
-
+          <div class="col-md-12 ftr_services">
+            <p>
+              <a href="/">Home </a> | <a href="https://epic.tech/" target="_blank">Epic Cash </a> | <a href="/api-index">API </a> |
+              <a href="/chart/target-difficulty">Charts </a>
+              <!-- <span class="ftr_links d-block"><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-12">
+            <p class="privacy_txt mb-0 mt-2 pt-1 ">We care about your Privacy! <a href="#">Read Our Privacy
+                Policy</a></p>
+          </div> -->
           <!-- <div class="col-md-3 col-lg-4 text-right"> -->
-                <div class="col-sm-6 text-right ftr_lng">
-                    <a  routerLink="/api-index" class="text_underline mr-2" style="font-size: 1rem">API</a>   
-              <div class="dropdown ftr_dropdown pr-2 d-inline-block py-2">
-                <span class="flag" [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span> 
+          <!-- <div class="mble_view_hdr ml-auto">
+                <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 class="d-inline-block order-1 order-sm-2 bg-transparent position-relative"> -->
+          <!-- <span class="flag " [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span> -->
           <!--<span class="flag"  ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
-                <select class="langbut ftr_lang mx-1" #langSelect (change)="translate.changeLang(langSelect.value)">
+          <!-- <select class="langbut py-2 pr-4 pl-2" #langSelect (change)="translate.changeLang(langSelect.value)">
                       <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
                     </select>
-                <i class="arrow_drpdwn"></i>
+                    <i class="arrow_drpdwn net_dropdwn"></i>
                   </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 class="mble_view_hdr mobfix">
+                  <button (click)="ChangeTheme()" class="theme_switch mr-2 btn"><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 class="d-inline-block bg-transparent position-relative">                     
+                      <select class="langbut py-2 pr-4 pl-2" #langSelect (change)="translate.changeLang(langSelect.value)">
+                        <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
+                      </select>                      
+                    </div>
+                   
                   </div>
         </div>
       </div>

src/app/shared/components/header/header.component.html

@@ -3,7 +3,7 @@
         <a href="https://epic.tech/" target="_blank" class="text_underline mr-2">Epic Cash</a>
         <a routerLink="/api-index" class="text_underline mr-2">API</a> 
           <span>You are viewing </span>
-          <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-1">
+          <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-2">
               <!-- <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option> -->
               <option value="Testnet" disabled [selected]="'Testnet' == getNetwork()">MainNet</option> 
               <!-- <option disabled value="Mainnet">MainNet</option> -->
@@ -50,7 +50,7 @@
             <a href="https://epic.tech/" target="_blank" class="text_underline mr-2">Epic Cash</a>
             <a routerLink="/api-index"  class="text_underline mr-2">API</a> 
               <span>You are viewing </span>
-              <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-1">
+              <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-2">
                   <!-- <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option> -->
                   <option value="Testnet" disabled [selected]="'Testnet' == getNetwork()">MainNet</option>
                   <!-- <option disabled value="Mainnet">MainNet</option> -->

src/app/shared/components/layouts/home-layout/home-layout.component.html

@@ -1,4 +1,4 @@
-<epic-explorer-header></epic-explorer-header>
+<epic-explorer-siteheader></epic-explorer-siteheader>
 <div >
     <!-- [ngStyle]="{ 'min-height': screenHeight + 'px' }" -->
   <router-outlet></router-outlet>

src/app/shared/components/loading/loading.component.html

@@ -0,0 +1,17 @@
+<div>
+    <div class="graph_img background_loading mx-auto mb-3"></div>
+    <div class="bg-white1">
+        <!-- <div class="sk-cube-grid">
+            <div class="sk-cube sk-cube1"></div>
+            <div class="sk-cube sk-cube2"></div>
+            <div class="sk-cube sk-cube3"></div>
+            <div class="sk-cube sk-cube4"></div>
+            <div class="sk-cube sk-cube5"></div>
+            <div class="sk-cube sk-cube6"></div>
+            <div class="sk-cube sk-cube7"></div>
+            <div class="sk-cube sk-cube8"></div>
+            <div class="sk-cube sk-cube9"></div>
+        </div> -->
+        <div class="loader-4 center"><span></span></div>
+    </div>
+</div>

src/app/shared/components/loading/loading.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { TransServiceService } from '../../services/trans-service.service';
+
+@Component({
+  selector: 'epic-explorer-loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.css'],
+})
+export class LoadingComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+
+}

src/app/shared/components/siteheader/siteheader.component.html

@@ -1,27 +1,30 @@
 <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">Epic </span><span>Explorer</span> -->
       <div class="logo_img">
-          <a routerLink="/" class="chart_heading d-inline-block p-0">
+        <!-- <span class="txt_primary">Epic </span><span>Explorer</span> -->
+        <a class="navbar-brand chart_heading" routerLink="/">
         <img src="/assets/img/ftrlogo_light.png" height="50"  class="light_theme_display">
         <img src="/assets/img/ftrlogo_dark.png" height="50" class="dark_theme_display">
       </a>
       </div>
-      </a>
 
    
-    <div class="ml-auto ">
-      <a class="chart_heading d-sm-none" routerLink="/"> <img src="/assets/img/ftrlogo_light.png" height="30"  class="light_theme_display">
-        <img src="/assets/img/ftrlogo_dark.png" height="30" class="dark_theme_display"></a>
-      <div class=" d-none d-sm-inline-block mr-3 position-relative">
-          <span>You are viewing </span>
-          <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-1">
+   
+        <ul class="navbar-nav">
+          <li class="nav-item"><a href="https://epic.tech/" target="_blank" class="nav-link">Epic Cash</a></li>
+          <li class="nav-item"><a href="/api-index"  class="nav-link">API</a></li>
+          <li class="nav-item yrvsel">
+            <span class="small">You are viewing </span>
+            <!-- <i class="arrow_drpdwn net_dropdwn" for="fmnet"></i> -->
+            <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-2" id="fmnet">
                 <!-- <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option> -->
-              <option value="Testnet" disabled [selected]="'Testnet' == getNetwork()">MainNet</option>
+                <option value="Testnet"  [selected]="'Testnet' == getNetwork()">MainNet</option>
                 <!-- <option disabled value="Mainnet">MainNet</option> -->
             </select>
-          <i class="arrow_drpdwn net_dropdwn" ></i>
+           
+          </li>
+        </ul>
+         
           <!-- <ul class="list-unstyled d-inline-block">
             <li class="nav-item dropdown">
 
@@ -37,50 +40,42 @@
             </li>
           </ul> -->
           <!-- <span> Network </span> -->
-      </div>
-      <div class="position-relative d-none d-sm-inline-block">
-        <input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input bg_gray"
-          (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 px-2 d-inline-block ml-2 order-1 order-sm-2">
-          <span class="flag " [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span>
-          <!--<span class="flag"  ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
-          <select class="langbut py-2 mx-1" #langSelect (change)="translate.changeLang(langSelect.value)">
-            <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
-          </select>
-          <i class="arrow_drpdwn"></i>
-        </div>
-        <button (click)="ChangeTheme()" class="theme_switch mr-2 btn order-2 order-sm-3"><img
+     
+      
+   
+    <div class="mble_view_hdr ml-auto">
+      <button (click)="ChangeTheme()" class="theme_switch mr-2 btn"><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 class="d-inline-block bg-transparent position-relative">
+          <!-- <span class="flag " [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span> -->
+          <!--<span class="flag"  ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
+          <select class="langbut py-2 pr-4 pl-2" #langSelect (change)="translate.changeLang(langSelect.value)">
+            <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
+          </select>
+          <!-- <i class="arrow_drpdwn net_dropdwn"></i> -->
         </div>
        
-    <div class="position-relative d-block d-sm-none w-100 mt-3">
+      </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 bg_gray"
         (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="{{'home.SEARCH_TEXT' | translate}}">
-      <button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''">
+      <button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''"> -->
         <!-- <a href="/blockdetail/{{ ctrl.value }}"  > -->
-        <i class="fa fa-search"></i>
+        <!-- <i class="fa fa-search"></i> -->
         <!-- </a> -->
-      </button>
+      <!-- </button>
     </div>
     <div class="d-block d-sm-none text-center mt-3 mx-auto position-relative">
         <span>You are viewing </span>
-        <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-1">
-            <!-- <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option> -->
-            <option value="Testnet" disabled [selected]="'Testnet' == getNetwork()">MainNet</option>
+        <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-4 pl-2">
+            <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option>
+            <option value="Testnet"  [selected]="'Testnet' == getNetwork()">MainNet</option> -->
             <!-- <option disabled value="Mainnet">MainNet</option> -->
-        </select>
-        <i class="arrow_drpdwn net_dropdwn" ></i>
+        <!-- </select> -->
+        <!-- <i class="arrow_drpdwn net_dropdwn" ></i> -->
         <!-- <ul class="list-unstyled d-inline-block">
           <li class="nav-item dropdown">
 
@@ -96,6 +91,14 @@
           </li>
         </ul> -->
         <!-- <span> Network </span> -->
-    </div>
+    <!-- </div> -->
+
+    <!-- <div class="position-relative d-none d-sm-inline-block">
+      <input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input bg_gray"
+        (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="Search by hash or height">
+      <button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''">
+        <i class="fa fa-search"></i>
+      </button>
+    </div> -->
   </div>
 </nav>

src/app/shared/components/subloading/subloading.component.html

@@ -0,0 +1 @@
+<div class="subloader"><span class="loader-17"></span></div>

src/app/shared/components/subloading/subloading.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'epic-explorer-subloading',
+  templateUrl: './subloading.component.html',
+  styleUrls: ['./subloading.component.css'],
+})
+export class SubloadingComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+
+}

src/app/shared/services/chart.service.ts

@@ -47,6 +47,16 @@ export class ChartService {
         catchError((error: HttpErrorResponse): any => throwError(error))
       );
   }
+  public apiGetEpicLTP(): Observable<any> {
+    return this.http
+      .get(`https://api.vitex.net/api/v2/market?symbol=EPIC-002_USDT-000`)
+      .pipe(
+        map(res => {
+          return res;
+        }),
+        catchError((error: HttpErrorResponse): any => throwError(error))
+      );
+  }
 
   public getHttpheader(){
     var network;
@@ -61,10 +71,10 @@ export class ChartService {
   
 
   public getLatestblockdetails() {
-    if(this.socket==null){
-      this.socket = io.connect(this.server, {transport: 'websocket', requestTimeout:100000000,query: 'network='+this.socketnetwork});
-      this.socket.heartbeatTimeout = 200000
-    }
+    // if(this.socket==null){
+    //   this.socket = io.connect(this.server, {transport: 'websocket', requestTimeout:100000000,query: 'network='+this.socketnetwork});
+    //   this.socket.heartbeatTimeout = 200000
+    // }
     return Observable.create(observer => {
       this.socket.on("latestblockdetail", response => {
         observer.next(response);

src/app/shared/shared.module.ts

@@ -16,6 +16,8 @@ import { ChartService} from '../shared/services/chart.service';
 
 import { PlotlyComponent } from './components/plotly/plotly.component';
 import { CustomLoader } from '../app.module';
+import { LoadingComponent } from './components/loading/loading.component';
+import { SubloadingComponent } from './components/subloading/subloading.component';
 
 
 const components = [
@@ -25,6 +27,8 @@ const components = [
   SearchComponent,
   SiteLayoutComponent,
   SiteheaderComponent,
+  LoadingComponent,
+  SubloadingComponent,
   PlotlyComponent
 ];
 

src/app/view/api-view/api-view.component.html

@@ -1,37 +1,62 @@
-<div class="view_content py-4">
+<div class="view_content pb-4 apilinks">
 <div  class="container">
+   <div class="box_shadow p-3">
 <h3 class="txt_primary">{{'api-view.query-api' | translate}}</h3>
 
-<p class="txt_secondary">
+<p class="txt_secondary1">
    {{'api-view.query-api-line1' | translate}} <code>q</code> parameter.<br>
    {{'api-view.query-api-line2' | translate}} "<i>https://explorer.epic.tech/api?q=totalcoins</i>".
  </p>
+
+</div>
+</div>
+
+ <div  class="container">
+   <div class="box_shadow p-3">
+
  <h4 class="txt_primary">{{'api-view.real-time-simple-query' | translate}}</h4>
-<ul class="txt_secondary">
+<ul class="txt_secondary1">
     <li><b><a target="_blank" href="./api?q=circulating" >circulating</a></b>: {{'api-view.circulating' | translate}} </li>
     <li><b><a target="_blank" href="./api?q=getblockcount"> getblockcount </a></b>: {{'api-view.getblockcount' | translate}}</li>
     <li><b><a target="_blank" href="./api?q=getdifficulty-randomx">getdifficulty-randomx</a></b>: {{'api-view.getdifficulty-randomx' | translate}}</li>
     <li><b><a target="_blank" href="./api?q=getdifficulty-progpow">getdifficulty-progpow</a></b>: {{'api-view.getdifficulty-progpow' | translate}}</li>
     <li><b><a target="_blank" href="./api?q=getdifficulty-cuckoo">getdifficulty-cuckoo</a></b>: {{'api-view.getdifficulty-cuckoo' | translate}}</li>
+    <!-- <li><b><a target="_blank" href="./api?q=gettargetdifficulty-randomx">gettargetdifficulty-randomx</a></b>: {{'api-view.gettargetdifficulty-randomx' | translate}}</li>
+    <li><b><a target="_blank" href="./api?q=gettargetdifficulty-progpow">gettargetdifficulty-progpow</a></b>: {{'api-view.gettargetdifficulty-progpow' | translate}}</li>
+    <li><b><a target="_blank" href="./api?q=gettargetdifficulty-cuckoo">gettargetdifficulty-cuckoo</a></b>: {{'api-view.gettargetdifficulty-cuckoo' | translate}}</li>
+    <li><b><a target="_blank" href="./api?q=getnetworkhashrate-randomx">getnetworkhashrate-randomx</a></b>: {{'api-view.getnetworkhashrate-randomx' | translate}}</li>
+    <li><b><a target="_blank" href="./api?q=getnetworkhashrate-progpow">getnetworkhashrate-progpow</a></b>: {{'api-view.getnetworkhashrate-progpow' | translate}}</li>
+    <li><b><a target="_blank" href="./api?q=getnetworkhashrate-cuckoo">getnetworkhashrate-cuckoo</a></b>: {{'api-view.getnetworkhashrate-cuckoo' | translate}}</li> -->
+   
     <li><b><a target="_blank" href="./api?q=totalcoins">totalcoins</a></b>: {{'api-view.totalcoins' | translate}}</li>
     <li><b><a target="_blank" href="./api?q=maxcoins">maxcoins</a></b>: {{'api-view.maxcoins' | translate}}</li>
     <li><b><a target="_blank" href="./api?q=reward">reward</a></b>: {{'api-view.reward' | translate}}</li>
     <li><b><a target="_blank" href="./api?q=average-blocktime">average-blocktime</a></b>: {{'api-view.averageblocktime' | translate}}</li>
  </ul>
 
+</div>
+</div>
+
+ <div  class="container">
+   <div class="box_shadow p-3">
+
  <h4 class="txt_primary">{{'api-view.Block-Queries' | translate}}</h4>
- <p class="txt_secondary">
+ <p class="txt_secondary1">
    {{'api-view.block-query-text' | translate}}
  </p>
- <ul class="txt_secondary">
+ <ul class="txt_secondary1">
     <li><b><a target="_blank" href="./api?q=getblockhash&height=1" >getblockhash</a></b>: takes a <code>height</code> {{'api-view.getblockhash' | translate}}</li>
     <li><b><a target="_blank" href="./api?q=getblockheight&hash=3933f075332670a661d2271218969770c8396a2853777d5912c9ad4797e9c7e6" >getblockheight</a></b>: takes a <code>hash</code> {{'api-view.getblockheight' | translate}}</li>
     <li><b><a target="_blank" href="./api?q=getblocktime&height=2" >getblocktime</a></b>: takes a <code>height</code> {{'api-view.getblocktime' | translate}}</li>
  </ul>
+</div>
  </div>
  <div class="container">
+   <div class="box_shadow p-3">
     <h4 class="txt_primary">{{'api-view.Note' | translate}}</h4>
     <span>
       If you require another API, please request it by contacting an admin at <a href ="https://t.me/epiccash" >  t.me/epiccash  </a></span>
  </div>
 </div>
+ 
+</div>

src/app/view/block-view/block-detail/block-detail.component.html

@@ -1,4 +1,4 @@
-<div class="view_content py-4">
+<div class="view_content">
   <div *ngIf="hasdata"  class="container">
     <div *ngIf="hashdata.viewType == 'HashHeight' " >
 	  <div *ngIf="TimeArr" class="box_shadow_large detail_div p-3 mb-4">
@@ -14,7 +14,7 @@
         </div>
     <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" />
+        <img src="assets/img/block.png" height="30" class="block_rotate imagegoldcolor float-left mr-2" />
         Block {{ hashdata.BlockchainBlockFetchQuery.Height }}
       </h3>
       <ul class="pagination justify-content-end m-0 d-inline-flex float-right">
@@ -38,7 +38,7 @@
       </ul>
       <div class="row mb-3">
         <div class="col-sm-6 col-md-4 mt-4">
-          <div class="d-inline-block align-middle">
+          <div class="d-inline-block align-middle blockdetailicon">
             <img src="assets/img/fee.png" height="60" />
           </div>
           <div class="d-inline-block align-middle ml-2">
@@ -47,7 +47,7 @@
           </div>
         </div>
         <div class="col-sm-6 col-md-4 mt-4">
-          <div class="d-inline-block align-middle">
+          <div class="d-inline-block align-middle blockdetailicon">
             <img src="assets/img/hash.png" height="60" />
           </div>
           <div [title]="hashdata.BlockchainBlockFetchQuery.Hash" class="d-inline-block align-middle ml-2">
@@ -65,18 +65,18 @@
           </div>
         </div>
         <div class="col-sm-6 col-md-4 mt-4">
-          <div class="d-inline-block align-middle">
+          <div class="d-inline-block align-middle blockdetailicon">
             <img src="assets/img/difficulty.png" height="60" />
           </div>
           <div class="d-inline-block align-middle ml-2">
             <!-- <h6 class="">Target Difficulty<span class="view_txt">
               {{(hashdata.BlockchainBlockFetchQuery.Proof == 'Cuckoo') ? (hashdata.BlockchainBlockFetchQuery.TargetDifficultyCuckatoo | number) : (hashdata.BlockchainBlockFetchQuery.Proof == 'RandomX') ? (hashdata.BlockchainBlockFetchQuery.TargetDifficultyRandomx | number) : (hashdata.BlockchainBlockFetchQuery.Proof == 'ProgPow') ? (hashdata.BlockchainBlockFetchQuery.TargetDifficultyProgpow | number) : 0}}</span></h6> -->
-              <h6 class="">Total Difficulty<span class="view_txt">
-                  {{(hashdata.BlockchainBlockFetchQuery.Proof == 'Cuckoo') ? (hashdata.BlockchainBlockFetchQuery.TotalDifficultyCuckatoo | number) : (hashdata.BlockchainBlockFetchQuery.Proof == 'RandomX') ? (hashdata.BlockchainBlockFetchQuery.TotalDifficultyRandomx | number) : (hashdata.BlockchainBlockFetchQuery.Proof == 'ProgPow') ? (hashdata.BlockchainBlockFetchQuery.TotalDifficultyProgpow | number) : 0}}</span></h6>
+              <span class="">Total Difficulty</span><h6 class="view_txt">
+                  {{(hashdata.BlockchainBlockFetchQuery.Proof == 'Cuckoo') ? (hashdata.BlockchainBlockFetchQuery.TotalDifficultyCuckatoo | number) : (hashdata.BlockchainBlockFetchQuery.Proof == 'RandomX') ? (hashdata.BlockchainBlockFetchQuery.TotalDifficultyRandomx | number) : (hashdata.BlockchainBlockFetchQuery.Proof == 'ProgPow') ? (hashdata.BlockchainBlockFetchQuery.TotalDifficultyProgpow | number) : 0}}</h6>
           </div>
         </div>
         <div class="col-sm-6 col-md-4 mt-4 pt-2">
-          <div class="d-inline-block align-middle">
+          <div class="d-inline-block align-middle blockdetailicon">
             <img src="assets/img/block_reward.png" height="60" />
           </div>
           <div class="d-inline-block align-middle ml-2">
@@ -85,7 +85,7 @@
           </div>
         </div>
         <div class="col-sm-6 col-md-4 mt-4 pt-2">
-          <div class="d-inline-block align-middle">
+          <div class="d-inline-block align-middle blockdetailicon">
             <img src="assets/img/age.png" height="60" />
           </div>
           <div class="d-inline-block align-middle ml-2">
@@ -94,7 +94,7 @@
           </div>
         </div>
         <div class="col-sm-6 col-md-4 mt-4 pt-2">
-          <div class="d-inline-block align-middle">
+          <div class="d-inline-block align-middle blockdetailicon">
             <img src="assets/img/algorithm.png" height="60" />
           </div>
           <div class="d-inline-block align-middle ml-2">
@@ -328,7 +328,7 @@
                           </tr>
                           <tr>
                             <td class="d-none d-md-table-cell">{{'commit-id-view.proof-hash' | translate}}</td>
-                            <td>
+                            <td class="text_break">
                                 <p class="d-md-none">{{'commit-id-view.proof-hash' | translate}}</p>
                               {{ hashdata.BlockchainBlockOutputFetchQuery[0].ProofHash }}</td>
                           </tr>

src/app/view/block-view/block-detail/block-detail.component.ts

@@ -43,7 +43,7 @@ export class BlockDetailComponent implements OnInit {
         : false;
     }, 1000);
     this.titleService.setTitle(this.route.snapshot.data.title);
-    this.latestcomp.gettinglatesthashList().then(res => {
+    this.latestcomp.gettinglatesthashList(true).then(res => {
       this.latestblockHeight = this.latestcomp.latestblockdetail.block_height;
     });
    }

src/app/view/graph-view/graph-detail/graph-detail.component.html

@@ -1,4 +1,4 @@
-<div class="view_content detail_graph py-4">
+<div class="view_content detail_graph pb-5">
   <div class="container">
     <!-- <div *ngIf="this.title=='Total Difficulty'" class="row ">
 

src/app/view/home/block-detail-list/block-detail-list.component.html

@@ -24,7 +24,190 @@
     </div>
   </div>
 </div> -->
-<div class="row" *ngIf="latestblockdetail">
+<div class="row">
+
+
+  <div class="col-sm-7  col-md-8 mb-4">
+    <div class="position-relative">
+      <epic-explorer-search></epic-explorer-search>
+    </div>
+  </div>
+  <div class="col-sm-5  col-md-4">
+    <div class="blockchain_firstrow alignltp">
+
+      <div class="detailsloading" *ngIf="!epicData">
+        <epic-explorer-loading></epic-explorer-loading>
+      </div>
+     
+          <div class="epbbox" *ngIf="epicData">
+          <div class="epicbrandlogo">
+            <a href="https://x.vite.net/trade?symbol=EPIC-002_USDT-000" target="_blank">
+              <img src="assets/img/vite.png" class="exchangelogo" alt=""/>
+            </a>
+          </div>
+        <p class="block_value_v2 epicprice ml-3">
+          <span class="epicpricetxt">1 <span class="small">Epic</span> = </span><span class="small">$</span>{{epicData.lastPrice}}
+        </p>
+     
+      </div>
+    </div>
+
+    <!-- <div class="col-sm-4" *ngIf="epicData.highPrice">
+      <p class="block_heading">{{ "High" | translate }}</p>
+        <p
+          class="block_value_v2 hidezero"
+        >
+          <ng2-odometer [number]="epicData.highPrice" [config]="{ format:'(,ddd).dd' }"></ng2-odometer>
+        </p>
+    </div>
+    <div class="col-sm-4" *ngIf="epicData.lowPrice">
+      <p class="block_heading">{{ "Low" | translate }}</p>
+        <p
+          class="block_value_v2 hidezero"
+        >
+          <ng2-odometer [number]="epicData.lowPrice" [config]="{ format:'(,ddd).dd' }"></ng2-odometer>
+        </p>
+    </div> -->
+  </div>
+
+  <div class="col-md-12">
+    <div class="blockchain_firstrow">
+      <div class="detailsloading" *ngIf="!latestblockdetail.block_height">
+        <epic-explorer-loading></epic-explorer-loading>
+      </div>
+      <div class="row" *ngIf="latestblockdetail.block_height">
+        <div class="col-md-6">
+          <div class="row">
+            <div class="col-6 col-md-7 drawline">
+              <!-- <p class="block_heading">{{ "home.BLOCKCHAIN_HEIGHT" | translate }}</p> -->
+              <p class="block_heading">{{ "home.BLOCKCHAIN_HEIGHT" | translate }}</p>
+              <p class="block_value lgtxtwid" [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''">
+                <ng2-odometer [number]="Block_height" [config]="{ }"></ng2-odometer>
+                <!-- {{ latestblockdetail.block_height | number }} -->
+              </p>
+            </div>
+            <!-- <div class="col-md-3">
+            <p class="block_heading">{{ "home.BLOCKCHAIN_SIZE" | translate }}</p>
+            <p
+              class="block_value_v2"
+              [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''"
+            >
+              {{ latestblockdetail.diskSpace  }}
+            </p>
+          </div> -->
+            <div class="col-6 col-md-5 drawline">
+              <p class="block_heading">Blockchain Size</p>
+              <p class="block_value_v2 mt-1 medtxtwid" [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''">
+                <ng2-odometer [number]="Block_size" [config]="{ format:'(,ddd).dd' }"></ng2-odometer>G
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="row">
+            <div class="col-6 drawline">
+              <p class="block_heading">{{ "home.LATEST_BLOCK_AGE" | translate }}</p>
+              <p class="block_value_v2 medtxtwid" [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''">
+                <ng2-odometer [number]="Block_latest" [config]="{ }"></ng2-odometer>
+                <!-- {{ latestblockdetail.letest_block_num  | number }}  -->
+              </p>
+              <span class="smalltext">{{ latestblockdetail.letest_block_duration }}</span>
+            </div>
+            <div class="col-6">
+              <p class="block_heading">{{ "home.CIRCULATING_SUPPLY" | translate }}</p>
+              <p class="block_value_v2 medtxtwid" [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''">
+                <ng2-odometer [number]="Block_supply" [config]="{ }"></ng2-odometer>
+                <!-- {{ latestblockdetail.coin_existence | number }} -->
+              </p>
+              <span class="smalltext">Epic</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-md-12 targetandhashrate">
+    <div class="blockchain_firstrow bc_sixcls">
+      <div class="detailsloading" *ngIf="!latestblockdetail.targetdifficultycuckatoo || !ShowSecondBlock">
+        <epic-explorer-loading></epic-explorer-loading>
+      </div>
+      <div class="row" *ngIf="latestblockdetail.targetdifficultycuckatoo && ShowSecondBlock">
+        <div class="col-md-6">
+          <p class="block_heading">{{ "home.CURRENT_TARGET_DIFF" | translate }}</p>
+          <div class="row">
+            <div class="col-sm-4 col-md-3 drawline">
+              <p class="subheading">
+                Cuckoo
+              </p>
+              <p class="subvalue smatxtwid">               
+                <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer>
+                <!-- {{ latestblockdetail.targetdifficultycuckatoo | number }} -->
+              </p>
+            </div>
+            <div class="col-sm-4 col-md-5 drawline">
+              <p class="subheading">
+                ProgPoW
+              </p>
+              <epic-explorer-subloading *ngIf="!CTD_2"></epic-explorer-subloading>
+              <p class="subvalue smatxtwid" *ngIf="CTD_2">
+                <ng2-odometer [number]="CTD_2" [config]="{ }"></ng2-odometer>
+                <!-- {{ latestblockdetail.targetdifficultyprogpow | number }} -->
+              </p>
+            </div>
+            <div class="col-sm-4 col-md-4 drawline">
+              <p class="subheading">
+                RandomX
+              </p>
+              <epic-explorer-subloading *ngIf="!CTD_3"></epic-explorer-subloading>
+              <p class="subvalue smatxtwid" *ngIf="CTD_3">
+                <ng2-odometer [number]="CTD_3" [config]="{ }"></ng2-odometer>
+                <!-- {{ latestblockdetail.targetdifficultyrandomx | number }} -->
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <p class="block_heading">{{ "home.HASHRATE" | translate }}</p>
+          <div class="row">
+            <div class="col-sm-4 col-md-3 drawline">
+              <p class="subheading">
+                Cuckoo
+              </p>
+              <p class="subvalue smatxtwid">
+                <ng2-odometer [number]="NW_1" [config]="{ }"></ng2-odometer> Gps
+                <!-- {{ latestblockdetail.cuckoohashrate | number  }} Gps -->
+              </p>
+            </div>
+            <div class="col-sm-4 col-md-5 drawline">
+              <p class="subheading">
+                ProgPoW
+              </p>
+              <epic-explorer-subloading *ngIf="!NW_2"></epic-explorer-subloading>
+              <p class="subvalue smatxtwid" *ngIf="NW_2">
+                <ng2-odometer [number]="NW_2" [config]="{ }"></ng2-odometer> Hps
+                <!-- {{ latestblockdetail.progpowhashrate | number  }} Hps -->
+              </p>
+            </div>
+            <div class="col-sm-4 col-md-4">
+              <p class="subheading">
+                RandomX
+              </p>
+              <epic-explorer-subloading *ngIf="!NW_3"></epic-explorer-subloading>
+              <p class="subvalue smatxtwid" *ngIf="NW_3">
+                <ng2-odometer [number]="NW_3" [config]="{ }"></ng2-odometer> Hps
+                <!-- {{ latestblockdetail.randomxhashrate | number }} Hps -->
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<!-- <div class="row" *ngIf="latestblockdetail">
   <div class="col-md-4 col-xl-2">
     <div
       class="text-center detail_div"
@@ -61,45 +244,6 @@
      
     </div>
   </div>
-  <!-- <div class="col-md-3">
-    <div class="text-center detail_div" #minhgt>
-      <p class="mb-2 desc">{{ "home.CURRENT_TARGET_DIFF" | translate }}</p>
-      <div
-        class=" text-center d-inline-block"
-        [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''"
-      >
-
-        <p class="difficulty_datas">Cuckaroo : {{latestblockdetail.targetdifficultycuckaroo | number}} / {{latestblockdetail.TotalDifficultyCuckatoo | number}}</p>
-        <div class="difficulty_datas">
-          <span class="day60_txt">Cuckoo : </span>
-            <span>Target:</span>
-            <span>{{ latestblockdetail.targetdifficultycuckatoo | number }}</span>
-            <span>Total :</span><span>{{ latestblockdetail.TotalDifficultyCuckatoo | number }}</span>
-
-        </div>
-        <div class="difficulty_datas">
-            <span class="day60_txt">ProgPow : </span>
-              <span>Target:</span>
-              <span class="diff_span" style="width:85px;" title="{{ latestblockdetail.targetdifficultyprogpow | number }}">{{ latestblockdetail.targetdifficultyprogpow | number }}</span>
-              <span>Total:</span><span class="diff_span" title="{{ latestblockdetail.TotalDifficultyProgpow | number }}">{{ latestblockdetail.TotalDifficultyProgpow | number }}</span>
-          </div>
-          <div class="difficulty_datas">
-             <span class="day60_txt"> RandomX : </span>
-                <span>Target:</span>
-                <span>{{ latestblockdetail.targetdifficultyrandomx | number }}</span>
-                <span>Total:</span><span>{{ latestblockdetail.TotalDifficultyRandomx | number }}</span>
-            </div>
-        <p class="difficulty_datas">
-          ProgPow : {{ latestblockdetail.targetdifficultyprogpow | number }} /
-          {{ latestblockdetail.TotalDifficultyProgpow | number }}
-        </p>
-        <p class="difficulty_datas">
-          RandomX : {{ latestblockdetail.targetdifficultyrandomx | number }} /
-          {{ latestblockdetail.TotalDifficultyRandomx | number }}
-        </p>
-      </div>
-    </div>
-  </div> -->
   <div class="col-md-4  col-xl-2">
       <div
         class="text-center detail_div"
@@ -138,31 +282,6 @@
     </div>
   </div>
 
-  <!-- <div class="col-md-3">
-    <div class="text-center detail_div" #minhgt>
-      <p class="mb-2 desc">{{ "home.CURRENT_TOTAL_DIFF" | translate }}</p>
-      <div
-        class=" text-left mx-auto d-inline-block"
-        [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''"
-      >
-        <div class="difficulty_datas">
-          <span class="day60_txt">Cuckoo &nbsp;&nbsp;&nbsp;&nbsp;: </span>
-            <span> {{ latestblockdetail.TotalDifficultyCuckatoo | number }}</span>
-        </div>
-        <div class="difficulty_datas">
-            <span class="day60_txt">ProgPow &nbsp;&nbsp;: </span>
-              <span class="diff_span" style="width:110px;" title="{{ latestblockdetail.TotalDifficultyProgpow | number }}"> {{ latestblockdetail.TotalDifficultyProgpow | number }}</span>
-          </div>
-          <div class="difficulty_datas">
-             <span class="day60_txt"> RandomX &nbsp;: </span>
-                <span > {{ latestblockdetail.TotalDifficultyRandomx | number }}</span>
-            </div>
-      </div>
-    </div>
-  </div> -->
-
-
-
   <div class="col-md-6 mt-md-3 mt-xl-0 col-xl-3">
     <div
       class="text-center detail_div"
@@ -198,4 +317,4 @@
   </div>
 
 
-</div>
+</div> -->

src/app/view/home/block-detail-list/block-detail-list.component.ts

@@ -15,11 +15,34 @@ export class BlockDetailListComponent implements OnInit {
   public latestblockdetail: any = [];
   public prevouslatestblockdetails: any = [];
   public latestblockdetailObservable: any;
+  public epicData:any;
   private server = environment.domain;
   private socket;
+  ShowSecondBlock = false;
+  CTD_1;
+  CTD_2;
+  CTD_3;
+  NW_1;
+  NW_2;
+  NW_3;
+  Block_height;
+  Block_latest;
+  Block_supply;
+  Block_size;
+  timeout_1;
+  timeout_2;
+  timeout_3;
+  timeout_4;
+  timeout_5;
+  timeout_6;
+  timeout_7;
+  timeout_8;
+  timeout_9;
+  timeout_10;
   @ViewChild("minhgt", { static: false }) elementView: ElementRef;
 
   minHeight: number;
+  apiInterval;
 
   constructor(
     private chartService: ChartService,
@@ -29,13 +52,23 @@ export class BlockDetailListComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.gettinglatesthashList();
+    this.gettingprevioushashList();
     this.getBlockDetails();
+    this.getEpicLTP();
     //console.log("Enter Nginit");
 
   }
 
   ngAfterViewInit() {
+    setTimeout(() => {
+      this.gettinglatesthashList(false);
+      console.log('gettinglatesthashList v1');
+      this.apiInterval = setInterval(() => {
+        console.log('gettinglatesthashList v2');
+        this.gettinglatesthashList(false);
+        this.getEpicLTP();
+      }, 60 * 1000);  
+    }, 14 * 1000);
     // this.minHeight = this.elementView.nativeElement.offsetHeight;
   }
 
@@ -57,8 +90,62 @@ export class BlockDetailListComponent implements OnInit {
       });
   }
 
-  public gettinglatesthashList() {
-    return new Promise((resolve, reject) => {
+  public getEpicLTP() {
+    return new Promise<void>((resolve, reject) => {
+      this.chartService
+        .apiGetEpicLTP()
+        .subscribe(
+          res => {
+            if (res["msg"] == 'ok') {
+              console.log(res.data);
+              this.epicData = res.data;
+              resolve();
+            }
+          },
+          error => {}
+        );
+    });
+  }
+
+  public gettingprevioushashList() {
+    return new Promise<void>((resolve, reject) => {
+      this.chartService
+        .apiGetRequest("", "/blockchain_block/previousblockdetails")
+        .subscribe(
+          res => {
+            if (res["status"] == 200) {
+              // var hasharray = res.response;
+              this.latestblockdetail = res.response;
+              // setInterval(() => this.incrementseconds(), 1000);
+              this.latestblockdetail["blink"] = false;
+                setTimeout(() => {
+                  this.ShowSecondBlock = true;
+                }, 4000);
+                this.Block_height = res.response.block_height;
+                this.Block_latest = res.response.letest_block_num;
+                this.Block_supply = res.response.coin_existence;
+                let blockSize = (res.response.diskSpaceKb).replace(/G/g, '');
+                this.Block_size = blockSize;
+                this.CTD_1 = res.response.targetdifficultycuckatoo;
+                this.NW_1 = res.response.cuckoohashrate;
+                setTimeout(() => {
+                  this.CTD_2 = res.response.targetdifficultyprogpow;
+                  this.NW_2 = res.response.progpowhashrate;
+                }, 8000);
+                setTimeout(() => {
+                  this.CTD_3 = res.response.targetdifficultyrandomx;
+                  this.NW_3 = res.response.randomxhashrate;
+                }, 12000);
+              resolve();
+            }
+          },
+          error => {}
+        );
+    });
+  }
+  
+  public gettinglatesthashList(init) {
+    return new Promise<void>((resolve, reject) => {
       this.chartService
         .apiGetRequest("", "/blockchain_block/latesblockdetails")
         .subscribe(
@@ -68,6 +155,58 @@ export class BlockDetailListComponent implements OnInit {
               this.latestblockdetail = res.response;
               // setInterval(() => this.incrementseconds(), 1000);
               this.latestblockdetail["blink"] = false;
+              if(init){
+                setTimeout(() => {
+                  this.ShowSecondBlock = true;
+                }, 4000);
+                this.Block_height = res.response.block_height;
+                this.Block_latest = res.response.letest_block_num;
+                this.Block_supply = res.response.coin_existence;
+                let blockSize = (res.response.diskSpaceKb).replace(/G/g, '');
+                this.Block_size = blockSize;
+                this.CTD_1 = res.response.targetdifficultycuckatoo;
+                this.NW_1 = res.response.cuckoohashrate;
+                setTimeout(() => {
+                  this.CTD_2 = res.response.targetdifficultyprogpow;
+                  this.NW_2 = res.response.progpowhashrate;
+                }, 10000);
+                setTimeout(() => {
+                  this.CTD_3 = res.response.targetdifficultyrandomx;
+                  this.NW_3 = res.response.randomxhashrate;
+                }, 15000);
+              }else{
+                this.timeout_1 = setTimeout(() => {
+                  this.Block_height = res.response.block_height;
+                }, 5*1000);
+                this.timeout_2 = setTimeout(() => {
+                  this.Block_latest = res.response.letest_block_num;
+                }, 10*1000);
+                this.timeout_3 = setTimeout(() => {
+                  this.Block_supply = res.response.coin_existence;
+                }, 15*1000);
+                this.timeout_4 = setTimeout(() => {
+                  this.NW_1 = res.response.cuckoohashrate;
+                }, 20*1000);
+                this.timeout_5 = setTimeout(() => {
+                  this.NW_2 = res.response.progpowhashrate;
+                }, 25*1000);
+                this.timeout_6 = setTimeout(() => {
+                  this.NW_3 = res.response.randomxhashrate;
+                }, 30*1000);
+                this.timeout_7 = setTimeout(() => {
+                  this.CTD_1 = res.response.targetdifficultycuckatoo;
+                }, 35*1000);
+                this.timeout_8 = setTimeout(() => {
+                  this.CTD_2 = res.response.targetdifficultyprogpow;
+                }, 40*1000);
+                this.timeout_9 = setTimeout(() => {
+                  this.CTD_3 = res.response.targetdifficultyrandomx;
+                }, 45*1000);
+                this.timeout_10 = setTimeout(() => {
+                  let blockSize = (res.response.diskSpaceKb).replace(/G/g, '');
+                  this.Block_size = blockSize;
+                }, 50*1000);
+              }
               resolve();
             }
           },
@@ -81,6 +220,17 @@ export class BlockDetailListComponent implements OnInit {
   }
 
   ngOnDestroy() {
+    clearInterval(this.apiInterval);
+    clearTimeout(this.timeout_1);
+    clearTimeout(this.timeout_2);
+    clearTimeout(this.timeout_3);
+    clearTimeout(this.timeout_4);
+    clearTimeout(this.timeout_5);
+    clearTimeout(this.timeout_6);
+    clearTimeout(this.timeout_7);
+    clearTimeout(this.timeout_8);
+    clearTimeout(this.timeout_9);
+
     this.latestblockdetailObservable
       ? this.latestblockdetailObservable.unsubscribe()
       : null;

src/app/view/home/graph-list/graph-list.component.css

@@ -0,0 +1,18 @@
+
+ #wrapper {
+    overflow: hidden;
+    width: 100%;
+    position: absolute;
+    top: 0px;
+    height: 100%;
+}
+
+#mapdiv {
+    margin: auto;
+    position: relative;
+    top: 0;
+    width: 98%;
+    height: 100%;
+    border: 1px solid #fff;
+    border-radius: 0rem;
+}

src/app/view/home/graph-list/graph-list.component.html

@@ -1,12 +1,12 @@
 <div class="row">
-  <div class="col-md-6 col-lg-8 mb-4">
+  <div class="col-md-6 col-lg-6 mb-2">
     <div class="box_shadow" id="target-difficulty">
       <div class="blocks">
-        <h2 class="chart_heading d-inline-block">{{'home.TARGET_DIFFICULTY' | translate}}</h2>
+        <div class="col-sm-121">
+          <p class="block_heading">{{'home.TARGET_DIFFICULTY' | translate}}</p>
           <!-- <span class="txn_count" *ngIf="this.lg_last.length > 0"><span *ngFor="let l of lg_last">{{
             this.l | number</span>
           }}</span> -->
-        
           <div class="chart_show">
               <!-- <div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
                   <a href="JavaScript:void(0);" (click)="
@@ -25,19 +25,7 @@
             <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="bg-white">
-              <div class="sk-cube-grid">
-                <div class="sk-cube sk-cube1"></div>
-                <div class="sk-cube sk-cube2"></div>
-                <div class="sk-cube sk-cube3"></div>
-                <div class="sk-cube sk-cube4"></div>
-                <div class="sk-cube sk-cube5"></div>
-                <div class="sk-cube sk-cube6"></div>
-                <div class="sk-cube sk-cube7"></div>
-                <div class="sk-cube sk-cube8"></div>
-                <div class="sk-cube sk-cube9"></div>
-              </div>
+              <epic-explorer-loading></epic-explorer-loading>
             </div>
           </div>
         </div>
@@ -45,7 +33,7 @@
       <div class="day_filter">
         <a href="JavaScript:void(0);" (click)="
           Difficultyreq('target', '', '', '1 day',''); selectedItem = 6; difficultyRange = '1 day'
-        " id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primary: true }">1 {{'home.day' | translate}}</a>
+        " id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primary: true }">1 {{'day' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
             Difficultyreq('target', '', '', '1 week',''); selectedItem = 1; difficultyRange = '1 week'
           " id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primary: true }">1 {{'home.WEEK' | translate}}</a>
@@ -65,45 +53,28 @@
           <a href="JavaScript:void(0);" (click)="
           Difficultyreq('target', '', '', 'all',''); selectedItem = 7; difficultyRange = ''
         " id="7" #item7 [ngClass]="{ active: selectedItem == item7.id, day3m_txt: true }">{{'home.All' | translate}}</a>
-
-
-
       </div>
-
       <div class="explore_all text-right">
-         
-        <a routerLink="/chart/target-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
-          class="fa fa-long-arrow-right"></i></span></a>
+        <a routerLink="/chart/target-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <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="col-md-6 col-lg-6 mb-2">
     <div class="box_shadow" id="transaction-over-time">
+      <div class="col-sm-121">
         <div class="blocks">
-        <h2 class="chart_heading d-inline-block">{{'home.TRANSACTIONS_BY_TIME' | translate}}</h2>
+          <p class="block_heading">{{'home.TRANSACTIONS_BY_TIME' | translate}}</p>
           <div class="chart_show heatmapshow">
-          <epic-explorer-plotly *ngIf="heatMapGrowthData.data" [data]="heatMapGrowthData.data"
-            [layout]="heatMapGrowthData.layout"></epic-explorer-plotly>
+            <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=" bg-white">
-              <div class="sk-cube-grid">
-                <div class="sk-cube sk-cube1"></div>
-                <div class="sk-cube sk-cube2"></div>
-                <div class="sk-cube sk-cube3"></div>
-                <div class="sk-cube sk-cube4"></div>
-                <div class="sk-cube sk-cube5"></div>
-                <div class="sk-cube sk-cube6"></div>
-                <div class="sk-cube sk-cube7"></div>
-                <div class="sk-cube sk-cube8"></div>
-                <div class="sk-cube sk-cube9"></div>
+              <epic-explorer-loading></epic-explorer-loading>
             </div>
           </div>
         </div>
-        </div>
-      </div>
-
-
         <div class="day_filter">
           <a href="JavaScript:void(0);" (click)="transactionheatmapFunc(tDate, tHour, tInput,'Input'); selectedItem81 = 1" id="1" #item1
             [ngClass]="{ active: selectedItem81 == item1.id, txt_primary: true }">{{'home.INPUT' | translate}}</a>
@@ -113,35 +84,23 @@
             [ngClass]="{ active: selectedItem81 == item3.id, day30_txt: true }">{{'home.OUTPUT' | translate}}</a>
         </div>
         <div class="explore_all text-right">
-      <a routerLink="/chart/transactions-over-time"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
-            class="fa fa-long-arrow-right"></i></span></a>
+          <a routerLink="/chart/transactions-over-time"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
         </div>
       </div>
     </div>
-<div class="col-md-6 col-lg-4 mb-4">
+  </div>
+
+<div class="col-md-6 col-lg-6 mb-2">
   <div class="box_shadow" id="blocks">
     <div class="blocks">
-      <h2 class="chart_heading d-inline-block">{{'home.BLOCKS' | translate}}</h2>
+      <p class="block_heading">{{'home.BLOCKS' | translate}}</p>
       <span class="txn_count" title="{{'home.BOCKS_COUNT_HOVER' | translate}}" *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=" bg-white">
-            <div class="sk-cube-grid">
-              <div class="sk-cube sk-cube1"></div>
-              <div class="sk-cube sk-cube2"></div>
-              <div class="sk-cube sk-cube3"></div>
-              <div class="sk-cube sk-cube4"></div>
-              <div class="sk-cube sk-cube5"></div>
-              <div class="sk-cube sk-cube6"></div>
-              <div class="sk-cube sk-cube7"></div>
-              <div class="sk-cube sk-cube8"></div>
-              <div class="sk-cube sk-cube9"></div>
-            </div>
-          </div>
+          <epic-explorer-loading></epic-explorer-loading>
         </div>
       </div>
     </div>
@@ -168,9 +127,6 @@
         <a href="JavaScript:void(0);" (click)="
         blockreq('', '', 'all'); selectedItem3 = 7; 
         " id="7" #item37 [ngClass]="{ active: selectedItem3 == item37.id, day3m_txt: true }">{{'home.All' | translate}}</a>
-
-
-    
     </div>
     <div class="explore_all text-right">
       <a routerLink="/chart/blocks"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
@@ -178,10 +134,10 @@
   </div>
 </div>
 
-<div class="col-md-6 col-lg-4 mb-4">
+<div class="col-md-6 col-lg-6 mb-2">
   <div class="box_shadow" id="supply-growth">
     <div class="blocks">
-      <h2 class="chart_heading d-inline-block">{{'home.SUPPLY_GROWTH' | translate}}</h2>
+      <p class="block_heading">{{'home.SUPPLY_GROWTH' | translate}}</p>
       <span class="txn_count" title="{{'home.SUPPLY_GROWTH_HOVER' | translate}}" *ngIf="this.gg_last">{{
           this.gg_last | number
         }} Epic per block</span>
@@ -189,20 +145,7 @@
         <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=" bg-white">
-            <div class="sk-cube-grid">
-              <div class="sk-cube sk-cube1"></div>
-              <div class="sk-cube sk-cube2"></div>
-              <div class="sk-cube sk-cube3"></div>
-              <div class="sk-cube sk-cube4"></div>
-              <div class="sk-cube sk-cube5"></div>
-              <div class="sk-cube sk-cube6"></div>
-              <div class="sk-cube sk-cube7"></div>
-              <div class="sk-cube sk-cube8"></div>
-              <div class="sk-cube sk-cube9"></div>
-            </div>
-          </div>
+          <epic-explorer-loading></epic-explorer-loading>
         </div>
       </div>
     </div>
@@ -220,10 +163,6 @@
       <a href="JavaScript:void(0);" (click)="
        Growthreq('', '', 'all'); selectedItem5 = 7; 
         " id="7" #item7 [ngClass]="{ active: selectedItem5 == item7.id, day3m_txt: true }">{{'home.All' | translate}}</a>
-
-      
-      
-
     </div>
     <div class="explore_all text-right">
       <a  routerLink="/chart/supply-growth"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
@@ -231,181 +170,18 @@
     </div>
   </div>
 </div>
-
-<div class="col-md-6 col-lg-4 mb-4">
-  <div class="box_shadow" id="transaction-fees">
-    <div class="blocks">
-      <h2 class="chart_heading d-inline-block">{{'home.TRANSACTION_FEES' | translate}}</h2>
-      <span style="display:none;" class="txn_count" title="{{'home.TRANSACTION_FEE_HOVER' | translate}}" *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=" bg-white">
-            <div class="sk-cube-grid">
-              <div class="sk-cube sk-cube1"></div>
-              <div class="sk-cube sk-cube2"></div>
-              <div class="sk-cube sk-cube3"></div>
-              <div class="sk-cube sk-cube4"></div>
-              <div class="sk-cube sk-cube5"></div>
-              <div class="sk-cube sk-cube6"></div>
-              <div class="sk-cube sk-cube7"></div>
-              <div class="sk-cube sk-cube8"></div>
-              <div class="sk-cube sk-cube9"></div>
-            </div>
-          </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_primary: true }">1 {{'home.WEEK' | translate}}</a>
-  <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '15 days'); selectedItem4 = 2" id="2" #item2
-    [ngClass]="{ active: selectedItem4 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
-  <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '30 days'); selectedItem4 = 3" id="3" #item3
-    [ngClass]="{ active: selectedItem4 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
-  <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '60 days'); selectedItem4 = 4" id="4" #item4
-    [ngClass]="{ active: selectedItem4 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
-  <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '3 months'); selectedItem4 = 5" id="5" #item5
-    [ngClass]="{ active: selectedItem4 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
-
-    <a href="JavaScript:void(0);" (click)="
-    Transcationreq('', '', 'all'); selectedItem4 = 7; 
-     " id="7" #item7 [ngClass]="{ active: selectedItem4 == item7.id, day3m_txt: true }">{{'home.All' | translate}}</a>
-
-
-</div>
-<div class="explore_all text-right">
-  <a routerLink="/chart/transaction-fees"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
-</div>
-</div>
-</div>
-<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
-  <div class="box_shadow" id="blocks-mined">
-    <div class="blocks">
-      <h2 class="chart_heading d-inline-block">{{'home.BLOCKS_MINED' | translate}}</h2>
-      <span class="txn_count" title="{{'home.BOCKS_COUNT_HOVER' | translate}}" *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=" bg-white">
-            <div class="sk-cube-grid">
-              <div class="sk-cube sk-cube1"></div>
-              <div class="sk-cube sk-cube2"></div>
-              <div class="sk-cube sk-cube3"></div>
-              <div class="sk-cube sk-cube4"></div>
-              <div class="sk-cube sk-cube5"></div>
-              <div class="sk-cube sk-cube6"></div>
-              <div class="sk-cube sk-cube7"></div>
-              <div class="sk-cube sk-cube8"></div>
-              <div class="sk-cube sk-cube9"></div>
-            </div>
-          </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_primary: true }">1 {{'home.WEEK' | translate}}</a>
-      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '15 days'); selectedItem7 = 2" id="2" #item2
-        [ngClass]="{ active: selectedItem7 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
-      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '30 days'); selectedItem7 = 3" id="3" #item3
-        [ngClass]="{ active: selectedItem7 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
-      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '60 days'); selectedItem7 = 4" id="4" #item4
-        [ngClass]="{ active: selectedItem7 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
-      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '3 months'); selectedItem7 = 5" id="5" #item5
-        [ngClass]="{ active: selectedItem7 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
-
-        <a href="JavaScript:void(0);" (click)="
-        Blockminedreq('', '', 'all'); selectedItem7 = 8; 
-        " id="8" #item8 [ngClass]="{ active: selectedItem7 == item8.id, day3m_txt: true }">{{'home.All' | translate}}</a>
-
-
-    </div>
-    <div class="explore_all text-right">
-       <a routerLink="/chart/blocks-mined"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
-            class="fa fa-long-arrow-right"></i></span></a>
-    </div>
-  </div>
-
-</div>
-
-  <div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
-      <!-- <div [ngClass]="{'box_shadow' : true, 'invisible h-0' : viewchart}">
-          <div [ngClass]="{'blocks' : true, 'invisible h-0' : viewchart}">
-            <h2 class="chart_heading d-inline-block"><a routerLink="/chart/hashrate-growth-chart">HashRate Growth Chart</a></h2>
-            <span class="txn_count" *ngIf="this.hg_last">{{
-              this.hg_last | number
-            }}</span>
-            <div class="chart_show">
-              <plotly-plot *ngIf="blockGraphData.data" [data]="blockGraphData.data" [layout]="blockGraphData.layout">
-              </plotly-plot>
-              <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_primary: 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/hashrate-growth-chart"><span class="text-uppercase d-block">explore it <i
-                  class="fa fa-long-arrow-right"></i></span></a>
-          </div>
-        </div> -->
+<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-6 mb-2' : true, 'd-none' : viewchart}">
   <div class="box_shadow" id="blocks-by-algorithm">
       <div class="blocks">
-            <h2 class="chart_heading d-inline-block">{{'home.blocks-by-algorithm' | translate}}</h2>
+        <p class="block_heading">{{'home.blocks-by-algorithm' | translate}}</p>
         <span class="txn_count" title="{{'home.BOCKS_COUNT_HOVER' | translate}}" *ngIf="this.sg_last">{{
           this.sg_last | number
         }}</span>
-    
         <div class="chart_show">
           <epic-explorer-plotly *ngIf="stackGraphData.data" [data]="stackGraphData.data" [layout]="stackGraphData.layout">
           </epic-explorer-plotly>
           <div *ngIf="!stackGraphData.data" class="feedback_div news_desc text-center">
-                <div class="graph_img background_loading mx-auto mb-3"></div>
-                <div class="bg-white">
-                  <div class="sk-cube-grid">
-                    <div class="sk-cube sk-cube1"></div>
-                    <div class="sk-cube sk-cube2"></div>
-                    <div class="sk-cube sk-cube3"></div>
-                    <div class="sk-cube sk-cube4"></div>
-                    <div class="sk-cube sk-cube5"></div>
-                    <div class="sk-cube sk-cube6"></div>
-                    <div class="sk-cube sk-cube7"></div>
-                    <div class="sk-cube sk-cube8"></div>
-                    <div class="sk-cube sk-cube9"></div>
-                  </div>
-                </div>
+            <epic-explorer-loading></epic-explorer-loading>
           </div>
         </div>
       </div>
@@ -428,177 +204,121 @@
           <a href="JavaScript:void(0);" (click)="
           stackchartreq('', '', 'all'); selectedItem10 = 8; 
           " id="8" #item8 [ngClass]="{ active: selectedItem10 == item8.id, day3m_txt: true }">{{'home.All' | translate}}</a>
-      
-    
-
       </div>
       <div class="explore_all text-right">
-            <a routerLink="/chart/blocks-by-algorithm"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
+        <a routerLink="/chart/blocks-by-algorithm"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
+      </div>
+    </div>
+</div>
+
+<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-6 mb-2' : true, 'd-none' : viewchart}">
+  <div class="box_shadow" id="blocks-mined">
+    <div class="blocks">
+      <p class="block_heading">{{'home.BLOCKS_MINED' | translate}}</p>
+      <span class="txn_count" title="{{'home.BOCKS_COUNT_HOVER' | translate}}" *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">
+          <epic-explorer-loading></epic-explorer-loading>
+        </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_primary: true }">1 {{'home.WEEK' | translate}}</a>
+      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '15 days'); selectedItem7 = 2" id="2" #item2
+        [ngClass]="{ active: selectedItem7 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
+      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '30 days'); selectedItem7 = 3" id="3" #item3
+        [ngClass]="{ active: selectedItem7 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
+      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '60 days'); selectedItem7 = 4" id="4" #item4
+        [ngClass]="{ active: selectedItem7 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
+      <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '3 months'); selectedItem7 = 5" id="5" #item5
+        [ngClass]="{ active: selectedItem7 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
+      <a href="JavaScript:void(0);" (click)="
+        Blockminedreq('', '', 'all'); selectedItem7 = 8; 
+        " id="8" #item8 [ngClass]="{ active: selectedItem7 == item8.id, day3m_txt: true }">{{'home.All' | translate}}</a>
+    </div>
+    <div class="explore_all text-right">
+       <a routerLink="/chart/blocks-mined"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
             class="fa fa-long-arrow-right"></i></span></a>
     </div>
   </div>
 </div>
 
+<div class="col-md-6 col-lg-4 mb-2">
+  <div class="box_shadow" id="transaction-fees">
+    <div class="blocks">
+      <p class="block_heading">{{'home.TRANSACTION_FEES' | translate}}</p>
+      <span style="display:none;" class="txn_count" title="{{'home.TRANSACTION_FEE_HOVER' | translate}}" *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">
+          <epic-explorer-loading></epic-explorer-loading>
+        </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_primary: true }">1 {{'home.WEEK' | translate}}</a>
+    <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '15 days'); selectedItem4 = 2" id="2" #item2
+      [ngClass]="{ active: selectedItem4 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
+    <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '30 days'); selectedItem4 = 3" id="3" #item3
+      [ngClass]="{ active: selectedItem4 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
+    <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '60 days'); selectedItem4 = 4" id="4" #item4
+      [ngClass]="{ active: selectedItem4 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
+    <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '3 months'); selectedItem4 = 5" id="5" #item5
+      [ngClass]="{ active: selectedItem4 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
+    <a href="JavaScript:void(0);" (click)="Transcationreq('', '', 'all'); selectedItem4 = 7;" id="7" #item7 [ngClass]="{ active: selectedItem4 == item7.id, day3m_txt: true }">{{'home.All' | translate}}</a>
+    </div>
+    <div class="explore_all text-right">
+    <a routerLink="/chart/transaction-fees"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
+    </div>
+  </div>
+</div>
 
-
-  <div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
+<div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-2' : true, 'd-none' : viewchart}">
   <div class="box_shadow" id="blocks-interval">
     <div class="blocks">
-        <h2 class="chart_heading d-inline-block">{{'home.BLOCKSINTERVAL' | translate}}</h2>
+      <p class="block_heading">{{'home.BLOCKSINTERVAL' | translate}}</p>
       <span class="txn_count"  title="{{'home.BLOCK_INTERVAL_BW_BLOCKS_HOVER' | translate}}" *ngIf="this.blockinteval_last">{{
           this.blockinteval_last | number
         }}s</span>
       <div class="chart_show">
         <epic-explorer-plotly *ngIf="barGraphIntevalData.data" [data]="barGraphIntevalData.data" [layout]="barGraphIntevalData.layout"></epic-explorer-plotly>
         <div *ngIf="!barGraphIntevalData.data" class="feedback_div news_desc text-center">
-            <div class="graph_img background_loading mx-auto mb-3"></div>
-            <div class=" bg-white">
-              <div class="sk-cube-grid">
-                <div class="sk-cube sk-cube1"></div>
-                <div class="sk-cube sk-cube2"></div>
-                <div class="sk-cube sk-cube3"></div>
-                <div class="sk-cube sk-cube4"></div>
-                <div class="sk-cube sk-cube5"></div>
-                <div class="sk-cube sk-cube6"></div>
-                <div class="sk-cube sk-cube7"></div>
-                <div class="sk-cube sk-cube8"></div>
-                <div class="sk-cube sk-cube9"></div>
-              </div>
-            </div>
+          <epic-explorer-loading></epic-explorer-loading>
         </div>
       </div>
     </div>
     <div class="day_filter">
-          <a href="JavaScript:void(0);" (click)="
-          Blockintervalreq('today'); selectedInteverval = 1
-              " id="1" #intevalitem1 [ngClass]="{ active: selectedInteverval == intevalitem1.id, txt_primary: true }">Today</a>
-        <a href="JavaScript:void(0);" (click)="
-        Blockintervalreq('yesterday'); selectedInteverval = 2
-            " id="2" #intevalitem2 [ngClass]="{ active: selectedInteverval == intevalitem2.id, txt_primary: true }">Yesterday</a>
+      <a href="JavaScript:void(0);" (click)="Blockintervalreq('today'); selectedInteverval = 1" id="1" #intevalitem1 [ngClass]="{ active: selectedInteverval == intevalitem1.id, txt_primary: true }">Today</a>
+      <a href="JavaScript:void(0);" (click)="Blockintervalreq('yesterday'); selectedInteverval = 2" id="2" #intevalitem2 [ngClass]="{ active: selectedInteverval == intevalitem2.id, txt_primary: true }">Yesterday</a>
         <a *ngIf ="showcurrentIntervalDatetimestamp >= 1567468800000" href="JavaScript:void(0);" (click)="Blockintervalreq('previous'); "><</a>
         <span>{{showcurrentIntervalDate}}</span>
         <a *ngIf ="showcurrentIntervalDatetimestamp < todaydate" href="JavaScript:void(0);" (click)="Blockintervalreq('next'); ">></a>
-  
     </div>
     <div class="explore_all text-right">
       <a routerLink="/chart/block-interval"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
     </div>
   </div>
 </div>
-  <div  *ngIf="viewchartvar" class="col-md-6 col-lg-8 mb-4">
-    <div class="box_shadow" id="total-difficulty">
-      <div class="blocks">
-        <h2 class="chart_heading d-inline-block">{{'home.TOTAL_DIFFICULTY' | translate}}</h2>
-        <!-- <span class="txn_count" *ngIf="this.lg_last.length > 0"><span *ngFor="let l of lg_last">{{
-          this.l | number</span>
-        }}</span> -->
 
-        <div class="chart_show">
-            <!-- <div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
-                <a href="JavaScript:void(0);" (click)="
-                Difficultyreq('total', '', '', TdifficultyRange,'all'); selectedTarget12 = 4
-              " id="4" #itemtarget124
-                        [ngClass]="{ active: selectedTarget12 == itemtarget124.id, txt_primary: true }">All</a>
-                <a href="JavaScript:void(0);" (click)="
-                Difficultyreq('total', '', '', TdifficultyRange,'cuckatoo'); selectedTarget12 = 1
-              " id="1" #itemtarget121
-                        [ngClass]="{ active: selectedTarget12 == itemtarget121.id, txt_primary: true }">Cuckoo</a>
-                      <a href="JavaScript:void(0);" (click)="
-              Difficultyreq('total', '', '', TdifficultyRange,'progpow'); selectedTarget12 = 2
-              " id="2" #itemtarget122
-                        [ngClass]="{ active: selectedTarget12 == itemtarget122.id, txt_primary: true }">ProgPow</a>
-                      <a href="JavaScript:void(0);" (click)="
-              Difficultyreq('total', '', '', TdifficultyRange,'randomx'); selectedTarget12 = 3
-              " id="3" #itemtarget123
-                        [ngClass]="{ active: selectedTarget12 == itemtarget123.id, txt_primary: true }">RandomX</a>
-          </div> -->
-            <epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data"
-            [layout]="linearTotalGraphData.layout">
-          </epic-explorer-plotly>
-          <div *ngIf="!linearTotalGraphData.data" class="feedback_div news_desc text-center">
-            <div class="graph_img background_loading mx-auto mb-3"></div>
-            <div class=" bg-white">
-              <div class="sk-cube-grid">
-                <div class="sk-cube sk-cube1"></div>
-                <div class="sk-cube sk-cube2"></div>
-                <div class="sk-cube sk-cube3"></div>
-                <div class="sk-cube sk-cube4"></div>
-                <div class="sk-cube sk-cube5"></div>
-                <div class="sk-cube sk-cube6"></div>
-                <div class="sk-cube sk-cube7"></div>
-                <div class="sk-cube sk-cube8"></div>
-                <div class="sk-cube sk-cube9"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="day_filter">
-          <a href="JavaScript:void(0);" (click)="
-    Difficultyreq('total', '', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day'
-  " id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primary: true }">1 {{'home.day' | translate}}</a>
-          <a href="JavaScript:void(0);" (click)="
-      Difficultyreq('total', '', '', '1 week',''); selectedTarget = 1; TdifficultyRange = '1 week'
-    " id="1" #itemtarget1 [ngClass]="{ active: selectedTarget == itemtarget1.id, txt_primary: true }">1
-            {{'home.WEEK' | translate}}</a>
-          <!-- <a href="JavaScript:void(0);" (click)="
-      Difficultyreq('total', '', '', '15 days',''); selectedTarget = 2; TdifficultyRange = '15 days'
-    " id="2" #itemtarget2 [ngClass]="{ active: selectedTarget == itemtarget2.id, day15_txt: true }">15
-            {{'home.DAYS' | translate}}</a> -->
-          <a href="JavaScript:void(0);" (click)="
-      Difficultyreq('total', '', '', '30 days',''); selectedTarget = 3; TdifficultyRange = '30 days'
-    " id="3" #itemtarget3 [ngClass]="{ active: selectedTarget == itemtarget3.id, day30_txt: true }">30
-            {{'home.DAYS' | translate}}</a>
-          <a href="JavaScript:void(0);" (click)="
-      Difficultyreq('total', '', '', '60 days',''); selectedTarget = 4; TdifficultyRange = '60 days'
-    " id="4" #itemtarget4 [ngClass]="{ active: selectedTarget == itemtarget4.id, day60_txt: true }">60
-            {{'home.DAYS' | translate}}</a>
-          <a href="JavaScript:void(0);" (click)="
-      Difficultyreq('total', '', '', '3 months',''); selectedTarget = 5; TdifficultyRange = '3 months'
-    " id="5" #itemtarget5 [ngClass]="{ active: selectedTarget == itemtarget5.id, day3m_txt: true }">3
-            {{'home.MONTHS' | translate}}</a>
-
-
-            <a href="JavaScript:void(0);" (click)="
-            Difficultyreq('total', '', '', 'all',''); selectedTarget = 7; TdifficultyRange = ''
-          " id="7" #itemtarget7 [ngClass]="{ active: selectedTarget == itemtarget7.id, dayall_txt: true }">{{'home.All' | translate}}</a>
-  
-  
-
-
-        </div>
-
-      <div class="explore_all text-right">
-          
-        <a routerLink="/chart/total-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
-          class="fa fa-long-arrow-right"></i></span></a>
-      </div>
-    </div>
-  </div>
 <div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
   <div class="box_shadow" id="block-interval">
     <div class="blocks">
-        <h2 class="chart_heading d-inline-block">{{'home.BLOCK_INTERVAL' | translate}}</h2>
+      <p class="block_heading">{{'home.BLOCK_INTERVAL' | translate}}</p>
       <span class="txn_count" title="{{'home.BLOCK_INTERVAL_HOVER' | translate}}" *ngIf="this.ag_last">{{ this.ag_last | number }}s</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="bg-white">
-              <div class="sk-cube-grid">
-                <div class="sk-cube sk-cube1"></div>
-                <div class="sk-cube sk-cube2"></div>
-                <div class="sk-cube sk-cube3"></div>
-                <div class="sk-cube sk-cube4"></div>
-                <div class="sk-cube sk-cube5"></div>
-                <div class="sk-cube sk-cube6"></div>
-                <div class="sk-cube sk-cube7"></div>
-                <div class="sk-cube sk-cube8"></div>
-                <div class="sk-cube sk-cube9"></div>
-              </div>
-            </div>
+          <epic-explorer-loading></epic-explorer-loading>
         </div>
       </div>
     </div>
@@ -617,41 +337,69 @@
         <a href="JavaScript:void(0);" (click)="
         Blockspersecreq('', '', 'all'); selectedItem2 = 8; 
         " id="8" #item8 [ngClass]="{ active: selectedItem2 == item8.id, day3m_txt: true }">{{'home.All' | translate}}</a>
-  
-
     </div>
     <div class="explore_all text-right">
-        <a routerLink="/chart/avg-block-interval"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
+      <a routerLink="/chart/avg-block-interval"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
+    </div>
+  </div>
+</div>
+
+<div  *ngIf="viewchartvar" class="col-md-6 col-lg-8 mb-4">
+  <div class="box_shadow" id="total-difficulty">
+    <div class="blocks">
+      <p class="block_heading">{{'home.TOTAL_DIFFICULTY' | translate}}</p>
+      <div class="chart_show">
+        <epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data"
+          [layout]="linearTotalGraphData.layout">
+        </epic-explorer-plotly>
+        <div *ngIf="!linearTotalGraphData.data" class="feedback_div news_desc text-center">
+          <epic-explorer-loading></epic-explorer-loading>
+        </div>
+      </div>
+    </div>
+    <div class="day_filter">
+        <a href="JavaScript:void(0);" (click)="Difficultyreq('total', '', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day'" id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primary: true }">1 {{'home.day' | translate}}</a>
+        <a href="JavaScript:void(0);" (click)="Difficultyreq('total', '', '', '1 week',''); selectedTarget = 1; TdifficultyRange = '1 week'" id="1" #itemtarget1 [ngClass]="{ active: selectedTarget == itemtarget1.id, txt_primary: true }">1 {{'home.WEEK' | translate}}</a>
+        <!-- <a href="JavaScript:void(0);" (click)="
+        Difficultyreq('total', '', '', '15 days',''); selectedTarget = 2; TdifficultyRange = '15 days'
+      " id="2" #itemtarget2 [ngClass]="{ active: selectedTarget == itemtarget2.id, day15_txt: true }">15
+          {{'home.DAYS' | translate}}</a> -->
+        <a href="JavaScript:void(0);" (click)="
+        Difficultyreq('total', '', '', '30 days',''); selectedTarget = 3; TdifficultyRange = '30 days'
+      " id="3" #itemtarget3 [ngClass]="{ active: selectedTarget == itemtarget3.id, day30_txt: true }">30
+          {{'home.DAYS' | translate}}</a>
+        <a href="JavaScript:void(0);" (click)="
+        Difficultyreq('total', '', '', '60 days',''); selectedTarget = 4; TdifficultyRange = '60 days'
+      " id="4" #itemtarget4 [ngClass]="{ active: selectedTarget == itemtarget4.id, day60_txt: true }">60
+          {{'home.DAYS' | translate}}</a>
+        <a href="JavaScript:void(0);" (click)="
+        Difficultyreq('total', '', '', '3 months',''); selectedTarget = 5; TdifficultyRange = '3 months'
+      " id="5" #itemtarget5 [ngClass]="{ active: selectedTarget == itemtarget5.id, day3m_txt: true }">3
+          {{'home.MONTHS' | translate}}</a>
+          <a href="JavaScript:void(0);" (click)="
+          Difficultyreq('total', '', '', 'all',''); selectedTarget = 7; TdifficultyRange = ''
+        " id="7" #itemtarget7 [ngClass]="{ active: selectedTarget == itemtarget7.id, dayall_txt: true }">{{'home.All' | translate}}</a>
+    </div>
+    <div class="explore_all text-right">
+      <a routerLink="/chart/total-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
         class="fa fa-long-arrow-right"></i></span></a>
     </div>
   </div>
 </div>
+
+
 <div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
   <div class="box_shadow" id="transaction-vs-date">
     <div class="blocks">
-        <h2 class="chart_heading d-inline-block">{{'home.TRANSACTIONS_VS_DATE' | translate}}</h2>
+      <p class="block_heading">{{'home.TRANSACTIONS_VS_DATE' | translate}}</p>
       <span class="txn_count" title="{{'home.TRANSACTION_LINECHAT_HOVER' | translate}}" *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=" bg-white">
-              <div class="sk-cube-grid">
-                <div class="sk-cube sk-cube1"></div>
-                <div class="sk-cube sk-cube2"></div>
-                <div class="sk-cube sk-cube3"></div>
-                <div class="sk-cube sk-cube4"></div>
-                <div class="sk-cube sk-cube5"></div>
-                <div class="sk-cube sk-cube6"></div>
-                <div class="sk-cube sk-cube7"></div>
-                <div class="sk-cube sk-cube8"></div>
-                <div class="sk-cube sk-cube9"></div>
-              </div>
-            </div>
+          <epic-explorer-loading></epic-explorer-loading>
         </div>
       </div>
     </div>
@@ -674,66 +422,9 @@
       <a href="JavaScript:void(0);" (click)="
       Transactionlinechartreq('', '', 'all'); selectedItem8 = 8; 
       " id="8" #item8 [ngClass]="{ active: selectedItem8 == item8.id, day3m_txt: true }">{{'home.All' | translate}}</a>
-
-
     </div>
     <div class="explore_all text-right">
-        <a routerLink="/chart/transactions-by-date"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
-              class="fa fa-long-arrow-right"></i></span></a>
+      <a routerLink="/chart/transactions-by-date"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <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> -->
-
-  <!-- <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">Pie Chart</h2>
-        <span class="txn_count" *ngIf="this.pg_last">{{
-          this.pg_last | number
-        }}</span>
-
-        <div class="chart_show">
-          <epic-explorer-plotly *ngIf="pieGraphData.data" [data]="pieGraphData.data" [layout]="pieGraphData.layout">
-          </epic-explorer-plotly>
-          <div *ngIf="!pieGraphData.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)="piechartreq('', '', '1 week'); selectedItem10 = 1" id="1"
-          #item1 [ngClass]="{ active: selectedItem11 == item1.id, txt_primary: true }">1 {{'home.WEEK' | translate}}</a>
-        <a href="JavaScript:void(0);" (click)="
-        piechartreq('', '', '15 days'); selectedItem11 = 2
-          " id="2" #item2 [ngClass]="{ active: selectedItem11 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
-        <a href="JavaScript:void(0);" (click)="
-        piechartreq('', '', '30 days'); selectedItem10 = 3
-          " id="3" #item3 [ngClass]="{ active: selectedItem11 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
-        <a href="JavaScript:void(0);" (click)="
-        piechartreq('', '', '60 days'); selectedItem10 = 4
-          " id="4" #item4 [ngClass]="{ active: selectedItem11 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
-        <a href="JavaScript:void(0);" (click)="
-        piechartreq('', '', '3 months'); selectedItem10 = 5
-          " id="5" #item5 [ngClass]="{ active: selectedItem11 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
-      </div>
-      <div class="explore_all text-right">
-        <a routerLink="/chart/piechart"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
-              class="fa fa-long-arrow-right"></i></span></a>
-      </div>
-    </div>
-  </div> -->
-  
-</div>

src/app/view/home/home-worksapce.component.ts

@@ -9,53 +9,7 @@ import { ChartService } from 'src/app/shared/services/chart.service';
 
 @Component({
   selector: 'epic-explorer-home-worksapce',
-  template: `<div class="body_bg py-4">
-  <div class="chart_section mt-4">
-    <div class="container">
-
-
-    <div class="row mb-3 pb-3">
-    <div class="col-md-12">
-        <div class="text-center detail_div countdownbox d-none">
-          <p class="count mb-0"><span class="">Countdown to Halving</span> {{countDownDate}} <span class="">Blocks to go</span> {{demo}}</p>
-        </div>
-    </div>
-    </div>
-
-    <div class="block_details mb-3">
-  
-    <app-block-detail-list></app-block-detail-list>
-  
-</div>
-
-
-
-      <div class="explore_charts pt-3">
-        <epic-explorer-graph-list
-          [viewchart]="viewchartvar"
-        ></epic-explorer-graph-list>
-      </div>
-    </div>
-    <div
-      *ngIf="viewchartvar"
-      routerLink="/all"
-      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="latest_blocks my-5">
-  <div class="container">
-    <div class="filter_shadow">
-      <epic-explorer-latestblocks></epic-explorer-latestblocks>
-    </div>
-  </div>
-</div>
-  `,
+  templateUrl: './home-workspace.component.html',
   styles: [],
 })
 export class HomeWorksapceComponent extends Utils
@@ -80,19 +34,19 @@ export class HomeWorksapceComponent extends Utils
       this.route.snapshot.data.title,
     );
     
-new Promise((resolve, reject) => {
-  this.chartService
-    .apiGetRequest("", "/blockchain_block/latesblockdetails")
-    .subscribe(
-      res => {
-        if (res["status"] == 200) {
-          this.countDownDate = environment.TARGETBLOCK - res.response.block_height;
-          resolve();
-        }
-      },
-      error => {}
-    );
-});
+// new Promise<void>((resolve, reject) => {
+//   this.chartService
+//     .apiGetRequest("", "/blockchain_block/latesblockdetails")
+//     .subscribe(
+//       res => {
+//         if (res["status"] == 200) {
+//           this.countDownDate = environment.TARGETBLOCK - res.response.block_height;
+//           resolve();
+//         }
+//       },
+//       error => {}
+//     );
+// });
 
     var d1 = new Date ();
     

src/app/view/home/home-workspace.component.html

@@ -0,0 +1,38 @@
+<div class="body_bg">
+  <div class="chart_section">
+    <div class="container">
+      <div class="row ">
+        <div class="col-md-12">
+          <div class="text-center detail_div countdownbox d-none mb-3 pb-3">
+            <p class="count mb-0"><span class="">Countdown to Halving</span> {{countDownDate}} <span class="">Blocks to go</span> {{demo}}</p>
+          </div>
+        </div>
+      </div>
+      <div class="block_details mb-1">
+        <app-block-detail-list></app-block-detail-list>
+      </div>
+      <div class="explore_charts">
+        <epic-explorer-graph-list
+          [viewchart]="viewchartvar"
+        ></epic-explorer-graph-list>
+      </div>
+    </div>
+    <div
+      *ngIf="viewchartvar"
+      routerLink="/all"
+      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 class="container">
+    <div class="filter_shadow">
+      <epic-explorer-latestblocks></epic-explorer-latestblocks>
+    </div>
+  </div>
+</div>
+<!-- <div class="latest_blocks my-5">
+</div> -->
+  

src/app/view/home/home.module.ts

@@ -15,6 +15,7 @@ import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
 import { TransServiceService } from '../../shared/services/trans-service.service';
 import { ChartService} from '../../shared/services/chart.service';
 import { CustomLoader } from 'src/app/app.module';
+import { Ng2OdometerModule } from 'ng2-odometer';
 
 import {NgxPaginationModule} from 'ngx-pagination';
 
@@ -33,6 +34,7 @@ import {NgxPaginationModule} from 'ngx-pagination';
     FormsModule,
     ReactiveFormsModule,
     SharedModule,
+    Ng2OdometerModule,
     TranslateModule.forChild({
       loader: {provide: TranslateLoader, useClass: CustomLoader, deps : [HttpClient]},
   })

src/app/view/home/latestblocks/latestblocks.component.html

@@ -1,6 +1,95 @@
+<div class="row">
+  <div class="col-md-12 margin0auto mb-4">
+    <div class="blockchain_firstrow">
+      <div class="detailsloading" *ngIf="!pool51_currentHeight">
+        <epic-explorer-loading></epic-explorer-loading>
+      </div>
+      <div class="row" *ngIf="pool51_currentHeight">
+        <div class="col-12 drawline">
+          <p class="block_heading mb-1">Mining Pool 
+            <select class="langbut py-2 pr-4 pl-2 miningpoolborder">
+              <option value="Testnet" selected> 51pool </option>
+            </select>
+          <a href="https://51pool.online/" class="text-white pl-3" target="_blank">
+            <i class="fa fa-link goldcolortxt"></i>
+          </a> 
+        </p>
+          <div class="row">
+            <div class="col-md-6 col-6">
+              <div class="row">
+                <div class="col-md-4 drawline">
+                  <p class="subheading">
+                    Cuckoo Hashrate 
+                  </p>
+                  <p class="subvalue smatxtwid">               
+                    {{ pool51_hashrateCuckoo }}
+                    <!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
+                  </p>
+                </div>
+                <div class="col-md-4 drawline">
+                  <p class="subheading">
+                    ProgPow Hashrate 
+                  </p>
+                  <p class="subvalue smatxtwid">               
+                    {{ pool51_hashrateProgPow }}
+                    <!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
+                  </p>
+                </div>
+                <div class="col-md-4 drawline">
+                  <p class="subheading">
+                    RandomX Hashrate 
+                  </p>
+                  <p class="subvalue smatxtwid">               
+                    {{ pool51_hashrateRandomX }}
+                    <!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6 col-6">
+              <div class="row">
+                <div class="col-md-4 drawline">
+                  <p class="subheading">
+                    Online Cuckoo
+                  </p>
+                  <p class="subvalue smatxtwid">               
+                    {{ pool51_onlineCuckoo }}
+                    <!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
+                  </p>
+                </div>
+                <div class="col-md-4 drawline">
+                  <p class="subheading">
+                    Online ProgPow
+                  </p>
+                  <p class="subvalue smatxtwid">               
+                    {{ pool51_onlineProgPow }}
+                    <!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
+                  </p>
+                </div>
+                <div class="col-md-4 drawline">
+                  <p class="subheading">
+                    Online RandomX
+                  </p>
+                  <p class="subvalue smatxtwid">               
+                    {{ pool51_onlineRandomX }}
+                    <!-- <ng2-odometer [number]="CTD_1" [config]="{ }"></ng2-odometer> -->
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 <div class="latest_table">
-  <h2 class="mb-3 chart_heading px-0">{{'home.LATEST_BLOCKS' | translate}}</h2>
-  <div class="mobile_table web_hdng">
+  <div class="col-sm-121">
+  <p class="block_heading">{{'home.LATEST_BLOCKS' | translate}}</p>
+  <div *ngIf="!hashvalues">
+    <epic-explorer-loading></epic-explorer-loading>
+  </div>
+  <div *ngIf="hashvalues" class="mobile_table web_hdng">
 
     <div class="row">
       <div class="col-6 col-md-4 tble_col">
@@ -51,17 +140,22 @@
     </div>
   </div>
   <div #block></div>
+  <div class="tableminheight">
+  <div *ngIf="hashvalues">
   <ng-container *ngFor="let hashvalue of hashvalues">
-  <div *ngIf="hashvalue.target_difficulty_cuckatoo != '0'" [ngClass]="{mobile_table : true, hght_40: item.id != clickValue }"
-    id="hash_{{hashvalue.blockchain_block_height}}" #item >
-
+  <div 
+    *ngIf="hashvalue.target_difficulty_cuckatoo != '0'" 
+    [ngClass]="{mobile_table : true, hght_401: item.id != clickValue, highlighttableData : hashvalue.blockchain_highlight }"
+    id="hash_{{hashvalue.blockchain_block_height}}" 
+    #item 
+  >
     <div class="row">
       <div class="col-6 col-md-3 tble_col ">
-        <div class="block_div mble_hght"> <span *ngIf="item.id != clickValue"
+        <div class="block_div mble_hght"> <!-- <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>
+            class="expnd_blck"><i class="fa fa-minus"></i></span> -->
           <h6>{{'home.HEIGHT' | translate}}</h6><span class="blck_value link_to_detail"
             routerLink="/blockdetail/{{ hashvalue.blockchain_block_height }}">{{ hashvalue.blockchain_block_height }}</span>
         </div>
@@ -119,33 +213,33 @@
     </div>
   </div>
 </ng-container>
-
+</div>
+</div>
 </div>
 
-<div class="explore_all text-right">
+<div class="explore_all text-right" *ngIf="hashvalues">
   <form [formGroup]="paginationForm">
     <div class="d-inline-block float-left mt-2">
       <span>{{'home.BLOCKS_PER_PAGE' | translate}}:</span>&nbsp;&nbsp;
       <div class="item_select d-inline-block position-relative">
         <select class="" formControlName="pagesize"
-          (change)="gettinghashList(pagedata.currentPage, $event.target.value)">
+          (change)="gettinghashListFunc(pagedata.currentPage, $event.target.value)">
+          <option value="10">10</option>
           <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)
+        gettinghashListFunc(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(
+        gettinghashListFunc(
           pagedata.currentPage - 1,
           paginationForm.value.pagesize
         )
@@ -156,7 +250,7 @@
         <a class="page-link">{{ pagedata.currentPage }} / {{ pagedata.totalPages }}</a>
       </li>
       <li class="page-item" (click)="
-          gettinghashList(
+        gettinghashListFunc(
           pagedata.currentPage + 1,
           paginationForm.value.pagesize
         )
@@ -164,15 +258,16 @@
         <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)
+        gettinghashListFunc(pagedata.totalPages, paginationForm.value.pagesize)
       ">
         <a class="page-link"><i class="fa fa-angle-double-right"></i></a>
       </li>
     </ul>
   </form>
   </div>
+</div>
 
-<div class="latest_table mt-3">
+<!-- <div class="latest_table mt-3">
   <h2 class="mb-3 chart_heading px-0 d-inline-block">Peers  
     <span *ngIf="peers && peers.length > 0" class="txn_count txn_peers" >{{
       peers.length | number
@@ -217,38 +312,6 @@
           </div>
         </div>
 
-    <!-- <div class="row">
-      <div class="col-6 col-md-4 tble_col">
-        <div class="block_div">
-          <h5 class="mb-0">{{'home.CAPABILITIES' | translate}}</h5>
-        </div>
-      </div>
-      <div class="col-6 col-md-4 tble_col">
-        <div class="block_div">
-          <h5 class="mb-0">{{'home.USER_AGENT' | translate}}</h5>
-        </div>
-      </div>
-      <div class="col-6 col-md-4 tble_col">
-        <div class="block_div">
-          <h5 class="mb-0">{{'home.VERSION' | translate}}</h5>
-        </div>
-      </div>
-      <div class="col-6 col-md-4 tble_col">
-        <div class="block_div">
-          <h5 class="mb-0">{{'home.ADDR' | translate}}</h5>
-        </div>
-      </div>
-      <div class="col-7 col-sm-6 col-md-4 tble_col">
-        <div class="block_div">
-          <h5 class="mb-0">{{'home.DIRECTION' | translate}}</h5>
-        </div>
-      </div>
-      <div class="col-5 col-sm-6 col-md-4 tble_col">
-        <div class="block_div">
-          <h5 class="mb-0">{{'home.TOTAL_DIFFICULTY' | translate}}</h5>
-        </div>
-      </div>
-    </div> -->
   </div>
   <div [ngClass]="{peer_mobile_table : true, hght_40: peeritem.id != clickPeer }" id="peer_{{peer.id}}"  #peeritem *ngFor="let peer of peers | paginate: { itemsPerPage: 10, currentPage: p }">
 
@@ -302,4 +365,4 @@
 </div>
 
 
-</div>
+</div> -->

src/app/view/home/latestblocks/latestblocks.component.ts

@@ -31,9 +31,21 @@ export class LatestblocksComponent implements OnInit {
   public beforeClick: boolean = false;
   public clickonMobile: boolean = true;
   public peers: any;
+  first = true;
+  currentBlockHeight;
+  apiBlockInterval;
+  CurrentPage;
+  PageSize;
+  pool51_hashrateCuckoo;
+  pool51_hashrateProgPow;
+  pool51_hashrateRandomX;
+  pool51_onlineCuckoo;
+  pool51_onlineProgPow;
+  pool51_onlineRandomX;
+  pool51_currentHeight;
 
   paginationForm = new FormGroup({
-    pagesize: new FormControl(20),
+    pagesize: new FormControl(10),
   });
 
   @ViewChild('block', { read: ViewContainerRef,static: true }) block: ViewContainerRef;
@@ -42,12 +54,70 @@ export class LatestblocksComponent implements OnInit {
   constructor(private chartService: ChartService,public translate: TransServiceService,public http: HttpClient, private resolver: ComponentFactoryResolver) {}
 
   ngOnInit() {
-    this. getpeersList();
-    this.gettinghashList(1, 20);
-    this.getLastCeatedBlock();
+    // this. getpeersList();
+    this.gettinghashList(1, 10, this.first);
+    // this.getLastCeatedBlock();
+    this.get51poolAPI();
   }
 
-  public gettinghashList(CurrentPage, PageSize) {
+  ngAfterViewInit() {
+    this.apiBlockInterval = setInterval(() => {
+      console.log('getLastCeatedBlock called');
+      this.get51poolAPI();
+      // let current_page = localStorage.getItem('CurrentPage');
+      // let page_size = localStorage.getItem('PageSize');
+      let current_page = this.CurrentPage;
+      let page_size = this.PageSize;
+      if( current_page && page_size){
+        this.gettinghashList(current_page, page_size);
+      }else{
+        this.gettinghashList(1, 10);
+      }
+    }, 60 * 1000);
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.apiBlockInterval);
+  }
+
+  public get51poolAPI() {
+    return new Promise<void>((resolve, reject) => {
+      this.chartService.apiGetRequest('','/blockchain_block/get51poolapi').subscribe(
+        res => {
+          // console.log('get51poolAPI');
+          console.log(res);
+          if (res['status'] == 200) {
+            let json = res.response;
+            // console.log(json.data);
+            let poolStats = json.data.poolStats;
+            this.pool51_hashrateCuckoo = poolStats.hashrateCuckoo;
+            this.pool51_hashrateProgPow = poolStats.hashrateProgPow;
+            this.pool51_hashrateRandomX = poolStats.hashrateRandomX;
+            this.pool51_onlineCuckoo = poolStats.onlineCuckoo;
+            this.pool51_onlineProgPow = poolStats.onlineProgPow;
+            this.pool51_onlineRandomX = poolStats.onlineRandomX;
+            this.pool51_currentHeight = poolStats.currentHeight;
+          }
+        },
+        error => {},
+      );
+    });
+  }
+
+  public gettinghashListFunc(currentPage,pagesize){
+    this.hashvalues = "";
+    this.gettinghashList(
+      currentPage,
+      pagesize
+    )
+  }
+
+  public gettinghashList(CurrentPage, PageSize, first = false) {
+    console.log(CurrentPage, PageSize,this.first);
+    this.CurrentPage = CurrentPage;
+    this.PageSize = PageSize;
+    // localStorage.setItem('CurrentPage',CurrentPage);
+    // localStorage.setItem('PageSize',PageSize);
     let params = new HttpParams();
     this.CurrentpageNumber = CurrentPage;
     params = params.append('CurrentPage', CurrentPage);
@@ -56,6 +126,24 @@ export class LatestblocksComponent implements OnInit {
       res => {
         if (res['status'] == 200) {
           this.pagedata = res.response;
+          if(this.first){
+            console.log('init gettinghashList');
+            res.response.BlockchainBlockResult.shift();
+            this.currentBlockHeight = res.response.BlockchainBlockResult[0].blockchain_block_height;
+            this.first = false;
+            // console.log("this.currentBlockHeight-"+this.currentBlockHeight);
+          }else{
+            console.log('multi gettinghashList');
+            if(this.currentBlockHeight && res.response.BlockchainBlockResult[0].blockchain_block_height){
+              if(res.response.BlockchainBlockResult[0].blockchain_block_height > this.currentBlockHeight){
+                let sizediff = res.response.BlockchainBlockResult[0].blockchain_block_height - this.currentBlockHeight;
+                res.response.BlockchainBlockResult[0].blockchain_highlight = true;
+                console.log(sizediff);
+              }
+            }
+          }
+          // console.log('datas');
+          // console.log(res.response.BlockchainBlockResult);
           this.hashvalues = res.response.BlockchainBlockResult;
           if(CurrentPage == 1){
             this.FirstPageListData = res.response.BlockchainBlockResult;
@@ -71,6 +159,7 @@ export class LatestblocksComponent implements OnInit {
     );
   }
 
+  /*
   getLastCeatedBlock() {
     this.chartService.getLatestblockdetails().subscribe(response => {
       this.blockdetails = response;
@@ -98,6 +187,7 @@ export class LatestblocksComponent implements OnInit {
       this.lastblock = this.blockdetails.block_height;
     });
   }
+  */
 
   public comparer(otherArray){
     return function(current){

src/assets/css/OpenLayers/style.css

@@ -0,0 +1,516 @@
+div.olMap {
+    z-index: 0;
+    padding: 0 !important;
+    margin: 0 !important;
+    cursor: default;
+}
+
+div.olMapViewport {
+    text-align: left;
+    -ms-touch-action: none;
+}
+
+div.olLayerDiv {
+   -moz-user-select: none;
+   -khtml-user-select: none;
+}
+
+.olLayerGoogleCopyright {
+    left: 2px;
+    bottom: 2px;
+}
+.olLayerGoogleV3.olLayerGoogleCopyright {
+    right: auto !important;
+}
+.olLayerGooglePoweredBy {
+    left: 2px;
+    bottom: 15px;
+}
+.olLayerGoogleV3.olLayerGooglePoweredBy {
+    bottom: 15px !important;
+}
+/* GMaps should not set styles on its container */
+.olForeignContainer {
+    opacity: 1 !important;
+}
+.olControlAttribution {
+    font-size: smaller;
+    right: 3px;
+    bottom: 4.5em;
+    position: absolute;
+    display: block;
+}
+.olControlScale {
+    right: 3px;
+    bottom: 3em;
+    display: block;
+    position: absolute;
+    font-size: smaller;
+}
+.olControlScaleLine {
+   display: block;
+   position: absolute;
+   left: 10px;
+   bottom: 15px;
+   font-size: xx-small;
+}
+.olControlScaleLineBottom {
+   border: solid 2px black;
+   border-bottom: none;
+   margin-top:-2px;
+   text-align: center;
+}
+.olControlScaleLineTop {
+   border: solid 2px black;
+   border-top: none;
+   text-align: center;
+}
+
+.olControlPermalink {
+    right: 3px;
+    bottom: 1.5em;
+    display: block;
+    position: absolute;
+    font-size: smaller;
+}
+
+div.olControlMousePosition {
+    bottom: 0;
+    right: 3px;
+    display: block;
+    position: absolute;
+    font-family: Arial;
+    font-size: smaller;
+}
+
+.olControlOverviewMapContainer {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+.olControlOverviewMapElement {
+    padding: 10px 18px 10px 10px;
+    background-color: #00008B;
+    -moz-border-radius: 1em 0 0 0;
+}
+
+.olControlOverviewMapMinimizeButton,
+.olControlOverviewMapMaximizeButton {
+    height: 18px;
+    width: 18px;
+    right: 0;
+    bottom: 80px;
+    cursor: pointer;
+}
+
+.olControlOverviewMapExtentRectangle {
+    overflow: hidden;
+    background-image: url("src/assets/img/blank.gif");
+    cursor: move;
+    border: 2px dotted red;
+}
+.olControlOverviewMapRectReplacement {
+    overflow: hidden;
+    cursor: move;
+    /* background-image: url("img/overview_replacement.gif"); */
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.olLayerGeoRSSDescription {
+    float:left;
+    width:100%;
+    overflow:auto;
+    font-size:1.0em;
+}
+.olLayerGeoRSSClose {
+    float:right;
+    color:gray;
+    font-size:1.2em;
+    margin-right:6px;
+    font-family:sans-serif;
+}
+.olLayerGeoRSSTitle {
+    float:left;font-size:1.2em;
+}
+
+.olPopupContent {
+    padding:5px;
+    overflow: auto;
+}
+
+.olControlNavigationHistory {
+   /* background-image: url("img/navigation_history.png"); */
+   background-repeat: no-repeat;
+   width:  24px;
+   height: 24px;
+
+}
+.olControlNavigationHistoryPreviousItemActive {
+  background-position: 0 0;
+}
+.olControlNavigationHistoryPreviousItemInactive {
+   background-position: 0 -24px;
+}
+.olControlNavigationHistoryNextItemActive {
+   background-position: -24px 0;
+}
+.olControlNavigationHistoryNextItemInactive {
+   background-position: -24px -24px;
+}
+
+div.olControlSaveFeaturesItemActive {
+    /* background-image: url(img/save_features_on.png); */
+    background-repeat: no-repeat;
+    background-position: 0 1px;
+}
+div.olControlSaveFeaturesItemInactive {
+    /* background-image: url(img/save_features_off.png); */
+    background-repeat: no-repeat;
+    background-position: 0 1px;
+}
+
+.olHandlerBoxZoomBox {
+    border: 2px solid red;
+    position: absolute;
+    background-color: white;
+    opacity: 0.50;
+    font-size: 1px;
+    filter: alpha(opacity=50);
+}
+.olHandlerBoxSelectFeature {
+    border: 2px solid blue;
+    position: absolute;
+    background-color: white;
+    opacity: 0.50;
+    font-size: 1px;
+    filter: alpha(opacity=50);
+}
+
+.olControlPanPanel {
+    top: 10px;
+    left: 5px;
+}
+
+.olControlPanPanel div {
+    /* background-image: url(img/pan-panel.png); */
+    height: 18px;
+    width: 18px;
+    cursor: pointer;
+    position: absolute;
+}
+
+.olControlPanPanel .olControlPanNorthItemInactive {
+    top: 0;
+    left: 9px;
+    background-position: 0 0;
+}
+.olControlPanPanel .olControlPanSouthItemInactive {
+    top: 36px;
+    left: 9px;
+    background-position: 18px 0;
+}
+.olControlPanPanel .olControlPanWestItemInactive {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    background-position: 0 18px;
+}
+.olControlPanPanel .olControlPanEastItemInactive {
+    top: 18px;
+    left: 18px;
+    background-position: 18px 18px;
+}
+
+.olControlZoomPanel {
+    top: 71px;
+    left: 14px;
+}
+
+.olControlZoomPanel div {
+    /* background-image: url(img/zoom-panel.png); */
+    position: absolute;
+    height: 18px;
+    width: 18px;
+    cursor: pointer;
+}
+
+.olControlZoomPanel .olControlZoomInItemInactive {
+    top: 0;
+    left: 0;
+    background-position: 0 0;
+}
+
+.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
+    top: 18px;
+    left: 0;
+    background-position: 0 -18px;
+}
+
+.olControlZoomPanel .olControlZoomOutItemInactive {
+    top: 36px;
+    left: 0;
+    background-position: 0 18px;
+}
+
+/*
+ * When a potential text is bigger than the image it move the image
+ * with some headers (closes #3154)
+ */
+.olControlPanZoomBar div {
+    font-size: 1px;
+}
+
+.olPopupCloseBox {
+  /* background: url("img/close.gif") no-repeat; */
+  cursor: pointer;
+}
+
+.olFramedCloudPopupContent {
+    padding: 5px;
+    overflow: auto;
+}
+
+.olControlNoSelect {
+ -moz-user-select: none;
+ -khtml-user-select: none;
+}
+
+.olImageLoadError {
+    background-color: pink;
+    opacity: 0.5;
+    filter: alpha(opacity=50); /* IE */
+}
+
+/**
+ * Cursor styles
+ */
+
+.olCursorWait {
+    cursor: wait;
+}
+.olDragDown {
+    cursor: move;
+}
+.olDrawBox {
+    cursor: crosshair;
+}
+.olControlDragFeatureOver {
+    cursor: move;
+}
+.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
+    cursor: -moz-grabbing;
+}
+
+/**
+ * Layer switcher
+ */
+.olControlLayerSwitcher {
+    position: absolute;
+    top: 25px;
+    right: 0;
+    width: 20em;
+    font-family: sans-serif;
+    font-weight: bold;
+    margin-top: 3px;
+    margin-left: 3px;
+    margin-bottom: 3px;
+    font-size: smaller;
+    color: white;
+    background-color: transparent;
+}
+
+.olControlLayerSwitcher .layersDiv {
+    padding-top: 5px;
+    padding-left: 10px;
+    padding-bottom: 5px;
+    padding-right: 10px;
+    background-color: darkblue;
+}
+
+.olControlLayerSwitcher .layersDiv .baseLbl,
+.olControlLayerSwitcher .layersDiv .dataLbl {
+    margin-top: 3px;
+    margin-left: 3px;
+    margin-bottom: 3px;
+}
+
+.olControlLayerSwitcher .layersDiv .baseLayersDiv,
+.olControlLayerSwitcher .layersDiv .dataLayersDiv {
+    padding-left: 10px;
+}
+
+.olControlLayerSwitcher .maximizeDiv,
+.olControlLayerSwitcher .minimizeDiv {
+    width: 18px;
+    height: 18px;
+    top: 5px;
+    right: 0;
+    cursor: pointer;
+}
+
+.olBingAttribution {
+    color: #DDD;
+}
+.olBingAttribution.road {
+    color: #333;
+}
+
+.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite {
+    color: #EEE;
+}
+.olGoogleAttribution {
+    color: #333;
+}
+span.olGoogleAttribution a {
+    color: #77C;
+}
+span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
+    color: #EEE;
+}
+
+/**
+ * Editing and navigation icons.
+ * (using the editing_tool_bar.png sprint image)
+ */
+.olControlNavToolbar ,
+.olControlEditingToolbar {
+    margin: 5px 5px 0 0;
+}
+.olControlNavToolbar div,
+.olControlEditingToolbar div {
+    /* background-image: url("img/editing_tool_bar.png"); */
+    background-repeat: no-repeat;
+    margin: 0 0 5px 5px;
+    width: 24px;
+    height: 22px;
+    cursor: pointer
+}
+/* positions */
+.olControlEditingToolbar {
+    right: 0;
+    top: 0;
+}
+.olControlNavToolbar {
+    top: 295px;
+    left: 9px;
+}
+/* layouts */
+.olControlEditingToolbar div {
+    float: right;
+}
+/* individual controls */
+.olControlNavToolbar .olControlNavigationItemInactive,
+.olControlEditingToolbar .olControlNavigationItemInactive {
+    background-position: -103px -1px;
+}
+.olControlNavToolbar .olControlNavigationItemActive ,
+.olControlEditingToolbar .olControlNavigationItemActive  {
+    background-position: -103px -24px;
+}
+.olControlNavToolbar .olControlZoomBoxItemInactive {
+    background-position: -128px -1px;
+}
+.olControlNavToolbar .olControlZoomBoxItemActive  {
+    background-position: -128px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePointItemInactive {
+    background-position: -77px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePointItemActive {
+    background-position: -77px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePathItemInactive {
+    background-position: -51px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePathItemActive {
+    background-position: -51px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{
+    background-position: -26px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
+    background-position: -26px -24px;
+}
+
+div.olControlZoom {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    background: rgba(255,255,255,0.4);
+    border-radius: 4px;
+    padding: 2px;
+}
+div.olControlZoom a {
+    display: block;
+    margin: 1px;
+    padding: 0;
+    color: white;
+    font-size: 18px;
+    font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    text-decoration: none;
+    text-align: center;
+    height: 22px;
+    width:22px;
+    line-height: 19px;
+    background: #130085; /* fallback for IE - IE6 requires background shorthand*/
+    background: rgba(0, 60, 136, 0.5);
+    filter: alpha(opacity=80);
+}
+div.olControlZoom a:hover {
+    background: #130085; /* fallback for IE */
+    background: rgba(0, 60, 136, 0.7);
+    filter: alpha(opacity=100);
+}
+@media only screen and (max-width: 600px) {
+    div.olControlZoom a:hover {
+        background: rgba(0, 60, 136, 0.5);
+    }
+}
+a.olControlZoomIn {
+    border-radius: 4px 4px 0 0;
+}
+a.olControlZoomOut {
+    border-radius: 0 0 4px 4px;
+}
+
+
+/**
+ * Animations
+ */
+
+.olLayerGrid .olTileImage {
+    -webkit-transition: opacity 0.2s linear;
+    -moz-transition: opacity 0.2s linear;
+    -o-transition: opacity 0.2s linear;
+    transition: opacity 0.2s linear;
+}
+
+/* Turn on GPU support where available */
+.olTileImage {
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -o-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-perspective: 1000;
+    -moz-perspective: 1000;
+    -ms-perspective: 1000;
+    perspective: 1000;
+}
+
+/* when replacing tiles, do not show tile and backbuffer at the same time */
+.olTileReplacing {
+    display: none;
+}
+
+/* override any max-width image settings (e.g. bootstrap.css) */
+img.olTileImage {
+    max-width: none;
+}

src/assets/css/ol.css

@@ -0,0 +1,282 @@
+.ol-box {
+  box-sizing: border-box;
+  border-radius: 2px;
+  border: 2px solid blue;
+}
+
+.ol-mouse-position {
+  top: 8px;
+  right: 8px;
+  position: absolute;
+}
+
+.ol-scale-line {
+  background: rgba(0,60,136,0.3);
+  border-radius: 4px;
+  bottom: 8px;
+  left: 8px;
+  padding: 2px;
+  position: absolute;
+}
+.ol-scale-line-inner {
+  border: 1px solid #eee;
+  border-top: none;
+  color: #eee;
+  font-size: 10px;
+  text-align: center;
+  margin: 1px;
+  will-change: contents, width;
+  transition: all 0.25s;
+}
+.ol-scale-bar {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+}
+.ol-scale-step-marker {
+  width: 1px;
+  height: 15px;
+  background-color: #000000;
+  float: right;
+  z-Index: 10;
+}
+.ol-scale-step-text {
+  position: absolute;
+  bottom: -5px;
+  font-size: 12px;
+  z-Index: 11;
+  color: #000000;
+  text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;
+}
+.ol-scale-text {
+  position: absolute;
+  font-size: 14px;
+  text-align: center;
+  bottom: 25px;
+  color: #000000;
+  text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;
+}
+.ol-scale-singlebar {
+  position: relative;
+  height: 10px;
+  z-Index: 9;
+  border: 1px solid black;
+}
+
+.ol-unsupported {
+  display: none;
+}
+.ol-viewport, .ol-unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+.ol-overlaycontainer, .ol-overlaycontainer-stopevent {
+  pointer-events: none;
+}
+.ol-overlaycontainer > *, .ol-overlaycontainer-stopevent > * {
+  pointer-events: auto;
+}
+.ol-selectable {
+  -webkit-touch-callout: default;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+.ol-grabbing {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+.ol-grab {
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+}
+.ol-control {
+  position: absolute;
+  background-color: rgba(255,255,255,0.4);
+  border-radius: 4px;
+  padding: 2px;
+}
+.ol-control:hover {
+  background-color: rgba(255,255,255,0.6);
+}
+.ol-zoom {
+  top: .5em;
+  left: .5em;
+}
+.ol-rotate {
+  top: .5em;
+  right: .5em;
+  transition: opacity .25s linear, visibility 0s linear;
+}
+.ol-rotate.ol-hidden {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity .25s linear, visibility 0s linear .25s;
+}
+.ol-zoom-extent {
+  top: 4.643em;
+  left: .5em;
+}
+.ol-full-screen {
+  right: .5em;
+  top: .5em;
+}
+
+.ol-control button {
+  display: block;
+  margin: 1px;
+  padding: 0;
+  color: white;
+  font-size: 1.14em;
+  font-weight: bold;
+  text-decoration: none;
+  text-align: center;
+  height: 1.375em;
+  width: 1.375em;
+  line-height: .4em;
+  background-color: rgba(0,60,136,0.5);
+  border: none;
+  border-radius: 2px;
+}
+.ol-control button::-moz-focus-inner {
+  border: none;
+  padding: 0;
+}
+.ol-control button span {
+  pointer-events: none;
+}
+.ol-zoom-extent button {
+  line-height: 1.4em;
+}
+.ol-compass {
+  display: block;
+  font-weight: normal;
+  font-size: 1.2em;
+  will-change: transform;
+}
+.ol-touch .ol-control button {
+  font-size: 1.5em;
+}
+.ol-touch .ol-zoom-extent {
+  top: 5.5em;
+}
+.ol-control button:hover,
+.ol-control button:focus {
+  text-decoration: none;
+  background-color: rgba(0,60,136,0.7);
+}
+.ol-zoom .ol-zoom-in {
+  border-radius: 2px 2px 0 0;
+}
+.ol-zoom .ol-zoom-out {
+  border-radius: 0 0 2px 2px;
+}
+
+
+.ol-attribution {
+  text-align: right;
+  bottom: .5em;
+  right: .5em;
+  max-width: calc(100% - 1.3em);
+}
+
+.ol-attribution ul {
+  margin: 0;
+  padding: 0 .5em;
+  color: #000;
+  text-shadow: 0 0 2px #fff;
+}
+.ol-attribution li {
+  display: inline;
+  list-style: none;
+}
+.ol-attribution li:not(:last-child):after {
+  content: " ";
+}
+.ol-attribution img {
+  max-height: 2em;
+  max-width: inherit;
+  vertical-align: middle;
+}
+.ol-attribution ul, .ol-attribution button {
+  display: inline-block;
+}
+.ol-attribution.ol-collapsed ul {
+  display: none;
+}
+.ol-attribution:not(.ol-collapsed) {
+  background: rgba(255,255,255,0.8);
+}
+.ol-attribution.ol-uncollapsible {
+  bottom: 0;
+  right: 0;
+  border-radius: 4px 0 0;
+}
+.ol-attribution.ol-uncollapsible img {
+  margin-top: -.2em;
+  max-height: 1.6em;
+}
+.ol-attribution.ol-uncollapsible button {
+  display: none;
+}
+
+.ol-zoomslider {
+  top: 4.5em;
+  left: .5em;
+  height: 200px;
+}
+.ol-zoomslider button {
+  position: relative;
+  height: 10px;
+}
+
+.ol-touch .ol-zoomslider {
+  top: 5.5em;
+}
+
+.ol-overviewmap {
+  left: 0.5em;
+  bottom: 0.5em;
+}
+.ol-overviewmap.ol-uncollapsible {
+  bottom: 0;
+  left: 0;
+  border-radius: 0 4px 0 0;
+}
+.ol-overviewmap .ol-overviewmap-map,
+.ol-overviewmap button {
+  display: inline-block;
+}
+.ol-overviewmap .ol-overviewmap-map {
+  border: 1px solid #7b98bc;
+  height: 150px;
+  margin: 2px;
+  width: 150px;
+}
+.ol-overviewmap:not(.ol-collapsed) button{
+  bottom: 1px;
+  left: 2px;
+  position: absolute;
+}
+.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
+.ol-overviewmap.ol-uncollapsible button {
+  display: none;
+}
+.ol-overviewmap:not(.ol-collapsed) {
+  background: rgba(255,255,255,0.8);
+}
+.ol-overviewmap-box {
+  border: 2px dotted rgba(0,60,136,0.7);
+}
+
+.ol-overviewmap .ol-overviewmap-box:hover {
+  cursor: move;
+}

src/assets/css/responsive.css

@@ -1,5 +1,5 @@
 @media(min-width: 992px){
-    .block_div {min-width: 110px; text-align: center;padding: .75rem; }
+.block_div {min-width: 108px; text-align: center;padding: .75rem; }
 /* .block_div.inp_div{min-width: 100px;} */
 .block_div.targ_div{min-width: 200px;}
 .block_div.targ_div_hdng{min-width: 180px; text-align: left;padding-left: 30px;}
@@ -7,8 +7,9 @@
 .block_div.addr_hdng{min-width: 140px;}
 .block_div.peers_diff_hdng{min-width: 375px;}
 .peer_table .block_div{/*min-width: 148px;*/  text-align: center;}
-    .mobile_table{border-bottom: 1px solid #dee2e6; padding: 0 15px;display: table;  width: 100%;}
-    .view_moble_tble{border-bottom: 1px solid #dee2e6;}
+.mobile_table{border-bottom: 1px solid #dee2e6; padding: 0 15px;display: table;  width: 100%; border-radius: 10px;}
+.dark_theme .mobile_table{border-bottom: 1px solid #18181c;}
+.view_moble_tble{border-bottom-color:  #17171b;}
 .mobile_table .row, .row.peer_table_data{display: table;}
 .mobile_table .tble_col, .peer_table_data .col-md-3{padding: 0;display: table-cell;  max-width: unset;  flex: unset; width: auto;}
 .mobile_table h6, .view_moble_tble h6, .peer_mobile_table h6{display: none;}
@@ -26,6 +27,9 @@
 .ftr_links{padding-left: 0px;}
 .ftr_links::before{content: '|'; }
 .footer_div{font-size: 12px;}
+p.block_value{ font-size: 40px;}
+p.block_value_v2 {font-size: 30px;height: 35px;}
+.bc_sixcls .col-md-3, .bc_sixcls .col-md-5, .bc_sixcls .col-md-4 {flex: 0 0 50%;max-width: 50%;}
 }
 @media (min-width: 992px) and (max-width: 1199px){
 .detail_div .count{font-size: 20px;}
@@ -42,6 +46,12 @@
 
 }
 @media (min-width: 768px) and (max-width: 991px){
+.lgtxtwid .odometer-digit .odometer-value {
+    width: 20px;
+}
+.medtxtwid .odometer-digit .odometer-value {
+    width: 14px;
+}
 .detail_div{padding: 10px 0;}
 .detail_div .count{font-size: 20px;}
 .detail_div .desc{font-size: 13px;}
@@ -58,16 +68,37 @@
 .web_hdng{display: none;}
 .mobile_table, .peer_mobile_table{padding: 10px 0;padding-left: 30px;}
 /* .view_moble_tble .col-md-4{padding: 0;} */
-    .mobile_table h6, .view_moble_tble h6, .peer_mobile_table h6{color: #0091ff; font-size: 13px; display: inline-block;}
+.mobile_table h6, .view_moble_tble h6, .peer_mobile_table h6{color: #434542; font-size: 13px; display: inline-block;}
 .mobile_table span.blck_value, .view_moble_tble span.blck_value,  .peer_mobile_table span.blck_value{font-size: 13px;}
 .mobile_table span.blck_value::before, .view_moble_tble span.blck_value::before,  .peer_mobile_table 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: -8px;  top: 5px; display: inline-block;}
 .mble_hght{padding-left: 8px;}
 .peer_mobile_table .expnd_blck{left: -8px;}
-    
+/* .blockchain_firstrow .col-md-3, .blockchain_firstrow .col-md-5, .blockchain_firstrow .col-md-4 {flex: 0 0 50%;max-width: 50%;} */
+p.block_value {font-size: 35px;}
+p.block_value_v2 { font-size: 25px; height: 30px;}
+p.block_heading, p.subheading{font-size: 12px;}
+.body_bg, .view_content{padding-top: 75px;}
+.navbar-nav{ flex-direction: row;}
+.navbar-brand{ width: 85px;}
+.navbar-brand img{ max-width: 100%; height: auto;}
+.yrvsel {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0px 1rem;}
+.yrvsel .small {margin-bottom: 5px; font-size: 10px; font-weight: normal; position: relative; z-index: 1;}
+.yrvsel select{ margin: -13px 0px 0px 0px; position: relative;}
+.epbbox .epicprice { white-space: nowrap;font-size: 20px !important;}
 }
 @media(max-width:767px){
+.lgtxtwid .odometer-digit .odometer-value {
+    width: 15px;
+}
+.medtxtwid .odometer-digit .odometer-value {
+    width: 9px;
+}
+.targetandhashrate .drawline {
+    padding-left: 5px;
+    padding-right: 5px;
+}
 .day_filter a{margin: 0 4px; font-size: 11px;}
 .chart_heading{font-size: 19px;}
 .txn_count{font-size: 12px;}
@@ -80,18 +111,21 @@
 .view_txt{font-size: 15px;}
 .ytitle, .y2tick, .y3tick, .ytick, .y2title, .y3title, .xtitle, .xtick{font-size: 11px !important}
 .chart_section.mt-4{margin-top: 0px !important;}
-    .logo_img{height: 50px;}
+/* .logo_img{height: 50px;} */
 .ngx-pagination li{display: none !important;}
 .ngx-pagination li.pagination-previous{display: inline-block !important;}
 .ngx-pagination li.pagination-next{display: inline-block !important;}
 .hashdata_table td{border: 1px solid #a6a6a6;}
 .body_bg.py-4{padding-top: 0px !important}
 .block_details.mb-5{margin-bottom: 0px !important}
-
+.bc_sixcls .col-md-3, .bc_sixcls .col-md-5, .bc_sixcls .col-md-4 {flex: 0 0 33.33%; max-width: 33.33%;}
+.drawline::after, .drawline::before{ display: none;}
+.bc_sixcls .col-md-6:not(:last-child) { margin-bottom: 30px;}
+epic-explorer-search{ margin-top: 10px;}
 }
 @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%;}
+.view_page_header .ml-auto{margin: 0 !important; display: inherit;}
 .mble_view_hdr{margin-left: auto;}
 .mble_view_hdr .nav-item{font-size: 13px;}
 .mble_view_hdr .flag{width: 20px; height: 20px;}
@@ -102,6 +136,16 @@
 /* .home_mble_hdr .navbar-nav{margin: 15px auto 0; width: 100%;} */
 .home_tst_net{font-size: 15px;  text-align: center;}
 .navbar-nav{justify-content: center;}
+.navbar-light .navbar-nav .nav-link{ font-size: 13px; padding: .5rem;}
+.yrvsel{padding: 0px 0.5rem;}
+.langbut{ font-size: 13px;}
+.mble_view_hdr select.langbut{white-space: nowrap;width: 57px;text-transform: uppercase; margin: 0px !important;}
+.bc_sixcls .col-md-6 .row {flex-wrap: nowrap;overflow-x: auto; }
+.bc_sixcls .col-md-3, .bc_sixcls .col-md-5, .bc_sixcls .col-md-4 { flex: 0 0 45%;max-width: 45%;}
+p.block_value {font-size: 25px;}
+p.block_value_v2 {font-size: 18px;height: 25px;}
+.blockchain_firstrow .row .col-md-6 .row .col-6{ margin-bottom: 30px;}
+.epbbox{ justify-content: center;}
 }
 @media(max-width: 588px){
 /* .view_page_header{text-align: center;} */
@@ -110,6 +154,13 @@
 }
 @media(max-width: 470px){
 .navbar-expand .navbar-collapse.home_mble_hdr{display: block !important;} 
+/* .mble_view_hdr {position: fixed; bottom: -50px;right: 25px;} */
+.mble_view_hdr{ display: none !important;}
+.body_bg, .view_content {padding-top: 75px;}
+.navbar{ padding: .5rem 5px;}
+.blockchain_firstrow .row .col-md-6 .row .col-6{ flex: 0 0 100%;max-width: 100%; text-align: center;}
+.mble_view_hdr.mobfix {display: block !important;position: fixed;bottom: 20px;right: 20px;}
+.privacy_txt { width: 190px;margin: 0px auto !important;}
 }
 @media(max-width: 365px){
 .mobile_table .col-6 {flex: 0 0 100%;max-width: 100%;}

src/assets/css/style.css

@@ -12,9 +12,9 @@
 html, body{height: 100%;}
 body {
   font-family: 'Bahnschrift';
-  color: #686868;
+  color: #333;
   letter-spacing: 0.5px;
-  background: url(/assets/img/body_bg1.png);
+  background: url(/assets/img/light-bg.png) no-repeat fixed center;  
 }
 .search {
   max-width: 75%;
@@ -26,7 +26,13 @@ a:focus {
   text-decoration: none;
   outline: none;
 }
+.form-control{transition: all ease 0.75s;}
+.form-control:focus {color: #495057;background-color: #fff;border-color: #fff;outline: 0;box-shadow: 0 0 0px .2rem rgba(236, 197, 81, 0.2);}
+.dark_theme .form-control:focus {color: #495057;border-color: #4f4e4d;outline: 0;box-shadow: 0 0 0px .2rem rgba(236, 197, 81, 0.2);}
 .langbut option:disabled{background-color: #f7f7f9; color: rgba(0,0,0,.2) }
+select.langbut{ background-image: url('../img/down-arrow.png'); background-repeat: no-repeat; background-position:93% center; background-size: 12px}
+
+.navbar-brand{ margin-right: 0px;}
 
 @media (min-width: 1200px) {
   .container {
@@ -131,6 +137,7 @@ a:focus {
     transform: rotate(360deg);
   }
 }
+.nav-item { font-size: 15px; display: flex; align-items: center;}
 .nav-item.dropdown.bg-white{background-color: #dadada !important;}
 /************************************************texts*****************************************/
 .txt_primary {
@@ -159,9 +166,9 @@ a:focus {
 }
 /*******************************************Button**********************************************/
 .theme_switch {
-  background: #dadada;
+  background: #fff;
   border: none;
-  margin-left: 14px;
+  margin-left: 0;
   border-radius: 0px;
 }
 .light_theme_display {
@@ -188,20 +195,25 @@ a:focus {
   /* margin-right: 5px; */
 }
 .headerbg {
-  background: url(/assets/img/body_bg.png);
+  /* background: url(/assets/img/body_bg.png); */
   overflow: hidden;
-  background-position-y: -22%;}
-.body_bg {
-  background: url(/assets/img/body_bg.png);
-  background-position-y: -22%;
+  /* background-position-y: -22%; */
+}
+.body_bg, .view_content{
+  /* background: url(/assets/img/body_bg.png); */
+  /* background-position-y: -22%; */
+  padding-top: 100px;
 }
 .search_input {
-  border-radius: 25px;
-  padding: 15px;
-  padding-right: 45px;
+  padding: 30px;
+  padding-right: 65px;
   height: 45px;
   border: none;
-  background-color: #f3f4f2;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 40px;
+  border: 1px solid #fff;
+  backdrop-filter: blur(10px);
+  box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
 }
 .bg_gray{background-color: #dadada ;}
 .search_btn {
@@ -210,18 +222,10 @@ a:focus {
   right: 10px;
   color: #BF9B30;
 }
-.blocks {
-  background: #f3f4f2;
-  padding: 10px;
-}
 .box_shadow {
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+  /* box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
   overflow: hidden;
-  border: 1px solid #dadada;
-}
-.box_shadow:hover{box-shadow: 0 1px 10px rgb(200, 158, 97);}
-.filter_shadow {
-  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.1));
+  border: 1px solid #dadada; */  
 }
 .bg-white{background-color: #f3f4f2 !important}
 .chart_heading {
@@ -257,30 +261,31 @@ a:focus {
   transition: all 0.3s linear;
 }
 .day_filter {
-  background-color: #dadada;
+  background-color: transparent;
   font-size: 13px;
   padding: 14px;
 }
 .day_filter a {
-  margin: 0 5px;
+    padding: 0 5px;
   text-decoration: none !important;
   display: inline-block;
   color: #686868;
+  transition: all ease 0.75s !important;
+}
+.day_filter a:hover { 
+  color: #BF9B30;
 }
 .day_filter a.active {
-  border: 1px solid #BF9B30;
-  /* background: #BF9B30; */
-  padding: 0 5px;
-  /* color: #f3f4f2 */
-  color: #BF9B30
+  background: #BF9B30;
+color: #fff;
 }
 .difficulty_filter.day_filter a.active{border-color: #0056b3; color: #0056b3;}
 .explore_all {
-  background: #f3f4f2;
+  background: transparent;
   padding: 15px;
   font-size: 13px;
   color: #BF9B30;
-  border-top: 1px solid #BF9B30;
+  border-top: 1px solid #fff;
 }
 .explore_all a {
   color: #BF9B30;
@@ -340,12 +345,14 @@ a:focus {
   transition: 0.3s linear all;
 }
 .latest_table {
-  background-color: #f3f4f2;
-  border: 1px solid rgb(220, 228, 245);
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
 padding: 15px;
-  border-bottom: none;
+border-radius: 15px;
+margin-bottom: 30px;
+-webkit-backdrop-filter: blur(10px);
+backdrop-filter: blur(10px);
+border: 1px solid #fff;
+box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
+background: rgba(255, 255, 255, 0.6);
 }
 .latest_blocks .explore_all {
   border-bottom-left-radius: 10px;
@@ -397,8 +404,9 @@ a:focus {
 .text_break{white-space: normal !important; word-break: break-all;}
 /************************************************Footer*****************************************/
 .footer_div {
-  border-top: 1px solid rgba(0, 0, 0, 0.15);
+  /* border-top: 1px solid rgba(0, 0, 0, 0.15); */
   font-size: 14px;
+  text-align: center;
 }
 .ftr_services a {
   padding: 0 7px;
@@ -412,18 +420,16 @@ a:focus {
   color: #686868;
 }
 .footer_div .theme_switch {
-  background: #dadada;
+  background: #fff;
 }
 .privacy_txt {
   font-size: 12px;
 }
-.ftr_links {
-  padding-left: 67px;
-}
-.theme_switch{padding-top: 11px; padding-bottom: 11px;}
+.theme_switch{padding-top: 11px; padding-bottom: 11px; border-radius: 10px; box-shadow: 0px 2px 5px rgba(0,0,0,0.5); transition: all ease 0.75s;}
+.theme_switch:hover, .langbut:hover{ box-shadow: 0px 0px 10px rgba(236, 197, 81, 0.8);}
 /*******************************************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;}
+.view_page_header{background: rgba(255, 255, 255, 0.46); box-shadow: 0px 0px 5px rgba(0,0,0,0.5); backdrop-filter: blur(5px); border-bottom:1px solid #fff; backdrop-filter: blur(10px); position: fixed; width: 100%; z-index: 1;}
+.view_content{background-color: transparent;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);}
 .box_shadow_large a{color: #BF9B30;}
@@ -479,9 +485,6 @@ a:focus {
 .link_to_detail:hover{color: #BF9B30;text-decoration: underline;}
 .mobile_table, .peer_mobile_table{border-bottom: 1px solid #686868;position: relative;}
 .mobile_table .tble_col{padding: 0;}
-.mobile_table:nth-child(even), .peer_mobile_table:nth-child(even) {
-  background: #dadada;
-}
 .expnd_blck{display: none;}
 .block_div h5{color: #555;font-size: 13px;}
 .blck_value{font-size: 12px;}
@@ -530,9 +533,14 @@ margin-right: 10px;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  background: #dadada;
+  background: #fff;
+  border-radius: 10px; font-size: 15px;
+  box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
+  margin-left: 5px;
+  transition: all ease 0.75s;
+  cursor: pointer;
 }
-.langbut.ftr_lang{background: #dadada;}
+.langbut.ftr_lang{background: #fff;}
 .arrow_drpdwn{
   border: solid rgba(0,0,0,.5);
   border-width: 0 2px 2px 0;
@@ -544,21 +552,19 @@ margin-right: 10px;
   margin-top: -4px;
 }
 .langbut:focus{outline: none;}
+.langbut select{ background: #dadada; border: none; appearance: none; color: #282829;}
+.dark_theme .langbut select{ background: #282829; color: #fff;}
 .detail_div .difficulty_datas{font-size: 14px !important; color: #BF9B30; margin-bottom: 0px;}
-.net_dropdwn{
- position: absolute;
- top: 20px;
- right: 8px;
-}
-
+.net_dropdwn{position: absolute; top: 17px; right: 10px;}
 .peers_diff .blck_value{word-wrap: break-word;}
-.main-svg:first-child{background: rgb(243, 244, 242) none repeat scroll 0% 0% !important;}
+.main-svg{background: transparent !important;}
 .bg{fill: rgb(243, 244, 242) !important;}
+.ftr_links { margin-top: 10px;}
 /**********************************************Dark Theme CSS********************************/
 body.dark_theme {
-  background: url(/assets/img/dark_bg.png);
+  background: url(/assets/img/dark_bg1.png) fixed center;
   background-color: #222223;
-  color: #f3f4f2;
+  color: #fff;
 }
 .dark_theme .light_theme_display {
   display: none;
@@ -567,58 +573,61 @@ body.dark_theme {
   display: block; 
 }
 .dark_theme .headerbg {
-  background: url(/assets/img/dark_bg1.png);
+  /* background: url(/assets/img/dark_bg1.png); */
 }
+.navbar-light .navbar-nav .nav-link{transition: all ease 0.75s; padding: .5rem 1rem; font-size: 15px;  color: rgb(0, 0, 0);}
+.dark_theme .navbar-light .navbar-nav .nav-link{ color: #fff; }
+.dark_theme .navbar-light .navbar-nav .nav-link:hover{ color: #ecc551;}
 .dark_theme .body_bg {
-  background: url(/assets/img/dark_bg1.png);
+  /* background: url(/assets/img/dark_bg1.png); */
   /* background-position-y: -22%; */
 }
 .dark_theme .logo_txt,
 .dark_theme .ip_filter a {
-  color: #f3f4f2;
+  color: #fff;
 }
-.dark_theme .navbar-light .navbar-brand:focus, .dark_theme .navbar-light .navbar-brand:hover{color: #f3f4f2;}
+.dark_theme .navbar-light .navbar-brand:focus, .dark_theme .navbar-light .navbar-brand:hover{color: #fff;}
 .dark_theme .search_input {
-  background-color: #252525;
+  background-color:  #16161a;
 }
-.dark_theme .box_shadow{border: 1px solid #4c4c4c}
 .dark_theme .blocks,
 .dark_theme .explore_all {
-  background-color: #222223;
+  background-color: transparent;
+  border-color: #353535
 }
 .dark_theme .day_filter,
 .dark_theme .detail_div {
-  background-color: #252525;
+  background-color: transparent;
   border-color: #222223;
 }
 .dark_theme .detail_div .count span {
   color: #a6a6a6;
 }
 .dark_theme .detail_div .desc {
-  color: #f3f4f2;
+  color: #fff;
 }
 .dark_theme .day_filter a,
 .dark_theme .table th {
   color: #a6a6a6;
 }
 .dark_theme .table td {
-  color: #f3f4f2;
+  color: #fff;
 }
 .dark_theme .day_filter a.active {
   /* background-color: #BF9B30; */
   border-color: #BF9B30;
-  /* color: #f3f4f2; */
-  color: #BF9B30;
+  /* color: #fff; */
+  color: #fff;
 }
 .dark_theme .chart_heading {
-  color: #f3f4f2;
+  color: #fff;
 }
 .dark_theme .latest_table {
   background-color: #222223;
   border-color: #222223;
 }
 .dark_theme .latest_blocks .explore_all {
-  background-color: #252525;
+  background-color:  #353535;
   border-color: #1c2437;
   color: #a6a6a6;
 }
@@ -638,7 +647,7 @@ body.dark_theme {
 .dark_theme .block_div h5{color: #BF9B30;}
 .dark_theme .ftr_services a,
 .dark_theme .ftr_services {
-  color: #f3f4f2;
+  color: #fff;
 }
 .dark_theme .ftr_services .gray_txt {
   color: #3b4e7c;
@@ -648,26 +657,26 @@ body.dark_theme {
 .dark_theme .footer_div .theme_switch,
 .dark_theme .ftr_dropdown,
 .dark_theme .langbut.ftr_lang,
-.dark_theme .bg-white {
-  background-color: #222223 !important;
-  color: #f3f4f2 !important;
-}
+.dark_theme .bg-white {background-color: transparent !important; color: #f3f4f2 !important;}
+
+
+
 .dark_theme .news_desc .bg-white{ background-color: #222223 !important;}
 .dark_theme footer.bg-white{background-color: transparent !important}
-.dark_theme .nav-item.dropdown .bg-white, .dark_theme .nav-item.dropdown, .dark_theme .langbut, .dark_theme .theme_switch{background-color: #252525 !important}
-.dark_theme .langbut{color: #f3f4f2 !important;}
+.dark_theme .nav-item.dropdown .bg-white, .dark_theme .nav-item.dropdown, .dark_theme .langbut, .dark_theme .theme_switch{background-color: rgb(15, 15, 15) !important}
+.dark_theme .langbut{color:#ecc551 !important}
 .dark_theme .arrow_drpdwn{border-color: #f3f4f2 !important;}
-.dark_theme .mobile_table:nth-child(2n), .dark_theme .peer_mobile_table:nth-child(2n){background: #252525;}
-.dark_theme.langbut.ftr_lang{background: #222223;color: #f3f4f2;}
+.dark_theme .mobile_table:nth-child(2n), .dark_theme .peer_mobile_table:nth-child(2n){background:  rgba(15, 15, 15, 0.49);}
+.dark_theme.langbut.ftr_lang{background: #222223;color: #fff;}
 .dark_theme .dropdown a {
   color: #f3f4f2 !important;
 }
 .dark_theme td a.txt_secondary {
-  color: #f3f4f2;
+  color: #fff;
 }
 .dark_theme .main-svg:first-child {
   /* background: rgb(39, 49, 75) !important; */
-  background: #222223 !important;
+  /* background: transparent !important; */
 }
 .dark_theme .g-ytitle text, .dark_theme .g-y2title text, .dark_theme .g-y3title text,
 .dark_theme .xtick text, .dark_theme .x2tick text, .dark_theme .x3tick text,
@@ -680,17 +689,17 @@ body.dark_theme {
   stroke: #f3f4f2 !important;
 }
 .dark_theme .page-link {
-  background-color: #222223;
-  border-color: #a6a6a6;
+  background-color: transparent;
+  border-color: #1e1e1e;
 }
 .dark_theme .item_select select {
   border-color: #222223;
-  background-color: #222223;
+  background-color: #111;
   color: #a6a6a6;
 }
 .dark_theme .footer_div{border-color: #a5a5a5}
-.dark_theme .view_page_header {background: #222223;}
-.dark_theme .view_content {background-color: #252525;}
+.dark_theme .view_page_header {border-color: #352815; box-shadow: inset 0 0em 1em #2b200f, 0 0 0 0px #2b200f, 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);  background: rgba(17, 11, 4, 0.21);}
+.dark_theme .view_content {background-color: transparent;}
 .js-plotly-plot .plotly .modebar .modebar-group,
 .zerolinelayer {
   display: none;
@@ -711,12 +720,12 @@ body.dark_theme {
 .dark_theme .modebar .modebar-group{ background:#222324 !important; }
 .modebar .modebar-group{ background:#f3f4f2 !important; }
 
-.dark_theme .zibra_grey{background: #252525;}
+.dark_theme .zibra_grey{background:  #353535;}
 .dark_theme .zibra_white{background: #222223;}
 .dark_theme .bg{fill: transparent !important;}
-.dark_theme .not_found{color: #f3f4f2;}
+.dark_theme .not_found{color: #fff;}
 .dark_theme .card, .dark_theme .card-header{background-color: #222223; border-color: #222223;}
-.dark_theme .tab_hdng{color: #f3f4f2;}
+.dark_theme .tab_hdng{color: #fff;}
 .dark_theme .view_content table{border-color: #384566;}
 .dark_theme .card-body{background-color: #1c2437;}
 .diff_margin{margin-bottom: -10px !important; margin-top: -10px !important;}
@@ -809,6 +818,227 @@ body.dark_theme {
   } 
 }
 .note_tag{background: #bf9b30; position: fixed; width: 100%;  bottom: 0;  padding: 10px;  color: #fff;  z-index: 2;  margin: 0;}
-.note_tag span{
-  cursor: pointer;
+.note_tag span{cursor: pointer;}
+.dark_theme .bg-transparent, .bg-transparent{ background: transparent !important;}
+
+.dark_theme  .mobile_table h6, .dark_theme  .view_moble_tble h6, .dark_theme  .peer_mobile_table h6 { color: #bf9b30;}
+.dark_theme  .expnd_blck{ color: grey;}
+/* Loader 4 */
+.loader-4 {
+  height: 32px;
+  width: 32px;
+}
+.loader-4::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  width: 12px;
+  height: 12px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  background: #50524f;
+  border-radius: 50%;
+  -webkit-animation: loader-4-1 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+  animation: loader-4-1 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+}
+
+.dark_theme .loader-4::after{
+  background: #fff;
+}
+@-webkit-keyframes loader-4-1 {
+  0% {
+    -webkit-transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    -webkit-transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0);
+    opacity: 0;
+  }
+}
+@keyframes loader-4-1 {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+.loader-4 span {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  height: 32px;
+  width: 32px;
+  -webkit-animation: loader-4-2 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+  animation: loader-4-2 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+}
+@-webkit-keyframes loader-4-2 {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  50% {
+    -webkit-transform: rotate(180deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes loader-4-2 {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.loader-4 span::before,
+.loader-4 span::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  height: 12px;
+  width: 12px;
+  background: #bf9b30;
+  border-radius: 50%;
+  -webkit-animation: loader-4-3 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+  animation: loader-4-3 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+}
+@-webkit-keyframes loader-4-3 {
+  0% {-webkit-transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    -webkit-transform: translate3d(-16px, 0, 0) scale(0.5);
+  }
+  100% {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+@keyframes loader-4-3 {
+  0% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(-16px, 0, 0) scale(0.5);
+  }
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+.loader-4 span::after {
+  -webkit-animation: loader-4-4 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+  animation: loader-4-4 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
+}
+@-webkit-keyframes loader-4-4 {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    -webkit-transform: translate3d(16px, 0, 0) scale(0.5);
+  }
+  100% {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+@keyframes loader-4-4 {
+  0% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(16px, 0, 0) scale(0.5);
+  }
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+.odometer.odometer-auto-theme, .odometer.odometer-theme-default{font-family: 'Bahnschrift', sans-serif !important;}
+.epicbrandlogo{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; margin-right: 15px;}
+
+
+.drawline::after, .drawline::before {position: absolute;content: ''; right: 0px;height: 100%;width: 1px;top: 0px;  background: rgb(255, 255, 255);}
+.drawline::before { background: rgba(0, 0, 0, 0.1); right: 1px;}
+
+.dark_theme .drawline::before{background: #000;}
+.dark_theme .drawline::after{ background: rgba(255, 255, 255, 0.04);}
+.yrvsel { padding: 0px 1rem;}
+
+.mobfix{display: none;}
+
+.tableminheight .mobile_table:nth-child(2n+1) { background: rgba(253, 252, 252, 0.72);}
+.dark_theme .tableminheight .mobile_table:nth-child(2n+1) {background:rgba(0, 0, 0, 0);}
+
+.apilinks a{ color: #bf9b30; }
+.apilinks a:hover{ color: #000;}
+.dark_theme .apilinks a:hover{ color: #fff;}
+.footer_div .logo_img {margin-bottom: 30px;}
+
+.subloader{ display: flex; justify-content: center; max-width: 140px;}
+.loader-17 {width: 15px;height: 15px;border-radius: 50%;display: inline-block;border-top: 2px solid #FFBF68;border-right: 3px solid transparent;-webkit-animation: rotation 1s linear infinite;        animation: rotation 1s linear infinite;}
+.epbbox{ display: flex; flex-direction: row; align-items: center;}
+
+.lgtxtwid .odometer-digit .odometer-value {width: 25px;}
+.medtxtwid .odometer-digit .odometer-value {width: 22px;}
+.smatxtwid .odometer-digit .odometer-value {width: 8px;}
+
+
+@-webkit-keyframes input-shadow {
+  0% {
+    box-shadow: 0px 1px 6px rgb(236 197 81 / 80%);
+  }
+  50% {
+      box-shadow:0px 1px 6px rgb(236 197 81 / 80%);
+  }
+  100% {
+    box-shadow: 0px 1px 6px rgb(236 197 81 / 80%);
+  }
+}
+
+@keyframes input-shadow {
+  0% {
+    box-shadow: 0px 1px 6px rgb(236 197 81 / 80%);
+  }
+  50% {
+      box-shadow: 0px 1px 6px rgb(236 197 81 / 80%);
+  }
+  100% {
+    box-shadow: 0px 1px 6px rgb(236 197 81 / 80%);
+  }
+}
+
+
+.highlighttableData {
+
+  -webkit-animation:input-shadow ease-in-out 1s 3; /* Chrome, Safari, Opera */
+  animation:input-shadow ease-in-out 1s 3;
+  transition: all ease 0.75s;
   }

src/assets/geojson.json

@@ -0,0 +1,3 @@
+{
+    "locations": []
+}

src/index.html

@@ -6,13 +6,13 @@
   <base href="/">
   <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
 </head>
-<body>
+<body class="dark_theme">
   <app-root></app-root>
 </body>
+
 <script>
   navigator.serviceWorker.getRegistrations().then(function(registrations) {
     console.log('checking the  service worker registertion...', registrations);

src/styles.css

@@ -14,19 +14,21 @@ body {
   font-family: 'Bahnschrift';
   color: #686868;
   letter-spacing: 0.5px;
-  background: url(/assets/img/body_bg1.png);
+  background: url(/assets/img/light-bg.png) no-repeat fixed center;
 }
 .search {
   max-width: 75%;
   margin: 0 auto;
 }
 .text_underline{text-decoration: underline;color: #BF9B30}
+a, .privacy_txt a { color: #BF9B30}
 a:hover,
-a:focus {
+a:focus, .privacy_txt a:hover{
   text-decoration: none;
   outline: none;
+  color: rgba(255, 255, 255, 0.932)
 }
-.langbut option:disabled{background-color: #f7f7f9; color: rgba(0,0,0,.2) }
+.langbut option:disabled{background-color: #f7f7f9; color: rgba(17, 11, 4, 0.21) }
 
 @media (min-width: 1200px) {
   .container {
@@ -188,11 +190,12 @@ a:focus {
   /* margin-right: 5px; */
 }
 .headerbg {
-  background: url(/assets/img/body_bg.png);
+  /* background: url(/assets/img/body_bg.png); */
   overflow: hidden;
-  background-position-y: -22%;}
+  /* background-position-y: -22%; */
+}
 .body_bg {
-  background: url(/assets/img/body_bg.png);
+  /* background: url(/assets/img/body_bg.png); */
   background-position-y: -22%;
 }
 .search_input {
@@ -211,18 +214,20 @@ a:focus {
   color: #BF9B30;
 }
 .blocks {
-  background: #f3f4f2;
-  padding: 10px;
+  background: transparent;
+  padding: 15px;
 }
 .box_shadow {
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  border: 1px solid #dadada;
-}
-.box_shadow:hover{box-shadow: 0 1px 10px rgb(200, 158, 97);}
-.filter_shadow {
-  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.1));
+   border-radius: 15px; 
+  margin-bottom: 30px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);  
+  transition: all ease 0.75s;
+  border: 1px solid #fff;
+  box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
+background: rgba(255, 255, 255, 0.4);
 }
+.dark_theme .box_shadow{border-color:  #352815; box-shadow: inset 0 0em 1em #2b200f, 0 0 0 0px #2b200f, 0.3em 0.3em 1em rgba(0, 0, 0, 0.3); background: rgba(17, 11, 4, 0.21);}
 .bg-white{background-color: #f3f4f2 !important}
 .chart_heading {
   font-size: 23px;
@@ -234,6 +239,28 @@ a:focus {
   position: relative;
   z-index: 1;
 }
+.detailsloading {
+  margin: 0 auto;
+  margin-bottom: 15px;
+}
+.margin0auto {
+  margin: 0 auto;
+}
+.dark_theme input.search_input {
+  border: 1px solid #352815;
+  border-radius: 40px;
+  box-shadow: inset 0 0em 1em #2b200f, 0 0 0 0px #2b200f, 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background: rgba(17, 11, 4, 0.21);
+}
+button.search_btn {
+  position: absolute;
+  top: 6px;
+  right: 15px;
+  color: #858585;
+  font-size: 1.5rem;
+}
 .txn_count {
   background: #BF9B30;
   vertical-align: middle;
@@ -257,23 +284,10 @@ a:focus {
   transition: all 0.3s linear;
 }
 .day_filter {
-  background-color: #dadada;
+  background-color: transparent;
   font-size: 13px;
   padding: 14px;
 }
-.day_filter a {
-  margin: 0 5px;
-  text-decoration: none !important;
-  display: inline-block;
-  color: #686868;
-}
-.day_filter a.active {
-  border: 1px solid #BF9B30;
-  /* background: #BF9B30; */
-  padding: 0 5px;
-  /* color: #f3f4f2 */
-  color: #BF9B30
-}
 .difficulty_filter.day_filter a.active{border-color: #0056b3; color: #0056b3;}
 .explore_all {
   background: #f3f4f2;
@@ -282,6 +296,7 @@ a:focus {
   color: #BF9B30;
   border-top: 1px solid #BF9B30;
 }
+
 .explore_all a {
   color: #BF9B30;
 }
@@ -397,7 +412,7 @@ a:focus {
 .text_break{white-space: normal !important; word-break: break-all;}
 /************************************************Footer*****************************************/
 .footer_div {
-  border-top: 1px solid rgba(0, 0, 0, 0.15);
+  /* border-top: 1px solid rgba(0, 0, 0, 0.15); */
   font-size: 14px;
 }
 .ftr_services a {
@@ -417,15 +432,12 @@ a:focus {
 .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_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(17, 11, 4, 0.21);}
 .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);}
+.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(17, 11, 4, 0.21);}
 .box_shadow_large a{color: #BF9B30;}
 .view_txt{color: #acacac;font-size: 17px;}
 .block_rotate {
@@ -479,9 +491,6 @@ a:focus {
 .link_to_detail:hover{color: #BF9B30;text-decoration: underline;}
 .mobile_table, .peer_mobile_table{border-bottom: 1px solid #686868;position: relative;}
 .mobile_table .tble_col{padding: 0;}
-.mobile_table:nth-child(even), .peer_mobile_table:nth-child(even) {
-  background: #dadada;
-}
 .expnd_blck{display: none;}
 .block_div h5{color: #555;font-size: 13px;}
 .blck_value{font-size: 12px;}
@@ -552,11 +561,11 @@ margin-right: 10px;
 }
 
 .peers_diff .blck_value{word-wrap: break-word;}
-.main-svg:first-child{background: rgb(243, 244, 242) none repeat scroll 0% 0% !important;}
+.main-svg{background: transparent !important;}
 .bg{fill: rgb(243, 244, 242) !important;}
 /**********************************************Dark Theme CSS********************************/
 body.dark_theme {
-  background: url(/assets/img/dark_bg.png);
+  background: url(/assets/img/dark_bg1.png);
   background-color: #222223;
   color: #f3f4f2;
 }
@@ -566,12 +575,13 @@ body.dark_theme {
 .dark_theme .dark_theme_display {
   display: block; 
 }
-.dark_theme .headerbg {
-  background: url(/assets/img/dark_bg1.png);
+.hidezero span.odometer-digit:first-child {
+  display: none;
 }
-.dark_theme .body_bg {
-  background: url(/assets/img/dark_bg1.png);
-  /* background-position-y: -22%; */
+.row .alignltp {
+  margin-left: auto;
+    margin-right: auto;
+    text-align: center;
 }
 .dark_theme .logo_txt,
 .dark_theme .ip_filter a {
@@ -579,17 +589,17 @@ body.dark_theme {
 }
 .dark_theme .navbar-light .navbar-brand:focus, .dark_theme .navbar-light .navbar-brand:hover{color: #f3f4f2;}
 .dark_theme .search_input {
-  background-color: #252525;
+  background-color:  #353535;
 }
-.dark_theme .box_shadow{border: 1px solid #4c4c4c}
 .dark_theme .blocks,
 .dark_theme .explore_all {
   background-color: #222223;
 }
 .dark_theme .day_filter,
 .dark_theme .detail_div {
-  background-color: #252525;
+  background-color:  #353535;
   border-color: #222223;
+  backdrop-filter: blur(10px);
 }
 .dark_theme .detail_div .count span {
   color: #a6a6a6;
@@ -597,6 +607,32 @@ body.dark_theme {
 .dark_theme .detail_div .desc {
   color: #f3f4f2;
 }
+.odometer-inside {
+  letter-spacing: 0px;
+}
+.dark_theme span.epicpricetxt {
+  color: #fff;
+}
+span.epicpricetxt {
+  color: #333;
+}
+.goldcolortxt {
+  color: #bf9b32;
+}
+.exchangelogo {
+  max-width: 42px;
+  border-radius: 10px;
+}
+.textwhite {
+  color: #ffffff;
+}
+p.block_value_v2.epicprice {
+  font-size: 30px;
+
+}
+.tableminheight {
+  min-height: 200px;
+}
 .dark_theme .day_filter a,
 .dark_theme .table th {
   color: #a6a6a6;
@@ -613,12 +649,23 @@ body.dark_theme {
 .dark_theme .chart_heading {
   color: #f3f4f2;
 }
-.dark_theme .latest_table {
+select.miningpoolborder {
+  box-shadow: 0px 0px 5px rgb(236 197 81 / 60%);
+  height: 36px;
+}
+.dark_theme div.latest_table {
   background-color: #222223;
   border-color: #222223;
+  border: 1px solid #352815;
+  padding: 15px;
+  border-radius: 15px;
+  box-shadow: inset 0 0em 1em #2b200f, 0 0 0 0px #2b200f, 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background: rgba(17, 11, 4, 0.21);
 }
 .dark_theme .latest_blocks .explore_all {
-  background-color: #252525;
+  background-color:  #353535;
   border-color: #1c2437;
   color: #a6a6a6;
 }
@@ -652,12 +699,11 @@ body.dark_theme {
   background-color: #222223 !important;
   color: #f3f4f2 !important;
 }
-.dark_theme .news_desc .bg-white{ background-color: #222223 !important;}
+.dark_theme .news_desc div.bg-white{ background-color: transparent !important;}
 .dark_theme footer.bg-white{background-color: transparent !important}
-.dark_theme .nav-item.dropdown .bg-white, .dark_theme .nav-item.dropdown, .dark_theme .langbut, .dark_theme .theme_switch{background-color: #252525 !important}
+.dark_theme .nav-item.dropdown .bg-white, .dark_theme .nav-item.dropdown, .dark_theme .langbut, .dark_theme .theme_switch{background-color:  #353535 !important}
 .dark_theme .langbut{color: #f3f4f2 !important;}
 .dark_theme .arrow_drpdwn{border-color: #f3f4f2 !important;}
-.dark_theme .mobile_table:nth-child(2n), .dark_theme .peer_mobile_table:nth-child(2n){background: #252525;}
 .dark_theme.langbut.ftr_lang{background: #222223;color: #f3f4f2;}
 .dark_theme .dropdown a {
   color: #f3f4f2 !important;
@@ -665,10 +711,6 @@ body.dark_theme {
 .dark_theme td a.txt_secondary {
   color: #f3f4f2;
 }
-.dark_theme .main-svg:first-child {
-  /* background: rgb(39, 49, 75) !important; */
-  background: #222223 !important;
-}
 .dark_theme .g-ytitle text, .dark_theme .g-y2title text, .dark_theme .g-y3title text,
 .dark_theme .xtick text, .dark_theme .x2tick text, .dark_theme .x3tick text,
 .dark_theme .ytick text, .dark_theme .y2tick text, .dark_theme .y3tick text {
@@ -690,7 +732,6 @@ body.dark_theme {
 }
 .dark_theme .footer_div{border-color: #a5a5a5}
 .dark_theme .view_page_header {background: #222223;}
-.dark_theme .view_content {background-color: #252525;}
 .js-plotly-plot .plotly .modebar .modebar-group,
 .zerolinelayer {
   display: none;
@@ -711,7 +752,7 @@ body.dark_theme {
 .dark_theme .modebar .modebar-group{ background:#222324 !important; }
 .modebar .modebar-group{ background:#f3f4f2 !important; }
 
-.dark_theme .zibra_grey{background: #252525;}
+.dark_theme .zibra_grey{background:  #353535;}
 .dark_theme .zibra_white{background: #222223;}
 .dark_theme .bg{fill: transparent !important;}
 .dark_theme .not_found{color: #f3f4f2;}
@@ -724,6 +765,10 @@ body.dark_theme {
 .dark_theme .legendtext{fill: rgb(255, 255, 255) !important;}
 .dark_theme .background_loading{background: #384566;background-image: linear-gradient( to right, #384566 0%, #222223 20%, #384566 40%, #384566 100% );}
 .dark_theme .langbut option:disabled { background-color: #384566; color: rgba(255,255,255,.2);}
+
+
+
+
 @keyframes yellowfade {
   from {
     background: white;
@@ -813,7 +858,74 @@ body.dark_theme {
   cursor: pointer;
 }
 
+.blockchain_firstrow, .blockchain_secondrow,  .box_shadow_large{padding: 15px;border-radius: 15px; margin-bottom: 30px; backdrop-filter: blur(10px); border: 1px solid  #fff;box-shadow: 0px 3px 5px rgba(0,0,0,0.2); background: rgba(255, 255, 255, 0.6);}
+
+.dark_theme .blockchain_firstrow, .dark_theme .blockchain_secondrow, .dark_theme .box_shadow_large {
+  border-color: #352815;
+  box-shadow: inset 0 0em 1em #2b200f, 0 0 0 0px #2b200f, 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);   
+  background: rgba(17, 11, 4, 0.21);
+}
+
+.dark_theme .box_shadow_large a:hover{ color: #fff;}
+
+p.subheading {
+  color: #a4a4a4;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+p.subvalue {
+  color: #bf9b32;
+  margin-bottom: 8px;
+}
+p.block_value {
+  /* color: #ecc551; */
+  color: #bf9b32;
+  font-size: 50px;
+  margin: 0px;
+}
+span.smalltext {
+  font-size: 14px;
+  color: #666;
+}
+.dark_theme span.smalltext {
+    color: #ffffff;
+}
+p.block_value_v2 {
+  color: #bf9b32;
+  font-size: 38px;
+  margin: 0px;
+  height: 45px;
+}
+.borderright1px {
+  border-right: 2px solid  #352815;
+}
+div.marginleft15 {
+  margin-left: 15px;
+}
+p.block_heading {
+  margin-top: 5px;
+  margin-bottom: 0px;
+}
+
 @media(max-width:767px){
 .countdownbox span{ display: block;}
 .countdownbox .count{white-space: normal;   text-overflow: inherit; overflow: visible; font-size: 25px;}
 }
+/* 
+#mapdiv {
+ margin: auto;
+ position:relative;
+ top:0px;
+ width: 100%;
+ height: 460px;
+ border-color:#ffffff;
+ border: 1px solid #ffffff;
+ border-radius: .25rem;
+
+}
+#wrapper {
+ overflow:hidden;
+ width: 100%;
+ position:absolute;
+ top:50px;
+} */

tsconfig.app.json

@@ -2,6 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
+    "module": "commonjs",
     "types": []
   },
   "include": [

tsconfig.json

@@ -17,6 +17,7 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "resolveJsonModule": true
   },
 }