< div * ngIf = "!flgShowInfo" fxLayout = "column" fxFlex = "100" fxLayoutAlign = "start stretch" [ @ opacityAnimation ] >
< div fxFlex = "100" >
< mat-card-header fxLayout = "row" fxLayoutAlign = "space-between center" class = "modal-info-header" >
< div fxLayoutAlign = "start start" [ fxFlex ] = " screenSize = == screenSizeEnum . XS | | screenSize = == screenSizeEnum . SM ? ' 83 ' : ' 91 ' " > < span class = "page-title" > {{swapDirectionCaption}}< / span > < / div >
< div fxLayoutAlign = "end end" [ fxFlex ] = " screenSize = == screenSizeEnum . XS | | screenSize = == screenSizeEnum . SM ? ' 17 ' : ' 9 ' " >
< button tabindex = "21" class = "btn-close-x p-0" mat-button ( click ) = " showInfo ( ) " > ?< / button >
< button tabindex = "22" class = "btn-close-x p-0" mat-button ( click ) = " onClose ( ) " > X< / button >
< / div >
< / mat-card-header >
< mat-card-content class = "padding-gap-x-large" >
< div fxLayout = "column" >
< mat-vertical-stepper # stepper [ linear ] = " true " ( selectionChange ) = " stepSelectionChanged ( $ event ) " >
< mat-step [ stepControl ] = " inputFormGroup " [ editable ] = " flgEditable " >
< form fxLayout = "column" fxLayoutAlign = "start" fxLayoutAlign . gt-sm = "space-between" class = "my-1" [ formGroup ] = " inputFormGroup " >
< ng-template matStepLabel > {{inputFormLabel}}< / ng-template >
< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "space-between stretch" >
< rtl-boltz-service-info [ serviceInfo ] = " serviceInfo " [ direction ] = " direction " / >
< / div >
< div fxLayout = "row wrap" fxFlex = "100" fxLayoutAlign = "space-between center" class = "mt-1" >
< mat-form-field fxLayout = "column" fxFlex = "48" >
< mat-label > Amount< / mat-label >
< input autoFocus matInput type = "number" tabindex = "1" formControlName = "amount" required [ step ] = " 1000 " >
< mat-hint > Range: {{serviceInfo?.limits?.minimal | number}}-{{serviceInfo?.limits?.maximal | number}}< / mat-hint >
< span matSuffix > Sats< / span >
< mat-error * ngIf = "inputFormGroup?.controls?.amount?.errors?.required" > Amount is required.< / mat-error >
< mat-error * ngIf = "inputFormGroup?.controls?.amount?.errors?.min" > Amount must be greater than or equal to {{serviceInfo?.limits?.minimal | number}}.< / mat-error >
< mat-error * ngIf = "inputFormGroup?.controls?.amount?.errors?.max" > Amount must be less than or equal to {{serviceInfo?.limits?.maximal | number}}.< / mat-error >
< / mat-form-field >
< div * ngIf = "direction === swapTypeEnum.SWAP_OUT" fxLayout = "column" fxFlex = "48" fxLayoutAlign = "start stretch" >
< div fxLayout = "row" fxFlex = "100" fxLayoutAlign = "start center" >
< mat-slide-toggle fxLayoutAlign = "start center" tabindex = "2" color = "primary" formControlName = "acceptZeroConf" name = "acceptZeroConf" > Accept Zero Conf< / mat-slide-toggle >
< mat-icon matTooltip = "Only recommended for smaller payments, involves trust in Boltz" matTooltipPosition = "above" class = "info-icon mt-2" > info_outline< / mat-icon >
< / div >
< / div >
< div * ngIf = "direction === swapTypeEnum.SWAP_IN && isSendFromInternalCompatible" fxLayout = "column" fxFlex = "48" fxLayoutAlign = "start stretch" >
< div fxLayout = "row" fxFlex = "100" fxLayoutAlign = "start center" >
< mat-slide-toggle fxLayoutAlign = "start center" tabindex = "2" color = "primary" formControlName = "sendFromInternal" name = "sendFromInternal" > Send from Internal Wallet< / mat-slide-toggle >
< mat-icon matTooltip = "Pay from the node's onchain wallet" matTooltipPosition = "above" class = "info-icon mt-2" > info_outline< / mat-icon >
< / div >
< / div >
< / div >
< div class = "mt-2" fxLayout = "row" fxLayoutAlign = "start center" fxFlex = "100" >
< button * ngIf = "direction === swapTypeEnum.SWAP_OUT" mat-button color = "primary" tabindex = "2" type = "button" matStepperNext > Next< / button >
< button * ngIf = "direction === swapTypeEnum.SWAP_IN" mat-button color = "primary" tabindex = "3" type = "button" ( click ) = " onSwap ( ) " > Initiate {{swapDirectionCaption}}< / button >
< / div >
< / form >
< / mat-step >
< mat-step * ngIf = "direction === swapTypeEnum.SWAP_OUT" [ stepControl ] = " addressFormGroup " [ editable ] = " flgEditable " >
< form fxLayout = "column" fxLayoutAlign = "start" fxLayoutAlign . gt-sm = "space-between" class = "my-1" [ formGroup ] = " addressFormGroup " >
< ng-template matStepLabel > {{addressFormLabel}}< / ng-template >
< div fxLayout = "row wrap" fxFlex = "100" fxLayoutAlign = "space-between stretch" class = "mt-1" >
< mat-radio-group color = "primary" name = "addressType" formControlName = "addressType" fxFlex = "100" fxLayoutAlign = "space-between stretch" ( change ) = " onAddressTypeChange ( $ event ) " >
< mat-radio-button fxFlex = "48" tabindex = "8" value = "local" > Node Local Address< / mat-radio-button >
< mat-radio-button fxFlex = "48" tabindex = "9" value = "external" > External Address< / mat-radio-button >
< / mat-radio-group >
< mat-form-field fxLayout = "column" fxFlex = "100" class = "mt-1" >
< mat-label > Address< / mat-label >
< input matInput tabindex = "10" formControlName = "address" [ required ] = " addressFormGroup . controls . addressType . value = == ' external ' " >
< mat-error * ngIf = "addressFormGroup.controls.address.errors?.required" > Address is required.< / mat-error >
< / mat-form-field >
< / div >
< div class = "mt-2" fxLayout = "row" fxLayoutAlign = "start center" fxFlex = "100" >
< button mat-button color = "primary" tabindex = "11" type = "button" ( click ) = " onSwap ( ) " > Initiate {{swapDirectionCaption}}< / button >
< / div >
< / form >
< / mat-step >
< mat-step [ stepControl ] = " statusFormGroup " >
< form fxLayout = "column" fxLayoutAlign = "start" fxLayoutAlign . gt-sm = "space-between" class = "my-1" [ formGroup ] = " statusFormGroup " >
< ng-template matStepLabel > {{swapDirectionCaption}} Status< / ng-template >
< div fxLayout = "row wrap" fxFlex = "100" fxLayoutAlign = "space-between stretch" >
< mat-expansion-panel class = "flat-expansion-panel" fxFlex = "100" [ expanded ] = " ! ! swapStatus " >
< mat-expansion-panel-header >
< mat-panel-title >
< span fxLayoutAlign = "start center" fxFlex = "100" > {{(!swapStatus) ? ('Waiting for ' + swapDirectionCaption + ' request...') : (swapStatus.id) ? (swapDirectionCaption + ' request details') : (swapDirectionCaption + ' error details')}}< mat-icon * ngIf = "swapStatus" class = "ml-1 icon-small" > {{(swapStatus & & swapStatus?.id) ? 'check' : 'close'}}< / mat-icon > < / span >
< / mat-panel-title >
< / mat-expansion-panel-header >
< div * ngIf = "!swapStatus; else swapStatusBlock" > < / div >
< / mat-expansion-panel >
< mat-progress-bar * ngIf = "!swapStatus" fxFlex = "100" color = "primary" mode = "indeterminate" / >
< / div >
< h4 * ngIf = "swapStatus" fxLayoutAlign = "start" class = "font-bold-500 mt-2" > {{(swapStatus & & swapStatus.error) ? (swapDirectionCaption + ' failed.') : (swapStatus & & swapStatus.id) ? (swapDirectionCaption + ' request placed successfully. You can check the status of the request on the \'Boltz\' menu.') : (swapDirectionCaption + ' request placed successfully.')}}< / h4 >
< div class = "mt-2" fxLayout = "row" fxLayoutAlign = "start center" fxFlex = "100" >
< button * ngIf = "swapStatus && (swapStatus.error || !swapStatus.id)" mat-button color = "primary" tabindex = "13" type = "button" ( click ) = " onRestart ( ) " > Start Again< / button >
< / div >
< / form >
< / mat-step >
< / mat-vertical-stepper >
< div fxLayout = "row" fxFlex = "100" fxLayoutAlign = "end end" >
< button mat-button color = "primary" tabindex = "14" type = "button" default [ mat-dialog-close ] = " false " > Close< / button >
< / div >
< / div >
< / mat-card-content >
< / div >
< / div >
< ng-template # swapStatusBlock >
< rtl-boltz-swap-status fxLayout = "column" [ swapStatus ] = " swapStatus " [ direction ] = " direction " [ acceptZeroConf ] = " inputFormGroup ? . controls ? . acceptZeroConf . value " [ sendFromInternal ] = " inputFormGroup ? . controls ? . sendFromInternal . value " / >
< / ng-template >
< div * ngIf = "flgShowInfo" fxLayout = "column" fxFlex = "100" fxLayoutAlign = "start stretch" class = "info-graphics-container" [ @ opacityAnimation ] >
< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "space-between stretch" >
< mat-card-header fxLayout = "row" fxFlex = "8" fxLayoutAlign = "space-between center" class = "modal-info-header" >
< div fxFlex = "95" fxLayoutAlign = "start start" > < span class = "page-title" > < / span > < / div >
< div fxFlex = "5" fxLayoutAlign = "end center" >
< button tabindex = "22" class = "btn-close-x p-0" mat-button ( click ) = " flgShowInfo = false;stepNumber=1;" > X< / button >
< / div >
< / mat-card-header >
< mat-card-content fxLayout = "column" fxFlex = "70" fxLayoutAlign = "space-between center" class = "padding-gap-x-large" >
< rtl-boltz-swapout-info-graphics * ngIf = "direction === swapTypeEnum.SWAP_OUT" fxFlex = "100" [ animationDirection ] = " animationDirection " [ ( stepNumber ) ] = " stepNumber " / >
< rtl-boltz-swapin-info-graphics * ngIf = "direction === swapTypeEnum.SWAP_IN" fxFlex = "100" [ animationDirection ] = " animationDirection " [ ( stepNumber ) ] = " stepNumber " / >
< / mat-card-content >
< div fxLayout = "row" fxFlex = "10" fxLayoutAlign = "center end" class = "padding-gap-x-large padding-gap-bottom-large" >
< span * ngFor = "let i of [1, 2, 3, 4, 5];" tabindex = "21" fxLayoutAlign = "center center" class = "dots-stepper-block" ( click ) = " onStepChanged ( i ) " >
< p class = "dot tiny-dot mr-0" [ ngClass ] = " { ' dot-primary ' : stepNumber = == i , ' dot-primary-lighter ' : stepNumber ! = = i } " > < / p >
< / span >
< / div >
< div fxLayout = "row" fxFlex = "10" fxLayoutAlign = "end end" class = "padding-gap-x-large padding-gap-bottom-large" >
< button * ngIf = "stepNumber === 5" mat-button class = "mr-1" color = "primary" tabindex = "15" type = "button" ( click ) = " onReadMore ( ) " > Read More< / button >
< button * ngIf = "stepNumber === 5" mat-button class = "mr-1" color = "primary" tabindex = "16" type = "button" ( click ) = " onStepChanged ( 4 ) " > Back< / button >
< button * ngIf = "stepNumber === 5" mat-button color = "primary" tabindex = "17" type = "button" ( click ) = " flgShowInfo = false;stepNumber=1;" > Close< / button >
< button * ngIf = "stepNumber < 5" mat-button class = "mr-1" color = "primary" tabindex = "18" type = "button" ( click ) = " flgShowInfo = false;stepNumber=1;" > Close< / button >
< button * ngIf = "stepNumber > 1 && stepNumber < 5" mat-button class = "mr-1" color = "primary" tabindex = "19" type = "button" ( click ) = " onStepChanged ( stepNumber - 1 ) " > Back< / button >
< button * ngIf = "stepNumber < 5" mat-button color = "primary" tabindex = "20" type = "button" ( click ) = " onStepChanged ( stepNumber + 1 ) " > Next< / button >
< / div >
< / div >
< / div >