diff --git a/CHANGELOG.md b/CHANGELOG.md index 414b133a..4d33cae9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [[0.0.10](https://github.com/multiversx/mx-sdk-dapp-ui/pull/149)] - 2025-07-04 + +- [Fixed batch transactions order in toast.](https://github.com/multiversx/mx-sdk-dapp-ui/pull/148) +- [Renamed and exposed `ledger-addresses` into `address-table`](https://github.com/multiversx/mx-sdk-dapp-ui/pull/147) + ## [[0.0.9](https://github.com/multiversx/mx-sdk-dapp-ui/pull/145)] - 2025-07-03 - [Fixed icons max width / height in toasts.](https://github.com/multiversx/mx-sdk-dapp-ui/pull/143) diff --git a/package.json b/package.json index 582391c8..ca8d0397 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@multiversx/sdk-dapp-ui", - "version": "0.0.9", + "version": "0.0.10", "description": "A library to hold UI components for a dApp on the MultiversX blockchain", "author": "MultiversX", "license": "MIT", diff --git a/src/components.d.ts b/src/components.d.ts index d71dae81..45b3512d 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -5,9 +5,10 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; +import { IAddressTableData } from "./types/address-table.types"; import { IconDefinition } from "@fortawesome/free-solid-svg-icons"; import { CustomToastType, IComponentToast, ISimpleToast } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; -import { IAccountScreenData, IConfirmScreenData, IConnectScreenData, ILedgerConnectPanelData } from "./components/functional/ledger-connect/ledger-connect.types"; +import { IConfirmScreenData, IConnectScreenData, ILedgerConnectPanelData } from "./components/functional/ledger-connect/ledger-connect.types"; import { IEventBus } from "./utils/EventBus"; import { IProviderBase, ProviderTypeEnum } from "./types/provider.types"; import { DecodeMethodEnum } from "./components/functional/sign-transactions-panel/sign-transactions-panel.types"; @@ -19,9 +20,10 @@ import { LocalJSX as JSX } from "@stencil/core"; import { IToastDataState, ITransactionProgressState } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; import { TransactionValueType } from "./components/controlled/transactions-table/transactions-table.type"; import { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from "./components.d"; +export { IAddressTableData } from "./types/address-table.types"; export { IconDefinition } from "@fortawesome/free-solid-svg-icons"; export { CustomToastType, IComponentToast, ISimpleToast } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; -export { IAccountScreenData, IConfirmScreenData, IConnectScreenData, ILedgerConnectPanelData } from "./components/functional/ledger-connect/ledger-connect.types"; +export { IConfirmScreenData, IConnectScreenData, ILedgerConnectPanelData } from "./components/functional/ledger-connect/ledger-connect.types"; export { IEventBus } from "./utils/EventBus"; export { IProviderBase, ProviderTypeEnum } from "./types/provider.types"; export { DecodeMethodEnum } from "./components/functional/sign-transactions-panel/sign-transactions-panel.types"; @@ -34,6 +36,10 @@ export { IToastDataState, ITransactionProgressState } from "./components/functio export { TransactionValueType } from "./components/controlled/transactions-table/transactions-table.type"; export { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from "./components.d"; export namespace Components { + interface MvxAddressTable { + "accountScreenData": IAddressTableData; + "selectedIndex": number; + } interface MvxAnglesLeftIcon { } interface MvxAnglesRightIcon { @@ -58,14 +64,8 @@ export namespace Components { interface MvxCloseIcon { } interface MvxCopyButton { - /** - * @default 'copy-button' - */ "class"?: string; "copyIcon"?: IconDefinition | string; - /** - * @default 'copy-button-icon' - */ "iconClass"?: string; "successIcon"?: IconDefinition | string; "text": string; @@ -91,9 +91,6 @@ export namespace Components { "width"?: number; } interface MvxFaIcon { - /** - * @default 'fa-icon' - */ "class"?: string; "description"?: string; "icon": IconDefinition | string; @@ -105,9 +102,6 @@ export namespace Components { "isValid": boolean; "label"?: string; "labelClass"?: string; - /** - * @default true - */ "showLabel"?: boolean; "valueDecimal": string; "valueInteger": string; @@ -115,17 +109,10 @@ export namespace Components { interface MvxGenericToast { "toast": CustomToastType; } - interface MvxLedgerAddresses { - "accountScreenData": IAccountScreenData; - "selectedIndex": number; - } interface MvxLedgerConfirm { "confirmScreenData": IConfirmScreenData; } interface MvxLedgerConnect { - /** - * @default { accountScreenData: null, confirmScreenData: null, connectScreenData: {}, } - */ "data": ILedgerConnectPanelData; "getEventBus": () => Promise; } @@ -134,9 +121,6 @@ export namespace Components { } interface MvxLedgerIntro { "connectScreenData"?: IConnectScreenData; - /** - * @default false - */ "isAwaiting"?: boolean; } interface MvxLedgerProviderIcon { @@ -157,26 +141,14 @@ export namespace Components { } interface MvxPagination { "class"?: string; - /** - * @default 1 - */ "currentPage": number; - /** - * @default false - */ "isDisabled"?: boolean; "totalPages": number; } interface MvxPaginationEllipsis { - /** - * @default false - */ "isActive": boolean; } interface MvxPaginationEllipsisForm { - /** - * @default false - */ "isVisible": boolean; "maxPageToSearchFor": number; } @@ -194,44 +166,29 @@ export namespace Components { "class"?: string; } interface MvxProviderIdleScreen { - /** - * @default '' - */ "introText": string; - /** - * @default 'Requesting Connection' - */ "introTitle": string; - /** - * @default null - */ "provider": IProviderBase | null; } interface MvxSidePanel { "hasBackButton"?: boolean; - /** - * @default false - */ "isOpen": boolean; "panelClassName"?: string; "panelTitle": string; - /** - * @default true - */ "showHeader"?: boolean; } interface MvxSidePanelHeader { - /** - * @default true - */ "hasLeftButton"?: boolean; - /** - * @default true - */ "hasRightButton"?: boolean; "panelClassName"?: string; "panelTitle": string; } + interface MvxSidePanelSwiper { + "close": () => Promise; + "open": boolean; + "openToSnapPoint": (snapIndex?: number) => Promise; + "sidePanelIdentifier": string; + } interface MvxSignTransactionsAdvanced { "data": string; "highlight"?: string; @@ -241,13 +198,7 @@ export namespace Components { "highlight"?: string; } interface MvxSignTransactionsAdvancedDataDecode { - /** - * @default DecodeMethodEnum.decimal - */ "currentDecodeMethod": DecodeMethodEnum; - /** - * @default false - */ "isToggled": boolean; } interface MvxSignTransactionsFooter { @@ -260,13 +211,7 @@ export namespace Components { "identifier": string; "interactor": string; "interactorIconUrl": string; - /** - * @default false - */ "isApp": boolean; - /** - * @default '~$0.00078' - */ "networkFee": string; "tokenIconUrl": string; "usdValue": string; @@ -295,14 +240,8 @@ export namespace Components { } interface MvxTooltip { "class"?: string; - /** - * @default 'top' - */ "position": 'top' | 'bottom'; "trigger": HTMLElement; - /** - * @default false - */ "triggerOnClick"?: boolean; } interface MvxTransactionAccount { @@ -310,9 +249,6 @@ export namespace Components { "class"?: string; "dataTestId"?: string; "scope": 'receiver' | 'sender'; - /** - * @default false - */ "showLockedAccounts": boolean; } interface MvxTransactionAccountName { @@ -357,19 +293,10 @@ export namespace Components { } interface MvxTransactionToast { "fullWidth"?: boolean; - /** - * @default '' - */ "processedTransactionsStatus": string | JSX.Element; "toastDataState": IToastDataState; - /** - * @default '' - */ "toastId": string; "transactionProgressState"?: ITransactionProgressState; - /** - * @default [] - */ "transactions": ITransactionListItem[]; "wrapperClass": string; } @@ -380,9 +307,6 @@ export namespace Components { "transactions": ITransactionListItem[]; } interface MvxTransactionToastDetails { - /** - * @default 5 - */ "maxShownTransactions": number; "processedTransactionsStatus"?: string | JSX.Element; "transactionClass": string; @@ -393,9 +317,6 @@ export namespace Components { "index": string; "link": string; "status"?: string; - /** - * @default 'transaction-details-list-item' - */ "transactionClass"?: string; } interface MvxTransactionToastProgress { @@ -419,6 +340,7 @@ export namespace Components { } interface MvxUnlockButton { "class"?: string; + "dataTestId"?: string; "icon"?: HTMLElement; "iconUrl": string; "label": string; @@ -433,9 +355,6 @@ export namespace Components { } interface MvxUnlockPanelGroup { "class"?: string; - /** - * @default [] - */ "providers": IProviderBase[]; } interface MvxUnlockProviderButton { @@ -443,14 +362,8 @@ export namespace Components { "provider": IProviderBase; } interface MvxWalletConnect { - /** - * @default { wcURI: '' } - */ "data": IWalletConnectPanelData; "getEventBus": () => Promise; - /** - * @default '' - */ "qrCodeSvg": string; } interface MvxWalletConnectAppGalleryIcon { @@ -467,13 +380,7 @@ export namespace Components { } interface MvxWalletConnectScan { "class"?: string; - /** - * @default '' - */ "qrCodeSvg": string; - /** - * @default '' - */ "walletConnectDeepLink"?: string; } interface MvxWalletProviderIcon { @@ -482,15 +389,16 @@ export namespace Components { interface MvxXaliasProviderIcon { } interface MvxXportalDownloadQrIcon { - /** - * @default '' - */ "class"?: string; } interface MvxXportalQrCodePreloader { "class"?: string; } } +export interface MvxAddressTableCustomEvent extends CustomEvent { + detail: T; + target: HTMLMvxAddressTableElement; +} export interface MvxCustomToastCustomEvent extends CustomEvent { detail: T; target: HTMLMvxCustomToastElement; @@ -499,10 +407,6 @@ export interface MvxGenericToastCustomEvent extends CustomEvent { detail: T; target: HTMLMvxGenericToastElement; } -export interface MvxLedgerAddressesCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxLedgerAddressesElement; -} export interface MvxLedgerIntroCustomEvent extends CustomEvent { detail: T; target: HTMLMvxLedgerIntroElement; @@ -527,6 +431,10 @@ export interface MvxSidePanelHeaderCustomEvent extends CustomEvent { detail: T; target: HTMLMvxSidePanelHeaderElement; } +export interface MvxSidePanelSwiperCustomEvent extends CustomEvent { + detail: T; + target: HTMLMvxSidePanelSwiperElement; +} export interface MvxSimpleToastCustomEvent extends CustomEvent { detail: T; target: HTMLMvxSimpleToastElement; @@ -552,6 +460,25 @@ export interface MvxWalletConnectScanCustomEvent extends CustomEvent { target: HTMLMvxWalletConnectScanElement; } declare global { + interface HTMLMvxAddressTableElementEventMap { + "accessWallet": any; + "selectAccount": any; + "pageChange": number; + } + interface HTMLMvxAddressTableElement extends Components.MvxAddressTable, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLMvxAddressTableElement, ev: MvxAddressTableCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLMvxAddressTableElement, ev: MvxAddressTableCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLMvxAddressTableElement: { + prototype: HTMLMvxAddressTableElement; + new (): HTMLMvxAddressTableElement; + }; interface HTMLMvxAnglesLeftIconElement extends Components.MvxAnglesLeftIcon, HTMLStencilElement { } var HTMLMvxAnglesLeftIconElement: { @@ -682,25 +609,6 @@ declare global { prototype: HTMLMvxGenericToastElement; new (): HTMLMvxGenericToastElement; }; - interface HTMLMvxLedgerAddressesElementEventMap { - "accessWallet": any; - "selectAccount": any; - "pageChange": number; - } - interface HTMLMvxLedgerAddressesElement extends Components.MvxLedgerAddresses, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxLedgerAddressesElement, ev: MvxLedgerAddressesCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLMvxLedgerAddressesElement, ev: MvxLedgerAddressesCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; - } - var HTMLMvxLedgerAddressesElement: { - prototype: HTMLMvxLedgerAddressesElement; - new (): HTMLMvxLedgerAddressesElement; - }; interface HTMLMvxLedgerConfirmElement extends Components.MvxLedgerConfirm, HTMLStencilElement { } var HTMLMvxLedgerConfirmElement: { @@ -884,6 +792,24 @@ declare global { prototype: HTMLMvxSidePanelHeaderElement; new (): HTMLMvxSidePanelHeaderElement; }; + interface HTMLMvxSidePanelSwiperElementEventMap { + "sheetDismiss": void; + "sheetSnapChange": { index: number; snapPoint: string }; + } + interface HTMLMvxSidePanelSwiperElement extends Components.MvxSidePanelSwiper, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLMvxSidePanelSwiperElement, ev: MvxSidePanelSwiperCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLMvxSidePanelSwiperElement, ev: MvxSidePanelSwiperCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLMvxSidePanelSwiperElement: { + prototype: HTMLMvxSidePanelSwiperElement; + new (): HTMLMvxSidePanelSwiperElement; + }; interface HTMLMvxSignTransactionsAdvancedElement extends Components.MvxSignTransactionsAdvanced, HTMLStencilElement { } var HTMLMvxSignTransactionsAdvancedElement: { @@ -1239,6 +1165,7 @@ declare global { new (): HTMLMvxXportalQrCodePreloaderElement; }; interface HTMLElementTagNameMap { + "mvx-address-table": HTMLMvxAddressTableElement; "mvx-angles-left-icon": HTMLMvxAnglesLeftIconElement; "mvx-angles-right-icon": HTMLMvxAnglesRightIconElement; "mvx-arrow-right-icon": HTMLMvxArrowRightIconElement; @@ -1257,7 +1184,6 @@ declare global { "mvx-fa-icon": HTMLMvxFaIconElement; "mvx-format-amount": HTMLMvxFormatAmountElement; "mvx-generic-toast": HTMLMvxGenericToastElement; - "mvx-ledger-addresses": HTMLMvxLedgerAddressesElement; "mvx-ledger-confirm": HTMLMvxLedgerConfirmElement; "mvx-ledger-connect": HTMLMvxLedgerConnectElement; "mvx-ledger-icon": HTMLMvxLedgerIconElement; @@ -1277,6 +1203,7 @@ declare global { "mvx-provider-idle-screen": HTMLMvxProviderIdleScreenElement; "mvx-side-panel": HTMLMvxSidePanelElement; "mvx-side-panel-header": HTMLMvxSidePanelHeaderElement; + "mvx-side-panel-swiper": HTMLMvxSidePanelSwiperElement; "mvx-sign-transactions-advanced": HTMLMvxSignTransactionsAdvancedElement; "mvx-sign-transactions-advanced-data": HTMLMvxSignTransactionsAdvancedDataElement; "mvx-sign-transactions-advanced-data-decode": HTMLMvxSignTransactionsAdvancedDataDecodeElement; @@ -1328,6 +1255,13 @@ declare global { } } declare namespace LocalJSX { + interface MvxAddressTable { + "accountScreenData"?: IAddressTableData; + "onAccessWallet"?: (event: MvxAddressTableCustomEvent) => void; + "onPageChange"?: (event: MvxAddressTableCustomEvent) => void; + "onSelectAccount"?: (event: MvxAddressTableCustomEvent) => void; + "selectedIndex"?: number; + } interface MvxAnglesLeftIcon { } interface MvxAnglesRightIcon { @@ -1352,14 +1286,8 @@ declare namespace LocalJSX { interface MvxCloseIcon { } interface MvxCopyButton { - /** - * @default 'copy-button' - */ "class"?: string; "copyIcon"?: IconDefinition | string; - /** - * @default 'copy-button-icon' - */ "iconClass"?: string; "successIcon"?: IconDefinition | string; "text"?: string; @@ -1386,9 +1314,6 @@ declare namespace LocalJSX { "width"?: number; } interface MvxFaIcon { - /** - * @default 'fa-icon' - */ "class"?: string; "description"?: string; "icon"?: IconDefinition | string; @@ -1400,9 +1325,6 @@ declare namespace LocalJSX { "isValid"?: boolean; "label"?: string; "labelClass"?: string; - /** - * @default true - */ "showLabel"?: boolean; "valueDecimal"?: string; "valueInteger"?: string; @@ -1411,20 +1333,10 @@ declare namespace LocalJSX { "onDeleteToast"?: (event: MvxGenericToastCustomEvent) => void; "toast"?: CustomToastType; } - interface MvxLedgerAddresses { - "accountScreenData"?: IAccountScreenData; - "onAccessWallet"?: (event: MvxLedgerAddressesCustomEvent) => void; - "onPageChange"?: (event: MvxLedgerAddressesCustomEvent) => void; - "onSelectAccount"?: (event: MvxLedgerAddressesCustomEvent) => void; - "selectedIndex"?: number; - } interface MvxLedgerConfirm { "confirmScreenData"?: IConfirmScreenData; } interface MvxLedgerConnect { - /** - * @default { accountScreenData: null, confirmScreenData: null, connectScreenData: {}, } - */ "data"?: ILedgerConnectPanelData; } interface MvxLedgerIcon { @@ -1432,9 +1344,6 @@ declare namespace LocalJSX { } interface MvxLedgerIntro { "connectScreenData"?: IConnectScreenData; - /** - * @default false - */ "isAwaiting"?: boolean; "onConnect"?: (event: MvxLedgerIntroCustomEvent) => void; } @@ -1454,27 +1363,15 @@ declare namespace LocalJSX { } interface MvxPagination { "class"?: string; - /** - * @default 1 - */ "currentPage"?: number; - /** - * @default false - */ "isDisabled"?: boolean; "onPageChange"?: (event: MvxPaginationCustomEvent) => void; "totalPages"?: number; } interface MvxPaginationEllipsis { - /** - * @default false - */ "isActive"?: boolean; } interface MvxPaginationEllipsisForm { - /** - * @default false - */ "isVisible"?: boolean; "maxPageToSearchFor"?: number; "onSearch"?: (event: MvxPaginationEllipsisFormCustomEvent) => void; @@ -1491,50 +1388,35 @@ declare namespace LocalJSX { "class"?: string; } interface MvxProviderIdleScreen { - /** - * @default '' - */ "introText"?: string; - /** - * @default 'Requesting Connection' - */ "introTitle"?: string; "onAccess"?: (event: MvxProviderIdleScreenCustomEvent) => void; "onClose"?: (event: MvxProviderIdleScreenCustomEvent) => void; - /** - * @default null - */ "provider"?: IProviderBase | null; } interface MvxSidePanel { "hasBackButton"?: boolean; - /** - * @default false - */ "isOpen"?: boolean; "onBack"?: (event: MvxSidePanelCustomEvent) => void; "onClose"?: (event: MvxSidePanelCustomEvent) => void; "panelClassName"?: string; "panelTitle"?: string; - /** - * @default true - */ "showHeader"?: boolean; } interface MvxSidePanelHeader { - /** - * @default true - */ "hasLeftButton"?: boolean; - /** - * @default true - */ "hasRightButton"?: boolean; "onLeftButtonClick"?: (event: MvxSidePanelHeaderCustomEvent) => void; "onRightButtonClick"?: (event: MvxSidePanelHeaderCustomEvent) => void; "panelClassName"?: string; "panelTitle"?: string; } + interface MvxSidePanelSwiper { + "onSheetDismiss"?: (event: MvxSidePanelSwiperCustomEvent) => void; + "onSheetSnapChange"?: (event: MvxSidePanelSwiperCustomEvent<{ index: number; snapPoint: string }>) => void; + "open"?: boolean; + "sidePanelIdentifier"?: string; + } interface MvxSignTransactionsAdvanced { "data"?: string; "highlight"?: string; @@ -1544,13 +1426,7 @@ declare namespace LocalJSX { "highlight"?: string; } interface MvxSignTransactionsAdvancedDataDecode { - /** - * @default DecodeMethodEnum.decimal - */ "currentDecodeMethod"?: DecodeMethodEnum; - /** - * @default false - */ "isToggled"?: boolean; } interface MvxSignTransactionsFooter { @@ -1563,13 +1439,7 @@ declare namespace LocalJSX { "identifier"?: string; "interactor"?: string; "interactorIconUrl"?: string; - /** - * @default false - */ "isApp"?: boolean; - /** - * @default '~$0.00078' - */ "networkFee"?: string; "tokenIconUrl"?: string; "usdValue"?: string; @@ -1597,14 +1467,8 @@ declare namespace LocalJSX { interface MvxTooltip { "class"?: string; "onTriggerRender"?: (event: MvxTooltipCustomEvent) => void; - /** - * @default 'top' - */ "position"?: 'top' | 'bottom'; "trigger"?: HTMLElement; - /** - * @default false - */ "triggerOnClick"?: boolean; } interface MvxTransactionAccount { @@ -1612,9 +1476,6 @@ declare namespace LocalJSX { "class"?: string; "dataTestId"?: string; "scope"?: 'receiver' | 'sender'; - /** - * @default false - */ "showLockedAccounts"?: boolean; } interface MvxTransactionAccountName { @@ -1660,19 +1521,10 @@ declare namespace LocalJSX { interface MvxTransactionToast { "fullWidth"?: boolean; "onDeleteToast"?: (event: MvxTransactionToastCustomEvent) => void; - /** - * @default '' - */ "processedTransactionsStatus"?: string | JSX.Element; "toastDataState"?: IToastDataState; - /** - * @default '' - */ "toastId"?: string; "transactionProgressState"?: ITransactionProgressState; - /** - * @default [] - */ "transactions"?: ITransactionListItem[]; "wrapperClass"?: string; } @@ -1684,9 +1536,6 @@ declare namespace LocalJSX { "transactions"?: ITransactionListItem[]; } interface MvxTransactionToastDetails { - /** - * @default 5 - */ "maxShownTransactions"?: number; "processedTransactionsStatus"?: string | JSX.Element; "transactionClass"?: string; @@ -1697,9 +1546,6 @@ declare namespace LocalJSX { "index"?: string; "link"?: string; "status"?: string; - /** - * @default 'transaction-details-list-item' - */ "transactionClass"?: string; } interface MvxTransactionToastProgress { @@ -1723,6 +1569,7 @@ declare namespace LocalJSX { } interface MvxUnlockButton { "class"?: string; + "dataTestId"?: string; "icon"?: HTMLElement; "iconUrl"?: string; "label"?: string; @@ -1736,9 +1583,6 @@ declare namespace LocalJSX { interface MvxUnlockPanelGroup { "class"?: string; "onLogin"?: (event: MvxUnlockPanelGroupCustomEvent) => void; - /** - * @default [] - */ "providers"?: IProviderBase[]; } interface MvxUnlockProviderButton { @@ -1746,13 +1590,7 @@ declare namespace LocalJSX { "provider"?: IProviderBase; } interface MvxWalletConnect { - /** - * @default { wcURI: '' } - */ "data"?: IWalletConnectPanelData; - /** - * @default '' - */ "qrCodeSvg"?: string; } interface MvxWalletConnectAppGalleryIcon { @@ -1770,13 +1608,7 @@ declare namespace LocalJSX { interface MvxWalletConnectScan { "class"?: string; "onDownloadClick"?: (event: MvxWalletConnectScanCustomEvent) => void; - /** - * @default '' - */ "qrCodeSvg"?: string; - /** - * @default '' - */ "walletConnectDeepLink"?: string; } interface MvxWalletProviderIcon { @@ -1785,15 +1617,13 @@ declare namespace LocalJSX { interface MvxXaliasProviderIcon { } interface MvxXportalDownloadQrIcon { - /** - * @default '' - */ "class"?: string; } interface MvxXportalQrCodePreloader { "class"?: string; } interface IntrinsicElements { + "mvx-address-table": MvxAddressTable; "mvx-angles-left-icon": MvxAnglesLeftIcon; "mvx-angles-right-icon": MvxAnglesRightIcon; "mvx-arrow-right-icon": MvxArrowRightIcon; @@ -1812,7 +1642,6 @@ declare namespace LocalJSX { "mvx-fa-icon": MvxFaIcon; "mvx-format-amount": MvxFormatAmount; "mvx-generic-toast": MvxGenericToast; - "mvx-ledger-addresses": MvxLedgerAddresses; "mvx-ledger-confirm": MvxLedgerConfirm; "mvx-ledger-connect": MvxLedgerConnect; "mvx-ledger-icon": MvxLedgerIcon; @@ -1832,6 +1661,7 @@ declare namespace LocalJSX { "mvx-provider-idle-screen": MvxProviderIdleScreen; "mvx-side-panel": MvxSidePanel; "mvx-side-panel-header": MvxSidePanelHeader; + "mvx-side-panel-swiper": MvxSidePanelSwiper; "mvx-sign-transactions-advanced": MvxSignTransactionsAdvanced; "mvx-sign-transactions-advanced-data": MvxSignTransactionsAdvancedData; "mvx-sign-transactions-advanced-data-decode": MvxSignTransactionsAdvancedDataDecode; @@ -1886,6 +1716,7 @@ export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { + "mvx-address-table": LocalJSX.MvxAddressTable & JSXBase.HTMLAttributes; "mvx-angles-left-icon": LocalJSX.MvxAnglesLeftIcon & JSXBase.HTMLAttributes; "mvx-angles-right-icon": LocalJSX.MvxAnglesRightIcon & JSXBase.HTMLAttributes; "mvx-arrow-right-icon": LocalJSX.MvxArrowRightIcon & JSXBase.HTMLAttributes; @@ -1904,7 +1735,6 @@ declare module "@stencil/core" { "mvx-fa-icon": LocalJSX.MvxFaIcon & JSXBase.HTMLAttributes; "mvx-format-amount": LocalJSX.MvxFormatAmount & JSXBase.HTMLAttributes; "mvx-generic-toast": LocalJSX.MvxGenericToast & JSXBase.HTMLAttributes; - "mvx-ledger-addresses": LocalJSX.MvxLedgerAddresses & JSXBase.HTMLAttributes; "mvx-ledger-confirm": LocalJSX.MvxLedgerConfirm & JSXBase.HTMLAttributes; "mvx-ledger-connect": LocalJSX.MvxLedgerConnect & JSXBase.HTMLAttributes; "mvx-ledger-icon": LocalJSX.MvxLedgerIcon & JSXBase.HTMLAttributes; @@ -1924,6 +1754,7 @@ declare module "@stencil/core" { "mvx-provider-idle-screen": LocalJSX.MvxProviderIdleScreen & JSXBase.HTMLAttributes; "mvx-side-panel": LocalJSX.MvxSidePanel & JSXBase.HTMLAttributes; "mvx-side-panel-header": LocalJSX.MvxSidePanelHeader & JSXBase.HTMLAttributes; + "mvx-side-panel-swiper": LocalJSX.MvxSidePanelSwiper & JSXBase.HTMLAttributes; "mvx-sign-transactions-advanced": LocalJSX.MvxSignTransactionsAdvanced & JSXBase.HTMLAttributes; "mvx-sign-transactions-advanced-data": LocalJSX.MvxSignTransactionsAdvancedData & JSXBase.HTMLAttributes; "mvx-sign-transactions-advanced-data-decode": LocalJSX.MvxSignTransactionsAdvancedDataDecode & JSXBase.HTMLAttributes; diff --git a/src/components/functional/ledger-connect/helpers/getLedgerAddressByIndex.ts b/src/components/functional/ledger-connect/helpers/getLedgerAddressByIndex.ts index c258e36f..958cab73 100644 --- a/src/components/functional/ledger-connect/helpers/getLedgerAddressByIndex.ts +++ b/src/components/functional/ledger-connect/helpers/getLedgerAddressByIndex.ts @@ -1,7 +1,7 @@ -import type { ILedgerAccount } from '../ledger-connect.types'; +import type { IndexedAccountType } from 'types/address-table.types'; interface GetLedgerAddressByIndexType { - accounts?: ILedgerAccount[]; + accounts?: IndexedAccountType[]; selectedIndex: number; } diff --git a/src/components/functional/ledger-connect/ledger-connect.tsx b/src/components/functional/ledger-connect/ledger-connect.tsx index bbc0ccc3..bc7de1ba 100644 --- a/src/components/functional/ledger-connect/ledger-connect.tsx +++ b/src/components/functional/ledger-connect/ledger-connect.tsx @@ -86,7 +86,7 @@ export class LedgerConnect { onRightButtonClick={this.handleClose.bind(this)} /> - this.accessWallet()} diff --git a/src/components/functional/ledger-connect/ledger-connect.types.ts b/src/components/functional/ledger-connect/ledger-connect.types.ts index e3cbb29f..afa1c819 100644 --- a/src/components/functional/ledger-connect/ledger-connect.types.ts +++ b/src/components/functional/ledger-connect/ledger-connect.types.ts @@ -1,16 +1,11 @@ +import type { IAddressTableData } from 'types/address-table.types'; + export interface IConnectScreenData { customContentMarkup?: string; disabled?: boolean; error?: string; } -export interface IAccountScreenData { - accounts: ILedgerAccount[]; - startIndex: number; - addressesPerPage: number; - isLoading: boolean; -} - export interface IConfirmScreenData { data?: string; selectedAddress: string; @@ -21,17 +16,10 @@ export interface IConfirmScreenData { export interface ILedgerConnectPanelData { connectScreenData: IConnectScreenData | null; - accountScreenData: IAccountScreenData | null; + accountScreenData: IAddressTableData | null; confirmScreenData: IConfirmScreenData | null; } -export interface ILedgerAccount { - address: string; - balance: string; - usdValue?: string; - index: number; -} - export enum LedgerConnectEventsEnum { CONNECT_DEVICE = 'CONNECT_DEVICE', ACCESS_WALLET = 'ACCESS_WALLET', diff --git a/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-details/transaction-toast-details.tsx b/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-details/transaction-toast-details.tsx index fd56c5f8..fe8c6d96 100644 --- a/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-details/transaction-toast-details.tsx +++ b/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-details/transaction-toast-details.tsx @@ -27,6 +27,20 @@ export class TransactionToastDetails { this.showAllTransactions = true; } + private initialTransactionsOrder = new Map(); + + private getOrderedTransactions(transactions: ITransactionListItem[]) { + transactions.forEach((transaction, index) => { + if (!this.initialTransactionsOrder.has(transaction.hash)) { + this.initialTransactionsOrder.set(transaction.hash, index + 1); + } + }); + + return [...transactions].sort( + (a, b) => this.initialTransactionsOrder.get(a.hash) - this.initialTransactionsOrder.get(b.hash), + ); + } + render() { if (this.transactions == null) { return null; @@ -34,9 +48,10 @@ export class TransactionToastDetails { const hasMoreTransactionsToShow = this.transactions.length > this.maxShownTransactions; const hiddenTransactionsCount = this.transactions.length - this.maxShownTransactions; + const orderedTransactions = this.getOrderedTransactions(this.transactions); const visibleTransactions = this.showAllTransactions - ? this.transactions - : this.transactions.slice(0, this.maxShownTransactions); + ? orderedTransactions + : orderedTransactions.slice(0, this.maxShownTransactions); return (
@@ -54,13 +69,13 @@ export class TransactionToastDetails { 'expanded': this.isExpanded, }} > - {visibleTransactions.map(({ hash, status, link }, index) => ( + {visibleTransactions.map(({ hash, status, link }) => ( ))} diff --git a/src/components/functional/ledger-connect/components/ledger-addresses/ledger-addresses.scss b/src/components/visual/address-table/address-table.scss similarity index 87% rename from src/components/functional/ledger-connect/components/ledger-addresses/ledger-addresses.scss rename to src/components/visual/address-table/address-table.scss index 7ac65db0..d9d89f5d 100644 --- a/src/components/functional/ledger-connect/components/ledger-addresses/ledger-addresses.scss +++ b/src/components/visual/address-table/address-table.scss @@ -1,10 +1,10 @@ :host { @apply mvx:flex mvx:flex-col mvx:flex-1 mvx:overflow-hidden; - .ledger-addresses { + .address-table { @apply mvx:flex mvx:flex-col mvx:flex-1 mvx:overflow-hidden mvx:py-6; - .ledger-addresses-label-wrapper { + .address-table-label-wrapper { @apply mvx:relative mvx:z-2; &:after { @@ -14,20 +14,20 @@ box-shadow: 0px 8px 12px 16px var(--mvx-bg-color-primary); } - .ledger-addresses-label { + .address-table-label { @apply mvx:leading-none mvx:relative mvx:z-1; color: var(--mvx-text-color-primary); } } - .ledger-addresses-wrapper { + .address-table-wrapper { @apply mvx:relative mvx:mb-auto mvx:py-5 mvx:overflow-auto; &::-webkit-scrollbar { @apply mvx:hidden; } - .ledger-addresses-preloader { + .address-table-preloader { @apply mvx:flex mvx:flex-col mvx:pointer-events-none mvx:absolute mvx:opacity-0 mvx:z-1 mvx:gap-1; @apply mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:left-0 mvx:right-0 mvx:bottom-0 mvx:top-5; @@ -36,7 +36,7 @@ } } - .ledger-addresses-list { + .address-table-list { @apply mvx:flex mvx:flex-col mvx:gap-1 mvx:pointer-events-none mvx:transition-all mvx:ease-in-out; @apply mvx:duration-200 mvx:opacity-0; @@ -44,7 +44,7 @@ @apply mvx:opacity-100 mvx:pointer-events-auto; } - .ledger-addresses-list-item { + .address-table-list-item { @apply mvx:rounded-lg mvx:flex mvx:items-center mvx:p-4 mvx:h-16 mvx:w-full; @apply mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out; border: 1px solid transparent; @@ -56,7 +56,7 @@ border-color: var(--mvx-text-accent-color); } - .ledger-addresses-list-item-checkbox { + .address-table-list-item-checkbox { @apply mvx:relative mvx:z-1 mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:rounded-full; @apply mvx:ease-in-out mvx:mr-2 mvx:min-w-4 mvx:max-w-4 mvx:h-4; border: 1px solid var(--mvx-text-color-primary); @@ -77,7 +77,7 @@ } } - .ledger-addresses-list-item-index { + .address-table-list-item-index { @apply mvx:relative mvx:z-1 mvx:text-base mvx:font-medium mvx:transition-all mvx:duration-200 mvx:mr-4 mvx:ease-in-out; color: var(--mvx-text-color-secondary); @@ -102,7 +102,7 @@ } } - .ledger-addresses-list-item-address { + .address-table-list-item-address { @apply mvx:relative mvx:z-1 mvx:max-w-40 mvx:text-base mvx:mr-auto mvx:min-w-0; .trim-wrapper { @@ -110,14 +110,14 @@ } } - .ledger-addresses-list-item-balance { + .address-table-list-item-balance { @apply mvx:relative mvx:ml-4 mvx:font-medium mvx:text-base mvx:z-1; } } } } - .ledger-addresses-pagination { + .address-table-pagination { @apply mvx:relative mvx:z-1; &:after { @@ -128,20 +128,20 @@ } } - .ledger-addresses-button-wrapper { + .address-table-button-wrapper { @apply mvx:relative mvx:z-2 mvx:mt-4; - .ledger-addresses-button-tooltip-wrapper { + .address-table-button-tooltip-wrapper { @apply mvx:text-xs mvx:text-center; color: var(--mvx-neutral-500); } - .ledger-addresses-button { + .address-table-button { @apply mvx:w-full mvx:flex mvx:items-center mvx:justify-center mvx:font-bold mvx:h-12 mvx:leading-none mvx:text-base; @apply mvx:rounded-lg mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:gap-2; color: var(--mvx-button-text-primary); background-color: var(--mvx-button-bg-primary); - border: 1px solid var(---mvx-button-bg-primary); + border: 1px solid var(--mvx-button-bg-primary); &:hover { @apply mvx:opacity-75; diff --git a/src/components/functional/ledger-connect/components/ledger-addresses/ledger-addresses.tsx b/src/components/visual/address-table/address-table.tsx similarity index 64% rename from src/components/functional/ledger-connect/components/ledger-addresses/ledger-addresses.tsx rename to src/components/visual/address-table/address-table.tsx index 40def13f..30e90465 100644 --- a/src/components/functional/ledger-connect/components/ledger-addresses/ledger-addresses.tsx +++ b/src/components/visual/address-table/address-table.tsx @@ -2,18 +2,17 @@ import type { EventEmitter } from '@stencil/core'; import { Component, Event, h, Prop } from '@stencil/core'; import classNames from 'classnames'; import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; - -import type { IAccountScreenData, ILedgerAccount } from '../../ledger-connect.types'; +import type { IAddressTableData, IndexedAccountType } from 'types/address-table.types'; const TOTAL_ADDRESSES_COUNT = 5000; @Component({ - tag: 'mvx-ledger-addresses', - styleUrl: 'ledger-addresses.scss', + tag: 'mvx-address-table', + styleUrl: 'address-table.scss', shadow: true, }) -export class LedgerAddresses { - @Prop() accountScreenData: IAccountScreenData; +export class AddressTable { + @Prop() accountScreenData: IAddressTableData; @Prop() selectedIndex: number; @Event() accessWallet: EventEmitter; @@ -38,7 +37,7 @@ export class LedgerAddresses { this.pageChange.emit(event.detail); } - private processLedgerAddressIndex(accountDerivation: ILedgerAccount) { + private processLedgerAddressIndex(accountDerivation: IndexedAccountType) { return Number(accountDerivation.index + 1).toLocaleString(); } @@ -56,7 +55,7 @@ export class LedgerAddresses { const isIndexInTheHundreds = !isIndexBelowOneHundred && !isSingleDigitIndex && lastIndexOfPage < 1000; const isIndexInTheThousands = lastIndexOfPage >= 1000; - const ledgerAddressesClasses: Record = { + const addressClasses: Record = { pagination: 'mvx:relative mvx:z-1', buttonTooltip: 'mvx:absolute mvx:top-0 mvx:h-12 mvx:left-0 mvx:right-0', preloaderItem: @@ -77,60 +76,50 @@ export class LedgerAddresses { } return ( -
-
-
Choose the wallet you want to access
+
+
+
Choose the wallet you want to access
-
-
+
+
{Array.from({ length: this.accountScreenData.addressesPerPage }, () => ( - + ))}
-
+
{this.accountScreenData.accounts.map(accountDerivation => (
- -
{accountDerivation.usdValue}
+ +
{accountDerivation.usdValue}
))}
-
+
this.handlePageChange(event)} - currentPage={this.accountScreenData.startIndex / this.accountScreenData.addressesPerPage + 1} + currentPage={Math.floor(this.accountScreenData.startIndex / this.accountScreenData.addressesPerPage) + 1} />
-
+
{isAccessWalletDisabled && ( -
+
- } + trigger={
} > You have to select a wallet from the list that you want to access. @@ -176,9 +161,9 @@ export class LedgerAddresses {
diff --git a/src/components/visual/index.ts b/src/components/visual/index.ts new file mode 100644 index 00000000..ad402ac1 --- /dev/null +++ b/src/components/visual/index.ts @@ -0,0 +1 @@ +export * from './address-table/address-table'; diff --git a/src/components/visual/pagination/pagination.tsx b/src/components/visual/pagination/pagination.tsx index a5e391bb..3b7d7ce1 100644 --- a/src/components/visual/pagination/pagination.tsx +++ b/src/components/visual/pagination/pagination.tsx @@ -1,5 +1,6 @@ import type { EventEmitter } from '@stencil/core'; import { Component, Event, h, Prop, State, Watch } from '@stencil/core'; +import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; import { getPagination } from './helpers'; @@ -68,6 +69,7 @@ export class Pagination { @@ -75,6 +77,7 @@ export class Pagination {
@@ -90,6 +93,7 @@ export class Pagination { 'active': this.isCurrentPageActive(paginationItem), 'hundreds': this.isInTheHundreds(paginationItem), }} + data-testid={`${DataTestIdsEnum.paginationItem}-${paginationItem}`} > {paginationItem}
@@ -122,6 +126,7 @@ export class Pagination {
@@ -129,6 +134,7 @@ export class Pagination { diff --git a/src/components/visual/side-panel/side-panel.scss b/src/components/visual/side-panel/side-panel.scss index c3dfcea4..eceddd78 100644 --- a/src/components/visual/side-panel/side-panel.scss +++ b/src/components/visual/side-panel/side-panel.scss @@ -1,6 +1,6 @@ .side-panel-wrapper { - @apply mvx:flex mvx:pointer-events-none mvx:z-50; - @apply mvx:justify-end mvx:items-start; + @apply mvx:flex mvx:justify-end mvx:items-start mvx:z-50; + @apply mvx:pointer-events-none mvx:invisible; @media (min-width: 480px) { @apply mvx:fixed mvx:top-0 mvx:left-0 mvx:right-0 mvx:bottom-0 mvx:p-4 mvx:pr-0 mvx:items-center; @@ -20,13 +20,15 @@ } } - @apply mvx:pointer-events-auto mvx:visible; + &.visible { + @apply mvx:pointer-events-auto mvx:visible; - &:before { - @apply mvx:opacity-90; + &:before { + @apply mvx:opacity-90; - @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { - @apply mvx:opacity-50; + @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + @apply mvx:opacity-50; + } } } diff --git a/src/constants/dataTestIds.enum.ts b/src/constants/dataTestIds.enum.ts index 4d016f2c..72fbd5ea 100644 --- a/src/constants/dataTestIds.enum.ts +++ b/src/constants/dataTestIds.enum.ts @@ -1,6 +1,10 @@ export enum DataTestIdsEnum { accessWalletBtn = 'accessWalletBtn', addressTableContainer = 'addressTableContainer', + addressTableItem = 'addressTableItem', + firstBtn = 'firstBtn', + lastBtn = 'lastBtn', + paginationItem = 'paginationItem', confirmBtn = 'confirmBtn', formatAmountComponent = 'formatAmountComponent', formatAmountDecimals = 'formatAmountDecimals', diff --git a/src/types/address-table.types.ts b/src/types/address-table.types.ts new file mode 100644 index 00000000..0254d281 --- /dev/null +++ b/src/types/address-table.types.ts @@ -0,0 +1,13 @@ +export interface IndexedAccountType { + address: string; + balance: string; + usdValue?: string; + index: number; +} + +export interface IAddressTableData { + accounts: IndexedAccountType[]; + startIndex: number; + addressesPerPage: number; + isLoading: boolean; +}