Merge pull request #49 from dev-ptera/feat/delegate-known-account-and…

…-min-weight-co

Feat/delegate known account and min weight co

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## v2.5.0 (June 26, 2023)
+
+### Added
+
+-  Added known accounts onto Delegators tab on Account page.
+-  Added min-weight coefficient data to the Network page.
+
 ## v2.4.5 (April 9, 2023)
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
     "name": "yellow-spyglass-client",
-    "version": "2.4.5",
+    "version": "2.5.0",
     "scripts": {
         "ng": "ng",
         "start": "ng serve -c development --open --host 0.0.0.0",

src/app/pages/account/tabs/delegators/delegators-tab.components.ts

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, Input, ViewEncapsulation } from '@angular
 import { ViewportService } from '@app/services/viewport/viewport.service';
 import { DelegatorsTabService } from '@app/pages/account/tabs/delegators/delegators-tab.service';
 import { APP_NAV_ITEMS } from '../../../../navigation/nav-items';
+import { AliasService } from '@app/services/alias/alias.service';
 
 @Component({
     selector: 'account-delegators-tab',
@@ -39,20 +40,25 @@ import { APP_NAV_ITEMS } from '../../../../navigation/nav-items';
                     <th mat-header-cell *matHeaderCellDef>Address</th>
                     <td
                         mat-cell
-                        class="delegators-address-cell mono"
+                        class="delegators-address-cell "
                         style="word-break: break-all"
-                        [class.link]="element.address !== address"
                         *matCellDef="let element"
                     >
-                        <a class="text link" [routerLink]="'/' + navItems.account.route + '/' + element.address">
+                        <a
+                            class="text link mono"
+                            [routerLink]="'/' + navItems.account.route + '/' + element.address"
+                            [class.link]="element.address !== address"
+                        >
                             {{ element.address }}
                         </a>
                         <span
                             *ngIf="element.address === address"
                             class="text-secondary mat-body-2"
                             style="margin-left: 8px;; word-break: normal"
-                            >(This Account)</span
-                        >
+                            >(This Account)
+                        </span>
+
+                        <div class="primary" style="font-weight: 600">{{ getAlias(element.address) }}</div>
                     </td>
                 </ng-container>
                 <ng-container matColumnDef="weight">
@@ -98,11 +104,16 @@ export class DelegatorsTabComponent {
     constructor(
         public vp: ViewportService,
         public delegatorService: DelegatorsTabService,
+        private readonly _aliasService: AliasService,
         private readonly _ref: ChangeDetectorRef
     ) {}
 
     async loadMoreDelegators(): Promise<void> {
         await this.delegatorService.fetchDelegators(this.address);
         this._ref.detectChanges();
     }
+
+    getAlias(address: string): string {
+        return this._aliasService.getAlias(address);
+    }
 }

src/app/pages/network/network.component.html

@@ -11,7 +11,7 @@
 </ng-template>
 
 <ng-template #bodyContent>
-    <mat-card responsive style="width: 100%" class="divider-border">
+    <mat-card responsive class="divider-border">
         <div class="section-title">Nakamoto Coefficient</div>
         <div class="app-section-subtitle" style="margin-bottom: 0px">
             What is the minimum number of entities required to attack the network?
@@ -22,18 +22,40 @@
             </div>
         </div>
         <div class="app-section-subtitle" *ngIf="nakamotoCoefficient > 1" style="margin-bottom: 0; margin-top: 0">
-            The <strong>{{ nakamotoCoefficient }}</strong> largest reps could potentially collude together to achieve
-            >{{ quorum.onlineWeightQuorumPercent }}% of the online voting weight and stall the network.
+            The <strong>{{ nakamotoCoefficient }}</strong> largest representatives could potentially collude together to
+            achieve >{{ quorum.onlineWeightQuorumPercent }}% of the online voting weight and compromise the network.
         </div>
         <div class="app-section-subtitle" *ngIf="nakamotoCoefficient === 1" style="margin-bottom: 0">
-            It only takes <strong>one</strong> entity to stall the network.
+            It only takes <strong>one</strong> entity to achieve >{{ quorum.onlineWeightQuorumPercent }}% of the online
+            voting weight and compromise the network.
         </div>
         <div class="app-caption" style="margin-top: 16px; margin-bottom: 0">
             See the full representative list
             <a class="link primary" [routerLink]="'/' + navItems.representatives.route">here</a>.
         </div>
     </mat-card>
 
+    <mat-card responsive class="divider-border">
+        <div class="section-title">Quorum Coefficient</div>
+        <div class="app-section-subtitle" style="margin-bottom: 0px">
+            What is the minimum number of representatives needed to stall the network?
+        </div>
+        <div style="display: flex; justify-content: center; margin: 16px 0; text-align: center">
+            <div class="network-nakamoto">
+                {{ quorumCoefficient }}
+            </div>
+        </div>
+        <div class="app-section-subtitle" *ngIf="quorumCoefficient > 1" style="margin-bottom: 0; margin-top: 0">
+            The <strong>{{ quorumCoefficient }}</strong> largest representatives could potentially collude together to
+            achieve {{ 100 - quorum.onlineWeightQuorumPercent }}% of the online voting weight to disrupt quorum & stall
+            the network.
+        </div>
+        <div class="app-section-subtitle" *ngIf="quorumCoefficient === 1" style="margin-bottom: 0">
+            It only takes <strong>one</strong> entity to achieve >{{ 100 - quorum.onlineWeightQuorumPercent }}% of the
+            online voting weight to disrupt quorum & stall the network.
+        </div>
+    </mat-card>
+
     <mat-card responsive class="divider-border">
         <div class="section-title">Supply</div>
         <div class="app-section-subtitle">How much Banano is circulating?</div>

src/app/pages/network/network.component.ts

@@ -33,6 +33,7 @@ export class NetworkComponent implements OnInit {
 
     totalNumberOfPeers = 0;
     nakamotoCoefficient: number;
+    quorumCoefficient: number;
 
     constructor(
         public vp: ViewportService,
@@ -51,13 +52,15 @@ export class NetworkComponent implements OnInit {
             this._apiService.fetchSupplyStats(),
             this._apiService.fetchPeerVersions(),
             this._apiService.fetchNakamotoCoefficient(),
+            this._apiService.fetchQuorumCoefficient(),
             this._apiService.fetchQuorumStats(),
         ])
             .then((response) => {
                 this.supply = response[0];
                 this.peerVersions = response[1];
                 this.nakamotoCoefficient = response[2].nakamotoCoefficient;
-                this.quorum = response[3];
+                this.quorumCoefficient = response[3].coefficient;
+                this.quorum = response[4];
                 this.consensusChartOptions = this._createVoteWeightChart(this.quorum);
                 this.supplyChartOptions = this._createSupplyChart(this.supply);
                 this.peerVersions.map((version) => {

src/app/services/api/api.service.ts

@@ -17,6 +17,7 @@ import {
     ExplorerSummaryDto,
     HostNodeStatsDto,
     KnownAccountDto,
+    QuorumCoefficientDto,
     MonitoredRepDto,
     NakamotoCoefficientDto,
     PeerVersionsDto,
@@ -245,6 +246,12 @@ export class ApiService {
         return this._http.get<NakamotoCoefficientDto>(`${this.httpApi}/v1/network/nakamoto-coefficient`).toPromise();
     }
 
+    /** Fetches how many offline actors required to stall network. */
+    async fetchQuorumCoefficient(): Promise<QuorumCoefficientDto> {
+        await this._hasPingedApi();
+        return this._http.get<QuorumCoefficientDto>(`${this.httpApi}/v1/network/quorum-coefficient`).toPromise();
+    }
+
     /** Fetches list of accounts with their respective balance & representative. */
     async fetchRichListSegment(offset: number, size: number): Promise<AccountBalanceDto[]> {
         await this._hasPingedApi();

src/app/types/dto/QuorumCoefficientDto.ts

@@ -0,0 +1,13 @@
+export type QuorumCoefficientDto = {
+    delta: number;
+    onlineWeight: number;
+    onlineWeightMinimum: number;
+    coefficient: number;
+    representatives: BasicRep[];
+    repsWeight: number;
+};
+
+type BasicRep = {
+    address: string;
+    weight: number;
+};

src/app/types/dto/index.ts

@@ -14,6 +14,7 @@ export * from './HostNodeStatsDto';
 export * from './InsightsDto';
 export * from './KnownAccountDto';
 export * from './NakamotoCoefficientDto';
+export * from './QuorumCoefficientDto';
 export * from './MonitoredRepDto';
 export * from './PeerVersionsDto';
 export * from './PriceDataDto';