You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
RTL/src/app/eclair/transactions/payment-information-modal/payment-information.compone...

109 lines
5.3 KiB
HTML

<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-between stretch">
<div fxFlex="100">
<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 center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
</mat-card-header>
<mat-card-content #scrollContainer class="h-40 padding-gap-x-large" [perfectScrollbar]>
<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.firstPartTimestamp) | date:'dd/MMM/y HH:mm'}}</span>
</div>
</div>
<mat-divider class="w-100 my-1" />
<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" />
<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" />
<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" />
<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" />
<div *ngIf="description" fxLayout="row">
<div fxFlex="100">
<h4 fxLayoutAlign="start" class="font-bold-500">Description</h4>
<span class="foreground-secondary-text">{{description}}</span>
</div>
</div>
<mat-divider *ngIf="description" class="w-100 my-1" />
<div fxLayout="row">
<div fxFlex="100">
<mat-accordion>
<mat-expansion-panel *ngFor="let part of payment.parts; index as i" class="flat-expansion-panel my-1" [expanded]="expansionOpen" (opened)="onExpansionOpen(true)" (closed)="onExpansionOpen(false)">
<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.timestamp) | date:'dd/MMM/y HH:mm'}}</span>
</div>
</div>
<mat-divider class="w-100 my-1" />
<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" />
<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 padding-gap-x-large">
<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="padding-gap-x-large padding-gap-bottom-large">
<button class="mr-1" fxLayoutAlign="center center" tabindex="1" mat-button color="primary" type="button" default [mat-dialog-close]="false">OK</button>
</div>
</div>
</div>