< div fxLayout = "row" fxLayoutAlign = "start center" class = "page-title-container" >
< fa-icon class = "page-title-img mr-1" [ icon ] = " faBullhorn " / >
< span class = "page-title" > Liquidity Ads< / span >
< / div >
< div fxLayout = "column" class = "padding-gap-x" >
< mat-card >
< mat-card-content class = "padding-gap-large" >
< div fxLayout = "column" fxLayoutAlign = "space-between stretch" >
< form # formAsk = "ngForm" fxFlex = "100" fxLayout = "column" fxLayoutAlign = "start stretch" fxLayoutAlign . gt-sm = "space-between stretch" fxLayout . gt-sm = "row wrap" >
< div fxFlex . gt-xs = "100" fxLayout = "row" class = "alert alert-warn" >
< fa-icon class = "mr-1 alert-icon" [ icon ] = " faExclamationTriangle " / >
< span > Ads should be supplemented with additional research of the node, before buying liquidity.< / span >
< / div >
< div fxLayout = "column" fxLayout . gt-sm = "row wrap" fxFlex = "100" fxLayoutAlign . gt-sm = "space-between center" fxLayoutAlign = "start stretch" class = "page-sub-title-container mt-1" >
< div fxLayout = "row" fxLayoutAlign = "start center" fxFlex = "30" >
< span class = "page-text" > Liquidity Ask< / span >
< mat-icon matTooltipPosition = "above" matTooltipClass = "pre-wrap" class = "info-icon info-icon-primary" [ matTooltip ] = " askTooltipMsg " > info_outline< / mat-icon >
< / div >
< mat-form-field fxLayout = "column" fxFlex = "34" >
< mat-label > Channel Amount (Sats)< / mat-label >
< input autoFocus matInput name = "channelAmount" tabindex = "1" type = "number" step = "10000" required [ ( ngModel ) ] = " channelAmount " ( keyup ) = " onCalculateOpeningFee ( ) " >
< mat-error * ngIf = "!channelAmount" > Channel amount is required.< / mat-error >
< / mat-form-field >
< mat-form-field fxLayout = "column" fxFlex = "34" >
< mat-label > Channel Opening Fee Rate (Sats/vByte)< / mat-label >
< input matInput name = "channel_opening_feeRate" type = "number" step = "10" tabindex = "2" required [ ( ngModel ) ] = " channel_opening_feeRate " ( keyup ) = " onCalculateOpeningFee ( ) " >
< mat-error * ngIf = "!channel_opening_feeRate" > Channel opening fee rate is required.< / mat-error >
< / mat-form-field >
< / div >
< / form >
<!-- <mat - divider [inset]="true" class="my - 2"></mat - divider>
< form fxLayout = "column" fxLayoutAlign = "space-between stretch" fxLayout . gt-sm = "row wrap" # formFilter = "ngForm" >
< div fxLayout = "column" fxLayout . gt-sm = "row wrap" fxFlex = "100" fxLayoutAlign . gt-sm = "space-between center" fxLayoutAlign = "start start" class = "page-sub-title-container mt-1" >
< div fxFlex = "30" >
< span class = "page-title" >
Nodes Advertising Liquidity
< mat-icon [ matTooltip ] = " nodesTooltipMsg " matTooltipPosition = "above" matTooltipClass = "pre-wrap" class = "info-icon info-icon-primary" > info_outline< / mat-icon >
< / span >
< / div >
< mat-form-field fxLayout = "column" fxFlex = "34" >
< mat-label > Node Capacity (Sats)< / mat-label >
< input matInput name = "node_capacity" [ ( ngModel ) ] = " node_capacity " ( keyup ) = " onFilter ( ) " tabindex = "5" type = "number" min = "0" step = "1000" >
< mat-error * ngIf = "!node_capacity" > Node capacity is required.< / mat-error >
< / mat-form-field >
< mat-form-field fxLayout = "column" fxFlex = "34" >
< mat-label > Channel Count< / mat-label >
< input matInput name = "channel_count" [ ( ngModel ) ] = " channel_count " ( keyup ) = " onFilter ( ) " type = "number" step = "1" min = "0" tabindex = "6" >
< / mat-form-field >
< / div >
< / form > -->
< div fxLayout = "column" fxLayout . gt-xs = "row" fxLayoutAlign . gt-xs = "start center" fxLayoutAlign = "start stretch" class = "page-sub-title-container mt-2" >
< div fxFlex = "70" >
< fa-icon class = "page-title-img mr-1" [ icon ] = " faUsers " / >
< span class = "page-title" > Liquidity Providing Peers< / 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 = "column" fxFlex = "100" class = "table-container" [ perfectScrollbar ] >
< mat-progress-bar * ngIf = "listNodesCallStatus === apiCallStatusEnum.INITIATED" mode = "indeterminate" / >
< table # table mat-table matSort [ matSortActive ] = " tableSetting . sortBy " [ matSortDirection ] = " tableSetting . sortOrder " [ dataSource ] = " liquidityNodes " [ ngClass ] = " { ' error-border ' : errorMessage ! = = ' ' } " >
< ng-container matColumnDef = "alias" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Alias< / th >
< td * matCellDef = "let lqNode" mat-cell >
< div class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span fxLayout . gt-xs = "row" fxLayoutAlign . gt-xs = "start center" class = "ellipsis-child" >
{{lqNode?.alias}}
< mat-chip-list class = "ml-half" aria-label = "Address Types" >
< mat-chip * ngFor = "let addrType of lqNode.address_types" color = "primary" selected >
{{addrType === 'tor' ? 'Tor' : addrType === 'ipv' ? 'Clearnet' : addrType}}
< / mat-chip >
< / mat-chip-list >
< / span >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "nodeid" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Node ID< / th >
< td * matCellDef = "let lqNode" mat-cell >
< div class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{lqNode?.nodeid}}< / span >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "last_timestamp" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Last Announcement At< / th >
< td * matCellDef = "let lqNode" mat-cell > {{((lqNode?.last_timestamp * 1000) | date:'dd/MMM/y HH:mm') || '-'}}< / td >
< / ng-container >
< ng-container matColumnDef = "compact_lease" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Compact Lease< / th >
< td * matCellDef = "let lqNode" mat-cell > {{ lqNode?.option_will_fund?.compact_lease }}< / td >
< / ng-container >
<!-- <ng - container matColumnDef="capacity_channels">
< th mat-header-cell * matHeaderCellDef > Capacity/Channels< / th >
< td mat-cell * matCellDef = "let lqNode" >
{{lqNode?.node_capacity/100000000 | number:'1.0-2'}} BTC / {{lqNode?.channel_count | number:'1.0-0'}}
< / td >
< / ng-container > -->
< ng-container matColumnDef = "lease_fee" >
< th * matHeaderCellDef mat-header-cell > Lease Fee< / th >
< td * matCellDef = "let lqNode" mat-cell >
{{lqNode?.option_will_fund?.lease_fee_base_msat/1000 | number:'1.0-0'}} Sats + {{(lqNode?.option_will_fund?.lease_fee_basis/100) | number:'1.2-2'}}%
< / td >
< / ng-container >
< ng-container matColumnDef = "routing_fee" >
< th * matHeaderCellDef mat-header-cell > Routing Fee< / th >
< td * matCellDef = "let lqNode" mat-cell >
{{lqNode?.option_will_fund?.channel_fee_max_base_msat/1000 | number:'1.0-0'}} Sats + {{lqNode?.option_will_fund?.channel_fee_max_proportional_thousandths * 1000 | number:'1.0-0'}} ppm
< / td >
< / ng-container >
< ng-container matColumnDef = "channel_opening_fee" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Channel Opening Fee (Sats)< / th >
< td * matCellDef = "let lqNode" mat-cell >
< span fxLayoutAlign = "end center" >
{{lqNode.channel_opening_fee | number:'1.0-0'}}
< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "funding_weight" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Funding Weight< / th >
< td * matCellDef = "let lqNode" mat-cell >
< span fxLayoutAlign = "end center" >
{{lqNode?.option_will_fund?.funding_weight | number:'1.0-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 lqNode" mat-cell fxLayoutAlign = "end center" >
< 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 ) = " onViewLeaseInfo ( lqNode ) " > View Info< / mat-option >
< mat-option ( click ) = " onOpenChannel ( lqNode ) " > Open Channel< / mat-option >
< mat-option ( click ) = " viewLeaseOn ( lqNode , ' LN ' ) " > View on Lnrouter< / mat-option >
< mat-option ( click ) = " viewLeaseOn ( lqNode , ' AM ' ) " > View on Amboss< / mat-option >
< / mat-select >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "no_lqNode" >
< td * matFooterCellDef mat-footer-cell colspan = "4" >
< p * ngIf = "(!liquidityNodes?.data || liquidityNodes?.data?.length<1) && listNodesCallStatus === apiCallStatusEnum.COMPLETED" > No node with liquidity.< / p >
< p * ngIf = "(!liquidityNodes?.data || liquidityNodes?.data?.length<1) && listNodesCallStatus === apiCallStatusEnum.INITIATED" > Getting nodes with liquidity...< / p >
< p * ngIf = "(!liquidityNodes?.data || liquidityNodes?.data?.length<1) && listNodesCallStatus === apiCallStatusEnum.ERROR" > {{errorMessage}}< / p >
< / td >
< / ng-container >
< tr * matFooterRowDef = "['no_lqNode']" mat-footer-row [ ngClass ] = " { ' display-none ' : liquidityNodes ? . data & & liquidityNodes ? . data ? . length > 0}">< / tr >
< tr * matHeaderRowDef = "displayedColumns" mat-header-row > < / tr >
< tr * matRowDef = "let row; columns: displayedColumns;" mat-row > < / tr >
< / table >
< / div >
< mat-paginator class = "mb-1" [ pageSize ] = " pageSize " [ pageSizeOptions ] = " pageSizeOptions " [ showFirstLastButtons ] = " screenSize = == screenSizeEnum . XS ? false : true " / >
< / div >
< / mat-card-content >
< / mat-card >
< / div >