< div fxLayout = "row" >
< 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" > {{alertTitle}}< / span >
< / div >
< button tabindex = "8" fxFlex = "5" fxLayoutAlign = "center center" class = "btn-close-x p-0" mat-button ( click ) = " onClose ( ) " > X< / button >
< / mat-card-header >
< mat-card-content class = "padding-gap-x-large" >
< form # form = "ngForm" fxLayout = "column" ( submit ) = " onOpenChannel ( ) " ( reset ) = " resetData ( ) " >
< div fxLayout = "column" >
< mat-form-field * ngIf = "!peer && peers && peers.length > 0" fxFlex = "100" >
< mat-label > Peer Alias< / mat-label >
< input type = "text" aria-label = "Peers" matInput tabindex = "1" required [ formControl ] = " selectedPeer " [ matAutocomplete ] = " auto " ( change ) = " onSelectedPeerChanged ( ) " >
< mat-autocomplete # auto = "matAutocomplete" [ displayWith ] = " displayFn " ( optionSelected ) = " onSelectedPeerChanged ( ) " >
< mat-option * ngFor = "let peer of filteredPeers | async" [ value ] = " peer " > {{peer.alias ? peer.alias : peer.id ? peer.id : ''}}< / mat-option >
< / mat-autocomplete >
< mat-error * ngIf = "selectedPeer.errors?.required" > Peer alias is required.< / mat-error >
< mat-error * ngIf = "selectedPeer.errors?.notfound" > Peer not found in the list.< / mat-error >
< / mat-form-field >
< / div >
< ng-container * ngTemplateOutlet = "peerDetailsExpansionBlock" > < / ng-container >
< div fxLayout = "column" >
< div fxLayout = "row" fxFlex = "100" fxLayoutAlign = "space-between center" >
< mat-form-field fxLayout = "column" fxFlex = "70" fxLayoutAlign = "start end" >
< mat-label > Amount< / mat-label >
< input # amount = "ngModel" matInput type = "number" tabindex = "1" required name = "amount" [ step ] = " 1000 " [ min ] = " 1 " [ max ] = " totalBalance " [ disabled ] = " flgUseAllBalance " [ ( ngModel ) ] = " fundingAmount " >
< mat-hint > Remaining: {{totalBalance - ((fundingAmount) ? fundingAmount : 0) | number}}{{flgUseAllBalance ? '. Amount replaced by UTXO balance' : ''}}< / mat-hint >
< span matSuffix > Sats < / span >
< mat-error * ngIf = "amount.errors?.required || !fundingAmount" > Amount is required.< / mat-error >
< mat-error * ngIf = "amount.errors?.max" > Amount must be less than or equal to {{totalBalance}}.< / mat-error >
< / mat-form-field >
< div fxFlex = "25" fxLayoutAlign = "start center" >
< mat-slide-toggle tabindex = "2" color = "primary" name = "isPrivate" [ ( ngModel ) ] = " isPrivate " > Private Channel< / mat-slide-toggle >
< / div >
< / div >
< mat-expansion-panel class = "flat-expansion-panel mt-2" expanded = "false" ( closed ) = " onAdvancedPanelToggle ( true ) " ( opened ) = " onAdvancedPanelToggle ( false ) " >
< mat-expansion-panel-header >
< mat-panel-title >
< span > {{advancedTitle}}< / span >
< / mat-panel-title >
< / mat-expansion-panel-header >
< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "start stretch" >
< div fxLayout = "column" fxLayoutAlign = "space-between stretch" fxLayoutAlign . gt-sm = "space-between center" fxLayout . gt-sm = "row wrap" >
< div fxFlex = "54" fxLayout = "row" fxLayoutAlign = "space-between center" >
< mat-form-field fxLayout = "column" fxLayoutAlign = "start center" [ fxFlex ] = " selFeeRate = == ' customperkb ' & & ! flgMinConf ? ' 48 ' : ' 100 ' " >
< mat-label > Fee Rate< / mat-label >
< mat-select tabindex = "4" [ disabled ] = " flgMinConf " [ ( value ) ] = " selFeeRate " ( selectionChange ) = " customFeeRate = null" >
< mat-option * ngFor = "let feeRateType of feeRateTypes" [ value ] = " feeRateType . feeRateId " >
{{feeRateType.feeRateType}}
< / mat-option >
< / mat-select >
< / mat-form-field >
< mat-form-field * ngIf = "selFeeRate === 'customperkb' && !flgMinConf" fxLayout = "column" fxFlex = "48" fxLayoutAlign = "end center" >
< mat-label > Fee Rate (Sats/vByte)< / mat-label >
< input # custFeeRate = "ngModel" matInput type = "number" name = "custFeeRate" tabindex = "4" [ step ] = " 0 . 1 " [ min ] = " 0 " [ required ] = " selFeeRate = == ' customperkb ' & & ! flgMinConf " [ ( ngModel ) ] = " customFeeRate " >
< mat-error * ngIf = "selFeeRate === 'customperkb' && !flgMinConf && !customFeeRate" > Fee Rate is required.< / mat-error >
< / mat-form-field >
< / div >
< div fxFlex = "42" fxLayout = "row" fxLayoutAlign = "start center" >
< mat-checkbox fxFlex = "7" tabindex = "5" color = "primary" name = "flgMinConf" fxLayoutAlign = "stretch start" [ ngClass ] = " { ' mr-6 ' : screenSize = == screenSizeEnum . XS | | screenSize = == screenSizeEnum . SM , ' mr-2 ' : screenSize = == screenSizeEnum . MD | | screenSize = == screenSizeEnum . LG | | screenSize = == screenSizeEnum . XL } " [ ( ngModel ) ] = " flgMinConf " ( change ) = " flgMinConf ? selFeeRate = null : minConfValue = null" > < / mat-checkbox >
< mat-form-field fxLayout = "column" fxFlex = "93" >
< mat-label > Min Confirmation Blocks< / mat-label >
< input # blocks = "ngModel" matInput type = "number" name = "blocks" tabindex = "8" [ step ] = " 1 " [ min ] = " 0 " [ required ] = " flgMinConf " [ disabled ] = " ! flgMinConf " [ ( ngModel ) ] = " minConfValue " >
< mat-error * ngIf = "flgMinConf && !minConfValue" > Min Blocks is required.< / mat-error >
< / mat-form-field >
< / div >
< / div >
< div * ngIf = "isCompatibleVersion" fxLayout = "column" fxLayoutAlign = "space-between stretch" fxLayoutAlign . gt-sm = "space-between center" fxLayout . gt-sm = "row wrap" >
< mat-form-field fxLayout = "column" fxFlex = "54" fxLayoutAlign = "start end" >
< mat-label > Coin Selection< / mat-label >
< mat-select tabindex = "6" multiple [ ( value ) ] = " selUTXOs " ( selectionChange ) = " onUTXOSelectionChange ( $ event ) " >
< mat-select-trigger > {{totalSelectedUTXOAmount | number}} Sats ({{selUTXOs.length > 1 ? selUTXOs.length + ' UTXOs' : '1 UTXO'}})< / mat-select-trigger >
< mat-option * ngFor = "let utxo of utxos" [ value ] = " utxo " > {{utxo.value | number}} Sats< / mat-option >
< / mat-select >
< / mat-form-field >
< div fxFlex = "41" fxLayout = "row" fxLayoutAlign = "start center" >
< mat-slide-toggle tabindex = "7" color = "primary" name = "flgUseAllBalance" [ disabled ] = " selUTXOs . length < 1 " [ ( ngModel ) ] = " flgUseAllBalance " ( change ) = " onUTXOAllBalanceChange ( ) " >
Use selected UTXOs balance
< / mat-slide-toggle >
< mat-icon matTooltip = "Use selected UTXOs balance as the amount to be sent. Final amount sent will be less the mining fee." matTooltipPosition = "before" class = "info-icon" > info_outline< / mat-icon >
< / div >
< / div >
< / div >
< / mat-expansion-panel >
< / div >
< div * ngIf = "channelConnectionError !== ''" fxFlex = "100" class = "alert alert-danger mt-1" >
< fa-icon class = "mr-1 alert-icon" [ icon ] = " faExclamationTriangle " > < / fa-icon >
< span * ngIf = "channelConnectionError !== ''" > {{channelConnectionError}}< / span >
< / div >
< div class = "mt-2" fxLayout = "row" fxLayoutAlign = "end center" >
< button mat-button color = "primary" class = "mr-1" tabindex = "7" type = "reset" > Clear Fields< / button >
< button autoFocus mat-button color = "primary" type = "submit" tabindex = "9" > Open Channel< / button >
< / div >
< / form >
< / mat-card-content >
< / div >
< / div >
< ng-template # peerDetailsExpansionBlock >
< mat-expansion-panel * ngIf = "peer" class = "flat-expansion-panel my-1" expanded = "false" >
< mat-expansion-panel-header >
< mat-panel-title >
< span > Peer: < / span > < strong class = "font-weight-900" > {{peer?.alias || peer?.id}}< / strong >
< / mat-panel-title >
< / mat-expansion-panel-header >
< div fxLayout = "column" >
< div fxLayout = "row" >
< div fxFlex = "100" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Pubkey< / h4 >
< span class = "foreground-secondary-text" > {{peer.id}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" > < / mat-divider >
< div fxLayout = "row" >
< div fxFlex = "50" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Address< / h4 >
< span class = "overflow-wrap foreground-secondary-text" > {{peer?.netaddr}}< / span >
< / div >
< div fxFlex = "50" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Connected< / h4 >
< span class = "overflow-wrap foreground-secondary-text" > {{peer.connected ? 'True' : 'False'}}< / span >
< / div >
< / div >
< / div >
< / mat-expansion-panel >
< / ng-template >