relays.component.html raw

   1  <!-- RELAY_TEMPLATE -->
   2  <ng-template #relayTemplate let-relay="relay">
   3    <div class="sam-flex-row gap relay">
   4      <div class="sam-flex-column sam-flex-grow">
   5        <span>{{ relay.url | visualRelay }}</span>
   6        <div class="sam-flex-row gap-h">
   7          <lib-relay-rw
   8            type="read"
   9            [model]="relay.read"
  10            [readonly]="true"
  11          ></lib-relay-rw>
  12          <lib-relay-rw
  13            type="write"
  14            [model]="relay.write"
  15            [readonly]="true"
  16          ></lib-relay-rw>
  17        </div>
  18      </div>
  19    </div>
  20  </ng-template>
  21  
  22  <div class="header-pane">
  23    <lib-icon-button
  24      icon="chevron-left"
  25      (click)="navigateBack()"
  26    ></lib-icon-button>
  27    <span class="header-title">Relays</span>
  28  </div>
  29  
  30  <div class="info-banner">
  31    <span class="emoji">💡</span>
  32    <span>These relays are fetched from your NIP-65 relay list (kind 10002). To update your relay list, use a Nostr client that supports NIP-65.</span>
  33  </div>
  34  
  35  @if(loading) {
  36  <div class="loading-state">
  37    <i class="bi bi-circle color-activity"></i>
  38    <span>Fetching relay list...</span>
  39  </div>
  40  }
  41  
  42  @if(!loading && errorMessage) {
  43  <div class="error-state">
  44    <i class="bi bi-exclamation-triangle sam-color-danger"></i>
  45    <span>{{ errorMessage }}</span>
  46  </div>
  47  }
  48  
  49  @if(!loading && !errorMessage && relays.length === 0) {
  50  <div class="empty-state">
  51    <i class="bi bi-broadcast"></i>
  52    <span>No relay list found</span>
  53    <span class="hint">Publish a NIP-65 relay list using a Nostr client to see your relays here.</span>
  54  </div>
  55  }
  56  
  57  @for(relay of relays; track relay.url) {
  58  <ng-container
  59    *ngTemplateOutlet="relayTemplate; context: { relay: relay }"
  60  ></ng-container>
  61  }
  62