RTL/src/app/eclair/transactions/payment-information-modal/payment-information.component.html

<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-between stretch">
  <div fxFlex="100" class="padding-gap-large pl-3">
    <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
      <div fxFlex="95" fxLayoutAlign="start start">
        <span class="page-title">Payment Information</span>
      </div>
      <button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
    </mat-card-header>
    <mat-card-content perfectScrollbar class="mt-5px mb-0 pr-2 h-40" #scrollContainer>
      <div fxLayout="column">
        <div fxLayout="row">
          <div fxFlex="30">
            <h4 fxLayoutAlign="start" class="font-bold-500">Amount (Sats)</h4>
            <span class="foreground-secondary-text">{{payment.recipientAmount | number}}</span>
          </div>
          <div fxFlex="70">
            <h4 fxLayoutAlign="start" class="font-bold-500">Date/Time</h4>
            <span class="foreground-secondary-text">{{payment.firstPartTimestampStr}}</span>
          </div>
        </div>
        <mat-divider class="w-100 my-1"></mat-divider>   
        <div fxLayout="row">
          <div fxFlex="100">
            <h4 fxLayoutAlign="start" class="font-bold-500">ID</h4>
            <span class="foreground-secondary-text">{{payment.id}}</span>
          </div>
        </div>
        <mat-divider class="w-100 my-1"></mat-divider>   
        <div fxLayout="row">
          <div fxFlex="100">
            <h4 fxLayoutAlign="start" class="font-bold-500">Payment Hash</h4>
            <span class="foreground-secondary-text">{{payment.paymentHash}}</span>
          </div>
        </div>
        <mat-divider class="w-100 my-1"></mat-divider>   
        <div fxLayout="row">
          <div fxFlex="100">
            <h4 fxLayoutAlign="start" class="font-bold-500">Payment Preimage</h4>
            <span class="foreground-secondary-text">{{payment.paymentPreimage}}</span>
          </div>
        </div>
        <mat-divider class="w-100 my-1"></mat-divider>   
        <div fxLayout="row">
          <div fxFlex="100">
            <h4 fxLayoutAlign="start" class="font-bold-500">Recipient Node</h4>
            <span class="foreground-secondary-text">{{payment.recipientNodeAlias}}</span>
          </div>
        </div>
        <mat-divider class="w-100 my-1"></mat-divider>   
        <div fxLayout="row" *ngIf="description">
          <div fxFlex="100">
            <h4 fxLayoutAlign="start" class="font-bold-500">Description</h4>
            <span class="foreground-secondary-text">{{description}}</span>
          </div>
        </div>
        <mat-divider class="w-100 my-1" *ngIf="description"></mat-divider>   
        <div fxLayout="row">
          <div fxFlex="100">
            <mat-accordion>
              <mat-expansion-panel [expanded]="expansionOpen" (opened)="onExpansionOpen(true)" (closed)="onExpansionOpen(false)" class="flat-expansion-panel my-1" *ngFor="let part of payment.parts; index as i">
                <mat-expansion-panel-header>
                  <mat-panel-title>
                    <h4 fxFlex="30" fxLayoutAlign="start" class="font-bold-500">Part {{i + 1}}</h4>
                    <h4 fxFlex="70" fxLayoutAlign="start" class="font-bold-500">{{part.amount | number}} (Sats)</h4>
                  </mat-panel-title>
                </mat-expansion-panel-header>
                <div fxLayout="column">
                  <div fxLayout="row">
                    <div fxFlex="50">
                      <h4 fxLayoutAlign="start" class="font-bold-500">Fees (mSats)</h4>
                      <span class="foreground-secondary-text">{{part.feesPaid | number}}</span>
                    </div>
                    <div fxFlex="50">
                      <h4 fxLayoutAlign="start" class="font-bold-500">Date/Time</h4>
                      <span class="foreground-secondary-text">{{part.timestampStr}}</span>
                    </div>
                  </div>
                  <mat-divider class="w-100 my-1"></mat-divider>
                  <div fxLayout="row">
                    <div fxFlex="100">
                      <h4 fxLayoutAlign="start" class="font-bold-500">ID</h4>
                      <span class="overflow-wrap foreground-secondary-text">{{part.id}}</span>
                    </div>
                  </div>
                  <mat-divider class="w-100 my-1"></mat-divider>
                  <div fxLayout="row">
                    <div fxFlex="100">
                      <h4 fxLayoutAlign="start" class="font-bold-500">To Channel</h4>
                      <span class="overflow-wrap foreground-secondary-text">{{part.toChannelAlias}}</span>
                    </div>
                  </div>
                </div>
              </mat-expansion-panel>
            </mat-accordion>      
          </div>
        </div>
      </div>
    </mat-card-content>
    <div fxLayout="row" fxLayoutAlign="start end" class="btn-sticky-container">
      <button mat-mini-fab aria-label="Scroll Down" fxLayoutAlign="center center" (click)="onScrollDown()">
        <mat-icon fxLayoutAlign="center center">arrow_downward</mat-icon>
      </button>
    </div>
    <div fxLayout="row" fxLayoutAlign="end center" class="mt-1">
      <button class="mr-1" fxLayoutAlign="center center" tabindex="1" mat-stroked-button color="primary" type="button" [mat-dialog-close]="false" default>OK</button>
    </div>
  </div>
</div>