< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "space-between stretch" class = "padding-gap-x" >
< form * ngIf = "calledFrom === 'home'" # sendPaymentForm = "ngForm" fxLayoutAlign = "space-between stretch" fxLayout = "row wrap" >
< mat-form-field fxLayout = "column" fxFlex = "100" >
< mat-label > Payment Request< / mat-label >
< textarea # paymentReq = "ngModel" matInput name = "paymentRequest" tabindex = "1" required [ perfectScrollbar ] [ ngModel ] = " paymentRequest " ( ngModelChange ) = " onPaymentRequestEntry ( $ event ) " ( matTextareaAutosize ) = " true " > < / textarea >
< mat-hint * ngIf = "paymentRequest && paymentDecodedHintPre !== ''" fxLayout = "row wrap" fxFlex = "100" >
{{paymentDecodedHintPre}}
< span * ngIf = "convertedCurrency && convertedCurrency.iconType === 'FA' && paymentDecodedHintPre !== ''" fxLayoutAlign = "center center" class = "mr-3px" >
< fa-icon [ icon ] = " convertedCurrency . symbol " / >
< / span >
< span * ngIf = "convertedCurrency && convertedCurrency.iconType === 'SVG' && paymentDecodedHintPre !== ''" fxLayoutAlign = "center center" class = "mr-3px" [ innerHTML ] = " convertedCurrency . symbol " > < / span >
{{paymentDecodedHintPost}}
< / mat-hint >
< mat-error * ngIf = "!paymentRequest" > Payment request is required.< / mat-error >
< / mat-form-field >
< div fxLayout = "row" class = "mt-1" >
< button class = "mr-1" mat-stroked-button color = "primary" tabindex = "2" type = "reset" ( click ) = " resetData ( ) " > Clear Field< / button >
< button mat-flat-button color = "primary" tabindex = "3" ( click ) = " onSendPayment ( ) " > Send Payment< / button >
< / div >
< / form >
< div * ngIf = "calledFrom === 'transactions'" fxLayout = "row" >
< button mat-flat-button color = "primary" tabindex = "4" ( click ) = " openSendPaymentModal ( ) " > Send Payment< / button >
< / div >
< div * ngIf = "calledFrom === 'transactions'" fxLayout = "column" fxLayoutAlign = "start stretch" >
< div fxLayout = "column" fxLayoutAlign = "start stretch" fxLayout . gt-sm = "row wrap" class = "page-sub-title-container mt-1" >
< div fxFlex = "70" fxLayoutAlign = "start start" fxLayoutAlign . gt-sm = "start center" >
< fa-icon class = "page-title-img mr-1" [ icon ] = " faHistory " / >
< span class = "page-title" > Payments History< / span >
< / div >
< div fxFlex . gt-xs = "30" fxLayoutAlign . gt-xs = "space-between center" fxLayout = "row" fxLayoutAlign = "space-between stretch" >
< mat-form-field fxLayout = "column" fxFlex = "49" >
< mat-label > Filter By< / mat-label >
< mat-select tabindex = "1" name = "filterBy" [ ( ngModel ) ] = " selFilterBy " ( selectionChange ) = " selFilter = '' ; applyFilter ( ) " >
< perfect-scrollbar > < mat-option * ngFor = "let column of ['all'].concat(displayedColumns.slice(0, -1))" [ value ] = " column " > {{getLabel(column)}}< / mat-option > < / perfect-scrollbar >
< / mat-select >
< / mat-form-field >
< mat-form-field fxLayout = "column" fxFlex = "49" >
< mat-label > Filter< / mat-label >
< input matInput name = "filter" [ ( ngModel ) ] = " selFilter " ( input ) = " applyFilter ( ) " ( keyup ) = " applyFilter ( ) " >
< / mat-form-field >
< / div >
< / div >
< div fxLayout = "row" fxLayoutAlign = "start start" >
< div fxLayout = "column" fxLayoutAlign = "start end" fxFlex = "100" class = "table-container" [ perfectScrollbar ] >
< mat-progress-bar * ngIf = "apiCallStatus.status === apiCallStatusEnum.INITIATED" mode = "indeterminate" / >
< table # table mat-table fxFlex = "100" matSort [ matSortActive ] = " tableSetting . sortBy " [ matSortDirection ] = " tableSetting . sortOrder " [ dataSource ] = " payments " [ ngClass ] = " { ' error-border ' : errorMessage ! = = ' ' } " >
< ng-container matColumnDef = "status" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" matTooltip = "Status" > < / th >
< td * matCellDef = "let payment" mat-cell >
< span * ngIf = "payment?.status === 'SUCCEEDED'" class = "dot green" matTooltip = "Succeeded" matTooltipPosition = "right" [ ngClass ] = " { ' mr-0 ' : screenSize = == screenSizeEnum . XS } " > < / span >
< span * ngIf = "payment?.status !== 'SUCCEEDED'" class = "dot red" matTooltip = "Failed" matTooltipPosition = "right" [ ngClass ] = " { ' mr-0 ' : screenSize = == screenSizeEnum . XS } " > < / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "creation_date" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Creation Date< / th >
< td * matCellDef = "let payment" mat-cell >
{{(payment?.creation_date * 1000) | date:'dd/MMM/y HH:mm'}}
< / td >
< / ng-container >
< ng-container matColumnDef = "payment_hash" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Payment Hash< / th >
< td * matCellDef = "let payment" mat-cell >
< span fxLayout . gt-xs = "row" class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{payment?.payment_hash}}< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "payment_request" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Payment Request< / th >
< td * matCellDef = "let payment" mat-cell >
< span fxLayout . gt-xs = "row" class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{payment?.payment_request}}< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "payment_preimage" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Payment Preimage< / th >
< td * matCellDef = "let payment" mat-cell >
< span fxLayout . gt-xs = "row" class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{payment?.payment_preimage}}< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "description" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Description< / th >
< td * matCellDef = "let payment" mat-cell >
< span fxLayout . gt-xs = "row" class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{payment?.description}}< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "description_hash" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Description Hash< / th >
< td * matCellDef = "let payment" mat-cell >
< span fxLayout . gt-xs = "row" class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{payment?.description_hash}}< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "failure_reason" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Failure Reason< / th >
< td * matCellDef = "let payment" mat-cell >
{{payment?.failure_reason | camelcaseWithReplace:'failure_reason':'_'}}
< / td >
< / ng-container >
< ng-container matColumnDef = "payment_index" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Payment Index< / th >
< td * matCellDef = "let payment" mat-cell > < span fxLayoutAlign = "end center" > {{payment?.payment_index | number}}< / span > < / td >
< / ng-container >
< ng-container matColumnDef = "fee" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Fee (Sats)< / th >
< td * matCellDef = "let payment" mat-cell > < span fxLayoutAlign = "end center" > {{payment?.fee | number}}< / span > < / td >
< / ng-container >
< ng-container matColumnDef = "value" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Value (Sats)< / th >
< td * matCellDef = "let payment" mat-cell > < span fxLayoutAlign = "end center" > {{payment?.value | number}}< / span > < / td >
< / ng-container >
< ng-container matColumnDef = "hops" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Hops< / th >
< td * matCellDef = "let payment" mat-cell > < span fxLayoutAlign = "end center" > {{payment?.htlcs[0]?.route?.hops?.length || 0}}< / span > < / td >
< / ng-container >
< ng-container matColumnDef = "actions" >
< th * matHeaderCellDef mat-header-cell >
< div class = "bordered-box table-actions-select" fxLayoutAlign = "center center" >
< mat-select placeholder = "Actions" tabindex = "1" class = "mr-0" >
< mat-select-trigger / >
< mat-option ( click ) = " onDownloadCSV ( ) " > Download CSV< / mat-option >
< / mat-select >
< / div >
< / th >
< td * matCellDef = "let payment" mat-cell fxLayoutAlign = "end center" >
< button mat-stroked-button color = "primary" type = "button" tabindex = "4" class = "table-actions-button" ( click ) = " onPaymentClick ( payment ) " > View Info< / button >
< / td >
< / ng-container >
< ng-container matColumnDef = "no_payment" >
< td * matFooterCellDef mat-footer-cell colspan = "4" >
< p * ngIf = "(!payments?.data || payments?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED" > No payment available.< / p >
< p * ngIf = "(!payments?.data || payments?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED" > Getting payments...< / p >
< p * ngIf = "(!payments?.data || payments?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR" > {{errorMessage}}< / p >
< / td >
< / ng-container >
<!-- Payment Group Row Start -->
< ng-container matColumnDef = "group_status" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayoutAlign = "start center" class = "htlc-row-span" >
< span * ngIf = "payment?.status === 'SUCCEEDED'" class = "dot green" matTooltip = "Succeeded" matTooltipPosition = "right" [ ngClass ] = " { ' mr-0 ' : screenSize = == screenSizeEnum . XS } " > < / span >
< span * ngIf = "payment?.status !== 'SUCCEEDED'" class = "dot red" matTooltip = "Failed" matTooltipPosition = "right" [ ngClass ] = " { ' mr-0 ' : screenSize = == screenSizeEnum . XS } " > < / span >
< / span >
< ng-container * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs" fxLayoutAlign = "start center" class = "htlc-row-span" >
< span * ngIf = "htlc.status === 'SUCCEEDED'" class = "dot green" matTooltip = "Succeeded" matTooltipPosition = "right" [ ngClass ] = " { ' mr-0 ' : screenSize = == screenSizeEnum . XS } " > < / span >
< span * ngIf = "htlc.status !== 'SUCCEEDED'" class = "dot red" matTooltip = "Failed" matTooltipPosition = "right" [ ngClass ] = " { ' mr-0 ' : screenSize = == screenSizeEnum . XS } " > < / span >
< / span >
< / ng-container >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_creation_date" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayoutAlign = "start center" class = "htlc-row-span" >
Total Attempts: {{payment?.htlcs?.length}}
< / span >
< ng-container * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs" fxLayoutAlign = "start center" class = "htlc-row-span" >
{{(htlc.attempt_time_ns / 1000000) | date:'dd/MMM/y HH:mm'}}
< / span >
< / ng-container >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_payment_hash" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayout = "row" class = "ellipsis-parent htlc-row-span" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{payment?.payment_hash}}< / span >
< / span >
< span * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs; index as i" fxLayoutAlign = "start center" class = "htlc-row-span" >
HTLC {{i + 1}}
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_payment_request" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayout = "row" class = "ellipsis-parent htlc-row-span" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{payment?.payment_request}}< / span >
< / span >
< span * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs" fxLayoutAlign = "start center" class = "htlc-row-span" >
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_payment_preimage" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayout = "row" class = "ellipsis-parent htlc-row-span" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{payment?.payment_preimage}}< / span >
< / span >
< span * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs; index as i" fxLayoutAlign = "start center" class = "htlc-row-span" >
{{htlc?.preimage}}
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_description" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayout = "row" class = "ellipsis-parent htlc-row-span" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{payment?.description}}< / span >
< / span >
< span * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs" fxLayoutAlign = "start center" class = "htlc-row-span" >
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_description_hash" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayout = "row" class = "ellipsis-parent htlc-row-span" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{payment?.description_hash}}< / span >
< / span >
< span * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs" fxLayoutAlign = "start center" class = "htlc-row-span" >
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_failure_reason" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayoutAlign = "start center" class = "htlc-row-span" >
{{payment?.failure_reason | camelcaseWithReplace:'failure_reason':'_'}}
< / span >
< span * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs" fxLayoutAlign = "start center" class = "htlc-row-span" >
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_payment_index" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > {{payment?.payment_index | number}}< / span >
< span * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs" fxLayoutAlign = "end center" class = "htlc-row-span" >
{{htlc.attempt_id | number}}
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_fee" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > {{payment?.fee | number:'1.0-0'}}< / span >
< span * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs" fxLayoutAlign = "end center" class = "htlc-row-span" >
{{htlc.route?.total_fees | number:'1.0-0'}}
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_value" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > {{payment?.value | number:'1.0-0'}}< / span >
< span * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs" fxLayoutAlign = "end center" class = "htlc-row-span" >
{{htlc.route?.total_amt | number:'1.0-0'}}
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_hops" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayoutAlign = "end center" class = "htlc-row-span" > -< / span >
< span * ngIf = "payment?.is_expanded" >
< span * ngFor = "let htlc of payment?.htlcs" fxLayoutAlign = "end center" class = "htlc-row-span" >
{{(htlc.route?.hops?.length || 0) | number:'1.0-0'}}
< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "group_actions" >
< td * matCellDef = "let payment" mat-cell >
< span fxLayoutAlign = "end center" class = "htlc-group-head" >
< button mat-flat-button class = "btn-htlc-expand" color = "primary" type = "button" tabindex = "5" ( click ) = " payment . is_expanded = !payment?.is_expanded" > {{payment?.is_expanded ? 'Hide' : 'Show'}}< / button >
< / span >
< div * ngIf = "payment?.is_expanded" >
< div * ngFor = "let htlc of payment?.htlcs; index as i" class = "htlc-group-details" fxLayoutAlign = "end center" >
< button mat-stroked-button class = "btn-htlc-info" color = "primary" type = "button" tabindex = "6" ( click ) = " onHTLCClick ( htlc , payment ) " > View {{i + 1}}< / button >
< / div >
< / div >
< / td >
< / ng-container >
< tr * matRowDef = "let row; columns: htlcColumns; when: is_group;" mat-row > < / tr >
<!-- Payment Group Row End -->
< tr * matFooterRowDef = "['no_payment']" mat-footer-row [ ngClass ] = " { ' display-none ' : payments ? . data & & payments ? . data ? . length > 0}">< / tr >
< tr * matHeaderRowDef = "displayedColumns" mat-header-row > < / tr >
< tr * matRowDef = "let row; columns: displayedColumns;" mat-row > < / tr >
< / table >
< mat-paginator class = "mb-1" [ length ] = " totalPayments " [ pageSize ] = " pageSize " [ pageSizeOptions ] = " pageSizeOptions " [ showFirstLastButtons ] = " screenSize = == screenSizeEnum . XS ? false : true " ( page ) = " onPageChange ( $ event ) " / >
< / div >
< / div >
< / div >
< / div >