130 lines
5.6 KiB
HTML
130 lines
5.6 KiB
HTML
<div class="container-xl full-height" style="min-height: 335px">
|
|
<h5 class="mb-1" style="color: var(--transparent-fg)" i18n="lightning.node-group">Lightning node group</h5>
|
|
|
|
<div class="header">
|
|
<div class="logo-container">
|
|
<app-svg-images name="officialMempoolSpace" viewBox="0 0 125 126"></app-svg-images>
|
|
</div>
|
|
<h1>The Mempool Open Source Project</h1>
|
|
</div>
|
|
|
|
<div class="box">
|
|
<div class="row" *ngIf="nodes$ | async as nodes">
|
|
<div class="col-12 col-md-6">
|
|
<table class="table table-borderless table-striped">
|
|
<tbody>
|
|
<tr>
|
|
<td i18n>Description</td>
|
|
<td><div class="description-text">These are the Lightning nodes operated by The Mempool Open Source Project that provide data for the mempool.space website. Connect to us!
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td i18n="lightning.node-count">Nodes</td>
|
|
<td>{{ nodes.nodes.length }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td i18n="lightning.liquidity">Liquidity</td>
|
|
<td>
|
|
<app-amount *ngIf="nodes.sumLiquidity > 100000000; else smallnode" [satoshis]="nodes.sumLiquidity" [digitsInfo]="'1.2-2'" [noFiat]="false"></app-amount>
|
|
<ng-template #smallnode>
|
|
{{ nodes.sumLiquidity | amountShortener: 1 }}
|
|
<span class="sats" i18n="shared.sats">sats</span>
|
|
</ng-template>
|
|
<span class="d-none d-md-inline-block"> </span>
|
|
<span class="d-block d-md-none"></span>
|
|
<app-fiat [value]="nodes.sumLiquidity" digitsInfo="1.0-0"></app-fiat>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td i18n="lightning.channels">Channels</td>
|
|
<td>{{ nodes.sumChannels }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
|
|
<div style="background-color: var(--stat-box-bg)">
|
|
<app-nodes-map [widget]="true" [nodes]="nodes.nodes" type="isp"></app-nodes-map>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="toggle-holder">
|
|
<form [formGroup]="socketToggleForm" class="formRadioGroup">
|
|
<div class="btn-group btn-group-toggle" name="radioBasic">
|
|
<label class="btn btn-primary btn-sm" [class.active]="socketToggleForm.get('socket').value === 0">
|
|
<input type="radio" [value]="0" formControlName="socket">IPv4
|
|
</label>
|
|
<label class="btn btn-primary btn-sm" [class.active]="socketToggleForm.get('socket').value === 1">
|
|
<input type="radio" [value]="1" formControlName="socket">IPv6
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div style="min-height: 295px">
|
|
<table class="table table-borderless">
|
|
<thead>
|
|
<th class="alias text-left" i18n="lightning.alias">Alias</th>
|
|
<th class="text-left" i18n="lightning.connect-to-node|Connect">Connect</th>
|
|
<th class="city text-right d-none d-md-table-cell" i18n="lightning.location">Location</th>
|
|
</thead>
|
|
<tbody *ngIf="nodes$ | async as response; else skeleton">
|
|
<tr *ngFor="let node of response.nodes; let i = index; trackBy: trackByPublicKey">
|
|
<td class="alias text-left">
|
|
<div class="text-truncate">
|
|
<a [routerLink]="['/lightning/node/' | relativeUrl, node.public_key]">{{ node.alias }}</a>
|
|
<div class="second-line">{{ node.opened_channel_count }} channel(s), <app-amount *ngIf="node.capacity > 100000000; else smallnode" [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
|
|
<ng-template #smallnode>
|
|
{{ node.capacity | amountShortener: 1 }} <span class="sats" i18n="shared.sats">sats</span>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="timestamp-first text-left">
|
|
<div class="input-group" *ngIf="node.socketsObject.length">
|
|
<ng-template #noDropdown>
|
|
<span class="input-group-text" id="basic-addon3">{{ node.socketsObject[selectedSocketIndex].label }}</span>
|
|
</ng-template>
|
|
<input type="text" class="form-control" aria-label="Text input with dropdown button"
|
|
[value]="node.socketsObject[selectedSocketIndex].socket">
|
|
<button class="btn btn-secondary" type="button" id="inputGroupFileAddon04" (mouseover)="qrCodeVisible[i] = 1"
|
|
(mouseout)="qrCodeVisible[i] = 0">
|
|
<fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
|
|
<div class="qr-wrapper" [hidden]="!qrCodeVisible[i]">
|
|
<app-qrcode [size]="200" [data]="node.socketsObject[selectedSocketIndex].socket"></app-qrcode>
|
|
</div>
|
|
</button>
|
|
<app-clipboard [button]="true" [text]="node.socketsObject[selectedSocketIndex].socket" [leftPadding]="false"></app-clipboard>
|
|
</div>
|
|
</td>
|
|
<td class="city text-right text-truncate d-none d-md-table-cell">
|
|
<app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
|
|
</td>
|
|
</tbody>
|
|
|
|
<ng-template #skeleton>
|
|
<tbody>
|
|
<tr *ngFor="let item of skeletonLines">
|
|
<td class="alias">
|
|
<span class="skeleton-loader"></span>
|
|
</td>
|
|
<td>
|
|
<span class="skeleton-loader"></span>
|
|
</td>
|
|
<td class="timestamp-update d-none d-md-table-cell">
|
|
<span class="skeleton-loader"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</ng-template>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|