UI changes and peers changes

server/controllers/BlockchainBlock.ts

@@ -1042,6 +1042,7 @@ export class BlockchainBlockController {
           next(err_msg);
         });
       let date = [],
+      blockDate = [],
         DifficultyCuckaroo = [],
         DifficultyCuckatoo = [],
         DifficultyProgpow = [],
@@ -1056,6 +1057,7 @@ export class BlockchainBlockController {
         DifficultyRandomx.push(parseInt(e.total_difficulty_randomx));
       });
         BlockQuery.forEach(e => {
+          blockDate.push(moment(e.date).format('YYYY-MM-DD'));
         blocks.push(parseInt(e.blocks));
       });
       response.status(200).json({
@@ -1065,6 +1067,7 @@ export class BlockchainBlockController {
         response: {
           Date: date,
           Blocks: blocks,
+          blockDate:blockDate,
           DifficultyCuckaroo: DifficultyCuckaroo,
           DifficultyCuckatoo: DifficultyCuckatoo,
           DifficultyProgpow: DifficultyProgpow,

server/i18n/en.json

@@ -60,6 +60,12 @@
         "SEARCH_RESULT" : "Search Results for",
         "SEARCH_RESULT1" : "Your search term",
         "SEARCH_RESULT2" : "is too short",
-        "SEARCH_RESULT3" : "please enter at least six characters if searching by hash"
+        "SEARCH_RESULT3" : "please enter at least six characters if searching by hash",
+        "PEERS" : "Peers",
+        "CAPABILITIES" : "Capabilities",
+        "USER_AGENT" : "User Agent",
+        "VERSION" : "Version",
+        "ADDR" : "Addr",
+        "DIRECTION" : "Direction"
     }
 }

src/app/app.module.ts

@@ -25,8 +25,6 @@ export class CustomLoader extends ChartService implements TranslateLoader {
     params = params.append('lang', lang);
     return this.apiGetRequest(params,'/blockchain_kernel/translator').pipe(
       map((res: any) => {
-        console.log("Data got: ");
-        console.log(res);
         return res;
       })
     );  

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

@@ -7,7 +7,7 @@ import {
 import { environment } from '../../../environments/environment';
 import { throwError, Observable, BehaviorSubject } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
-import * as io from 'socket.io-client';
+// import * as io from 'socket.io-client';
 
 @Injectable({
   providedIn: 'root',
@@ -18,12 +18,12 @@ private server = environment.domain;
   
   constructor(public http: HttpClient) {}
 
-public createSocketConnection() {
+// public createSocketConnection() {
-    this.socket = io.connect(this.server);
+//     this.socket = io.connect(this.server);
-    this.socket.on('connect', function(socket) {
+//     this.socket.on('connect', function(socket) {
-      console.log('Connected!');
+//       console.log('Connected!');
-    });
+//     });
-  }
+//   }
   
   public apiGetRequest(request: any, reqUrl): Observable<any> {
     return this.http

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

@@ -26,25 +26,25 @@
 </div> -->
 <div class="row" *ngIf="latestblockdetail">
   <div class="col-md-3">
-    <div class="text-center detail_div minhgt">
+    <div class="text-center detail_div" [ngStyle]="{'min-height.px': minHeight}">
       <p class="count mb-0">{{ latestblockdetail.block_height | number }}</p>
       <p class="mb-0 desc">{{'home.BLOCKCHAIN_HEIGHT' | translate}}</p>
     </div>
   </div>
   <div class="col-md-3">
-    <div class="text-center detail_div minhgt">
+    <div class="text-center detail_div" [ngStyle]="{'min-height.px': minHeight}">
       <p class="count mb-0">{{latestblockdetail.letest_block_num}} <span class="">{{latestblockdetail.letest_block_duration}}</span></p>
       <p class="mb-0 desc">{{'home.LATEST_BLOCK' | translate}}</p>
     </div>
   </div>
   <div class="col-md-3">
-    <div class="text-center detail_div minhgt">
+    <div class="text-center detail_div" #minhgt>
       <p class="difficulty_datas">Cuckaroo : {{latestblockdetail.targetdifficultycuckaroo | number}}, Cuckatoo : {{latestblockdetail.targetdifficultycuckatoo | number}}, ProgPow : {{latestblockdetail.targetdifficultyprogpow | number}}, RandomX : {{latestblockdetail.targetdifficultyrandomx | number}}</p>
       <p class="mb-0 desc">{{'home.LATEST_BLOCK1' | translate}}</p>
     </div>
   </div>
   <div class="col-md-3">
-    <div class="text-center detail_div minhgt">
+    <div class="text-center detail_div" [ngStyle]="{'min-height.px': minHeight}">
       <p class="count mb-0">{{latestblockdetail.coin_existence | number}} <span class="">Epic</span></p>
       <p class="mb-0 desc">{{'home.COIN_IN' | translate}}</p>
     </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { ChartService } from '../../../shared/services/chart.service';
 import { HttpParams } from '@angular/common/http';
 import * as io from 'socket.io-client';
@@ -17,9 +17,12 @@ export class BlockDetailListComponent implements OnInit {
   public latestblockdetailObservable: any;
   private server = environment.domain;
   private socket;
+  @ViewChild('minhgt', {static: false}) elementView: ElementRef;
+
+  minHeight: number;
 
   constructor(private chartService: ChartService,public translate: TransServiceService) {
-    this.chartService.createSocketConnection();
+    // this.chartService.createSocketConnection();
   }
   
   ngOnInit() {
@@ -28,6 +31,10 @@ export class BlockDetailListComponent implements OnInit {
 
   }
 
+  ngAfterViewInit() {
+    this.minHeight = this.elementView.nativeElement.offsetHeight;
+  }
+
 getBlockDetails() {
     this.latestblockdetailObservable = this.chartService
       .getLatestblockdetails()

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

@@ -387,6 +387,7 @@ export class GraphListComponent implements OnInit {
           res => {
             if (res['status'] == 200) {
               let DifficultychartDate = res.response.Date;
+              let BlocksChartDate = res.response.blockDate;
               if (fordifficult) {
                 let DifficultyCuckaroo = res.response.DifficultyCuckaroo;
                 let DifficultyCuckatoo = res.response.DifficultyCuckatoo;
@@ -405,7 +406,7 @@ export class GraphListComponent implements OnInit {
               if (forblocks) {
                 let Blockval = res.response.Blocks;
                 this.brg_last = Blockval[Blockval.length - 1];
-                this.totalBlocksFunc(DifficultychartDate, Blockval);
+                this.totalBlocksFunc(BlocksChartDate, Blockval);
               }
               resolve();
             }

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

@@ -4,65 +4,100 @@
 
     <div class="row">
       <div class="col-6 col-md-4 tble_col">
-         <div class="block_div"> <h5 class="mb-0">{{'home.HEIGHT' | translate}}</h5></div>
+        <div class="block_div">
+          <h5 class="mb-0">{{'home.HEIGHT' | translate}}</h5>
+        </div>
       </div>
       <div class="col-6 col-md-4 tble_col">
-          <div class="block_div"><h5 class="mb-0">{{'home.HASH' | translate}}</h5></div>
+        <div class="block_div">
+          <h5 class="mb-0">{{'home.HASH' | translate}}</h5>
+        </div>
       </div>
       <div class="col-6 col-md-4 tble_col">
-          <div class="block_div"><h5 class="mb-0" >{{'home.AGE' | translate}}</h5></div>
+        <div class="block_div">
+          <h5 class="mb-0">{{'home.AGE' | translate}}</h5>
+        </div>
       </div>
       <div class="col-6 col-md-4 tble_col">
-          <div class="block_div"><h5 class="mb-0">{{'home.DIFFICULTY' | translate}}</h5></div>
+        <div class="block_div">
+          <h5 class="mb-0">{{'home.DIFFICULTY' | 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.POW_ALGO' | translate}}</h5></div>
+        <div class="block_div">
+          <h5 class="mb-0">{{'home.POW_ALGO' | 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.INPUTS' | translate}}</h5></div>
+        <div class="block_div">
+          <h5 class="mb-0">#{{'home.INPUTS' | translate}}</h5>
+        </div>
       </div>
       <div class="col-6 col-md-4 tble_col">
-          <div class="block_div"><h5  class="mb-0">#{{'home.OUTPUTS' | translate}}</h5></div>
+        <div class="block_div">
+          <h5 class="mb-0">#{{'home.OUTPUTS' | translate}}</h5>
+        </div>
       </div>
       <div class="col-6 col-md-4 tble_col">
-          <div class="block_div" ><h5 class="mb-0">#{{'home.KERNELS' | translate}}</h5></div>
+        <div class="block_div">
+          <h5 class="mb-0">#{{'home.KERNELS' | translate}}</h5>
         </div>
       </div>
     </div>
-  <div [ngClass]="{mobile_table : true, hght_40: item.id != clickValue }"  id="hash_{{hashvalue.blockchain_block_height}}" #item *ngFor="let hashvalue of hashvalues">
+  </div>
+  <div [ngClass]="{mobile_table : true, hght_40: item.id != clickValue }"
+    id="hash_{{hashvalue.blockchain_block_height}}" #item *ngFor="let hashvalue of hashvalues">
 
     <div class="row">
       <div class="col-6 col-md-3 tble_col">
-       <div class="block_div">  <span *ngIf="item.id != clickValue" (click)="onClickPlus(hashvalue.blockchain_block_height);" class="expnd_blck"><i class="fa fa-plus"></i></span>
+        <div class="block_div"> <span *ngIf="item.id != clickValue"
-        <span  *ngIf="item.id == clickValue" (click)="onClickMinus(hashvalue.blockchain_block_height);" 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>
+            (click)="onClickPlus(hashvalue.blockchain_block_height);" class="expnd_blck"><i
+              class="fa fa-plus"></i></span>
+          <span *ngIf="item.id == clickValue" (click)="onClickMinus(hashvalue.blockchain_block_height);"
+            class="expnd_blck"><i class="fa fa-minus"></i></span>
+          <h6>{{'home.HEIGHT' | translate}}</h6><span class="blck_value link_to_detail"
+            routerLink="/blockdetail/{{ hashvalue.blockchain_block_height }}">{{ hashvalue.blockchain_block_height }}</span>
+        </div>
       </div>
       <div class="col-6 col-md-3 tble_col">
-        <div [title]="hashvalue.blockchain_block_hash" routerLink="/blockdetail/{{ hashvalue.blockchain_block_hash }}" class="block_div"><h6>Hash</h6><span class="blck_value">{{ hashvalue.hashstart
+        <div [title]="hashvalue.blockchain_block_hash" routerLink="/blockdetail/{{ hashvalue.blockchain_block_hash }}"
-        }}<span
+          class="block_div">
-          *ngFor="let color of hashvalue.hasharray"
+          <h6>Hash</h6><span class="blck_value">{{ hashvalue.hashstart
-          class="hash"
+        }}<span *ngFor="let color of hashvalue.hasharray" class="hash"
-          [ngStyle]="{ 'background-color': color }"
+              [ngStyle]="{ 'background-color': color }"></span>{{ hashvalue.hashend }}</span>
-        ></span
+        </div>
-        >{{ hashvalue.hashend }}</span></div>
       </div>
       <div class="col-6 col-md-3 tble_col">
-        <div class="block_div"><h6 >Age</h6><span class="blck_value">{{ hashvalue.age }}</span></div>
+        <div class="block_div">
+          <h6>Age</h6><span class="blck_value">{{ hashvalue.age }}</span>
+        </div>
       </div>
       <div class="col-6 col-md-3 tble_col">
         <!-- title="Cuckaroo : {{ hashvalue.target_difficulty_cuckaroo | number }}, Cuckatoo :  {{ hashvalue.target_difficulty_cuckatoo | number }}, Progpow : {{ hashvalue.target_difficulty_progpow | number }}, Randomx : {{ hashvalue.target_difficulty_randomx | number }}" -->
-        <div class="block_div"><h6>Difficulty</h6><span class="blck_value" >{{(hashvalue.powalgo == 'Cuckoo') ? ((hashvalue.target_difficulty_cuckatoo + hashvalue.target_difficulty_cuckaroo) | number) : (hashvalue.powalgo == 'RandomX') ? (hashvalue.target_difficulty_randomx | number) : (hashvalue.powalgo == 'ProgPow') ? (hashvalue.target_difficulty_progpow | number) : 0}}</span></div>
+        <div class="block_div">
+          <h6>Difficulty</h6><span
+            class="blck_value">{{(hashvalue.powalgo == 'Cuckoo') ? ((hashvalue.target_difficulty_cuckatoo + hashvalue.target_difficulty_cuckaroo) | number) : (hashvalue.powalgo == 'RandomX') ? (hashvalue.target_difficulty_randomx | number) : (hashvalue.powalgo == 'ProgPow') ? (hashvalue.target_difficulty_progpow | number) : 0}}</span>
+        </div>
       </div>
       <div class="col-6 col-sm-6 col-md-3 tble_col">
-        <div class="block_div"><h6 class="mb-0">Pow Algo</h6><span class="blck_value">{{ hashvalue.powalgo }}</span></div>
+        <div class="block_div">
+          <h6 class="mb-0">Pow Algo</h6><span class="blck_value">{{ hashvalue.powalgo }}</span>
+        </div>
       </div>
       <div class="col-6 col-sm-6 col-md-3 tble_col">
-        <div class="block_div"><h6>#{{'home.INPUTS' | translate}}</h6><span class="blck_value">{{ hashvalue.input_count }}</span></div>
+        <div class="block_div">
+          <h6>#{{'home.INPUTS' | translate}}</h6><span class="blck_value">{{ hashvalue.input_count }}</span>
+        </div>
       </div>
       <div class="col-6 col-md-3 tble_col">
-        <div class="block_div"><h6 >#{{'home.OUTPUTS' | translate}}</h6><span class="blck_value">{{ hashvalue.output_count }}</span></div>
+        <div class="block_div">
+          <h6>#{{'home.OUTPUTS' | translate}}</h6><span class="blck_value">{{ hashvalue.output_count }}</span>
+        </div>
       </div>
       <div class="col-6 col-md-3 tble_col">
-        <div class="block_div" ><h6>#{{'home.KERNELS' | translate}}</h6><span class="blck_value">{{ hashvalue.kernal_count }}</span></div>
+        <div class="block_div">
+          <h6>#{{'home.KERNELS' | translate}}</h6><span class="blck_value">{{ hashvalue.kernal_count }}</span>
+        </div>
       </div>
       <!-- <div class="col-6 col-md-4">
           <a class="txt_secondary" href="JavaScript:Void(0);"
@@ -80,11 +115,8 @@
     <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
+        <select class="" formControlName="pagesize"
-          class=""
+          (change)="gettinghashList(pagedata.currentPage, $event.target.value)">
-          formControlName="pagesize"
-          (change)="gettinghashList(pagedata.currentPage, $event.target.value)"
-        >
           <option value="20">20</option>
           <option value="50">50</option>
           <option value="100">100</option>
@@ -95,49 +127,150 @@
       </div>
     </div>
     <ul class="pagination justify-content-end m-0 d-inline-flex">
-      <li
+      <li class="page-item d-none d-md-inline-flex" (click)="
-        class="page-item d-none d-md-inline-flex"
-        (click)="
           gettinghashList(pagedata.startPage, paginationForm.value.pagesize)
-        "
+        ">
-      >
         <a class="page-link"><i class="fa fa-angle-double-left"></i></a>
       </li>
-      <li
+      <li class="page-item" (click)="
-        class="page-item"
-        (click)="
           gettinghashList(
             pagedata.currentPage - 1,
             paginationForm.value.pagesize
           )
-        "
+        ">
-      >
         <a class="page-link"><i class="fa fa-angle-left"></i></a>
       </li>
       <li class="page-item d-none d-md-inline-flex">
-        <a class="page-link"
+        <a class="page-link">{{ pagedata.currentPage }} / {{ pagedata.totalPages }}</a>
-          >{{ pagedata.currentPage }} / {{ pagedata.totalPages }}</a
-        >
       </li>
-      <li
+      <li class="page-item" (click)="
-        class="page-item"
-        (click)="
           gettinghashList(
             pagedata.currentPage + 1,
             paginationForm.value.pagesize
           )
-        "
+        ">
-      >
         <a class="page-link"><i class="fa fa-angle-right"></i></a>
       </li>
-      <li
+      <li class="page-item d-none d-md-inline-flex" (click)="
-        class="page-item d-none d-md-inline-flex"
-        (click)="
           gettinghashList(pagedata.totalPages, paginationForm.value.pagesize)
-        "
+        ">
-      >
         <a class="page-link"><i class="fa fa-angle-double-right"></i></a>
       </li>
     </ul>
   </form>
 </div>
+
+<div class="latest_table mt-3">
+  <h2 class="mb-3 chart_heading px-0">Peers</h2>
+  <div class="mobile_table web_hdng">
+
+      <div class="mobile_table peer_table">
+
+          <div class="row">
+            <div class="col-6 col-md-4 tble_col">
+              <div class="block_div">
+                  <h5 class="mb-0">Capabilities</h5>
+                </div>
+            </div>
+            <div class="col-6 col-md-4 tble_col">
+              <div class="block_div">
+                <h5 class="mb-0">User Agent</h5>
+              </div>
+            </div>
+            <div class="col-6 col-md-4 tble_col">
+              <div class="block_div">
+                <h5 class="mb-0">Version</h5>
+              </div>
+            </div>
+            <div class="col-6 col-md-4 tble_col">
+              <div class="block_div">
+                <h5 class="mb-0">Addr</h5>
+              </div>
+            </div>
+            <div class="col-7 col-sm-6 col-md-4 tble_col">
+              <div class="block_div">
+                <h5 class="mb-0">Direction</h5>
+              </div>
+            </div>
+            <div class="col-5 col-sm-6 col-md-4 tble_col">
+              <div class="block_div">
+                <h5 class="mb-0">Total Difficulty</h5>
+              </div>
+            </div>
+           
+          </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 class="peer_mobile_table" *ngFor="let peer of peers">
+
+    <div class="row peer_table_data">
+      <div class="col-6 col-md-3 tble_col">
+        <div class="block_div">
+          <span class="blck_value">{{ peer.capabilities.bits }} bits</span>
+        </div>
+      </div>
+      <div class="col-6 col-md-3 tble_col">
+        <div class="block_div">
+          <span class="blck_value">{{ peer.user_agent }}</span>
+        </div>
+      </div>
+      <div class="col-6 col-md-3 tble_col">
+        <div class="block_div">
+         <span class="blck_value">{{ peer.version }}</span>
+        </div>
+      </div>
+      <div class="col-6 col-md-3 tble_col">
+        <div class="block_div">
+          <span class="blck_value">{{ peer.addr }}</span>
+        </div>
+      </div>
+      <div class="col-6 col-md-3 tble_col">
+        <div class="block_div">
+          <span class="blck_value">{{ peer.direction }}</span>
+        </div>
+      </div>
+      <div class="col-6 col-md-3 tble_col">
+        <div class="block_div">
+          <span class="blck_value">{{ peer.total_difficulty.cuckaroo }},{{ peer.total_difficulty.cuckatoo}},{{ peer.total_difficulty.randomx}},{{ peer.total_difficulty.progpow}}</span>
+        </div>
+      </div>
+    </div>
+
+    
+  </div>
+
+
+</div>

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

@@ -17,6 +17,8 @@ export class LatestblocksComponent implements OnInit {
   public clickValue: any;
   public beforeClick: boolean = false;
   public clickonMobile: boolean = true;
+  public peers: any;
+  
   paginationForm = new FormGroup({
     pagesize: new FormControl(20),
   });
@@ -50,12 +52,15 @@ export class LatestblocksComponent implements OnInit {
       })
     };
 
-    console.log('EEE');
     this.http
     .get('http://5.9.174.122:3413/v1/peers/connected',httpOptions)
     .subscribe((res) => {
         console.log('reeeee',res);
+        // this.peers = res;
+        
+        console.log('this.peers',this.peers);
       });
+      this.peers = [{"capabilities":{"bits":15},"user_agent":"MW/Epic 1.0.0","version":1,"addr":"54.233.177.64:3414","direction":"Outbound","total_difficulty":{"cuckaroo":1630,"cuckatoo":706,"randomx":138024,"progpow":49792},"height":10},{"capabilities":{"bits":15},"user_agent":"MW/Epic 1.0.0","version":1,"addr":"95.216.102.217:3414","direction":"Outbound","total_difficulty":{"cuckaroo":1630,"cuckatoo":706,"randomx":138024,"progpow":49792},"height":10},{"capabilities":{"bits":15},"user_agent":"MW/Epic 1.0.0","version":1,"addr":"90.190.172.177:3414","direction":"Outbound","total_difficulty":{"cuckaroo":2,"cuckatoo":2,"randomx":1024,"progpow":256},"height":0},{"capabilities":{"bits":15},"user_agent":"MW/Epic 1.0.0","version":1,"addr":"67.189.82.196:3414","direction":"Outbound","total_difficulty":{"cuckaroo":1630,"cuckatoo":706,"randomx":138024,"progpow":49792},"height":10},{"capabilities":{"bits":15},"user_agent":"MW/Epic 1.0.0","version":1,"addr":"167.71.72.2:3414","direction":"Outbound","total_difficulty":{"cuckaroo":1630,"cuckatoo":706,"randomx":138024,"progpow":49792},"height":10}];
 }
 
   

src/assets/css/responsive.css

@@ -1,5 +1,6 @@
 @media(min-width: 992px){
     .block_div {min-width: 136px; text-align: center;padding: .75rem; }
+    .peer_table .block_div{min-width: 180px;}
     .mobile_table{border-bottom: 1px solid #dee2e6; padding: 0 15px;display: table;  width: 100%;}
     .view_moble_tble{border-bottom: 1px solid #dee2e6;}
     .mobile_table .row{display: table;}
@@ -7,6 +8,12 @@
 .mobile_table h6, .view_moble_tble h6{display: none;}
 .view_moble_tble .block_div{text-align: left;}
 }
+@media (min-width: 768px){
+    .peer_table_data .col-md-3 {
+        flex: 0 0 16%;
+        max-width: 16%;
+    }
+}
 @media(max-width: 1199px){
     .ftr_links{padding-left: 0px;}
     .ftr_links::before{content: '|'; }

src/assets/css/style.css

@@ -286,7 +286,6 @@ a:focus {
   padding: 20px;
   transition: 0.3s linear all;
 }
-.minhgt{  min-height: 139px; }
 .detail_div .count {
   font-size: 25px;
   color: #0091ff;
@@ -435,7 +434,7 @@ a:focus {
 .link_to_detail:hover{color: #0091ff;text-decoration: underline;}
 .mobile_table{border-bottom: 1px solid #dee2e6;position: relative;}
 .mobile_table .tble_col{padding: 0;}
-.mobile_table:nth-child(even) {
+.mobile_table:nth-child(even), .peer_mobile_table:nth-child(even) {
   background: #eee;
 }
 .expnd_blck{display: none;}

src/environments/environment.ts

@@ -5,7 +5,7 @@
 export const environment = {
   production: false,
  domain: '/',
-  apiUrl: '/epic_explorer/v1',
+  apiUrl: 'https://explorer.epic.tech/epic_explorer/v1',
 };
 
 /*