mirrors/Ride-The-Lightning-RTL
1
0
Fork 0
mirror of https://github.com/Ride-The-Lightning/RTL.git synced 2024-11-19 01:40:29 +01:00
Code Issues Projects Releases Wiki Activity

Fixed peerswap tables navigation

Browse Source
This commit is contained in:
ShahanaFarooqui 2023-09-13 21:34:12 -07:00
parent d13345087b
commit 9643f1dd3e
7 changed files with 59 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@ -13,6 +13,6 @@
<style>html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:95%}@media only screen and (max-width: 56.25em){html{font-size:90%}}@media only screen and (max-width: 37.5em){html{font-size:80%}}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}</style><link rel="stylesheet" href="styles.40cd0dae59c4a141.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.40cd0dae59c4a141.css"></noscript></head>
<body>
<rtl-app></rtl-app>
<script src="runtime.352caac4c76bf219.js" type="module"></script><script src="polyfills.aa01d8f6b94657cb.js" type="module"></script><script src="main.e477eb261763e96d.js" type="module"></script>
<script src="runtime.352caac4c76bf219.js" type="module"></script><script src="polyfills.aa01d8f6b94657cb.js" type="module"></script><script src="main.3a29ecd8c4bdc1ec.js" type="module"></script>
</body></html>

1
frontend/main.3a29ecd8c4bdc1ec.js Normal file
View File

File diff suppressed because one or more lines are too long

1
frontend/main.e477eb261763e96d.js
View File

File diff suppressed because one or more lines are too long

2
src/app/cln/store/cln.reducers.ts
View File

@ -229,7 +229,7 @@ export const CLNReducer = createReducer(initCLNState,
const swapCanceledArr: Swap[] = [];
for (let i = (payload.length - 1); i >= 0; i--) {
payload[i].alias = state.peers?.find((peer) => peer.id === payload[i].peer_node_id)?.alias || payload[i].peer_node_id;
if (payload[i].state === 'State_SwapCanceled') {
if (payload[i].state === 'State_SwapCanceled' || payload[i].hasOwnProperty('cancel_message')) {
swapCanceledArr.push(payload[i]);
} else {
if (payload[i].type === PeerswapTypes.SWAP_OUT) {

29
src/app/shared/components/ln-services/peerswap/peerswap.component.html
View File

@ -5,13 +5,32 @@
<div fxLayout="column" class="padding-gap-x">
<mat-card>
<mat-card-content fxLayout="column">
<nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [routerLink]="['../', link.link]" [active]="activeTab.link === link.link" (click)="activeTab = link">{{link.name}}</div>
</nav>
<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
<mat-tab>
<ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{links[0].num_records}}">Peers</span>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{links[1].num_records}}">Swap Out</span>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{links[2].num_records}}">Swap In</span>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span matBadgeOverlap="false" class="tab-badge" matBadge="{{links[3].num_records}}">Swap Canceled</span>
</ng-template>
</mat-tab>
</mat-tab-group>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper mb-2">
<mat-tab-nav-panel #tabPanel>
<rtl-peerswap-peers *ngIf="activeTab === this.links[0]"></rtl-peerswap-peers>
<rtl-peerswap-swaps-list *ngIf="activeTab !== this.links[0]"></rtl-peerswap-swaps-list>
<rtl-peerswap-peers *ngIf="activeLink === 0"></rtl-peerswap-peers>
<rtl-peerswap-swaps-list *ngIf="activeLink !== 0"></rtl-peerswap-swaps-list>
</mat-tab-nav-panel>
</div>
</mat-card-content>

48
src/app/shared/components/ln-services/peerswap/peerswap.component.ts
View File

@ -4,12 +4,14 @@ import { Store } from '@ngrx/store';
import { Subject } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators';
import { faHandshake } from '@fortawesome/free-solid-svg-icons';
import { RTLState } from 'src/app/store/rtl.state';
import { PeerswapPolicy } from 'src/app/shared/models/peerswapModels';
import { LoggerService } from '../../../../shared/services/logger.service';
import { PeerswapPolicy, Swap, SwapPeerChannelsFlattened } from 'src/app/shared/models/peerswapModels';
import { ApiCallStatusPayload } from 'src/app/shared/models/apiCallsPayload';
import { psPolicy } from 'src/app/cln/store/cln.selector';
import { psPolicy, swapPeers, swaps } from 'src/app/cln/store/cln.selector';
import { APICallStatusEnum } from 'src/app/shared/services/consts-enums-functions';
import { fetchPSPolicy } from 'src/app/cln/store/cln.actions';
import { fetchPSPolicy, fetchSwaps } from 'src/app/cln/store/cln.actions';
@Component({
selector: 'rtl-peerswap',
@ -19,27 +21,41 @@ import { fetchPSPolicy } from 'src/app/cln/store/cln.actions';
export class PeerswapComponent implements OnInit, OnDestroy {
public faHandshake = faHandshake;
public links = [{ link: 'pspeers', name: 'Peers' }, { link: 'psout', name: 'Swap Out' }, { link: 'psin', name: 'Swap In' }, { link: 'pscanceled', name: 'Swap Canceled' }];
public activeTab = this.links[0];
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
public links = [{ link: 'pspeers', name: 'Peers', num_records: 0 }, { link: 'psout', name: 'Swap Out', num_records: 0 }, { link: 'psin', name: 'Swap In', num_records: 0 }, { link: 'pscanceled', name: 'Swap Canceled', num_records: 0 }];
public activeLink = 0;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private router: Router, private store: Store<RTLState>) { }
constructor(private logger: LoggerService, private router: Router, private store: Store<RTLState>) { }
ngOnInit() {
const linkFound = this.links.find((link) => this.router.url.includes(link.link));
this.activeTab = linkFound ? linkFound : this.links[0];
this.activeLink = this.links.findIndex((link) => link.link === this.router.url.substring(this.router.url.lastIndexOf('/') + 1));
this.router.events.pipe(takeUntil(this.unSubs[0]), filter((e) => e instanceof ResolveEnd)).
subscribe({
next: (value: ResolveEnd | Event) => {
const linkFound = this.links.find((link) => (<ResolveEnd>value).urlAfterRedirects.includes(link.link));
this.activeTab = linkFound ? linkFound : this.links[0];
this.activeLink = this.links.findIndex((link) => link.link === (<ResolveEnd>value).urlAfterRedirects.substring((<ResolveEnd>value).urlAfterRedirects.lastIndexOf('/') + 1));
}
});
this.store.select(psPolicy).pipe(takeUntil(this.unSubs[1])).subscribe((policySeletor: { policy: PeerswapPolicy, apiCallStatus: ApiCallStatusPayload }) => {
if (policySeletor.apiCallStatus.status === APICallStatusEnum.UN_INITIATED) {
this.store.dispatch(fetchPSPolicy());
}
});
this.store.select(swaps).pipe(takeUntil(this.unSubs[2])).
subscribe((swapsSeletor: { swapOuts: Swap[], swapIns: Swap[], swapsCanceled: Swap[], apiCallStatus: ApiCallStatusPayload }) => {
if (swapsSeletor.apiCallStatus?.status === APICallStatusEnum.UN_INITIATED) {
this.store.dispatch(fetchSwaps());
}
if (swapsSeletor.apiCallStatus?.status === APICallStatusEnum.COMPLETED) {
this.links[1].num_records = swapsSeletor.swapOuts.length || 0;
this.links[2].num_records = swapsSeletor.swapIns.length || 0;
this.links[3].num_records = swapsSeletor.swapsCanceled.length || 0;
}
this.logger.info(swapsSeletor);
});
this.store.select(swapPeers).pipe(takeUntil(this.unSubs[3])).
subscribe((spSeletor: { totalSwapPeers: number, swapPeers: SwapPeerChannelsFlattened[], apiCallStatus: ApiCallStatusPayload }) => {
this.links[0].num_records = spSeletor.totalSwapPeers;
this.logger.info(spSeletor);
});
}
onSelectedTabChange(event) {
this.router.navigateByUrl('/services/peerswap/' + this.links[event.index].link);
}
ngOnDestroy() {

3
src/app/shared/components/ln-services/peerswap/swaps-list/swaps-list.component.ts
View File

@ -95,9 +95,6 @@ export class PSSwapsListComponent implements OnInit, AfterViewInit, OnDestroy {
subscribe((swapsSeletor: { swapOuts: Swap[], swapIns: Swap[], swapsCanceled: Swap[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = swapsSeletor.apiCallStatus;
if (this.apiCallStatus?.status === APICallStatusEnum.UN_INITIATED) {
this.store.dispatch(fetchSwaps());
}
if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
this.errorMessage = !this.apiCallStatus.message ? '' : (typeof (this.apiCallStatus.message) === 'object') ? JSON.stringify(this.apiCallStatus.message) : this.apiCallStatus.message;
}