< div fxLayout = "column" fxLayoutAlign = "start stretch" fxFlex = "100" class = "padding-gap-x-large" >
< div fxLayout = "column" fxLayout . gt-sm = "row wrap" fxLayoutAlign = "start stretch" class = "page-sub-title-container" >
< div fxFlex = "70" fxLayoutAlign = "start start" fxLayoutAlign . gt-sm = "start center" > < / 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 class = "table-container" fxFlex = "100" [ perfectScrollbar ] >
< mat-progress-bar * ngIf = "apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode = "indeterminate" / >
< table # table mat-table matSort [ matSortActive ] = " tableSetting . sortBy " [ matSortDirection ] = " tableSetting . sortOrder " [ dataSource ] = " listUTXOs " [ ngClass ] = " { ' error-border ' : errorMessage ! = = ' ' } " >
< ng-container matColumnDef = "is_dust" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" matTooltip = "Dust/Nondust" > < / th >
< td * matCellDef = "let utxo" mat-cell >
< span * ngIf = "numDustUTXOs > 0 && !isDustUTXO && (utxo?.amount_msat / 1000) < dustAmount; else emptySpace" matTooltip = "Risk of dust attack" matTooltipPosition = "right" >
< mat-icon fxLayoutAlign = "start center" color = "warn" class = "small-icon" > warning< / mat-icon >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "status" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" matTooltip = "Status" > < / th >
< td * matCellDef = "let utxo" mat-cell >
< span * ngIf = "utxo.status === 'confirmed'" class = "dot green" matTooltip = "Confirmed" matTooltipPosition = "right" > < / span >
< span * ngIf = "utxo.status !== 'confirmed'" class = "dot yellow" matTooltipPosition = "right" matTooltip = "{{utxo.status | titlecase}}" > < / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "txid" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Transaction ID< / th >
< td * matCellDef = "let utxo" mat-cell >
< span fxLayout . gt-xs = "row" class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{utxo.txid}}< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "address" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Address< / th >
< td * matCellDef = "let utxo" mat-cell >
< span fxLayout . gt-xs = "row" class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{utxo.address}}< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "scriptpubkey" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Script Pubkey< / th >
< td * matCellDef = "let utxo" mat-cell >
< span fxLayout . gt-xs = "row" class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{utxo.scriptpubkey}}< / span >
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "output" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Output< / th >
< td * matCellDef = "let utxo" mat-cell > < span fxLayoutAlign = "end center" >
{{utxo?.output | 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 utxo" mat-cell >
< span * ngIf = "utxo.amount_msat > 0 || utxo.amount_msat === 0" fxLayoutAlign = "end center" > {{utxo.amount_msat / 1000 | number:'1.0-0'}}< / span >
< span * ngIf = "utxo.amount_msat < 0" fxLayoutAlign = "end center" class = "red" > ({{utxo.amount_msat / 1000 * -1 | number:'1.0-0'}})< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "blockheight" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Blockheight< / th >
< td * matCellDef = "let utxo" mat-cell > < span fxLayoutAlign = "end center" >
{{utxo?.blockheight | number}} < / span > < / td >
< / ng-container >
< ng-container matColumnDef = "reserved" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Reserved< / th >
< td * matCellDef = "let utxo" mat-cell >
< span > {{utxo.reserved ? 'Yes' : 'No'}}< / 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 utxo" mat-cell fxLayoutAlign = "end center" >
< button mat-stroked-button color = "primary" type = "button" tabindex = "4" class = "table-actions-button" ( click ) = " onUTXOClick ( utxo , $ event ) " > View Info< / button >
< / td >
< / ng-container >
< ng-container matColumnDef = "no_utxo" >
< td * matFooterCellDef mat-footer-cell colspan = "4" >
< p * ngIf = "(!listUTXOs?.data || listUTXOs?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED" > No utxos available.< / p >
< p * ngIf = "(!listUTXOs?.data || listUTXOs?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.INITIATED" > Getting utxos...< / p >
< p * ngIf = "(!listUTXOs?.data || listUTXOs?.data?.length<1) && apiCallStatus?.status === apiCallStatusEnum.ERROR" > {{errorMessage}}< / p >
< / td >
< / ng-container >
< tr * matFooterRowDef = "['no_utxo']" mat-footer-row [ ngClass ] = " { ' display-none ' : listUTXOs ? . data & & listUTXOs ? . 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" [ pageSize ] = " pageSize " [ pageSizeOptions ] = " pageSizeOptions " [ showFirstLastButtons ] = " screenSize = == screenSizeEnum . XS ? false : true " / >
< / div >
< / div >
< / div >
< ng-template # emptySpace >
< mat-icon fxLayoutAlign = "start center" color = "warn" class = "mr-1" / >
< / ng-template >