From c930b8e121a2cd4a96b0bf41cb15bfde6abaa552 Mon Sep 17 00:00:00 2001 From: ShahanaFarooqui Date: Thu, 20 Oct 2022 09:53:18 -0700 Subject: [PATCH] Boltz Page Layout --- .../boltz/swaps/swaps.component.html | 104 +++++++++++++----- .../boltz/swaps/swaps.component.scss | 8 ++ .../boltz/swaps/swaps.component.ts | 65 +++++++---- .../page-settings.component.html | 2 +- .../page-settings/page-settings.component.ts | 20 +++- src/app/shared/models/boltzModels.ts | 2 + .../shared/services/consts-enums-functions.ts | 16 +-- 7 files changed, 159 insertions(+), 58 deletions(-) diff --git a/src/app/shared/components/ln-services/boltz/swaps/swaps.component.html b/src/app/shared/components/ln-services/boltz/swaps/swaps.component.html index 5d5c24f1..caa42654 100755 --- a/src/app/shared/components/ln-services/boltz/swaps/swaps.component.html +++ b/src/app/shared/components/ln-services/boltz/swaps/swaps.component.html @@ -14,46 +14,100 @@ - + - - + + - - - - - - + - - + + + + + + - - + - - - + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - diff --git a/src/app/shared/components/ln-services/boltz/swaps/swaps.component.scss b/src/app/shared/components/ln-services/boltz/swaps/swaps.component.scss index 4ad066b1..23ff3c79 100755 --- a/src/app/shared/components/ln-services/boltz/swaps/swaps.component.scss +++ b/src/app/shared/components/ln-services/boltz/swaps/swaps.component.scss @@ -1,3 +1,11 @@ +.mat-column-claimAddress, .mat-column-lockupAddress, .mat-column-error, .mat-column-privateKey, .mat-column-preimage, .mat-column-redeemScript, .mat-column-invoice { + flex: 0 0 10%; + width: 10%; + & .ellipsis-parent { + display: flex; + } +} + .mat-column-actions { min-height: 4.8rem; } diff --git a/src/app/shared/components/ln-services/boltz/swaps/swaps.component.ts b/src/app/shared/components/ln-services/boltz/swaps/swaps.component.ts index e6779812..d6303c7c 100755 --- a/src/app/shared/components/ln-services/boltz/swaps/swaps.component.ts +++ b/src/app/shared/components/ln-services/boltz/swaps/swaps.component.ts @@ -1,4 +1,4 @@ -import { Component, OnChanges, OnDestroy, ViewChild, Input, AfterViewInit, SimpleChanges } from '@angular/core'; +import { Component, OnChanges, OnDestroy, ViewChild, Input, AfterViewInit, SimpleChanges, OnInit } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { Store } from '@ngrx/store'; @@ -8,13 +8,16 @@ import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { MatTableDataSource } from '@angular/material/table'; import { Swap, ReverseSwap } from '../../../../models/boltzModels'; -import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, SwapTypeEnum, SwapStateEnum } from '../../../../services/consts-enums-functions'; +import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, SwapTypeEnum, SwapStateEnum, SortOrderEnum, LND_DEFAULT_PAGE_SETTINGS } from '../../../../services/consts-enums-functions'; import { LoggerService } from '../../../../services/logger.service'; import { CommonService } from '../../../../services/common.service'; import { BoltzService } from '../../../../services/boltz.service'; import { openAlert } from '../../../../../store/rtl.actions'; import { RTLState } from '../../../../../store/rtl.state'; +import { PageSettings, TableSetting } from '../../../../models/pageSettings'; +import { lndPageSettings } from '../../../../../lnd/store/lnd.selector'; +import { ApiCallStatusPayload } from '../../../../models/apiCallsPayload'; @Component({ selector: 'rtl-boltz-swaps', @@ -24,7 +27,7 @@ import { RTLState } from '../../../../../store/rtl.state'; { provide: MatPaginatorIntl, useValue: getPaginatorLabel('Swaps') } ] }) -export class BoltzSwapsComponent implements AfterViewInit, OnChanges, OnDestroy { +export class BoltzSwapsComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy { @Input() selectedSwapType: SwapTypeEnum = SwapTypeEnum.SWAP_OUT; @Input() swapsData: Swap[] | ReverseSwap[] = []; @@ -32,6 +35,9 @@ export class BoltzSwapsComponent implements AfterViewInit, OnChanges, OnDestroy @Input() emptyTableMessage = 'No swaps available.'; @ViewChild(MatSort, { static: false }) sort: MatSort | undefined; @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined; + public PAGE_ID = 'boltz'; + public tableSettingSwapOut: TableSetting = { tableId: 'swap_out', recordsPerPage: PAGE_SIZE, sortBy: 'status', sortOrder: SortOrderEnum.DESCENDING }; + public tableSettingSwapIn: TableSetting = { tableId: 'swap_in', recordsPerPage: PAGE_SIZE, sortBy: 'status', sortOrder: SortOrderEnum.DESCENDING }; public swapStateEnum = SwapStateEnum; public faHistory = faHistory; public swapCaption = 'Swap Out'; @@ -46,7 +52,19 @@ export class BoltzSwapsComponent implements AfterViewInit, OnChanges, OnDestroy constructor(private logger: LoggerService, private commonService: CommonService, private store: Store, private boltzService: BoltzService) { this.screenSize = this.commonService.getScreenSize(); - this.setTableColumns(); + } + + ngOnInit() { + this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[0])). + subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => { + this.tableSettingSwapOut = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSettingSwapOut.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSettingSwapOut.tableId)!; + this.tableSettingSwapIn = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSettingSwapIn.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSettingSwapIn.tableId)!; + this.setTableColumns(); + if (this.swapsData && this.swapsData.length > 0 && this.sort && this.paginator) { + this.loadSwapsTable(this.swapsData); + } + this.logger.info(this.displayedColumns); + }); } ngAfterViewInit() { @@ -64,20 +82,22 @@ export class BoltzSwapsComponent implements AfterViewInit, OnChanges, OnDestroy } setTableColumns() { - if (this.screenSize === ScreenSizeEnum.XS) { - this.displayedColumns = (this.selectedSwapType === SwapTypeEnum.SWAP_IN) ? - ['status', 'id', 'expectedAmount', 'actions'] : ['status', 'id', 'onchainAmount', 'actions']; - } else if (this.screenSize === ScreenSizeEnum.SM) { - this.displayedColumns = (this.selectedSwapType === SwapTypeEnum.SWAP_IN) ? - ['status', 'id', 'expectedAmount', 'actions'] : ['status', 'id', 'onchainAmount', 'actions']; - } else if (this.screenSize === ScreenSizeEnum.MD) { - this.displayedColumns = (this.selectedSwapType === SwapTypeEnum.SWAP_IN) ? - ['status', 'id', 'expectedAmount', 'timeoutBlockHeight', 'actions'] : - ['status', 'id', 'onchainAmount', 'timeoutBlockHeight', 'actions']; + if (this.selectedSwapType === SwapTypeEnum.SWAP_IN) { + if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) { + this.displayedColumns = JSON.parse(JSON.stringify(this.tableSettingSwapIn.columnSelectionSM)); + } else { + this.displayedColumns = JSON.parse(JSON.stringify(this.tableSettingSwapIn.columnSelection)); + } + this.displayedColumns.push('actions'); + this.pageSize = this.tableSettingSwapIn.recordsPerPage ? +this.tableSettingSwapIn.recordsPerPage : PAGE_SIZE; } else { - this.displayedColumns = (this.selectedSwapType === SwapTypeEnum.SWAP_IN) ? - ['status', 'id', 'lockupAddress', 'expectedAmount', 'timeoutBlockHeight', 'actions'] : - ['status', 'id', 'claimAddress', 'onchainAmount', 'timeoutBlockHeight', 'actions']; + if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) { + this.displayedColumns = JSON.parse(JSON.stringify(this.tableSettingSwapOut.columnSelectionSM)); + } else { + this.displayedColumns = JSON.parse(JSON.stringify(this.tableSettingSwapOut.columnSelection)); + } + this.displayedColumns.push('actions'); + this.pageSize = this.tableSettingSwapOut.recordsPerPage ? +this.tableSettingSwapOut.recordsPerPage : PAGE_SIZE; } } @@ -93,16 +113,16 @@ export class BoltzSwapsComponent implements AfterViewInit, OnChanges, OnDestroy fetchedSwap = (this.selectedSwapType === SwapTypeEnum.SWAP_IN) ? fetchedSwap.swap : fetchedSwap.reverseSwap; const reorderedSwap = [ [{ key: 'status', value: SwapStateEnum[fetchedSwap.status], title: 'Status', width: 50, type: DataTypeEnum.STRING }, - { key: 'id', value: fetchedSwap.id, title: 'ID', width: 50, type: DataTypeEnum.STRING }], + { key: 'id', value: fetchedSwap.id, title: 'ID', width: 50, type: DataTypeEnum.STRING }], [{ key: 'amount', value: fetchedSwap.onchainAmount ? fetchedSwap.onchainAmount : fetchedSwap.expectedAmount ? fetchedSwap.expectedAmount : 0, title: fetchedSwap.onchainAmount ? 'Onchain Amount (Sats)' : fetchedSwap.expectedAmount ? 'Expected Amount (Sats)' : 'Amount (Sats)', width: 50, type: DataTypeEnum.NUMBER }, - { key: 'timeoutBlockHeight', value: fetchedSwap.timeoutBlockHeight, title: 'Timeout Block Height', width: 50, type: DataTypeEnum.NUMBER }], + { key: 'timeoutBlockHeight', value: fetchedSwap.timeoutBlockHeight, title: 'Timeout Block Height', width: 50, type: DataTypeEnum.NUMBER }], [{ key: 'address', value: fetchedSwap.claimAddress ? fetchedSwap.claimAddress : fetchedSwap.lockupAddress ? fetchedSwap.lockupAddress : '', title: fetchedSwap.claimAddress ? 'Claim Address' : fetchedSwap.lockupAddress ? 'Lockup Address' : 'Address', width: 100, type: DataTypeEnum.STRING }], [{ key: 'invoice', value: fetchedSwap.invoice, title: 'Invoice', width: 100, type: DataTypeEnum.STRING }], [{ key: 'privateKey', value: fetchedSwap.privateKey, title: 'Private Key', width: 100, type: DataTypeEnum.STRING }], [{ key: 'preimage', value: fetchedSwap.preimage, title: 'Preimage', width: 100, type: DataTypeEnum.STRING }], [{ key: 'redeemScript', value: fetchedSwap.redeemScript, title: 'Redeem Script', width: 100, type: DataTypeEnum.STRING }], [{ key: 'lockupTransactionId', value: fetchedSwap.lockupTransactionId, title: 'Lockup Transaction ID', width: 50, type: DataTypeEnum.STRING }, - { key: 'transactionId', value: fetchedSwap.claimTransactionId ? fetchedSwap.claimTransactionId : fetchedSwap.refundTransactionId ? fetchedSwap.refundTransactionId : '', title: fetchedSwap.claimTransactionId ? 'Claim Transaction ID' : fetchedSwap.refundTransactionId ? 'Refund Transaction ID' : 'Transaction ID', width: 50, type: DataTypeEnum.STRING }] + { key: 'transactionId', value: fetchedSwap.claimTransactionId ? fetchedSwap.claimTransactionId : fetchedSwap.refundTransactionId ? fetchedSwap.refundTransactionId : '', title: fetchedSwap.claimTransactionId ? 'Claim Transaction ID' : fetchedSwap.refundTransactionId ? 'Refund Transaction ID' : 'Transaction ID', width: 50, type: DataTypeEnum.STRING }] ]; this.store.dispatch(openAlert({ payload: { @@ -121,6 +141,11 @@ export class BoltzSwapsComponent implements AfterViewInit, OnChanges, OnDestroy this.listSwaps = swaps ? new MatTableDataSource([...swaps]) : new MatTableDataSource([]); this.listSwaps.sort = this.sort; this.listSwaps.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null); + if (this.selectedSwapType === SwapTypeEnum.SWAP_IN) { + this.listSwaps.sort?.sort({ id: this.tableSettingSwapIn.sortBy, start: this.tableSettingSwapIn.sortOrder, disableClear: true }); + } else { + this.listSwaps.sort?.sort({ id: this.tableSettingSwapOut.sortBy, start: this.tableSettingSwapOut.sortOrder, disableClear: true }); + } this.listSwaps.filterPredicate = (swap: Swap, fltr: string) => JSON.stringify(swap).toLowerCase().includes(fltr); if (this.paginator) { this.paginator.firstPage(); diff --git a/src/app/shared/components/node-config/page-settings/page-settings.component.html b/src/app/shared/components/node-config/page-settings/page-settings.component.html index fbe4fd1a..b9544430 100644 --- a/src/app/shared/components/node-config/page-settings/page-settings.component.html +++ b/src/app/shared/components/node-config/page-settings/page-settings.component.html @@ -39,7 +39,7 @@ {{field | camelcaseWithReplace:'_'}} - Columns (mobile) should be between 1 and 2 + Columns (mobile) should be between 1 and 3 diff --git a/src/app/shared/components/node-config/page-settings/page-settings.component.ts b/src/app/shared/components/node-config/page-settings/page-settings.component.ts index 68547f74..1feef2e8 100644 --- a/src/app/shared/components/node-config/page-settings/page-settings.component.ts +++ b/src/app/shared/components/node-config/page-settings/page-settings.component.ts @@ -11,11 +11,12 @@ import { CommonService } from '../../../services/common.service'; import { RTLState } from '../../../../store/rtl.state'; import { TableSetting, PageSettings } from '../../../models/pageSettings'; import { clnNodeSettings, clnPageSettings } from '../../../../cln/store/cln.selector'; -import { savePageSettings } from '../../../../cln/store/cln.actions'; +import { savePageSettings as savePageSettingsCLN } from '../../../../cln/store/cln.actions'; import { ApiCallStatusPayload } from '../../../models/apiCallsPayload'; import { rootSelectedNode } from '../../../../store/rtl.selector'; import { SelNodeChild, ConfigSettingsNode } from '../../../models/RTLconfig'; import { lndNodeSettings, lndPageSettings } from '../../../../lnd/store/lnd.selector'; +import { savePageSettings as savePageSettingsLND } from '../../../../lnd/store/lnd.actions'; @Component({ selector: 'rtl-page-settings', @@ -32,6 +33,7 @@ export class PageSettingsComponent implements OnInit, OnDestroy { public pageSizeOptions = PAGE_SIZE_OPTIONS; public pageSettings: PageSettings[] = []; public initialPageSettings: PageSettings[] = []; + public defaultSettings: PageSettings[] = []; public tableFieldsDef = {}; public sortOrders = SORT_ORDERS; public apiCallStatus: ApiCallStatusPayload | null = null; @@ -50,6 +52,7 @@ export class PageSettingsComponent implements OnInit, OnDestroy { switch (this.selNode.lnImplementation) { case 'CLN': this.initialPageSettings = Object.assign([], CLN_DEFAULT_PAGE_SETTINGS); + this.defaultSettings = Object.assign([], CLN_DEFAULT_PAGE_SETTINGS); this.tableFieldsDef = CLN_TABLES_DEF; this.store.select(clnPageSettings).pipe(takeUntil(this.unSubs[1]), withLatestFrom(this.store.select(clnNodeSettings))). @@ -85,6 +88,7 @@ export class PageSettingsComponent implements OnInit, OnDestroy { default: this.initialPageSettings = Object.assign([], LND_DEFAULT_PAGE_SETTINGS); + this.defaultSettings = Object.assign([], LND_DEFAULT_PAGE_SETTINGS); this.tableFieldsDef = LND_TABLES_DEF; this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[1]), withLatestFrom(this.store.select(lndNodeSettings))). @@ -130,13 +134,21 @@ export class PageSettingsComponent implements OnInit, OnDestroy { return true; } this.errorMessage = ''; - this.store.dispatch(savePageSettings({ payload: this.pageSettings })); + switch (this.selNode.lnImplementation) { + case 'CLN': + this.store.dispatch(savePageSettingsCLN({ payload: this.pageSettings })); + break; + + default: + this.store.dispatch(savePageSettingsLND({ payload: this.pageSettings })); + break; + } } onTableReset(currPageId: string, currTable: TableSetting) { const pageIdx = this.pageSettings.findIndex((page) => page.pageId === currPageId); const tableIdx = this.pageSettings[pageIdx].tables.findIndex((table) => table.tableId === currTable.tableId); - const tableToReplace = CLN_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === currPageId)?.tables.find((table) => table.tableId === currTable.tableId) || this.pageSettings.find((page) => page.pageId === currPageId)?.tables.find((table) => table.tableId === currTable.tableId); + const tableToReplace = this.defaultSettings.find((page) => page.pageId === currPageId)?.tables.find((table) => table.tableId === currTable.tableId) || this.pageSettings.find((page) => page.pageId === currPageId)?.tables.find((table) => table.tableId === currTable.tableId); this.pageSettings[pageIdx].tables.splice(tableIdx, 1, tableToReplace!); } @@ -146,7 +158,7 @@ export class PageSettingsComponent implements OnInit, OnDestroy { this.pageSettings = JSON.parse(JSON.stringify(this.initialPageSettings)); } else { this.errorMessage = null; - this.pageSettings = JSON.parse(JSON.stringify(CLN_DEFAULT_PAGE_SETTINGS)); + this.pageSettings = JSON.parse(JSON.stringify(this.defaultSettings)); } } diff --git a/src/app/shared/models/boltzModels.ts b/src/app/shared/models/boltzModels.ts index 1c40d739..0246ebb9 100644 --- a/src/app/shared/models/boltzModels.ts +++ b/src/app/shared/models/boltzModels.ts @@ -20,6 +20,7 @@ export interface Swap { export interface ChannelCreationInfo { swapId?: string; status?: string; + error?: string; inboundLiquidity?: number; private?: boolean; fundingTransactionId?: string; @@ -34,6 +35,7 @@ export interface ChannelCreation { export interface ReverseSwap { id?: string; status?: string; + error?: string; privateKey?: string; preimage?: string; redeemScript?: string; diff --git a/src/app/shared/services/consts-enums-functions.ts b/src/app/shared/services/consts-enums-functions.ts index 25559ec9..b095949b 100644 --- a/src/app/shared/services/consts-enums-functions.ts +++ b/src/app/shared/services/consts-enums-functions.ts @@ -826,12 +826,12 @@ export const LND_DEFAULT_PAGE_SETTINGS: PageSettings[] = [ columnSelection: ['state', 'initiation_time', 'amt', 'cost_server', 'cost_offchain', 'cost_onchain'] } ] }, { pageId: 'boltz', tables: [ - { tableId: 'swap_in', recordsPerPage: PAGE_SIZE, sortBy: 'status', sortOrder: SortOrderEnum.DESCENDING, - columnSelectionSM: ['status', 'id', 'expectedAmount'], - columnSelection: ['status', 'id', 'lockupAddress', 'expectedAmount', 'timeoutBlockHeight'] }, { tableId: 'swap_out', recordsPerPage: PAGE_SIZE, sortBy: 'status', sortOrder: SortOrderEnum.DESCENDING, columnSelectionSM: ['status', 'id', 'onchainAmount'], - columnSelection: ['status', 'id', 'claimAddress', 'onchainAmount', 'timeoutBlockHeight'] } + columnSelection: ['status', 'id', 'claimAddress', 'onchainAmount', 'timeoutBlockHeight'] }, + { tableId: 'swap_in', recordsPerPage: PAGE_SIZE, sortBy: 'status', sortOrder: SortOrderEnum.DESCENDING, + columnSelectionSM: ['status', 'id', 'expectedAmount'], + columnSelection: ['status', 'id', 'lockupAddress', 'expectedAmount', 'timeoutBlockHeight'] } ] } ]; @@ -843,13 +843,13 @@ export const LND_TABLES_DEF = { } }, boltz: { - swap_in: { + swap_out: { maxColumns: 7, - allowedColumns: ['status', 'id', 'lockupAddress', 'expectedAmount', 'privateKey', 'preimage', 'redeemScript', 'invoice', 'timeoutBlockHeight', 'lockupTransactionId', 'refundTransactionId'] + allowedColumns: ['status', 'id', 'claimAddress', 'onchainAmount', 'error', 'privateKey', 'preimage', 'redeemScript', 'invoice', 'timeoutBlockHeight', 'lockupTransactionId', 'claimTransactionId'] }, - swap_out: { + swap_in: { maxColumns: 7, - allowedColumns: ['status', 'id', 'claimAddress', 'onchainAmount', 'privateKey', 'preimage', 'redeemScript', 'invoice', 'timeoutBlockHeight', 'lockupTransactionId', 'claimTransactionId'] + allowedColumns: ['status', 'id', 'lockupAddress', 'expectedAmount', 'error', 'privateKey', 'preimage', 'redeemScript', 'invoice', 'timeoutBlockHeight', 'lockupTransactionId', 'refundTransactionId'] } } };
Status {{swapStateEnum[swap.status]}}{{swapStateEnum[swap?.status]}} Swap ID {{swap.id}} Swap ID {{swap?.id}} Claim Address {{swap.claimAddress}} Onchain Amount (Sats) - {{swap.onchainAmount | number}} + Claim Address + + {{swap?.claimAddress}} + Lockup Address {{swap.lockupAddress}} Lockup Address + + {{swap?.lockupAddress}} + + Onchain Amount (Sats) + {{swap?.onchainAmount | number}} + Expected Amount (Sats) - {{swap.expectedAmount | number}} + Expected Amount (Sats) + {{swap?.expectedAmount | number}} Timeout Block Height - {{swap.timeoutBlockHeight | number}} + + Error + + {{swap?.error}} + Amount (Sats) - {{swap.amt | number}} + + Private Key + + {{swap?.privateKey}} + Preimage + + {{swap?.preimage}} + + Redeem Script + + {{swap?.redeemScript}} + + Invoice + + {{swap?.invoice}} + + Timeout Block Height + {{swap?.timeoutBlockHeight | number}} + Lockup Tx ID {{swap?.lockupTransactionId}} Claim Tx ID {{swap?.claimTransactionId}} Refund Tx ID {{swap?.refundTransactionId}} +
@@ -61,7 +115,7 @@
+