nodes link

README.md

@@ -1,27 +1,26 @@
-# Epic Explorer using angular8
+# Epic Explorer v3
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.2.
 
-## Development server
+## Follow below guide lines to deploy explorerv3
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+* Create new folder, pull project from git and switch to "explorerv3" branch
+* Copy below 3 files from old live to this project
+```
+.env
+src/environment.ts
+src/environment.prod.ts
+```
+* Run below command to install node modules
+```
+npm i -f --ignore-script
+```
+* Run below command to create build
+```
+npm run build:ssr
+```
+* Use below command to run build
+```
+node live/server.js
+```
+Note : if you are using pm2 or other process manager, use specific command to run build

angular.json

@@ -24,6 +24,9 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
+              "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
               "src/styles.css",
               "src/assets/vendors/css/bootstrap.min.css",
               "src/assets/css/style.css",
@@ -32,7 +35,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,16 +36,22 @@
     "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",
+    "geoip-lite": "^1.4.7",
     "helmet": "^3.18.0",
     "jsdom": "^15.1.1",
+    "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.3",
     "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",

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";
@@ -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")
@@ -309,7 +332,7 @@ console.log(__dirname);
 // connection
 //   .connect()
 //   .then(() => {
-  createConnections([ {
+createConnections([ {
     name: 'Floonet',
     type: 'postgres',
     host: process.env.FLOONET_DB_HOST,
@@ -338,7 +361,7 @@ console.log(__dirname);
       BlockchainKernel,
       BlockchainOutput],
   }]).then(async () => {
-    
+
     const server = app.listen(PORT, () => {
       console.log(`Node Express server listening on http://localhost:${PORT}`);
     });

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,11 @@ import {
   TotalDifficultyNBlockDto,
 } from '../dtos';
 import { Paginate } from '../utils';
-import {latestBlockDetails} from '../utils/common';
+import { 
+  latestBlockDetails,
+  previousBlockDetails
+} from '../utils/common';
+const geoip = require('geoip-lite'); 
 var moment = require('moment');
 moment.updateLocale('en', {
   relativeTime: {
@@ -256,6 +260,23 @@ export class BlockchainBlockController {
       this.TotalDifficultyNBlock,
     );
 
+    this.router.get(
+      `${this.path}/get51poolapi`,
+      redisMiddleware(process.env.REDIS_EXPIRY),
+      this.get51poolapi,
+    );
+
+    this.router.get(
+      `${this.path}/getepicmineapi`,
+      redisMiddleware(process.env.REDIS_EXPIRY),
+      this.getepicmineapi,
+    );
+    this.router.get(
+      `${this.path}/v1/peers/all`,
+      redisMiddleware(process.env.REDIS_EXPIRY),
+      this.getpeersallapi,
+    );
+
        /**
      * @swagger
      * /epic_explorer/v1/blockchain_block/blockcount:
@@ -446,6 +467,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 +475,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 +714,90 @@ 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);
+    }
+  };
+
+  // get epicmine 
+  private getepicmineapi = ( request: Request,res: Response) => {
+    var axios = require('axios');
+    try {
+      var config = {
+        method: 'get',
+        url: 'https://api.epicmine.io/pool/getstats',
+        headers: { }
+      };
+      axios(config).then(function (response) {
+        res.status(200).json({
+          status: 200,
+          response: response.data
+        });
+      })
+      .catch(function (error) {
+        console.log('axios-error');
+        console.log(error);
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  // get /v1/peers/all 
+  private getpeersallapi = async( request: Request,res: Response) => {
+    var axios = require('axios');
+    try {
+      var config = {
+        method: 'get',
+        url: 'http://5.75.242.4:3413/v1/peers/all',
+        headers: { }
+      };
+     await axios(config).then( (response) => {
+        const data = response.data;
+
+        // Perform IP geolocation for each item in the 'data' array
+        data.forEach(peer => {
+          const ip = peer.addr.split(':')[0];
+          const geo = geoip.lookup(ip);
+    
+          // Add the 'geo' data to the 'peer' object
+          peer.geo = geo;
+        });
+        res.status(200).json({
+          status: 200,
+          response: data
+        });
+      })
+      .catch(function (error) {
+        console.log('axios-error');
+        console.log(error);
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   private BlockchainBlockCreate = async (
     request: Request,
     response: Response,
@@ -1738,7 +1852,8 @@ export class BlockchainBlockController {
       next(new InternalServerErrorException(error));
     }
   };
- 
+
+  // Last Block home page function
   private LatestDifficultyNBlock = async (
     request: Request,
     response: Response,
@@ -1758,6 +1873,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

@@ -32,9 +32,9 @@ export class BlockchainKernelController {
 
   IsJsonString(str) {
     try {
-     var dataJson = JSON.parse(str);
+      var dataJson = JSON.parse(str);
     } catch (e) {
-        return [];
+      return [];
     }
     return dataJson;
   }
@@ -149,29 +149,30 @@ export class BlockchainKernelController {
     );
 
 
-     /**
-     * @swagger
-     * /epic_explorer/v1/network:
-     *   get:
-     *     tags:
-     *       - name: Network | Network CONTROLLER
-     *     summary: change a network
-     *     description: change a network
-     *     consumes:
-     *       - application/json
-     *     produces:
-     *       - application/json
-     *     parameters:
-     *       - name: network
-     *     responses:
-     *       200:
-     *         description: Network Changed successfully
-     */
+    /**
+    * @swagger
+    * /epic_explorer/v1/network:
+    *   get:
+    *     tags:
+    *       - name: Network | Network CONTROLLER
+    *     summary: change a network
+    *     description: change a network
+    *     consumes:
+    *       - application/json
+    *     produces:
+    *       - application/json
+    *     parameters:
+    *       - name: network
+    *     responses:
+    *       200:
+    *         description: Network Changed successfully
+    */
     this.router.get(
       `${this.path}/network`,
       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,
@@ -651,7 +858,7 @@ export class BlockchainKernelController {
           .utc()
           .format('YYYY-MM-DD');
 
-          var timeIntervalQry =
+        var timeIntervalQry =
           "timestamp at time zone '" +
           process.env.TIME_ZONE +
           "' BETWEEN SYMMETRIC '" +
@@ -679,7 +886,7 @@ export class BlockchainKernelController {
         Fee.push(e.fee);
       });
 
-      if(date.length == 0){
+      if (date.length == 0) {
         date = [moment(Date.now()).format('YYYY-MM-DD')];
         Fee = [0];
       }
@@ -834,7 +1041,7 @@ LEFT JOIN (select block_id, count(block_id) as block_id_count from blockchain_ou
   ) => {
     try {
       const TransactionFeeRequestData: TransactionFeeDto = request.query;
-      if (TransactionFeeRequestData.Interval) {        
+      if (TransactionFeeRequestData.Interval) {
         var timeIntervalQry =
           "blockchain_block.timestamp > current_date - interval '" +
           TransactionFeeRequestData.Interval +
@@ -853,7 +1060,7 @@ LEFT JOIN (select block_id, count(block_id) as block_id_count from blockchain_ou
         //   ' AND ' +
         //   TransactionFeeRequestData.ToDate;
 
-          var timeIntervalQry =
+        var timeIntervalQry =
           "blockchain_block.timestamp at time zone '" +
           process.env.TIME_ZONE +
           "' BETWEEN SYMMETRIC '" +
@@ -861,7 +1068,7 @@ LEFT JOIN (select block_id, count(block_id) as block_id_count from blockchain_ou
           "' AND '" +
           TransactionFeeRequestData.ToDate +
           "'";
-        
+
         var seriesquery =
           "'" +
           TransactionFeeRequestData.FromDate +
@@ -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,11 +88,12 @@ 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;
-      coin_existence =  (16 * BLOCK_ERA_1) + (8 * BLOCK_ERA_2) + (4 * BLOCK_ERA_3) + 2 * remaining_height;
+      // coin_existence =  (16 * BLOCK_ERA_1) + (8 * (BLOCK_ERA_2 - BLOCK_ERA_1)) + (4 * (BLOCK_ERA_3 - BLOCK_ERA_2)) + 2 * remaining_height;
+      coin_existence = (16* (DAY_HEIGHT * 334)) + (8 * (DAY_HEIGHT * 470)) + (4 *  (DAY_HEIGHT * 601)) + 2*remaining_height;
       currentReward = 2;
     } else if (height <= BLOCK_ERA_5) {
       remaining_height = height - BLOCK_ERA_4;
@@ -225,154 +226,89 @@ 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 = '';
+  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',
+    )
+    .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 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',
-        )
-        .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 = 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');
+  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";
 
-      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;
-/// 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 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.
+  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) + 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 {
+      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 - BLOCK_ERA_1)) + (4 * (BLOCK_ERA_3 - BLOCK_ERA_2)) + 2 * remaining_height;
+      coin_existence = (16* (DAY_HEIGHT * 334)) + (8 * (DAY_HEIGHT * 470)) + (4 *  (DAY_HEIGHT * 601)) + 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)
@@ -386,135 +322,334 @@ let currentReward = 16;
     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;
+  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].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;
-      }
+  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);
+  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;
 
-      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)
-        
-        // // 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 {
-        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
-      };
+  /// 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
+  };
+}
+
+// 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 - BLOCK_ERA_1)) + (4 * (BLOCK_ERA_3 - BLOCK_ERA_2)) + 2 * remaining_height;
+      coin_existence = (16* (DAY_HEIGHT * 334)) + (8 * (DAY_HEIGHT * 470)) + (4 *  (DAY_HEIGHT * 601)) + 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 +783,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

@@ -1,45 +1,68 @@
- <footer class="bg-white bg-transparent">
-    <div class="footer">
-      <div class="container">
-        <div class="footer_div py-4">
-          <div class="row">
-            <!-- <div class="col-md-4"> -->
-                <div class="col-sm-6">
-              
-                <!-- <span class="txt_primary">Epic </span><span
+<footer class="bg-white bg-transparent">
+  <div class="footer">
+    <div class="container">
+      <div class="footer_div py-4">
+        <div class="row">
+          <!-- <div class="col-md-4"> -->
+          <div class="col-sm-2">
+          </div>
+          <div class="col-sm-8">
+            <!-- <span class="txt_primary">Epic </span><span
                   class="txt_secondary">Explorer</span> -->
-                  <div class="logo_img">
-                      <a routerLink="/" class="chart_heading d-inline-block">
-                    <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>
-                
-            </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>
-            <!-- <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> 
-                <!--<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)">
-                  <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 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 class="logo_img">
+              <a routerLink="/" class="chart_heading d-inline-block">
+                <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>
           </div>
+          <div class="col-sm-2">
+            <img src="/assets/img/edna-light.png" height="60" class="light_theme_display mt-4 ml-5 ednalogoMobile">
+            <img src="/assets/img/edna-dark.png" height="60" class="dark_theme_display mt-4 ml-5 ednalogoMobile">
+          </div>
+          <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="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 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> -->
+
+                <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>
-      </div>
-  </footer>
+    </div>
+  </div>
+</footer>

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,13 +50,12 @@
             <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> -->
               </select>
               <i class="arrow_drpdwn net_dropdwn"></i>
-
               <!-- <ul class="list-unstyled d-inline-block mb-0">
                   <li class="nav-item dropdown">
                       <a

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,31 @@
 <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">
-              <!-- <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option> -->
-              <option value="Testnet" disabled [selected]="'Testnet' == getNetwork()">MainNet</option>
-              <!-- <option disabled value="Mainnet">MainNet</option> -->
-          </select>
-          <i class="arrow_drpdwn net_dropdwn" ></i>
+   
+   
+        <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"><a routerLink="/nodes-distribution" class="nav-link">Nodes</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"  [selected]="'Testnet' == getNetwork()">MainNet</option>
+                <!-- <option disabled value="Mainnet">MainNet</option> -->
+            </select>
+           
+          </li>
+        </ul>
+         
           <!-- <ul class="list-unstyled d-inline-block">
             <li class="nav-item dropdown">
 
@@ -37,50 +41,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>
+    
+     
+      
+   
+    <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 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 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 mr-2 btn order-2 order-sm-3"><img
-            src="assets/img/dark_theme.png" height="20" class="light_theme_display"><img
-            src="assets/img/light_theme.png" height="20" class="dark_theme_display"></button>
+       
       </div>
-    </div>
-
-    <div class="position-relative d-block d-sm-none w-100 mt-3">
 
+    <!-- <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 +92,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>
+ 
+</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">
@@ -122,7 +122,7 @@
                 <div class="view_moble_tble web_hdng">
                     <div class="row">
                         <div class="col-lg-2">
-                         <div class="block_div"><h5 class="mb-0">{{'home.COMMIT' | translate}}</h5></div>
+                         <div class="block_div"><h5 class="mb-0 text-capitalize">{{'home.COMMIT' | translate}}</h5></div>
                         </div>
 
 
@@ -132,7 +132,7 @@
                   <div class="view_moble_tble" *ngFor="let hashinput of hashdata.BlockchainBlockInputFetchQuery">
                       <div class="row">
                         <div class="col-12">
-                         <div class="block_div"><h6>{{'home.COMMIT' | translate}}</h6><span class="blck_value">{{ hashinput.Data }}</span></div>
+                         <div class="block_div"><h6 class="text-capitalize">{{'home.COMMIT' | translate}}</h6><span class="blck_value">{{ hashinput.Data }}</span></div>
                         </div>
 
 
@@ -177,7 +177,7 @@
                           <div class="block_div"><h5 class="mb-0">{{'home.SPENT' | translate}}</h5></div>
                         </div>
                       <div class="col-lg-8 order-2">
-                        <div class="block_div"><h5 class="mb-0">{{'home.COMMIT' | translate}}</h5></div>
+                        <div class="block_div"><h5 class="mb-0 text-capitalize">{{'home.COMMIT' | translate}}</h5></div>
                       </div>
 
 
@@ -192,7 +192,7 @@
                           <div class="block_div"><h6>{{'home.SPENT' | translate}}</h6><span class="blck_value">{{ hashoutput.Spent }}</span></div>
                         </div>
                       <div class="col-12 col-sm-4 col-md-4 col-lg-8 order-lg-2">
-                        <div class="block_div"><h6>{{'home.COMMIT' | translate}}</h6><span class="blck_value">{{ hashoutput.Commit }}</span></div>
+                        <div class="block_div"><h6 class="text-capitalize">{{'home.COMMIT' | translate}}</h6><span class="blck_value">{{ hashoutput.Commit }}</span></div>
                       </div>
 
 
@@ -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;
     });
    }
@@ -56,6 +56,10 @@ export class BlockDetailComponent implements OnInit {
           if (res['status'] == 200) {
             this.hasdata = true;
             this.hashdata = res.response;
+            //console.log(res.response.BlockchainBlockOutputFetchQuery);
+            if(res.response.BlockchainBlockOutputFetchQuery){
+              res.response.BlockchainBlockOutputFetchQuery.sort((a,b)=> (a.OutputType > b.OutputType ? 1 : -1))
+            }
           }
         },
         error => {

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/graph-view/graph-detail/graph-detail.component.ts

@@ -22,7 +22,7 @@ export class GraphDetailComponent implements OnInit {
   public title: any;
   public id:any;
   public chartType : any = [];
-  public selectedItem: Number = 1;
+  public selectedItem: Number = 7;
   public selectedItem8: Number = 1;
   public selectedItem12: Number = 4;
   public Type: any = '';
@@ -63,7 +63,7 @@ export class GraphDetailComponent implements OnInit {
     switch(this.chartType){
       case 'total-difficulty':
         // this.totalDifficultyreq();
-          this.comp.Difficultyreq('total').then(res => {
+          this.comp.Difficultyreq('total', '', '', 'all','').then(res => {
             this.hashdata = this.comp.linearTotalGraphData;
             console.log('this.comp.linearTotalGraphData',this.comp.linearTotalGraphData);
             this.hashdata.layout.height = 300;
@@ -71,7 +71,7 @@ export class GraphDetailComponent implements OnInit {
             //this.hashdata.layout.yaxis2.position = 1.25;
             this.title = 'Total Difficulty';
             this.id= 'total-difficulty';
-            this.selectedItem = 6;
+            this.selectedItem = 7;
             this.titleService.setTitle(
               this.route.snapshot.data.title + ' - ' + this.title,
             );
@@ -80,7 +80,7 @@ export class GraphDetailComponent implements OnInit {
           break;
         case 'target-difficulty':
             // this.totalDifficultyreq();
-              this.comp.Difficultyreq('target','','','1 week').then(res => {
+              this.comp.Difficultyreq('target','','','all').then(res => {
                 this.hashdata = this.comp.linearGraphData;
                 // console.log('this.comp.linearGraphData',this.comp.linearGraphData);
                 // this.hashdata.layout.height = 300;
@@ -118,11 +118,11 @@ export class GraphDetailComponent implements OnInit {
           });
           break;
         case 'blocks':
-          this.comp.blockreq().then(res => {
+          this.comp.blockreq('', '', 'all').then(res => {
             this.hashdata = this.comp.barGraphData;
             this.hashdata.layout.height = 300;
             this.title = 'Blocks';
-            this.selectedItem = 1;
+            this.selectedItem = 7;
             this.titleService.setTitle(
               this.route.snapshot.data.title + ' - ' + this.title,
             );
@@ -143,19 +143,19 @@ export class GraphDetailComponent implements OnInit {
             });
             break;  
         case 'transaction-fees':
-          this.comp.Transcationreq().then(res => {
+          this.comp.Transcationreq('', '', 'all').then(res => {
             this.hashdata = this.comp.transcationGraphData;
             //console.log(this.hashdata);
             this.hashdata.layout.height = 300;
             this.title = 'Transaction Fees';
-            this.selectedItem = 3;
+            this.selectedItem = 7;
             this.titleService.setTitle(
               this.route.snapshot.data.title + ' - ' + this.title,
             );
           });
           break;
         case 'supply-growth':
-          this.comp.Growthreq("","","1 week").then(res => {
+          this.comp.Growthreq('', '', 'all').then(res => {
             this.hashdata = this.comp.growthGraphData;
             this.hashdata.layout.height = 300;
             this.title = 'Supply Growth';
@@ -165,7 +165,7 @@ export class GraphDetailComponent implements OnInit {
           });
           break;
         case 'blocks-mined':
-          this.comp.Blockminedreq('','','1 week').then(res => {
+          this.comp.Blockminedreq('', '', 'all').then(res => {
             this.hashdata = this.comp.doubleareaGraphData;
             this.hashdata.layout.height = 300;
             this.title = 'Blocks Mined';
@@ -187,7 +187,7 @@ export class GraphDetailComponent implements OnInit {
           // });
           break;
         case 'avg-block-interval':
-          this.comp.Blockspersecreq('','','1 week').then(res => {
+          this.comp.Blockspersecreq('', '', 'all').then(res => {
             this.hashdata = this.comp.areaGraphData;
             this.hashdata.layout.height = 300;
             // this.hashdata.layout.width =
@@ -199,7 +199,7 @@ export class GraphDetailComponent implements OnInit {
           });
           break;
         case 'blocks-by-algorithm':
-        this.comp.stackchartreq('','','1 week').then(res => {
+        this.comp.stackchartreq('', '', 'all').then(res => {
           this.hashdata = this.comp.stackGraphData;
           this.hashdata.layout.height = 300;
           this.title = 'Blocks by Algorithm';
@@ -219,7 +219,7 @@ export class GraphDetailComponent implements OnInit {
         });
         break;
         case 'transactions-by-date':
-          this.comp.Transactionlinechartreq('','','1 week').then(res => {
+          this.comp.Transactionlinechartreq('', '', 'all').then(res => {
             this.hashdata = this.comp.feeGraphData;
             this.hashdata.layout.height = 300;
             // this.hashdata.layout.width =

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

@@ -24,7 +24,194 @@
     </div>
   </div>
 </div> -->
-<div class="row" *ngIf="latestblockdetail">
+<div class="row">
+
+
+  <div class="col-sm-7 col-md-8 mb-2">
+    <div class="position-relative">
+      <epic-explorer-search></epic-explorer-search>
+    </div>
+    <div *ngIf="halvingtext" class="text-center" display=none>
+      <!-- <p class="mb-0 mt-3 mb-2 havlingtext">Next <span class="big-epic">EPIC</span> halving in <span><span class="big-epic">{{this.halvingtext}}</span><br><span class="havlingtime">&nbsp;&nbsp; DAYS &nbsp;&nbsp; HOURS &nbsp;MINUTES</span></span></p>  -->
+    </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/epic-cash-logo.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" #odometer>
+              <p class="block_heading">{{ "home.LATEST_BLOCK_AGE" | translate }}</p>
+              <p class="block_value_v2 medtxtwid latestblockarea" [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>
+                <span class="smalltext pl-2 epicipadresize">Epic</span>
+                <!-- {{ latestblockdetail.coin_existence | number }} -->
+              </p>
+              <span class="smalltext">Max Supply <span style="color:#bf9b32;"> 21,000,000</span></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-md-12 targetandhashrate">
+    <div class="blockchain_firstrow">
+      <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 text-mobile-center">
+          <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 text-mobile-center">
+          <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 +248,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"
@@ -137,31 +285,6 @@
       </div>
     </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
@@ -198,4 +321,4 @@
   </div>
 
 
-</div>
+</div> -->

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

@@ -15,11 +15,38 @@ 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;
+  timeout_11;
+  halvingtext;
+  havlingTimer;
   @ViewChild("minhgt", { static: false }) elementView: ElementRef;
+  @ViewChild("odometer", { static: false }) odometerRef: ElementRef;
 
   minHeight: number;
+  apiInterval;
 
   constructor(
     private chartService: ChartService,
@@ -29,13 +56,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 +94,179 @@ 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;
+              //console.log(parseFloat(this.epicData.lastPrice).toFixed(3));
+              this.epicData.lastPrice = parseFloat(this.epicData.lastPrice).toFixed(3);
+              resolve();
+            }
+          },
+          error => {}
+        );
+    });
+  }
+  timercountdown(daysLeft: number): void {
+    // Calculate the target date based on the number of days left
+    let days = Math.floor(daysLeft);
+    let hoursDecimal = (daysLeft - days) * 24;
+    let hours = Math.floor(hoursDecimal);
+    let minutesDecimal = (hoursDecimal - hours) * 60;
+    let minutes = Math.floor(minutesDecimal);
+    let secondsDecimal = (minutesDecimal - minutes) * 60;
+    let seconds = Math.floor(secondsDecimal);
+    let targetDate = new Date();
+    // console.log(days ,hours , minutes, seconds );
+    targetDate.setDate(targetDate.getDate() + days);
+    targetDate.setHours(targetDate.getHours() + hours);
+    targetDate.setMinutes(targetDate.getMinutes() + minutes);
+    targetDate.setSeconds(targetDate.getSeconds() + seconds);
+    let countDownDate = targetDate.getTime();
+    // Update the countdown every 1 second
+    this.havlingTimer = setInterval(() => {
+      // Get today's date and time
+      let now = new Date().getTime();
+      // Find the distance between now and the count down date
+      let distance = countDownDate - now;
+      // Time calculations for days, hours, minutes and seconds
+      let days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      let seconds = Math.floor((distance % (1000 * 60)) / 1000);
+      let text = "";
+      let text2 = days +':'+ ('0' + hours).slice(-2) +':'+ ('0' + minutes).slice(-2);
+      if(days == 1){
+        text = "1 day ";
+      }else if (days > 1){
+        text = days+" days ";
+      }
+      if(hours == 1){
+        text = text + "1 hour ";
+      }else if (hours > 1){
+        text = text + hours+" hours ";
+      }
+      if(minutes == 1){
+        text = text + "1 minute ";
+      }else if (minutes > 1){
+        text = text + minutes+" minutes ";
+      }
+      this.halvingtext = text2;
+    }, 5 * 1000);
+  }
+  public parseDays (value) { 
+    let year, months, week, days;
+    let text = "";
+    year = value >= 365 ? Math.floor(value / 365) : 0;
+    value = year ? value - (year*365) : value;
+    months = value >= 30 ? Math.floor((value % 365) / 30) : 0;
+    value = months ? value - (months*30) : value;
+    week = value >= 7 ? Math.floor((value % 365) / 7) : 0;
+    value = week ? value - (week*7) : value;
+    days = value < 7 ? Math.floor((value % 365) % 7) : 0;
+    if(year == 1){
+      text = "1 year ";
+    }else if (year > 1){
+      text = year+" years ";
+    }
+    if(months == 1){
+      text = text + "1 month ";
+    }else if (months > 1){
+      text = text + months+" months ";
+    }
+    if(week == 1){
+      text = text + "1 week ";
+    }else if (week > 1){
+      text = text + week+" weeks ";
+    }
+    if(days == 1){
+      text = text + "1 day ";
+    }else if (days > 1){
+      text = text + days+" days ";
+    }
+    return text;
+    // console.log("years = ", year); 
+    // console.log("months = ",months); 
+    // console.log("weeks = ",week); 
+    // console.log("days = ", days);
+    // console.log(text);
+  }
+
+  public gettingprevioushashList() {
+    return new Promise<void>((resolve, reject) => {
+      this.chartService
+        .apiGetRequest("", "/blockchain_block/previousblockdetails")
+        .subscribe(
+          res => {
+            if (res["status"] == 200) {
+              // halving calculation
+              let timestamp = Math.floor(new Date().getTime() / 1000);
+              let blockReward = 4;
+              let currentCoin = res.response.coin_existence;
+              let endSupply = 16571520;
+
+              if(currentCoin >= 13109760 && currentCoin < 16571520 ){
+                blockReward = 4;
+                endSupply = 16571520;
+              }else if(currentCoin >= 16571520 && currentCoin < 18875520){
+                blockReward = 2;
+                endSupply = 18875520;
+              }else if(currentCoin >= 18875520 && currentCoin < 20342880){
+                blockReward = 1;
+                endSupply = 20342880;
+              }else if(currentCoin >= 20342880 && currentCoin < 20671380){
+                blockReward = 0.15625;
+                endSupply = 20671380;
+              }else if(currentCoin >= 20671380){
+                blockReward = 0.078125;
+                endSupply = 20835630;
+              }
+
+              let remainingBlock = endSupply - currentCoin;
+              let remainingBlockPerDay = (60*24) * blockReward;
+              let daysLeft = remainingBlock/remainingBlockPerDay;
+              console.log(endSupply,currentCoin);
+              console.log(daysLeft);
+              this.halvingtext = this.timercountdown(daysLeft);
+              // console.log(this.halvingtext);
+
+              // 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 +276,70 @@ 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;
+                  this.timeout_11 =setTimeout(() => {
+                    console.log('000');
+                    const odometerElement = this.odometerRef.nativeElement;
+                    const digitElement = odometerElement.querySelector('.latestblockarea .odometer-inside span.odometer-digit:first-child span.odometer-digit-inner span.odometer-value');
+                    const digitElementToHide = odometerElement.querySelector('.latestblockarea .odometer-inside span.odometer-digit:first-child');
+                    console.log(digitElement);
+                    console.log('111-'+digitElement.innerText);
+                    if (digitElement.innerText == '0') {
+                      digitElementToHide.style.display = 'none';
+                      console.log('222');
+                    }
+                  }, 4000);
+                }, 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 +353,20 @@ export class BlockDetailListComponent implements OnInit {
   }
 
   ngOnDestroy() {
+    clearInterval(this.apiInterval);
+    clearInterval(this.havlingTimer);
+    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);
+    clearTimeout(this.timeout_10);
+    clearTimeout(this.timeout_11);
+
     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/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,96 @@
+<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" (change)="onMineChange($event)">
+              <option value="51pool" selected> 51pool </option>
+              <option value="epicmine"> epicmine </option>
+            </select>
+          <a [href]="poolUrl" 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 +141,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,60 +214,61 @@
     </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(
-            pagedata.currentPage - 1,
-            paginationForm.value.pagesize
-          )
-        ">
+        gettinghashListFunc(
+          pagedata.currentPage - 1,
+          paginationForm.value.pagesize
+        )
+      ">
         <a class="page-link"><i class="fa fa-angle-left"></i></a>
       </li>
       <li class="page-item d-none d-md-inline-flex">
         <a class="page-link">{{ pagedata.currentPage }} / {{ pagedata.totalPages }}</a>
       </li>
       <li class="page-item" (click)="
-          gettinghashList(
-            pagedata.currentPage + 1,
-            paginationForm.value.pagesize
-          )
-        ">
+        gettinghashListFunc(
+          pagedata.currentPage + 1,
+          paginationForm.value.pagesize
+        )
+      ">
         <a class="page-link"><i class="fa fa-angle-right"></i></a>
       </li>
       <li class="page-item d-none d-md-inline-flex" (click)="
-          gettinghashList(pagedata.totalPages, paginationForm.value.pagesize)
-        ">
+        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 +313,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 +366,4 @@
 </div>
 
 
-</div>
+</div> -->

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

@@ -22,6 +22,10 @@ export class LatestblocksComponent implements OnInit {
   public CurrentpageNumber: Number;
   public FirstPageListData: any = [];
   public DifferentList: any = [];
+  public pool_epicmine: any = {};
+  public pool_51pool: any = {};
+  public poolUrl: string = 'https://51pool.online';
+  public selectedpool = "51pool";
   public blockAppend: any;
   public blockdetails: any;
   public zibra_color = "zibra_white";
@@ -31,9 +35,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 +58,125 @@ 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();
+    this.getepicmineAPI();
   }
 
-  public gettinghashList(CurrentPage, PageSize) {
+  ngAfterViewInit() {
+    this.apiBlockInterval = setInterval(() => {
+      // console.log('getLastCeatedBlock called');
+      if(this.selectedpool == 'epicmine'){
+        this.getepicmineAPI();
+      }else{
+        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);
+  }
+
+  onMineChange(event: Event): void {
+    const selectedValue = (event.target as HTMLSelectElement).value;
+    // console.log('Selected Value:', selectedValue);
+    if(selectedValue == 'epicmine'){
+      this.pool51_hashrateCuckoo = this.pool_epicmine.poolStats.hashrateCuckoo;
+      this.pool51_hashrateProgPow = this.pool_epicmine.poolStats.hashrateProgPow;
+      this.pool51_hashrateRandomX = this.pool_epicmine.poolStats.hashrateRandomX;
+      this.pool51_onlineCuckoo = this.pool_epicmine.poolStats.onlineCuckoo;
+      this.pool51_onlineProgPow = this.pool_epicmine.poolStats.onlineProgPow;
+      this.pool51_onlineRandomX = this.pool_epicmine.poolStats.onlineRandomX;
+      this.pool51_currentHeight = this.pool_epicmine.poolStats.currentHeight;
+      this.poolUrl = 'https://epicmine.io/';
+      this.selectedpool = 'epicmine';
+    }else if(selectedValue == '51pool'){
+      this.pool51_hashrateCuckoo = this.pool_51pool.hashrateCuckoo;
+      this.pool51_hashrateProgPow = this.pool_51pool.hashrateProgPow;
+      this.pool51_hashrateRandomX = this.pool_51pool.hashrateRandomX;
+      this.pool51_onlineCuckoo = this.pool_51pool.onlineCuckoo;
+      this.pool51_onlineProgPow = this.pool_51pool.onlineProgPow;
+      this.pool51_onlineRandomX = this.pool_51pool.onlineRandomX;
+      this.pool51_currentHeight = this.pool_51pool.currentHeight;
+      this.poolUrl = 'https://51pool.online';
+      this.selectedpool = '51pool';
+    }
+  }
+
+  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.pool_51pool = 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 getepicmineAPI() {
+    return new Promise<void>((resolve, reject) => {
+      this.chartService.apiGetRequest('','/blockchain_block/getepicmineapi').subscribe(
+        res => {
+          if (res['status'] == 200) {
+            let json = res.response;
+            this.pool_epicmine = json;
+            if(this.selectedpool == 'epicmine'){
+              this.pool51_hashrateCuckoo = this.pool_epicmine.poolStats.hashrateCuckoo;
+              this.pool51_hashrateProgPow = this.pool_epicmine.poolStats.hashrateProgPow;
+              this.pool51_hashrateRandomX = this.pool_epicmine.poolStats.hashrateRandomX;
+              this.pool51_onlineCuckoo = this.pool_epicmine.poolStats.onlineCuckoo;
+              this.pool51_onlineProgPow = this.pool_epicmine.poolStats.onlineProgPow;
+              this.pool51_onlineRandomX = this.pool_epicmine.poolStats.onlineRandomX;
+              this.pool51_currentHeight = this.pool_epicmine.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 +185,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 +218,7 @@ export class LatestblocksComponent implements OnInit {
     );
   }
 
+  /*
   getLastCeatedBlock() {
     this.chartService.getLatestblockdetails().subscribe(response => {
       this.blockdetails = response;
@@ -98,6 +246,7 @@ export class LatestblocksComponent implements OnInit {
       this.lastblock = this.blockdetails.block_height;
     });
   }
+  */
 
   public comparer(otherArray){
     return function(current){

src/app/view/location/location.component.css

@@ -0,0 +1,20 @@
+.map-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex; /* Use flexbox to center the map within its container */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+}
+
+.map-frame {
+  border: 2px solid black;
+  height: 70%; /* Adjust the height of the map frame */
+  width: 70%; /* Adjust the width of the map frame */
+}
+
+#map {
+  height: 100%;
+}

src/app/view/location/location.component.html

@@ -0,0 +1,8 @@
+<div class="view_content" >
+
+  <div class="map-container">
+    <div class="map-frame">
+      <div id="map"></div>
+    </div>
+  </div>
+</div>  

src/app/view/location/location.component.spec.ts

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

src/app/view/location/location.component.ts

@@ -0,0 +1,71 @@
+import { Component, AfterViewInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import * as L from 'leaflet';
+import 'leaflet.markercluster'; // Import the marker cluster library
+
+@Component({
+  selector: 'app-location',
+  templateUrl: './location.component.html',
+  styleUrls: ['./location.component.css']
+})
+export class LocationComponent implements AfterViewInit {
+  private map;
+  private locations = [];
+  private markerClusterGroup: L.MarkerClusterGroup; // Create a marker cluster group
+
+  constructor(private http: HttpClient) {}
+
+  ngAfterViewInit(): void {
+    this.initMap();
+    this.fetchLocationData();
+  }
+
+  private initMap(): void {
+    const isMobile = window.innerWidth < 768;
+    this.map = L.map('map', {
+      center: [isMobile ? 50 : 30, isMobile ? 20 : -20],
+      zoom: 3,
+      maxBounds:  L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)) , // Disable horizontal scrolling
+      bounceAtZoomLimits:true,
+    });
+
+    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 18,
+      minZoom: 2,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    });
+
+    tiles.addTo(this.map);
+    this.markerClusterGroup = L.markerClusterGroup(); // Initialize the marker cluster group
+    this.markerClusterGroup.addTo(this.map); // Add it to the map
+  }
+
+  private addMarkers(): void {
+    const arrayOfLoc = this.locations
+      .map(e => {
+        if (e && e.geo && e.geo.ll && e.geo.city) {
+          return { lat: e.geo.ll[0], lng: e.geo.ll[1], name: e.geo.city };
+        }
+        return null;
+      })
+      .filter(e => e !== null);
+
+    for (const location of arrayOfLoc) {
+      const customIcon = L.icon({
+        iconUrl: "/assets/img/icons8-location-80.png",
+        iconSize: [32, 32], // Adjust the icon size as needed
+        iconAnchor: [16, 32], // Adjust the icon anchor as needed
+      });
+      const marker = L.marker([location.lat, location.lng],{ icon: customIcon });
+      marker.bindPopup(location.name);
+      this.markerClusterGroup.addLayer(marker); // Add marker to the cluster group
+    }
+  }
+
+  private fetchLocationData(): void {
+    this.http.get('https://explorer.epic.tech/epic_explorer/v1/blockchain_block/v1/peers/all').subscribe((data: any) => {
+      this.locations = data.response;
+      this.addMarkers();
+    });
+  }
+}

src/app/view/view-routing.module.ts

@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { HomeLayoutComponent } from '../shared/components/layouts/home-layout/home-layout.component';
 import { SiteLayoutComponent } from '../shared/components/layouts/site-layout/site-layout.component';
 import {  ApiViewComponent } from '../view/api-view/api-view.component';
+import {  LocationComponent } from '../view/location/location.component';
 const viewRoutes: Routes = [
   {
     path: '',
@@ -38,6 +39,10 @@ const siteRoutes: Routes = [
   {
     path: 'api-index',
     component: ApiViewComponent
+  },
+  {
+    path: 'nodes-distribution',
+    component: LocationComponent
   }
 ];
 

src/app/view/view.module.ts

@@ -10,10 +10,10 @@ import { TransServiceService } from '../shared/services/trans-service.service';
 import { ChartService} from '../shared/services/chart.service';
 import { CustomLoader } from '../app.module';
 import { ApiViewComponent } from './api-view/api-view.component';
-
+import { LocationComponent } from './location/location.component';
 
 @NgModule({
-  declarations: [ApiViewComponent],
+  declarations: [ApiViewComponent, LocationComponent],
   imports: [CommonModule, ViewRoutingModule, SharedModule,
     TranslateModule.forChild({
       loader: {provide: TranslateLoader, useClass: CustomLoader, deps : [HttpClient]},         

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,15 +1,16 @@
 @media(min-width: 992px){
-    .block_div {min-width: 110px; 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;}
-    .block_div.addr_div{min-width: 150px;}
-    .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 .row, .row.peer_table_data{display: table;}
+.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;}
+.block_div.addr_div{min-width: 150px;}
+.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%; 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;}
 .view_moble_tble .block_div{text-align: left;}
@@ -23,96 +24,181 @@
 }
 
 @media(max-width: 1199px){
-    .ftr_links{padding-left: 0px;}
-    .ftr_links::before{content: '|'; }
-    .footer_div{font-size: 12px;}
+.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%;}
+p.block_value_v2.epicprice {  font-size: 22px;  line-height: normal;  height: auto;}
 }
 @media (min-width: 992px) and (max-width: 1199px){
-    .detail_div .count{font-size: 20px;}
-    .detail_div .desc{font-size: 15px;}
-    .detail_div .count span{font-size: 14px;}
-    .chart_heading{font-size: 18px;}
-    .day_filter a{font-size: 11px; margin: 0 4px;}
-    .blck_value {font-size: 12px; }
-    .block_div {min-width: 87px;}
-    .peer_table_data .block_div {min-width: 105px;}
-    .block_div.addr_hdng{min-width: 120px;}
-    .hash{height: 8px; width: 3px;}
-    .txn_peers{margin-top: 0px;padding:2px 10px 1px;font-size: 12px;}
+.detail_div .count{font-size: 20px;}
+.detail_div .desc{font-size: 15px;}
+.detail_div .count span{font-size: 14px;}
+.chart_heading{font-size: 18px;}
+.day_filter a{font-size: 11px; margin: 0 4px;}
+.blck_value {font-size: 12px; }
+.block_div {min-width: 87px;}
+.peer_table_data .block_div {min-width: 105px;}
+.block_div.addr_hdng{min-width: 120px;}
+.hash{height: 8px; width: 3px;}
+.txn_peers{margin-top: 0px;padding:2px 10px 1px;font-size: 12px;}
 
 }
 @media (min-width: 768px) and (max-width: 991px){
-    .detail_div{padding: 10px 0;}
-    .detail_div .count{font-size: 20px;}
-    .detail_div .desc{font-size: 13px;}
-    .detail_div .count span{font-size: 12px;}
-    .chart_heading{font-size: 18px;}
-    .day_filter a{font-size: 12px;}
-    .theme_switch{margin-left: 11px;}
-    .view_txt{font-size: 13px;}
-    .peer_table_data .col-md-3 {flex: 0 0 40%; max-width: 40%; }
+span.epicipadresize {
+    font-size: 9px;
+}
+.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;}
+.detail_div .count span{font-size: 12px;}
+.chart_heading{font-size: 18px;}
+.day_filter a{font-size: 12px;}
+.theme_switch{margin-left: 11px;}
+.view_txt{font-size: 13px;}
+.peer_table_data .col-md-3 {flex: 0 0 40%; max-width: 40%; }
 }
 @media(max-width: 991px){
-    .container{max-width: 100%;}
-    .hght_40{height: 40px;overflow: hidden;}
-    .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 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;}
-    
+.container{max-width: 100%;}
+.hght_40{height: 40px;overflow: hidden;}
+.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: #434542; font-size: 11px; 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: 0px;}
+.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){
-    .day_filter a{margin: 0 4px; font-size: 11px;}
-    .chart_heading{font-size: 19px;}
-    .txn_count{font-size: 12px;}
-    .day_filter{padding: 10px 15px;}
-    .explore_all{font-size: 13px; padding: 10px 15px;}
-    .btn_primary{font-size: 13px;}
-    .search{max-width: 100%; margin-bottom: 15px !important;}
-    .logo_txt{font-size: 35px;}
-    .footer_div{text-align: center;}
-    .view_txt{font-size: 15px;}
-    .ytitle, .y2tick, .y3tick, .ytick, .y2title, .y3title, .xtitle, .xtick{font-size: 11px !important}
-    .chart_section.mt-4{margin-top: 0px !important;}
-    .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}
-
+.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;}
+.day_filter{padding: 10px 15px;}
+.explore_all{font-size: 13px; padding: 10px 15px;}
+.btn_primary{font-size: 13px;}
+.search{max-width: 100%; margin-bottom: 15px !important;}
+.logo_txt{font-size: 35px;}
+.footer_div{text-align: center;}
+.view_txt{font-size: 15px;}
+.ytitle, .y2tick, .y3tick, .ytick, .y2title, .y3title, .xtitle, .xtick{font-size: 11px !important}
+.chart_section.mt-4{margin-top: 0px !important;}
+/* .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%;}
-    .mble_view_hdr{margin-left: auto;}
-    .mble_view_hdr .nav-item{font-size: 13px;}
-    .mble_view_hdr .flag{width: 20px; height: 20px;}
-    .mble_view_hdr .nav-link{padding: .5rem;}
-    .theme_switch{padding-top: 8px; padding-bottom: 8px;}
-    .theme_switch img{height: 15px;}
-    .peer_table_data .col-6 {flex: 0 0 100%; max-width: 100%; }
-    /* .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;}
+.tableminheight .mobile_table h6 {
+    margin-bottom: 0px;
+}
+.tableminheight .mobile_table .tble_col .block_div {
+    height: 18px;
+}
+.tableminheight .mobile_table {
+    padding-left: 22px;
+}
+.mobile_table h6, .mobile_table span.blck_value{font-size: 12px;}
+.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;}
+.mble_view_hdr .nav-link{padding: .5rem;}
+.theme_switch{padding-top: 8px; padding-bottom: 8px;}
+.theme_switch img{height: 15px;}
+.peer_table_data .col-6 {flex: 0 0 100%; max-width: 100%; }
+/* .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;} */
-    .view_page_header .navbar-brand{display: block; margin: 0 auto;}
-    .view_page_header .ml-auto{margin: 0 !important; display: inherit;}
+/* .view_page_header{text-align: center;} */
+.view_page_header .navbar-brand{display: block; margin: 0 auto;}
+.view_page_header .ml-auto{margin: 0 !important; display: inherit;}
+.blockchain_firstrow .subloader {
+    margin: 0 auto;
+}
+.text-mobile-center {
+    text-align: center;
+}
+.ednalogoMobile {
+    margin: 0 auto!important;
+    margin-bottom: 18px!important;
+}
+.footer_div .logo_img {
+    margin-bottom: 15px
+}
 }
 @media(max-width: 470px){
-    .navbar-expand .navbar-collapse.home_mble_hdr{display: block !important;} 
+.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: 400px){
+    .tableminheight .mobile_table {
+        padding-left: 10px;
+    }
+    .tableminheight .mobile_table h6,
+    .mobile_table span.blck_value {
+        font-size: 11px;
+    }
 }
 @media(max-width: 365px){
-    .mobile_table .col-6 {flex: 0 0 100%;max-width: 100%;}
-    .view_page_header .search_btn{display: none;}
-    .home_tst_net{font-size: 13px;}
-}
+.mobile_table .col-6 {flex: 0 0 100%;max-width: 100%;}
+.view_page_header .search_btn{display: none;}
+.home_tst_net{font-size: 13px;}
+}

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;
+padding: 15px;
+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;
 }
@@ -634,11 +643,11 @@ body.dark_theme {
   color: #f3f4f2 !important;
   color: #BF9B30;
 }
-.dark_theme .blck_value{color: #a6a6a6;}
+.dark_theme .blck_value{color: #fff;}
 .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,40 @@ 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;
 }
+.big-epic {
+  font-size: 36px;
+  display: inline-flex;
+  align-items: center;
+  color: #bf9b32;
+  padding: 0px 5px;
+  height: 30px;
+}
+.havlingtext {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.havlingtime {
+  color: #bf9b32;
+  font-size: 10px;
+  height: 6px;
+  display: block;
+}
 .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 +209,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 +233,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 +258,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 +303,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 +315,12 @@ a:focus {
   color: #BF9B30;
   border-top: 1px solid #BF9B30;
 }
+.blockdetailicon {
+  filter: invert(55%) sepia(84%) saturate(326%) hue-rotate(7deg) brightness(94%) contrast(99%);
+}
+.imagegoldcolor {
+  filter: invert(55%) sepia(84%) saturate(326%) hue-rotate(7deg) brightness(94%) contrast(99%);
+}
 .explore_all a {
   color: #BF9B30;
 }
@@ -397,7 +436,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 +456,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 +515,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 +585,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 +599,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 +613,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 +631,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 +673,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 +723,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 +735,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 +756,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 +776,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 +789,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 +882,80 @@ 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){
+  .big-epic {
+    font-size: 32px;
+  }
+  .havlingtime {
+    font-size: 9px;
+  }
 .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
   },
 }