You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
207 lines
8.6 KiB
TypeScript
207 lines
8.6 KiB
TypeScript
3 years ago
|
import { Component, OnInit, Inject, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
|
||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||
|
import { Router } from '@angular/router';
|
||
|
import { DecimalPipe } from '@angular/common';
|
||
|
import { Subject } from 'rxjs';
|
||
|
import { takeUntil } from 'rxjs/operators';
|
||
|
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||
3 years ago
|
import { MatStepper } from '@angular/material/stepper';
|
||
3 years ago
|
import { Store } from '@ngrx/store';
|
||
|
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
|
||
|
|
||
|
import { opacityAnimation } from '../../../../animation/opacity-animation';
|
||
|
import { ScreenSizeEnum, SwapTypeEnum } from '../../../../services/consts-enums-functions';
|
||
|
import { ServiceInfo, CreateSwapResponse, CreateReverseSwapResponse } from '../../../../models/boltzModels';
|
||
|
import { SwapAlert } from '../../../../models/alertData';
|
||
|
import { BoltzService } from '../../../../services/boltz.service';
|
||
|
import { LoggerService } from '../../../../services/logger.service';
|
||
|
import { CommonService } from '../../../../services/common.service';
|
||
|
|
||
2 years ago
|
import { RTLState } from '../../../../../store/rtl.state';
|
||
3 years ago
|
|
||
|
@Component({
|
||
|
selector: 'rtl-boltz-swap-modal',
|
||
|
templateUrl: './swap-modal.component.html',
|
||
|
styleUrls: ['./swap-modal.component.scss'],
|
||
|
animations: [opacityAnimation]
|
||
|
})
|
||
|
export class SwapModalComponent implements OnInit, AfterViewInit, OnDestroy {
|
||
3 years ago
|
|
||
|
@ViewChild('stepper', { static: false }) stepper: MatStepper;
|
||
3 years ago
|
public faInfoCircle = faInfoCircle;
|
||
3 years ago
|
public serviceInfo: ServiceInfo = { fees: { percentage: null, miner: { normal: null, reverse: null } }, limits: { minimal: 10000, maximal: 50000000 } };
|
||
3 years ago
|
public swapTypeEnum = SwapTypeEnum;
|
||
|
public direction = SwapTypeEnum.SWAP_OUT;
|
||
|
public swapDirectionCaption = 'Swap out';
|
||
2 years ago
|
public swapStatus: CreateSwapResponse | CreateReverseSwapResponse | { error: any } | null = null;
|
||
3 years ago
|
public inputFormLabel = 'Amount to swap out';
|
||
|
public addressFormLabel = 'Withdrawal Address';
|
||
|
public flgShowInfo = false;
|
||
|
public stepNumber = 1;
|
||
|
public screenSize = '';
|
||
|
public screenSizeEnum = ScreenSizeEnum;
|
||
|
public animationDirection = 'forward';
|
||
|
public flgEditable = true;
|
||
|
inputFormGroup: FormGroup;
|
||
|
addressFormGroup: FormGroup;
|
||
3 years ago
|
statusFormGroup: FormGroup;
|
||
3 years ago
|
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
|
||
|
|
||
2 years ago
|
constructor(public dialogRef: MatDialogRef<SwapModalComponent>, @Inject(MAT_DIALOG_DATA) public data: SwapAlert, private store: Store<RTLState>, private boltzService: BoltzService, private formBuilder: FormBuilder, private decimalPipe: DecimalPipe, private logger: LoggerService, private router: Router, private commonService: CommonService) { }
|
||
3 years ago
|
|
||
|
ngOnInit() {
|
||
|
this.screenSize = this.commonService.getScreenSize();
|
||
|
this.serviceInfo = this.data.serviceInfo;
|
||
2 years ago
|
this.direction = this.data.direction || SwapTypeEnum.SWAP_OUT;
|
||
3 years ago
|
this.swapDirectionCaption = this.direction === SwapTypeEnum.SWAP_OUT ? 'Swap Out' : 'Swap in';
|
||
3 years ago
|
this.inputFormLabel = 'Amount to ' + this.swapDirectionCaption;
|
||
3 years ago
|
this.inputFormGroup = this.formBuilder.group({
|
||
2 years ago
|
amount: [this.serviceInfo.limits?.minimal, [Validators.required, Validators.min(this.serviceInfo.limits?.minimal || 0), Validators.max(this.serviceInfo.limits?.maximal || 0)]]
|
||
3 years ago
|
});
|
||
3 years ago
|
this.addressFormGroup = this.formBuilder.group({
|
||
|
addressType: ['local', [Validators.required]],
|
||
3 years ago
|
address: [{ value: '', disabled: true }]
|
||
3 years ago
|
});
|
||
|
this.statusFormGroup = this.formBuilder.group({});
|
||
|
this.onFormValueChanges();
|
||
|
}
|
||
|
|
||
|
ngAfterViewInit() {
|
||
|
if (this.direction === SwapTypeEnum.SWAP_OUT) {
|
||
3 years ago
|
this.addressFormGroup.setErrors({ Invalid: true });
|
||
3 years ago
|
}
|
||
|
}
|
||
|
|
||
|
onFormValueChanges() {
|
||
|
if (this.direction === SwapTypeEnum.SWAP_OUT) {
|
||
3 years ago
|
this.addressFormGroup.valueChanges.pipe(takeUntil(this.unSubs[2])).subscribe((changedValues) => {
|
||
|
this.addressFormGroup.setErrors({ Invalid: true });
|
||
3 years ago
|
});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
onAddressTypeChange(event: any) {
|
||
|
if (event.value === 'external') {
|
||
|
this.addressFormGroup.controls.address.setValidators([Validators.required]);
|
||
|
this.addressFormGroup.controls.address.markAsTouched();
|
||
|
this.addressFormGroup.controls.address.enable();
|
||
|
} else {
|
||
|
this.addressFormGroup.controls.address.setValidators(null);
|
||
|
this.addressFormGroup.controls.address.markAsPristine();
|
||
|
this.addressFormGroup.controls.address.disable();
|
||
|
this.addressFormGroup.controls.address.setValue('');
|
||
|
}
|
||
3 years ago
|
this.addressFormGroup.setErrors({ Invalid: true });
|
||
3 years ago
|
}
|
||
|
|
||
3 years ago
|
onSwap(): boolean | void {
|
||
2 years ago
|
if (!this.inputFormGroup.controls.amount.value || (this.serviceInfo.limits?.minimal && this.inputFormGroup.controls.amount.value < +this.serviceInfo.limits.minimal) || (this.serviceInfo.limits?.maximal && this.inputFormGroup.controls.amount.value > +this.serviceInfo.limits.maximal) ||
|
||
3 years ago
|
(this.direction === SwapTypeEnum.SWAP_OUT && this.addressFormGroup.controls.addressType.value === 'external' &&
|
||
|
(!this.addressFormGroup.controls.address.value || this.addressFormGroup.controls.address.value.trim() === ''))) {
|
||
|
return true;
|
||
|
}
|
||
3 years ago
|
this.flgEditable = false;
|
||
2 years ago
|
this.stepper.selected?.stepControl.setErrors(null);
|
||
3 years ago
|
this.stepper.next();
|
||
|
if (this.direction === SwapTypeEnum.SWAP_IN) {
|
||
3 years ago
|
this.boltzService.swapIn(this.inputFormGroup.controls.amount.value).pipe(takeUntil(this.unSubs[3])).
|
||
|
subscribe({
|
||
|
next: (swapStatus: CreateSwapResponse) => {
|
||
|
this.swapStatus = swapStatus;
|
||
|
this.boltzService.listSwaps();
|
||
|
this.flgEditable = true;
|
||
|
},
|
||
|
error: (err) => {
|
||
|
this.swapStatus = { error: err };
|
||
|
this.flgEditable = true;
|
||
|
this.logger.error(err);
|
||
|
}
|
||
|
});
|
||
3 years ago
|
} else {
|
||
3 years ago
|
const destAddress = this.addressFormGroup.controls.addressType.value === 'external' ? this.addressFormGroup.controls.address.value : '';
|
||
|
this.boltzService.swapOut(this.inputFormGroup.controls.amount.value, destAddress).pipe(takeUntil(this.unSubs[4])).
|
||
|
subscribe({
|
||
|
next: (swapStatus: CreateReverseSwapResponse) => {
|
||
|
this.swapStatus = swapStatus;
|
||
|
this.boltzService.listSwaps();
|
||
|
this.flgEditable = true;
|
||
|
},
|
||
|
error: (err) => {
|
||
|
this.swapStatus = { error: err };
|
||
|
this.flgEditable = true;
|
||
|
this.logger.error(err);
|
||
|
}
|
||
|
});
|
||
3 years ago
|
}
|
||
|
}
|
||
|
|
||
|
stepSelectionChanged(event: any) {
|
||
|
switch (event.selectedIndex) {
|
||
|
case 0:
|
||
|
this.inputFormLabel = 'Amount to ' + this.swapDirectionCaption;
|
||
|
this.addressFormLabel = 'Withdrawal Address';
|
||
|
break;
|
||
3 years ago
|
|
||
3 years ago
|
case 1:
|
||
|
if (this.inputFormGroup.controls.amount.value) {
|
||
|
if (this.direction === SwapTypeEnum.SWAP_IN) {
|
||
|
this.inputFormLabel = this.swapDirectionCaption + ' Amount: ' + (this.decimalPipe.transform(this.inputFormGroup.controls.amount.value ? this.inputFormGroup.controls.amount.value : 0)) + ' Sats';
|
||
|
} else {
|
||
|
this.inputFormLabel = this.swapDirectionCaption + ' Amount: ' + (this.decimalPipe.transform(this.inputFormGroup.controls.amount.value ? this.inputFormGroup.controls.amount.value : 0)) + ' Sats';
|
||
|
}
|
||
|
} else {
|
||
|
this.inputFormLabel = 'Amount to ' + this.swapDirectionCaption;
|
||
|
}
|
||
|
this.addressFormLabel = 'Withdrawal Address';
|
||
|
break;
|
||
|
|
||
|
default:
|
||
|
this.inputFormLabel = 'Amount to ' + this.swapDirectionCaption;
|
||
3 years ago
|
this.addressFormLabel = 'Withdrawal Address';
|
||
3 years ago
|
break;
|
||
|
}
|
||
3 years ago
|
if (event.selectedIndex < event.previouslySelectedIndex) {
|
||
|
event.selectedStep.stepControl.setErrors({ Invalid: true });
|
||
|
}
|
||
3 years ago
|
}
|
||
|
|
||
|
onClose() {
|
||
|
this.dialogRef.close(true);
|
||
|
}
|
||
|
|
||
|
showInfo() {
|
||
|
this.flgShowInfo = true;
|
||
|
}
|
||
|
|
||
|
onReadMore() {
|
||
|
if (this.direction === SwapTypeEnum.SWAP_IN) {
|
||
|
window.open('https://docs.boltz.exchange/en/latest/lifecycle/#normal-submarine-swaps', '_blank');
|
||
|
} else {
|
||
|
window.open('https://docs.boltz.exchange/en/latest/lifecycle/#reverse-submarine-swaps', '_blank');
|
||
|
}
|
||
|
this.onClose();
|
||
|
}
|
||
|
|
||
|
onStepChanged(index: number) {
|
||
|
this.animationDirection = index < this.stepNumber ? 'backward' : 'forward';
|
||
|
this.stepNumber = index;
|
||
|
}
|
||
|
|
||
|
onRestart() {
|
||
|
this.stepper.reset();
|
||
|
this.flgEditable = true;
|
||
2 years ago
|
this.inputFormGroup.reset({ amount: this.serviceInfo.limits?.minimal });
|
||
3 years ago
|
this.statusFormGroup.reset();
|
||
3 years ago
|
this.addressFormGroup.reset({ addressType: 'local', address: '' });
|
||
3 years ago
|
this.addressFormGroup.controls.address.disable();
|
||
|
}
|
||
|
|
||
|
ngOnDestroy() {
|
||
3 years ago
|
this.unSubs.forEach((completeSub) => {
|
||
2 years ago
|
completeSub.next(<any>null);
|
||
3 years ago
|
completeSub.complete();
|
||
|
});
|
||
|
}
|
||
|
|
||
|
}
|