Add remote node connections to admin panel (#646)

* Devnet deployment config

* Add remote node connections to admin panel

* Revert env changes

* Testnet deployment config (#651)

* Add remote node connections to admin panel

* Testnet deployment config

* Revert prod environment changes

* Fix merge

---------

Co-authored-by: iamsofonias <[email protected]>

---------

Co-authored-by: iamsofonias <[email protected]>

Author: lazynina

Caddyfile

@@ -30,6 +30,7 @@ header @html Content-Security-Policy "
   connect-src 'self'
     media.deso.org
     node.deso.org
+    *.deso.run
     amp.deso.org
     bithunt.deso.org
     bitclout.com:*

Dockerfile

@@ -40,7 +40,7 @@ COPY ./src/environments/environment.$environment.ts ./src/environments/environme
 RUN npm run build_prod
 
 # build minified version of frontend, served using caddy
-FROM caddy:2.3.0-alpine
+FROM caddy:2.7.6-alpine
 
 WORKDIR /frontend
 

package-lock.json

@@ -162,6 +162,7 @@ export class TransferLockupDaoCoinModalComponent {
         minute: '2-digit',
         hour12: false,
       };
+      //@ts-ignore
       return new Intl.DateTimeFormat('default', options).format(date)
     }
   }

src/app/dao-coins/transfer-lockup-dao-coin-modal/transfer-lockup-dao-coin-modal.component.ts

@@ -81,6 +81,7 @@ export class UnlockDaoCoinModalComponent {
         minute: '2-digit',
         hour12: false,
       };
+      // @ts-ignore
       return new Intl.DateTimeFormat('default', options).format(date)
     }
   }

src/app/dao-coins/unlock-dao-coin-modal/unlock-dao-coin-modal.component.ts

@@ -211,6 +211,44 @@
     <i *ngIf="isOpen.desoNode" class="fas fa-caret-down"></i>
     DeSo Node Info
   </span>
+  <div class="ml-15px">
+    Remote Node Connections
+    <table class="fs-12px w-100" style="table-layout: fixed;">
+      <thead>
+        <td class="w-25">IP</td>
+        <td class="w-25">Status</td>
+        <td class="w-50">Validator Info</td>
+      </thead>
+      <tbody>
+        <tr
+          *ngFor="let connection of globalVars.nodeInfo.RemoteNodeConnections"
+          class="border-bottom border-color-grey"
+        >
+          <td class="w-25">
+            {{ connection.PeerResponse ? connection.PeerResponse.IP + ':' + connection.PeerResponse.ProtocolPort : 'N/A' }}</td>
+          <td class="w-25">
+            <i [ngClass]="connection.PeerConnected ? 'fas fa-solid fa-check fc-green' : 'fas fa-solid fa-x fc-red'"></i>
+            <span style="overflow-wrap: break-word">{{ connection.RemoteNodeStatus }}</span>
+          </td>
+          <td class="w-50">
+            <span
+              (click)="_copyPublicKey(connection.ValidatorResponse.ValidatorPublicKeyBase58Check)"
+              class="d-block text-truncate"
+              *ngIf="connection.ValidatorResponse"
+            >
+              <i
+                *ngIf="!pubKeyCopiedMap[connection.ValidatorResponse.ValidatorPublicKeyBase58Check]"
+                class="fas fa-key"></i>
+              <i
+                *ngIf="pubKeyCopiedMap[connection.ValidatorResponse.ValidatorPublicKeyBase58Check]"
+                class="far fa-check-circle fc-blue"
+              ></i>
+              {{ connection.ValidatorResponse.ValidatorPublicKeyBase58Check }}
+            </span>
+          </td>
+        </tr>
+    </table>
+  </div>
   <div *ngIf="isOpen.desoNode && updatingDeSoPeer" class="ml-15px fc-muted">
     Updating DeSo peers...
   </div>

src/app/network-info/network-info.component.html

@@ -34,6 +34,7 @@ export class NetworkInfoComponent implements OnInit {
   updatingDeSoPeer = false;
   manualBitcoinPeer = '';
   updatingBitcoinPeer = false;
+  pubKeyCopiedMap = {};
 
   constructor(
     public globalVars: GlobalVarsService,
@@ -324,4 +325,12 @@ export class NetworkInfoComponent implements OnInit {
       },
     });
   }
+
+  _copyPublicKey(publicKey: string) {
+    this.globalVars._copyText(publicKey);
+    this.pubKeyCopiedMap[publicKey] = true;
+    setInterval(() => {
+      delete this.pubKeyCopiedMap[publicKey];
+    }, 1000);
+  }
 }