mempool/frontend/src/app/lightning/group/group.component.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">&nbsp;</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>