From acd09df409cd4851435cc6e6031e4e6d16d9c66a Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Wed, 12 Nov 2025 15:41:53 +0200 Subject: [PATCH 01/22] Update styles --- .../sign-transactions-footer.scss | 68 +----- .../sign-transactions-footer.styles.ts | 18 ++ .../sign-transactions-footer.tsx | 211 +++++++++--------- .../sign-transactions-panel.tsx | 2 +- 4 files changed, 124 insertions(+), 175 deletions(-) create mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.styles.ts diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.scss b/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.scss index 6b3ce95f..ff1190ee 100644 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.scss +++ b/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.scss @@ -1,67 +1 @@ -:host { - @apply mvx:flex mvx:flex-col mvx:flex-1; - - .sign-transactions-footer { - @apply mvx:mt-auto mvx:flex mvx:flex-col mvx:items-center mvx:pt-5 mvx:gap-5 mvx:text-center; - - .sign-transactions-footer-buttons { - @apply mvx:flex mvx:items-center mvx:w-full mvx:gap-3; - - .sign-transactions-footer-button-wrapper { - @apply mvx:relative mvx:flex mvx:flex-col mvx:flex-1; - - &.cancel { - @apply mvx:w-32 mvx:max-w-32; - } - - .sign-transactions-footer-button-tooltip-wrapper { - @apply mvx:absolute mvx:inset-0; - } - - .sign-transactions-footer-button { - @apply mvx:flex; - - .sign-transactions-footer-button-icon { - @apply mvx:flex mvx:transition-all mvx:duration-200 mvx:ease-in-out; - - &.lighter { - fill: var(--mvx-text-color-secondary); - } - } - } - } - } - - .sign-transactions-footer-identity { - @apply mvx:max-w-64 mvx:flex mvx:items-center mvx:text-base mvx:gap-2; - - .sign-transactions-footer-identity-label { - @apply mvx:whitespace-nowrap; - color: var(--mvx-text-color-secondary); - } - - .sign-transactions-footer-identity-address { - @apply mvx:relative mvx:min-w-0 mvx:max-w-none; - top: 0.25px; - color: var(--mvx-text-color-primary); - - .trim-wrapper { - @apply mvx:items-end mvx:leading-none; - } - } - - .sign-transactions-footer-identity-username { - @apply mvx:flex mvx:items-center mvx:text-base; - color: var(--mvx-text-color-primary); - - .sign-transactions-footer-identity-username-prefix { - color: var(--mvx-text-accent-color); - } - } - - .sign-transactions-footer-identity-copy { - color: var(--mvx-text-color-primary); - } - } - } -} +// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. \ No newline at end of file diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.styles.ts b/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.styles.ts new file mode 100644 index 00000000..506d768c --- /dev/null +++ b/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.styles.ts @@ -0,0 +1,18 @@ +export default { + signTransactionsFooterContainer: 'sign-transactions-footer-container mvx:flex mvx:flex-col mvx:flex-1 mvx:h-full', + signTransactionsFooter: 'sign-transactions-footer mvx:mt-auto mvx:flex mvx:flex-col mvx:items-center mvx:pt-5 mvx:gap-5 mvx:text-center', + signTransactionsFooterButtons: 'sign-transactions-footer-buttons mvx:flex mvx:items-center mvx:w-full mvx:gap-3', + signTransactionsFooterButtonWrapper: 'sign-transactions-footer-button-wrapper mvx:relative mvx:flex mvx:flex-col mvx:flex-1', + signTransactionsFooterButtonWrapperCancel: 'sign-transactions-footer-button-wrapper-cancel mvx:w-32 mvx:max-w-32', + signTransactionsFooterButtonTooltipWrapper: 'sign-transactions-footer-button-tooltip-wrapper mvx:absolute mvx:inset-0', + signTransactionsFooterButton: 'sign-transactions-footer-button mvx:flex', + signTransactionsFooterButtonIcon: 'sign-transactions-footer-button-icon mvx:flex mvx:transition-all mvx:duration-200 mvx:ease-in-out', + signTransactionsFooterButtonIconLighter: 'sign-transactions-footer-button-icon-lighter mvx:fill-secondary-text', + signTransactionsFooterIdentity: 'sign-transactions-footer-identity mvx:max-w-64 mvx:flex mvx:items-center mvx:text-base mvx:gap-2', + signTransactionsFooterIdentityLabel: 'sign-transactions-footer-identity-label mvx:whitespace-nowrap mvx:text-secondary-text', + signTransactionsFooterIdentityAddress: 'sign-transactions-footer-identity-address mvx:relative mvx:min-w-0 mvx:max-w-none mvx:top-[0.25px] mvx:text-primary', + signTransactionsTrimWrapper: 'sign-transactions-trim-wrapper mvx:items-end mvx:leading-none', + signTransactionsFooterIdentityUsername: 'sign-transactions-footer-identity-username mvx:flex mvx:items-center mvx:text-base mvx:text-primary', + signTransactionsFooterIdentityUsernamePrefix: 'sign-transactions-footer-identity-username-prefix mvx:text-accent', + signTransactionsFooterIdentityCopy: 'sign-transactions-footer-identity-copy mvx:text-primary' +} satisfies Record; \ No newline at end of file diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx b/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx index 2bc8a967..6abcdcf3 100644 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx +++ b/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx @@ -4,6 +4,7 @@ import { Icon } from 'common/Icon'; import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; import state from '../../signTransactionsPanelStore'; +import styles from './sign-transactions-footer.styles'; const signTransactionsFooterClasses: Record = { buttonTooltip: 'mvx:absolute mvx:top-0 mvx:h-12 mvx:left-0 mvx:right-0', @@ -56,122 +57,118 @@ export class SignTransactionsFooter { const checkButtonText = providerName ? `Check ${providerName}` : 'Check your device'; return ( -
-
-
- - {isFirstTransaction ? 'Cancel' : 'Back'} - -
- -
- {currentIndexCannotBeSignedYet && ( -
event.stopPropagation()} +
+
+
+
+ - - } - > - {needsSigning ? ( - - You cannot sign this transaction yet,
please go back and sign consecutively. - - ) : ( - - You cannot confirm this transaction yet,
- please go back and confirm consecutively. - - )} - -
- )} + {isFirstTransaction ? 'Cancel' : 'Back'} + +
- - {showForwardAction ? ( - - {this.isWaitingForSignature ? ( - {checkButtonText} - ) : ( - {needsSigning ? 'Sign' : 'Confirm'} - )} - - ) : ( - - Next - +
+ {currentIndexCannotBeSignedYet && ( +
event.stopPropagation()} + > + + } + > + {needsSigning ? ( + + You cannot sign this transaction yet,
please go back and sign consecutively. + + ) : ( + + You cannot confirm this transaction yet,
+ please go back and confirm consecutively. + + )} + +
)} - {showForwardAction ? ( - - {this.isWaitingForSignature ? ( - - - - ) : ( - - - - )} - - ) : ( - - + + {showForwardAction ? ( + + {this.isWaitingForSignature ? ( + {checkButtonText} + ) : ( + {needsSigning ? 'Sign' : 'Confirm'} + )} + + ) : ( + Next + )} + + {showForwardAction ? ( + + {this.isWaitingForSignature ? ( + + + + ) : ( + + + + )} + + ) : ( + - - )} - + )} + +
-
-
-
Sign with
+
+
Sign with
- {username && ( -
- @ - {username} -
- )} - - {!username && address && ( - - )} - - - + {username && ( +
+ @ + {username} +
+ )} + + {!username && address && ( + + )} + + + +
); diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx index ee57ac8c..5122cb5f 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx @@ -152,7 +152,7 @@ export class SignTransactionsPanel { )}
- +
); From e7673dd65a0f6eea4cb5e43bd1a78c80b9744319 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Wed, 12 Nov 2025 17:29:02 +0200 Subject: [PATCH 02/22] Refactored sign transactions footer --- src/components.d.ts | 13 -- .../SignTransactionsFooter.tsx | 157 ++++++++++++++++ .../signTransactionsFooter.styles.ts} | 5 +- .../sign-transactions-footer.scss | 1 - .../sign-transactions-footer.tsx | 176 ------------------ .../sign-transactions-panel.tsx | 3 +- 6 files changed, 163 insertions(+), 192 deletions(-) create mode 100644 src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx rename src/components/functional/sign-transactions-panel/components/{sign-transactions-footer/sign-transactions-footer.styles.ts => SignTransactionsFooter/signTransactionsFooter.styles.ts} (85%) delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.scss delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx diff --git a/src/components.d.ts b/src/components.d.ts index 3d50c26c..f763ea63 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -275,8 +275,6 @@ export namespace Components { */ "isToggled": boolean; } - interface MvxSignTransactionsFooter { - } interface MvxSignTransactionsHeader { } interface MvxSignTransactionsOverview { @@ -854,12 +852,6 @@ declare global { prototype: HTMLMvxSignTransactionsAdvancedDataDecodeElement; new (): HTMLMvxSignTransactionsAdvancedDataDecodeElement; }; - interface HTMLMvxSignTransactionsFooterElement extends Components.MvxSignTransactionsFooter, HTMLStencilElement { - } - var HTMLMvxSignTransactionsFooterElement: { - prototype: HTMLMvxSignTransactionsFooterElement; - new (): HTMLMvxSignTransactionsFooterElement; - }; interface HTMLMvxSignTransactionsHeaderElement extends Components.MvxSignTransactionsHeader, HTMLStencilElement { } var HTMLMvxSignTransactionsHeaderElement: { @@ -1111,7 +1103,6 @@ declare global { "mvx-sign-transactions-advanced": HTMLMvxSignTransactionsAdvancedElement; "mvx-sign-transactions-advanced-data": HTMLMvxSignTransactionsAdvancedDataElement; "mvx-sign-transactions-advanced-data-decode": HTMLMvxSignTransactionsAdvancedDataDecodeElement; - "mvx-sign-transactions-footer": HTMLMvxSignTransactionsFooterElement; "mvx-sign-transactions-header": HTMLMvxSignTransactionsHeaderElement; "mvx-sign-transactions-overview": HTMLMvxSignTransactionsOverviewElement; "mvx-sign-transactions-panel": HTMLMvxSignTransactionsPanelElement; @@ -1390,8 +1381,6 @@ declare namespace LocalJSX { */ "isToggled"?: boolean; } - interface MvxSignTransactionsFooter { - } interface MvxSignTransactionsHeader { } interface MvxSignTransactionsOverview { @@ -1597,7 +1586,6 @@ declare namespace LocalJSX { "mvx-sign-transactions-advanced": MvxSignTransactionsAdvanced; "mvx-sign-transactions-advanced-data": MvxSignTransactionsAdvancedData; "mvx-sign-transactions-advanced-data-decode": MvxSignTransactionsAdvancedDataDecode; - "mvx-sign-transactions-footer": MvxSignTransactionsFooter; "mvx-sign-transactions-header": MvxSignTransactionsHeader; "mvx-sign-transactions-overview": MvxSignTransactionsOverview; "mvx-sign-transactions-panel": MvxSignTransactionsPanel; @@ -1669,7 +1657,6 @@ declare module "@stencil/core" { "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; - "mvx-sign-transactions-footer": LocalJSX.MvxSignTransactionsFooter & JSXBase.HTMLAttributes; "mvx-sign-transactions-header": LocalJSX.MvxSignTransactionsHeader & JSXBase.HTMLAttributes; "mvx-sign-transactions-overview": LocalJSX.MvxSignTransactionsOverview & JSXBase.HTMLAttributes; "mvx-sign-transactions-panel": LocalJSX.MvxSignTransactionsPanel & JSXBase.HTMLAttributes; diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx new file mode 100644 index 00000000..64ef5ccd --- /dev/null +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx @@ -0,0 +1,157 @@ +import { Fragment, h } from '@stencil/core'; +import classNames from 'classnames'; +import { Icon } from 'common/Icon'; +import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; + +import state from '../../signTransactionsPanelStore'; +import styles from './signTransactionsFooter.styles'; +import { Trim } from 'common/Trim/Trim'; + +let isWaitingForSignature: boolean = false; +let lastCommonData = { ...state.commonData }; + +export function SignTransactionsFooter() { + const currentCommonData = { ...state.commonData }; + const hasChanged = JSON.stringify(currentCommonData) !== JSON.stringify(lastCommonData); + + if (hasChanged && isWaitingForSignature) { + // Reset the waiting state when data changes + isWaitingForSignature = false; + } + + lastCommonData = currentCommonData; + + const handleSignClick = () => { + if (state.onConfirm) { + isWaitingForSignature = true; + state.onConfirm(); + } + }; + + const { onCancel, onBack, onNext } = state; + const { currentIndex, currentIndexToSign, needsSigning, username, address, explorerLink, providerName } = + state.commonData; + + const isFirstTransaction = currentIndex === 0; + const currentIndexNeedsSigning = currentIndex === currentIndexToSign; + const currentIndexCannotBeSignedYet = currentIndex > currentIndexToSign; + const showForwardAction = currentIndexNeedsSigning || currentIndexCannotBeSignedYet; + const checkButtonText = providerName ? `Check ${providerName}` : 'Check your device'; + + return ( +
+
+
+
+ + {isFirstTransaction ? 'Cancel' : 'Back'} + +
+ +
+ {currentIndexCannotBeSignedYet && ( +
event.stopPropagation()} + > + + } + > + {needsSigning ? ( + + You cannot sign this transaction yet,
please go back and sign consecutively. + + ) : ( + + You cannot confirm this transaction yet,
+ please go back and confirm consecutively. + + )} + +
+ )} + + + {showForwardAction ? ( + + {isWaitingForSignature ? ( + {checkButtonText} + ) : ( + {needsSigning ? 'Sign' : 'Confirm'} + )} + + ) : ( + Next + )} + + {showForwardAction ? ( + + {isWaitingForSignature ? ( + + + + ) : ( + + + + )} + + ) : ( + + + + )} + +
+
+ +
+
Sign with
+ + {username && ( +
+ @ + {username} +
+ )} + + {!username && address && ( + + )} + + + +
+
+
+ ); +} diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.styles.ts b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/signTransactionsFooter.styles.ts similarity index 85% rename from src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.styles.ts rename to src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/signTransactionsFooter.styles.ts index 506d768c..d022839e 100644 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.styles.ts +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/signTransactionsFooter.styles.ts @@ -14,5 +14,8 @@ export default { signTransactionsTrimWrapper: 'sign-transactions-trim-wrapper mvx:items-end mvx:leading-none', signTransactionsFooterIdentityUsername: 'sign-transactions-footer-identity-username mvx:flex mvx:items-center mvx:text-base mvx:text-primary', signTransactionsFooterIdentityUsernamePrefix: 'sign-transactions-footer-identity-username-prefix mvx:text-accent', - signTransactionsFooterIdentityCopy: 'sign-transactions-footer-identity-copy mvx:text-primary' + signTransactionsFooterIdentityCopy: 'sign-transactions-footer-identity-copy mvx:text-primary', + signTransactionsButtonTooltip: 'sign-transactions-button-tooltip mvx:absolute mvx:top-0 mvx:h-12 mvx:left-0 mvx:right-0', + signTransactionsActionButton: 'sign-transactions-action-button mvx:text-base! mvx:w-full', + signTransactionsExplorerLinkIcon: 'sign-transactions-explorer-link-icon mvx:text-primary', } satisfies Record; \ No newline at end of file diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.scss b/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.scss deleted file mode 100644 index ff1190ee..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.scss +++ /dev/null @@ -1 +0,0 @@ -// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. \ No newline at end of file diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx b/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx deleted file mode 100644 index 6abcdcf3..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import { Component, Fragment, h, State } from '@stencil/core'; -import classNames from 'classnames'; -import { Icon } from 'common/Icon'; -import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; - -import state from '../../signTransactionsPanelStore'; -import styles from './sign-transactions-footer.styles'; - -const signTransactionsFooterClasses: Record = { - buttonTooltip: 'mvx:absolute mvx:top-0 mvx:h-12 mvx:left-0 mvx:right-0', - actionButton: 'mvx:text-base! mvx:w-full', - explorerLinkIcon: 'mvx:fill-link!', -}; - -@Component({ - tag: 'mvx-sign-transactions-footer', - styleUrl: 'sign-transactions-footer.scss', - shadow: true, -}) -export class SignTransactionsFooter { - @State() awaitsExternalConfirmation: boolean = false; - @State() isWaitingForSignature: boolean = false; - @State() lastCommonData = { ...state.commonData }; - - componentWillLoad() { - this.lastCommonData = { ...state.commonData }; - } - - componentWillRender() { - const currentCommonData = { ...state.commonData }; - const hasChanged = JSON.stringify(currentCommonData) !== JSON.stringify(this.lastCommonData); - - if (hasChanged && this.isWaitingForSignature) { - // Reset the waiting state when data changes - this.isWaitingForSignature = false; - } - - this.lastCommonData = currentCommonData; - } - - private handleSignClick = () => { - if (state.onConfirm) { - this.isWaitingForSignature = true; - state.onConfirm(); - } - }; - - render() { - const { onCancel, onBack, onNext } = state; - const { currentIndex, currentIndexToSign, needsSigning, username, address, explorerLink, providerName } = - state.commonData; - - const isFirstTransaction = currentIndex === 0; - const currentIndexNeedsSigning = currentIndex === currentIndexToSign; - const currentIndexCannotBeSignedYet = currentIndex > currentIndexToSign; - const showForwardAction = currentIndexNeedsSigning || currentIndexCannotBeSignedYet; - const checkButtonText = providerName ? `Check ${providerName}` : 'Check your device'; - - return ( -
-
-
-
- - {isFirstTransaction ? 'Cancel' : 'Back'} - -
- -
- {currentIndexCannotBeSignedYet && ( -
event.stopPropagation()} - > - - } - > - {needsSigning ? ( - - You cannot sign this transaction yet,
please go back and sign consecutively. - - ) : ( - - You cannot confirm this transaction yet,
- please go back and confirm consecutively. - - )} - -
- )} - - - {showForwardAction ? ( - - {this.isWaitingForSignature ? ( - {checkButtonText} - ) : ( - {needsSigning ? 'Sign' : 'Confirm'} - )} - - ) : ( - Next - )} - - {showForwardAction ? ( - - {this.isWaitingForSignature ? ( - - - - ) : ( - - - - )} - - ) : ( - - - - )} - -
-
- -
-
Sign with
- - {username && ( -
- @ - {username} -
- )} - - {!username && address && ( - - )} - - - -
-
-
- ); - } -} diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx index 5122cb5f..75931add 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx @@ -8,6 +8,7 @@ import { EventBus } from 'utils/EventBus'; import type { IOverviewProps, ISignTransactionsPanelData } from './sign-transactions-panel.types'; import { SignEventsEnum, TransactionTabsEnum } from './sign-transactions-panel.types'; import state, { resetState } from './signTransactionsPanelStore'; +import { SignTransactionsFooter } from './components/SignTransactionsFooter/SignTransactionsFooter'; @Component({ tag: 'mvx-sign-transactions-panel', @@ -152,7 +153,7 @@ export class SignTransactionsPanel { )}
- + ); From 41ae84620c44868e83ca6d5d146b4d0a34a2815e Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Thu, 13 Nov 2025 15:03:43 +0200 Subject: [PATCH 03/22] Refactored copy button --- src/common/CopyButton/CopyButton.tsx | 61 +++++++++++++++++ .../copy-button/copy-button.stories.tsx | 0 .../common/copy-button/copy-button.tsx | 23 +++++++ .../copy-button/tests/copy-button.spec.ts | 13 ++-- .../SignTransactionsFooter.tsx | 3 +- .../visual/copy-button/copy-button.tsx | 68 ------------------- .../tests/data-with-explorer-link.spec.ts | 2 +- 7 files changed, 94 insertions(+), 76 deletions(-) create mode 100644 src/common/CopyButton/CopyButton.tsx rename src/components/{visual => common}/copy-button/copy-button.stories.tsx (100%) create mode 100644 src/components/common/copy-button/copy-button.tsx rename src/components/{visual => common}/copy-button/tests/copy-button.spec.ts (93%) delete mode 100644 src/components/visual/copy-button/copy-button.tsx diff --git a/src/common/CopyButton/CopyButton.tsx b/src/common/CopyButton/CopyButton.tsx new file mode 100644 index 00000000..2a55269c --- /dev/null +++ b/src/common/CopyButton/CopyButton.tsx @@ -0,0 +1,61 @@ +import { h } from '@stencil/core'; +import { Icon } from 'common/Icon'; +import { copyToClipboard } from 'utils/copyToClipboard'; + +// prettier-ignore +const styles = { + copyButton: 'copy-button mvx:flex', + copyButtonIcon: 'copy-button-icon mvx:flex mvx:cursor-pointer mvx:justify-center mvx:transition-opacity mvx:duration-200 mvx:ease-in-out mvx:hover:opacity-80', + copyButtonIconCheck: 'copy-button-icon-check mvx:hover:opacity-100! mvx:cursor-default!', +} satisfies Record; + +interface CopyButtonPropsType { + iconClass?: string; + class?: string; + text: string; +} + +let timeoutId: number | null = null; +let isSuccess: boolean = false; + +export function CopyButton({ iconClass, class: className, text }: CopyButtonPropsType) { + + const handleClick = async (event: MouseEvent) => { + const trimmedText = text ? text.trim() : text; + const success = await copyToClipboard(trimmedText); + + event.preventDefault(); + event.stopPropagation(); + + isSuccess = success; + + if (success) { + if (timeoutId) { + clearTimeout(timeoutId); + timeoutId = null; + } + timeoutId = window.setTimeout(() => { + isSuccess = false; + }, 2000); + } + } + + return ( +
+ +
+ ); +} diff --git a/src/components/visual/copy-button/copy-button.stories.tsx b/src/components/common/copy-button/copy-button.stories.tsx similarity index 100% rename from src/components/visual/copy-button/copy-button.stories.tsx rename to src/components/common/copy-button/copy-button.stories.tsx diff --git a/src/components/common/copy-button/copy-button.tsx b/src/components/common/copy-button/copy-button.tsx new file mode 100644 index 00000000..da4db14f --- /dev/null +++ b/src/components/common/copy-button/copy-button.tsx @@ -0,0 +1,23 @@ +import { Component, Prop, h } from '@stencil/core'; +import { CopyButton as CopyButtonComponent } from 'common/CopyButton/CopyButton'; + +@Component({ + tag: 'mvx-copy-button', + shadow: false, +}) +export class CopyButton { + @Prop() iconClass?: string; + @Prop() class?: string; + @Prop() text: string; + + + render() { + return ( + + ); + } +} diff --git a/src/components/visual/copy-button/tests/copy-button.spec.ts b/src/components/common/copy-button/tests/copy-button.spec.ts similarity index 93% rename from src/components/visual/copy-button/tests/copy-button.spec.ts rename to src/components/common/copy-button/tests/copy-button.spec.ts index d10b193b..7422d672 100644 --- a/src/components/visual/copy-button/tests/copy-button.spec.ts +++ b/src/components/common/copy-button/tests/copy-button.spec.ts @@ -47,8 +47,8 @@ describe('CopyButton', () => { }); const copyButton = page.root; - const component = page.rootInstance as CopyButton; - await component.handleClick(new MouseEvent('click') as any); + const element = copyButton.querySelector('div'); + element.click(); await page.waitForChanges(); expect(copyButton).toEqualHtml(` @@ -71,8 +71,8 @@ describe('CopyButton', () => { }); const copyButton = page.root; - const component = page.rootInstance as CopyButton; - await component.handleClick(new MouseEvent('click') as any); + const element = copyButton.querySelector('div'); + element.click(); await page.waitForChanges(); expect(copyButton).toEqualHtml(` @@ -97,8 +97,9 @@ describe('CopyButton', () => { stopPropagation: jest.fn(), }; - const component = page.rootInstance as CopyButton; - await component.handleClick(mockEvent as any); + const element = page.root.querySelector('div'); + element.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true })); + await page.waitForChanges(); expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1); expect(mockEvent.stopPropagation).toHaveBeenCalledTimes(1); diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx index 64ef5ccd..f9161eac 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx @@ -6,6 +6,7 @@ import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; import state from '../../signTransactionsPanelStore'; import styles from './signTransactionsFooter.styles'; import { Trim } from 'common/Trim/Trim'; +import { CopyButton } from 'common/CopyButton/CopyButton'; let isWaitingForSignature: boolean = false; let lastCommonData = { ...state.commonData }; @@ -148,7 +149,7 @@ export function SignTransactionsFooter() { /> )} - + diff --git a/src/components/visual/copy-button/copy-button.tsx b/src/components/visual/copy-button/copy-button.tsx deleted file mode 100644 index 693b696b..00000000 --- a/src/components/visual/copy-button/copy-button.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Component, h, Prop, State } from '@stencil/core'; -import { Icon } from 'common/Icon'; -import { copyToClipboard } from 'utils/copyToClipboard'; - -// prettier-ignore -const styles = { - copyButton: 'copy-button mvx:flex', - copyButtonIcon: 'copy-button-icon mvx:flex mvx:cursor-pointer mvx:justify-center mvx:transition-opacity mvx:duration-200 mvx:ease-in-out mvx:hover:opacity-80', - copyButtonIconCheck: 'copy-button-icon-check mvx:hover:opacity-100! mvx:cursor-default!', -} satisfies Record; - -@Component({ - tag: 'mvx-copy-button', - shadow: false, -}) -export class CopyButton { - private timeoutId: number | null = null; - - @State() isSuccess: boolean = false; - @Prop() iconClass?: string; - @Prop() class?: string; - @Prop() text: string; - - async handleClick(event: MouseEvent) { - const trimmedText = this.text ? this.text.trim() : this.text; - const success = await copyToClipboard(trimmedText); - - const setSuccessStateTo = (newSuccessState: boolean) => { - this.isSuccess = newSuccessState; - }; - - event.preventDefault(); - event.stopPropagation(); - setSuccessStateTo(success); - - if (success) { - this.timeoutId = window.setTimeout(() => setSuccessStateTo(false), 2000); - } - } - - disconnectedCallback() { - if (this.timeoutId) { - clearTimeout(this.timeoutId); - this.timeoutId = null; - } - } - - render() { - return ( -
- -
- ); - } -} diff --git a/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts b/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts index 9c6ecec1..04b0d42f 100644 --- a/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts +++ b/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts @@ -2,7 +2,7 @@ import { newSpecPage } from '@stencil/core/testing'; import { Trim } from 'common/Trim/Trim'; import { ExplorerLink } from '../../../common/explorer-link/explorer-link'; -import { CopyButton } from '../../copy-button/copy-button'; +import { CopyButton } from '../../../common/copy-button/copy-button'; import { Tooltip } from '../../tooltip/tooltip'; import { DataWithExplorerLink } from '../data-with-explorer-link'; From 2bc1e6867e72d6ea00816ab0f030cefa89ffe016 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 17 Nov 2025 11:52:24 +0200 Subject: [PATCH 04/22] Refactored button component --- src/common/Button/Button.tsx | 49 +++++++++++++ .../button => common/Button}/button.types.ts | 0 src/components/common/button/button.scss | 1 + .../button/button.stories.tsx | 2 +- src/components/common/button/button.tsx | 31 +++++++++ src/components/visual/button/button.scss | 69 ------------------- src/components/visual/button/button.tsx | 38 ---------- src/global/tailwind.css | 5 ++ 8 files changed, 87 insertions(+), 108 deletions(-) create mode 100644 src/common/Button/Button.tsx rename src/{components/visual/button => common/Button}/button.types.ts (100%) create mode 100644 src/components/common/button/button.scss rename src/components/{visual => common}/button/button.stories.tsx (95%) create mode 100644 src/components/common/button/button.tsx delete mode 100644 src/components/visual/button/button.scss delete mode 100644 src/components/visual/button/button.tsx diff --git a/src/common/Button/Button.tsx b/src/common/Button/Button.tsx new file mode 100644 index 00000000..d6a8e556 --- /dev/null +++ b/src/common/Button/Button.tsx @@ -0,0 +1,49 @@ +import { h } from '@stencil/core'; +import { ButtonSizeEnum, ButtonVariantEnum } from './button.types'; + +// prettier-ignore +const styles = { + button: 'button mvx:flex mvx:items-center mvx:justify-center mvx:font-bold mvx:leading-none mvx:px-4 mvx:max-h-full mvx:rounded-xl mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:gap-2', + buttonLarge: 'button-large mvx:h-12 mvx:text-base mvx:px-6', + buttonSmall: 'button-small mvx:h-10 mvx:text-xs mvx:rounded-xl', + buttonPrimary: 'button-primary mvx:text-button-primary mvx:bg-button-bg-primary mvx:border mvx:border-button-bg-primary', + buttonSecondary: 'button-secondary mvx:relative mvx:text-button-secondary mvx:border mvx:border-transparent mvx:after:absolute mvx:after:inset-0 mvx:after:rounded-lg mvx:after:opacity-40 mvx:after:transition-all mvx:after:duration-200 mvx:after:ease-in-out mvx:after:bg-button-bg-secondary mvx:after:content-[""] mvx:after:-z-1 mvx:hover:opacity-100 mvx:hover:text-button-primary mvx:hover:after:opacity-100 mvx:hover:after:bg-button-bg-primary', + buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl', + buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75', + buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:text-secondary-text mvx:hover:opacity-100' +} satisfies Record; + +interface ButtonPropsType { + class?: string; + dataTestId?: string; + disabled?: boolean; + size?: `${ButtonSizeEnum}`; + variant?: `${ButtonVariantEnum}`; + onClick?: (event: MouseEvent) => void; +} + +export function Button({ class: className = '', dataTestId = '', disabled = false, size = 'large', variant = 'primary', onClick }: ButtonPropsType, children?: any) { + return ( + + ); + +} diff --git a/src/components/visual/button/button.types.ts b/src/common/Button/button.types.ts similarity index 100% rename from src/components/visual/button/button.types.ts rename to src/common/Button/button.types.ts diff --git a/src/components/common/button/button.scss b/src/components/common/button/button.scss new file mode 100644 index 00000000..ff1190ee --- /dev/null +++ b/src/components/common/button/button.scss @@ -0,0 +1 @@ +// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. \ No newline at end of file diff --git a/src/components/visual/button/button.stories.tsx b/src/components/common/button/button.stories.tsx similarity index 95% rename from src/components/visual/button/button.stories.tsx rename to src/components/common/button/button.stories.tsx index 23a1b35a..6232d65c 100644 --- a/src/components/visual/button/button.stories.tsx +++ b/src/components/common/button/button.stories.tsx @@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@stencil/storybook-plugin'; import capitalize from 'lodash.capitalize'; import type { Button } from './button'; -import { ButtonSizeEnum, ButtonVariantEnum } from './button.types'; +import { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/button.types'; // prettier-ignore const styles = { diff --git a/src/components/common/button/button.tsx b/src/components/common/button/button.tsx new file mode 100644 index 00000000..f9971221 --- /dev/null +++ b/src/components/common/button/button.tsx @@ -0,0 +1,31 @@ +import { Component, h, Prop } from '@stencil/core'; +import type { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/button.types'; +import { Button as ButtonComponent } from 'common/Button/Button'; + +@Component({ + tag: 'mvx-button', + styleUrl: 'button.scss', + shadow: true, +}) + +export class Button { + @Prop() class?: string = ''; + @Prop() dataTestId?: string = ''; + @Prop() disabled?: boolean = false; + @Prop() size?: `${ButtonSizeEnum}` = 'large'; + @Prop() variant?: `${ButtonVariantEnum}` = 'primary'; + + render() { + return ( + + + + ); + } +} diff --git a/src/components/visual/button/button.scss b/src/components/visual/button/button.scss deleted file mode 100644 index 0085031b..00000000 --- a/src/components/visual/button/button.scss +++ /dev/null @@ -1,69 +0,0 @@ -:host { - @apply mvx:flex; - - .button { - @apply mvx:flex mvx:items-center mvx:justify-center mvx:font-bold mvx:leading-none mvx:px-4 mvx:max-h-full; - @apply mvx:rounded-xl mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:gap-2; - - &.large { - @apply mvx:h-12 mvx:text-base mvx:px-6; - } - - &.small { - @apply mvx:h-10 mvx:text-xs mvx:rounded-xl; - } - - &.primary { - color: var(--mvx-button-text-primary); - background-color: var(--mvx-button-bg-primary); - border: 1px solid var(--mvx-button-bg-primary); - } - - &.secondary { - @apply mvx:relative; - color: var(--mvx-button-text-secondary); - border: 1px solid transparent; - - &.small:after { - @apply mvx:rounded-xl; - } - - &:after { - @apply mvx:absolute mvx:inset-0 mvx:rounded-lg mvx:opacity-40 mvx:transition-all mvx:duration-200 mvx:ease-in-out; - background-color: var(--mvx-button-bg-secondary); - content: ''; - z-index: -1; - } - - &:hover { - @apply mvx:opacity-100; - color: var(--mvx-button-text-primary); - - &:after { - @apply mvx:opacity-100; - background-color: var(--mvx-button-bg-primary); - } - } - } - - &.neutral { - color: var(--mvx-neutral-925); - background: var(--mvx-white); - } - - &:hover { - @apply mvx:opacity-75; - } - - &.disabled, - &:disabled { - @apply mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default; - border: 1px solid var(--mvx-text-color-secondary); - color: var(--mvx-text-color-secondary); - - &:hover { - @apply mvx:opacity-100; - } - } - } -} diff --git a/src/components/visual/button/button.tsx b/src/components/visual/button/button.tsx deleted file mode 100644 index 40967113..00000000 --- a/src/components/visual/button/button.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import type { EventEmitter } from '@stencil/core'; -import { Component, Event, h, Prop } from '@stencil/core'; - -import type { ButtonSizeEnum, ButtonVariantEnum } from './button.types'; - -@Component({ - tag: 'mvx-button', - styleUrl: 'button.scss', - shadow: true, -}) -export class Button { - @Event() buttonClick: EventEmitter; - - @Prop() class?: string = ''; - @Prop() dataTestId?: string = ''; - @Prop() disabled?: boolean = false; - @Prop() size?: `${ButtonSizeEnum}` = 'large'; - @Prop() variant?: `${ButtonVariantEnum}` = 'primary'; - - render() { - return ( - - ); - } -} diff --git a/src/global/tailwind.css b/src/global/tailwind.css index 35760edb..5340bf45 100644 --- a/src/global/tailwind.css +++ b/src/global/tailwind.css @@ -29,9 +29,14 @@ --color-transaction-method: var(--mvx-transaction-method); --color-slate-550: var(--mvx-slate-550); --color-gray-200: var(--mvx-gray-200); + --color-neutral-925: var(--mvx-neutral-925); --color-thumb: var(--mvx-scrollbar-thumb); --color-outline-variant: var(--mvx-border-color-secondary); --color-emphasize: var(--mvx-bg-accent-color); + --color-button-primary: var(--mvx-button-text-primary); + --color-button-secondary: var(--mvx-button-text-secondary); + --color-button-bg-primary: var(--mvx-button-bg-primary); + --color-button-bg-secondary: var(--mvx-button-bg-secondary); } @layer utilities { From d59bc269311c591f2bc6712880bb58d2422ec562 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 17 Nov 2025 15:39:44 +0200 Subject: [PATCH 05/22] Refactored tooltip component --- src/common/Button/Button.tsx | 2 +- src/common/Tooltip/Tooltip.tsx | 87 +++++++++++++++++++ src/components.d.ts | 4 +- src/components/common/button/button.tsx | 8 +- src/components/common/tooltip/tooltip.scss | 1 + src/components/common/tooltip/tooltip.tsx | 38 ++++++++ .../SignTransactionsFooter.tsx | 28 +++--- .../sign-transactions-panel.tsx | 23 ++++- .../tests/data-with-explorer-link.spec.ts | 2 +- src/components/visual/tooltip/tooltip.scss | 40 --------- src/components/visual/tooltip/tooltip.tsx | 87 ------------------- 11 files changed, 176 insertions(+), 144 deletions(-) create mode 100644 src/common/Tooltip/Tooltip.tsx create mode 100644 src/components/common/tooltip/tooltip.scss create mode 100644 src/components/common/tooltip/tooltip.tsx delete mode 100644 src/components/visual/tooltip/tooltip.scss delete mode 100644 src/components/visual/tooltip/tooltip.tsx diff --git a/src/common/Button/Button.tsx b/src/common/Button/Button.tsx index d6a8e556..506d2bb1 100644 --- a/src/common/Button/Button.tsx +++ b/src/common/Button/Button.tsx @@ -10,7 +10,7 @@ const styles = { buttonSecondary: 'button-secondary mvx:relative mvx:text-button-secondary mvx:border mvx:border-transparent mvx:after:absolute mvx:after:inset-0 mvx:after:rounded-lg mvx:after:opacity-40 mvx:after:transition-all mvx:after:duration-200 mvx:after:ease-in-out mvx:after:bg-button-bg-secondary mvx:after:content-[""] mvx:after:-z-1 mvx:hover:opacity-100 mvx:hover:text-button-primary mvx:hover:after:opacity-100 mvx:hover:after:bg-button-bg-primary', buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl', buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75', - buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:text-secondary-text mvx:hover:opacity-100' + buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100' } satisfies Record; interface ButtonPropsType { diff --git a/src/common/Tooltip/Tooltip.tsx b/src/common/Tooltip/Tooltip.tsx new file mode 100644 index 00000000..6a7b85b8 --- /dev/null +++ b/src/common/Tooltip/Tooltip.tsx @@ -0,0 +1,87 @@ +import { h } from '@stencil/core'; + +// prettier-ignore +const styles = { + tooltip: 'tooltip mvx:flex mvx:relative', + tooltipContentWrapper: 'tooltip-content-wrapper mvx:left-1/2 mvx:absolute mvx:z-1 mvx:transform mvx:-translate-x-1/2', + tooltipContent: 'tooltip-content mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none mvx:bg-surface mvx:border-outline-variant mvx:border mvx:text-primary mvx:after:left-1/2 mvx:after:origin-center mvx:after:w-2 mvx:after:h-2 mvx:after:absolute mvx:after:border mvx:after:border-outline-variant mvx:after:bg-surface mvx:after:translate-x-[calc(50%-8px)] mvx:after:-rotate-[45deg] mvx:after:content-[""]', + tooltipContentTop: 'tooltip-content-top mvx:after:border-t-0 mvx:after:border-r-0 mvx:after:-bottom-1', + tooltipContentBottom: 'tooltip-content-bottom mvx:after:border-b-0 mvx:after:border-l-0 mvx:after:-top-1' +} satisfies Record; + +interface TooltipPropsType { + position?: 'top' | 'bottom'; + triggerOnClick?: boolean; + trigger: HTMLElement; + class?: string; + isTooltipVisible?: boolean; + onVisibilityChange?: (isTooltipVisible: boolean) => void; +} + +export function Tooltip({ position = 'top', triggerOnClick = false, trigger, class: className, onVisibilityChange, isTooltipVisible = false }: TooltipPropsType, children?: any) { + const setTooltipVisible = (isTooltipVisible: boolean) => { + onVisibilityChange?.(isTooltipVisible); + } + + const handleEllipsisClick = (event: MouseEvent) => { + if (!triggerOnClick) { + return; + } + + event.preventDefault(); + setTooltipVisible(!isTooltipVisible); + } + + const handleFocusOut = (event: FocusEvent) => { + const relatedTarget = event.relatedTarget as Node; + const currentTarget = event.currentTarget as HTMLElement; + + if (!currentTarget.contains(relatedTarget)) { + setTooltipVisible(false); + } + } + + const handleMouseEvent = (isTooltipVisible: boolean) => { + if (triggerOnClick) { + return; + } + + return (event: MouseEvent) => { + event.preventDefault(); + setTooltipVisible(isTooltipVisible); + }; + } + + return ( +
+ {isTooltipVisible && ( +
+
event.stopPropagation()} + > + {children} +
+
+ )} + + {trigger} +
+ ); +} \ No newline at end of file diff --git a/src/components.d.ts b/src/components.d.ts index f763ea63..ae6b2896 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -6,7 +6,7 @@ */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { IAddressTableData } from "./types/address-table.types"; -import { ButtonSizeEnum, ButtonVariantEnum } from "./components/visual/button/button.types"; +import { ButtonSizeEnum, ButtonVariantEnum } from "./common/Button/button.types"; import { CustomToastType, IComponentToast, ISimpleToast } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; import { IConfirmScreenData, IConnectScreenData, ILedgerConnectPanelData } from "./components/functional/ledger-connect/ledger-connect.types"; import { IEventBus } from "./utils/EventBus"; @@ -20,7 +20,7 @@ import { TransactionRowType } from "./components/controlled/transactions-table/t import { IProviderBase } from "./types/provider.types"; import { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from "./components.d"; export { IAddressTableData } from "./types/address-table.types"; -export { ButtonSizeEnum, ButtonVariantEnum } from "./components/visual/button/button.types"; +export { ButtonSizeEnum, ButtonVariantEnum } from "./common/Button/button.types"; export { CustomToastType, IComponentToast, ISimpleToast } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; export { IConfirmScreenData, IConnectScreenData, ILedgerConnectPanelData } from "./components/functional/ledger-connect/ledger-connect.types"; export { IEventBus } from "./utils/EventBus"; diff --git a/src/components/common/button/button.tsx b/src/components/common/button/button.tsx index f9971221..ebcc07aa 100644 --- a/src/components/common/button/button.tsx +++ b/src/components/common/button/button.tsx @@ -1,5 +1,8 @@ -import { Component, h, Prop } from '@stencil/core'; +import type { EventEmitter } from '@stencil/core'; +import { Component, Event, h, Prop } from '@stencil/core'; + import type { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/button.types'; + import { Button as ButtonComponent } from 'common/Button/Button'; @Component({ @@ -7,8 +10,9 @@ import { Button as ButtonComponent } from 'common/Button/Button'; styleUrl: 'button.scss', shadow: true, }) - export class Button { + @Event() buttonClick: EventEmitter; + @Prop() class?: string = ''; @Prop() dataTestId?: string = ''; @Prop() disabled?: boolean = false; diff --git a/src/components/common/tooltip/tooltip.scss b/src/components/common/tooltip/tooltip.scss new file mode 100644 index 00000000..ff1190ee --- /dev/null +++ b/src/components/common/tooltip/tooltip.scss @@ -0,0 +1 @@ +// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. \ No newline at end of file diff --git a/src/components/common/tooltip/tooltip.tsx b/src/components/common/tooltip/tooltip.tsx new file mode 100644 index 00000000..09b19046 --- /dev/null +++ b/src/components/common/tooltip/tooltip.tsx @@ -0,0 +1,38 @@ +import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core'; +import { Tooltip as TooltipComponent } from 'common/Tooltip/Tooltip'; + +@Component({ + tag: 'mvx-tooltip', + styleUrl: 'tooltip.scss', + shadow: true, +}) +export class Tooltip { + @Prop() position: 'top' | 'bottom' = 'top'; + @Prop() triggerOnClick?: boolean = false; + @Prop() trigger: HTMLElement; + @Prop() class?: string; + + @Event() triggerRender: EventEmitter; + @State() private isVisible: boolean = false; + + private handleVisibilityChange = (isVisible: boolean) => { + this.triggerRender.emit(isVisible); + this.isVisible = isVisible; + }; + + + render() { + return ( + + + + ); + } +} diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx index f9161eac..90a72659 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx @@ -5,13 +5,19 @@ import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; import state from '../../signTransactionsPanelStore'; import styles from './signTransactionsFooter.styles'; -import { Trim } from 'common/Trim/Trim'; import { CopyButton } from 'common/CopyButton/CopyButton'; +import { Tooltip } from 'common/Tooltip/Tooltip'; +import { Button } from 'common/Button/Button'; let isWaitingForSignature: boolean = false; let lastCommonData = { ...state.commonData }; -export function SignTransactionsFooter() { +interface SignTransactionsFooterPropsType { + tooltipVisible?: boolean; + onTooltipVisibilityChange?: (visible: boolean) => void; +} + +export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChange }: SignTransactionsFooterPropsType) { const currentCommonData = { ...state.commonData }; const hasChanged = JSON.stringify(currentCommonData) !== JSON.stringify(lastCommonData); @@ -44,15 +50,15 @@ export function SignTransactionsFooter() {
- {isFirstTransaction ? 'Cancel' : 'Back'} - +
@@ -61,7 +67,9 @@ export function SignTransactionsFooter() { class={styles.signTransactionsFooterButtonTooltipWrapper} onClick={(event: MouseEvent) => event.stopPropagation()} > - )} - +
)} - )} - +
@@ -142,7 +150,7 @@ export function SignTransactionsFooter() { )} {!username && address && ( - ; + @Component({ tag: 'mvx-sign-transactions-panel', styleUrl: 'sign-transactions-panel.scss', @@ -28,6 +40,7 @@ export class SignTransactionsPanel { @State() isOpen: boolean = false; @State() activeTab: TransactionTabsEnum = TransactionTabsEnum.overview; + @State() private isFooterTooltipVisible: boolean = false; @Method() async getEventBus() { await this.connectionMonitor.waitForConnection(); @@ -115,7 +128,12 @@ export class SignTransactionsPanel { }; } + private handleIsFooterTooltipVisible = (isTooltipVisible: boolean) => { + this.isFooterTooltipVisible = isTooltipVisible; + }; + render() { + console.log(styles) //TODO: remove this const transactionTabs = Object.values(TransactionTabsEnum); const { commonData } = state; @@ -153,7 +171,10 @@ export class SignTransactionsPanel { )} - + ); diff --git a/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts b/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts index 04b0d42f..f8ba557c 100644 --- a/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts +++ b/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts @@ -3,7 +3,7 @@ import { Trim } from 'common/Trim/Trim'; import { ExplorerLink } from '../../../common/explorer-link/explorer-link'; import { CopyButton } from '../../../common/copy-button/copy-button'; -import { Tooltip } from '../../tooltip/tooltip'; +import { Tooltip } from '../../../common/tooltip/tooltip'; import { DataWithExplorerLink } from '../data-with-explorer-link'; describe('DataWithExplorerLink', () => { diff --git a/src/components/visual/tooltip/tooltip.scss b/src/components/visual/tooltip/tooltip.scss deleted file mode 100644 index 4ecce9e3..00000000 --- a/src/components/visual/tooltip/tooltip.scss +++ /dev/null @@ -1,40 +0,0 @@ -.tooltip { - @apply mvx:flex mvx:relative; - - .tooltip-content-wrapper { - @apply mvx:left-1/2 mvx:absolute mvx:z-1 mvx:transform mvx:-translate-x-1/2; - - &.top { - bottom: calc(100% + 16px); - } - - &.bottom { - top: calc(100% + 16px); - } - - .tooltip-content { - @apply mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none; - background: var(--mvx-bg-color-primary); - border: 1px solid var(--mvx-border-color-secondary); - color: var(--mvx-text-color-primary); - - &:after { - @apply mvx:left-1/2 mvx:origin-center mvx:w-2 mvx:h-2 mvx:absolute; - border: 1px solid var(--mvx-border-color-secondary); - background-color: var(--mvx-bg-color-primary); - content: ''; - transform: translateX(calc(50% - 8px)) rotateZ(calc(45deg * -1)); - } - - &.top:after { - @apply mvx:border-t-0 mvx:border-r-0; - bottom: calc(4px * -1); - } - - &.bottom:after { - @apply mvx:border-b-0 mvx:border-l-0; - top: calc(4px * -1); - } - } - } -} diff --git a/src/components/visual/tooltip/tooltip.tsx b/src/components/visual/tooltip/tooltip.tsx deleted file mode 100644 index dd2d3376..00000000 --- a/src/components/visual/tooltip/tooltip.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import type { EventEmitter } from '@stencil/core'; -import { Component, Event, h, Prop, State } from '@stencil/core'; - -// prettier-ignore -const styles = { - tooltip: 'tooltip mvx:flex mvx:relative', -} satisfies Record; - -@Component({ - tag: 'mvx-tooltip', - styleUrl: 'tooltip.scss', - shadow: true, -}) -export class Tooltip { - @Event() triggerRender: EventEmitter; - @State() isTooltipVisible: boolean = false; - - @Prop() position: 'top' | 'bottom' = 'top'; - @Prop() triggerOnClick?: boolean = false; - @Prop() trigger: HTMLElement; - @Prop() class?: string; - - constructor() { - this.handleEllipsisClick = this.handleEllipsisClick.bind(this); - this.handleFocusOut = this.handleFocusOut.bind(this); - } - - private setTooltipVisible(isTooltipVisible: boolean) { - this.isTooltipVisible = isTooltipVisible; - this.triggerRender.emit(this.isTooltipVisible); - } - - private handleEllipsisClick(event: MouseEvent) { - if (!this.triggerOnClick) { - return; - } - - event.preventDefault(); - this.setTooltipVisible(!this.isTooltipVisible); - } - - private handleFocusOut(event: FocusEvent) { - const relatedTarget = event.relatedTarget as Node; - const currentTarget = event.currentTarget as HTMLElement; - - if (!currentTarget.contains(relatedTarget)) { - this.setTooltipVisible(false); - } - } - - private handleMouseEvent(isTooltipVisible: boolean) { - if (this.triggerOnClick) { - return; - } - - return (event: MouseEvent) => { - event.preventDefault(); - this.setTooltipVisible(isTooltipVisible); - }; - } - - render() { - return ( -
- {this.isTooltipVisible && ( -
-
event.stopPropagation()} - > - -
-
- )} - - {this.trigger} -
- ); - } -} From 19d62af479096a2c4227d2c139cbdc1881b22466 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 17 Nov 2025 17:03:06 +0200 Subject: [PATCH 06/22] Refactored spinner icon component --- src/common/Icon/Icon.tsx | 4 ++++ .../Icon/components/SpinnerIcon/SpinnerIcon.tsx | 16 ++++++++++++++++ src/common/Icon/components/SpinnerIcon/index.ts | 1 + src/common/Icon/icon.types.ts | 3 ++- .../SignTransactionsFooter.tsx | 2 +- .../sign-transactions-panel.tsx | 2 +- src/global/tailwind.css | 10 ++++++++++ 7 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 src/common/Icon/components/SpinnerIcon/SpinnerIcon.tsx create mode 100644 src/common/Icon/components/SpinnerIcon/index.ts diff --git a/src/common/Icon/Icon.tsx b/src/common/Icon/Icon.tsx index 2a431186..26d64a74 100644 --- a/src/common/Icon/Icon.tsx +++ b/src/common/Icon/Icon.tsx @@ -24,6 +24,7 @@ import { LayersIcon } from './components/LayersIcon'; import { LockIcon } from './components/LockIcon'; import { PencilIcon } from './components/PencilIcon'; import { TriangularWarningIcon } from './components/TriangularWarningIcon'; +import { SpinnerIcon } from './components/SpinnerIcon'; import type { IconPropsType } from './icon.types'; export const Icon = ({ name, ...properties }: IconPropsType) => { @@ -104,6 +105,9 @@ export const Icon = ({ name, ...properties }: IconPropsType) => { case 'arrows-rotate': return ; + case 'spinner': + return + default: console.error(`No data for the ${name} icon.`); return null; diff --git a/src/common/Icon/components/SpinnerIcon/SpinnerIcon.tsx b/src/common/Icon/components/SpinnerIcon/SpinnerIcon.tsx new file mode 100644 index 00000000..0c6ee5ac --- /dev/null +++ b/src/common/Icon/components/SpinnerIcon/SpinnerIcon.tsx @@ -0,0 +1,16 @@ +import { h } from '@stencil/core'; + +const styles = { + spinnerIcon: 'spinner-icon mvx:w-4 mvx:h-4 mvx:fill-secondary-text mvx:animate-spinner' +} satisfies Record; + +export const SpinnerIcon = ({ class: className }: { class?: string }) => ( + + + +); + + diff --git a/src/common/Icon/components/SpinnerIcon/index.ts b/src/common/Icon/components/SpinnerIcon/index.ts new file mode 100644 index 00000000..2a092c9d --- /dev/null +++ b/src/common/Icon/components/SpinnerIcon/index.ts @@ -0,0 +1 @@ +export * from './SpinnerIcon'; \ No newline at end of file diff --git a/src/common/Icon/icon.types.ts b/src/common/Icon/icon.types.ts index 34c5f645..4f8c4fb3 100644 --- a/src/common/Icon/icon.types.ts +++ b/src/common/Icon/icon.types.ts @@ -24,7 +24,8 @@ export enum IconNamesEnum { circleCheck = 'circle-check', circleInfo = 'circle-info', coins = 'coins', - arrowsRotate = 'arrows-rotate' + arrowsRotate = 'arrows-rotate', + spinner = 'spinner' } export type IconPropsType = JSXBase.IntrinsicElements['svg'] & { diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx index 90a72659..8ffdb67b 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx @@ -119,7 +119,7 @@ export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChan > {isWaitingForSignature ? ( - + ) : ( diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx index 4474cca6..4536b776 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx @@ -19,7 +19,7 @@ const styles = { buttonSecondary: 'button-secondary mvx:relative mvx:text-button-secondary mvx:border mvx:border-transparent mvx:after:absolute mvx:after:inset-0 mvx:after:rounded-lg mvx:after:opacity-40 mvx:after:transition-all mvx:after:duration-200 mvx:after:ease-in-out mvx:after:bg-button-bg-secondary mvx:after:content-[""] mvx:after:-z-1 mvx:hover:opacity-100 mvx:hover:text-button-primary mvx:hover:after:opacity-100 mvx:hover:after:bg-button-bg-primary', buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl', buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75', - buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:text-secondary-text mvx:hover:opacity-100' + buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100' } satisfies Record; @Component({ diff --git a/src/global/tailwind.css b/src/global/tailwind.css index 5340bf45..66eb3fb9 100644 --- a/src/global/tailwind.css +++ b/src/global/tailwind.css @@ -88,4 +88,14 @@ letter-spacing: -0.001em; } } + + @keyframes SpinnerAnimation { + to { + transform: rotate(360deg); + } + } + + .mvx\:animate-spinner { + animation: SpinnerAnimation 3000ms linear infinite; + } } \ No newline at end of file From 3ba682dcc5fd5c5e476d01da7371d9f338d89dce Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 17 Nov 2025 17:20:55 +0200 Subject: [PATCH 07/22] Refactored arrow right component --- src/common/Icon/Icon.tsx | 4 ++++ .../components/ArrowRightIcon/ArrowRightIcon.tsx | 13 +++++++++++++ src/common/Icon/components/ArrowRightIcon/index.ts | 1 + src/common/Icon/icon.types.ts | 3 ++- .../SignTransactionsFooter.tsx | 2 +- 5 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 src/common/Icon/components/ArrowRightIcon/ArrowRightIcon.tsx create mode 100644 src/common/Icon/components/ArrowRightIcon/index.ts diff --git a/src/common/Icon/Icon.tsx b/src/common/Icon/Icon.tsx index 26d64a74..84ffa060 100644 --- a/src/common/Icon/Icon.tsx +++ b/src/common/Icon/Icon.tsx @@ -26,6 +26,7 @@ import { PencilIcon } from './components/PencilIcon'; import { TriangularWarningIcon } from './components/TriangularWarningIcon'; import { SpinnerIcon } from './components/SpinnerIcon'; import type { IconPropsType } from './icon.types'; +import { ArrowRightIcon } from './components/ArrowRightIcon'; export const Icon = ({ name, ...properties }: IconPropsType) => { if (!name) { @@ -108,6 +109,9 @@ export const Icon = ({ name, ...properties }: IconPropsType) => { case 'spinner': return + case 'arrow-right': + return + default: console.error(`No data for the ${name} icon.`); return null; diff --git a/src/common/Icon/components/ArrowRightIcon/ArrowRightIcon.tsx b/src/common/Icon/components/ArrowRightIcon/ArrowRightIcon.tsx new file mode 100644 index 00000000..c6a358be --- /dev/null +++ b/src/common/Icon/components/ArrowRightIcon/ArrowRightIcon.tsx @@ -0,0 +1,13 @@ +import { h } from '@stencil/core'; + +const styles = { + arrowRightIcon: 'arrow-right-icon mvx:w-4 mvx:h-4 mvx:text-inherit' +} satisfies Record; + +export const ArrowRightIcon = ({ class: className }: { class?: string }) => ( + + + +); + + diff --git a/src/common/Icon/components/ArrowRightIcon/index.ts b/src/common/Icon/components/ArrowRightIcon/index.ts new file mode 100644 index 00000000..190655e7 --- /dev/null +++ b/src/common/Icon/components/ArrowRightIcon/index.ts @@ -0,0 +1 @@ +export * from './ArrowRightIcon'; \ No newline at end of file diff --git a/src/common/Icon/icon.types.ts b/src/common/Icon/icon.types.ts index 4f8c4fb3..c699f9a0 100644 --- a/src/common/Icon/icon.types.ts +++ b/src/common/Icon/icon.types.ts @@ -25,7 +25,8 @@ export enum IconNamesEnum { circleInfo = 'circle-info', coins = 'coins', arrowsRotate = 'arrows-rotate', - spinner = 'spinner' + spinner = 'spinner', + arrowRight = 'arrow-right' } export type IconPropsType = JSXBase.IntrinsicElements['svg'] & { diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx index 8ffdb67b..84c73d60 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx @@ -129,7 +129,7 @@ export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChan ) : ( - + )} From 02d264c36eb505ec1196ed8ac494a4241cba4d57 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 18 Nov 2025 14:24:05 +0200 Subject: [PATCH 08/22] Updated copy button --- src/common/CopyButton/CopyButton.tsx | 35 ++++--------------- src/common/CopyButton/CopyButtonHandler.ts | 26 ++++++++++++++ .../common/copy-button/copy-button.tsx | 9 ++++- .../SignTransactionsFooter.tsx | 9 +++-- .../sign-transactions-panel.tsx | 10 +++++- 5 files changed, 55 insertions(+), 34 deletions(-) create mode 100644 src/common/CopyButton/CopyButtonHandler.ts diff --git a/src/common/CopyButton/CopyButton.tsx b/src/common/CopyButton/CopyButton.tsx index 2a55269c..9880c6ee 100644 --- a/src/common/CopyButton/CopyButton.tsx +++ b/src/common/CopyButton/CopyButton.tsx @@ -1,6 +1,5 @@ import { h } from '@stencil/core'; import { Icon } from 'common/Icon'; -import { copyToClipboard } from 'utils/copyToClipboard'; // prettier-ignore const styles = { @@ -13,46 +12,24 @@ interface CopyButtonPropsType { iconClass?: string; class?: string; text: string; + isSuccessOnCopy?: boolean; + handleCopyButtonClick?: (event: MouseEvent) => void; } -let timeoutId: number | null = null; -let isSuccess: boolean = false; - -export function CopyButton({ iconClass, class: className, text }: CopyButtonPropsType) { - - const handleClick = async (event: MouseEvent) => { - const trimmedText = text ? text.trim() : text; - const success = await copyToClipboard(trimmedText); - - event.preventDefault(); - event.stopPropagation(); - - isSuccess = success; - - if (success) { - if (timeoutId) { - clearTimeout(timeoutId); - timeoutId = null; - } - timeoutId = window.setTimeout(() => { - isSuccess = false; - }, 2000); - } - } - +export function CopyButton({ iconClass, class: className, isSuccessOnCopy, handleCopyButtonClick }: CopyButtonPropsType) { return (
handleCopyButtonClick?.(event)} class={{ [styles.copyButton]: true, [className]: Boolean(className), }} > diff --git a/src/common/CopyButton/CopyButtonHandler.ts b/src/common/CopyButton/CopyButtonHandler.ts new file mode 100644 index 00000000..97f8a3bc --- /dev/null +++ b/src/common/CopyButton/CopyButtonHandler.ts @@ -0,0 +1,26 @@ +import { copyToClipboard } from 'utils/copyToClipboard'; + +interface CopyHandlerOptions { + onSuccessChange?: (isSuccess: boolean) => void; +} + +export function CopyButtonHandler({ onSuccessChange }: CopyHandlerOptions) { + let timeoutId: number | null = null; + + return async (event: MouseEvent, text?: string) => { + const trimmedText = text ? text.trim() : text; + const success = await copyToClipboard(trimmedText); + + event.preventDefault(); + event.stopPropagation(); + + if (onSuccessChange) { + onSuccessChange(success); + + window.clearTimeout(timeoutId); + if (success) { + timeoutId = window.setTimeout(() => onSuccessChange(false), 2000); + } + } + }; +} \ No newline at end of file diff --git a/src/components/common/copy-button/copy-button.tsx b/src/components/common/copy-button/copy-button.tsx index da4db14f..a48c177d 100644 --- a/src/components/common/copy-button/copy-button.tsx +++ b/src/components/common/copy-button/copy-button.tsx @@ -1,15 +1,20 @@ -import { Component, Prop, h } from '@stencil/core'; +import { Component, Prop, State, h } from '@stencil/core'; import { CopyButton as CopyButtonComponent } from 'common/CopyButton/CopyButton'; +import { CopyButtonHandler } from 'common/CopyButton/CopyButtonHandler'; @Component({ tag: 'mvx-copy-button', shadow: false, }) export class CopyButton { + @State() isSuccess: boolean = false; @Prop() iconClass?: string; @Prop() class?: string; @Prop() text: string; + private handleClick = CopyButtonHandler({ + onSuccessChange: (isSuccess) => (this.isSuccess = isSuccess), + }); render() { return ( @@ -17,6 +22,8 @@ export class CopyButton { iconClass={this.iconClass} class={this.class} text={this.text} + isSuccessOnCopy={this.isSuccess} + handleCopyButtonClick={this.handleClick} /> ); } diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx index 84c73d60..cef756f8 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx @@ -8,6 +8,7 @@ import styles from './signTransactionsFooter.styles'; import { CopyButton } from 'common/CopyButton/CopyButton'; import { Tooltip } from 'common/Tooltip/Tooltip'; import { Button } from 'common/Button/Button'; +import { ExplorerLink } from 'common/ExplorerLink/ExplorerLink'; let isWaitingForSignature: boolean = false; let lastCommonData = { ...state.commonData }; @@ -15,9 +16,11 @@ let lastCommonData = { ...state.commonData }; interface SignTransactionsFooterPropsType { tooltipVisible?: boolean; onTooltipVisibilityChange?: (visible: boolean) => void; + isSuccessOnCopy?: boolean; + handleCopyButtonClick?: (event: MouseEvent, text?: string) => void; } -export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChange }: SignTransactionsFooterPropsType) { +export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChange, isSuccessOnCopy, handleCopyButtonClick }: SignTransactionsFooterPropsType) { const currentCommonData = { ...state.commonData }; const hasChanged = JSON.stringify(currentCommonData) !== JSON.stringify(lastCommonData); @@ -157,8 +160,8 @@ export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChan /> )} - - + handleCopyButtonClick?.(event, username ?? address)} /> +
diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx index 4536b776..0fdada58 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx @@ -9,6 +9,7 @@ import type { IOverviewProps, ISignTransactionsPanelData } from './sign-transact import { SignEventsEnum, TransactionTabsEnum } from './sign-transactions-panel.types'; import state, { resetState } from './signTransactionsPanelStore'; import { SignTransactionsFooter } from './components/SignTransactionsFooter/SignTransactionsFooter'; +import { CopyButtonHandler } from 'common/CopyButton/CopyButtonHandler'; // prettier-ignore const styles = { @@ -40,7 +41,8 @@ export class SignTransactionsPanel { @State() isOpen: boolean = false; @State() activeTab: TransactionTabsEnum = TransactionTabsEnum.overview; - @State() private isFooterTooltipVisible: boolean = false; + @State() isFooterTooltipVisible: boolean = false; + @State() isSuccessOnCopy: boolean = false; @Method() async getEventBus() { await this.connectionMonitor.waitForConnection(); @@ -132,6 +134,10 @@ export class SignTransactionsPanel { this.isFooterTooltipVisible = isTooltipVisible; }; + private handleCopyButtonClick = CopyButtonHandler({ + onSuccessChange: (isSuccess) => (this.isSuccessOnCopy = isSuccess), + }); + render() { console.log(styles) //TODO: remove this const transactionTabs = Object.values(TransactionTabsEnum); @@ -174,6 +180,8 @@ export class SignTransactionsPanel { From 261b855b32fc6341989221445e762feb6c874e7d Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Wed, 19 Nov 2025 11:12:48 +0200 Subject: [PATCH 09/22] Updated styles --- .../SignTransactionsFooter.tsx | 3 +- .../signTransactionsFooter.styles.ts | 4 +- .../sign-transactions-panel.scss | 38 +++++++++++++++++++ src/global/tailwind.css | 3 ++ 4 files changed, 45 insertions(+), 3 deletions(-) diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx index cef756f8..53450d8e 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx @@ -9,6 +9,7 @@ import { CopyButton } from 'common/CopyButton/CopyButton'; import { Tooltip } from 'common/Tooltip/Tooltip'; import { Button } from 'common/Button/Button'; import { ExplorerLink } from 'common/ExplorerLink/ExplorerLink'; +import { Trim } from 'common/Trim/Trim'; let isWaitingForSignature: boolean = false; let lastCommonData = { ...state.commonData }; @@ -153,7 +154,7 @@ export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChan )} {!username && address && ( - Date: Wed, 19 Nov 2025 16:35:15 +0200 Subject: [PATCH 10/22] Refactored sign transactions overview --- src/components.d.ts | 43 ---- .../SignTransactionsOverview.tsx | 115 +++++++++ .../signTransactionsOverview.styles.ts | 33 +++ .../sign-transactions-overview.scss | 224 ------------------ .../sign-transactions-overview.tsx | 115 --------- .../handleAmountResize/handleAmountResize.ts | 2 +- .../sign-transactions-panel.tsx | 3 +- 7 files changed, 151 insertions(+), 384 deletions(-) create mode 100644 src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx create mode 100644 src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/signTransactionsOverview.styles.ts delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-overview/sign-transactions-overview.scss delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-overview/sign-transactions-overview.tsx diff --git a/src/components.d.ts b/src/components.d.ts index ae6b2896..a425cbc0 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -277,23 +277,6 @@ export namespace Components { } interface MvxSignTransactionsHeader { } - interface MvxSignTransactionsOverview { - "action": string; - "amount": string; - "identifier": string; - "interactor": string; - "interactorIconUrl": string; - /** - * @default false - */ - "isApp": boolean; - /** - * @default '~$0.00078' - */ - "networkFee": string; - "tokenIconUrl": string; - "usdValue": string; - } interface MvxSignTransactionsPanel { "closeWithAnimation": () => Promise; "getEventBus": () => Promise; @@ -858,12 +841,6 @@ declare global { prototype: HTMLMvxSignTransactionsHeaderElement; new (): HTMLMvxSignTransactionsHeaderElement; }; - interface HTMLMvxSignTransactionsOverviewElement extends Components.MvxSignTransactionsOverview, HTMLStencilElement { - } - var HTMLMvxSignTransactionsOverviewElement: { - prototype: HTMLMvxSignTransactionsOverviewElement; - new (): HTMLMvxSignTransactionsOverviewElement; - }; interface HTMLMvxSignTransactionsPanelElement extends Components.MvxSignTransactionsPanel, HTMLStencilElement { } var HTMLMvxSignTransactionsPanelElement: { @@ -1104,7 +1081,6 @@ declare global { "mvx-sign-transactions-advanced-data": HTMLMvxSignTransactionsAdvancedDataElement; "mvx-sign-transactions-advanced-data-decode": HTMLMvxSignTransactionsAdvancedDataDecodeElement; "mvx-sign-transactions-header": HTMLMvxSignTransactionsHeaderElement; - "mvx-sign-transactions-overview": HTMLMvxSignTransactionsOverviewElement; "mvx-sign-transactions-panel": HTMLMvxSignTransactionsPanelElement; "mvx-simple-toast": HTMLMvxSimpleToastElement; "mvx-spinner-icon": HTMLMvxSpinnerIconElement; @@ -1383,23 +1359,6 @@ declare namespace LocalJSX { } interface MvxSignTransactionsHeader { } - interface MvxSignTransactionsOverview { - "action"?: string; - "amount"?: string; - "identifier"?: string; - "interactor"?: string; - "interactorIconUrl"?: string; - /** - * @default false - */ - "isApp"?: boolean; - /** - * @default '~$0.00078' - */ - "networkFee"?: string; - "tokenIconUrl"?: string; - "usdValue"?: string; - } interface MvxSignTransactionsPanel { } interface MvxSimpleToast { @@ -1587,7 +1546,6 @@ declare namespace LocalJSX { "mvx-sign-transactions-advanced-data": MvxSignTransactionsAdvancedData; "mvx-sign-transactions-advanced-data-decode": MvxSignTransactionsAdvancedDataDecode; "mvx-sign-transactions-header": MvxSignTransactionsHeader; - "mvx-sign-transactions-overview": MvxSignTransactionsOverview; "mvx-sign-transactions-panel": MvxSignTransactionsPanel; "mvx-simple-toast": MvxSimpleToast; "mvx-spinner-icon": MvxSpinnerIcon; @@ -1658,7 +1616,6 @@ declare module "@stencil/core" { "mvx-sign-transactions-advanced-data": LocalJSX.MvxSignTransactionsAdvancedData & JSXBase.HTMLAttributes; "mvx-sign-transactions-advanced-data-decode": LocalJSX.MvxSignTransactionsAdvancedDataDecode & JSXBase.HTMLAttributes; "mvx-sign-transactions-header": LocalJSX.MvxSignTransactionsHeader & JSXBase.HTMLAttributes; - "mvx-sign-transactions-overview": LocalJSX.MvxSignTransactionsOverview & JSXBase.HTMLAttributes; "mvx-sign-transactions-panel": LocalJSX.MvxSignTransactionsPanel & JSXBase.HTMLAttributes; "mvx-simple-toast": LocalJSX.MvxSimpleToast & JSXBase.HTMLAttributes; "mvx-spinner-icon": LocalJSX.MvxSpinnerIcon & JSXBase.HTMLAttributes; diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx new file mode 100644 index 00000000..2cc83207 --- /dev/null +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx @@ -0,0 +1,115 @@ +import { h } from '@stencil/core'; +import { Icon } from 'common/Icon'; +import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; + +import { handleAmountResize } from '../../helpers'; +import classNames from 'classnames'; + +import styles from './signTransactionsOverview.styles'; +import { Trim } from 'common/Trim/Trim'; + +interface SignTransactionsOverviewPropsType { + identifier: string; + usdValue: string; + amount: string; + tokenIconUrl: string; + interactor: string; + interactorIconUrl: string; + action: string; + networkFee: string; + isApp: boolean; +} + +export function SignTransactionsOverview({ identifier, usdValue, amount, tokenIconUrl, interactor, interactorIconUrl, action, networkFee = '~$0.00078', isApp = false }: SignTransactionsOverviewPropsType) { + const setAmountValueRef = (el?: HTMLElement) => { + if (!el) { + return; + } + + requestAnimationFrame(() => handleAmountResize(el)); + }; + + return ( +
+
+
+
{isApp ? 'Amount' : 'Send'}
+
+
+
+ + {amount} {identifier} + +
+ {identifier !== 'USD' && ( +
+ {usdValue} +
+ )} +
+ {tokenIconUrl && ( +
+ {identifier} +
+ )} +
+
+ +
+
+ + + + +
+
+ +
+
{isApp ? 'App' : 'To'}
+
+ {interactorIconUrl && ( +
+ {interactor} +
+ )} + {interactor && ( + + )} +
+
+ {isApp && ( +
+
Action
+
+ {action} +
+
+ )} +
+ +
+
+
+ Network Fee +
+
+
+ {networkFee} +
+
+
+
+ ); +} + diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/signTransactionsOverview.styles.ts b/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/signTransactionsOverview.styles.ts new file mode 100644 index 00000000..65db8e5d --- /dev/null +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/signTransactionsOverview.styles.ts @@ -0,0 +1,33 @@ +// prettier-ignore +export default { + signTransactionsOverviewContainer: 'sign-transactions-overview-container mvx:flex mvx:flex-col mvx:w-full mvx:bg-accent-variant mvx:rounded-2xl mvx:overflow-hidden', + signTransactionsOverviewContent: 'sig-transactions-overview-content mvx:flex mvx:flex-col mvx:gap-1 mvx:p-1 mvx:relative', + signTransactionsDetailRow: 'sign-transactions-detail-row mvx:flex mvx:items-center mvx:py-4 mvx:px-5 mvx:bg-secondary mvx:relative mvx:overflow-hidden mvx:min-h-20', + signTransactionsAmountRow: 'sign-transactions-amount-row mvx:rounded-xl', + signTransactionsInteractorRow: 'sign-transactions-interactor-row mvx:rounded-xl mvx:relative mvx:z-5', + signTransactionsActionRow: 'sign-transactions-action-row mvx:pt-7 mvx:px-5 mvx:pb-2 mvx:rounded-bl-xl mvx:min-h-14 mvx:-mt-6 mvx:relative mvx:before:absolute mvx:before:opacity-60 mvx:before:top-0 mvx:before:bottom-0 mvx:before:left-0 mvx:before:right-0 mvx:before:transition-all mvx:before:duration-200 mvx:before:rounded-b-xl mvx:before:pointer-events-none mvx:before:ease-in-out mvx:before:content-[""] mvx:before:bg-tertiary', + signTransactionsDetailLabel: 'sign-transactions-detail-label mvx:text-secondary-text mvx:text-sm mvx:font-normal mvx:leading-5 mvx:relative mvx:z-1', + signTransactionsAmountDisplay: 'sign-transactions-amount-display mvx:flex mvx:items-center mvx:ml-auto mvx:gap-3 mvx:z-1', + signTransactionsAmountValueContainer: 'sign-transactions-amount-value-container mvx:flex mvx:flex-col mvx:items-end mvx:gap-1', + signTransactionsAmountValue: 'sign-transactions-amount-value mvx:text-xl mvx:font-medium mvx:text-primary mvx:-tracking-[0.24px] mvx:leading-6 mvx:text-right mvx:whitespace-nowrap', + signTransactionsIdentifier: 'sign-transactions-identifier mvx:text-sm mvx:text-primary', + signTransactionsUsdValue: 'sign-transactions-usd-value mvx:text-sm mvx:text-secondary-text', + signTransactionsTokenIcon: 'sign-transactions-token-icon mvx:w-10 mvx:h-10 mvx:rounded-xs mvx:overflow-hidden mvx:border mvx:border-neutral-700', + signTransactionsTokenIconImg: 'sign-transactions-token-icon-img mvx:w-full mvx:h-full mvx:object-cover', + signTransactionsInteractorInfo: 'sign-transactions-interactor-info mvx:flex mvx:items-center mvx:ml-auto mvx:gap-3 mvx:z-1', + signTransactionsInteractorIcon: 'sign-transactions-interactor-icon mvx:w-6 mvx:h-6 mvx:rounded-full mvx:overflow-hidden', + signTransactionsInteractorIconImg: 'sign-transactions-interactor-icon-img mvx:w-full mvx:h-full mvx:object-cover', + signTransactionsInteractorName: 'sign-transactions-interactor-name mvx:text-base mvx:font-normal mvx:text-primary mvx:-tracking-[0.16px] mvx:leading-5 mvx:!max-w-65', + signTransactionsDirection: 'sign-transactions-direction mvx:absolute mvx:flex mvx:flex-col mvx:items-center mvx:justify-center mvx:w-6 mvx:h-6 mvx:rounded-full mvx:left-5 mvx:z-10 mvx:bg-accent-variant', + signTransactionsDirectionIcon: 'sign-transactions-direction-icon mvx:flex mvx:flex-col mvx:items-center mvx:gap-px', + signTransactionsDirectionIconArrow: 'sign-transactions-direction-icon-arrow mvx:flex mvx:items-center mvx:justify-center mvx:relative mvx:shrink-0 mvx:w-3 mvx:basis-auto mvx:-mt-1 mvx:-mb-0.5 mvx:text-secondary-text', + signTransactionsDirectionIconArrowDown: 'sign-transactions-direction-icon-arrow-down mvx:-mt-0.5 mvx:-mb-1 mvx:order-1', + signTransactionsDirectionIconDot: 'sign-transactions-direction-icon-dot mvx:relative mvx:rounded-full mvx:w-0.5 mvx:h-0.5 mvx:bg-secondary-text', + signTransactionsActionValue: 'sign-transactions-action-value mvx:ml-auto mvx:text-sm mvx:font-medium mvx:text-secondary-text mvx:relative mvx:z-1', + signTransactionsFeeContainer: 'sign-transactions-fee-container mvx:py-2 mvx:px-6', + signTransactionsFeeRow: 'sign-transactions-fee-row mvx:flex mvx:items-center mvx:justify-between mvx:py-3 mvx:px-0', + signTransactionsFeeLabelContainer: 'sign-transactions-fee-label-container mvx:flex mvx:items-center mvx:gap-1', + signTransactionsFeeLabel: 'sign-transactions-fee-label mvx:text-secondary-text mvx:text-sm mvx:font-normal mvx:leading-5', + signTransactionsInfoIcon: 'sign-transactions-info-icon mvx:w-3.5 mvx:h-3.5 mvx:relative mvx:before:content-["ⓘ"] mvx:before:text-sm mvx:before:text-secondary-text mvx:before:absolute mvx:before:-top-0.5 mvx:before:left-0', + signTransactionsFeeValue: 'sign-transactions-fee-value mvx:text-primary mvx:text-sm mvx:font-normal mvx:leading-5' +} satisfies Record; \ No newline at end of file diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-overview/sign-transactions-overview.scss b/src/components/functional/sign-transactions-panel/components/sign-transactions-overview/sign-transactions-overview.scss deleted file mode 100644 index 06987750..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-overview/sign-transactions-overview.scss +++ /dev/null @@ -1,224 +0,0 @@ -/* Transaction Overview container */ -.overview-container { - display: flex; - flex-direction: column; - width: 100%; - background: var(--mvx-bg-accent-variant-color); - border-radius: 16px; - overflow: hidden; -} - -.overview-content { - display: flex; - flex-direction: column; - gap: 4px; - padding: 4px; - position: relative; -} - -/* Common row styles */ -.detail-row { - display: flex; - align-items: center; - padding: 16px 20px; - background: var(--mvx-bg-color-secondary); - position: relative; - overflow: hidden; - min-height: 80px; -} - -.amount-row { - border-radius: 12px; -} - -.interactor-row { - border-radius: 12px; - position: relative; - z-index: 5; -} - -.action-row { - padding: 28px 20px 8px 20px; - border-radius: 0 0 12px 12px; - min-height: 56px; - margin-top: -24px; - position: relative; - - &:before { - @apply mvx:absolute mvx:opacity-60 mvx:top-0 mvx:bottom-0 mvx:left-0 mvx:right-0 mvx:transition-all mvx:duration-200; - @apply mvx:rounded-b-xl mvx:pointer-events-none mvx:ease-in-out; - content: ''; - background: var(--mvx-bg-color-tertiary); - } -} - -.detail-label { - color: var(--mvx-text-color-secondary); - font-size: 14px; - font-weight: 400; - line-height: 20px; - position: relative; - z-index: 1; -} - -/* Amount section */ -.amount-display { - display: flex; - align-items: center; - margin-left: auto; - gap: 12px; - z-index: 1; -} - -.amount-value-container { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 4px; -} - -.amount-value { - font-size: 24px; - font-weight: 500; - color: var(--mvx-text-color-primary); - letter-spacing: -0.24px; - line-height: 24px; - text-align: right; - white-space: nowrap; -} - -.identifier { - font-size: 14px; - color: var(--mvx-text-color-primary); -} - -.usd-value { - font-size: 14px; - color: var(--mvx-text-color-secondary); -} - -.token-icon { - width: 40px; - height: 40px; - border-radius: 2px; - overflow: hidden; - border: 1px solid var(--mvx-neutral-700); -} - -.token-icon img { - width: 100%; - height: 100%; - object-fit: cover; -} - -/* Interactor section */ -.interactor-info { - display: flex; - align-items: center; - margin-left: auto; - gap: 12px; - z-index: 1; -} - -.interactor-icon { - width: 24px; - height: 24px; - border-radius: 50%; - overflow: hidden; -} - -.interactor-icon img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.interactor-name { - font-size: 16px; - font-weight: 400; - color: var(--mvx-text-color-primary); - letter-spacing: -0.16px; - line-height: 22px; - max-width: 300px; -} - -.sign-transactions-direction { - @apply mvx:absolute mvx:flex mvx:flex-col mvx:items-center mvx:justify-center mvx:w-6 mvx:h-6 mvx:rounded-full mvx:left-5 mvx:z-10; - background: var(--mvx-bg-accent-variant-color); - top: calc(50% - 12px); - - .sign-transactions-direction-icon { - @apply mvx:flex mvx:flex-col mvx:items-center mvx:gap-px; - - .sign-transactions-direction-icon-arrow { - @apply mvx:flex mvx:items-center mvx:justify-center mvx:relative mvx:shrink-0 mvx:w-3 mvx:basis-auto mvx:-mt-1 mvx:-mb-0.5; - color: var(--mvx-text-color-secondary); - - &.down { - @apply mvx:-mt-0.5 mvx:-mb-1 mvx:order-1; - } - } - - .sign-transactions-direction-icon-dot { - @apply mvx:relative mvx:rounded-full mvx:w-0.5 mvx:h-0.5; - background-color: var(--mvx-text-color-secondary); - } - } -} - -/* Action section */ -.action-value { - margin-left: auto; - font-size: 14px; - font-weight: 500; - color: var(--mvx-text-color-secondary); - position: relative; - z-index: 1; -} - -/* Fee section */ -.fee-container { - padding: 8px 24px; -} - -.fee-row { - display: flex; - align-items: center; - justify-content: space-between; - padding: 12px 0; -} - -.fee-label-container { - display: flex; - align-items: center; - gap: 4px; -} - -.fee-label { - color: var(--mvx-text-color-secondary); - font-size: 14px; - font-weight: 400; - line-height: 19.6px; -} - -.info-icon { - width: 14px; - height: 14px; - position: relative; -} - -.info-icon::before { - content: 'ⓘ'; - font-size: 14px; - color: var(--mvx-text-color-secondary); - position: absolute; - top: -2px; - left: 0; -} - -.fee-value { - color: var(--mvx-text-color-primary); - font-size: 14px; - font-weight: 400; - line-height: 20px; -} diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-overview/sign-transactions-overview.tsx b/src/components/functional/sign-transactions-panel/components/sign-transactions-overview/sign-transactions-overview.tsx deleted file mode 100644 index 0c9289ac..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-overview/sign-transactions-overview.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { Component, h, Prop } from '@stencil/core'; -import { Icon } from 'common/Icon'; -import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; - -import { handleAmountResize } from '../../helpers'; - -@Component({ - tag: 'mvx-sign-transactions-overview', - styleUrl: 'sign-transactions-overview.scss', - shadow: true, -}) -export class SignTransactionsOverview { - @Prop() identifier: string; - @Prop() usdValue: string; - @Prop() amount: string; - @Prop() tokenIconUrl: string; - @Prop() interactor: string; - @Prop() interactorIconUrl: string; - @Prop() action: string; - @Prop() networkFee: string = '~$0.00078'; - @Prop() isApp: boolean = false; - - private amountValueRef: HTMLElement; - - componentDidRender() { - if (this.amountValueRef) { - requestAnimationFrame(() => handleAmountResize(this.amountValueRef)); - } - } - - render() { - return ( -
-
-
-
{this.isApp ? 'Amount' : 'Send'}
-
-
-
(this.amountValueRef = el)} - > - - {this.amount} {this.identifier} - -
- {this.identifier !== 'USD' && ( -
- {this.usdValue} -
- )} -
- {this.tokenIconUrl && ( -
- {this.identifier} -
- )} -
-
- -
-
- - - - -
-
- -
-
{this.isApp ? 'App' : 'To'}
-
- {this.interactorIconUrl && ( -
- {this.interactor} -
- )} - {this.interactor && ( - - )} -
-
- {this.isApp && ( -
-
Action
-
- {this.action} -
-
- )} -
- -
-
-
- Network Fee -
-
-
- {this.networkFee} -
-
-
-
- ); - } -} diff --git a/src/components/functional/sign-transactions-panel/helpers/handleAmountResize/handleAmountResize.ts b/src/components/functional/sign-transactions-panel/helpers/handleAmountResize/handleAmountResize.ts index 56d20f92..4ff63e98 100644 --- a/src/components/functional/sign-transactions-panel/helpers/handleAmountResize/handleAmountResize.ts +++ b/src/components/functional/sign-transactions-panel/helpers/handleAmountResize/handleAmountResize.ts @@ -7,7 +7,7 @@ export const handleAmountResize = (element: HTMLElement | null) => { const getFontSize = (element: HTMLElement) => parseInt(getComputedStyle(element).getPropertyValue('font-size')); const firstChild = element.firstChild as HTMLElement; - const maxWidth = 270; + const maxWidth = 250; const sizes = { parent: Math.min(element.offsetWidth, maxWidth), firstChild: getFontSize(firstChild), diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx index 0fdada58..0dc7ab2a 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx @@ -10,6 +10,7 @@ import { SignEventsEnum, TransactionTabsEnum } from './sign-transactions-panel.t import state, { resetState } from './signTransactionsPanelStore'; import { SignTransactionsFooter } from './components/SignTransactionsFooter/SignTransactionsFooter'; import { CopyButtonHandler } from 'common/CopyButton/CopyButtonHandler'; +import { SignTransactionsOverview } from './components/SignTransactionsOverview/SignTransactionsOverview'; // prettier-ignore const styles = { @@ -171,7 +172,7 @@ export class SignTransactionsPanel { {this.activeTab === TransactionTabsEnum.overview ? ( - + ) : ( )} From 0ba5aaf92064b965be22469fc969758c33e12308 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Fri, 21 Nov 2025 17:59:23 +0200 Subject: [PATCH 11/22] Refactored sign-transactions-advanced and sign-transactions-header --- src/components.d.ts | 78 ---------- .../SignTransactionsAdvanced.tsx | 78 ++++++++++ .../SignTransactionsAdvancedData.tsx | 145 ++++++++++++++++++ .../SignTransactionsAdvancedDataDecode.tsx | 44 ++++++ .../helpers/getProcessedHighlightedData.ts | 2 +- .../signTransactionsAdvancedData.styles.ts | 15 ++ .../signTransactionsAdvanced.styles.ts | 18 +++ .../SignTransactionsFooter.tsx | 2 +- .../SignTransactionsHeader.tsx | 102 ++++++++++++ .../sign-transactions-header.styles.ts | 4 +- ...ign-transactions-advanced-data-decode.scss | 20 --- ...sign-transactions-advanced-data-decode.tsx | 44 ------ .../sign-transactions-advanced-data.scss | 103 ------------- .../sign-transactions-advanced-data.tsx | 139 ----------------- .../sign-transactions-advanced.scss | 127 --------------- .../sign-transactions-advanced.tsx | 61 -------- .../sign-transactions-header.scss | 1 - .../sign-transactions-header.tsx | 106 ------------- .../sign-transactions-panel.tsx | 47 +++++- src/global/tailwind.css | 6 + 20 files changed, 453 insertions(+), 689 deletions(-) create mode 100644 src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx create mode 100644 src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx create mode 100644 src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/components/SignTransactionsAdvancedDataDecode/SignTransactionsAdvancedDataDecode.tsx rename src/components/functional/sign-transactions-panel/components/{sign-transactions-advanced/components/sign-transactions-advanced-data => SignTransactionsAdvanced/components/SignTransactionsAdvancedData}/helpers/getProcessedHighlightedData.ts (88%) create mode 100644 src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/signTransactionsAdvancedData.styles.ts create mode 100644 src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/signTransactionsAdvanced.styles.ts create mode 100644 src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx rename src/components/functional/sign-transactions-panel/components/{sign-transactions-header => SignTransactionsHeader}/sign-transactions-header.styles.ts (93%) delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/components/sign-transactions-advanced-data-decode/sign-transactions-advanced-data-decode.scss delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/components/sign-transactions-advanced-data-decode/sign-transactions-advanced-data-decode.tsx delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/sign-transactions-advanced-data.scss delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/sign-transactions-advanced-data.tsx delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/sign-transactions-advanced.scss delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/sign-transactions-advanced.tsx delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.scss delete mode 100644 src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.tsx diff --git a/src/components.d.ts b/src/components.d.ts index a425cbc0..a9d86ead 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -10,7 +10,6 @@ import { ButtonSizeEnum, ButtonVariantEnum } from "./common/Button/button.types" import { CustomToastType, IComponentToast, ISimpleToast } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; import { IConfirmScreenData, IConnectScreenData, ILedgerConnectPanelData } from "./components/functional/ledger-connect/ledger-connect.types"; import { IEventBus } from "./utils/EventBus"; -import { DecodeMethodEnum } from "./components/functional/sign-transactions-panel/sign-transactions-panel.types"; import { ITransactionListItem } from "./components/visual/transaction-list-item/transaction-list-item.types"; import { LocalJSX as JSX } from "@stencil/core"; import { ITransactionListItem as ITransactionListItem1 } from "./components/visual/transaction-list-item/transaction-list-item.types"; @@ -24,7 +23,6 @@ export { ButtonSizeEnum, ButtonVariantEnum } from "./common/Button/button.types" export { CustomToastType, IComponentToast, ISimpleToast } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; export { IConfirmScreenData, IConnectScreenData, ILedgerConnectPanelData } from "./components/functional/ledger-connect/ledger-connect.types"; export { IEventBus } from "./utils/EventBus"; -export { DecodeMethodEnum } from "./components/functional/sign-transactions-panel/sign-transactions-panel.types"; export { ITransactionListItem } from "./components/visual/transaction-list-item/transaction-list-item.types"; export { LocalJSX as JSX } from "@stencil/core"; export { ITransactionListItem as ITransactionListItem1 } from "./components/visual/transaction-list-item/transaction-list-item.types"; @@ -257,26 +255,6 @@ export namespace Components { */ "sidePanelIdentifier": string; } - interface MvxSignTransactionsAdvanced { - "data": string; - "highlight"?: string; - } - interface MvxSignTransactionsAdvancedData { - "data": string; - "highlight"?: string; - } - interface MvxSignTransactionsAdvancedDataDecode { - /** - * @default DecodeMethodEnum.decimal - */ - "currentDecodeMethod": DecodeMethodEnum; - /** - * @default false - */ - "isToggled": boolean; - } - interface MvxSignTransactionsHeader { - } interface MvxSignTransactionsPanel { "closeWithAnimation": () => Promise; "getEventBus": () => Promise; @@ -817,30 +795,6 @@ declare global { prototype: HTMLMvxSidePanelSwiperElement; new (): HTMLMvxSidePanelSwiperElement; }; - interface HTMLMvxSignTransactionsAdvancedElement extends Components.MvxSignTransactionsAdvanced, HTMLStencilElement { - } - var HTMLMvxSignTransactionsAdvancedElement: { - prototype: HTMLMvxSignTransactionsAdvancedElement; - new (): HTMLMvxSignTransactionsAdvancedElement; - }; - interface HTMLMvxSignTransactionsAdvancedDataElement extends Components.MvxSignTransactionsAdvancedData, HTMLStencilElement { - } - var HTMLMvxSignTransactionsAdvancedDataElement: { - prototype: HTMLMvxSignTransactionsAdvancedDataElement; - new (): HTMLMvxSignTransactionsAdvancedDataElement; - }; - interface HTMLMvxSignTransactionsAdvancedDataDecodeElement extends Components.MvxSignTransactionsAdvancedDataDecode, HTMLStencilElement { - } - var HTMLMvxSignTransactionsAdvancedDataDecodeElement: { - prototype: HTMLMvxSignTransactionsAdvancedDataDecodeElement; - new (): HTMLMvxSignTransactionsAdvancedDataDecodeElement; - }; - interface HTMLMvxSignTransactionsHeaderElement extends Components.MvxSignTransactionsHeader, HTMLStencilElement { - } - var HTMLMvxSignTransactionsHeaderElement: { - prototype: HTMLMvxSignTransactionsHeaderElement; - new (): HTMLMvxSignTransactionsHeaderElement; - }; interface HTMLMvxSignTransactionsPanelElement extends Components.MvxSignTransactionsPanel, HTMLStencilElement { } var HTMLMvxSignTransactionsPanelElement: { @@ -1077,10 +1031,6 @@ declare global { "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; - "mvx-sign-transactions-header": HTMLMvxSignTransactionsHeaderElement; "mvx-sign-transactions-panel": HTMLMvxSignTransactionsPanelElement; "mvx-simple-toast": HTMLMvxSimpleToastElement; "mvx-spinner-icon": HTMLMvxSpinnerIconElement; @@ -1339,26 +1289,6 @@ declare namespace LocalJSX { */ "sidePanelIdentifier"?: string; } - interface MvxSignTransactionsAdvanced { - "data"?: string; - "highlight"?: string; - } - interface MvxSignTransactionsAdvancedData { - "data"?: string; - "highlight"?: string; - } - interface MvxSignTransactionsAdvancedDataDecode { - /** - * @default DecodeMethodEnum.decimal - */ - "currentDecodeMethod"?: DecodeMethodEnum; - /** - * @default false - */ - "isToggled"?: boolean; - } - interface MvxSignTransactionsHeader { - } interface MvxSignTransactionsPanel { } interface MvxSimpleToast { @@ -1542,10 +1472,6 @@ declare namespace LocalJSX { "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; - "mvx-sign-transactions-header": MvxSignTransactionsHeader; "mvx-sign-transactions-panel": MvxSignTransactionsPanel; "mvx-simple-toast": MvxSimpleToast; "mvx-spinner-icon": MvxSpinnerIcon; @@ -1612,10 +1538,6 @@ declare module "@stencil/core" { "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; - "mvx-sign-transactions-header": LocalJSX.MvxSignTransactionsHeader & JSXBase.HTMLAttributes; "mvx-sign-transactions-panel": LocalJSX.MvxSignTransactionsPanel & JSXBase.HTMLAttributes; "mvx-simple-toast": LocalJSX.MvxSimpleToast & JSXBase.HTMLAttributes; "mvx-spinner-icon": LocalJSX.MvxSpinnerIcon & JSXBase.HTMLAttributes; diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx new file mode 100644 index 00000000..9c8d87ee --- /dev/null +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx @@ -0,0 +1,78 @@ +import { h } from '@stencil/core'; +import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; + +import state from '../../signTransactionsPanelStore'; + +import styles from './signTransactionsAdvanced.styles'; +import { SignTransactionsAdvancedData } from './components/SignTransactionsAdvancedData/SignTransactionsAdvancedData'; +import { DecodeMethodEnum } from '../../sign-transactions-panel.types'; + +interface SignTransactionsAdvancedPropsType { + data: string; + highlight?: string; + needsSigning?: boolean; + gasPriceOptions?: Array<{ label: string; value: number }>; + gasLimit?: string; + gasPrice?: string; + egldLabel?: string; + gasPriceOption?: number; + decodeMethod?: DecodeMethodEnum; + onDecodeMethodChange?: (method: DecodeMethodEnum) => void; + decodeTooltipVisible?: boolean; + onDecodeTooltipVisibilityChange?: (isVisible: boolean) => void; +} + +export function SignTransactionsAdvanced(props: SignTransactionsAdvancedPropsType) { + const { data, highlight, needsSigning, gasPriceOptions, gasLimit, gasPrice, egldLabel, gasPriceOption, decodeMethod, onDecodeMethodChange, decodeTooltipVisible, onDecodeTooltipVisibilityChange } = props; + + return ( +
+
+
+
+ Gas Price + + {gasPrice} {egldLabel} + +
+
+ {gasPriceOptions.map(({ label, value }) => ( + + ))} +
+
+ Gas Limit + {gasLimit} +
+
+
+ + +
+ ); +} + diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx new file mode 100644 index 00000000..578e578d --- /dev/null +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx @@ -0,0 +1,145 @@ +import { Fragment, h } from '@stencil/core'; +import { DecodeMethodEnum } from 'components/functional/sign-transactions-panel/sign-transactions-panel.types'; +import state from 'components/functional/sign-transactions-panel/signTransactionsPanelStore'; +import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; + +import styles from './signTransactionsAdvancedData.styles' + +import { getProcessedHighlightedData } from './helpers/getProcessedHighlightedData'; +import { SignTransactionsAdvancedDataDecode } from './components/SignTransactionsAdvancedDataDecode/SignTransactionsAdvancedDataDecode'; +import classNames from 'classnames'; +import { Tooltip } from 'common/Tooltip/Tooltip'; + +export interface IDataHightlight { + beforeHighlight?: string; + highlight: string; + afterHighlight?: string; +} + +interface SignTransactionsAdvancedDataPropsType { + highlight?: string; + data: string; + decodeMethod?: DecodeMethodEnum; + onDecodeMethodChange?: (method: DecodeMethodEnum) => void; + decodeTooltipVisible?: boolean; + onDecodeTooltipVisibilityChange?: (isVisible: boolean) => void; +} + +export function SignTransactionsAdvancedData({ highlight, data, decodeMethod = DecodeMethodEnum.raw, onDecodeMethodChange, decodeTooltipVisible, onDecodeTooltipVisibilityChange }: SignTransactionsAdvancedDataPropsType) { + let highlightElement: HTMLElement; + + const setDecodeMethod = (method: DecodeMethodEnum) => { + if (onDecodeMethodChange) { + onDecodeMethodChange(method); + } + }; + + const getComputedDisplayData = (): IDataHightlight => { + if (decodeMethod === DecodeMethodEnum.raw) { + return !highlight || !data.includes(highlight) + ? { highlight: data } + : getProcessedHighlightedData({ data, highlightedData: highlight }); + } + + const { displayValue = '', highlight: decodedHighlight = '' } = state.commonData.decodedData + ? state.commonData.decodedData[decodeMethod] ?? {} + : {}; + + return !decodedHighlight || !displayValue.includes(decodedHighlight) + ? { highlight: displayValue } + : getProcessedHighlightedData({ data: displayValue, highlightedData: decodedHighlight }); + } + + const computedDisplayData = getComputedDisplayData(); + const { beforeHighlight, afterHighlight, highlight: highlightText } = computedDisplayData; + + if ((beforeHighlight || afterHighlight) && highlightElement) { + setTimeout(() => { + highlightElement?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' }); + }); + } + + return ( +
+
+
Data
+ + { + if (onDecodeTooltipVisibilityChange) { + onDecodeTooltipVisibilityChange(isVisible); + } + }} + isTooltipVisible={decodeTooltipVisible} + trigger={ + + } + > +
event.stopPropagation()} + > + {Object.values(DecodeMethodEnum).map((method: DecodeMethodEnum) => ( +
setDecodeMethod(method)} + data-testid={DataTestIdsEnum.signTransactionsAdvancedDataDecodeOption} + class={{ + [styles.signTransactionsAdvancedDataDecodeOption]: true, + [styles.signTransactionsAdvancedDataDecodeOptionActive]: method === decodeMethod, + }} + > + {method} +
+ ))} +
+ +
+ +
+
+ {beforeHighlight || afterHighlight ? ( + + {beforeHighlight && ( +
+ {beforeHighlight} +
+ )} + +
(highlightElement = el)} + > + {highlightText} +
+ + {afterHighlight && ( +
+ {afterHighlight} +
+ )} + + ) : ( +
+ {highlightText} +
+ )} +
+
+
+ ); +} + diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/components/SignTransactionsAdvancedDataDecode/SignTransactionsAdvancedDataDecode.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/components/SignTransactionsAdvancedDataDecode/SignTransactionsAdvancedDataDecode.tsx new file mode 100644 index 00000000..38447659 --- /dev/null +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/components/SignTransactionsAdvancedDataDecode/SignTransactionsAdvancedDataDecode.tsx @@ -0,0 +1,44 @@ +import { h } from '@stencil/core'; +import classNames from 'classnames'; +import { Icon } from 'common/Icon'; +import { DecodeMethodEnum } from 'components/functional/sign-transactions-panel/sign-transactions-panel.types'; +import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; + +// prettier-ignore +const styles = { + signTransactionsAdvancedDataDecode: 'sign-transactions-advanced-data-decode mvx:relative mvx:flex mvx:justify-center mvx:items-end mvx:gap-1 mvx:px-3 mvx:pt-4 mvx:-mt-4 mvx:mb-2 mvx:w-22 mvx:cursor-pointer mvx:capitalize mvx:leading-none mvx:before:absolute mvx:before:left-0 mvx:before:right-0 mvx:before:top-2.5 mvx:before:h-6 mvx:before:opacity-90 mvx:before:rounded-3xl mvx:before:bg-select mvx:before:content-[""]', + signTransactionsAdvancedDataDecodeLabel: 'sign-transactions-advanced-data-decode-label mvx:relative mvx:text-xs mvx:capitalize mvx:m-auto mvx:z-1 mvx:text-select-tx', + signTransactionsAdvancedDataDecodeIcon: 'sign-transactions-advanced-data-decode-icon mvx:ml-auto mvx:flex mvx:w-4 mvx:h-2.5 mvx:text-secondary-text', + icon: 'mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:relative mvx:h-3! mvx:w-auto!', + iconRotated: 'mvx:rotate-90', +} satisfies Record; + +interface SignTransactionsAdvancedDataDecodePropsType { + isToggled: boolean; + currentDecodeMethod: DecodeMethodEnum; +} + +export function SignTransactionsAdvancedDataDecode({ isToggled = false, currentDecodeMethod = DecodeMethodEnum.decimal }: SignTransactionsAdvancedDataDecodePropsType) { + return ( +
+
+ {currentDecodeMethod} +
+ + +
+ ); +} + diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/helpers/getProcessedHighlightedData.ts b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/helpers/getProcessedHighlightedData.ts similarity index 88% rename from src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/helpers/getProcessedHighlightedData.ts rename to src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/helpers/getProcessedHighlightedData.ts index 334d95c6..9489b448 100644 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/helpers/getProcessedHighlightedData.ts +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/helpers/getProcessedHighlightedData.ts @@ -1,4 +1,4 @@ -import type { IDataHightlight } from '../sign-transactions-advanced-data'; +import type { IDataHightlight } from '../SignTransactionsAdvancedData'; interface IGetProcessedHighlightedData { data: string; diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/signTransactionsAdvancedData.styles.ts b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/signTransactionsAdvancedData.styles.ts new file mode 100644 index 00000000..730b5d1a --- /dev/null +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/signTransactionsAdvancedData.styles.ts @@ -0,0 +1,15 @@ +// prettier-ignore +export default { + signTransactionsAdvancedDataContainer: 'sign-transactions-advanced-data-container mvx:flex mvx:flex-col mvx:w-full', + signTransactionsAdvancedData: 'sign-transactions-advanced-data mvx:flex mvx:flex-col mvx:gap-2 mvx:w-full mvx:p-3', + signTransactionsAdvancedDataTop: 'sign-transactions-advanced-data-top mvx:flex mvx:justify-between mvx:items-center mvx:px-2', + signTransactionsAdvancedDataLabel: 'sign-transactions-advanced-data-label mvx:text-base mvx:leading-none mvx:text-right mvx:text-secondary-text', + signTransactionsAdvancedDataDecodeOptions: 'sign-transactions-advanced-data-decode-options mvx:text-base mvx:-m-1 mvx:gap-1 mvx:flex mvx:flex-col', + signTransactionsAdvancedDataDecodeOption: 'sign-transactions-advanced-data-decode-option mvx:capitalize mvx:text-center mvx:leading-none mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:px-3 mvx:py-2 mvx:text-xs mvx:rounded-lg mvx:hover:bg-select-option mvx:hover:text-accent mvx:focus:bg-select-option mvx:focus:text-accent mvx:active:bg-select-option mvx:active:text-accent mvx:hover:md:bg-select-option-mobile mvx:hover:md:text-select-option-text mvx:focus:md:bg-select-option-mobile mvx:focus:md:text-select-option-text mvx:active:md:bg-select-option-mobile mvx:active:md:text-select-option-text', + signTransactionsAdvancedDataDecodeOptionActive: 'sign-transactions-advanced-data-decode-option-active mvx:bg-select-option mvx:text-accent mvx:md:bg-select-option-mobile mvx:md:text-select-option-text', + signTransactionsAdvancedDataBottom: 'sign-transactions-advanced-data-bottom mvx:flex-1 mvx:relative', + signTransactionsAdvancedDataWrapper: 'sign-transactions-advanced-data-wrapper mvx:h-30 mvx:p-2 mvx:rounded-lg mvx:overflow-auto mvx:flex mvx:flex-col mvx:break-words mvx:text-base mvx:border mvx:border-neutral-800 mvx:before:left-px mvx:before:top-px mvx:before:bottom-px mvx:before:border-7 mvx:before:border-transparent mvx:before:border-b-10 mvx:before:border-t-10 mvx:before:content-[""] mvx:before:absolute mvx:before:pointer-events-none mvx:before:right-4 mvx:before:border-l-0 mvx:before:rounded-lg mvx:before:border-r-0 mvx:scrollbar-horizontal', + signTransactionsAdvancedDataText: 'sign-transactions-advanced-data-text mvx:text-secondary-text', + signTransactionsAdvancedDataHighlight: 'sign-transactions-advanced-data-highlight mvx:text-primary', + signTransactionsAdvancedDataHighlightBolded: 'sign-transactions-advanced-data-highlight-bolded mvx:font-medium' +} satisfies Record; \ No newline at end of file diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/signTransactionsAdvanced.styles.ts b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/signTransactionsAdvanced.styles.ts new file mode 100644 index 00000000..248ce792 --- /dev/null +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/signTransactionsAdvanced.styles.ts @@ -0,0 +1,18 @@ +// prettier-ignore +export default { + signTransactionsAdvancedDetails: 'sign-transactions-advanced-details mvx:flex mvx:flex-col mvx:items-start mvx:w-full mvx:bg-accent-variant mvx:rounded-2xl mvx:pb-3', + signTransactionsAdvancedContent: 'sign-transactions-advanced-content mvx:flex mvx:flex-col mvx:items-start mvx:self-stretch mvx:flex-nowrap mvx:shrink-0 mvx:gap-1 mvx:relative', + signTransactionsGasSettings: 'sign-transactions-gas-settings mvx:w-full mvx:p-1', + signTransactionsGasWrapper: 'sign-transactions-gas-wrapper mvx:flex mvx:flex-col mvx:gap-4 mvx:py-7.5 mvx:px-5 mvx:rounded-xl mvx:relative mvx:before:absolute mvx:before:opacity-60 mvx:before:top-0 mvx:before:bottom-0 mvx:before:left-0 mvx:before:right-0 mvx:before:transition-all mvx:before:duration-200 mvx:before:rounded-xl mvx:before:pointer-events-none mvx:before:ease-in-out mvx:before:content-[""] mvx:before:bg-tertiary', + signTransactionsGasHeader: 'sign-transactions-gas-header mvx:flex mvx:items-center mvx:justify-between mvx:w-full', + signTransactionsGasPrice: 'sign-transactions-gas-price mvx:text-secondary-text mvx:text-sm mvx:font-normal mvx:leading-5 mvx:relative mvx:z-1', + signTransactionsGasPriceValue: 'sign-transactions-gas-price-value mvx:text-secondary-text mvx:text-sm mvx:font-medium mvx:leading-5 mvx:relative mvx:z-1', + signTransactionsGasSpeedSelector: 'sign-transactions-gas-speed-selector mvx:flex mvx:items-center mvx:gap-1 mvx:p-0.5 mvx:bg-accent-variant mvx:rounded-3xl mvx:relative mvx:z-1', + signTransactionsSpeedOption: 'sign-transactions-speed-option mvx:flex mvx:items-center mvx:justify-center mvx:flex-1 mvx:py-1 mvx:px-3 mvx:rounded-2xl mvx:cursor-pointer', + signTransactionsSpeedOptionActive: 'sign-transactions-speed-option-active mvx:bg-button-bg-primary', + signTransactionsSpeedText: 'sign-transactions-speed-text mvx:text-sm mvx:font-normal mvx:leading-5 mvx:text-secondary-text', + signTransactionsSpeedOptionActiveSpeedText: 'sign-transactions-speed-option-active-speed-text mvx:!text-button-primary', + signTransactionsGasLimitRow: 'sign-transactions-gas-limit-row mvx:flex mvx:items-center mvx:justify-between mvx:w-full', + signTransactionsGasLimit: 'sign-transactions-gas-limit mvx:text-secondary-text mvx:text-sm mvx:font-normal mvx:leading-5 mvx:relative mvx:z-1', + signTransactionsGasLimitValue: 'sign-transactions-gas-limit-value mvx:text-secondary-text mvx:text-sm mvx:font-medium mvx:leading-5 mvx:relative mvx:z-1' +} satisfies Record; \ No newline at end of file diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx index 53450d8e..68152f74 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx @@ -154,7 +154,7 @@ export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChan )} {!username && address && ( - < Trim + void; + onNext: () => void; + currentIndex: number; + transactionsCount: number; + origin: string; + showFavicon: boolean; +} + +export function SignTransactionsHeader({ onBack, onNext, currentIndex, transactionsCount, origin, showFavicon }: SignTransactionsHeaderPropsType) { + return ( +
+ {transactionsCount > 1 && ( +
event.stopPropagation()} + > + + +
+
Transaction
+
= 10, + }} + > + {currentIndex + 1} +
+ +
of
+
= 10, + }} + > + {transactionsCount} +
+
+ + +
+ )} + +
+
Request from
+ + {showFavicon && ( +
+ favicon { + showFavicon = false; + }} + /> +
+ )} + + + {origin} + +
+
+ ); +} + diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.styles.ts b/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/sign-transactions-header.styles.ts similarity index 93% rename from src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.styles.ts rename to src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/sign-transactions-header.styles.ts index 20fb2f59..09eea967 100644 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.styles.ts +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/sign-transactions-header.styles.ts @@ -1,6 +1,6 @@ // prettier-ignore export default { - signTransactionsHeader: 'sign-transactions-header mvx:flex mvx:flex-1 mvx:flex-col mvx:gap-5 mvx:py-5', + signTransactionsHeader: 'sign-transactions-header mvx:flex mvx:flex-1 mvx:flex-col mvx:gap-5 mvx:py-5 max-h--', signTransactionsHeaderPager: 'sign-transactions-header-pager mvx:flex mvx:relative mvx:rounded-2xl mvx:h-9 mvx:items-center mvx:px-5 mvx:justify-center mvx:mx-auto mvx:gap-5 mvx:bg-secondary', signTransactionsHeaderPagerIcon: 'sign-transactions-header-pager-icon mvx:w-auto mvx:ease-in-out mvx:duration-200 mvx:w-5 mvx:relative mvx:z-1 mvx:cursor-pointer mvx:flex mvx:items-center mvx:justify-center mvx:transition-all mvx:h-5 mvx:text-secondary-text mvx:hover:text-primary', signTransactionsHeaderPagerIconDisabled: 'sign-transactions-header-pager-icon-disabled mvx:pointer-events-none mvx:opacity-50', @@ -12,5 +12,5 @@ export default { signTransactionsHeaderOriginCentered: 'sign-transactions-header-origin-centered mvx:m-auto', signTransactionsHeaderOriginLabel: 'sign-transactions-header-origin-label mvx:text-secondary-text', signTransactionsHeaderOriginImage: 'sign-transactions-header-origin-image mvx:flex mvx:items-center mvx:rounded-3xl mvx:justify-center mvx:w-18 mvx:h-18 mvx:bg-neutral-950 mvx:border mvx:border-neutral-900', - signTransactionsHeaderOriginName:'sign-transactions-header-origin-name mvx:text-primary' + signTransactionsHeaderOriginName: 'sign-transactions-header-origin-name mvx:text-primary' } satisfies Record; diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/components/sign-transactions-advanced-data-decode/sign-transactions-advanced-data-decode.scss b/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/components/sign-transactions-advanced-data-decode/sign-transactions-advanced-data-decode.scss deleted file mode 100644 index c8f50677..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/components/sign-transactions-advanced-data-decode/sign-transactions-advanced-data-decode.scss +++ /dev/null @@ -1,20 +0,0 @@ -.sign-transactions-advanced-data-decode { - @apply mvx:relative mvx:flex mvx:justify-center mvx:items-end mvx:gap-1 mvx:px-3 mvx:pt-4 mvx:-mt-4 mvx:mb-2; - @apply mvx:w-22 mvx:cursor-pointer mvx:capitalize mvx:leading-none; - - &:before { - @apply mvx:absolute mvx:left-0 mvx:right-0 mvx:top-2.5 mvx:h-6 mvx:opacity-90 mvx:rounded-3xl; - background-color: var(--mvx-select-bg); - content: ''; - } - - .sign-transactions-advanced-data-decode-label { - @apply mvx:relative mvx:text-xs mvx:capitalize mvx:m-auto mvx:z-1; - color: var(--mvx-select-color); - } - - .sign-transactions-advanced-data-decode-icon { - @apply mvx:ml-auto mvx:flex mvx:w-4 mvx:h-2.5; - color: var(--mvx-text-color-secondary); - } -} diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/components/sign-transactions-advanced-data-decode/sign-transactions-advanced-data-decode.tsx b/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/components/sign-transactions-advanced-data-decode/sign-transactions-advanced-data-decode.tsx deleted file mode 100644 index d50d85b8..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/components/sign-transactions-advanced-data-decode/sign-transactions-advanced-data-decode.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { Component, h, Prop } from '@stencil/core'; -import classNames from 'classnames'; -import { Icon } from 'common/Icon'; -import { DecodeMethodEnum } from 'components/functional/sign-transactions-panel/sign-transactions-panel.types'; -import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; - -const signTransactionsAdvancedDataDecodeClasses: Record = { - icon: 'mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:relative mvx:h-3! mvx:w-auto!', - iconRotated: 'mvx:rotate-90', -}; - -@Component({ - tag: 'mvx-sign-transactions-advanced-data-decode', - styleUrl: 'sign-transactions-advanced-data-decode.scss', - shadow: true, -}) -export class SignTransactionsAdvancedDataDecode { - @Prop() isToggled: boolean = false; - @Prop() currentDecodeMethod: DecodeMethodEnum = DecodeMethodEnum.decimal; - - render() { - return ( -
-
- {this.currentDecodeMethod} -
- - -
- ); - } -} diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/sign-transactions-advanced-data.scss b/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/sign-transactions-advanced-data.scss deleted file mode 100644 index f7bee7f2..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/sign-transactions-advanced-data.scss +++ /dev/null @@ -1,103 +0,0 @@ -:host { - @apply mvx:flex mvx:flex-col mvx:w-full; - - .sign-transactions-advanced-data { - @apply mvx:flex mvx:flex-col mvx:gap-2 mvx:w-full mvx:p-3; - - .sign-transactions-advanced-data-top { - @apply mvx:flex mvx:justify-between mvx:items-center mvx:px-2; - - .sign-transactions-advanced-data-label { - @apply mvx:text-base mvx:leading-none mvx:text-right; - color: var(--mvx-text-color-secondary); - } - - .sign-transactions-advanced-data-decode-options { - @apply mvx:text-base mvx:-m-1 mvx:gap-1 mvx:flex mvx:flex-col; - - .sign-transactions-advanced-data-decode-option { - @apply mvx:capitalize mvx:text-center mvx:leading-none mvx:cursor-pointer mvx:transition-all mvx:duration-200; - @apply mvx:ease-in-out mvx:px-3 mvx:py-2 mvx:text-xs mvx:rounded-lg; - - &:hover, - &:focus, - &.active { - background-color: var(--mvx-select-option-bg); - color: var(--mvx-text-accent-color); - - @media (min-width: 768px) { - background-color: var(--mvx-select-option-bg-mobile); - color: var(--mvx-select-option-color); - } - } - } - } - } - - .sign-transactions-advanced-data-bottom { - @apply mvx:flex-1 mvx:relative; - - .sign-transactions-advanced-data-wrapper { - @apply mvx:h-30 mvx:p-2 mvx:rounded-lg mvx:overflow-auto mvx:flex mvx:flex-col mvx:break-words mvx:text-base; - border: 1px solid var(--mvx-neutral-800); - - &::-webkit-scrollbar, - &::-webkit-scrollbar-track, - &::-webkit-scrollbar-track:hover, - &::-webkit-scrollbar-corner { - @apply mvx:bg-transparent; - } - - &::-webkit-scrollbar { - @apply mvx:w-4; - } - - &::-webkit-scrollbar-track, - &::-webkit-scrollbar-track:hover { - @apply mvx:bg-transparent mvx:bg-clip-padding; - border: 4px solid transparent; - border-radius: 9999px; - } - - &::-webkit-scrollbar-thumb, - &::-webkit-scrollbar-thumb:hover { - @apply mvx:bg-clip-padding; - border: 4px solid transparent; - background-color: var(--mvx-neutral-700); - border-radius: 9999px; - } - - &::-webkit-scrollbar-button { - @apply mvx:hidden; - } - - &::-webkit-resizer { - @apply mvx:bg-transparent; - } - - &:before { - @apply mvx:absolute mvx:pointer-events-none mvx:right-4 mvx:border-l-0 mvx:rounded-lg mvx:border-r-0; - left: 1px; - top: 1px; - bottom: 1px; - border: calc((24px + 4px) / 4) solid transparent; - border-bottom-width: calc(20px / 2); - border-top-width: calc(20px / 2); - content: ''; - } - - .sign-transactions-advanced-data-text { - color: var(--mvx-text-color-secondary); - } - - .sign-transactions-advanced-data-highlight { - color: var(--mvx-text-color-primary); - - &.bolded { - @apply mvx:font-medium; - } - } - } - } - } -} diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/sign-transactions-advanced-data.tsx b/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/sign-transactions-advanced-data.tsx deleted file mode 100644 index d5141cd9..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/components/sign-transactions-advanced-data/sign-transactions-advanced-data.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import { Component, Fragment, h, Prop, State } from '@stencil/core'; -import { DecodeMethodEnum } from 'components/functional/sign-transactions-panel/sign-transactions-panel.types'; -import state from 'components/functional/sign-transactions-panel/signTransactionsPanelStore'; -import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; - -import { getProcessedHighlightedData } from './helpers/getProcessedHighlightedData'; - -export interface IDataHightlight { - beforeHighlight?: string; - highlight: string; - afterHighlight?: string; -} - -@Component({ - tag: 'mvx-sign-transactions-advanced-data', - styleUrl: 'sign-transactions-advanced-data.scss', - shadow: true, -}) -export class SignTransactionsAdvancedData { - private highlightElement: HTMLElement; - - @State() decodeMethod: DecodeMethodEnum = DecodeMethodEnum.raw; - @State() isDecodeTooltipOpen: boolean = false; - - @Prop() highlight?: string; - @Prop() data: string; - - setDecodeMethod(method: DecodeMethodEnum) { - this.decodeMethod = method; - } - - get computedDisplayData(): IDataHightlight { - if (this.decodeMethod === DecodeMethodEnum.raw) { - return !this.highlight || !this.data.includes(this.highlight) - ? { highlight: this.data } - : getProcessedHighlightedData({ data: this.data, highlightedData: this.highlight }); - } - - const { displayValue = '', highlight = '' } = state.commonData.decodedData - ? state.commonData.decodedData[this.decodeMethod] ?? {} - : {}; - - return !highlight || !displayValue.includes(highlight) - ? { highlight: displayValue } - : getProcessedHighlightedData({ data: displayValue, highlightedData: highlight }); - } - - componentDidRender() { - const { beforeHighlight, afterHighlight } = this.computedDisplayData; - - if ((beforeHighlight || afterHighlight) && this.highlightElement) { - this.highlightElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' }); - } - } - - render() { - const { beforeHighlight, afterHighlight, highlight } = this.computedDisplayData; - - return ( -
-
-
Data
- - { - this.isDecodeTooltipOpen = event.detail; - }} - trigger={ - - } - > -
event.stopPropagation()} - > - {Object.values(DecodeMethodEnum).map((decodeMethod: DecodeMethodEnum) => ( -
this.setDecodeMethod(decodeMethod)} - data-testid={DataTestIdsEnum.signTransactionsAdvancedDataDecodeOption} - class={{ - 'sign-transactions-advanced-data-decode-option': true, - 'active': decodeMethod === this.decodeMethod, - }} - > - {decodeMethod} -
- ))} -
- -
- -
-
- {beforeHighlight || afterHighlight ? ( - - {beforeHighlight && ( -
- {beforeHighlight} -
- )} - -
(this.highlightElement = el)} - > - {highlight} -
- - {afterHighlight && ( -
- {afterHighlight} -
- )} - - ) : ( -
- {highlight} -
- )} -
-
-
- ); - } -} diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/sign-transactions-advanced.scss b/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/sign-transactions-advanced.scss deleted file mode 100644 index 74742dd6..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/sign-transactions-advanced.scss +++ /dev/null @@ -1,127 +0,0 @@ -.advanced-details { - display: flex; - flex-direction: column; - align-items: flex-start; - width: 100%; - background: var(--mvx-bg-accent-variant-color); - border-radius: 16px; - padding-bottom: 12px; -} - -.advanced-content { - display: flex; - flex-direction: column; - align-items: flex-start; - align-self: stretch; - flex-wrap: nowrap; - flex-shrink: 0; - gap: 4px; - position: relative; -} - -.gas-settings { - width: 100%; - padding: 4px; -} - -.gas-wrapper { - display: flex; - flex-direction: column; - gap: 16px; - padding: 30px 20px; - border-radius: 12px; - position: relative; - - &:before { - @apply mvx:absolute mvx:opacity-60 mvx:top-0 mvx:bottom-0 mvx:left-0 mvx:right-0 mvx:transition-all mvx:duration-200 mvx:rounded-xl; - @apply mvx:pointer-events-none mvx:ease-in-out; - content: ''; - background: var(--mvx-bg-color-tertiary); - } -} - -.gas-header { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; -} - -.gas-price { - color: var(--mvx-text-color-secondary); - font-size: 14px; - font-weight: 400; - line-height: 20px; - position: relative; - z-index: 1; -} - -.gas-price-value { - color: var(--mvx-text-color-secondary); - font-size: 14px; - font-weight: 500; - line-height: 20px; - position: relative; - z-index: 1; -} - -.gas-speed-selector { - display: flex; - align-items: center; - gap: 4px; - padding: 2px; - background: var(--mvx-bg-accent-variant-color); - border-radius: 20px; - position: relative; - z-index: 1; -} - -.speed-option { - display: flex; - align-items: center; - justify-content: center; - flex: 1; - padding: 4px 12px; - border-radius: 18px; - cursor: pointer; -} - -.speed-option.active { - background: var(--mvx-button-bg-primary); -} - -.speed-text { - font-size: 14px; - font-weight: 400; - line-height: 20px; - color: var(--mvx-text-color-secondary); -} - -.speed-option.active .speed-text { - color: var(--mvx-button-text-primary); -} - -.gas-limit-row { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; -} - -.gas-limit { - color: var(--mvx-text-color-secondary); - font-size: 14px; - font-weight: 400; - line-height: 20px; - position: relative; - z-index: 1; -} - -.gas-limit-value { - color: var(--mvx-text-color-secondary); - font-size: 14px; - font-weight: 500; - line-height: 20px; - position: relative; - z-index: 1; -} diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/sign-transactions-advanced.tsx b/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/sign-transactions-advanced.tsx deleted file mode 100644 index 9939f68c..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-advanced/sign-transactions-advanced.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { Component, h, Prop, State } from '@stencil/core'; -import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; - -import { DecodeMethodEnum } from '../../sign-transactions-panel.types'; -import state from '../../signTransactionsPanelStore'; - -@Component({ - tag: 'mvx-sign-transactions-advanced', - styleUrl: 'sign-transactions-advanced.scss', - shadow: true, -}) -export class SignTransactionsAdvanced { - @Prop() data: string; - @Prop() highlight?: string; - - @State() decodeMethod: DecodeMethodEnum = DecodeMethodEnum.raw; - - setDecodeMethod(method: DecodeMethodEnum) { - this.decodeMethod = method; - } - - render() { - const { - commonData: { needsSigning, gasPriceOptions, gasLimit, gasPrice, egldLabel, gasPriceOption }, - } = state; - - return ( -
-
-
-
- Gas Price - - {gasPrice} {egldLabel} - -
-
- {gasPriceOptions.map(({ label, value }) => ( - - ))} -
-
- Gas Limit - {gasLimit} -
-
-
- - -
- ); - } -} diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.scss b/src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.scss deleted file mode 100644 index 21b0cbc1..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.scss +++ /dev/null @@ -1 +0,0 @@ -// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. diff --git a/src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.tsx b/src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.tsx deleted file mode 100644 index 2140df0d..00000000 --- a/src/components/functional/sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { Component, h, State } from '@stencil/core'; -import { Icon } from 'common/Icon'; -import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; - -import state from '../../signTransactionsPanelStore'; -import styles from './sign-transactions-header.styles'; - -@Component({ - tag: 'mvx-sign-transactions-header', - styleUrl: 'sign-transactions-header.scss', - shadow: true, -}) -export class SignTransactionsHeader { - @State() showFavicon: boolean = true; - - render() { - const { onBack, onNext } = state; - const { currentIndex, transactionsCount, origin } = state.commonData; - - return ( -
- {transactionsCount > 1 && ( -
event.stopPropagation()} - > - - -
-
Transaction
-
= 10, - }} - > - {currentIndex + 1} -
- -
of
-
= 10, - }} - > - {transactionsCount} -
-
- - -
- )} - -
-
Request from
- - {this.showFavicon && ( -
- favicon { - this.showFavicon = false; - }} - /> -
- )} - - - {origin} - -
-
- ); - } -} diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx index 0dc7ab2a..e67b31cc 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx @@ -6,11 +6,13 @@ import type { IEventBus } from 'utils/EventBus'; import { EventBus } from 'utils/EventBus'; import type { IOverviewProps, ISignTransactionsPanelData } from './sign-transactions-panel.types'; -import { SignEventsEnum, TransactionTabsEnum } from './sign-transactions-panel.types'; +import { DecodeMethodEnum, SignEventsEnum, TransactionTabsEnum } from './sign-transactions-panel.types'; import state, { resetState } from './signTransactionsPanelStore'; import { SignTransactionsFooter } from './components/SignTransactionsFooter/SignTransactionsFooter'; import { CopyButtonHandler } from 'common/CopyButton/CopyButtonHandler'; import { SignTransactionsOverview } from './components/SignTransactionsOverview/SignTransactionsOverview'; +import { SignTransactionsAdvanced } from './components/SignTransactionsAdvanced/SignTransactionsAdvanced'; +import { SignTransactionsHeader } from './components/SignTransactionsHeader/SignTransactionsHeader'; // prettier-ignore const styles = { @@ -21,7 +23,9 @@ const styles = { buttonSecondary: 'button-secondary mvx:relative mvx:text-button-secondary mvx:border mvx:border-transparent mvx:after:absolute mvx:after:inset-0 mvx:after:rounded-lg mvx:after:opacity-40 mvx:after:transition-all mvx:after:duration-200 mvx:after:ease-in-out mvx:after:bg-button-bg-secondary mvx:after:content-[""] mvx:after:-z-1 mvx:hover:opacity-100 mvx:hover:text-button-primary mvx:hover:after:opacity-100 mvx:hover:after:bg-button-bg-primary', buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl', buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75', - buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100' + buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100', + tooltipContent: 'tooltip-content mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none mvx:!bg-surface mvx:border-outline-variant mvx:border mvx:text-primary mvx:after:left-1/2 mvx:after:origin-center mvx:after:w-2 mvx:after:h-2 mvx:after:absolute mvx:after:border mvx:after:border-outline-variant mvx:after:!bg-surface mvx:after:translate-x-[calc(50%-8px)] mvx:after:-rotate-[45deg] mvx:after:content-[""]', + signTransactionsHeader: 'sign-transactions-header mvx:flex mvx:flex-1 mvx:flex-col mvx:gap-5 mvx:py-5', } satisfies Record; @Component({ @@ -44,6 +48,9 @@ export class SignTransactionsPanel { @State() activeTab: TransactionTabsEnum = TransactionTabsEnum.overview; @State() isFooterTooltipVisible: boolean = false; @State() isSuccessOnCopy: boolean = false; + @State() showFavicon: boolean = true; + @State() decodeMethod: DecodeMethodEnum = DecodeMethodEnum.raw; + @State() decodeTooltipVisible: boolean = false; @Method() async getEventBus() { await this.connectionMonitor.waitForConnection(); @@ -139,12 +146,20 @@ export class SignTransactionsPanel { onSuccessChange: (isSuccess) => (this.isSuccessOnCopy = isSuccess), }); + private setDecodeMethod = (method: DecodeMethodEnum) => { + this.decodeMethod = method; + }; + + private setDecodeTooltipVisible = (isVisible: boolean) => { + this.decodeTooltipVisible = isVisible; + }; + render() { console.log(styles) //TODO: remove this const transactionTabs = Object.values(TransactionTabsEnum); - const { commonData } = state; - const { data, highlight } = commonData; + const { commonData, onBack, onNext } = state; + const { data, highlight, needsSigning, gasPriceOptions, gasLimit, gasPrice, egldLabel, gasPriceOption, currentIndex, transactionsCount, origin } = commonData; return (
- +
@@ -174,7 +196,20 @@ export class SignTransactionsPanel { {this.activeTab === TransactionTabsEnum.overview ? ( ) : ( - + )}
diff --git a/src/global/tailwind.css b/src/global/tailwind.css index d0822f3e..4c645dd3 100644 --- a/src/global/tailwind.css +++ b/src/global/tailwind.css @@ -23,6 +23,7 @@ --color-pagination-item: var(--mvx-pagination-item-bg); --color-pagination-item-hover: var(--mvx-pagination-item-bg-hover); --color-neutral-700: var(--mvx-neutral-700); + --color-neutral-800: var(--mvx-neutral-800); --color-neutral-950: var(--mvx-neutral-950); --color-neutral-900: var(--mvx-neutral-900); --color-ledger-warning: var(--mvx-ledger-warning-bg); @@ -40,6 +41,11 @@ --color-button-secondary: var(--mvx-button-text-secondary); --color-button-bg-primary: var(--mvx-button-bg-primary); --color-button-bg-secondary: var(--mvx-button-bg-secondary); + --color-select: var(--mvx-select-bg); + --color-select-tx: var(--mvx-select-color); + --color-select-option: var(--mvx-select-option-bg); + --color-select-option-mobile: var(--mvx-select-option-bg-mobile); + --color-select-option-text: var(--mvx-select-option-color); } @layer utilities { From 4491fa57fb22073b277686a71dbc3a6d266acbdc Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 24 Nov 2025 13:58:37 +0200 Subject: [PATCH 12/22] Updated styles --- src/common/Tooltip/Tooltip.tsx | 2 +- src/common/Trim/Trim.tsx | 28 +++++++++---------- .../sign-transactions-header.styles.ts | 2 +- .../sign-transactions-panel.tsx | 4 +-- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/common/Tooltip/Tooltip.tsx b/src/common/Tooltip/Tooltip.tsx index 6a7b85b8..e8624165 100644 --- a/src/common/Tooltip/Tooltip.tsx +++ b/src/common/Tooltip/Tooltip.tsx @@ -4,7 +4,7 @@ import { h } from '@stencil/core'; const styles = { tooltip: 'tooltip mvx:flex mvx:relative', tooltipContentWrapper: 'tooltip-content-wrapper mvx:left-1/2 mvx:absolute mvx:z-1 mvx:transform mvx:-translate-x-1/2', - tooltipContent: 'tooltip-content mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none mvx:bg-surface mvx:border-outline-variant mvx:border mvx:text-primary mvx:after:left-1/2 mvx:after:origin-center mvx:after:w-2 mvx:after:h-2 mvx:after:absolute mvx:after:border mvx:after:border-outline-variant mvx:after:bg-surface mvx:after:translate-x-[calc(50%-8px)] mvx:after:-rotate-[45deg] mvx:after:content-[""]', + tooltipContent: 'tooltip-content mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none mvx:!bg-surface mvx:border-outline-variant mvx:border mvx:text-primary mvx:after:left-1/2 mvx:after:origin-center mvx:after:w-2 mvx:after:h-2 mvx:after:absolute mvx:after:border mvx:after:border-outline-variant mvx:after:!bg-surface mvx:after:translate-x-[calc(50%-8px)] mvx:after:-rotate-[45deg] mvx:after:content-[""]', tooltipContentTop: 'tooltip-content-top mvx:after:border-t-0 mvx:after:border-r-0 mvx:after:-bottom-1', tooltipContentBottom: 'tooltip-content-bottom mvx:after:border-b-0 mvx:after:border-l-0 mvx:after:-top-1' } satisfies Record; diff --git a/src/common/Trim/Trim.tsx b/src/common/Trim/Trim.tsx index 8a671942..0e96b4a8 100644 --- a/src/common/Trim/Trim.tsx +++ b/src/common/Trim/Trim.tsx @@ -86,27 +86,27 @@ export function Trim({ const trimFullVisibleClasses = styles.trimFullVisible.split(/\s+/); const trimWrapperVisibleClasses = styles.trimWrapperVisible.split(/\s+/); - const hasFullVisible = trimFullElement.classList.contains(getIdentifierClass(styles.trimFullVisible)); - const hasWrapperVisible = trimWrapperElement.classList.contains(getIdentifierClass(styles.trimWrapperVisible)); + // const hasFullVisible = trimFullElement.classList.contains(getIdentifierClass(styles.trimFullVisible)); + // const hasWrapperVisible = trimWrapperElement.classList.contains(getIdentifierClass(styles.trimWrapperVisible)); - if (hasFullVisible) { - trimFullElement.classList.remove(...trimFullVisibleClasses); - } - if (hasWrapperVisible) { - trimWrapperElement.classList.remove(...trimWrapperVisibleClasses); - } + // if (hasFullVisible) { + // trimFullElement.classList.remove(...trimFullVisibleClasses); + // } + // if (hasWrapperVisible) { + // trimWrapperElement.classList.remove(...trimWrapperVisibleClasses); + // } const hiddenFullWidthElementWidth = fullWidthUntrimmedElementReference.scrollWidth; const trimmedElementWidth = trimElementReference.clientWidth; const isTrimElementOverflowing = hiddenFullWidthElementWidth > trimmedElementWidth; if (isCurrentlyOverflowing === isTrimElementOverflowing) { - if (hasFullVisible) { - trimFullElement.classList.add(...trimFullVisibleClasses); - } - if (hasWrapperVisible) { - trimWrapperElement.classList.add(...trimWrapperVisibleClasses); - } + // if (hasFullVisible) { + // trimFullElement.classList.add(...trimFullVisibleClasses); + // } + // if (hasWrapperVisible) { + // trimWrapperElement.classList.add(...trimWrapperVisibleClasses); + // } isCheckingOverflow = false; diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/sign-transactions-header.styles.ts b/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/sign-transactions-header.styles.ts index 09eea967..b2cbb595 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/sign-transactions-header.styles.ts +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/sign-transactions-header.styles.ts @@ -1,6 +1,6 @@ // prettier-ignore export default { - signTransactionsHeader: 'sign-transactions-header mvx:flex mvx:flex-1 mvx:flex-col mvx:gap-5 mvx:py-5 max-h--', + signTransactionsHeader: 'sign-transactions-header mvx:flex mvx:flex-col mvx:gap-5 mvx:py-5', signTransactionsHeaderPager: 'sign-transactions-header-pager mvx:flex mvx:relative mvx:rounded-2xl mvx:h-9 mvx:items-center mvx:px-5 mvx:justify-center mvx:mx-auto mvx:gap-5 mvx:bg-secondary', signTransactionsHeaderPagerIcon: 'sign-transactions-header-pager-icon mvx:w-auto mvx:ease-in-out mvx:duration-200 mvx:w-5 mvx:relative mvx:z-1 mvx:cursor-pointer mvx:flex mvx:items-center mvx:justify-center mvx:transition-all mvx:h-5 mvx:text-secondary-text mvx:hover:text-primary', signTransactionsHeaderPagerIconDisabled: 'sign-transactions-header-pager-icon-disabled mvx:pointer-events-none mvx:opacity-50', diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx index e67b31cc..de13b13d 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx @@ -24,8 +24,8 @@ const styles = { buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl', buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75', buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100', - tooltipContent: 'tooltip-content mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none mvx:!bg-surface mvx:border-outline-variant mvx:border mvx:text-primary mvx:after:left-1/2 mvx:after:origin-center mvx:after:w-2 mvx:after:h-2 mvx:after:absolute mvx:after:border mvx:after:border-outline-variant mvx:after:!bg-surface mvx:after:translate-x-[calc(50%-8px)] mvx:after:-rotate-[45deg] mvx:after:content-[""]', - signTransactionsHeader: 'sign-transactions-header mvx:flex mvx:flex-1 mvx:flex-col mvx:gap-5 mvx:py-5', + // tooltipContent: 'tooltip-content mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none mvx:!bg-surface mvx:border-outline-variant mvx:border mvx:text-primary mvx:after:left-1/2 mvx:after:origin-center mvx:after:w-2 mvx:after:h-2 mvx:after:absolute mvx:after:border mvx:after:border-outline-variant mvx:after:!bg-surface mvx:after:translate-x-[calc(50%-8px)] mvx:after:-rotate-[45deg] mvx:after:content-[""]', + // signTransactionsHeader: 'sign-transactions-header mvx:flex mvx:flex-1 mvx:flex-col mvx:gap-5 mvx:py-5', } satisfies Record; @Component({ From 167cbc9d8952899f8bebfddbf603e9b4557c6f36 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 24 Nov 2025 17:11:08 +0200 Subject: [PATCH 13/22] Updated styles --- .../sign-transactions-panel.scss | 138 ++---------------- .../sign-transactions-panel.styles.ts | 18 +++ .../sign-transactions-panel.tsx | 27 +--- 3 files changed, 36 insertions(+), 147 deletions(-) create mode 100644 src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss b/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss index 8d7de2b8..5e661815 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss @@ -1,153 +1,37 @@ -.header { - display: flex; - align-items: flex-start; - justify-content: space-between; - align-self: stretch; - flex-wrap: nowrap; - flex-shrink: 0; - position: relative; - min-width: 0; - padding: 24px 24px 12px 24px; -} - -.frame { - display: flex; - align-items: center; - justify-content: flex-end; - flex-wrap: nowrap; - flex-shrink: 0; - position: relative; - width: 30px; - height: 30px; - padding: 0 0 0 0; -} - -.frame-1 { - display: flex; - flex-direction: column; - align-items: center; - flex-wrap: nowrap; - flex-grow: 1; - flex-shrink: 0; - flex-basis: 0; - gap: 4px; - position: relative; -} - -.frame-2 { - display: flex; - align-items: center; - justify-content: flex-end; - flex-wrap: nowrap; - flex-shrink: 0; - position: relative; - width: 30px; -} - -.mx-icon { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: nowrap; - flex-shrink: 0; - position: relative; - width: 30px; - height: 30px; -} - -.transaction-navigation { - display: flex; - align-items: flex-start; - justify-content: center; - align-self: stretch; - flex-wrap: nowrap; - flex-shrink: 0; - gap: 10px; - position: relative; - min-width: 0; - padding: 0 24px 0 24px; -} - -.navigation-icon { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: nowrap; - flex-shrink: 0; - position: relative; - width: 25px; - height: 25px; -} - -.sign-transaction-content { - @apply mvx:flex mvx:flex-col mvx:items-center mvx:gap-2 mvx:relative mvx:min-w-0 mvx:self-stretch mvx:flex-nowrap mvx:shrink-0; - - .sign-transactions-tabs { - @apply mvx:px-4 mvx:gap-2 mvx:flex mvx:mr-auto; - - .sign-transactions-tab { - @apply mvx:px-4 mvx:h-8 mvx:flex mvx:items-center mvx:leading-none mvx:justify-center mvx:transition-all mvx:duration-200; - @apply mvx:ease-in-out mvx:cursor-pointer mvx:relative mvx:rounded-3xl; - color: var(--mvx-text-color-secondary); - - &:hover, - &.active { - color: var(--mvx-text-accent-color); - background-color: var(--mvx-bg-color-secondary); - } - - .sign-transactions-tab-text { - @apply mvx:text-base mvx:z-1 mvx:relative mvx:capitalize; - } - } - } -} - -@media (max-width: 480px) { - .main-container { - width: 100%; - margin: 0; - } -} - -.sign-transactions-panel { - @apply mvx:flex mvx:flex-col mvx:flex-1 mvx:pb-6; -} - -// Trim component base styles +// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. .trim { - @apply mvx:flex mvx:relative mvx:max-w-full mvx:overflow-hidden mvx:whitespace-nowrap; + @apply mvx:flex mvx:relative mvx:max-w-full mvx:overflow-hidden mvx:whitespace-nowrap; } .trim-full { - @apply mvx:text-transparent mvx:absolute mvx:leading-5; + @apply mvx:text-transparent mvx:absolute mvx:leading-5; } .trim-full-visible { - @apply mvx:text-inherit mvx:relative mvx:leading-5; + @apply mvx:text-inherit mvx:relative mvx:leading-5; } .trim-wrapper { - @apply mvx:hidden; + @apply mvx:hidden; } .trim-wrapper-visible { - @apply mvx:overflow-hidden mvx:max-w-full mvx:flex; + @apply mvx:overflow-hidden mvx:max-w-full mvx:flex; } .trim-left-wrapper { - @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:text-left mvx:text-[1px]; + @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:text-left mvx:text-[1px]; } .trim-left { - @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5; + @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5; } .trim-right-wrapper { - @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:whitespace-nowrap mvx:text-right mvx:text-[1px]; - direction: rtl; + @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:whitespace-nowrap mvx:text-right mvx:text-[1px]; + direction: rtl; } .trim-right { - @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5 mvx:text-clip; + @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5 mvx:text-clip; } \ No newline at end of file diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts b/src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts new file mode 100644 index 00000000..a42b9a3c --- /dev/null +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts @@ -0,0 +1,18 @@ +// prettier-ignore +export default { + signTransactionContent: 'sign-transaction-content mvx:flex mvx:flex-col mvx:items-center mvx:gap-2 mvx:relative mvx:min-w-0 mvx:self-stretch mvx:flex-nowrap mvx:shrink-0', + signTransactionsTabs: 'sign-transactions-tabs mvx:px-4 mvx:gap-2 mvx:flex mvx:mr-auto', + signTransactionsTab: 'sign-transactions-tab mvx:px-4 mvx:h-8 mvx:flex mvx:items-center mvx:leading-none mvx:justify-center mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:cursor-pointer mvx:relative mvx:rounded-3xl mvx:text-secondary-text mvx:hover:text-accent mvx:hover:bg-secondary mvx:active:text-accent mvx:active:bg-secondary', + signTransactionsTabActive: 'sign-transactions-tab-active mvx:text-accent mvx:bg-secondary', + signTransactionsTabText: 'sign-transactions-tab-text mvx:text-base mvx:z-1 mvx:relative mvx:capitalize', + signTransactionsPanel: 'sign-transactions-panel mvx:flex mvx:flex-col mvx:flex-1 mvx:pb-6', + button: 'button mvx:flex mvx:items-center mvx:justify-center mvx:font-bold mvx:leading-none mvx:px-4 mvx:max-h-full mvx:rounded-xl mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:gap-2', + buttonLarge: 'button-large mvx:h-12 mvx:text-base mvx:px-6', + buttonSmall: 'button-small mvx:h-10 mvx:text-xs mvx:rounded-xl', + buttonPrimary: 'button-primary mvx:text-button-primary mvx:bg-button-bg-primary mvx:border mvx:border-button-bg-primary', + buttonSecondary: 'button-secondary mvx:relative mvx:text-button-secondary mvx:border mvx:border-transparent mvx:after:absolute mvx:after:inset-0 mvx:after:rounded-lg mvx:after:opacity-40 mvx:after:transition-all mvx:after:duration-200 mvx:after:ease-in-out mvx:after:bg-button-bg-secondary mvx:after:content-[""] mvx:after:-z-1 mvx:hover:opacity-100 mvx:hover:text-button-primary mvx:hover:after:opacity-100 mvx:hover:after:bg-button-bg-primary', + buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl', + buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75', + buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100', + tooltipContent: 'tooltip-content mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none mvx:!bg-surface mvx:border-outline-variant mvx:border mvx:text-primary mvx:after:left-1/2 mvx:after:origin-center mvx:after:w-2 mvx:after:h-2 mvx:after:absolute mvx:after:border mvx:after:border-outline-variant mvx:after:!bg-surface mvx:after:translate-x-[calc(50%-8px)] mvx:after:-rotate-[45deg] mvx:after:content-[""]', +} satisfies Record; \ No newline at end of file diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx index de13b13d..60359fe4 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx @@ -14,19 +14,7 @@ import { SignTransactionsOverview } from './components/SignTransactionsOverview/ import { SignTransactionsAdvanced } from './components/SignTransactionsAdvanced/SignTransactionsAdvanced'; import { SignTransactionsHeader } from './components/SignTransactionsHeader/SignTransactionsHeader'; -// prettier-ignore -const styles = { - button: 'button mvx:flex mvx:items-center mvx:justify-center mvx:font-bold mvx:leading-none mvx:px-4 mvx:max-h-full mvx:rounded-xl mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:gap-2', - buttonLarge: 'button-large mvx:h-12 mvx:text-base mvx:px-6', - buttonSmall: 'button-small mvx:h-10 mvx:text-xs mvx:rounded-xl', - buttonPrimary: 'button-primary mvx:text-button-primary mvx:bg-button-bg-primary mvx:border mvx:border-button-bg-primary', - buttonSecondary: 'button-secondary mvx:relative mvx:text-button-secondary mvx:border mvx:border-transparent mvx:after:absolute mvx:after:inset-0 mvx:after:rounded-lg mvx:after:opacity-40 mvx:after:transition-all mvx:after:duration-200 mvx:after:ease-in-out mvx:after:bg-button-bg-secondary mvx:after:content-[""] mvx:after:-z-1 mvx:hover:opacity-100 mvx:hover:text-button-primary mvx:hover:after:opacity-100 mvx:hover:after:bg-button-bg-primary', - buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl', - buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75', - buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100', - // tooltipContent: 'tooltip-content mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none mvx:!bg-surface mvx:border-outline-variant mvx:border mvx:text-primary mvx:after:left-1/2 mvx:after:origin-center mvx:after:w-2 mvx:after:h-2 mvx:after:absolute mvx:after:border mvx:after:border-outline-variant mvx:after:!bg-surface mvx:after:translate-x-[calc(50%-8px)] mvx:after:-rotate-[45deg] mvx:after:content-[""]', - // signTransactionsHeader: 'sign-transactions-header mvx:flex mvx:flex-1 mvx:flex-col mvx:gap-5 mvx:py-5', -} satisfies Record; +import styles from './sign-transactions-panel.styles'; @Component({ tag: 'mvx-sign-transactions-panel', @@ -155,7 +143,6 @@ export class SignTransactionsPanel { }; render() { - console.log(styles) //TODO: remove this const transactionTabs = Object.values(TransactionTabsEnum); const { commonData, onBack, onNext } = state; @@ -168,7 +155,7 @@ export class SignTransactionsPanel { panelTitle="Confirm Transaction" hasBackButton={false} > -
+
-
-
+
+
{transactionTabs.map(transactionTab => (
this.setActiveTab(transactionTab)} > -
+
{transactionTab}
@@ -220,7 +207,7 @@ export class SignTransactionsPanel { handleCopyButtonClick={this.handleCopyButtonClick} />
- + ); } } From 5233da0eb0414910378f0f2cf0f31e38764c610d Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 24 Nov 2025 17:53:54 +0200 Subject: [PATCH 14/22] Fixed test --- .../copy-button/tests/copy-button.spec.ts | 17 ++++++++++++----- .../sign-transactions-panel.scss | 1 - 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/common/copy-button/tests/copy-button.spec.ts b/src/components/common/copy-button/tests/copy-button.spec.ts index 7422d672..d5401ab8 100644 --- a/src/components/common/copy-button/tests/copy-button.spec.ts +++ b/src/components/common/copy-button/tests/copy-button.spec.ts @@ -47,8 +47,14 @@ describe('CopyButton', () => { }); const copyButton = page.root; - const element = copyButton.querySelector('div'); - element.click(); + const copyButtonInstance = page.rootInstance as CopyButton; + + const mockEvent = { + preventDefault: jest.fn(), + stopPropagation: jest.fn(), + } as unknown as MouseEvent; + + await copyButtonInstance['handleClick'](mockEvent, copyButtonInstance.text); await page.waitForChanges(); expect(copyButton).toEqualHtml(` @@ -92,13 +98,14 @@ describe('CopyButton', () => { html: '', }); + const copyButtonInstance = page.rootInstance as CopyButton; const mockEvent = { preventDefault: jest.fn(), stopPropagation: jest.fn(), - }; + } as unknown as MouseEvent; + - const element = page.root.querySelector('div'); - element.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true })); + await copyButtonInstance['handleClick'](mockEvent, copyButtonInstance.text); await page.waitForChanges(); expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1); diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss b/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss index 5e661815..1075ba99 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss @@ -1,4 +1,3 @@ -// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. .trim { @apply mvx:flex mvx:relative mvx:max-w-full mvx:overflow-hidden mvx:whitespace-nowrap; } From b4c3cfe4a5b28b1a5e720ccff58d3572925dd587 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 24 Nov 2025 17:55:23 +0200 Subject: [PATCH 15/22] Updated changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a9328e2e..762e701f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- [Refactored sign transactions panel internal components](https://github.com/multiversx/mx-sdk-dapp-ui/pull/267) - [Added skip tests if PR is in draft](https://github.com/multiversx/mx-sdk-dapp-ui/pull/265) - [Refactored unlock panel components](https://github.com/multiversx/mx-sdk-dapp-ui/pull/255) - [Added github release on publish](https://github.com/multiversx/mx-sdk-dapp-ui/pull/264) From ebe69312f8242fda3a6001766c27aab27d832a76 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 24 Nov 2025 18:03:09 +0200 Subject: [PATCH 16/22] Updated changelog --- CHANGELOG.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c433d36f..91f21554 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,12 +15,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [[0.1.3](https://github.com/multiversx/mx-sdk-dapp-ui/pull/266)] - 2025-11-12 -## [[0.1.4](https://github.com/multiversx/mx-sdk-dapp-ui/pull/269)] - 2025-11-21 - -- [Added Vue.js component outputs](https://github.com/multiversx/mx-sdk-dapp-ui/pull/268) - -## [[0.1.3](https://github.com/multiversx/mx-sdk-dapp-ui/pull/266)] - 2025-11-12 - - [Added skip tests if PR is in draft](https://github.com/multiversx/mx-sdk-dapp-ui/pull/265) - [Refactored unlock panel components](https://github.com/multiversx/mx-sdk-dapp-ui/pull/255) - [Added github release on publish](https://github.com/multiversx/mx-sdk-dapp-ui/pull/264) From 0b32a0261daa80c5868cf18452f9b6c500e6fa5e Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 24 Nov 2025 18:22:27 +0200 Subject: [PATCH 17/22] Updated files --- src/common/Button/Button.tsx | 13 +------------ src/common/Button/button.styles.ts | 11 +++++++++++ src/common/Trim/Trim.tsx | 16 ---------------- .../common/copy-button/tests/copy-button.spec.ts | 8 ++++---- 4 files changed, 16 insertions(+), 32 deletions(-) create mode 100644 src/common/Button/button.styles.ts diff --git a/src/common/Button/Button.tsx b/src/common/Button/Button.tsx index 506d2bb1..374f797d 100644 --- a/src/common/Button/Button.tsx +++ b/src/common/Button/Button.tsx @@ -1,17 +1,6 @@ import { h } from '@stencil/core'; import { ButtonSizeEnum, ButtonVariantEnum } from './button.types'; - -// prettier-ignore -const styles = { - button: 'button mvx:flex mvx:items-center mvx:justify-center mvx:font-bold mvx:leading-none mvx:px-4 mvx:max-h-full mvx:rounded-xl mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:gap-2', - buttonLarge: 'button-large mvx:h-12 mvx:text-base mvx:px-6', - buttonSmall: 'button-small mvx:h-10 mvx:text-xs mvx:rounded-xl', - buttonPrimary: 'button-primary mvx:text-button-primary mvx:bg-button-bg-primary mvx:border mvx:border-button-bg-primary', - buttonSecondary: 'button-secondary mvx:relative mvx:text-button-secondary mvx:border mvx:border-transparent mvx:after:absolute mvx:after:inset-0 mvx:after:rounded-lg mvx:after:opacity-40 mvx:after:transition-all mvx:after:duration-200 mvx:after:ease-in-out mvx:after:bg-button-bg-secondary mvx:after:content-[""] mvx:after:-z-1 mvx:hover:opacity-100 mvx:hover:text-button-primary mvx:hover:after:opacity-100 mvx:hover:after:bg-button-bg-primary', - buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl', - buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75', - buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100' -} satisfies Record; +import styles from './button.styles'; interface ButtonPropsType { class?: string; diff --git a/src/common/Button/button.styles.ts b/src/common/Button/button.styles.ts new file mode 100644 index 00000000..d073a7ae --- /dev/null +++ b/src/common/Button/button.styles.ts @@ -0,0 +1,11 @@ +// prettier-ignore +export default { + button: 'button mvx:flex mvx:items-center mvx:justify-center mvx:font-bold mvx:leading-none mvx:px-4 mvx:max-h-full mvx:rounded-xl mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:gap-2', + buttonLarge: 'button-large mvx:h-12 mvx:text-base mvx:px-6', + buttonSmall: 'button-small mvx:h-10 mvx:text-xs mvx:rounded-xl', + buttonPrimary: 'button-primary mvx:text-button-primary mvx:bg-button-bg-primary mvx:border mvx:border-button-bg-primary', + buttonSecondary: 'button-secondary mvx:relative mvx:text-button-secondary mvx:border mvx:border-transparent mvx:after:absolute mvx:after:inset-0 mvx:after:rounded-lg mvx:after:opacity-40 mvx:after:transition-all mvx:after:duration-200 mvx:after:ease-in-out mvx:after:bg-button-bg-secondary mvx:after:content-[""] mvx:after:-z-1 mvx:hover:opacity-100 mvx:hover:text-button-primary mvx:hover:after:opacity-100 mvx:hover:after:bg-button-bg-primary', + buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl', + buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75', + buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100' +} satisfies Record; \ No newline at end of file diff --git a/src/common/Trim/Trim.tsx b/src/common/Trim/Trim.tsx index 0e96b4a8..ae2dd63b 100644 --- a/src/common/Trim/Trim.tsx +++ b/src/common/Trim/Trim.tsx @@ -86,27 +86,11 @@ export function Trim({ const trimFullVisibleClasses = styles.trimFullVisible.split(/\s+/); const trimWrapperVisibleClasses = styles.trimWrapperVisible.split(/\s+/); - // const hasFullVisible = trimFullElement.classList.contains(getIdentifierClass(styles.trimFullVisible)); - // const hasWrapperVisible = trimWrapperElement.classList.contains(getIdentifierClass(styles.trimWrapperVisible)); - - // if (hasFullVisible) { - // trimFullElement.classList.remove(...trimFullVisibleClasses); - // } - // if (hasWrapperVisible) { - // trimWrapperElement.classList.remove(...trimWrapperVisibleClasses); - // } - const hiddenFullWidthElementWidth = fullWidthUntrimmedElementReference.scrollWidth; const trimmedElementWidth = trimElementReference.clientWidth; const isTrimElementOverflowing = hiddenFullWidthElementWidth > trimmedElementWidth; if (isCurrentlyOverflowing === isTrimElementOverflowing) { - // if (hasFullVisible) { - // trimFullElement.classList.add(...trimFullVisibleClasses); - // } - // if (hasWrapperVisible) { - // trimWrapperElement.classList.add(...trimWrapperVisibleClasses); - // } isCheckingOverflow = false; diff --git a/src/components/common/copy-button/tests/copy-button.spec.ts b/src/components/common/copy-button/tests/copy-button.spec.ts index d5401ab8..67d8eecf 100644 --- a/src/components/common/copy-button/tests/copy-button.spec.ts +++ b/src/components/common/copy-button/tests/copy-button.spec.ts @@ -47,14 +47,14 @@ describe('CopyButton', () => { }); const copyButton = page.root; - const copyButtonInstance = page.rootInstance as CopyButton; + const component = page.rootInstance as CopyButton; const mockEvent = { preventDefault: jest.fn(), stopPropagation: jest.fn(), } as unknown as MouseEvent; - await copyButtonInstance['handleClick'](mockEvent, copyButtonInstance.text); + await component['handleClick'](mockEvent, component.text); await page.waitForChanges(); expect(copyButton).toEqualHtml(` @@ -98,14 +98,14 @@ describe('CopyButton', () => { html: '', }); - const copyButtonInstance = page.rootInstance as CopyButton; + const component = page.rootInstance as CopyButton; const mockEvent = { preventDefault: jest.fn(), stopPropagation: jest.fn(), } as unknown as MouseEvent; - await copyButtonInstance['handleClick'](mockEvent, copyButtonInstance.text); + await component['handleClick'](mockEvent, component.text); await page.waitForChanges(); expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1); From aad9c3f6c13cdae71acfcc06f9a47f99abb42314 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 25 Nov 2025 12:44:59 +0200 Subject: [PATCH 18/22] Fixes after review --- .../SignTransactionsAdvanced.tsx | 17 ++++++----------- .../SignTransactionsAdvancedData.tsx | 5 ++++- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx index 9c8d87ee..12f17371 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx @@ -6,6 +6,7 @@ import state from '../../signTransactionsPanelStore'; import styles from './signTransactionsAdvanced.styles'; import { SignTransactionsAdvancedData } from './components/SignTransactionsAdvancedData/SignTransactionsAdvancedData'; import { DecodeMethodEnum } from '../../sign-transactions-panel.types'; +import classNames from 'classnames'; interface SignTransactionsAdvancedPropsType { data: string; @@ -36,7 +37,9 @@ export function SignTransactionsAdvanced(props: SignTransactionsAdvancedPropsTyp
- {gasPriceOptions.map(({ label, value }) => ( + {gasPriceOptions.map(({ label, value }) => { + const isActive = gasPriceOption.toString() === value.toString(); + - ))} + })}
Gas Limit diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx index 578e578d..f3bc0867 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx @@ -54,9 +54,12 @@ export function SignTransactionsAdvancedData({ highlight, data, decodeMethod = D const { beforeHighlight, afterHighlight, highlight: highlightText } = computedDisplayData; if ((beforeHighlight || afterHighlight) && highlightElement) { - setTimeout(() => { + + const timeoutId = setTimeout(() => { highlightElement?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' }); }); + + clearTimeout(timeoutId); } return ( From 0c3bc8352247957280828fef8612de0381953513 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 25 Nov 2025 15:00:08 +0200 Subject: [PATCH 19/22] Fixes after review --- ...ButtonHandler.ts => getCopyClickAction.ts} | 2 +- .../common/copy-button/copy-button.tsx | 4 +- .../SignTransactionsAdvanced.tsx | 49 +++++++------------ .../SignTransactionsAdvancedData.tsx | 9 ++-- .../SignTransactionsFooter.tsx | 18 ++----- .../SignTransactionsHeader.tsx | 6 ++- .../sign-transactions-panel.styles.ts | 2 +- .../sign-transactions-panel.tsx | 14 ++---- 8 files changed, 38 insertions(+), 66 deletions(-) rename src/common/CopyButton/{CopyButtonHandler.ts => getCopyClickAction.ts} (89%) diff --git a/src/common/CopyButton/CopyButtonHandler.ts b/src/common/CopyButton/getCopyClickAction.ts similarity index 89% rename from src/common/CopyButton/CopyButtonHandler.ts rename to src/common/CopyButton/getCopyClickAction.ts index 97f8a3bc..322cea44 100644 --- a/src/common/CopyButton/CopyButtonHandler.ts +++ b/src/common/CopyButton/getCopyClickAction.ts @@ -4,7 +4,7 @@ interface CopyHandlerOptions { onSuccessChange?: (isSuccess: boolean) => void; } -export function CopyButtonHandler({ onSuccessChange }: CopyHandlerOptions) { +export function getCopyClickAction({ onSuccessChange }: CopyHandlerOptions) { let timeoutId: number | null = null; return async (event: MouseEvent, text?: string) => { diff --git a/src/components/common/copy-button/copy-button.tsx b/src/components/common/copy-button/copy-button.tsx index a48c177d..c9c03909 100644 --- a/src/components/common/copy-button/copy-button.tsx +++ b/src/components/common/copy-button/copy-button.tsx @@ -1,6 +1,6 @@ import { Component, Prop, State, h } from '@stencil/core'; import { CopyButton as CopyButtonComponent } from 'common/CopyButton/CopyButton'; -import { CopyButtonHandler } from 'common/CopyButton/CopyButtonHandler'; +import { getCopyClickAction } from 'common/CopyButton/getCopyClickAction'; @Component({ tag: 'mvx-copy-button', @@ -12,7 +12,7 @@ export class CopyButton { @Prop() class?: string; @Prop() text: string; - private handleClick = CopyButtonHandler({ + private handleClick = getCopyClickAction({ onSuccessChange: (isSuccess) => (this.isSuccess = isSuccess), }); diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx index 12f17371..af57efb4 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx @@ -9,14 +9,6 @@ import { DecodeMethodEnum } from '../../sign-transactions-panel.types'; import classNames from 'classnames'; interface SignTransactionsAdvancedPropsType { - data: string; - highlight?: string; - needsSigning?: boolean; - gasPriceOptions?: Array<{ label: string; value: number }>; - gasLimit?: string; - gasPrice?: string; - egldLabel?: string; - gasPriceOption?: number; decodeMethod?: DecodeMethodEnum; onDecodeMethodChange?: (method: DecodeMethodEnum) => void; decodeTooltipVisible?: boolean; @@ -24,7 +16,8 @@ interface SignTransactionsAdvancedPropsType { } export function SignTransactionsAdvanced(props: SignTransactionsAdvancedPropsType) { - const { data, highlight, needsSigning, gasPriceOptions, gasLimit, gasPrice, egldLabel, gasPriceOption, decodeMethod, onDecodeMethodChange, decodeTooltipVisible, onDecodeTooltipVisibilityChange } = props; + const { decodeMethod, onDecodeMethodChange, decodeTooltipVisible, onDecodeTooltipVisibilityChange } = props; + const { needsSigning, gasPriceOptions, gasLimit, gasPrice, egldLabel, gasPriceOption } = state.commonData; return (
@@ -37,26 +30,22 @@ export function SignTransactionsAdvanced(props: SignTransactionsAdvancedPropsTyp
- {gasPriceOptions.map(({ label, value }) => { - const isActive = gasPriceOption.toString() === value.toString(); - - + {gasPriceOptions?.map(({ label, value }) => { + const isActive = gasPriceOption?.toString() === value.toString(); + + return ( + + ); })}
@@ -66,7 +55,7 @@ export function SignTransactionsAdvanced(props: SignTransactionsAdvancedPropsTyp
- +
); } diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx index f3bc0867..1e08ba37 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx @@ -17,15 +17,14 @@ export interface IDataHightlight { } interface SignTransactionsAdvancedDataPropsType { - highlight?: string; - data: string; decodeMethod?: DecodeMethodEnum; onDecodeMethodChange?: (method: DecodeMethodEnum) => void; decodeTooltipVisible?: boolean; onDecodeTooltipVisibilityChange?: (isVisible: boolean) => void; } -export function SignTransactionsAdvancedData({ highlight, data, decodeMethod = DecodeMethodEnum.raw, onDecodeMethodChange, decodeTooltipVisible, onDecodeTooltipVisibilityChange }: SignTransactionsAdvancedDataPropsType) { +export function SignTransactionsAdvancedData({ decodeMethod = DecodeMethodEnum.raw, onDecodeMethodChange, decodeTooltipVisible, onDecodeTooltipVisibilityChange }: SignTransactionsAdvancedDataPropsType) { + const { data, highlight } = state.commonData; let highlightElement: HTMLElement; const setDecodeMethod = (method: DecodeMethodEnum) => { @@ -36,8 +35,8 @@ export function SignTransactionsAdvancedData({ highlight, data, decodeMethod = D const getComputedDisplayData = (): IDataHightlight => { if (decodeMethod === DecodeMethodEnum.raw) { - return !highlight || !data.includes(highlight) - ? { highlight: data } + return !highlight || !data?.includes(highlight) + ? { highlight: data || '' } : getProcessedHighlightedData({ data, highlightedData: highlight }); } diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx index 68152f74..7b1f40e0 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx @@ -116,20 +116,10 @@ export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChan )} {showForwardAction ? ( - - {isWaitingForSignature ? ( - - - - ) : ( - - - - )} + + + + ) : ( diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx index 5d7c38d3..de889fa3 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx @@ -12,6 +12,8 @@ interface SignTransactionsHeaderPropsType { showFavicon: boolean; } +const NUMBER_OF_TRANSACTIONS = 10; + export function SignTransactionsHeader({ onBack, onNext, currentIndex, transactionsCount, origin, showFavicon }: SignTransactionsHeaderPropsType) { return (
@@ -39,7 +41,7 @@ export function SignTransactionsHeader({ onBack, onNext, currentIndex, transacti
= 10, + [styles.signTransactionsHeaderPagerTextValueLarge]: transactionsCount >= NUMBER_OF_TRANSACTIONS, }} > {currentIndex + 1} @@ -49,7 +51,7 @@ export function SignTransactionsHeader({ onBack, onNext, currentIndex, transacti
= 10, + [styles.signTransactionsHeaderPagerTextValueLarge]: transactionsCount >= NUMBER_OF_TRANSACTIONS, }} > {transactionsCount} diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts b/src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts index a42b9a3c..e568781a 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts @@ -3,7 +3,7 @@ export default { signTransactionContent: 'sign-transaction-content mvx:flex mvx:flex-col mvx:items-center mvx:gap-2 mvx:relative mvx:min-w-0 mvx:self-stretch mvx:flex-nowrap mvx:shrink-0', signTransactionsTabs: 'sign-transactions-tabs mvx:px-4 mvx:gap-2 mvx:flex mvx:mr-auto', signTransactionsTab: 'sign-transactions-tab mvx:px-4 mvx:h-8 mvx:flex mvx:items-center mvx:leading-none mvx:justify-center mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:cursor-pointer mvx:relative mvx:rounded-3xl mvx:text-secondary-text mvx:hover:text-accent mvx:hover:bg-secondary mvx:active:text-accent mvx:active:bg-secondary', - signTransactionsTabActive: 'sign-transactions-tab-active mvx:text-accent mvx:bg-secondary', + signTransactionsTabActive: 'sign-transactions-tab-active mvx:!text-accent mvx:!bg-secondary', signTransactionsTabText: 'sign-transactions-tab-text mvx:text-base mvx:z-1 mvx:relative mvx:capitalize', signTransactionsPanel: 'sign-transactions-panel mvx:flex mvx:flex-col mvx:flex-1 mvx:pb-6', button: 'button mvx:flex mvx:items-center mvx:justify-center mvx:font-bold mvx:leading-none mvx:px-4 mvx:max-h-full mvx:rounded-xl mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:gap-2', diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx index 60359fe4..3c2ea7db 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx @@ -9,7 +9,7 @@ import type { IOverviewProps, ISignTransactionsPanelData } from './sign-transact import { DecodeMethodEnum, SignEventsEnum, TransactionTabsEnum } from './sign-transactions-panel.types'; import state, { resetState } from './signTransactionsPanelStore'; import { SignTransactionsFooter } from './components/SignTransactionsFooter/SignTransactionsFooter'; -import { CopyButtonHandler } from 'common/CopyButton/CopyButtonHandler'; +import { getCopyClickAction } from 'common/CopyButton/getCopyClickAction'; import { SignTransactionsOverview } from './components/SignTransactionsOverview/SignTransactionsOverview'; import { SignTransactionsAdvanced } from './components/SignTransactionsAdvanced/SignTransactionsAdvanced'; import { SignTransactionsHeader } from './components/SignTransactionsHeader/SignTransactionsHeader'; @@ -130,7 +130,7 @@ export class SignTransactionsPanel { this.isFooterTooltipVisible = isTooltipVisible; }; - private handleCopyButtonClick = CopyButtonHandler({ + private handleCopyButtonClick = getCopyClickAction({ onSuccessChange: (isSuccess) => (this.isSuccessOnCopy = isSuccess), }); @@ -146,7 +146,7 @@ export class SignTransactionsPanel { const transactionTabs = Object.values(TransactionTabsEnum); const { commonData, onBack, onNext } = state; - const { data, highlight, needsSigning, gasPriceOptions, gasLimit, gasPrice, egldLabel, gasPriceOption, currentIndex, transactionsCount, origin } = commonData; + const { currentIndex, transactionsCount, origin } = commonData; return ( ) : ( Date: Tue, 25 Nov 2025 16:21:58 +0200 Subject: [PATCH 20/22] Eslint fixes --- src/common/Button/Button.tsx | 3 ++- src/common/Icon/Icon.tsx | 4 ++-- src/common/UnlockButton/UnlockButton.tsx | 1 + src/components/common/button/button.stories.tsx | 2 +- src/components/common/button/button.tsx | 3 +-- src/components/common/copy-button/copy-button.tsx | 2 +- src/components/common/tooltip/tooltip.tsx | 3 ++- .../SignTransactionsAdvanced.tsx | 7 +++---- .../SignTransactionsAdvancedData.tsx | 9 ++++----- .../SignTransactionsFooter.tsx | 10 +++++----- .../SignTransactionsHeader.tsx | 1 + .../SignTransactionsOverview.tsx | 5 ++--- .../sign-transactions-panel.tsx | 13 ++++++------- .../transaction-toast-content.tsx | 2 +- .../UnlockPanelFooter/UnlockPanelFooter.tsx | 2 +- .../UnlockPanelGroup/UnlockPanelGroup.tsx | 3 ++- .../functional/unlock-panel/unlock-panel.tsx | 4 ++-- .../tests/data-with-explorer-link.spec.ts | 2 +- src/components/visual/index.ts | 1 - .../transaction-list-item/transaction-list-item.tsx | 2 +- 20 files changed, 39 insertions(+), 40 deletions(-) delete mode 100644 src/components/visual/index.ts diff --git a/src/common/Button/Button.tsx b/src/common/Button/Button.tsx index 374f797d..dfcbe799 100644 --- a/src/common/Button/Button.tsx +++ b/src/common/Button/Button.tsx @@ -1,6 +1,7 @@ import { h } from '@stencil/core'; -import { ButtonSizeEnum, ButtonVariantEnum } from './button.types'; + import styles from './button.styles'; +import { ButtonSizeEnum, ButtonVariantEnum } from './button.types'; interface ButtonPropsType { class?: string; diff --git a/src/common/Icon/Icon.tsx b/src/common/Icon/Icon.tsx index 84ffa060..02af67a0 100644 --- a/src/common/Icon/Icon.tsx +++ b/src/common/Icon/Icon.tsx @@ -6,6 +6,7 @@ import { AngleRightIcon } from './components/AngleRightIcon'; import { AnglesLeftIcon } from './components/AnglesLeftIcon'; import { AnglesRightIcon } from './components/AnglesRightIcon'; import { AngleUpIcon } from './components/AngleUpIcon'; +import { ArrowRightIcon } from './components/ArrowRightIcon'; import { ArrowsRotateIcon } from './components/ArrowsRotateIcon'; import { ArrowUpRightFromSquareIcon } from './components/ArrowUpRightFromSquare'; import { ArrowUpRightIcon } from './components/ArrowUpRightIcon'; @@ -23,10 +24,9 @@ import { HourglassIcon } from './components/HourglassIcon'; import { LayersIcon } from './components/LayersIcon'; import { LockIcon } from './components/LockIcon'; import { PencilIcon } from './components/PencilIcon'; -import { TriangularWarningIcon } from './components/TriangularWarningIcon'; import { SpinnerIcon } from './components/SpinnerIcon'; +import { TriangularWarningIcon } from './components/TriangularWarningIcon'; import type { IconPropsType } from './icon.types'; -import { ArrowRightIcon } from './components/ArrowRightIcon'; export const Icon = ({ name, ...properties }: IconPropsType) => { if (!name) { diff --git a/src/common/UnlockButton/UnlockButton.tsx b/src/common/UnlockButton/UnlockButton.tsx index 480e6979..8867e101 100644 --- a/src/common/UnlockButton/UnlockButton.tsx +++ b/src/common/UnlockButton/UnlockButton.tsx @@ -13,6 +13,7 @@ import { safeWindow } from 'constants/window.constants'; import type { IProviderBase } from 'types/provider.types'; import { ProviderTypeEnum } from 'types/provider.types'; import { getDetectedBrowser } from 'utils/getDetectedBrowser'; + import styles from './unlockButton.styles'; interface UnlockButtonPropsType { diff --git a/src/components/common/button/button.stories.tsx b/src/components/common/button/button.stories.tsx index 6232d65c..7588c3e5 100644 --- a/src/components/common/button/button.stories.tsx +++ b/src/components/common/button/button.stories.tsx @@ -4,8 +4,8 @@ import { h } from '@stencil/core'; import type { Meta, StoryObj } from '@stencil/storybook-plugin'; import capitalize from 'lodash.capitalize'; -import type { Button } from './button'; import { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/button.types'; +import type { Button } from './button'; // prettier-ignore const styles = { diff --git a/src/components/common/button/button.tsx b/src/components/common/button/button.tsx index ebcc07aa..1790791e 100644 --- a/src/components/common/button/button.tsx +++ b/src/components/common/button/button.tsx @@ -1,10 +1,9 @@ import type { EventEmitter } from '@stencil/core'; import { Component, Event, h, Prop } from '@stencil/core'; +import { Button as ButtonComponent } from 'common/Button/Button'; import type { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/button.types'; -import { Button as ButtonComponent } from 'common/Button/Button'; - @Component({ tag: 'mvx-button', styleUrl: 'button.scss', diff --git a/src/components/common/copy-button/copy-button.tsx b/src/components/common/copy-button/copy-button.tsx index c9c03909..de7a48a4 100644 --- a/src/components/common/copy-button/copy-button.tsx +++ b/src/components/common/copy-button/copy-button.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, State, h } from '@stencil/core'; +import { Component, h,Prop, State } from '@stencil/core'; import { CopyButton as CopyButtonComponent } from 'common/CopyButton/CopyButton'; import { getCopyClickAction } from 'common/CopyButton/getCopyClickAction'; diff --git a/src/components/common/tooltip/tooltip.tsx b/src/components/common/tooltip/tooltip.tsx index 09b19046..20820f87 100644 --- a/src/components/common/tooltip/tooltip.tsx +++ b/src/components/common/tooltip/tooltip.tsx @@ -1,4 +1,5 @@ -import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core'; +import type { EventEmitter} from '@stencil/core'; +import { Component, Event, h, Prop, State } from '@stencil/core'; import { Tooltip as TooltipComponent } from 'common/Tooltip/Tooltip'; @Component({ diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx index af57efb4..fe2b9eeb 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx @@ -1,12 +1,11 @@ import { h } from '@stencil/core'; +import classNames from 'classnames'; import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; +import type { DecodeMethodEnum } from '../../sign-transactions-panel.types'; import state from '../../signTransactionsPanelStore'; - -import styles from './signTransactionsAdvanced.styles'; import { SignTransactionsAdvancedData } from './components/SignTransactionsAdvancedData/SignTransactionsAdvancedData'; -import { DecodeMethodEnum } from '../../sign-transactions-panel.types'; -import classNames from 'classnames'; +import styles from './signTransactionsAdvanced.styles'; interface SignTransactionsAdvancedPropsType { decodeMethod?: DecodeMethodEnum; diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx index 1e08ba37..08ac8b92 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx @@ -1,14 +1,13 @@ import { Fragment, h } from '@stencil/core'; +import classNames from 'classnames'; +import { Tooltip } from 'common/Tooltip/Tooltip'; import { DecodeMethodEnum } from 'components/functional/sign-transactions-panel/sign-transactions-panel.types'; import state from 'components/functional/sign-transactions-panel/signTransactionsPanelStore'; import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; -import styles from './signTransactionsAdvancedData.styles' - -import { getProcessedHighlightedData } from './helpers/getProcessedHighlightedData'; import { SignTransactionsAdvancedDataDecode } from './components/SignTransactionsAdvancedDataDecode/SignTransactionsAdvancedDataDecode'; -import classNames from 'classnames'; -import { Tooltip } from 'common/Tooltip/Tooltip'; +import { getProcessedHighlightedData } from './helpers/getProcessedHighlightedData'; +import styles from './signTransactionsAdvancedData.styles' export interface IDataHightlight { beforeHighlight?: string; diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx index 7b1f40e0..cb1762d4 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx @@ -1,15 +1,15 @@ import { Fragment, h } from '@stencil/core'; import classNames from 'classnames'; +import { Button } from 'common/Button/Button'; +import { CopyButton } from 'common/CopyButton/CopyButton'; +import { ExplorerLink } from 'common/ExplorerLink/ExplorerLink'; import { Icon } from 'common/Icon'; +import { Tooltip } from 'common/Tooltip/Tooltip'; +import { Trim } from 'common/Trim/Trim'; import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; import state from '../../signTransactionsPanelStore'; import styles from './signTransactionsFooter.styles'; -import { CopyButton } from 'common/CopyButton/CopyButton'; -import { Tooltip } from 'common/Tooltip/Tooltip'; -import { Button } from 'common/Button/Button'; -import { ExplorerLink } from 'common/ExplorerLink/ExplorerLink'; -import { Trim } from 'common/Trim/Trim'; let isWaitingForSignature: boolean = false; let lastCommonData = { ...state.commonData }; diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx index de889fa3..ccbd8355 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx @@ -1,6 +1,7 @@ import { h } from '@stencil/core'; import { Icon } from 'common/Icon'; import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; + import styles from './sign-transactions-header.styles'; interface SignTransactionsHeaderPropsType { diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx index 2cc83207..6d71b50b 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx @@ -1,12 +1,11 @@ import { h } from '@stencil/core'; +import classNames from 'classnames'; import { Icon } from 'common/Icon'; +import { Trim } from 'common/Trim/Trim'; import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; import { handleAmountResize } from '../../helpers'; -import classNames from 'classnames'; - import styles from './signTransactionsOverview.styles'; -import { Trim } from 'common/Trim/Trim'; interface SignTransactionsOverviewPropsType { identifier: string; diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx index 3c2ea7db..84d515bc 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx @@ -1,20 +1,19 @@ import { Component, h, Method, State } from '@stencil/core'; +import { getCopyClickAction } from 'common/CopyButton/getCopyClickAction'; import { ANIMATION_DELAY_PROMISE } from 'components/visual/side-panel/side-panel.constants'; import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; import { ConnectionMonitor } from 'utils/ConnectionMonitor'; import type { IEventBus } from 'utils/EventBus'; import { EventBus } from 'utils/EventBus'; -import type { IOverviewProps, ISignTransactionsPanelData } from './sign-transactions-panel.types'; -import { DecodeMethodEnum, SignEventsEnum, TransactionTabsEnum } from './sign-transactions-panel.types'; -import state, { resetState } from './signTransactionsPanelStore'; -import { SignTransactionsFooter } from './components/SignTransactionsFooter/SignTransactionsFooter'; -import { getCopyClickAction } from 'common/CopyButton/getCopyClickAction'; -import { SignTransactionsOverview } from './components/SignTransactionsOverview/SignTransactionsOverview'; import { SignTransactionsAdvanced } from './components/SignTransactionsAdvanced/SignTransactionsAdvanced'; +import { SignTransactionsFooter } from './components/SignTransactionsFooter/SignTransactionsFooter'; import { SignTransactionsHeader } from './components/SignTransactionsHeader/SignTransactionsHeader'; - +import { SignTransactionsOverview } from './components/SignTransactionsOverview/SignTransactionsOverview'; import styles from './sign-transactions-panel.styles'; +import type { IOverviewProps, ISignTransactionsPanelData } from './sign-transactions-panel.types'; +import { DecodeMethodEnum, SignEventsEnum, TransactionTabsEnum } from './sign-transactions-panel.types'; +import state, { resetState } from './signTransactionsPanelStore'; @Component({ tag: 'mvx-sign-transactions-panel', diff --git a/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-content/transaction-toast-content.tsx b/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-content/transaction-toast-content.tsx index c99e27c4..545a3df7 100644 --- a/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-content/transaction-toast-content.tsx +++ b/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-content/transaction-toast-content.tsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import { FormatAmount } from 'common/FormatAmount/FormatAmount'; import { Icon } from 'common/Icon'; import { IconSizeEnumType, TransactionAssetIcon } from 'common/TransactionAssetIcon/TransactionAssetIcon'; +import { Trim } from 'common/Trim/Trim'; import { getAmountParts } from 'components/functional/toasts-list/helpers'; import type { ITransactionListItem } from 'components/visual/transaction-list-item/transaction-list-item.types'; import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; @@ -11,7 +12,6 @@ import { TransactionStatusEnum } from 'constants/transactionStatus.enum'; import { getIsTransactionFailed } from 'utils/getTransactionStatus'; import type { IToastDataState } from '../../transaction-toast.type'; -import { Trim } from 'common/Trim/Trim'; // prettier-ignore const styles = { diff --git a/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx b/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx index 3c167cf2..1f636617 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx +++ b/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx @@ -1,8 +1,8 @@ import { h } from '@stencil/core'; import { Icon } from 'common/Icon'; -import styles from './unlockPanelFooter.styles' import unlockPanelWalletImg from '../../../../../assets/unlock-panel-wallet.webp'; +import styles from './unlockPanelFooter.styles' export function UnlockPanelFooter({ walletAddress }: { walletAddress: string }) { const handleWalletClick = (event: MouseEvent) => { diff --git a/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx b/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx index b6b1a91e..062603a0 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx +++ b/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx @@ -1,8 +1,9 @@ import { h } from '@stencil/core'; import classNames from 'classnames'; import { type IProviderBase, ProviderTypeEnum } from 'types/provider.types'; -import styles from './unlockPanelGroup.styles'; + import { UnlockProviderButton } from '../UnlockProviderButton'; +import styles from './unlockPanelGroup.styles'; export enum UnlockPanelGroupSlotEnum { groupLabel = 'group-label', diff --git a/src/components/functional/unlock-panel/unlock-panel.tsx b/src/components/functional/unlock-panel/unlock-panel.tsx index 788d755b..f17bdf73 100644 --- a/src/components/functional/unlock-panel/unlock-panel.tsx +++ b/src/components/functional/unlock-panel/unlock-panel.tsx @@ -7,11 +7,11 @@ import { ConnectionMonitor } from 'utils/ConnectionMonitor'; import type { IEventBus } from 'utils/EventBus'; import { EventBus } from 'utils/EventBus'; +import { UnlockPanelFooter, UnlockPanelGroup } from './components'; import { getIsExtensionAvailable, getIsMetaMaskAvailable } from './helpers'; +import styles from './unlock-panel.styles'; import type { IUnlockPanelManagerData } from './unlock-panel.types'; import { UnlockPanelEventsEnum } from './unlock-panel.types'; -import { UnlockPanelFooter, UnlockPanelGroup } from './components'; -import styles from './unlock-panel.styles'; @Component({ tag: 'mvx-unlock-panel', diff --git a/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts b/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts index f8ba557c..3672ccab 100644 --- a/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts +++ b/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts @@ -1,8 +1,8 @@ import { newSpecPage } from '@stencil/core/testing'; import { Trim } from 'common/Trim/Trim'; -import { ExplorerLink } from '../../../common/explorer-link/explorer-link'; import { CopyButton } from '../../../common/copy-button/copy-button'; +import { ExplorerLink } from '../../../common/explorer-link/explorer-link'; import { Tooltip } from '../../../common/tooltip/tooltip'; import { DataWithExplorerLink } from '../data-with-explorer-link'; diff --git a/src/components/visual/index.ts b/src/components/visual/index.ts deleted file mode 100644 index ad402ac1..00000000 --- a/src/components/visual/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './address-table/address-table'; diff --git a/src/components/visual/transaction-list-item/transaction-list-item.tsx b/src/components/visual/transaction-list-item/transaction-list-item.tsx index c59443e8..5a61ba89 100644 --- a/src/components/visual/transaction-list-item/transaction-list-item.tsx +++ b/src/components/visual/transaction-list-item/transaction-list-item.tsx @@ -2,11 +2,11 @@ import { Component, h, Prop } from '@stencil/core'; import classNames from 'classnames'; import { FormatAmount } from 'common/FormatAmount/FormatAmount'; import { IconSizeEnumType, TransactionAssetIcon } from 'common/TransactionAssetIcon/TransactionAssetIcon'; +import { Trim } from 'common/Trim/Trim'; import { getAmountParts } from 'components/functional/toasts-list/helpers'; import { getIsTransactionFailed } from 'utils/getTransactionStatus'; import type { ITransactionListItem } from './transaction-list-item.types'; -import { Trim } from 'common/Trim/Trim'; @Component({ tag: 'mvx-transaction-list-item', From 5216f9b714653236547e190d2e4e378949bf9ecf Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 25 Nov 2025 16:35:14 +0200 Subject: [PATCH 21/22] Prettierrc fixes --- .../arrow-right-icon/arrow-right-icon.tsx | 5 +- .../ledger-provider-icon.tsx | 6 +- .../magnifying-glass-icon.tsx | 6 +- .../metamask-provider-icon.tsx | 6 +- .../multiversx-logo-icon.tsx | 6 +- .../multiversx-symbol-icon.scss | 2 +- .../wallet-connect-app-gallery-icon.scss | 8 +- .../wallet-connect-app-store-icon.scss | 8 +- .../wallet-connect-google-play-icon.scss | 8 +- .../wallet-provider-icon.tsx | 80 +- src/common/Button/Button.tsx | 69 +- src/common/Button/button.styles.ts | 2 +- src/common/CopyButton/CopyButton.tsx | 53 +- src/common/CopyButton/getCopyClickAction.ts | 32 +- src/common/ExplorerLink/ExplorerLink.tsx | 56 +- src/common/FormatAmount/FormatAmount.tsx | 47 +- .../components/InvalidFormatAmount.tsx | 20 +- .../components/ValidFormatAmount.tsx | 84 +- src/common/FormatAmount/components/index.ts | 2 +- src/common/Icon/Icon.tsx | 4 +- .../ArrowRightIcon/ArrowRightIcon.tsx | 19 +- .../Icon/components/ArrowRightIcon/index.ts | 2 +- .../ArrowsRotateIcon/ArrowsRotateIcon.tsx | 12 +- .../Icon/components/ArrowsRotateIcon/index.ts | 2 +- .../Icon/components/BanIcon/BanIcon.tsx | 12 +- src/common/Icon/components/BanIcon/index.ts | 2 +- .../CircleCheckIcon/CircleCheckIcon.tsx | 12 +- .../Icon/components/CircleCheckIcon/index.ts | 2 +- .../CircleInfoIcon/CircleInfoIcon.tsx | 12 +- .../Icon/components/CircleInfoIcon/index.ts | 2 +- .../Icon/components/CoinsIcon/CoinsIcon.tsx | 12 +- src/common/Icon/components/CoinsIcon/index.ts | 2 +- .../HourglassIcon/HourglassIcon.tsx | 12 +- .../Icon/components/HourglassIcon/index.ts | 2 +- .../components/SpinnerIcon/SpinnerIcon.tsx | 22 +- .../Icon/components/SpinnerIcon/index.ts | 2 +- src/common/Icon/icon.types.ts | 2 +- src/common/Tooltip/Tooltip.tsx | 135 +- src/common/Trim/Trim.tsx | 294 +- src/common/Trim/trim.styles.ts | 2 +- .../UnlockButton/unlockButton.styles.ts | 2 +- src/components.d.ts | 3619 ++++++++++------- src/components/common/button/button.scss | 2 +- .../common/copy-button/copy-button.tsx | 4 +- .../copy-button/tests/copy-button.spec.ts | 1 - .../common/format-amount/format-amount.tsx | 24 +- src/components/common/tooltip/tooltip.scss | 2 +- src/components/common/tooltip/tooltip.tsx | 3 +- src/components/common/trim/tests/trim.e2e.tsx | 6 +- src/components/common/trim/trim.tsx | 8 +- .../TransactionAccountName/index.ts | 2 +- .../TransactionAccount/components/index.ts | 2 +- .../components/TransactionAccount/index.ts | 2 +- .../TransactionAge/TransactionAge.tsx | 40 +- .../components/TransactionAge/index.ts | 2 +- .../tests/transaction-age.spec.tsx | 7 +- .../components/TransactionHash/index.ts | 2 +- .../TransactionIcon/TransactionIcon.tsx | 31 +- .../TransactionIcon/getValidIcon.ts | 14 +- .../components/TransactionIcon/index.ts | 2 +- .../TransactionMethod/TransactionMethod.tsx | 32 +- .../components/TransactionMethod/index.ts | 2 +- .../tests/transaction-method.spec.tsx | 12 +- .../components/TransactionShards/index.ts | 2 +- .../components/TransactionValue/index.ts | 2 +- .../transactions-table/components/index.ts | 2 +- .../transactions-table.scss | 2 +- .../transactions-table.styles.ts | 2 +- .../transactions-table/transactions-table.tsx | 11 +- .../transactions-table.type.ts | 2 +- .../notifications-feed/notifications-feed.tsx | 4 +- .../SignTransactionsAdvanced.tsx | 28 +- .../SignTransactionsAdvancedData.tsx | 27 +- .../SignTransactionsAdvancedDataDecode.tsx | 6 +- .../signTransactionsAdvancedData.styles.ts | 2 +- .../signTransactionsAdvanced.styles.ts | 2 +- .../SignTransactionsFooter.tsx | 23 +- .../signTransactionsFooter.styles.ts | 41 +- .../SignTransactionsHeader.tsx | 10 +- .../SignTransactionsOverview.tsx | 45 +- .../signTransactionsOverview.styles.ts | 2 +- .../sign-transactions-panel.scss | 22 +- .../sign-transactions-panel.styles.ts | 2 +- .../sign-transactions-panel.tsx | 9 +- .../custom-create-toast/custom-toast.scss | 2 +- .../custom-create-toast/custom-toast.tsx | 8 +- .../components/simple-toast/simple-toast.scss | 2 +- .../components/simple-toast/simple-toast.tsx | 8 +- .../components/custom-toast/generic-toast.tsx | 20 +- .../transaction-toast-content.scss | 2 +- .../tests/transaction-toast-details.e2e.ts | 6 +- .../transaction-toast/transaction-toast.scss | 4 +- .../UnlockPanelFooter/UnlockPanelFooter.tsx | 5 +- .../components/UnlockPanelFooter/index.ts | 2 +- .../unlockPanelFooter.styles.ts | 2 +- .../UnlockPanelGroup/UnlockPanelGroup.tsx | 4 +- .../components/UnlockPanelGroup/index.ts | 2 +- .../unlockPanelGroup.styles.ts | 2 +- .../UnlockProviderButton.tsx | 4 +- .../components/UnlockProviderButton/index.ts | 2 +- .../unlock-panel/components/index.ts | 2 +- .../functional/unlock-panel/unlock-panel.scss | 2 +- .../unlock-panel/unlock-panel.styles.ts | 2 +- .../functional/unlock-panel/unlock-panel.tsx | 8 +- .../wallet-connect-download.scss | 2 +- .../tests/data-with-explorer-link.spec.ts | 2 +- .../helpers/getPagination/getPagination.ts | 13 +- .../transaction-list-item.scss | 4 +- src/constants/transactionStatus.enum.ts | 16 +- src/global/tailwind.css | 2 +- src/setupTests.ts | 10 +- src/utils/getTransactionStatus.ts | 6 +- 112 files changed, 3032 insertions(+), 2245 deletions(-) diff --git a/src/assets/icons/arrow-right-icon/arrow-right-icon.tsx b/src/assets/icons/arrow-right-icon/arrow-right-icon.tsx index 292f9595..98f25494 100644 --- a/src/assets/icons/arrow-right-icon/arrow-right-icon.tsx +++ b/src/assets/icons/arrow-right-icon/arrow-right-icon.tsx @@ -15,7 +15,10 @@ export class ArrowRightIcon { viewBox="0 0 448 512" class={{ 'arrow-right-icon': true, [this.class]: Boolean(this.class) }} > - + ); } diff --git a/src/assets/icons/ledger-provider-icon/ledger-provider-icon.tsx b/src/assets/icons/ledger-provider-icon/ledger-provider-icon.tsx index 118f1404..f939aa65 100644 --- a/src/assets/icons/ledger-provider-icon/ledger-provider-icon.tsx +++ b/src/assets/icons/ledger-provider-icon/ledger-provider-icon.tsx @@ -10,7 +10,11 @@ export class LedgerProviderIcon { render() { return ( - + + ); diff --git a/src/assets/icons/metamask-provider-icon/metamask-provider-icon.tsx b/src/assets/icons/metamask-provider-icon/metamask-provider-icon.tsx index 173db6a9..ed66d905 100644 --- a/src/assets/icons/metamask-provider-icon/metamask-provider-icon.tsx +++ b/src/assets/icons/metamask-provider-icon/metamask-provider-icon.tsx @@ -10,7 +10,11 @@ export class MetaMaskProviderIcon { render() { return ( - + + + - + - + - + - + - + @@ -83,19 +115,47 @@ export class WalletProviderIcon { - + - + - + - + diff --git a/src/common/Button/Button.tsx b/src/common/Button/Button.tsx index dfcbe799..33e4236c 100644 --- a/src/common/Button/Button.tsx +++ b/src/common/Button/Button.tsx @@ -4,36 +4,45 @@ import styles from './button.styles'; import { ButtonSizeEnum, ButtonVariantEnum } from './button.types'; interface ButtonPropsType { - class?: string; - dataTestId?: string; - disabled?: boolean; - size?: `${ButtonSizeEnum}`; - variant?: `${ButtonVariantEnum}`; - onClick?: (event: MouseEvent) => void; + class?: string; + dataTestId?: string; + disabled?: boolean; + size?: `${ButtonSizeEnum}`; + variant?: `${ButtonVariantEnum}`; + onClick?: (event: MouseEvent) => void; } -export function Button({ class: className = '', dataTestId = '', disabled = false, size = 'large', variant = 'primary', onClick }: ButtonPropsType, children?: any) { - return ( - - ); - +export function Button( + { + class: className = '', + dataTestId = '', + disabled = false, + size = 'large', + variant = 'primary', + onClick, + }: ButtonPropsType, + children?: any, +) { + return ( + + ); } diff --git a/src/common/Button/button.styles.ts b/src/common/Button/button.styles.ts index d073a7ae..4b59fba3 100644 --- a/src/common/Button/button.styles.ts +++ b/src/common/Button/button.styles.ts @@ -8,4 +8,4 @@ export default { buttonSecondarySmall: 'button-secondary-small mvx:after:rounded-xl', buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75', buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100' -} satisfies Record; \ No newline at end of file +} satisfies Record; diff --git a/src/common/CopyButton/CopyButton.tsx b/src/common/CopyButton/CopyButton.tsx index 9880c6ee..88fac9bf 100644 --- a/src/common/CopyButton/CopyButton.tsx +++ b/src/common/CopyButton/CopyButton.tsx @@ -9,30 +9,35 @@ const styles = { } satisfies Record; interface CopyButtonPropsType { - iconClass?: string; - class?: string; - text: string; - isSuccessOnCopy?: boolean; - handleCopyButtonClick?: (event: MouseEvent) => void; + iconClass?: string; + class?: string; + text: string; + isSuccessOnCopy?: boolean; + handleCopyButtonClick?: (event: MouseEvent) => void; } -export function CopyButton({ iconClass, class: className, isSuccessOnCopy, handleCopyButtonClick }: CopyButtonPropsType) { - return ( -
handleCopyButtonClick?.(event)} - class={{ - [styles.copyButton]: true, - [className]: Boolean(className), - }} - > - -
- ); +export function CopyButton({ + iconClass, + class: className, + isSuccessOnCopy, + handleCopyButtonClick, +}: CopyButtonPropsType) { + return ( +
handleCopyButtonClick?.(event)} + class={{ + [styles.copyButton]: true, + [className]: Boolean(className), + }} + > + +
+ ); } diff --git a/src/common/CopyButton/getCopyClickAction.ts b/src/common/CopyButton/getCopyClickAction.ts index 322cea44..e37b3df9 100644 --- a/src/common/CopyButton/getCopyClickAction.ts +++ b/src/common/CopyButton/getCopyClickAction.ts @@ -1,26 +1,26 @@ import { copyToClipboard } from 'utils/copyToClipboard'; interface CopyHandlerOptions { - onSuccessChange?: (isSuccess: boolean) => void; + onSuccessChange?: (isSuccess: boolean) => void; } export function getCopyClickAction({ onSuccessChange }: CopyHandlerOptions) { - let timeoutId: number | null = null; + let timeoutId: number | null = null; - return async (event: MouseEvent, text?: string) => { - const trimmedText = text ? text.trim() : text; - const success = await copyToClipboard(trimmedText); + return async (event: MouseEvent, text?: string) => { + const trimmedText = text ? text.trim() : text; + const success = await copyToClipboard(trimmedText); - event.preventDefault(); - event.stopPropagation(); + event.preventDefault(); + event.stopPropagation(); - if (onSuccessChange) { - onSuccessChange(success); + if (onSuccessChange) { + onSuccessChange(success); - window.clearTimeout(timeoutId); - if (success) { - timeoutId = window.setTimeout(() => onSuccessChange(false), 2000); - } - } - }; -} \ No newline at end of file + window.clearTimeout(timeoutId); + if (success) { + timeoutId = window.setTimeout(() => onSuccessChange(false), 2000); + } + } + }; +} diff --git a/src/common/ExplorerLink/ExplorerLink.tsx b/src/common/ExplorerLink/ExplorerLink.tsx index 8e781bd6..443ff9cc 100644 --- a/src/common/ExplorerLink/ExplorerLink.tsx +++ b/src/common/ExplorerLink/ExplorerLink.tsx @@ -8,33 +8,37 @@ const styles = { } satisfies Record; interface ExplorerLinkPropsType { - class?: string; - iconClass?: string; - dataTestId?: string; - link: string; - hasIcon?: boolean; + class?: string; + iconClass?: string; + dataTestId?: string; + link: string; + hasIcon?: boolean; } -export function ExplorerLink({ class: className, iconClass, dataTestId, link, hasIcon }: ExplorerLinkPropsType, children?: JSX.Element) { - if (!link) { - return null; - } - - return ( - - {hasIcon ? - () - : children} - - ); +export function ExplorerLink( + { class: className, iconClass, dataTestId, link, hasIcon }: ExplorerLinkPropsType, + children?: JSX.Element, +) { + if (!link) { + return null; + } + return ( + + {hasIcon ? ( + + ) : ( + children + )} + + ); } diff --git a/src/common/FormatAmount/FormatAmount.tsx b/src/common/FormatAmount/FormatAmount.tsx index f6e082b0..f0b2bb7d 100644 --- a/src/common/FormatAmount/FormatAmount.tsx +++ b/src/common/FormatAmount/FormatAmount.tsx @@ -1,19 +1,38 @@ -import { InvalidFormatAmount, ValidFormatAmount } from "./components"; +import { InvalidFormatAmount, ValidFormatAmount } from './components'; interface FormatAmountPropsType { - class?: string; - dataTestId?: string; - isValid: boolean; - label?: string; - labelClass?: string; - showLabel?: boolean; - valueDecimal: string; - valueInteger: string; - decimalClass?: string; + class?: string; + dataTestId?: string; + isValid: boolean; + label?: string; + labelClass?: string; + showLabel?: boolean; + valueDecimal: string; + valueInteger: string; + decimalClass?: string; } -export function FormatAmount({ class: className, dataTestId, isValid, label, labelClass, showLabel = true, valueDecimal, valueInteger, decimalClass }: FormatAmountPropsType) { - return isValid ? - ValidFormatAmount({ dataTestId, class: className, valueInteger, valueDecimal, decimalClass, showLabel, label, labelClass }) - : InvalidFormatAmount({ dataTestId, class: className }); +export function FormatAmount({ + class: className, + dataTestId, + isValid, + label, + labelClass, + showLabel = true, + valueDecimal, + valueInteger, + decimalClass, +}: FormatAmountPropsType) { + return isValid + ? ValidFormatAmount({ + dataTestId, + class: className, + valueInteger, + valueDecimal, + decimalClass, + showLabel, + label, + labelClass, + }) + : InvalidFormatAmount({ dataTestId, class: className }); } diff --git a/src/common/FormatAmount/components/InvalidFormatAmount.tsx b/src/common/FormatAmount/components/InvalidFormatAmount.tsx index 3630d3e9..6bd1ec7f 100644 --- a/src/common/FormatAmount/components/InvalidFormatAmount.tsx +++ b/src/common/FormatAmount/components/InvalidFormatAmount.tsx @@ -7,16 +7,16 @@ const styles = { } satisfies Record; interface InvalidFormatAmountPropsType { - class?: string; - dataTestId?: string; + class?: string; + dataTestId?: string; } export function InvalidFormatAmount({ dataTestId, class: className }: InvalidFormatAmountPropsType) { - return ( - - - ... - - - ); -} \ No newline at end of file + return ( + + + ... + + + ); +} diff --git a/src/common/FormatAmount/components/ValidFormatAmount.tsx b/src/common/FormatAmount/components/ValidFormatAmount.tsx index 4e9d02f4..02d24353 100644 --- a/src/common/FormatAmount/components/ValidFormatAmount.tsx +++ b/src/common/FormatAmount/components/ValidFormatAmount.tsx @@ -11,50 +11,50 @@ const styles = { } satisfies Record; interface ValidFormatAmountPropsType { - class?: string; - dataTestId?: string; - label?: string; - labelClass?: string; - showLabel?: boolean; - valueDecimal: string; - valueInteger: string; - decimalClass?: string; + class?: string; + dataTestId?: string; + label?: string; + labelClass?: string; + showLabel?: boolean; + valueDecimal: string; + valueInteger: string; + decimalClass?: string; } export function ValidFormatAmount({ - dataTestId, - class: className, - valueInteger, - valueDecimal, - decimalClass, - showLabel, - label, - labelClass + dataTestId, + class: className, + valueInteger, + valueDecimal, + decimalClass, + showLabel, + label, + labelClass, }: ValidFormatAmountPropsType) { - return ( - - - {valueInteger} - - {valueDecimal && ( - - {valueDecimal} - - )} - {showLabel && label && ( - - {label} - - )} + return ( + + + {valueInteger} + + {valueDecimal && ( + + {valueDecimal} - ); -} \ No newline at end of file + )} + {showLabel && label && ( + + {label} + + )} + + ); +} diff --git a/src/common/FormatAmount/components/index.ts b/src/common/FormatAmount/components/index.ts index ac8fc2ca..23f4c4a0 100644 --- a/src/common/FormatAmount/components/index.ts +++ b/src/common/FormatAmount/components/index.ts @@ -1,2 +1,2 @@ export * from './InvalidFormatAmount'; -export * from './ValidFormatAmount' \ No newline at end of file +export * from './ValidFormatAmount'; diff --git a/src/common/Icon/Icon.tsx b/src/common/Icon/Icon.tsx index 02af67a0..8ad6fc62 100644 --- a/src/common/Icon/Icon.tsx +++ b/src/common/Icon/Icon.tsx @@ -107,10 +107,10 @@ export const Icon = ({ name, ...properties }: IconPropsType) => { return ; case 'spinner': - return + return ; case 'arrow-right': - return + return ; default: console.error(`No data for the ${name} icon.`); diff --git a/src/common/Icon/components/ArrowRightIcon/ArrowRightIcon.tsx b/src/common/Icon/components/ArrowRightIcon/ArrowRightIcon.tsx index c6a358be..2a0873ab 100644 --- a/src/common/Icon/components/ArrowRightIcon/ArrowRightIcon.tsx +++ b/src/common/Icon/components/ArrowRightIcon/ArrowRightIcon.tsx @@ -1,13 +1,20 @@ import { h } from '@stencil/core'; const styles = { - arrowRightIcon: 'arrow-right-icon mvx:w-4 mvx:h-4 mvx:text-inherit' + arrowRightIcon: 'arrow-right-icon mvx:w-4 mvx:h-4 mvx:text-inherit', } satisfies Record; export const ArrowRightIcon = ({ class: className }: { class?: string }) => ( - - - + + + ); - - diff --git a/src/common/Icon/components/ArrowRightIcon/index.ts b/src/common/Icon/components/ArrowRightIcon/index.ts index 190655e7..6442ab97 100644 --- a/src/common/Icon/components/ArrowRightIcon/index.ts +++ b/src/common/Icon/components/ArrowRightIcon/index.ts @@ -1 +1 @@ -export * from './ArrowRightIcon'; \ No newline at end of file +export * from './ArrowRightIcon'; diff --git a/src/common/Icon/components/ArrowsRotateIcon/ArrowsRotateIcon.tsx b/src/common/Icon/components/ArrowsRotateIcon/ArrowsRotateIcon.tsx index be0c0456..dc1313bc 100644 --- a/src/common/Icon/components/ArrowsRotateIcon/ArrowsRotateIcon.tsx +++ b/src/common/Icon/components/ArrowsRotateIcon/ArrowsRotateIcon.tsx @@ -2,10 +2,10 @@ import { h } from '@stencil/core'; import type { JSXBase } from '@stencil/core/internal'; export const ArrowsRotateIcon = (properties: JSXBase.IntrinsicElements['svg']) => ( - - - + + + ); diff --git a/src/common/Icon/components/ArrowsRotateIcon/index.ts b/src/common/Icon/components/ArrowsRotateIcon/index.ts index 4ad08973..afa025e2 100644 --- a/src/common/Icon/components/ArrowsRotateIcon/index.ts +++ b/src/common/Icon/components/ArrowsRotateIcon/index.ts @@ -1 +1 @@ -export * from './ArrowsRotateIcon' \ No newline at end of file +export * from './ArrowsRotateIcon'; diff --git a/src/common/Icon/components/BanIcon/BanIcon.tsx b/src/common/Icon/components/BanIcon/BanIcon.tsx index bbe6f706..9dfdbce7 100644 --- a/src/common/Icon/components/BanIcon/BanIcon.tsx +++ b/src/common/Icon/components/BanIcon/BanIcon.tsx @@ -2,10 +2,10 @@ import { h } from '@stencil/core'; import type { JSXBase } from '@stencil/core/internal'; export const BanIcon = (properties: JSXBase.IntrinsicElements['svg']) => ( - - - + + + ); diff --git a/src/common/Icon/components/BanIcon/index.ts b/src/common/Icon/components/BanIcon/index.ts index dc05cb85..8a1b461e 100644 --- a/src/common/Icon/components/BanIcon/index.ts +++ b/src/common/Icon/components/BanIcon/index.ts @@ -1 +1 @@ -export * from './BanIcon' \ No newline at end of file +export * from './BanIcon'; diff --git a/src/common/Icon/components/CircleCheckIcon/CircleCheckIcon.tsx b/src/common/Icon/components/CircleCheckIcon/CircleCheckIcon.tsx index a02f00fe..d822f04d 100644 --- a/src/common/Icon/components/CircleCheckIcon/CircleCheckIcon.tsx +++ b/src/common/Icon/components/CircleCheckIcon/CircleCheckIcon.tsx @@ -2,10 +2,10 @@ import { h } from '@stencil/core'; import type { JSXBase } from '@stencil/core/internal'; export const CircleCheckIcon = (properties: JSXBase.IntrinsicElements['svg']) => ( - - - + + + ); diff --git a/src/common/Icon/components/CircleCheckIcon/index.ts b/src/common/Icon/components/CircleCheckIcon/index.ts index ad952553..8b2b1126 100644 --- a/src/common/Icon/components/CircleCheckIcon/index.ts +++ b/src/common/Icon/components/CircleCheckIcon/index.ts @@ -1 +1 @@ -export * from './CircleCheckIcon' \ No newline at end of file +export * from './CircleCheckIcon'; diff --git a/src/common/Icon/components/CircleInfoIcon/CircleInfoIcon.tsx b/src/common/Icon/components/CircleInfoIcon/CircleInfoIcon.tsx index 3b10e04a..59b7d7f7 100644 --- a/src/common/Icon/components/CircleInfoIcon/CircleInfoIcon.tsx +++ b/src/common/Icon/components/CircleInfoIcon/CircleInfoIcon.tsx @@ -2,10 +2,10 @@ import { h } from '@stencil/core'; import type { JSXBase } from '@stencil/core/internal'; export const CircleInfoIcon = (properties: JSXBase.IntrinsicElements['svg']) => ( - - - + + + ); diff --git a/src/common/Icon/components/CircleInfoIcon/index.ts b/src/common/Icon/components/CircleInfoIcon/index.ts index 4e816048..0a21046f 100644 --- a/src/common/Icon/components/CircleInfoIcon/index.ts +++ b/src/common/Icon/components/CircleInfoIcon/index.ts @@ -1 +1 @@ -export * from './CircleInfoIcon' \ No newline at end of file +export * from './CircleInfoIcon'; diff --git a/src/common/Icon/components/CoinsIcon/CoinsIcon.tsx b/src/common/Icon/components/CoinsIcon/CoinsIcon.tsx index c27ce00e..61d14b4a 100644 --- a/src/common/Icon/components/CoinsIcon/CoinsIcon.tsx +++ b/src/common/Icon/components/CoinsIcon/CoinsIcon.tsx @@ -2,10 +2,10 @@ import { h } from '@stencil/core'; import type { JSXBase } from '@stencil/core/internal'; export const CoinsIcon = (properties: JSXBase.IntrinsicElements['svg']) => ( - - - + + + ); diff --git a/src/common/Icon/components/CoinsIcon/index.ts b/src/common/Icon/components/CoinsIcon/index.ts index 9f35eb0a..2c25bbbc 100644 --- a/src/common/Icon/components/CoinsIcon/index.ts +++ b/src/common/Icon/components/CoinsIcon/index.ts @@ -1 +1 @@ -export * from './CoinsIcon' \ No newline at end of file +export * from './CoinsIcon'; diff --git a/src/common/Icon/components/HourglassIcon/HourglassIcon.tsx b/src/common/Icon/components/HourglassIcon/HourglassIcon.tsx index 18b68ced..c2ab4b22 100644 --- a/src/common/Icon/components/HourglassIcon/HourglassIcon.tsx +++ b/src/common/Icon/components/HourglassIcon/HourglassIcon.tsx @@ -2,10 +2,10 @@ import { h } from '@stencil/core'; import type { JSXBase } from '@stencil/core/internal'; export const HourglassIcon = (properties: JSXBase.IntrinsicElements['svg']) => ( - - - + + + ); diff --git a/src/common/Icon/components/HourglassIcon/index.ts b/src/common/Icon/components/HourglassIcon/index.ts index 40fb5498..864b7c2c 100644 --- a/src/common/Icon/components/HourglassIcon/index.ts +++ b/src/common/Icon/components/HourglassIcon/index.ts @@ -1 +1 @@ -export * from './HourglassIcon' \ No newline at end of file +export * from './HourglassIcon'; diff --git a/src/common/Icon/components/SpinnerIcon/SpinnerIcon.tsx b/src/common/Icon/components/SpinnerIcon/SpinnerIcon.tsx index 0c6ee5ac..ee728595 100644 --- a/src/common/Icon/components/SpinnerIcon/SpinnerIcon.tsx +++ b/src/common/Icon/components/SpinnerIcon/SpinnerIcon.tsx @@ -1,16 +1,20 @@ import { h } from '@stencil/core'; const styles = { - spinnerIcon: 'spinner-icon mvx:w-4 mvx:h-4 mvx:fill-secondary-text mvx:animate-spinner' + spinnerIcon: 'spinner-icon mvx:w-4 mvx:h-4 mvx:fill-secondary-text mvx:animate-spinner', } satisfies Record; export const SpinnerIcon = ({ class: className }: { class?: string }) => ( - - - + + + ); - - diff --git a/src/common/Icon/components/SpinnerIcon/index.ts b/src/common/Icon/components/SpinnerIcon/index.ts index 2a092c9d..f271e5f2 100644 --- a/src/common/Icon/components/SpinnerIcon/index.ts +++ b/src/common/Icon/components/SpinnerIcon/index.ts @@ -1 +1 @@ -export * from './SpinnerIcon'; \ No newline at end of file +export * from './SpinnerIcon'; diff --git a/src/common/Icon/icon.types.ts b/src/common/Icon/icon.types.ts index c699f9a0..cdd2c90d 100644 --- a/src/common/Icon/icon.types.ts +++ b/src/common/Icon/icon.types.ts @@ -26,7 +26,7 @@ export enum IconNamesEnum { coins = 'coins', arrowsRotate = 'arrows-rotate', spinner = 'spinner', - arrowRight = 'arrow-right' + arrowRight = 'arrow-right', } export type IconPropsType = JSXBase.IntrinsicElements['svg'] & { diff --git a/src/common/Tooltip/Tooltip.tsx b/src/common/Tooltip/Tooltip.tsx index e8624165..7f06f46c 100644 --- a/src/common/Tooltip/Tooltip.tsx +++ b/src/common/Tooltip/Tooltip.tsx @@ -10,78 +10,89 @@ const styles = { } satisfies Record; interface TooltipPropsType { - position?: 'top' | 'bottom'; - triggerOnClick?: boolean; - trigger: HTMLElement; - class?: string; - isTooltipVisible?: boolean; - onVisibilityChange?: (isTooltipVisible: boolean) => void; + position?: 'top' | 'bottom'; + triggerOnClick?: boolean; + trigger: HTMLElement; + class?: string; + isTooltipVisible?: boolean; + onVisibilityChange?: (isTooltipVisible: boolean) => void; } -export function Tooltip({ position = 'top', triggerOnClick = false, trigger, class: className, onVisibilityChange, isTooltipVisible = false }: TooltipPropsType, children?: any) { - const setTooltipVisible = (isTooltipVisible: boolean) => { - onVisibilityChange?.(isTooltipVisible); - } - - const handleEllipsisClick = (event: MouseEvent) => { - if (!triggerOnClick) { - return; - } +export function Tooltip( + { + position = 'top', + triggerOnClick = false, + trigger, + class: className, + onVisibilityChange, + isTooltipVisible = false, + }: TooltipPropsType, + children?: any, +) { + const setTooltipVisible = (isTooltipVisible: boolean) => { + onVisibilityChange?.(isTooltipVisible); + }; - event.preventDefault(); - setTooltipVisible(!isTooltipVisible); + const handleEllipsisClick = (event: MouseEvent) => { + if (!triggerOnClick) { + return; } - const handleFocusOut = (event: FocusEvent) => { - const relatedTarget = event.relatedTarget as Node; - const currentTarget = event.currentTarget as HTMLElement; + event.preventDefault(); + setTooltipVisible(!isTooltipVisible); + }; - if (!currentTarget.contains(relatedTarget)) { - setTooltipVisible(false); - } - } + const handleFocusOut = (event: FocusEvent) => { + const relatedTarget = event.relatedTarget as Node; + const currentTarget = event.currentTarget as HTMLElement; - const handleMouseEvent = (isTooltipVisible: boolean) => { - if (triggerOnClick) { - return; - } + if (!currentTarget.contains(relatedTarget)) { + setTooltipVisible(false); + } + }; - return (event: MouseEvent) => { - event.preventDefault(); - setTooltipVisible(isTooltipVisible); - }; + const handleMouseEvent = (isTooltipVisible: boolean) => { + if (triggerOnClick) { + return; } - return ( + return (event: MouseEvent) => { + event.preventDefault(); + setTooltipVisible(isTooltipVisible); + }; + }; + + return ( +
+ {isTooltipVisible && (
- {isTooltipVisible && ( -
-
event.stopPropagation()} - > - {children} -
-
- )} - - {trigger} +
event.stopPropagation()} + > + {children} +
- ); -} \ No newline at end of file + )} + + {trigger} +
+ ); +} diff --git a/src/common/Trim/Trim.tsx b/src/common/Trim/Trim.tsx index ae2dd63b..0010a1f9 100644 --- a/src/common/Trim/Trim.tsx +++ b/src/common/Trim/Trim.tsx @@ -3,181 +3,175 @@ import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; import { ELLIPSIS } from 'constants/htmlStrings'; import { safeWindow } from 'constants/window.constants'; -import styles from './trim.styles' +import styles from './trim.styles'; interface TrimPropsType { - dataTestId?: string; - class?: string; - text: string; + dataTestId?: string; + class?: string; + text: string; } -export function Trim({ - dataTestId = DataTestIdsEnum.trim, - class: className, - text -}: TrimPropsType) { - let fullWidthUntrimmedElementReference: HTMLDivElement; - let trimElementReference: HTMLDivElement; - let resizeObserver: ResizeObserver; - let currentTrimFontSize = '1rem'; - let trimFullElement: HTMLDivElement; - let trimWrapperElement: HTMLDivElement; - let isCurrentlyOverflowing: boolean | null = null; - let isCheckingOverflow = false; - - const handleTrimElementReference = (element: HTMLDivElement) => { - if (element) { - trimElementReference = element; - setupResizeObserver(); - requestAnimationFrame(checkOverflow); - } +export function Trim({ dataTestId = DataTestIdsEnum.trim, class: className, text }: TrimPropsType) { + let fullWidthUntrimmedElementReference: HTMLDivElement; + let trimElementReference: HTMLDivElement; + let resizeObserver: ResizeObserver; + let currentTrimFontSize = '1rem'; + let trimFullElement: HTMLDivElement; + let trimWrapperElement: HTMLDivElement; + let isCurrentlyOverflowing: boolean | null = null; + let isCheckingOverflow = false; + + const handleTrimElementReference = (element: HTMLDivElement) => { + if (element) { + trimElementReference = element; + setupResizeObserver(); + requestAnimationFrame(checkOverflow); } + }; - const handleFullWidthTrimElementReference = (element: HTMLDivElement) => { - if (element) { - fullWidthUntrimmedElementReference = element; - } + const handleFullWidthTrimElementReference = (element: HTMLDivElement) => { + if (element) { + fullWidthUntrimmedElementReference = element; } + }; - const handleTrimFullRef = (element: HTMLDivElement) => { - if (element) { - trimFullElement = element; - } - }; + const handleTrimFullRef = (element: HTMLDivElement) => { + if (element) { + trimFullElement = element; + } + }; - const handleTrimWrapperRef = (element: HTMLDivElement) => { - if (element) { - trimWrapperElement = element; - } - }; + const handleTrimWrapperRef = (element: HTMLDivElement) => { + if (element) { + trimWrapperElement = element; + } + }; - const setupResizeObserver = () => { - if (resizeObserver) { - resizeObserver.disconnect(); - } + const setupResizeObserver = () => { + if (resizeObserver) { + resizeObserver.disconnect(); + } - resizeObserver = new ResizeObserver(() => { - checkOverflow(); - }); + resizeObserver = new ResizeObserver(() => { + checkOverflow(); + }); - if (trimElementReference) { - resizeObserver.observe(trimElementReference); - } + if (trimElementReference) { + resizeObserver.observe(trimElementReference); } + }; - const checkOverflow = () => { - if (isCheckingOverflow) { - return; - } + const checkOverflow = () => { + if (isCheckingOverflow) { + return; + } - if (!fullWidthUntrimmedElementReference || !trimElementReference || !trimFullElement || !trimWrapperElement) { - return; - } + if (!fullWidthUntrimmedElementReference || !trimElementReference || !trimFullElement || !trimWrapperElement) { + return; + } - isCheckingOverflow = true; + isCheckingOverflow = true; - if (resizeObserver) { - resizeObserver.disconnect(); + if (resizeObserver) { + resizeObserver.disconnect(); + } + + const getIdentifierClass = (classes: string) => classes.split(' ')[0]; + + const trimFullVisibleClasses = styles.trimFullVisible.split(/\s+/); + const trimWrapperVisibleClasses = styles.trimWrapperVisible.split(/\s+/); + + const hiddenFullWidthElementWidth = fullWidthUntrimmedElementReference.scrollWidth; + const trimmedElementWidth = trimElementReference.clientWidth; + const isTrimElementOverflowing = hiddenFullWidthElementWidth > trimmedElementWidth; + + if (isCurrentlyOverflowing === isTrimElementOverflowing) { + isCheckingOverflow = false; + + setTimeout(() => { + if (resizeObserver && trimElementReference) { + resizeObserver.observe(trimElementReference); } + }); + return; + } + + isCurrentlyOverflowing = isTrimElementOverflowing; + requestAnimationFrame(() => { + if (safeWindow) { + currentTrimFontSize = safeWindow.getComputedStyle(trimElementReference).fontSize; + } - const getIdentifierClass = (classes: string) => classes.split(' ')[0]; + const trimLeftSelector = `.${getIdentifierClass(styles.trimLeft)}`; + const trimRightSelector = `.${getIdentifierClass(styles.trimRight)}`; - const trimFullVisibleClasses = styles.trimFullVisible.split(/\s+/); - const trimWrapperVisibleClasses = styles.trimWrapperVisible.split(/\s+/); + const trimLeftElement = trimElementReference.querySelector(trimLeftSelector) as HTMLElement; + const trimRightElement = trimElementReference.querySelector(trimRightSelector) as HTMLElement; + if (trimLeftElement) { + trimLeftElement.style.fontSize = currentTrimFontSize; + } - const hiddenFullWidthElementWidth = fullWidthUntrimmedElementReference.scrollWidth; - const trimmedElementWidth = trimElementReference.clientWidth; - const isTrimElementOverflowing = hiddenFullWidthElementWidth > trimmedElementWidth; + if (trimRightElement) { + trimRightElement.style.fontSize = currentTrimFontSize; + } - if (isCurrentlyOverflowing === isTrimElementOverflowing) { + if (isTrimElementOverflowing) { + trimFullElement.classList.remove(...trimFullVisibleClasses); + trimWrapperElement.classList.add(...trimWrapperVisibleClasses); + } else { + trimFullElement.classList.add(...trimFullVisibleClasses); + trimWrapperElement.classList.remove(...trimWrapperVisibleClasses); + } - isCheckingOverflow = false; + isCheckingOverflow = false; - setTimeout(() => { - if (resizeObserver && trimElementReference) { - resizeObserver.observe(trimElementReference); - } - }); - return; + requestAnimationFrame(() => { + if (resizeObserver && trimElementReference) { + resizeObserver.observe(trimElementReference); } + }); + }); + }; + + const middleTextIndex = Math.floor(text.length / 2); + const leftHandText = text.slice(0, middleTextIndex); + const rightHandText = text.slice(middleTextIndex); + + return ( +
+
{ + handleFullWidthTrimElementReference(el); + handleTrimFullRef(el); + }} + class={styles.trimFull} + > + {text} +
+ +
+
+
+ {leftHandText} +
+
- isCurrentlyOverflowing = isTrimElementOverflowing; - - requestAnimationFrame(() => { - if (safeWindow) { - currentTrimFontSize = safeWindow.getComputedStyle(trimElementReference).fontSize; - } - - const trimLeftSelector = `.${getIdentifierClass(styles.trimLeft)}`; - const trimRightSelector = `.${getIdentifierClass(styles.trimRight)}`; - - const trimLeftElement = trimElementReference.querySelector(trimLeftSelector) as HTMLElement; - const trimRightElement = trimElementReference.querySelector(trimRightSelector) as HTMLElement; - if (trimLeftElement) { - trimLeftElement.style.fontSize = currentTrimFontSize; - } - - if (trimRightElement) { - trimRightElement.style.fontSize = currentTrimFontSize; - } - - if (isTrimElementOverflowing) { - trimFullElement.classList.remove(...trimFullVisibleClasses); - trimWrapperElement.classList.add(...trimWrapperVisibleClasses); - } else { - trimFullElement.classList.add(...trimFullVisibleClasses); - trimWrapperElement.classList.remove(...trimWrapperVisibleClasses); - } - - isCheckingOverflow = false; - - requestAnimationFrame(() => { - if (resizeObserver && trimElementReference) { - resizeObserver.observe(trimElementReference); - } - }); - }); - }; - - const middleTextIndex = Math.floor(text.length / 2); - const leftHandText = text.slice(0, middleTextIndex); - const rightHandText = text.slice(middleTextIndex); - - return ( -
-
{ - handleFullWidthTrimElementReference(el); - handleTrimFullRef(el); - }} - class={styles.trimFull} - > - {text} -
- -
-
-
- {leftHandText} -
-
- -
-
{ELLIPSIS}
-
- -
-
- {rightHandText} -
-
-
+
+
{ELLIPSIS}
- ); -} \ No newline at end of file + +
+
+ {rightHandText} +
+
+
+
+ ); +} diff --git a/src/common/Trim/trim.styles.ts b/src/common/Trim/trim.styles.ts index 6b3eb196..bd8b8b76 100644 --- a/src/common/Trim/trim.styles.ts +++ b/src/common/Trim/trim.styles.ts @@ -12,4 +12,4 @@ export default { trimRightWrapper: 'trim-right-wrapper mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:whitespace-nowrap mvx:text-right mvx:text-[1px]', trimRight: 'trim-right mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5 mvx:text-clip mvx:-webkit-letter-spacing', trimStoriesWrapper: 'trim-stories-wrapper mvx:text-primary' -} satisfies Record; \ No newline at end of file +} satisfies Record; diff --git a/src/common/UnlockButton/unlockButton.styles.ts b/src/common/UnlockButton/unlockButton.styles.ts index 87dd6af7..8ed46141 100644 --- a/src/common/UnlockButton/unlockButton.styles.ts +++ b/src/common/UnlockButton/unlockButton.styles.ts @@ -7,4 +7,4 @@ export default { unlockButtonStatus: 'unlock-button-status mvx:ml-auto mvx:relative mvx:rounded-3xl mvx:z-1 mvx:leading-none mvx:flex mvx:items-center mvx:py-1 mvx:px-2 mvx:font-medium mvx:gap-1 mvx:text-xs mvx:bg-surface mvx:border mvx:border-solid mvx:border-outline', unlockButtonStatusText: 'unlock-button-status-text mvx:text-accent', unlockButtonStatusIcon: 'unlock-button-status-icon mvx:flex mvx:items-center mvx:text-accent mvx:w-2.5 mvx:h-2.5', -} satisfies Record; \ No newline at end of file +} satisfies Record; diff --git a/src/components.d.ts b/src/components.d.ts index a9d86ead..0ee1b82e 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -4,1564 +4,2137 @@ * This is an autogenerated file created by the Stencil compiler. * 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 { ButtonSizeEnum, ButtonVariantEnum } from "./common/Button/button.types"; -import { CustomToastType, IComponentToast, ISimpleToast } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; -import { IConfirmScreenData, IConnectScreenData, ILedgerConnectPanelData } from "./components/functional/ledger-connect/ledger-connect.types"; -import { IEventBus } from "./utils/EventBus"; -import { ITransactionListItem } from "./components/visual/transaction-list-item/transaction-list-item.types"; -import { LocalJSX as JSX } from "@stencil/core"; -import { ITransactionListItem as ITransactionListItem1 } from "./components/visual/transaction-list-item/transaction-list-item.types"; -import { IToastDataState, ITransactionProgressState } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; -import { TransactionStatusEnum } from "./constants/transactionStatus.enum"; -import { TransactionRowType } from "./components/controlled/transactions-table/transactions-table.type"; -import { IProviderBase } from "./types/provider.types"; -import { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from "./components.d"; -export { IAddressTableData } from "./types/address-table.types"; -export { ButtonSizeEnum, ButtonVariantEnum } from "./common/Button/button.types"; -export { CustomToastType, IComponentToast, ISimpleToast } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; -export { IConfirmScreenData, IConnectScreenData, ILedgerConnectPanelData } from "./components/functional/ledger-connect/ledger-connect.types"; -export { IEventBus } from "./utils/EventBus"; -export { ITransactionListItem } from "./components/visual/transaction-list-item/transaction-list-item.types"; -export { LocalJSX as JSX } from "@stencil/core"; -export { ITransactionListItem as ITransactionListItem1 } from "./components/visual/transaction-list-item/transaction-list-item.types"; -export { IToastDataState, ITransactionProgressState } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; -export { TransactionStatusEnum } from "./constants/transactionStatus.enum"; -export { TransactionRowType } from "./components/controlled/transactions-table/transactions-table.type"; -export { IProviderBase } from "./types/provider.types"; -export { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from "./components.d"; +import { HTMLStencilElement, JSXBase } from '@stencil/core/internal'; +import { IAddressTableData } from './types/address-table.types'; +import { ButtonSizeEnum, ButtonVariantEnum } from './common/Button/button.types'; +import { + CustomToastType, + IComponentToast, + ISimpleToast, +} from './components/functional/toasts-list/components/transaction-toast/transaction-toast.type'; +import { + IConfirmScreenData, + IConnectScreenData, + ILedgerConnectPanelData, +} from './components/functional/ledger-connect/ledger-connect.types'; +import { IEventBus } from './utils/EventBus'; +import { ITransactionListItem } from './components/visual/transaction-list-item/transaction-list-item.types'; +import { LocalJSX as JSX } from '@stencil/core'; +import { ITransactionListItem as ITransactionListItem1 } from './components/visual/transaction-list-item/transaction-list-item.types'; +import { + IToastDataState, + ITransactionProgressState, +} from './components/functional/toasts-list/components/transaction-toast/transaction-toast.type'; +import { TransactionStatusEnum } from './constants/transactionStatus.enum'; +import { TransactionRowType } from './components/controlled/transactions-table/transactions-table.type'; +import { IProviderBase } from './types/provider.types'; +import { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from './components.d'; +export { IAddressTableData } from './types/address-table.types'; +export { ButtonSizeEnum, ButtonVariantEnum } from './common/Button/button.types'; +export { + CustomToastType, + IComponentToast, + ISimpleToast, +} from './components/functional/toasts-list/components/transaction-toast/transaction-toast.type'; +export { + IConfirmScreenData, + IConnectScreenData, + ILedgerConnectPanelData, +} from './components/functional/ledger-connect/ledger-connect.types'; +export { IEventBus } from './utils/EventBus'; +export { ITransactionListItem } from './components/visual/transaction-list-item/transaction-list-item.types'; +export { LocalJSX as JSX } from '@stencil/core'; +export { ITransactionListItem as ITransactionListItem1 } from './components/visual/transaction-list-item/transaction-list-item.types'; +export { + IToastDataState, + ITransactionProgressState, +} from './components/functional/toasts-list/components/transaction-toast/transaction-toast.type'; +export { TransactionStatusEnum } from './constants/transactionStatus.enum'; +export { TransactionRowType } from './components/controlled/transactions-table/transactions-table.type'; +export { IProviderBase } from './types/provider.types'; +export { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from './components.d'; export namespace Components { - interface MvxAddressTable { - "accountScreenData": IAddressTableData; - "selectedIndex": number; - } - interface MvxArcExtensionProviderIcon { - "class"?: string; - "height"?: number; - "width"?: number; - } - interface MvxArrowRightIcon { - "class"?: string; - } - interface MvxBraveExtensionProviderIcon { - "class"?: string; - "height"?: number; - "width"?: number; - } - interface MvxButton { - /** - * @default '' - */ - "class"?: string; - /** - * @default '' - */ - "dataTestId"?: string; - /** - * @default false - */ - "disabled"?: boolean; - /** - * @default 'large' - */ - "size"?: `${ButtonSizeEnum}`; - /** - * @default 'primary' - */ - "variant"?: `${ButtonVariantEnum}`; - } - interface MvxCircleInfoIcon { - "class"?: string; - } - interface MvxCopyButton { - "class"?: string; - "iconClass"?: string; - "text": string; - } - interface MvxCustomToast { - "toast": IComponentToast; - } - interface MvxDataWithExplorerLink { - "class"?: string; - "data": string; - "dataTestId"?: string; - "explorerLink": string; - /** - * @default true - */ - "showCopyButton"?: boolean; - /** - * @default true - */ - "showExplorerButton"?: boolean; - /** - * @default false - */ - "withTooltip"?: boolean; - } - interface MvxDefaultTransactionIconLarge { - "class"?: string; - } - interface MvxDefaultTransactionIconSmall { - "class"?: string; - } - interface MvxEdgeExtensionProviderIcon { - "class"?: string; - "height"?: number; - "width"?: number; - } - interface MvxExplorerLink { - "class"?: string; - "dataTestId"?: string; - "iconClass"?: string; - "link": string; - } - interface MvxExtensionProviderIcon { - "class"?: string; - "height"?: number; - "width"?: number; - } - interface MvxFirefoxExtensionProviderIcon { - "class"?: string; - "height"?: number; - "width"?: number; - } - interface MvxFormatAmount { - "class"?: string; - "dataTestId"?: string; - "decimalClass"?: string; - "isValid": boolean; - "label"?: string; - "labelClass"?: string; - /** - * @default true - */ - "showLabel"?: boolean; - "valueDecimal": string; - "valueInteger": string; - } - interface MvxGenericToast { - "toast": CustomToastType; - } - interface MvxLedgerConfirm { - "confirmScreenData": IConfirmScreenData; - } - interface MvxLedgerConnect { - /** - * @default { accountScreenData: null, confirmScreenData: null, connectScreenData: {}, } - */ - "data": ILedgerConnectPanelData; - "getEventBus": () => Promise; - } - interface MvxLedgerIcon { - "class"?: string; - } - interface MvxLedgerIntro { - "connectScreenData"?: IConnectScreenData; - /** - * @default false - */ - "isAwaiting"?: boolean; - } - interface MvxLedgerProviderIcon { - "class"?: string; - } - interface MvxMagnifyingGlassIcon { - "class"?: string; - } - interface MvxMetamaskProviderIcon { - "class"?: string; - } - interface MvxMultiversxLogoIcon { - "class"?: string; - } - interface MvxMultiversxSymbolIcon { - "class"?: string; - } - interface MvxNotificationsFeed { - "closeWithAnimation": () => Promise; - "getEventBus": () => Promise; - } - 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; - } - interface MvxPasskeyProviderIcon { - "class"?: string; - } - interface MvxPendingTransactionsPanel { - "closeWithAnimation": () => Promise; - "getEventBus": () => Promise; - } - interface MvxPreloader { - "class"?: string; - } - 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; - /** - * @default false - */ - "open": boolean; - "openToSnapPoint": (snapIndex?: number) => Promise; - /** - * @default '' - */ - "sidePanelIdentifier": string; - } - interface MvxSignTransactionsPanel { - "closeWithAnimation": () => Promise; - "getEventBus": () => Promise; - } - interface MvxSimpleToast { - "toast": ISimpleToast; - } - interface MvxSpinnerIcon { - "class"?: string; - } - interface MvxToastList { - "getEventBus": () => Promise; - } - interface MvxTooltip { - "class"?: string; - /** - * @default 'top' - */ - "position": 'top' | 'bottom'; - "trigger": HTMLElement; - /** - * @default false - */ - "triggerOnClick"?: boolean; - } - interface MvxTransactionListItem { - "transaction": ITransactionListItem; - } - interface MvxTransactionToast { - "fullWidth"?: boolean; - /** - * @default '' - */ - "processedTransactionsStatus": string | JSX.Element; - "toastDataState": IToastDataState; - /** - * @default '' - */ - "toastId": string; - "transactionProgressState"?: ITransactionProgressState; - /** - * @default [] - */ - "transactions": ITransactionListItem[]; - "wrapperClass": string; - } - interface MvxTransactionToastContent { - "fullWidth"?: boolean; - "processedTransactionsStatus"?: string | JSX.Element; - "toastDataState": IToastDataState; - "transactions": ITransactionListItem[]; - } - interface MvxTransactionToastDetails { - /** - * @default 5 - */ - "maxShownTransactions": number; - "processedTransactionsStatus"?: string | JSX.Element; - "transactionClass": string; - "transactions"?: ITransactionListItem[]; - } - interface MvxTransactionToastDetailsBody { - "hash": string; - "index": string; - "link": string; - "status"?: `${TransactionStatusEnum}`; - /** - * @default 'transaction-details-list-item' - */ - "transactionClass"?: string; - } - interface MvxTransactionToastProgress { - "endTime"?: number; - "isStatusPending"?: boolean; - "startTime"?: number; - "toastId"?: string; - } - interface MvxTransactionsTable { - "class"?: string; - "transactions": TransactionRowType[]; - } - interface MvxTrim { - "class"?: string; - /** - * @default DataTestIdsEnum.trim - */ - "dataTestId"?: string; - "text": string; - } - interface MvxUnlockButton { - "class"?: string; - "dataTestId"?: string; - "icon"?: HTMLElement; - "iconUrl": string; - "label": string; - "type"?: IProviderBase['type']; - } - interface MvxUnlockPanel { - "closeWithAnimation": () => Promise; - "getEventBus": () => Promise; - } - interface MvxWalletConnect { - /** - * @default { wcURI: '' } - */ - "data": IWalletConnectPanelData; - "getEventBus": () => Promise; - /** - * @default '' - */ - "qrCodeSvg": string; - } - interface MvxWalletConnectAppGalleryIcon { - "class"?: string; - } - interface MvxWalletConnectAppStoreIcon { - "class"?: string; - } - interface MvxWalletConnectDownload { - "class"?: string; - } - interface MvxWalletConnectGooglePlayIcon { - "class"?: string; - } - interface MvxWalletConnectScan { - "class"?: string; - /** - * @default '' - */ - "qrCodeSvg": string; - /** - * @default '' - */ - "walletConnectDeepLink"?: string; - } - interface MvxWalletProviderIcon { - "class"?: string; - } - interface MvxXportalDownloadQrIcon { - /** - * @default '' - */ - "class"?: string; - } - interface MvxXportalQrCodePreloader { - "class"?: string; - } + interface MvxAddressTable { + accountScreenData: IAddressTableData; + selectedIndex: number; + } + interface MvxArcExtensionProviderIcon { + class?: string; + height?: number; + width?: number; + } + interface MvxArrowRightIcon { + class?: string; + } + interface MvxBraveExtensionProviderIcon { + class?: string; + height?: number; + width?: number; + } + interface MvxButton { + /** + * @default '' + */ + class?: string; + /** + * @default '' + */ + dataTestId?: string; + /** + * @default false + */ + disabled?: boolean; + /** + * @default 'large' + */ + size?: `${ButtonSizeEnum}`; + /** + * @default 'primary' + */ + variant?: `${ButtonVariantEnum}`; + } + interface MvxCircleInfoIcon { + class?: string; + } + interface MvxCopyButton { + class?: string; + iconClass?: string; + text: string; + } + interface MvxCustomToast { + toast: IComponentToast; + } + interface MvxDataWithExplorerLink { + class?: string; + data: string; + dataTestId?: string; + explorerLink: string; + /** + * @default true + */ + showCopyButton?: boolean; + /** + * @default true + */ + showExplorerButton?: boolean; + /** + * @default false + */ + withTooltip?: boolean; + } + interface MvxDefaultTransactionIconLarge { + class?: string; + } + interface MvxDefaultTransactionIconSmall { + class?: string; + } + interface MvxEdgeExtensionProviderIcon { + class?: string; + height?: number; + width?: number; + } + interface MvxExplorerLink { + class?: string; + dataTestId?: string; + iconClass?: string; + link: string; + } + interface MvxExtensionProviderIcon { + class?: string; + height?: number; + width?: number; + } + interface MvxFirefoxExtensionProviderIcon { + class?: string; + height?: number; + width?: number; + } + interface MvxFormatAmount { + class?: string; + dataTestId?: string; + decimalClass?: string; + isValid: boolean; + label?: string; + labelClass?: string; + /** + * @default true + */ + showLabel?: boolean; + valueDecimal: string; + valueInteger: string; + } + interface MvxGenericToast { + toast: CustomToastType; + } + interface MvxLedgerConfirm { + confirmScreenData: IConfirmScreenData; + } + interface MvxLedgerConnect { + /** + * @default { accountScreenData: null, confirmScreenData: null, connectScreenData: {}, } + */ + data: ILedgerConnectPanelData; + getEventBus: () => Promise; + } + interface MvxLedgerIcon { + class?: string; + } + interface MvxLedgerIntro { + connectScreenData?: IConnectScreenData; + /** + * @default false + */ + isAwaiting?: boolean; + } + interface MvxLedgerProviderIcon { + class?: string; + } + interface MvxMagnifyingGlassIcon { + class?: string; + } + interface MvxMetamaskProviderIcon { + class?: string; + } + interface MvxMultiversxLogoIcon { + class?: string; + } + interface MvxMultiversxSymbolIcon { + class?: string; + } + interface MvxNotificationsFeed { + closeWithAnimation: () => Promise; + getEventBus: () => Promise; + } + 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; + } + interface MvxPasskeyProviderIcon { + class?: string; + } + interface MvxPendingTransactionsPanel { + closeWithAnimation: () => Promise; + getEventBus: () => Promise; + } + interface MvxPreloader { + class?: string; + } + 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; + /** + * @default false + */ + open: boolean; + openToSnapPoint: (snapIndex?: number) => Promise; + /** + * @default '' + */ + sidePanelIdentifier: string; + } + interface MvxSignTransactionsPanel { + closeWithAnimation: () => Promise; + getEventBus: () => Promise; + } + interface MvxSimpleToast { + toast: ISimpleToast; + } + interface MvxSpinnerIcon { + class?: string; + } + interface MvxToastList { + getEventBus: () => Promise; + } + interface MvxTooltip { + class?: string; + /** + * @default 'top' + */ + position: 'top' | 'bottom'; + trigger: HTMLElement; + /** + * @default false + */ + triggerOnClick?: boolean; + } + interface MvxTransactionListItem { + transaction: ITransactionListItem; + } + interface MvxTransactionToast { + fullWidth?: boolean; + /** + * @default '' + */ + processedTransactionsStatus: string | JSX.Element; + toastDataState: IToastDataState; + /** + * @default '' + */ + toastId: string; + transactionProgressState?: ITransactionProgressState; + /** + * @default [] + */ + transactions: ITransactionListItem[]; + wrapperClass: string; + } + interface MvxTransactionToastContent { + fullWidth?: boolean; + processedTransactionsStatus?: string | JSX.Element; + toastDataState: IToastDataState; + transactions: ITransactionListItem[]; + } + interface MvxTransactionToastDetails { + /** + * @default 5 + */ + maxShownTransactions: number; + processedTransactionsStatus?: string | JSX.Element; + transactionClass: string; + transactions?: ITransactionListItem[]; + } + interface MvxTransactionToastDetailsBody { + hash: string; + index: string; + link: string; + status?: `${TransactionStatusEnum}`; + /** + * @default 'transaction-details-list-item' + */ + transactionClass?: string; + } + interface MvxTransactionToastProgress { + endTime?: number; + isStatusPending?: boolean; + startTime?: number; + toastId?: string; + } + interface MvxTransactionsTable { + class?: string; + transactions: TransactionRowType[]; + } + interface MvxTrim { + class?: string; + /** + * @default DataTestIdsEnum.trim + */ + dataTestId?: string; + text: string; + } + interface MvxUnlockButton { + class?: string; + dataTestId?: string; + icon?: HTMLElement; + iconUrl: string; + label: string; + type?: IProviderBase['type']; + } + interface MvxUnlockPanel { + closeWithAnimation: () => Promise; + getEventBus: () => Promise; + } + interface MvxWalletConnect { + /** + * @default { wcURI: '' } + */ + data: IWalletConnectPanelData; + getEventBus: () => Promise; + /** + * @default '' + */ + qrCodeSvg: string; + } + interface MvxWalletConnectAppGalleryIcon { + class?: string; + } + interface MvxWalletConnectAppStoreIcon { + class?: string; + } + interface MvxWalletConnectDownload { + class?: string; + } + interface MvxWalletConnectGooglePlayIcon { + class?: string; + } + interface MvxWalletConnectScan { + class?: string; + /** + * @default '' + */ + qrCodeSvg: string; + /** + * @default '' + */ + walletConnectDeepLink?: string; + } + interface MvxWalletProviderIcon { + class?: string; + } + interface MvxXportalDownloadQrIcon { + /** + * @default '' + */ + class?: string; + } + interface MvxXportalQrCodePreloader { + class?: string; + } } export interface MvxAddressTableCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxAddressTableElement; + detail: T; + target: HTMLMvxAddressTableElement; } export interface MvxButtonCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxButtonElement; + detail: T; + target: HTMLMvxButtonElement; } export interface MvxCustomToastCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxCustomToastElement; + detail: T; + target: HTMLMvxCustomToastElement; } export interface MvxGenericToastCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxGenericToastElement; + detail: T; + target: HTMLMvxGenericToastElement; } export interface MvxLedgerIntroCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxLedgerIntroElement; + detail: T; + target: HTMLMvxLedgerIntroElement; } export interface MvxPaginationCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxPaginationElement; + detail: T; + target: HTMLMvxPaginationElement; } export interface MvxPaginationEllipsisFormCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxPaginationEllipsisFormElement; + detail: T; + target: HTMLMvxPaginationEllipsisFormElement; } export interface MvxSidePanelCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxSidePanelElement; + detail: T; + target: HTMLMvxSidePanelElement; } export interface MvxSidePanelHeaderCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxSidePanelHeaderElement; + detail: T; + target: HTMLMvxSidePanelHeaderElement; } export interface MvxSidePanelSwiperCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxSidePanelSwiperElement; + detail: T; + target: HTMLMvxSidePanelSwiperElement; } export interface MvxSimpleToastCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxSimpleToastElement; + detail: T; + target: HTMLMvxSimpleToastElement; } export interface MvxTooltipCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxTooltipElement; + detail: T; + target: HTMLMvxTooltipElement; } export interface MvxTransactionToastCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxTransactionToastElement; + detail: T; + target: HTMLMvxTransactionToastElement; } export interface MvxTransactionToastContentCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxTransactionToastContentElement; + detail: T; + target: HTMLMvxTransactionToastContentElement; } export interface MvxWalletConnectScanCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxWalletConnectScanElement; + detail: T; + 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 HTMLMvxArcExtensionProviderIconElement extends Components.MvxArcExtensionProviderIcon, HTMLStencilElement { - } - var HTMLMvxArcExtensionProviderIconElement: { - prototype: HTMLMvxArcExtensionProviderIconElement; - new (): HTMLMvxArcExtensionProviderIconElement; - }; - interface HTMLMvxArrowRightIconElement extends Components.MvxArrowRightIcon, HTMLStencilElement { - } - var HTMLMvxArrowRightIconElement: { - prototype: HTMLMvxArrowRightIconElement; - new (): HTMLMvxArrowRightIconElement; - }; - interface HTMLMvxBraveExtensionProviderIconElement extends Components.MvxBraveExtensionProviderIcon, HTMLStencilElement { - } - var HTMLMvxBraveExtensionProviderIconElement: { - prototype: HTMLMvxBraveExtensionProviderIconElement; - new (): HTMLMvxBraveExtensionProviderIconElement; - }; - interface HTMLMvxButtonElementEventMap { - "buttonClick": MouseEvent; - } - interface HTMLMvxButtonElement extends Components.MvxButton, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxButtonElement, ev: MvxButtonCustomEvent) => 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: HTMLMvxButtonElement, ev: MvxButtonCustomEvent) => 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 HTMLMvxButtonElement: { - prototype: HTMLMvxButtonElement; - new (): HTMLMvxButtonElement; - }; - interface HTMLMvxCircleInfoIconElement extends Components.MvxCircleInfoIcon, HTMLStencilElement { - } - var HTMLMvxCircleInfoIconElement: { - prototype: HTMLMvxCircleInfoIconElement; - new (): HTMLMvxCircleInfoIconElement; - }; - interface HTMLMvxCopyButtonElement extends Components.MvxCopyButton, HTMLStencilElement { - } - var HTMLMvxCopyButtonElement: { - prototype: HTMLMvxCopyButtonElement; - new (): HTMLMvxCopyButtonElement; - }; - interface HTMLMvxCustomToastElementEventMap { - "deleteToast": string; - } - interface HTMLMvxCustomToastElement extends Components.MvxCustomToast, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxCustomToastElement, ev: MvxCustomToastCustomEvent) => 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: HTMLMvxCustomToastElement, ev: MvxCustomToastCustomEvent) => 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 HTMLMvxCustomToastElement: { - prototype: HTMLMvxCustomToastElement; - new (): HTMLMvxCustomToastElement; - }; - interface HTMLMvxDataWithExplorerLinkElement extends Components.MvxDataWithExplorerLink, HTMLStencilElement { - } - var HTMLMvxDataWithExplorerLinkElement: { - prototype: HTMLMvxDataWithExplorerLinkElement; - new (): HTMLMvxDataWithExplorerLinkElement; - }; - interface HTMLMvxDefaultTransactionIconLargeElement extends Components.MvxDefaultTransactionIconLarge, HTMLStencilElement { - } - var HTMLMvxDefaultTransactionIconLargeElement: { - prototype: HTMLMvxDefaultTransactionIconLargeElement; - new (): HTMLMvxDefaultTransactionIconLargeElement; - }; - interface HTMLMvxDefaultTransactionIconSmallElement extends Components.MvxDefaultTransactionIconSmall, HTMLStencilElement { - } - var HTMLMvxDefaultTransactionIconSmallElement: { - prototype: HTMLMvxDefaultTransactionIconSmallElement; - new (): HTMLMvxDefaultTransactionIconSmallElement; - }; - interface HTMLMvxEdgeExtensionProviderIconElement extends Components.MvxEdgeExtensionProviderIcon, HTMLStencilElement { - } - var HTMLMvxEdgeExtensionProviderIconElement: { - prototype: HTMLMvxEdgeExtensionProviderIconElement; - new (): HTMLMvxEdgeExtensionProviderIconElement; - }; - interface HTMLMvxExplorerLinkElement extends Components.MvxExplorerLink, HTMLStencilElement { - } - var HTMLMvxExplorerLinkElement: { - prototype: HTMLMvxExplorerLinkElement; - new (): HTMLMvxExplorerLinkElement; - }; - interface HTMLMvxExtensionProviderIconElement extends Components.MvxExtensionProviderIcon, HTMLStencilElement { - } - var HTMLMvxExtensionProviderIconElement: { - prototype: HTMLMvxExtensionProviderIconElement; - new (): HTMLMvxExtensionProviderIconElement; - }; - interface HTMLMvxFirefoxExtensionProviderIconElement extends Components.MvxFirefoxExtensionProviderIcon, HTMLStencilElement { - } - var HTMLMvxFirefoxExtensionProviderIconElement: { - prototype: HTMLMvxFirefoxExtensionProviderIconElement; - new (): HTMLMvxFirefoxExtensionProviderIconElement; - }; - interface HTMLMvxFormatAmountElement extends Components.MvxFormatAmount, HTMLStencilElement { - } - var HTMLMvxFormatAmountElement: { - prototype: HTMLMvxFormatAmountElement; - new (): HTMLMvxFormatAmountElement; - }; - interface HTMLMvxGenericToastElementEventMap { - "deleteToast": string; - } - interface HTMLMvxGenericToastElement extends Components.MvxGenericToast, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxGenericToastElement, ev: MvxGenericToastCustomEvent) => 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: HTMLMvxGenericToastElement, ev: MvxGenericToastCustomEvent) => 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 HTMLMvxGenericToastElement: { - prototype: HTMLMvxGenericToastElement; - new (): HTMLMvxGenericToastElement; - }; - interface HTMLMvxLedgerConfirmElement extends Components.MvxLedgerConfirm, HTMLStencilElement { - } - var HTMLMvxLedgerConfirmElement: { - prototype: HTMLMvxLedgerConfirmElement; - new (): HTMLMvxLedgerConfirmElement; - }; - interface HTMLMvxLedgerConnectElement extends Components.MvxLedgerConnect, HTMLStencilElement { - } - var HTMLMvxLedgerConnectElement: { - prototype: HTMLMvxLedgerConnectElement; - new (): HTMLMvxLedgerConnectElement; - }; - interface HTMLMvxLedgerIconElement extends Components.MvxLedgerIcon, HTMLStencilElement { - } - var HTMLMvxLedgerIconElement: { - prototype: HTMLMvxLedgerIconElement; - new (): HTMLMvxLedgerIconElement; - }; - interface HTMLMvxLedgerIntroElementEventMap { - "connect": any; - } - interface HTMLMvxLedgerIntroElement extends Components.MvxLedgerIntro, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxLedgerIntroElement, ev: MvxLedgerIntroCustomEvent) => 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: HTMLMvxLedgerIntroElement, ev: MvxLedgerIntroCustomEvent) => 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 HTMLMvxLedgerIntroElement: { - prototype: HTMLMvxLedgerIntroElement; - new (): HTMLMvxLedgerIntroElement; - }; - interface HTMLMvxLedgerProviderIconElement extends Components.MvxLedgerProviderIcon, HTMLStencilElement { - } - var HTMLMvxLedgerProviderIconElement: { - prototype: HTMLMvxLedgerProviderIconElement; - new (): HTMLMvxLedgerProviderIconElement; - }; - interface HTMLMvxMagnifyingGlassIconElement extends Components.MvxMagnifyingGlassIcon, HTMLStencilElement { - } - var HTMLMvxMagnifyingGlassIconElement: { - prototype: HTMLMvxMagnifyingGlassIconElement; - new (): HTMLMvxMagnifyingGlassIconElement; - }; - interface HTMLMvxMetamaskProviderIconElement extends Components.MvxMetamaskProviderIcon, HTMLStencilElement { - } - var HTMLMvxMetamaskProviderIconElement: { - prototype: HTMLMvxMetamaskProviderIconElement; - new (): HTMLMvxMetamaskProviderIconElement; - }; - interface HTMLMvxMultiversxLogoIconElement extends Components.MvxMultiversxLogoIcon, HTMLStencilElement { - } - var HTMLMvxMultiversxLogoIconElement: { - prototype: HTMLMvxMultiversxLogoIconElement; - new (): HTMLMvxMultiversxLogoIconElement; - }; - interface HTMLMvxMultiversxSymbolIconElement extends Components.MvxMultiversxSymbolIcon, HTMLStencilElement { - } - var HTMLMvxMultiversxSymbolIconElement: { - prototype: HTMLMvxMultiversxSymbolIconElement; - new (): HTMLMvxMultiversxSymbolIconElement; - }; - interface HTMLMvxNotificationsFeedElement extends Components.MvxNotificationsFeed, HTMLStencilElement { - } - var HTMLMvxNotificationsFeedElement: { - prototype: HTMLMvxNotificationsFeedElement; - new (): HTMLMvxNotificationsFeedElement; - }; - interface HTMLMvxPaginationElementEventMap { - "pageChange": number; - } - interface HTMLMvxPaginationElement extends Components.MvxPagination, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxPaginationElement, ev: MvxPaginationCustomEvent) => 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: HTMLMvxPaginationElement, ev: MvxPaginationCustomEvent) => 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 HTMLMvxPaginationElement: { - prototype: HTMLMvxPaginationElement; - new (): HTMLMvxPaginationElement; - }; - interface HTMLMvxPaginationEllipsisElement extends Components.MvxPaginationEllipsis, HTMLStencilElement { - } - var HTMLMvxPaginationEllipsisElement: { - prototype: HTMLMvxPaginationEllipsisElement; - new (): HTMLMvxPaginationEllipsisElement; - }; - interface HTMLMvxPaginationEllipsisFormElementEventMap { - "search": number; - } - interface HTMLMvxPaginationEllipsisFormElement extends Components.MvxPaginationEllipsisForm, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxPaginationEllipsisFormElement, ev: MvxPaginationEllipsisFormCustomEvent) => 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: HTMLMvxPaginationEllipsisFormElement, ev: MvxPaginationEllipsisFormCustomEvent) => 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 HTMLMvxPaginationEllipsisFormElement: { - prototype: HTMLMvxPaginationEllipsisFormElement; - new (): HTMLMvxPaginationEllipsisFormElement; - }; - interface HTMLMvxPasskeyProviderIconElement extends Components.MvxPasskeyProviderIcon, HTMLStencilElement { - } - var HTMLMvxPasskeyProviderIconElement: { - prototype: HTMLMvxPasskeyProviderIconElement; - new (): HTMLMvxPasskeyProviderIconElement; - }; - interface HTMLMvxPendingTransactionsPanelElement extends Components.MvxPendingTransactionsPanel, HTMLStencilElement { - } - var HTMLMvxPendingTransactionsPanelElement: { - prototype: HTMLMvxPendingTransactionsPanelElement; - new (): HTMLMvxPendingTransactionsPanelElement; - }; - interface HTMLMvxPreloaderElement extends Components.MvxPreloader, HTMLStencilElement { - } - var HTMLMvxPreloaderElement: { - prototype: HTMLMvxPreloaderElement; - new (): HTMLMvxPreloaderElement; - }; - interface HTMLMvxSidePanelElementEventMap { - "close": void; - "back": void; - } - interface HTMLMvxSidePanelElement extends Components.MvxSidePanel, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxSidePanelElement, ev: MvxSidePanelCustomEvent) => 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: HTMLMvxSidePanelElement, ev: MvxSidePanelCustomEvent) => 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 HTMLMvxSidePanelElement: { - prototype: HTMLMvxSidePanelElement; - new (): HTMLMvxSidePanelElement; - }; - interface HTMLMvxSidePanelHeaderElementEventMap { - "rightButtonClick": any; - "leftButtonClick": any; - } - interface HTMLMvxSidePanelHeaderElement extends Components.MvxSidePanelHeader, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxSidePanelHeaderElement, ev: MvxSidePanelHeaderCustomEvent) => 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: HTMLMvxSidePanelHeaderElement, ev: MvxSidePanelHeaderCustomEvent) => 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 HTMLMvxSidePanelHeaderElement: { - 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 HTMLMvxSignTransactionsPanelElement extends Components.MvxSignTransactionsPanel, HTMLStencilElement { - } - var HTMLMvxSignTransactionsPanelElement: { - prototype: HTMLMvxSignTransactionsPanelElement; - new (): HTMLMvxSignTransactionsPanelElement; - }; - interface HTMLMvxSimpleToastElementEventMap { - "deleteToast": void; - } - interface HTMLMvxSimpleToastElement extends Components.MvxSimpleToast, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxSimpleToastElement, ev: MvxSimpleToastCustomEvent) => 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: HTMLMvxSimpleToastElement, ev: MvxSimpleToastCustomEvent) => 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 HTMLMvxSimpleToastElement: { - prototype: HTMLMvxSimpleToastElement; - new (): HTMLMvxSimpleToastElement; - }; - interface HTMLMvxSpinnerIconElement extends Components.MvxSpinnerIcon, HTMLStencilElement { - } - var HTMLMvxSpinnerIconElement: { - prototype: HTMLMvxSpinnerIconElement; - new (): HTMLMvxSpinnerIconElement; - }; - interface HTMLMvxToastListElement extends Components.MvxToastList, HTMLStencilElement { - } - var HTMLMvxToastListElement: { - prototype: HTMLMvxToastListElement; - new (): HTMLMvxToastListElement; - }; - interface HTMLMvxTooltipElementEventMap { - "triggerRender": boolean; - } - interface HTMLMvxTooltipElement extends Components.MvxTooltip, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxTooltipElement, ev: MvxTooltipCustomEvent) => 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: HTMLMvxTooltipElement, ev: MvxTooltipCustomEvent) => 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 HTMLMvxTooltipElement: { - prototype: HTMLMvxTooltipElement; - new (): HTMLMvxTooltipElement; - }; - interface HTMLMvxTransactionListItemElement extends Components.MvxTransactionListItem, HTMLStencilElement { - } - var HTMLMvxTransactionListItemElement: { - prototype: HTMLMvxTransactionListItemElement; - new (): HTMLMvxTransactionListItemElement; - }; - interface HTMLMvxTransactionToastElementEventMap { - "deleteToast": void; - } - interface HTMLMvxTransactionToastElement extends Components.MvxTransactionToast, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxTransactionToastElement, ev: MvxTransactionToastCustomEvent) => 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: HTMLMvxTransactionToastElement, ev: MvxTransactionToastCustomEvent) => 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 HTMLMvxTransactionToastElement: { - prototype: HTMLMvxTransactionToastElement; - new (): HTMLMvxTransactionToastElement; - }; - interface HTMLMvxTransactionToastContentElementEventMap { - "deleteToast": void; - } - interface HTMLMvxTransactionToastContentElement extends Components.MvxTransactionToastContent, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxTransactionToastContentElement, ev: MvxTransactionToastContentCustomEvent) => 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: HTMLMvxTransactionToastContentElement, ev: MvxTransactionToastContentCustomEvent) => 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 HTMLMvxTransactionToastContentElement: { - prototype: HTMLMvxTransactionToastContentElement; - new (): HTMLMvxTransactionToastContentElement; - }; - interface HTMLMvxTransactionToastDetailsElement extends Components.MvxTransactionToastDetails, HTMLStencilElement { - } - var HTMLMvxTransactionToastDetailsElement: { - prototype: HTMLMvxTransactionToastDetailsElement; - new (): HTMLMvxTransactionToastDetailsElement; - }; - interface HTMLMvxTransactionToastDetailsBodyElement extends Components.MvxTransactionToastDetailsBody, HTMLStencilElement { - } - var HTMLMvxTransactionToastDetailsBodyElement: { - prototype: HTMLMvxTransactionToastDetailsBodyElement; - new (): HTMLMvxTransactionToastDetailsBodyElement; - }; - interface HTMLMvxTransactionToastProgressElement extends Components.MvxTransactionToastProgress, HTMLStencilElement { - } - var HTMLMvxTransactionToastProgressElement: { - prototype: HTMLMvxTransactionToastProgressElement; - new (): HTMLMvxTransactionToastProgressElement; - }; - interface HTMLMvxTransactionsTableElement extends Components.MvxTransactionsTable, HTMLStencilElement { - } - var HTMLMvxTransactionsTableElement: { - prototype: HTMLMvxTransactionsTableElement; - new (): HTMLMvxTransactionsTableElement; - }; - interface HTMLMvxTrimElement extends Components.MvxTrim, HTMLStencilElement { - } - var HTMLMvxTrimElement: { - prototype: HTMLMvxTrimElement; - new (): HTMLMvxTrimElement; - }; - interface HTMLMvxUnlockButtonElement extends Components.MvxUnlockButton, HTMLStencilElement { - } - var HTMLMvxUnlockButtonElement: { - prototype: HTMLMvxUnlockButtonElement; - new (): HTMLMvxUnlockButtonElement; - }; - interface HTMLMvxUnlockPanelElement extends Components.MvxUnlockPanel, HTMLStencilElement { - } - var HTMLMvxUnlockPanelElement: { - prototype: HTMLMvxUnlockPanelElement; - new (): HTMLMvxUnlockPanelElement; - }; - interface HTMLMvxWalletConnectElement extends Components.MvxWalletConnect, HTMLStencilElement { - } - var HTMLMvxWalletConnectElement: { - prototype: HTMLMvxWalletConnectElement; - new (): HTMLMvxWalletConnectElement; - }; - interface HTMLMvxWalletConnectAppGalleryIconElement extends Components.MvxWalletConnectAppGalleryIcon, HTMLStencilElement { - } - var HTMLMvxWalletConnectAppGalleryIconElement: { - prototype: HTMLMvxWalletConnectAppGalleryIconElement; - new (): HTMLMvxWalletConnectAppGalleryIconElement; - }; - interface HTMLMvxWalletConnectAppStoreIconElement extends Components.MvxWalletConnectAppStoreIcon, HTMLStencilElement { - } - var HTMLMvxWalletConnectAppStoreIconElement: { - prototype: HTMLMvxWalletConnectAppStoreIconElement; - new (): HTMLMvxWalletConnectAppStoreIconElement; - }; - interface HTMLMvxWalletConnectDownloadElement extends Components.MvxWalletConnectDownload, HTMLStencilElement { - } - var HTMLMvxWalletConnectDownloadElement: { - prototype: HTMLMvxWalletConnectDownloadElement; - new (): HTMLMvxWalletConnectDownloadElement; - }; - interface HTMLMvxWalletConnectGooglePlayIconElement extends Components.MvxWalletConnectGooglePlayIcon, HTMLStencilElement { - } - var HTMLMvxWalletConnectGooglePlayIconElement: { - prototype: HTMLMvxWalletConnectGooglePlayIconElement; - new (): HTMLMvxWalletConnectGooglePlayIconElement; - }; - interface HTMLMvxWalletConnectScanElementEventMap { - "downloadClick": any; - } - interface HTMLMvxWalletConnectScanElement extends Components.MvxWalletConnectScan, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxWalletConnectScanElement, ev: MvxWalletConnectScanCustomEvent) => 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: HTMLMvxWalletConnectScanElement, ev: MvxWalletConnectScanCustomEvent) => 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 HTMLMvxWalletConnectScanElement: { - prototype: HTMLMvxWalletConnectScanElement; - new (): HTMLMvxWalletConnectScanElement; - }; - interface HTMLMvxWalletProviderIconElement extends Components.MvxWalletProviderIcon, HTMLStencilElement { - } - var HTMLMvxWalletProviderIconElement: { - prototype: HTMLMvxWalletProviderIconElement; - new (): HTMLMvxWalletProviderIconElement; - }; - interface HTMLMvxXportalDownloadQrIconElement extends Components.MvxXportalDownloadQrIcon, HTMLStencilElement { - } - var HTMLMvxXportalDownloadQrIconElement: { - prototype: HTMLMvxXportalDownloadQrIconElement; - new (): HTMLMvxXportalDownloadQrIconElement; - }; - interface HTMLMvxXportalQrCodePreloaderElement extends Components.MvxXportalQrCodePreloader, HTMLStencilElement { - } - var HTMLMvxXportalQrCodePreloaderElement: { - prototype: HTMLMvxXportalQrCodePreloaderElement; - new (): HTMLMvxXportalQrCodePreloaderElement; - }; - interface HTMLElementTagNameMap { - "mvx-address-table": HTMLMvxAddressTableElement; - "mvx-arc-extension-provider-icon": HTMLMvxArcExtensionProviderIconElement; - "mvx-arrow-right-icon": HTMLMvxArrowRightIconElement; - "mvx-brave-extension-provider-icon": HTMLMvxBraveExtensionProviderIconElement; - "mvx-button": HTMLMvxButtonElement; - "mvx-circle-info-icon": HTMLMvxCircleInfoIconElement; - "mvx-copy-button": HTMLMvxCopyButtonElement; - "mvx-custom-toast": HTMLMvxCustomToastElement; - "mvx-data-with-explorer-link": HTMLMvxDataWithExplorerLinkElement; - "mvx-default-transaction-icon-large": HTMLMvxDefaultTransactionIconLargeElement; - "mvx-default-transaction-icon-small": HTMLMvxDefaultTransactionIconSmallElement; - "mvx-edge-extension-provider-icon": HTMLMvxEdgeExtensionProviderIconElement; - "mvx-explorer-link": HTMLMvxExplorerLinkElement; - "mvx-extension-provider-icon": HTMLMvxExtensionProviderIconElement; - "mvx-firefox-extension-provider-icon": HTMLMvxFirefoxExtensionProviderIconElement; - "mvx-format-amount": HTMLMvxFormatAmountElement; - "mvx-generic-toast": HTMLMvxGenericToastElement; - "mvx-ledger-confirm": HTMLMvxLedgerConfirmElement; - "mvx-ledger-connect": HTMLMvxLedgerConnectElement; - "mvx-ledger-icon": HTMLMvxLedgerIconElement; - "mvx-ledger-intro": HTMLMvxLedgerIntroElement; - "mvx-ledger-provider-icon": HTMLMvxLedgerProviderIconElement; - "mvx-magnifying-glass-icon": HTMLMvxMagnifyingGlassIconElement; - "mvx-metamask-provider-icon": HTMLMvxMetamaskProviderIconElement; - "mvx-multiversx-logo-icon": HTMLMvxMultiversxLogoIconElement; - "mvx-multiversx-symbol-icon": HTMLMvxMultiversxSymbolIconElement; - "mvx-notifications-feed": HTMLMvxNotificationsFeedElement; - "mvx-pagination": HTMLMvxPaginationElement; - "mvx-pagination-ellipsis": HTMLMvxPaginationEllipsisElement; - "mvx-pagination-ellipsis-form": HTMLMvxPaginationEllipsisFormElement; - "mvx-passkey-provider-icon": HTMLMvxPasskeyProviderIconElement; - "mvx-pending-transactions-panel": HTMLMvxPendingTransactionsPanelElement; - "mvx-preloader": HTMLMvxPreloaderElement; - "mvx-side-panel": HTMLMvxSidePanelElement; - "mvx-side-panel-header": HTMLMvxSidePanelHeaderElement; - "mvx-side-panel-swiper": HTMLMvxSidePanelSwiperElement; - "mvx-sign-transactions-panel": HTMLMvxSignTransactionsPanelElement; - "mvx-simple-toast": HTMLMvxSimpleToastElement; - "mvx-spinner-icon": HTMLMvxSpinnerIconElement; - "mvx-toast-list": HTMLMvxToastListElement; - "mvx-tooltip": HTMLMvxTooltipElement; - "mvx-transaction-list-item": HTMLMvxTransactionListItemElement; - "mvx-transaction-toast": HTMLMvxTransactionToastElement; - "mvx-transaction-toast-content": HTMLMvxTransactionToastContentElement; - "mvx-transaction-toast-details": HTMLMvxTransactionToastDetailsElement; - "mvx-transaction-toast-details-body": HTMLMvxTransactionToastDetailsBodyElement; - "mvx-transaction-toast-progress": HTMLMvxTransactionToastProgressElement; - "mvx-transactions-table": HTMLMvxTransactionsTableElement; - "mvx-trim": HTMLMvxTrimElement; - "mvx-unlock-button": HTMLMvxUnlockButtonElement; - "mvx-unlock-panel": HTMLMvxUnlockPanelElement; - "mvx-wallet-connect": HTMLMvxWalletConnectElement; - "mvx-wallet-connect-app-gallery-icon": HTMLMvxWalletConnectAppGalleryIconElement; - "mvx-wallet-connect-app-store-icon": HTMLMvxWalletConnectAppStoreIconElement; - "mvx-wallet-connect-download": HTMLMvxWalletConnectDownloadElement; - "mvx-wallet-connect-google-play-icon": HTMLMvxWalletConnectGooglePlayIconElement; - "mvx-wallet-connect-scan": HTMLMvxWalletConnectScanElement; - "mvx-wallet-provider-icon": HTMLMvxWalletProviderIconElement; - "mvx-xportal-download-qr-icon": HTMLMvxXportalDownloadQrIconElement; - "mvx-xportal-qr-code-preloader": HTMLMvxXportalQrCodePreloaderElement; - } + 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 HTMLMvxArcExtensionProviderIconElement extends Components.MvxArcExtensionProviderIcon, HTMLStencilElement {} + var HTMLMvxArcExtensionProviderIconElement: { + prototype: HTMLMvxArcExtensionProviderIconElement; + new (): HTMLMvxArcExtensionProviderIconElement; + }; + interface HTMLMvxArrowRightIconElement extends Components.MvxArrowRightIcon, HTMLStencilElement {} + var HTMLMvxArrowRightIconElement: { + prototype: HTMLMvxArrowRightIconElement; + new (): HTMLMvxArrowRightIconElement; + }; + interface HTMLMvxBraveExtensionProviderIconElement + extends Components.MvxBraveExtensionProviderIcon, + HTMLStencilElement {} + var HTMLMvxBraveExtensionProviderIconElement: { + prototype: HTMLMvxBraveExtensionProviderIconElement; + new (): HTMLMvxBraveExtensionProviderIconElement; + }; + interface HTMLMvxButtonElementEventMap { + buttonClick: MouseEvent; + } + interface HTMLMvxButtonElement extends Components.MvxButton, HTMLStencilElement { + addEventListener( + type: K, + listener: (this: HTMLMvxButtonElement, ev: MvxButtonCustomEvent) => 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: HTMLMvxButtonElement, ev: MvxButtonCustomEvent) => 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 HTMLMvxButtonElement: { + prototype: HTMLMvxButtonElement; + new (): HTMLMvxButtonElement; + }; + interface HTMLMvxCircleInfoIconElement extends Components.MvxCircleInfoIcon, HTMLStencilElement {} + var HTMLMvxCircleInfoIconElement: { + prototype: HTMLMvxCircleInfoIconElement; + new (): HTMLMvxCircleInfoIconElement; + }; + interface HTMLMvxCopyButtonElement extends Components.MvxCopyButton, HTMLStencilElement {} + var HTMLMvxCopyButtonElement: { + prototype: HTMLMvxCopyButtonElement; + new (): HTMLMvxCopyButtonElement; + }; + interface HTMLMvxCustomToastElementEventMap { + deleteToast: string; + } + interface HTMLMvxCustomToastElement extends Components.MvxCustomToast, HTMLStencilElement { + addEventListener( + type: K, + listener: ( + this: HTMLMvxCustomToastElement, + ev: MvxCustomToastCustomEvent, + ) => 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: HTMLMvxCustomToastElement, + ev: MvxCustomToastCustomEvent, + ) => 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 HTMLMvxCustomToastElement: { + prototype: HTMLMvxCustomToastElement; + new (): HTMLMvxCustomToastElement; + }; + interface HTMLMvxDataWithExplorerLinkElement extends Components.MvxDataWithExplorerLink, HTMLStencilElement {} + var HTMLMvxDataWithExplorerLinkElement: { + prototype: HTMLMvxDataWithExplorerLinkElement; + new (): HTMLMvxDataWithExplorerLinkElement; + }; + interface HTMLMvxDefaultTransactionIconLargeElement + extends Components.MvxDefaultTransactionIconLarge, + HTMLStencilElement {} + var HTMLMvxDefaultTransactionIconLargeElement: { + prototype: HTMLMvxDefaultTransactionIconLargeElement; + new (): HTMLMvxDefaultTransactionIconLargeElement; + }; + interface HTMLMvxDefaultTransactionIconSmallElement + extends Components.MvxDefaultTransactionIconSmall, + HTMLStencilElement {} + var HTMLMvxDefaultTransactionIconSmallElement: { + prototype: HTMLMvxDefaultTransactionIconSmallElement; + new (): HTMLMvxDefaultTransactionIconSmallElement; + }; + interface HTMLMvxEdgeExtensionProviderIconElement + extends Components.MvxEdgeExtensionProviderIcon, + HTMLStencilElement {} + var HTMLMvxEdgeExtensionProviderIconElement: { + prototype: HTMLMvxEdgeExtensionProviderIconElement; + new (): HTMLMvxEdgeExtensionProviderIconElement; + }; + interface HTMLMvxExplorerLinkElement extends Components.MvxExplorerLink, HTMLStencilElement {} + var HTMLMvxExplorerLinkElement: { + prototype: HTMLMvxExplorerLinkElement; + new (): HTMLMvxExplorerLinkElement; + }; + interface HTMLMvxExtensionProviderIconElement extends Components.MvxExtensionProviderIcon, HTMLStencilElement {} + var HTMLMvxExtensionProviderIconElement: { + prototype: HTMLMvxExtensionProviderIconElement; + new (): HTMLMvxExtensionProviderIconElement; + }; + interface HTMLMvxFirefoxExtensionProviderIconElement + extends Components.MvxFirefoxExtensionProviderIcon, + HTMLStencilElement {} + var HTMLMvxFirefoxExtensionProviderIconElement: { + prototype: HTMLMvxFirefoxExtensionProviderIconElement; + new (): HTMLMvxFirefoxExtensionProviderIconElement; + }; + interface HTMLMvxFormatAmountElement extends Components.MvxFormatAmount, HTMLStencilElement {} + var HTMLMvxFormatAmountElement: { + prototype: HTMLMvxFormatAmountElement; + new (): HTMLMvxFormatAmountElement; + }; + interface HTMLMvxGenericToastElementEventMap { + deleteToast: string; + } + interface HTMLMvxGenericToastElement extends Components.MvxGenericToast, HTMLStencilElement { + addEventListener( + type: K, + listener: ( + this: HTMLMvxGenericToastElement, + ev: MvxGenericToastCustomEvent, + ) => 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: HTMLMvxGenericToastElement, + ev: MvxGenericToastCustomEvent, + ) => 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 HTMLMvxGenericToastElement: { + prototype: HTMLMvxGenericToastElement; + new (): HTMLMvxGenericToastElement; + }; + interface HTMLMvxLedgerConfirmElement extends Components.MvxLedgerConfirm, HTMLStencilElement {} + var HTMLMvxLedgerConfirmElement: { + prototype: HTMLMvxLedgerConfirmElement; + new (): HTMLMvxLedgerConfirmElement; + }; + interface HTMLMvxLedgerConnectElement extends Components.MvxLedgerConnect, HTMLStencilElement {} + var HTMLMvxLedgerConnectElement: { + prototype: HTMLMvxLedgerConnectElement; + new (): HTMLMvxLedgerConnectElement; + }; + interface HTMLMvxLedgerIconElement extends Components.MvxLedgerIcon, HTMLStencilElement {} + var HTMLMvxLedgerIconElement: { + prototype: HTMLMvxLedgerIconElement; + new (): HTMLMvxLedgerIconElement; + }; + interface HTMLMvxLedgerIntroElementEventMap { + connect: any; + } + interface HTMLMvxLedgerIntroElement extends Components.MvxLedgerIntro, HTMLStencilElement { + addEventListener( + type: K, + listener: ( + this: HTMLMvxLedgerIntroElement, + ev: MvxLedgerIntroCustomEvent, + ) => 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: HTMLMvxLedgerIntroElement, + ev: MvxLedgerIntroCustomEvent, + ) => 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 HTMLMvxLedgerIntroElement: { + prototype: HTMLMvxLedgerIntroElement; + new (): HTMLMvxLedgerIntroElement; + }; + interface HTMLMvxLedgerProviderIconElement extends Components.MvxLedgerProviderIcon, HTMLStencilElement {} + var HTMLMvxLedgerProviderIconElement: { + prototype: HTMLMvxLedgerProviderIconElement; + new (): HTMLMvxLedgerProviderIconElement; + }; + interface HTMLMvxMagnifyingGlassIconElement extends Components.MvxMagnifyingGlassIcon, HTMLStencilElement {} + var HTMLMvxMagnifyingGlassIconElement: { + prototype: HTMLMvxMagnifyingGlassIconElement; + new (): HTMLMvxMagnifyingGlassIconElement; + }; + interface HTMLMvxMetamaskProviderIconElement extends Components.MvxMetamaskProviderIcon, HTMLStencilElement {} + var HTMLMvxMetamaskProviderIconElement: { + prototype: HTMLMvxMetamaskProviderIconElement; + new (): HTMLMvxMetamaskProviderIconElement; + }; + interface HTMLMvxMultiversxLogoIconElement extends Components.MvxMultiversxLogoIcon, HTMLStencilElement {} + var HTMLMvxMultiversxLogoIconElement: { + prototype: HTMLMvxMultiversxLogoIconElement; + new (): HTMLMvxMultiversxLogoIconElement; + }; + interface HTMLMvxMultiversxSymbolIconElement extends Components.MvxMultiversxSymbolIcon, HTMLStencilElement {} + var HTMLMvxMultiversxSymbolIconElement: { + prototype: HTMLMvxMultiversxSymbolIconElement; + new (): HTMLMvxMultiversxSymbolIconElement; + }; + interface HTMLMvxNotificationsFeedElement extends Components.MvxNotificationsFeed, HTMLStencilElement {} + var HTMLMvxNotificationsFeedElement: { + prototype: HTMLMvxNotificationsFeedElement; + new (): HTMLMvxNotificationsFeedElement; + }; + interface HTMLMvxPaginationElementEventMap { + pageChange: number; + } + interface HTMLMvxPaginationElement extends Components.MvxPagination, HTMLStencilElement { + addEventListener( + type: K, + listener: ( + this: HTMLMvxPaginationElement, + ev: MvxPaginationCustomEvent, + ) => 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: HTMLMvxPaginationElement, + ev: MvxPaginationCustomEvent, + ) => 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 HTMLMvxPaginationElement: { + prototype: HTMLMvxPaginationElement; + new (): HTMLMvxPaginationElement; + }; + interface HTMLMvxPaginationEllipsisElement extends Components.MvxPaginationEllipsis, HTMLStencilElement {} + var HTMLMvxPaginationEllipsisElement: { + prototype: HTMLMvxPaginationEllipsisElement; + new (): HTMLMvxPaginationEllipsisElement; + }; + interface HTMLMvxPaginationEllipsisFormElementEventMap { + search: number; + } + interface HTMLMvxPaginationEllipsisFormElement extends Components.MvxPaginationEllipsisForm, HTMLStencilElement { + addEventListener( + type: K, + listener: ( + this: HTMLMvxPaginationEllipsisFormElement, + ev: MvxPaginationEllipsisFormCustomEvent, + ) => 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: HTMLMvxPaginationEllipsisFormElement, + ev: MvxPaginationEllipsisFormCustomEvent, + ) => 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 HTMLMvxPaginationEllipsisFormElement: { + prototype: HTMLMvxPaginationEllipsisFormElement; + new (): HTMLMvxPaginationEllipsisFormElement; + }; + interface HTMLMvxPasskeyProviderIconElement extends Components.MvxPasskeyProviderIcon, HTMLStencilElement {} + var HTMLMvxPasskeyProviderIconElement: { + prototype: HTMLMvxPasskeyProviderIconElement; + new (): HTMLMvxPasskeyProviderIconElement; + }; + interface HTMLMvxPendingTransactionsPanelElement extends Components.MvxPendingTransactionsPanel, HTMLStencilElement {} + var HTMLMvxPendingTransactionsPanelElement: { + prototype: HTMLMvxPendingTransactionsPanelElement; + new (): HTMLMvxPendingTransactionsPanelElement; + }; + interface HTMLMvxPreloaderElement extends Components.MvxPreloader, HTMLStencilElement {} + var HTMLMvxPreloaderElement: { + prototype: HTMLMvxPreloaderElement; + new (): HTMLMvxPreloaderElement; + }; + interface HTMLMvxSidePanelElementEventMap { + close: void; + back: void; + } + interface HTMLMvxSidePanelElement extends Components.MvxSidePanel, HTMLStencilElement { + addEventListener( + type: K, + listener: (this: HTMLMvxSidePanelElement, ev: MvxSidePanelCustomEvent) => 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: HTMLMvxSidePanelElement, ev: MvxSidePanelCustomEvent) => 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 HTMLMvxSidePanelElement: { + prototype: HTMLMvxSidePanelElement; + new (): HTMLMvxSidePanelElement; + }; + interface HTMLMvxSidePanelHeaderElementEventMap { + rightButtonClick: any; + leftButtonClick: any; + } + interface HTMLMvxSidePanelHeaderElement extends Components.MvxSidePanelHeader, HTMLStencilElement { + addEventListener( + type: K, + listener: ( + this: HTMLMvxSidePanelHeaderElement, + ev: MvxSidePanelHeaderCustomEvent, + ) => 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: HTMLMvxSidePanelHeaderElement, + ev: MvxSidePanelHeaderCustomEvent, + ) => 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 HTMLMvxSidePanelHeaderElement: { + 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 HTMLMvxSignTransactionsPanelElement extends Components.MvxSignTransactionsPanel, HTMLStencilElement {} + var HTMLMvxSignTransactionsPanelElement: { + prototype: HTMLMvxSignTransactionsPanelElement; + new (): HTMLMvxSignTransactionsPanelElement; + }; + interface HTMLMvxSimpleToastElementEventMap { + deleteToast: void; + } + interface HTMLMvxSimpleToastElement extends Components.MvxSimpleToast, HTMLStencilElement { + addEventListener( + type: K, + listener: ( + this: HTMLMvxSimpleToastElement, + ev: MvxSimpleToastCustomEvent, + ) => 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: HTMLMvxSimpleToastElement, + ev: MvxSimpleToastCustomEvent, + ) => 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 HTMLMvxSimpleToastElement: { + prototype: HTMLMvxSimpleToastElement; + new (): HTMLMvxSimpleToastElement; + }; + interface HTMLMvxSpinnerIconElement extends Components.MvxSpinnerIcon, HTMLStencilElement {} + var HTMLMvxSpinnerIconElement: { + prototype: HTMLMvxSpinnerIconElement; + new (): HTMLMvxSpinnerIconElement; + }; + interface HTMLMvxToastListElement extends Components.MvxToastList, HTMLStencilElement {} + var HTMLMvxToastListElement: { + prototype: HTMLMvxToastListElement; + new (): HTMLMvxToastListElement; + }; + interface HTMLMvxTooltipElementEventMap { + triggerRender: boolean; + } + interface HTMLMvxTooltipElement extends Components.MvxTooltip, HTMLStencilElement { + addEventListener( + type: K, + listener: (this: HTMLMvxTooltipElement, ev: MvxTooltipCustomEvent) => 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: HTMLMvxTooltipElement, ev: MvxTooltipCustomEvent) => 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 HTMLMvxTooltipElement: { + prototype: HTMLMvxTooltipElement; + new (): HTMLMvxTooltipElement; + }; + interface HTMLMvxTransactionListItemElement extends Components.MvxTransactionListItem, HTMLStencilElement {} + var HTMLMvxTransactionListItemElement: { + prototype: HTMLMvxTransactionListItemElement; + new (): HTMLMvxTransactionListItemElement; + }; + interface HTMLMvxTransactionToastElementEventMap { + deleteToast: void; + } + interface HTMLMvxTransactionToastElement extends Components.MvxTransactionToast, HTMLStencilElement { + addEventListener( + type: K, + listener: ( + this: HTMLMvxTransactionToastElement, + ev: MvxTransactionToastCustomEvent, + ) => 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: HTMLMvxTransactionToastElement, + ev: MvxTransactionToastCustomEvent, + ) => 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 HTMLMvxTransactionToastElement: { + prototype: HTMLMvxTransactionToastElement; + new (): HTMLMvxTransactionToastElement; + }; + interface HTMLMvxTransactionToastContentElementEventMap { + deleteToast: void; + } + interface HTMLMvxTransactionToastContentElement extends Components.MvxTransactionToastContent, HTMLStencilElement { + addEventListener( + type: K, + listener: ( + this: HTMLMvxTransactionToastContentElement, + ev: MvxTransactionToastContentCustomEvent, + ) => 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: HTMLMvxTransactionToastContentElement, + ev: MvxTransactionToastContentCustomEvent, + ) => 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 HTMLMvxTransactionToastContentElement: { + prototype: HTMLMvxTransactionToastContentElement; + new (): HTMLMvxTransactionToastContentElement; + }; + interface HTMLMvxTransactionToastDetailsElement extends Components.MvxTransactionToastDetails, HTMLStencilElement {} + var HTMLMvxTransactionToastDetailsElement: { + prototype: HTMLMvxTransactionToastDetailsElement; + new (): HTMLMvxTransactionToastDetailsElement; + }; + interface HTMLMvxTransactionToastDetailsBodyElement + extends Components.MvxTransactionToastDetailsBody, + HTMLStencilElement {} + var HTMLMvxTransactionToastDetailsBodyElement: { + prototype: HTMLMvxTransactionToastDetailsBodyElement; + new (): HTMLMvxTransactionToastDetailsBodyElement; + }; + interface HTMLMvxTransactionToastProgressElement extends Components.MvxTransactionToastProgress, HTMLStencilElement {} + var HTMLMvxTransactionToastProgressElement: { + prototype: HTMLMvxTransactionToastProgressElement; + new (): HTMLMvxTransactionToastProgressElement; + }; + interface HTMLMvxTransactionsTableElement extends Components.MvxTransactionsTable, HTMLStencilElement {} + var HTMLMvxTransactionsTableElement: { + prototype: HTMLMvxTransactionsTableElement; + new (): HTMLMvxTransactionsTableElement; + }; + interface HTMLMvxTrimElement extends Components.MvxTrim, HTMLStencilElement {} + var HTMLMvxTrimElement: { + prototype: HTMLMvxTrimElement; + new (): HTMLMvxTrimElement; + }; + interface HTMLMvxUnlockButtonElement extends Components.MvxUnlockButton, HTMLStencilElement {} + var HTMLMvxUnlockButtonElement: { + prototype: HTMLMvxUnlockButtonElement; + new (): HTMLMvxUnlockButtonElement; + }; + interface HTMLMvxUnlockPanelElement extends Components.MvxUnlockPanel, HTMLStencilElement {} + var HTMLMvxUnlockPanelElement: { + prototype: HTMLMvxUnlockPanelElement; + new (): HTMLMvxUnlockPanelElement; + }; + interface HTMLMvxWalletConnectElement extends Components.MvxWalletConnect, HTMLStencilElement {} + var HTMLMvxWalletConnectElement: { + prototype: HTMLMvxWalletConnectElement; + new (): HTMLMvxWalletConnectElement; + }; + interface HTMLMvxWalletConnectAppGalleryIconElement + extends Components.MvxWalletConnectAppGalleryIcon, + HTMLStencilElement {} + var HTMLMvxWalletConnectAppGalleryIconElement: { + prototype: HTMLMvxWalletConnectAppGalleryIconElement; + new (): HTMLMvxWalletConnectAppGalleryIconElement; + }; + interface HTMLMvxWalletConnectAppStoreIconElement + extends Components.MvxWalletConnectAppStoreIcon, + HTMLStencilElement {} + var HTMLMvxWalletConnectAppStoreIconElement: { + prototype: HTMLMvxWalletConnectAppStoreIconElement; + new (): HTMLMvxWalletConnectAppStoreIconElement; + }; + interface HTMLMvxWalletConnectDownloadElement extends Components.MvxWalletConnectDownload, HTMLStencilElement {} + var HTMLMvxWalletConnectDownloadElement: { + prototype: HTMLMvxWalletConnectDownloadElement; + new (): HTMLMvxWalletConnectDownloadElement; + }; + interface HTMLMvxWalletConnectGooglePlayIconElement + extends Components.MvxWalletConnectGooglePlayIcon, + HTMLStencilElement {} + var HTMLMvxWalletConnectGooglePlayIconElement: { + prototype: HTMLMvxWalletConnectGooglePlayIconElement; + new (): HTMLMvxWalletConnectGooglePlayIconElement; + }; + interface HTMLMvxWalletConnectScanElementEventMap { + downloadClick: any; + } + interface HTMLMvxWalletConnectScanElement extends Components.MvxWalletConnectScan, HTMLStencilElement { + addEventListener( + type: K, + listener: ( + this: HTMLMvxWalletConnectScanElement, + ev: MvxWalletConnectScanCustomEvent, + ) => 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: HTMLMvxWalletConnectScanElement, + ev: MvxWalletConnectScanCustomEvent, + ) => 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 HTMLMvxWalletConnectScanElement: { + prototype: HTMLMvxWalletConnectScanElement; + new (): HTMLMvxWalletConnectScanElement; + }; + interface HTMLMvxWalletProviderIconElement extends Components.MvxWalletProviderIcon, HTMLStencilElement {} + var HTMLMvxWalletProviderIconElement: { + prototype: HTMLMvxWalletProviderIconElement; + new (): HTMLMvxWalletProviderIconElement; + }; + interface HTMLMvxXportalDownloadQrIconElement extends Components.MvxXportalDownloadQrIcon, HTMLStencilElement {} + var HTMLMvxXportalDownloadQrIconElement: { + prototype: HTMLMvxXportalDownloadQrIconElement; + new (): HTMLMvxXportalDownloadQrIconElement; + }; + interface HTMLMvxXportalQrCodePreloaderElement extends Components.MvxXportalQrCodePreloader, HTMLStencilElement {} + var HTMLMvxXportalQrCodePreloaderElement: { + prototype: HTMLMvxXportalQrCodePreloaderElement; + new (): HTMLMvxXportalQrCodePreloaderElement; + }; + interface HTMLElementTagNameMap { + 'mvx-address-table': HTMLMvxAddressTableElement; + 'mvx-arc-extension-provider-icon': HTMLMvxArcExtensionProviderIconElement; + 'mvx-arrow-right-icon': HTMLMvxArrowRightIconElement; + 'mvx-brave-extension-provider-icon': HTMLMvxBraveExtensionProviderIconElement; + 'mvx-button': HTMLMvxButtonElement; + 'mvx-circle-info-icon': HTMLMvxCircleInfoIconElement; + 'mvx-copy-button': HTMLMvxCopyButtonElement; + 'mvx-custom-toast': HTMLMvxCustomToastElement; + 'mvx-data-with-explorer-link': HTMLMvxDataWithExplorerLinkElement; + 'mvx-default-transaction-icon-large': HTMLMvxDefaultTransactionIconLargeElement; + 'mvx-default-transaction-icon-small': HTMLMvxDefaultTransactionIconSmallElement; + 'mvx-edge-extension-provider-icon': HTMLMvxEdgeExtensionProviderIconElement; + 'mvx-explorer-link': HTMLMvxExplorerLinkElement; + 'mvx-extension-provider-icon': HTMLMvxExtensionProviderIconElement; + 'mvx-firefox-extension-provider-icon': HTMLMvxFirefoxExtensionProviderIconElement; + 'mvx-format-amount': HTMLMvxFormatAmountElement; + 'mvx-generic-toast': HTMLMvxGenericToastElement; + 'mvx-ledger-confirm': HTMLMvxLedgerConfirmElement; + 'mvx-ledger-connect': HTMLMvxLedgerConnectElement; + 'mvx-ledger-icon': HTMLMvxLedgerIconElement; + 'mvx-ledger-intro': HTMLMvxLedgerIntroElement; + 'mvx-ledger-provider-icon': HTMLMvxLedgerProviderIconElement; + 'mvx-magnifying-glass-icon': HTMLMvxMagnifyingGlassIconElement; + 'mvx-metamask-provider-icon': HTMLMvxMetamaskProviderIconElement; + 'mvx-multiversx-logo-icon': HTMLMvxMultiversxLogoIconElement; + 'mvx-multiversx-symbol-icon': HTMLMvxMultiversxSymbolIconElement; + 'mvx-notifications-feed': HTMLMvxNotificationsFeedElement; + 'mvx-pagination': HTMLMvxPaginationElement; + 'mvx-pagination-ellipsis': HTMLMvxPaginationEllipsisElement; + 'mvx-pagination-ellipsis-form': HTMLMvxPaginationEllipsisFormElement; + 'mvx-passkey-provider-icon': HTMLMvxPasskeyProviderIconElement; + 'mvx-pending-transactions-panel': HTMLMvxPendingTransactionsPanelElement; + 'mvx-preloader': HTMLMvxPreloaderElement; + 'mvx-side-panel': HTMLMvxSidePanelElement; + 'mvx-side-panel-header': HTMLMvxSidePanelHeaderElement; + 'mvx-side-panel-swiper': HTMLMvxSidePanelSwiperElement; + 'mvx-sign-transactions-panel': HTMLMvxSignTransactionsPanelElement; + 'mvx-simple-toast': HTMLMvxSimpleToastElement; + 'mvx-spinner-icon': HTMLMvxSpinnerIconElement; + 'mvx-toast-list': HTMLMvxToastListElement; + 'mvx-tooltip': HTMLMvxTooltipElement; + 'mvx-transaction-list-item': HTMLMvxTransactionListItemElement; + 'mvx-transaction-toast': HTMLMvxTransactionToastElement; + 'mvx-transaction-toast-content': HTMLMvxTransactionToastContentElement; + 'mvx-transaction-toast-details': HTMLMvxTransactionToastDetailsElement; + 'mvx-transaction-toast-details-body': HTMLMvxTransactionToastDetailsBodyElement; + 'mvx-transaction-toast-progress': HTMLMvxTransactionToastProgressElement; + 'mvx-transactions-table': HTMLMvxTransactionsTableElement; + 'mvx-trim': HTMLMvxTrimElement; + 'mvx-unlock-button': HTMLMvxUnlockButtonElement; + 'mvx-unlock-panel': HTMLMvxUnlockPanelElement; + 'mvx-wallet-connect': HTMLMvxWalletConnectElement; + 'mvx-wallet-connect-app-gallery-icon': HTMLMvxWalletConnectAppGalleryIconElement; + 'mvx-wallet-connect-app-store-icon': HTMLMvxWalletConnectAppStoreIconElement; + 'mvx-wallet-connect-download': HTMLMvxWalletConnectDownloadElement; + 'mvx-wallet-connect-google-play-icon': HTMLMvxWalletConnectGooglePlayIconElement; + 'mvx-wallet-connect-scan': HTMLMvxWalletConnectScanElement; + 'mvx-wallet-provider-icon': HTMLMvxWalletProviderIconElement; + 'mvx-xportal-download-qr-icon': HTMLMvxXportalDownloadQrIconElement; + 'mvx-xportal-qr-code-preloader': HTMLMvxXportalQrCodePreloaderElement; + } } declare namespace LocalJSX { - interface MvxAddressTable { - "accountScreenData"?: IAddressTableData; - "onAccessWallet"?: (event: MvxAddressTableCustomEvent) => void; - "onPageChange"?: (event: MvxAddressTableCustomEvent) => void; - "onSelectAccount"?: (event: MvxAddressTableCustomEvent) => void; - "selectedIndex"?: number; - } - interface MvxArcExtensionProviderIcon { - "class"?: string; - "height"?: number; - "width"?: number; - } - interface MvxArrowRightIcon { - "class"?: string; - } - interface MvxBraveExtensionProviderIcon { - "class"?: string; - "height"?: number; - "width"?: number; - } - interface MvxButton { - /** - * @default '' - */ - "class"?: string; - /** - * @default '' - */ - "dataTestId"?: string; - /** - * @default false - */ - "disabled"?: boolean; - "onButtonClick"?: (event: MvxButtonCustomEvent) => void; - /** - * @default 'large' - */ - "size"?: `${ButtonSizeEnum}`; - /** - * @default 'primary' - */ - "variant"?: `${ButtonVariantEnum}`; - } - interface MvxCircleInfoIcon { - "class"?: string; - } - interface MvxCopyButton { - "class"?: string; - "iconClass"?: string; - "text"?: string; - } - interface MvxCustomToast { - "onDeleteToast"?: (event: MvxCustomToastCustomEvent) => void; - "toast"?: IComponentToast; - } - interface MvxDataWithExplorerLink { - "class"?: string; - "data"?: string; - "dataTestId"?: string; - "explorerLink"?: string; - /** - * @default true - */ - "showCopyButton"?: boolean; - /** - * @default true - */ - "showExplorerButton"?: boolean; - /** - * @default false - */ - "withTooltip"?: boolean; - } - interface MvxDefaultTransactionIconLarge { - "class"?: string; - } - interface MvxDefaultTransactionIconSmall { - "class"?: string; - } - interface MvxEdgeExtensionProviderIcon { - "class"?: string; - "height"?: number; - "width"?: number; - } - interface MvxExplorerLink { - "class"?: string; - "dataTestId"?: string; - "iconClass"?: string; - "link"?: string; - } - interface MvxExtensionProviderIcon { - "class"?: string; - "height"?: number; - "width"?: number; - } - interface MvxFirefoxExtensionProviderIcon { - "class"?: string; - "height"?: number; - "width"?: number; - } - interface MvxFormatAmount { - "class"?: string; - "dataTestId"?: string; - "decimalClass"?: string; - "isValid"?: boolean; - "label"?: string; - "labelClass"?: string; - /** - * @default true - */ - "showLabel"?: boolean; - "valueDecimal"?: string; - "valueInteger"?: string; - } - interface MvxGenericToast { - "onDeleteToast"?: (event: MvxGenericToastCustomEvent) => void; - "toast"?: CustomToastType; - } - interface MvxLedgerConfirm { - "confirmScreenData"?: IConfirmScreenData; - } - interface MvxLedgerConnect { - /** - * @default { accountScreenData: null, confirmScreenData: null, connectScreenData: {}, } - */ - "data"?: ILedgerConnectPanelData; - } - interface MvxLedgerIcon { - "class"?: string; - } - interface MvxLedgerIntro { - "connectScreenData"?: IConnectScreenData; - /** - * @default false - */ - "isAwaiting"?: boolean; - "onConnect"?: (event: MvxLedgerIntroCustomEvent) => void; - } - interface MvxLedgerProviderIcon { - "class"?: string; - } - interface MvxMagnifyingGlassIcon { - "class"?: string; - } - interface MvxMetamaskProviderIcon { - "class"?: string; - } - interface MvxMultiversxLogoIcon { - "class"?: string; - } - interface MvxMultiversxSymbolIcon { - "class"?: string; - } - interface MvxNotificationsFeed { - } - 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; - } - interface MvxPasskeyProviderIcon { - "class"?: string; - } - interface MvxPendingTransactionsPanel { - } - interface MvxPreloader { - "class"?: string; - } - 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; - /** - * @default false - */ - "open"?: boolean; - /** - * @default '' - */ - "sidePanelIdentifier"?: string; - } - interface MvxSignTransactionsPanel { - } - interface MvxSimpleToast { - "onDeleteToast"?: (event: MvxSimpleToastCustomEvent) => void; - "toast"?: ISimpleToast; - } - interface MvxSpinnerIcon { - "class"?: string; - } - interface MvxToastList { - } - interface MvxTooltip { - "class"?: string; - "onTriggerRender"?: (event: MvxTooltipCustomEvent) => void; - /** - * @default 'top' - */ - "position"?: 'top' | 'bottom'; - "trigger"?: HTMLElement; - /** - * @default false - */ - "triggerOnClick"?: boolean; - } - interface MvxTransactionListItem { - "transaction"?: ITransactionListItem; - } - 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; - } - interface MvxTransactionToastContent { - "fullWidth"?: boolean; - "onDeleteToast"?: (event: MvxTransactionToastContentCustomEvent) => void; - "processedTransactionsStatus"?: string | JSX.Element; - "toastDataState"?: IToastDataState; - "transactions"?: ITransactionListItem[]; - } - interface MvxTransactionToastDetails { - /** - * @default 5 - */ - "maxShownTransactions"?: number; - "processedTransactionsStatus"?: string | JSX.Element; - "transactionClass"?: string; - "transactions"?: ITransactionListItem[]; - } - interface MvxTransactionToastDetailsBody { - "hash"?: string; - "index"?: string; - "link"?: string; - "status"?: `${TransactionStatusEnum}`; - /** - * @default 'transaction-details-list-item' - */ - "transactionClass"?: string; - } - interface MvxTransactionToastProgress { - "endTime"?: number; - "isStatusPending"?: boolean; - "startTime"?: number; - "toastId"?: string; - } - interface MvxTransactionsTable { - "class"?: string; - "transactions"?: TransactionRowType[]; - } - interface MvxTrim { - "class"?: string; - /** - * @default DataTestIdsEnum.trim - */ - "dataTestId"?: string; - "text"?: string; - } - interface MvxUnlockButton { - "class"?: string; - "dataTestId"?: string; - "icon"?: HTMLElement; - "iconUrl"?: string; - "label"?: string; - "type"?: IProviderBase['type']; - } - interface MvxUnlockPanel { - } - interface MvxWalletConnect { - /** - * @default { wcURI: '' } - */ - "data"?: IWalletConnectPanelData; - /** - * @default '' - */ - "qrCodeSvg"?: string; - } - interface MvxWalletConnectAppGalleryIcon { - "class"?: string; - } - interface MvxWalletConnectAppStoreIcon { - "class"?: string; - } - interface MvxWalletConnectDownload { - "class"?: string; - } - interface MvxWalletConnectGooglePlayIcon { - "class"?: string; - } - interface MvxWalletConnectScan { - "class"?: string; - "onDownloadClick"?: (event: MvxWalletConnectScanCustomEvent) => void; - /** - * @default '' - */ - "qrCodeSvg"?: string; - /** - * @default '' - */ - "walletConnectDeepLink"?: string; - } - interface MvxWalletProviderIcon { - "class"?: string; - } - interface MvxXportalDownloadQrIcon { - /** - * @default '' - */ - "class"?: string; - } - interface MvxXportalQrCodePreloader { - "class"?: string; - } - interface IntrinsicElements { - "mvx-address-table": MvxAddressTable; - "mvx-arc-extension-provider-icon": MvxArcExtensionProviderIcon; - "mvx-arrow-right-icon": MvxArrowRightIcon; - "mvx-brave-extension-provider-icon": MvxBraveExtensionProviderIcon; - "mvx-button": MvxButton; - "mvx-circle-info-icon": MvxCircleInfoIcon; - "mvx-copy-button": MvxCopyButton; - "mvx-custom-toast": MvxCustomToast; - "mvx-data-with-explorer-link": MvxDataWithExplorerLink; - "mvx-default-transaction-icon-large": MvxDefaultTransactionIconLarge; - "mvx-default-transaction-icon-small": MvxDefaultTransactionIconSmall; - "mvx-edge-extension-provider-icon": MvxEdgeExtensionProviderIcon; - "mvx-explorer-link": MvxExplorerLink; - "mvx-extension-provider-icon": MvxExtensionProviderIcon; - "mvx-firefox-extension-provider-icon": MvxFirefoxExtensionProviderIcon; - "mvx-format-amount": MvxFormatAmount; - "mvx-generic-toast": MvxGenericToast; - "mvx-ledger-confirm": MvxLedgerConfirm; - "mvx-ledger-connect": MvxLedgerConnect; - "mvx-ledger-icon": MvxLedgerIcon; - "mvx-ledger-intro": MvxLedgerIntro; - "mvx-ledger-provider-icon": MvxLedgerProviderIcon; - "mvx-magnifying-glass-icon": MvxMagnifyingGlassIcon; - "mvx-metamask-provider-icon": MvxMetamaskProviderIcon; - "mvx-multiversx-logo-icon": MvxMultiversxLogoIcon; - "mvx-multiversx-symbol-icon": MvxMultiversxSymbolIcon; - "mvx-notifications-feed": MvxNotificationsFeed; - "mvx-pagination": MvxPagination; - "mvx-pagination-ellipsis": MvxPaginationEllipsis; - "mvx-pagination-ellipsis-form": MvxPaginationEllipsisForm; - "mvx-passkey-provider-icon": MvxPasskeyProviderIcon; - "mvx-pending-transactions-panel": MvxPendingTransactionsPanel; - "mvx-preloader": MvxPreloader; - "mvx-side-panel": MvxSidePanel; - "mvx-side-panel-header": MvxSidePanelHeader; - "mvx-side-panel-swiper": MvxSidePanelSwiper; - "mvx-sign-transactions-panel": MvxSignTransactionsPanel; - "mvx-simple-toast": MvxSimpleToast; - "mvx-spinner-icon": MvxSpinnerIcon; - "mvx-toast-list": MvxToastList; - "mvx-tooltip": MvxTooltip; - "mvx-transaction-list-item": MvxTransactionListItem; - "mvx-transaction-toast": MvxTransactionToast; - "mvx-transaction-toast-content": MvxTransactionToastContent; - "mvx-transaction-toast-details": MvxTransactionToastDetails; - "mvx-transaction-toast-details-body": MvxTransactionToastDetailsBody; - "mvx-transaction-toast-progress": MvxTransactionToastProgress; - "mvx-transactions-table": MvxTransactionsTable; - "mvx-trim": MvxTrim; - "mvx-unlock-button": MvxUnlockButton; - "mvx-unlock-panel": MvxUnlockPanel; - "mvx-wallet-connect": MvxWalletConnect; - "mvx-wallet-connect-app-gallery-icon": MvxWalletConnectAppGalleryIcon; - "mvx-wallet-connect-app-store-icon": MvxWalletConnectAppStoreIcon; - "mvx-wallet-connect-download": MvxWalletConnectDownload; - "mvx-wallet-connect-google-play-icon": MvxWalletConnectGooglePlayIcon; - "mvx-wallet-connect-scan": MvxWalletConnectScan; - "mvx-wallet-provider-icon": MvxWalletProviderIcon; - "mvx-xportal-download-qr-icon": MvxXportalDownloadQrIcon; - "mvx-xportal-qr-code-preloader": MvxXportalQrCodePreloader; - } + interface MvxAddressTable { + accountScreenData?: IAddressTableData; + onAccessWallet?: (event: MvxAddressTableCustomEvent) => void; + onPageChange?: (event: MvxAddressTableCustomEvent) => void; + onSelectAccount?: (event: MvxAddressTableCustomEvent) => void; + selectedIndex?: number; + } + interface MvxArcExtensionProviderIcon { + class?: string; + height?: number; + width?: number; + } + interface MvxArrowRightIcon { + class?: string; + } + interface MvxBraveExtensionProviderIcon { + class?: string; + height?: number; + width?: number; + } + interface MvxButton { + /** + * @default '' + */ + class?: string; + /** + * @default '' + */ + dataTestId?: string; + /** + * @default false + */ + disabled?: boolean; + onButtonClick?: (event: MvxButtonCustomEvent) => void; + /** + * @default 'large' + */ + size?: `${ButtonSizeEnum}`; + /** + * @default 'primary' + */ + variant?: `${ButtonVariantEnum}`; + } + interface MvxCircleInfoIcon { + class?: string; + } + interface MvxCopyButton { + class?: string; + iconClass?: string; + text?: string; + } + interface MvxCustomToast { + onDeleteToast?: (event: MvxCustomToastCustomEvent) => void; + toast?: IComponentToast; + } + interface MvxDataWithExplorerLink { + class?: string; + data?: string; + dataTestId?: string; + explorerLink?: string; + /** + * @default true + */ + showCopyButton?: boolean; + /** + * @default true + */ + showExplorerButton?: boolean; + /** + * @default false + */ + withTooltip?: boolean; + } + interface MvxDefaultTransactionIconLarge { + class?: string; + } + interface MvxDefaultTransactionIconSmall { + class?: string; + } + interface MvxEdgeExtensionProviderIcon { + class?: string; + height?: number; + width?: number; + } + interface MvxExplorerLink { + class?: string; + dataTestId?: string; + iconClass?: string; + link?: string; + } + interface MvxExtensionProviderIcon { + class?: string; + height?: number; + width?: number; + } + interface MvxFirefoxExtensionProviderIcon { + class?: string; + height?: number; + width?: number; + } + interface MvxFormatAmount { + class?: string; + dataTestId?: string; + decimalClass?: string; + isValid?: boolean; + label?: string; + labelClass?: string; + /** + * @default true + */ + showLabel?: boolean; + valueDecimal?: string; + valueInteger?: string; + } + interface MvxGenericToast { + onDeleteToast?: (event: MvxGenericToastCustomEvent) => void; + toast?: CustomToastType; + } + interface MvxLedgerConfirm { + confirmScreenData?: IConfirmScreenData; + } + interface MvxLedgerConnect { + /** + * @default { accountScreenData: null, confirmScreenData: null, connectScreenData: {}, } + */ + data?: ILedgerConnectPanelData; + } + interface MvxLedgerIcon { + class?: string; + } + interface MvxLedgerIntro { + connectScreenData?: IConnectScreenData; + /** + * @default false + */ + isAwaiting?: boolean; + onConnect?: (event: MvxLedgerIntroCustomEvent) => void; + } + interface MvxLedgerProviderIcon { + class?: string; + } + interface MvxMagnifyingGlassIcon { + class?: string; + } + interface MvxMetamaskProviderIcon { + class?: string; + } + interface MvxMultiversxLogoIcon { + class?: string; + } + interface MvxMultiversxSymbolIcon { + class?: string; + } + interface MvxNotificationsFeed {} + 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; + } + interface MvxPasskeyProviderIcon { + class?: string; + } + interface MvxPendingTransactionsPanel {} + interface MvxPreloader { + class?: string; + } + 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; + /** + * @default false + */ + open?: boolean; + /** + * @default '' + */ + sidePanelIdentifier?: string; + } + interface MvxSignTransactionsPanel {} + interface MvxSimpleToast { + onDeleteToast?: (event: MvxSimpleToastCustomEvent) => void; + toast?: ISimpleToast; + } + interface MvxSpinnerIcon { + class?: string; + } + interface MvxToastList {} + interface MvxTooltip { + class?: string; + onTriggerRender?: (event: MvxTooltipCustomEvent) => void; + /** + * @default 'top' + */ + position?: 'top' | 'bottom'; + trigger?: HTMLElement; + /** + * @default false + */ + triggerOnClick?: boolean; + } + interface MvxTransactionListItem { + transaction?: ITransactionListItem; + } + 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; + } + interface MvxTransactionToastContent { + fullWidth?: boolean; + onDeleteToast?: (event: MvxTransactionToastContentCustomEvent) => void; + processedTransactionsStatus?: string | JSX.Element; + toastDataState?: IToastDataState; + transactions?: ITransactionListItem[]; + } + interface MvxTransactionToastDetails { + /** + * @default 5 + */ + maxShownTransactions?: number; + processedTransactionsStatus?: string | JSX.Element; + transactionClass?: string; + transactions?: ITransactionListItem[]; + } + interface MvxTransactionToastDetailsBody { + hash?: string; + index?: string; + link?: string; + status?: `${TransactionStatusEnum}`; + /** + * @default 'transaction-details-list-item' + */ + transactionClass?: string; + } + interface MvxTransactionToastProgress { + endTime?: number; + isStatusPending?: boolean; + startTime?: number; + toastId?: string; + } + interface MvxTransactionsTable { + class?: string; + transactions?: TransactionRowType[]; + } + interface MvxTrim { + class?: string; + /** + * @default DataTestIdsEnum.trim + */ + dataTestId?: string; + text?: string; + } + interface MvxUnlockButton { + class?: string; + dataTestId?: string; + icon?: HTMLElement; + iconUrl?: string; + label?: string; + type?: IProviderBase['type']; + } + interface MvxUnlockPanel {} + interface MvxWalletConnect { + /** + * @default { wcURI: '' } + */ + data?: IWalletConnectPanelData; + /** + * @default '' + */ + qrCodeSvg?: string; + } + interface MvxWalletConnectAppGalleryIcon { + class?: string; + } + interface MvxWalletConnectAppStoreIcon { + class?: string; + } + interface MvxWalletConnectDownload { + class?: string; + } + interface MvxWalletConnectGooglePlayIcon { + class?: string; + } + interface MvxWalletConnectScan { + class?: string; + onDownloadClick?: (event: MvxWalletConnectScanCustomEvent) => void; + /** + * @default '' + */ + qrCodeSvg?: string; + /** + * @default '' + */ + walletConnectDeepLink?: string; + } + interface MvxWalletProviderIcon { + class?: string; + } + interface MvxXportalDownloadQrIcon { + /** + * @default '' + */ + class?: string; + } + interface MvxXportalQrCodePreloader { + class?: string; + } + interface IntrinsicElements { + 'mvx-address-table': MvxAddressTable; + 'mvx-arc-extension-provider-icon': MvxArcExtensionProviderIcon; + 'mvx-arrow-right-icon': MvxArrowRightIcon; + 'mvx-brave-extension-provider-icon': MvxBraveExtensionProviderIcon; + 'mvx-button': MvxButton; + 'mvx-circle-info-icon': MvxCircleInfoIcon; + 'mvx-copy-button': MvxCopyButton; + 'mvx-custom-toast': MvxCustomToast; + 'mvx-data-with-explorer-link': MvxDataWithExplorerLink; + 'mvx-default-transaction-icon-large': MvxDefaultTransactionIconLarge; + 'mvx-default-transaction-icon-small': MvxDefaultTransactionIconSmall; + 'mvx-edge-extension-provider-icon': MvxEdgeExtensionProviderIcon; + 'mvx-explorer-link': MvxExplorerLink; + 'mvx-extension-provider-icon': MvxExtensionProviderIcon; + 'mvx-firefox-extension-provider-icon': MvxFirefoxExtensionProviderIcon; + 'mvx-format-amount': MvxFormatAmount; + 'mvx-generic-toast': MvxGenericToast; + 'mvx-ledger-confirm': MvxLedgerConfirm; + 'mvx-ledger-connect': MvxLedgerConnect; + 'mvx-ledger-icon': MvxLedgerIcon; + 'mvx-ledger-intro': MvxLedgerIntro; + 'mvx-ledger-provider-icon': MvxLedgerProviderIcon; + 'mvx-magnifying-glass-icon': MvxMagnifyingGlassIcon; + 'mvx-metamask-provider-icon': MvxMetamaskProviderIcon; + 'mvx-multiversx-logo-icon': MvxMultiversxLogoIcon; + 'mvx-multiversx-symbol-icon': MvxMultiversxSymbolIcon; + 'mvx-notifications-feed': MvxNotificationsFeed; + 'mvx-pagination': MvxPagination; + 'mvx-pagination-ellipsis': MvxPaginationEllipsis; + 'mvx-pagination-ellipsis-form': MvxPaginationEllipsisForm; + 'mvx-passkey-provider-icon': MvxPasskeyProviderIcon; + 'mvx-pending-transactions-panel': MvxPendingTransactionsPanel; + 'mvx-preloader': MvxPreloader; + 'mvx-side-panel': MvxSidePanel; + 'mvx-side-panel-header': MvxSidePanelHeader; + 'mvx-side-panel-swiper': MvxSidePanelSwiper; + 'mvx-sign-transactions-panel': MvxSignTransactionsPanel; + 'mvx-simple-toast': MvxSimpleToast; + 'mvx-spinner-icon': MvxSpinnerIcon; + 'mvx-toast-list': MvxToastList; + 'mvx-tooltip': MvxTooltip; + 'mvx-transaction-list-item': MvxTransactionListItem; + 'mvx-transaction-toast': MvxTransactionToast; + 'mvx-transaction-toast-content': MvxTransactionToastContent; + 'mvx-transaction-toast-details': MvxTransactionToastDetails; + 'mvx-transaction-toast-details-body': MvxTransactionToastDetailsBody; + 'mvx-transaction-toast-progress': MvxTransactionToastProgress; + 'mvx-transactions-table': MvxTransactionsTable; + 'mvx-trim': MvxTrim; + 'mvx-unlock-button': MvxUnlockButton; + 'mvx-unlock-panel': MvxUnlockPanel; + 'mvx-wallet-connect': MvxWalletConnect; + 'mvx-wallet-connect-app-gallery-icon': MvxWalletConnectAppGalleryIcon; + 'mvx-wallet-connect-app-store-icon': MvxWalletConnectAppStoreIcon; + 'mvx-wallet-connect-download': MvxWalletConnectDownload; + 'mvx-wallet-connect-google-play-icon': MvxWalletConnectGooglePlayIcon; + 'mvx-wallet-connect-scan': MvxWalletConnectScan; + 'mvx-wallet-provider-icon': MvxWalletProviderIcon; + 'mvx-xportal-download-qr-icon': MvxXportalDownloadQrIcon; + 'mvx-xportal-qr-code-preloader': MvxXportalQrCodePreloader; + } } export { LocalJSX as JSX }; -declare module "@stencil/core" { - export namespace JSX { - interface IntrinsicElements { - "mvx-address-table": LocalJSX.MvxAddressTable & JSXBase.HTMLAttributes; - "mvx-arc-extension-provider-icon": LocalJSX.MvxArcExtensionProviderIcon & JSXBase.HTMLAttributes; - "mvx-arrow-right-icon": LocalJSX.MvxArrowRightIcon & JSXBase.HTMLAttributes; - "mvx-brave-extension-provider-icon": LocalJSX.MvxBraveExtensionProviderIcon & JSXBase.HTMLAttributes; - "mvx-button": LocalJSX.MvxButton & JSXBase.HTMLAttributes; - "mvx-circle-info-icon": LocalJSX.MvxCircleInfoIcon & JSXBase.HTMLAttributes; - "mvx-copy-button": LocalJSX.MvxCopyButton & JSXBase.HTMLAttributes; - "mvx-custom-toast": LocalJSX.MvxCustomToast & JSXBase.HTMLAttributes; - "mvx-data-with-explorer-link": LocalJSX.MvxDataWithExplorerLink & JSXBase.HTMLAttributes; - "mvx-default-transaction-icon-large": LocalJSX.MvxDefaultTransactionIconLarge & JSXBase.HTMLAttributes; - "mvx-default-transaction-icon-small": LocalJSX.MvxDefaultTransactionIconSmall & JSXBase.HTMLAttributes; - "mvx-edge-extension-provider-icon": LocalJSX.MvxEdgeExtensionProviderIcon & JSXBase.HTMLAttributes; - "mvx-explorer-link": LocalJSX.MvxExplorerLink & JSXBase.HTMLAttributes; - "mvx-extension-provider-icon": LocalJSX.MvxExtensionProviderIcon & JSXBase.HTMLAttributes; - "mvx-firefox-extension-provider-icon": LocalJSX.MvxFirefoxExtensionProviderIcon & JSXBase.HTMLAttributes; - "mvx-format-amount": LocalJSX.MvxFormatAmount & JSXBase.HTMLAttributes; - "mvx-generic-toast": LocalJSX.MvxGenericToast & JSXBase.HTMLAttributes; - "mvx-ledger-confirm": LocalJSX.MvxLedgerConfirm & JSXBase.HTMLAttributes; - "mvx-ledger-connect": LocalJSX.MvxLedgerConnect & JSXBase.HTMLAttributes; - "mvx-ledger-icon": LocalJSX.MvxLedgerIcon & JSXBase.HTMLAttributes; - "mvx-ledger-intro": LocalJSX.MvxLedgerIntro & JSXBase.HTMLAttributes; - "mvx-ledger-provider-icon": LocalJSX.MvxLedgerProviderIcon & JSXBase.HTMLAttributes; - "mvx-magnifying-glass-icon": LocalJSX.MvxMagnifyingGlassIcon & JSXBase.HTMLAttributes; - "mvx-metamask-provider-icon": LocalJSX.MvxMetamaskProviderIcon & JSXBase.HTMLAttributes; - "mvx-multiversx-logo-icon": LocalJSX.MvxMultiversxLogoIcon & JSXBase.HTMLAttributes; - "mvx-multiversx-symbol-icon": LocalJSX.MvxMultiversxSymbolIcon & JSXBase.HTMLAttributes; - "mvx-notifications-feed": LocalJSX.MvxNotificationsFeed & JSXBase.HTMLAttributes; - "mvx-pagination": LocalJSX.MvxPagination & JSXBase.HTMLAttributes; - "mvx-pagination-ellipsis": LocalJSX.MvxPaginationEllipsis & JSXBase.HTMLAttributes; - "mvx-pagination-ellipsis-form": LocalJSX.MvxPaginationEllipsisForm & JSXBase.HTMLAttributes; - "mvx-passkey-provider-icon": LocalJSX.MvxPasskeyProviderIcon & JSXBase.HTMLAttributes; - "mvx-pending-transactions-panel": LocalJSX.MvxPendingTransactionsPanel & JSXBase.HTMLAttributes; - "mvx-preloader": LocalJSX.MvxPreloader & 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-panel": LocalJSX.MvxSignTransactionsPanel & JSXBase.HTMLAttributes; - "mvx-simple-toast": LocalJSX.MvxSimpleToast & JSXBase.HTMLAttributes; - "mvx-spinner-icon": LocalJSX.MvxSpinnerIcon & JSXBase.HTMLAttributes; - "mvx-toast-list": LocalJSX.MvxToastList & JSXBase.HTMLAttributes; - "mvx-tooltip": LocalJSX.MvxTooltip & JSXBase.HTMLAttributes; - "mvx-transaction-list-item": LocalJSX.MvxTransactionListItem & JSXBase.HTMLAttributes; - "mvx-transaction-toast": LocalJSX.MvxTransactionToast & JSXBase.HTMLAttributes; - "mvx-transaction-toast-content": LocalJSX.MvxTransactionToastContent & JSXBase.HTMLAttributes; - "mvx-transaction-toast-details": LocalJSX.MvxTransactionToastDetails & JSXBase.HTMLAttributes; - "mvx-transaction-toast-details-body": LocalJSX.MvxTransactionToastDetailsBody & JSXBase.HTMLAttributes; - "mvx-transaction-toast-progress": LocalJSX.MvxTransactionToastProgress & JSXBase.HTMLAttributes; - "mvx-transactions-table": LocalJSX.MvxTransactionsTable & JSXBase.HTMLAttributes; - "mvx-trim": LocalJSX.MvxTrim & JSXBase.HTMLAttributes; - "mvx-unlock-button": LocalJSX.MvxUnlockButton & JSXBase.HTMLAttributes; - "mvx-unlock-panel": LocalJSX.MvxUnlockPanel & JSXBase.HTMLAttributes; - "mvx-wallet-connect": LocalJSX.MvxWalletConnect & JSXBase.HTMLAttributes; - "mvx-wallet-connect-app-gallery-icon": LocalJSX.MvxWalletConnectAppGalleryIcon & JSXBase.HTMLAttributes; - "mvx-wallet-connect-app-store-icon": LocalJSX.MvxWalletConnectAppStoreIcon & JSXBase.HTMLAttributes; - "mvx-wallet-connect-download": LocalJSX.MvxWalletConnectDownload & JSXBase.HTMLAttributes; - "mvx-wallet-connect-google-play-icon": LocalJSX.MvxWalletConnectGooglePlayIcon & JSXBase.HTMLAttributes; - "mvx-wallet-connect-scan": LocalJSX.MvxWalletConnectScan & JSXBase.HTMLAttributes; - "mvx-wallet-provider-icon": LocalJSX.MvxWalletProviderIcon & JSXBase.HTMLAttributes; - "mvx-xportal-download-qr-icon": LocalJSX.MvxXportalDownloadQrIcon & JSXBase.HTMLAttributes; - "mvx-xportal-qr-code-preloader": LocalJSX.MvxXportalQrCodePreloader & JSXBase.HTMLAttributes; - } - } +declare module '@stencil/core' { + export namespace JSX { + interface IntrinsicElements { + 'mvx-address-table': LocalJSX.MvxAddressTable & JSXBase.HTMLAttributes; + 'mvx-arc-extension-provider-icon': LocalJSX.MvxArcExtensionProviderIcon & + JSXBase.HTMLAttributes; + 'mvx-arrow-right-icon': LocalJSX.MvxArrowRightIcon & JSXBase.HTMLAttributes; + 'mvx-brave-extension-provider-icon': LocalJSX.MvxBraveExtensionProviderIcon & + JSXBase.HTMLAttributes; + 'mvx-button': LocalJSX.MvxButton & JSXBase.HTMLAttributes; + 'mvx-circle-info-icon': LocalJSX.MvxCircleInfoIcon & JSXBase.HTMLAttributes; + 'mvx-copy-button': LocalJSX.MvxCopyButton & JSXBase.HTMLAttributes; + 'mvx-custom-toast': LocalJSX.MvxCustomToast & JSXBase.HTMLAttributes; + 'mvx-data-with-explorer-link': LocalJSX.MvxDataWithExplorerLink & + JSXBase.HTMLAttributes; + 'mvx-default-transaction-icon-large': LocalJSX.MvxDefaultTransactionIconLarge & + JSXBase.HTMLAttributes; + 'mvx-default-transaction-icon-small': LocalJSX.MvxDefaultTransactionIconSmall & + JSXBase.HTMLAttributes; + 'mvx-edge-extension-provider-icon': LocalJSX.MvxEdgeExtensionProviderIcon & + JSXBase.HTMLAttributes; + 'mvx-explorer-link': LocalJSX.MvxExplorerLink & JSXBase.HTMLAttributes; + 'mvx-extension-provider-icon': LocalJSX.MvxExtensionProviderIcon & + JSXBase.HTMLAttributes; + 'mvx-firefox-extension-provider-icon': LocalJSX.MvxFirefoxExtensionProviderIcon & + JSXBase.HTMLAttributes; + 'mvx-format-amount': LocalJSX.MvxFormatAmount & JSXBase.HTMLAttributes; + 'mvx-generic-toast': LocalJSX.MvxGenericToast & JSXBase.HTMLAttributes; + 'mvx-ledger-confirm': LocalJSX.MvxLedgerConfirm & JSXBase.HTMLAttributes; + 'mvx-ledger-connect': LocalJSX.MvxLedgerConnect & JSXBase.HTMLAttributes; + 'mvx-ledger-icon': LocalJSX.MvxLedgerIcon & JSXBase.HTMLAttributes; + 'mvx-ledger-intro': LocalJSX.MvxLedgerIntro & JSXBase.HTMLAttributes; + 'mvx-ledger-provider-icon': LocalJSX.MvxLedgerProviderIcon & + JSXBase.HTMLAttributes; + 'mvx-magnifying-glass-icon': LocalJSX.MvxMagnifyingGlassIcon & + JSXBase.HTMLAttributes; + 'mvx-metamask-provider-icon': LocalJSX.MvxMetamaskProviderIcon & + JSXBase.HTMLAttributes; + 'mvx-multiversx-logo-icon': LocalJSX.MvxMultiversxLogoIcon & + JSXBase.HTMLAttributes; + 'mvx-multiversx-symbol-icon': LocalJSX.MvxMultiversxSymbolIcon & + JSXBase.HTMLAttributes; + 'mvx-notifications-feed': LocalJSX.MvxNotificationsFeed & JSXBase.HTMLAttributes; + 'mvx-pagination': LocalJSX.MvxPagination & JSXBase.HTMLAttributes; + 'mvx-pagination-ellipsis': LocalJSX.MvxPaginationEllipsis & + JSXBase.HTMLAttributes; + 'mvx-pagination-ellipsis-form': LocalJSX.MvxPaginationEllipsisForm & + JSXBase.HTMLAttributes; + 'mvx-passkey-provider-icon': LocalJSX.MvxPasskeyProviderIcon & + JSXBase.HTMLAttributes; + 'mvx-pending-transactions-panel': LocalJSX.MvxPendingTransactionsPanel & + JSXBase.HTMLAttributes; + 'mvx-preloader': LocalJSX.MvxPreloader & 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-panel': LocalJSX.MvxSignTransactionsPanel & + JSXBase.HTMLAttributes; + 'mvx-simple-toast': LocalJSX.MvxSimpleToast & JSXBase.HTMLAttributes; + 'mvx-spinner-icon': LocalJSX.MvxSpinnerIcon & JSXBase.HTMLAttributes; + 'mvx-toast-list': LocalJSX.MvxToastList & JSXBase.HTMLAttributes; + 'mvx-tooltip': LocalJSX.MvxTooltip & JSXBase.HTMLAttributes; + 'mvx-transaction-list-item': LocalJSX.MvxTransactionListItem & + JSXBase.HTMLAttributes; + 'mvx-transaction-toast': LocalJSX.MvxTransactionToast & JSXBase.HTMLAttributes; + 'mvx-transaction-toast-content': LocalJSX.MvxTransactionToastContent & + JSXBase.HTMLAttributes; + 'mvx-transaction-toast-details': LocalJSX.MvxTransactionToastDetails & + JSXBase.HTMLAttributes; + 'mvx-transaction-toast-details-body': LocalJSX.MvxTransactionToastDetailsBody & + JSXBase.HTMLAttributes; + 'mvx-transaction-toast-progress': LocalJSX.MvxTransactionToastProgress & + JSXBase.HTMLAttributes; + 'mvx-transactions-table': LocalJSX.MvxTransactionsTable & JSXBase.HTMLAttributes; + 'mvx-trim': LocalJSX.MvxTrim & JSXBase.HTMLAttributes; + 'mvx-unlock-button': LocalJSX.MvxUnlockButton & JSXBase.HTMLAttributes; + 'mvx-unlock-panel': LocalJSX.MvxUnlockPanel & JSXBase.HTMLAttributes; + 'mvx-wallet-connect': LocalJSX.MvxWalletConnect & JSXBase.HTMLAttributes; + 'mvx-wallet-connect-app-gallery-icon': LocalJSX.MvxWalletConnectAppGalleryIcon & + JSXBase.HTMLAttributes; + 'mvx-wallet-connect-app-store-icon': LocalJSX.MvxWalletConnectAppStoreIcon & + JSXBase.HTMLAttributes; + 'mvx-wallet-connect-download': LocalJSX.MvxWalletConnectDownload & + JSXBase.HTMLAttributes; + 'mvx-wallet-connect-google-play-icon': LocalJSX.MvxWalletConnectGooglePlayIcon & + JSXBase.HTMLAttributes; + 'mvx-wallet-connect-scan': LocalJSX.MvxWalletConnectScan & + JSXBase.HTMLAttributes; + 'mvx-wallet-provider-icon': LocalJSX.MvxWalletProviderIcon & + JSXBase.HTMLAttributes; + 'mvx-xportal-download-qr-icon': LocalJSX.MvxXportalDownloadQrIcon & + JSXBase.HTMLAttributes; + 'mvx-xportal-qr-code-preloader': LocalJSX.MvxXportalQrCodePreloader & + JSXBase.HTMLAttributes; + } + } } diff --git a/src/components/common/button/button.scss b/src/components/common/button/button.scss index ff1190ee..21b0cbc1 100644 --- a/src/components/common/button/button.scss +++ b/src/components/common/button/button.scss @@ -1 +1 @@ -// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. \ No newline at end of file +// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. diff --git a/src/components/common/copy-button/copy-button.tsx b/src/components/common/copy-button/copy-button.tsx index de7a48a4..d3a709c6 100644 --- a/src/components/common/copy-button/copy-button.tsx +++ b/src/components/common/copy-button/copy-button.tsx @@ -1,4 +1,4 @@ -import { Component, h,Prop, State } from '@stencil/core'; +import { Component, h, Prop, State } from '@stencil/core'; import { CopyButton as CopyButtonComponent } from 'common/CopyButton/CopyButton'; import { getCopyClickAction } from 'common/CopyButton/getCopyClickAction'; @@ -13,7 +13,7 @@ export class CopyButton { @Prop() text: string; private handleClick = getCopyClickAction({ - onSuccessChange: (isSuccess) => (this.isSuccess = isSuccess), + onSuccessChange: isSuccess => (this.isSuccess = isSuccess), }); render() { diff --git a/src/components/common/copy-button/tests/copy-button.spec.ts b/src/components/common/copy-button/tests/copy-button.spec.ts index 67d8eecf..d989562b 100644 --- a/src/components/common/copy-button/tests/copy-button.spec.ts +++ b/src/components/common/copy-button/tests/copy-button.spec.ts @@ -104,7 +104,6 @@ describe('CopyButton', () => { stopPropagation: jest.fn(), } as unknown as MouseEvent; - await component['handleClick'](mockEvent, component.text); await page.waitForChanges(); diff --git a/src/components/common/format-amount/format-amount.tsx b/src/components/common/format-amount/format-amount.tsx index dfba403c..0757a28e 100644 --- a/src/components/common/format-amount/format-amount.tsx +++ b/src/components/common/format-amount/format-amount.tsx @@ -17,16 +17,18 @@ export class FormatAmount { @Prop() decimalClass?: string; render() { - return ; + return ( + + ); } } diff --git a/src/components/common/tooltip/tooltip.scss b/src/components/common/tooltip/tooltip.scss index ff1190ee..21b0cbc1 100644 --- a/src/components/common/tooltip/tooltip.scss +++ b/src/components/common/tooltip/tooltip.scss @@ -1 +1 @@ -// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. \ No newline at end of file +// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. diff --git a/src/components/common/tooltip/tooltip.tsx b/src/components/common/tooltip/tooltip.tsx index 20820f87..16192432 100644 --- a/src/components/common/tooltip/tooltip.tsx +++ b/src/components/common/tooltip/tooltip.tsx @@ -1,4 +1,4 @@ -import type { EventEmitter} from '@stencil/core'; +import type { EventEmitter } from '@stencil/core'; import { Component, Event, h, Prop, State } from '@stencil/core'; import { Tooltip as TooltipComponent } from 'common/Tooltip/Tooltip'; @@ -21,7 +21,6 @@ export class Tooltip { this.isVisible = isVisible; }; - render() { return ( { diff --git a/src/components/common/trim/trim.tsx b/src/components/common/trim/trim.tsx index 084e17bb..04696270 100644 --- a/src/components/common/trim/trim.tsx +++ b/src/components/common/trim/trim.tsx @@ -13,12 +13,6 @@ export class Trim { @Prop() text: string; render() { - return ( - - ); + return ; } } diff --git a/src/components/controlled/transactions-table/components/TransactionAccount/components/TransactionAccountName/index.ts b/src/components/controlled/transactions-table/components/TransactionAccount/components/TransactionAccountName/index.ts index 0f89d2cc..22d91d8a 100644 --- a/src/components/controlled/transactions-table/components/TransactionAccount/components/TransactionAccountName/index.ts +++ b/src/components/controlled/transactions-table/components/TransactionAccount/components/TransactionAccountName/index.ts @@ -1 +1 @@ -export * from './TransactionAccountName' \ No newline at end of file +export * from './TransactionAccountName'; diff --git a/src/components/controlled/transactions-table/components/TransactionAccount/components/index.ts b/src/components/controlled/transactions-table/components/TransactionAccount/components/index.ts index 0f89d2cc..22d91d8a 100644 --- a/src/components/controlled/transactions-table/components/TransactionAccount/components/index.ts +++ b/src/components/controlled/transactions-table/components/TransactionAccount/components/index.ts @@ -1 +1 @@ -export * from './TransactionAccountName' \ No newline at end of file +export * from './TransactionAccountName'; diff --git a/src/components/controlled/transactions-table/components/TransactionAccount/index.ts b/src/components/controlled/transactions-table/components/TransactionAccount/index.ts index 4ccfa2e8..33c7f917 100644 --- a/src/components/controlled/transactions-table/components/TransactionAccount/index.ts +++ b/src/components/controlled/transactions-table/components/TransactionAccount/index.ts @@ -1 +1 @@ -export * from './TransactionAccount' \ No newline at end of file +export * from './TransactionAccount'; diff --git a/src/components/controlled/transactions-table/components/TransactionAge/TransactionAge.tsx b/src/components/controlled/transactions-table/components/TransactionAge/TransactionAge.tsx index 67befb52..fd70ece8 100644 --- a/src/components/controlled/transactions-table/components/TransactionAge/TransactionAge.tsx +++ b/src/components/controlled/transactions-table/components/TransactionAge/TransactionAge.tsx @@ -7,28 +7,28 @@ const styles = { } satisfies Record; interface TransactionAgePropsType { - age: string; - class?: string; - tooltip?: string; + age: string; + class?: string; + tooltip?: string; } export function TransactionAge({ age, tooltip, class: className }: TransactionAgePropsType) { - const component = tooltip ? ( -
- {age} -
- ) : ( -
- {age} -
- ); + const component = tooltip ? ( +
+ {age} +
+ ) : ( +
+ {age} +
+ ); - return
{component}
; + return
{component}
; } diff --git a/src/components/controlled/transactions-table/components/TransactionAge/index.ts b/src/components/controlled/transactions-table/components/TransactionAge/index.ts index fcb2deab..1fa35e9b 100644 --- a/src/components/controlled/transactions-table/components/TransactionAge/index.ts +++ b/src/components/controlled/transactions-table/components/TransactionAge/index.ts @@ -1 +1 @@ -export * from './TransactionAge'; \ No newline at end of file +export * from './TransactionAge'; diff --git a/src/components/controlled/transactions-table/components/TransactionAge/tests/transaction-age.spec.tsx b/src/components/controlled/transactions-table/components/TransactionAge/tests/transaction-age.spec.tsx index 2b0467e2..4d66902d 100644 --- a/src/components/controlled/transactions-table/components/TransactionAge/tests/transaction-age.spec.tsx +++ b/src/components/controlled/transactions-table/components/TransactionAge/tests/transaction-age.spec.tsx @@ -4,12 +4,11 @@ import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; import { TransactionAge } from '../TransactionAge'; - describe('TransactionAge tests', () => { it('renders with age prop', async () => { const page = await newSpecPage({ components: [], - template: () => + template: () => , }); const ageSpan = page.root.querySelector(`[data-testid="${DataTestIdsEnum.transactionAge}"]`); @@ -20,7 +19,7 @@ describe('TransactionAge tests', () => { it('renders without tooltip when not provided', async () => { const page = await newSpecPage({ components: [], - template: () => + template: () => , }); const ageSpan = page.root.querySelector(`[data-testid="${DataTestIdsEnum.transactionAge}"]`); @@ -31,7 +30,7 @@ describe('TransactionAge tests', () => { it('renders with tooltip when provided', async () => { const page = await newSpecPage({ components: [], - template: () => + template: () => , }); const ageSpan = page.root.querySelector(`[data-testid="${DataTestIdsEnum.transactionAge}"]`); diff --git a/src/components/controlled/transactions-table/components/TransactionHash/index.ts b/src/components/controlled/transactions-table/components/TransactionHash/index.ts index 3b8611a9..d30f8cc7 100644 --- a/src/components/controlled/transactions-table/components/TransactionHash/index.ts +++ b/src/components/controlled/transactions-table/components/TransactionHash/index.ts @@ -1 +1 @@ -export * from './TransactionHash' \ No newline at end of file +export * from './TransactionHash'; diff --git a/src/components/controlled/transactions-table/components/TransactionIcon/TransactionIcon.tsx b/src/components/controlled/transactions-table/components/TransactionIcon/TransactionIcon.tsx index e7ce00e0..479262fc 100644 --- a/src/components/controlled/transactions-table/components/TransactionIcon/TransactionIcon.tsx +++ b/src/components/controlled/transactions-table/components/TransactionIcon/TransactionIcon.tsx @@ -11,24 +11,23 @@ const styles = { } satisfies Record; interface TransactionIconPropsType { - iconInfo: TransactionIconInfoType; - class?: string; + iconInfo: TransactionIconInfoType; + class?: string; } export function TransactionIcon({ iconInfo, class: className }: TransactionIconPropsType) { - if (!iconInfo) { - return null; - } - - return ( - - ); + if (!iconInfo) { + return null; + } + return ( + + ); } diff --git a/src/components/controlled/transactions-table/components/TransactionIcon/getValidIcon.ts b/src/components/controlled/transactions-table/components/TransactionIcon/getValidIcon.ts index d775e6ca..c2bd3f93 100644 --- a/src/components/controlled/transactions-table/components/TransactionIcon/getValidIcon.ts +++ b/src/components/controlled/transactions-table/components/TransactionIcon/getValidIcon.ts @@ -1,15 +1,17 @@ -import { IconNamesEnum } from "common/Icon/icon.types"; +import { IconNamesEnum } from 'common/Icon/icon.types'; -const iconMap: Record = Object.values(IconNamesEnum).reduce((acc, icon) => { +const iconMap: Record = Object.values(IconNamesEnum).reduce( + (acc, icon) => { acc[icon] = true; return acc; -}, {} as Record); + }, + {} as Record, +); function isValidIcon(value: string): value is IconNamesEnum { - return value in iconMap; + return value in iconMap; } export function getValidIcon(icon: string): IconNamesEnum { - return isValidIcon(icon) ? icon : null; + return isValidIcon(icon) ? icon : null; } - diff --git a/src/components/controlled/transactions-table/components/TransactionIcon/index.ts b/src/components/controlled/transactions-table/components/TransactionIcon/index.ts index c6aafb2c..5ff26236 100644 --- a/src/components/controlled/transactions-table/components/TransactionIcon/index.ts +++ b/src/components/controlled/transactions-table/components/TransactionIcon/index.ts @@ -1 +1 @@ -export * from './TransactionIcon' \ No newline at end of file +export * from './TransactionIcon'; diff --git a/src/components/controlled/transactions-table/components/TransactionMethod/TransactionMethod.tsx b/src/components/controlled/transactions-table/components/TransactionMethod/TransactionMethod.tsx index 35caf702..e3a8ef14 100644 --- a/src/components/controlled/transactions-table/components/TransactionMethod/TransactionMethod.tsx +++ b/src/components/controlled/transactions-table/components/TransactionMethod/TransactionMethod.tsx @@ -10,23 +10,23 @@ const styles = { } satisfies Record; interface TransactionMethodPropsType { - class?: string; - actionDescription: string; - method: string; + class?: string; + actionDescription: string; + method: string; } export function TransactionMethod({ method, actionDescription, class: className }: TransactionMethodPropsType) { - return ( - -
{method}
- - ); + return ( + +
{method}
+ + ); } diff --git a/src/components/controlled/transactions-table/components/TransactionMethod/index.ts b/src/components/controlled/transactions-table/components/TransactionMethod/index.ts index 2f5606bb..9aa7987d 100644 --- a/src/components/controlled/transactions-table/components/TransactionMethod/index.ts +++ b/src/components/controlled/transactions-table/components/TransactionMethod/index.ts @@ -1 +1 @@ -export * from './TransactionMethod' \ No newline at end of file +export * from './TransactionMethod'; diff --git a/src/components/controlled/transactions-table/components/TransactionMethod/tests/transaction-method.spec.tsx b/src/components/controlled/transactions-table/components/TransactionMethod/tests/transaction-method.spec.tsx index 09ec188c..7833302e 100644 --- a/src/components/controlled/transactions-table/components/TransactionMethod/tests/transaction-method.spec.tsx +++ b/src/components/controlled/transactions-table/components/TransactionMethod/tests/transaction-method.spec.tsx @@ -3,13 +3,11 @@ import { newSpecPage } from '@stencil/core/testing'; import { TransactionMethod } from '../TransactionMethod'; - - describe('TransactionMethod tests', () => { const createPage = async (props: { method?: string; actionDescription?: string }) => { const page = await newSpecPage({ components: [], - template: () => + template: () => , }); return page; @@ -19,7 +17,7 @@ describe('TransactionMethod tests', () => { it('renders with default props', async () => { const page = await newSpecPage({ components: [], - template: () => + template: () => , }); expect(page.root).toBeTruthy(); @@ -28,7 +26,7 @@ describe('TransactionMethod tests', () => { it('has correct data-testid', async () => { const page = await newSpecPage({ components: [], - template: () => + template: () => , }); expect(page.root).toEqualHtml(` @@ -92,7 +90,7 @@ describe('TransactionMethod tests', () => { it('applies correct CSS classes to outer span', async () => { const page = await newSpecPage({ components: [], - template: () => + template: () => , }); expect(page.root).toEqualHtml(` @@ -105,7 +103,7 @@ describe('TransactionMethod tests', () => { it('applies correct CSS classes to inner div', async () => { const page = await newSpecPage({ components: [], - template: () => + template: () => , }); expect(page.root).toEqualHtml(` diff --git a/src/components/controlled/transactions-table/components/TransactionShards/index.ts b/src/components/controlled/transactions-table/components/TransactionShards/index.ts index 18ca9b68..e7267610 100644 --- a/src/components/controlled/transactions-table/components/TransactionShards/index.ts +++ b/src/components/controlled/transactions-table/components/TransactionShards/index.ts @@ -1 +1 @@ -export * from './TransactionShards' \ No newline at end of file +export * from './TransactionShards'; diff --git a/src/components/controlled/transactions-table/components/TransactionValue/index.ts b/src/components/controlled/transactions-table/components/TransactionValue/index.ts index 31fba0ce..754a8c5c 100644 --- a/src/components/controlled/transactions-table/components/TransactionValue/index.ts +++ b/src/components/controlled/transactions-table/components/TransactionValue/index.ts @@ -1 +1 @@ -export * from './TransactionValue'; \ No newline at end of file +export * from './TransactionValue'; diff --git a/src/components/controlled/transactions-table/components/index.ts b/src/components/controlled/transactions-table/components/index.ts index 1497dfab..1bfe3e1c 100644 --- a/src/components/controlled/transactions-table/components/index.ts +++ b/src/components/controlled/transactions-table/components/index.ts @@ -4,4 +4,4 @@ export * from './TransactionHash'; export * from './TransactionIcon'; export * from './TransactionMethod'; export * from './TransactionShards'; -export * from './TransactionValue'; \ No newline at end of file +export * from './TransactionValue'; diff --git a/src/components/controlled/transactions-table/transactions-table.scss b/src/components/controlled/transactions-table/transactions-table.scss index ff1190ee..21b0cbc1 100644 --- a/src/components/controlled/transactions-table/transactions-table.scss +++ b/src/components/controlled/transactions-table/transactions-table.scss @@ -1 +1 @@ -// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. \ No newline at end of file +// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. diff --git a/src/components/controlled/transactions-table/transactions-table.styles.ts b/src/components/controlled/transactions-table/transactions-table.styles.ts index 533ed366..77ed50c3 100644 --- a/src/components/controlled/transactions-table/transactions-table.styles.ts +++ b/src/components/controlled/transactions-table/transactions-table.styles.ts @@ -7,4 +7,4 @@ export default { transactionsTableBodyRow: 'transactions-table-body-row mvx:text-label mvx:border-b mvx:border-outline-variant', transactionsTableBodyCell: 'transactions-table-body-cell mvx:p-4 mvx:w-max', transactionsTableBodyCellChild: 'transactions-table-body-cell-child mvx:flex mvx:w-max' -} satisfies Record; \ No newline at end of file +} satisfies Record; diff --git a/src/components/controlled/transactions-table/transactions-table.tsx b/src/components/controlled/transactions-table/transactions-table.tsx index edec1e4b..cf87e63b 100644 --- a/src/components/controlled/transactions-table/transactions-table.tsx +++ b/src/components/controlled/transactions-table/transactions-table.tsx @@ -1,8 +1,15 @@ import { Component, h, Prop } from '@stencil/core'; import { DataTestIdsEnum } from '../../../constants/dataTestIds.enum'; -import { TransactionAccount, TransactionAge, TransactionHash, TransactionMethod, TransactionShards, TransactionValue } from './components'; -import styles from './transactions-table.styles' +import { + TransactionAccount, + TransactionAge, + TransactionHash, + TransactionMethod, + TransactionShards, + TransactionValue, +} from './components'; +import styles from './transactions-table.styles'; import type { TransactionRowType } from './transactions-table.type'; const COLUMNS = ['Txn Hash', 'Age', 'Shard', 'From', 'To', 'Method', 'Value']; diff --git a/src/components/controlled/transactions-table/transactions-table.type.ts b/src/components/controlled/transactions-table/transactions-table.type.ts index 756b5531..67ef83d2 100644 --- a/src/components/controlled/transactions-table/transactions-table.type.ts +++ b/src/components/controlled/transactions-table/transactions-table.type.ts @@ -1,4 +1,4 @@ -import type { IconNamesEnum } from "common/Icon/icon.types"; +import type { IconNamesEnum } from 'common/Icon/icon.types'; export type TransactionRowType = { age: TransactionAgeType; diff --git a/src/components/functional/notifications-feed/notifications-feed.tsx b/src/components/functional/notifications-feed/notifications-feed.tsx index f07348e5..a72a6453 100644 --- a/src/components/functional/notifications-feed/notifications-feed.tsx +++ b/src/components/functional/notifications-feed/notifications-feed.tsx @@ -106,7 +106,9 @@ export class NotificationsFeed { {hasPending && (
Processing...
- {this.pendingTransactions?.map(toast => )} + {this.pendingTransactions?.map(toast => ( + + ))}
)} diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx index fe2b9eeb..34a7ad41 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/SignTransactionsAdvanced.tsx @@ -28,7 +28,10 @@ export function SignTransactionsAdvanced(props: SignTransactionsAdvancedPropsTyp {gasPrice} {egldLabel}
-
+
{gasPriceOptions?.map(({ label, value }) => { const isActive = gasPriceOption?.toString() === value.toString(); @@ -36,26 +39,39 @@ export function SignTransactionsAdvanced(props: SignTransactionsAdvancedPropsTyp ); })}
-
+
Gas Limit {gasLimit}
- +
); } - diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx index 08ac8b92..c9a93904 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx @@ -7,7 +7,7 @@ import { DataTestIdsEnum } from 'constants/dataTestIds.enum'; import { SignTransactionsAdvancedDataDecode } from './components/SignTransactionsAdvancedDataDecode/SignTransactionsAdvancedDataDecode'; import { getProcessedHighlightedData } from './helpers/getProcessedHighlightedData'; -import styles from './signTransactionsAdvancedData.styles' +import styles from './signTransactionsAdvancedData.styles'; export interface IDataHightlight { beforeHighlight?: string; @@ -22,7 +22,12 @@ interface SignTransactionsAdvancedDataPropsType { onDecodeTooltipVisibilityChange?: (isVisible: boolean) => void; } -export function SignTransactionsAdvancedData({ decodeMethod = DecodeMethodEnum.raw, onDecodeMethodChange, decodeTooltipVisible, onDecodeTooltipVisibilityChange }: SignTransactionsAdvancedDataPropsType) { +export function SignTransactionsAdvancedData({ + decodeMethod = DecodeMethodEnum.raw, + onDecodeMethodChange, + decodeTooltipVisible, + onDecodeTooltipVisibilityChange, +}: SignTransactionsAdvancedDataPropsType) { const { data, highlight } = state.commonData; let highlightElement: HTMLElement; @@ -40,19 +45,18 @@ export function SignTransactionsAdvancedData({ decodeMethod = DecodeMethodEnum.r } const { displayValue = '', highlight: decodedHighlight = '' } = state.commonData.decodedData - ? state.commonData.decodedData[decodeMethod] ?? {} + ? (state.commonData.decodedData[decodeMethod] ?? {}) : {}; return !decodedHighlight || !displayValue.includes(decodedHighlight) ? { highlight: displayValue } : getProcessedHighlightedData({ data: displayValue, highlightedData: decodedHighlight }); - } + }; const computedDisplayData = getComputedDisplayData(); const { beforeHighlight, afterHighlight, highlight: highlightText } = computedDisplayData; if ((beforeHighlight || afterHighlight) && highlightElement) { - const timeoutId = setTimeout(() => { highlightElement?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' }); }); @@ -73,10 +77,7 @@ export function SignTransactionsAdvancedData({ decodeMethod = DecodeMethodEnum.r }} isTooltipVisible={decodeTooltipVisible} trigger={ - + } >
(highlightElement = el)} > @@ -140,7 +144,6 @@ export function SignTransactionsAdvancedData({ decodeMethod = DecodeMethodEnum.r )}
-
+
); } - diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/components/SignTransactionsAdvancedDataDecode/SignTransactionsAdvancedDataDecode.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/components/SignTransactionsAdvancedDataDecode/SignTransactionsAdvancedDataDecode.tsx index 38447659..83a5c98f 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/components/SignTransactionsAdvancedDataDecode/SignTransactionsAdvancedDataDecode.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/components/SignTransactionsAdvancedDataDecode/SignTransactionsAdvancedDataDecode.tsx @@ -18,7 +18,10 @@ interface SignTransactionsAdvancedDataDecodePropsType { currentDecodeMethod: DecodeMethodEnum; } -export function SignTransactionsAdvancedDataDecode({ isToggled = false, currentDecodeMethod = DecodeMethodEnum.decimal }: SignTransactionsAdvancedDataDecodePropsType) { +export function SignTransactionsAdvancedDataDecode({ + isToggled = false, + currentDecodeMethod = DecodeMethodEnum.decimal, +}: SignTransactionsAdvancedDataDecodePropsType) { return (
); } - diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/signTransactionsAdvancedData.styles.ts b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/signTransactionsAdvancedData.styles.ts index 730b5d1a..9b84014e 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/signTransactionsAdvancedData.styles.ts +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/signTransactionsAdvancedData.styles.ts @@ -12,4 +12,4 @@ export default { signTransactionsAdvancedDataText: 'sign-transactions-advanced-data-text mvx:text-secondary-text', signTransactionsAdvancedDataHighlight: 'sign-transactions-advanced-data-highlight mvx:text-primary', signTransactionsAdvancedDataHighlightBolded: 'sign-transactions-advanced-data-highlight-bolded mvx:font-medium' -} satisfies Record; \ No newline at end of file +} satisfies Record; diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/signTransactionsAdvanced.styles.ts b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/signTransactionsAdvanced.styles.ts index 248ce792..327370c7 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/signTransactionsAdvanced.styles.ts +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/signTransactionsAdvanced.styles.ts @@ -15,4 +15,4 @@ export default { signTransactionsGasLimitRow: 'sign-transactions-gas-limit-row mvx:flex mvx:items-center mvx:justify-between mvx:w-full', signTransactionsGasLimit: 'sign-transactions-gas-limit mvx:text-secondary-text mvx:text-sm mvx:font-normal mvx:leading-5 mvx:relative mvx:z-1', signTransactionsGasLimitValue: 'sign-transactions-gas-limit-value mvx:text-secondary-text mvx:text-sm mvx:font-medium mvx:leading-5 mvx:relative mvx:z-1' -} satisfies Record; \ No newline at end of file +} satisfies Record; diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx index cb1762d4..a6d4757b 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx @@ -21,7 +21,12 @@ interface SignTransactionsFooterPropsType { handleCopyButtonClick?: (event: MouseEvent, text?: string) => void; } -export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChange, isSuccessOnCopy, handleCopyButtonClick }: SignTransactionsFooterPropsType) { +export function SignTransactionsFooter({ + tooltipVisible, + onTooltipVisibilityChange, + isSuccessOnCopy, + handleCopyButtonClick, +}: SignTransactionsFooterPropsType) { const currentCommonData = { ...state.commonData }; const hasChanged = JSON.stringify(currentCommonData) !== JSON.stringify(lastCommonData); @@ -53,7 +58,12 @@ export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChan
-
+
@@ -151,7 +161,12 @@ export function SignTransactionsFooter({ tooltipVisible, onTooltipVisibilityChan /> )} - handleCopyButtonClick?.(event, username ?? address)} /> + handleCopyButtonClick?.(event, username ?? address)} + />
diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/signTransactionsFooter.styles.ts b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/signTransactionsFooter.styles.ts index 6451208a..6cd45db2 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/signTransactionsFooter.styles.ts +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/signTransactionsFooter.styles.ts @@ -1,21 +1,22 @@ +// prettier-ignore export default { - signTransactionsFooterContainer: 'sign-transactions-footer-container mvx:flex mvx:flex-col mvx:flex-1 mvx:h-full', - signTransactionsFooter: 'sign-transactions-footer mvx:mt-auto mvx:flex mvx:flex-col mvx:items-center mvx:pt-5 mvx:gap-5 mvx:text-center', - signTransactionsFooterButtons: 'sign-transactions-footer-buttons mvx:flex mvx:items-center mvx:w-full mvx:gap-3', - signTransactionsFooterButtonWrapper: 'sign-transactions-footer-button-wrapper mvx:relative mvx:flex mvx:flex-col mvx:flex-1', - signTransactionsFooterButtonWrapperCancel: 'sign-transactions-footer-button-wrapper-cancel mvx:w-32 mvx:max-w-32', - signTransactionsFooterButtonTooltipWrapper: 'sign-transactions-footer-button-tooltip-wrapper mvx:absolute mvx:inset-0', - signTransactionsFooterButton: 'sign-transactions-footer-button mvx:flex', - signTransactionsFooterButtonIcon: 'sign-transactions-footer-button-icon mvx:flex mvx:transition-all mvx:duration-200 mvx:ease-in-out', - signTransactionsFooterButtonIconLighter: 'sign-transactions-footer-button-icon-lighter mvx:fill-secondary-text', - signTransactionsFooterIdentity: 'sign-transactions-footer-identity mvx:max-w-64 mvx:flex mvx:items-center mvx:text-base mvx:gap-2 mvx:overflow-hidden', - signTransactionsFooterIdentityLabel: 'sign-transactions-footer-identity-label mvx:whitespace-nowrap mvx:text-secondary-text', - signTransactionsFooterIdentityAddress: 'sign-transactions-footer-identity-address mvx:text-primary', - signTransactionsTrimWrapper: 'sign-transactions-trim-wrapper mvx:items-end mvx:leading-none', - signTransactionsFooterIdentityUsername: 'sign-transactions-footer-identity-username mvx:flex mvx:items-center mvx:text-base mvx:text-primary', - signTransactionsFooterIdentityUsernamePrefix: 'sign-transactions-footer-identity-username-prefix mvx:text-accent', - signTransactionsFooterIdentityCopy: 'sign-transactions-footer-identity-copy mvx:text-primary', - signTransactionsButtonTooltip: 'sign-transactions-button-tooltip mvx:absolute mvx:top-0 mvx:h-12 mvx:left-0 mvx:right-0', - signTransactionsActionButton: 'sign-transactions-action-button mvx:text-base! mvx:w-full', - signTransactionsExplorerLinkIcon: 'sign-transactions-explorer-link-icon mvx:text-primary', -} satisfies Record; \ No newline at end of file + signTransactionsFooterContainer: 'sign-transactions-footer-container mvx:flex mvx:flex-col mvx:flex-1 mvx:h-full', + signTransactionsFooter: 'sign-transactions-footer mvx:mt-auto mvx:flex mvx:flex-col mvx:items-center mvx:pt-5 mvx:gap-5 mvx:text-center', + signTransactionsFooterButtons: 'sign-transactions-footer-buttons mvx:flex mvx:items-center mvx:w-full mvx:gap-3', + signTransactionsFooterButtonWrapper: 'sign-transactions-footer-button-wrapper mvx:relative mvx:flex mvx:flex-col mvx:flex-1', + signTransactionsFooterButtonWrapperCancel: 'sign-transactions-footer-button-wrapper-cancel mvx:w-32 mvx:max-w-32', + signTransactionsFooterButtonTooltipWrapper: 'sign-transactions-footer-button-tooltip-wrapper mvx:absolute mvx:inset-0', + signTransactionsFooterButton: 'sign-transactions-footer-button mvx:flex', + signTransactionsFooterButtonIcon: 'sign-transactions-footer-button-icon mvx:flex mvx:transition-all mvx:duration-200 mvx:ease-in-out', + signTransactionsFooterButtonIconLighter: 'sign-transactions-footer-button-icon-lighter mvx:fill-secondary-text', + signTransactionsFooterIdentity: 'sign-transactions-footer-identity mvx:max-w-64 mvx:flex mvx:items-center mvx:text-base mvx:gap-2 mvx:overflow-hidden', + signTransactionsFooterIdentityLabel: 'sign-transactions-footer-identity-label mvx:whitespace-nowrap mvx:text-secondary-text', + signTransactionsFooterIdentityAddress: 'sign-transactions-footer-identity-address mvx:text-primary', + signTransactionsTrimWrapper: 'sign-transactions-trim-wrapper mvx:items-end mvx:leading-none', + signTransactionsFooterIdentityUsername: 'sign-transactions-footer-identity-username mvx:flex mvx:items-center mvx:text-base mvx:text-primary', + signTransactionsFooterIdentityUsernamePrefix: 'sign-transactions-footer-identity-username-prefix mvx:text-accent', + signTransactionsFooterIdentityCopy: 'sign-transactions-footer-identity-copy mvx:text-primary', + signTransactionsButtonTooltip: 'sign-transactions-button-tooltip mvx:absolute mvx:top-0 mvx:h-12 mvx:left-0 mvx:right-0', + signTransactionsActionButton: 'sign-transactions-action-button mvx:text-base! mvx:w-full', + signTransactionsExplorerLinkIcon: 'sign-transactions-explorer-link-icon mvx:text-primary', +} satisfies Record; diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx index ccbd8355..7b682259 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx @@ -15,7 +15,14 @@ interface SignTransactionsHeaderPropsType { const NUMBER_OF_TRANSACTIONS = 10; -export function SignTransactionsHeader({ onBack, onNext, currentIndex, transactionsCount, origin, showFavicon }: SignTransactionsHeaderPropsType) { +export function SignTransactionsHeader({ + onBack, + onNext, + currentIndex, + transactionsCount, + origin, + showFavicon, +}: SignTransactionsHeaderPropsType) { return (
{transactionsCount > 1 && ( @@ -102,4 +109,3 @@ export function SignTransactionsHeader({ onBack, onNext, currentIndex, transacti
); } - diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx b/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx index 6d71b50b..950f4eb4 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/SignTransactionsOverview.tsx @@ -19,7 +19,17 @@ interface SignTransactionsOverviewPropsType { isApp: boolean; } -export function SignTransactionsOverview({ identifier, usdValue, amount, tokenIconUrl, interactor, interactorIconUrl, action, networkFee = '~$0.00078', isApp = false }: SignTransactionsOverviewPropsType) { +export function SignTransactionsOverview({ + identifier, + usdValue, + amount, + tokenIconUrl, + interactor, + interactorIconUrl, + action, + networkFee = '~$0.00078', + isApp = false, +}: SignTransactionsOverviewPropsType) { const setAmountValueRef = (el?: HTMLElement) => { if (!el) { return; @@ -31,7 +41,10 @@ export function SignTransactionsOverview({ identifier, usdValue, amount, tokenIc return (
-
+
{isApp ? 'Amount' : 'Send'}
@@ -45,7 +58,10 @@ export function SignTransactionsOverview({ identifier, usdValue, amount, tokenIc
{identifier !== 'USD' && ( -
+
{usdValue}
)} @@ -62,7 +78,10 @@ export function SignTransactionsOverview({ identifier, usdValue, amount, tokenIc
@@ -70,7 +89,10 @@ export function SignTransactionsOverview({ identifier, usdValue, amount, tokenIc
-
+
{isApp ? 'App' : 'To'}
{interactorIconUrl && ( @@ -88,9 +110,15 @@ export function SignTransactionsOverview({ identifier, usdValue, amount, tokenIc
{isApp && ( -
+
Action
-
+
{action}
@@ -108,7 +136,6 @@ export function SignTransactionsOverview({ identifier, usdValue, amount, tokenIc
-
+
); } - diff --git a/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/signTransactionsOverview.styles.ts b/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/signTransactionsOverview.styles.ts index 65db8e5d..6a24a47b 100644 --- a/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/signTransactionsOverview.styles.ts +++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsOverview/signTransactionsOverview.styles.ts @@ -30,4 +30,4 @@ export default { signTransactionsFeeLabel: 'sign-transactions-fee-label mvx:text-secondary-text mvx:text-sm mvx:font-normal mvx:leading-5', signTransactionsInfoIcon: 'sign-transactions-info-icon mvx:w-3.5 mvx:h-3.5 mvx:relative mvx:before:content-["ⓘ"] mvx:before:text-sm mvx:before:text-secondary-text mvx:before:absolute mvx:before:-top-0.5 mvx:before:left-0', signTransactionsFeeValue: 'sign-transactions-fee-value mvx:text-primary mvx:text-sm mvx:font-normal mvx:leading-5' -} satisfies Record; \ No newline at end of file +} satisfies Record; diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss b/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss index 1075ba99..874140ed 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss @@ -1,36 +1,36 @@ .trim { - @apply mvx:flex mvx:relative mvx:max-w-full mvx:overflow-hidden mvx:whitespace-nowrap; + @apply mvx:flex mvx:relative mvx:max-w-full mvx:overflow-hidden mvx:whitespace-nowrap; } .trim-full { - @apply mvx:text-transparent mvx:absolute mvx:leading-5; + @apply mvx:text-transparent mvx:absolute mvx:leading-5; } .trim-full-visible { - @apply mvx:text-inherit mvx:relative mvx:leading-5; + @apply mvx:text-inherit mvx:relative mvx:leading-5; } .trim-wrapper { - @apply mvx:hidden; + @apply mvx:hidden; } .trim-wrapper-visible { - @apply mvx:overflow-hidden mvx:max-w-full mvx:flex; + @apply mvx:overflow-hidden mvx:max-w-full mvx:flex; } .trim-left-wrapper { - @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:text-left mvx:text-[1px]; + @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:text-left mvx:text-[1px]; } .trim-left { - @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5; + @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5; } .trim-right-wrapper { - @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:whitespace-nowrap mvx:text-right mvx:text-[1px]; - direction: rtl; + @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:whitespace-nowrap mvx:text-right mvx:text-[1px]; + direction: rtl; } .trim-right { - @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5 mvx:text-clip; -} \ No newline at end of file + @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5 mvx:text-clip; +} diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts b/src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts index e568781a..b4a8c6b9 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.styles.ts @@ -15,4 +15,4 @@ export default { buttonNeutral: 'button-neutral mvx:text-neutral-925 mvx:bg-white mvx:hover:opacity-75', buttonDisabled: 'button-disabled mvx:pointer-events-none mvx:bg-transparent mvx:cursor-default mvx:border mvx:border-secondary-text mvx:!text-secondary-text mvx:hover:opacity-100', tooltipContent: 'tooltip-content mvx:flex-row mvx:cursor-default mvx:p-2 mvx:whitespace-nowrap mvx:text-xs mvx:rounded-xl mvx:leading-none mvx:!bg-surface mvx:border-outline-variant mvx:border mvx:text-primary mvx:after:left-1/2 mvx:after:origin-center mvx:after:w-2 mvx:after:h-2 mvx:after:absolute mvx:after:border mvx:after:border-outline-variant mvx:after:!bg-surface mvx:after:translate-x-[calc(50%-8px)] mvx:after:-rotate-[45deg] mvx:after:content-[""]', -} satisfies Record; \ No newline at end of file +} satisfies Record; diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx index 84d515bc..1e9a1706 100644 --- a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx +++ b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx @@ -130,7 +130,7 @@ export class SignTransactionsPanel { }; private handleCopyButtonClick = getCopyClickAction({ - onSuccessChange: (isSuccess) => (this.isSuccessOnCopy = isSuccess), + onSuccessChange: isSuccess => (this.isSuccessOnCopy = isSuccess), }); private setDecodeMethod = (method: DecodeMethodEnum) => { @@ -168,7 +168,10 @@ export class SignTransactionsPanel {
{transactionTabs.map(transactionTab => (
this.setActiveTab(transactionTab)} > @@ -198,7 +201,7 @@ export class SignTransactionsPanel { handleCopyButtonClick={this.handleCopyButtonClick} />
- + ); } } diff --git a/src/components/functional/toasts-list/components/custom-toast/components/custom-create-toast/custom-toast.scss b/src/components/functional/toasts-list/components/custom-toast/components/custom-create-toast/custom-toast.scss index b6f9ac6f..5e1d02a6 100644 --- a/src/components/functional/toasts-list/components/custom-toast/components/custom-create-toast/custom-toast.scss +++ b/src/components/functional/toasts-list/components/custom-toast/components/custom-create-toast/custom-toast.scss @@ -7,7 +7,7 @@ .icon-close { @apply mvx:flex mvx:w-5 mvx:h-5 mvx:flex-col mvx:justify-center mvx:shrink-0 mvx:p-0 mvx:cursor-pointer mvx:absolute mvx:right-3 mvx:top-3 mvx:bg-none mvx:border-0; color: var(--mvx-text-color-primary); - + .svg-inline--fa { @apply mvx:text-center; color: var(--mvx-text-color-primary); diff --git a/src/components/functional/toasts-list/components/custom-toast/components/custom-create-toast/custom-toast.tsx b/src/components/functional/toasts-list/components/custom-toast/components/custom-create-toast/custom-toast.tsx index b7ebc259..c2fee986 100644 --- a/src/components/functional/toasts-list/components/custom-toast/components/custom-create-toast/custom-toast.tsx +++ b/src/components/functional/toasts-list/components/custom-toast/components/custom-create-toast/custom-toast.tsx @@ -20,12 +20,8 @@ export class CustomToast { return (
{this.toast.hasCloseButton !== false && ( - )}
this.initializeToast(container)}>
diff --git a/src/components/functional/toasts-list/components/custom-toast/components/simple-toast/simple-toast.scss b/src/components/functional/toasts-list/components/custom-toast/components/simple-toast/simple-toast.scss index 1bbc9f2d..346b5232 100644 --- a/src/components/functional/toasts-list/components/custom-toast/components/simple-toast/simple-toast.scss +++ b/src/components/functional/toasts-list/components/custom-toast/components/simple-toast/simple-toast.scss @@ -68,4 +68,4 @@ &.no-margin { @apply mvx:mt-0; } -} \ No newline at end of file +} diff --git a/src/components/functional/toasts-list/components/custom-toast/components/simple-toast/simple-toast.tsx b/src/components/functional/toasts-list/components/custom-toast/components/simple-toast/simple-toast.tsx index 7747512e..db66b9b2 100644 --- a/src/components/functional/toasts-list/components/custom-toast/components/simple-toast/simple-toast.tsx +++ b/src/components/functional/toasts-list/components/custom-toast/components/simple-toast/simple-toast.tsx @@ -47,12 +47,8 @@ export class SimpleToast { )} {this.toast.hasCloseButton !== false && ( - )}
diff --git a/src/components/functional/toasts-list/components/custom-toast/generic-toast.tsx b/src/components/functional/toasts-list/components/custom-toast/generic-toast.tsx index cbbe3727..b649d9f5 100644 --- a/src/components/functional/toasts-list/components/custom-toast/generic-toast.tsx +++ b/src/components/functional/toasts-list/components/custom-toast/generic-toast.tsx @@ -1,6 +1,10 @@ import type { EventEmitter } from '@stencil/core'; import { Component, Event, h, Prop } from '@stencil/core'; -import type { CustomToastType, IComponentToast, ISimpleToast } from 'components/functional/toasts-list/components/transaction-toast/transaction-toast.type'; +import type { + CustomToastType, + IComponentToast, + ISimpleToast, +} from 'components/functional/toasts-list/components/transaction-toast/transaction-toast.type'; @Component({ tag: 'mvx-generic-toast', @@ -12,9 +16,19 @@ export class GenericToast { render() { const isComponentToast = 'instantiateToastElement' in this.toast; if (isComponentToast) { - return this.deleteToast.emit(this.toast.toastId)} />; + return ( + this.deleteToast.emit(this.toast.toastId)} + /> + ); } - return this.deleteToast.emit(this.toast.toastId)} />; + return ( + this.deleteToast.emit(this.toast.toastId)} + /> + ); } } diff --git a/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-content/transaction-toast-content.scss b/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-content/transaction-toast-content.scss index 039ea593..b7b68cd1 100644 --- a/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-content/transaction-toast-content.scss +++ b/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-content/transaction-toast-content.scss @@ -124,4 +124,4 @@ @apply mvx:text-center mvx:h-4 mvx:w-4; color: var(--mvx-text-color-primary); } -} \ No newline at end of file +} diff --git a/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-details/tests/transaction-toast-details.e2e.ts b/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-details/tests/transaction-toast-details.e2e.ts index 1a2fdc07..21323e08 100644 --- a/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-details/tests/transaction-toast-details.e2e.ts +++ b/src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-details/tests/transaction-toast-details.e2e.ts @@ -2,7 +2,11 @@ import { newE2EPage } from '@stencil/core/testing'; import type { ITransactionListItem } from 'components/visual/transaction-list-item/transaction-list-item.types'; import { TransactionStatusEnum } from 'constants/transactionStatus.enum'; -const createMockTransaction = (params: { hash: string; status?: `${TransactionStatusEnum}`; timestamp?: number }): ITransactionListItem => ({ +const createMockTransaction = (params: { + hash: string; + status?: `${TransactionStatusEnum}`; + timestamp?: number; +}): ITransactionListItem => ({ hash: params.hash, status: params.status || TransactionStatusEnum.success, link: `https://explorer.com/${params.hash}`, diff --git a/src/components/functional/toasts-list/components/transaction-toast/transaction-toast.scss b/src/components/functional/toasts-list/components/transaction-toast/transaction-toast.scss index 3806c14a..49d30d83 100644 --- a/src/components/functional/toasts-list/components/transaction-toast/transaction-toast.scss +++ b/src/components/functional/toasts-list/components/transaction-toast/transaction-toast.scss @@ -1,3 +1,3 @@ .transaction-toast { - @apply mvx:relative; -} \ No newline at end of file + @apply mvx:relative; +} diff --git a/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx b/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx index 1f636617..2e59439f 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx +++ b/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx @@ -2,7 +2,7 @@ import { h } from '@stencil/core'; import { Icon } from 'common/Icon'; import unlockPanelWalletImg from '../../../../../assets/unlock-panel-wallet.webp'; -import styles from './unlockPanelFooter.styles' +import styles from './unlockPanelFooter.styles'; export function UnlockPanelFooter({ walletAddress }: { walletAddress: string }) { const handleWalletClick = (event: MouseEvent) => { @@ -39,7 +39,6 @@ export function UnlockPanelFooter({ walletAddress }: { walletAddress: string })
-
+
); - } diff --git a/src/components/functional/unlock-panel/components/UnlockPanelFooter/index.ts b/src/components/functional/unlock-panel/components/UnlockPanelFooter/index.ts index 51d58d9a..e942d223 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelFooter/index.ts +++ b/src/components/functional/unlock-panel/components/UnlockPanelFooter/index.ts @@ -1 +1 @@ -export * from './UnlockPanelFooter'; \ No newline at end of file +export * from './UnlockPanelFooter'; diff --git a/src/components/functional/unlock-panel/components/UnlockPanelFooter/unlockPanelFooter.styles.ts b/src/components/functional/unlock-panel/components/UnlockPanelFooter/unlockPanelFooter.styles.ts index 9fe36958..2f41319b 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelFooter/unlockPanelFooter.styles.ts +++ b/src/components/functional/unlock-panel/components/UnlockPanelFooter/unlockPanelFooter.styles.ts @@ -9,4 +9,4 @@ export default { unlockPanelFooterSubtitleDesktop: 'unlock-panel-footer-subtitle-desktop mvx:hidden mvx:xs:flex', unlockPanelFooterSubtitleMobile: 'unlock-panel-footer-subtitle-mobile mvx:text-xs mvx:xs:hidden', unlockPanelFooterSubtitleLink: 'unlock-panel-footer-subtitle-link mvx:text-accent' -} satisfies Record; \ No newline at end of file +} satisfies Record; diff --git a/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx b/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx index 062603a0..bf9c73cc 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx +++ b/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx @@ -27,9 +27,7 @@ export function UnlockPanelGroup({ providers = [], class: className, onLogin, gr return (
-
- {groupLabel} -
+
{groupLabel}
{providers.map((provider, providerIndex) => ( diff --git a/src/components/functional/unlock-panel/components/UnlockPanelGroup/index.ts b/src/components/functional/unlock-panel/components/UnlockPanelGroup/index.ts index 385d1c8f..f2f580e0 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelGroup/index.ts +++ b/src/components/functional/unlock-panel/components/UnlockPanelGroup/index.ts @@ -1 +1 @@ -export * from './UnlockPanelGroup'; \ No newline at end of file +export * from './UnlockPanelGroup'; diff --git a/src/components/functional/unlock-panel/components/UnlockPanelGroup/unlockPanelGroup.styles.ts b/src/components/functional/unlock-panel/components/UnlockPanelGroup/unlockPanelGroup.styles.ts index 8b4a8c3e..04b3b499 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelGroup/unlockPanelGroup.styles.ts +++ b/src/components/functional/unlock-panel/components/UnlockPanelGroup/unlockPanelGroup.styles.ts @@ -6,4 +6,4 @@ export default { unlockPanelGroupProviders: 'unlock-panel-group-providers mvx:flex mvx:flex-col mvx:gap-0.5 mvx:rounded-tl-lg mvx:rounded-tr-lg mvx:overflow-auto mvx:pb-6 mvx:mt-3 mvx:scrollbar-hide', detectedPanelGroup: 'mvx:hidden mvx:sm:flex', lastProviderButton: 'mvx:rounded-bl-lg mvx:rounded-br-lg mvx:overflow-hidden', -} satisfies Record; \ No newline at end of file +} satisfies Record; diff --git a/src/components/functional/unlock-panel/components/UnlockProviderButton/UnlockProviderButton.tsx b/src/components/functional/unlock-panel/components/UnlockProviderButton/UnlockProviderButton.tsx index 37b0502c..f689804b 100644 --- a/src/components/functional/unlock-panel/components/UnlockProviderButton/UnlockProviderButton.tsx +++ b/src/components/functional/unlock-panel/components/UnlockProviderButton/UnlockProviderButton.tsx @@ -21,9 +21,7 @@ export function UnlockProviderButton({ provider, class: className, onClick }: Un return null; } - const icon: HTMLElement | null = !provider.iconUrl - ? getProviderButtonIcon({ providerType: provider.type }) - : null; + const icon: HTMLElement | null = !provider.iconUrl ? getProviderButtonIcon({ providerType: provider.type }) : null; return (
diff --git a/src/components/functional/unlock-panel/components/UnlockProviderButton/index.ts b/src/components/functional/unlock-panel/components/UnlockProviderButton/index.ts index 54c0f59c..85e24343 100644 --- a/src/components/functional/unlock-panel/components/UnlockProviderButton/index.ts +++ b/src/components/functional/unlock-panel/components/UnlockProviderButton/index.ts @@ -1 +1 @@ -export * from './UnlockProviderButton'; \ No newline at end of file +export * from './UnlockProviderButton'; diff --git a/src/components/functional/unlock-panel/components/index.ts b/src/components/functional/unlock-panel/components/index.ts index 92aa6a2e..3359e5a0 100644 --- a/src/components/functional/unlock-panel/components/index.ts +++ b/src/components/functional/unlock-panel/components/index.ts @@ -1,3 +1,3 @@ export * from './UnlockPanelFooter'; export * from './UnlockPanelGroup'; -export * from './UnlockProviderButton'; \ No newline at end of file +export * from './UnlockProviderButton'; diff --git a/src/components/functional/unlock-panel/unlock-panel.scss b/src/components/functional/unlock-panel/unlock-panel.scss index ff1190ee..21b0cbc1 100644 --- a/src/components/functional/unlock-panel/unlock-panel.scss +++ b/src/components/functional/unlock-panel/unlock-panel.scss @@ -1 +1 @@ -// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. \ No newline at end of file +// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. diff --git a/src/components/functional/unlock-panel/unlock-panel.styles.ts b/src/components/functional/unlock-panel/unlock-panel.styles.ts index 401b0782..3bf93c0e 100644 --- a/src/components/functional/unlock-panel/unlock-panel.styles.ts +++ b/src/components/functional/unlock-panel/unlock-panel.styles.ts @@ -9,4 +9,4 @@ export default { detectedPanelGroup: 'mvx:hidden mvx:sm:flex mvx:sm:flex-col', desktopPanelGroupTitle: 'mvx:hidden mvx:sm:flex', mobilePanelGroupTitle: 'mvx:sm:hidden', -} satisfies Record; \ No newline at end of file +} satisfies Record; diff --git a/src/components/functional/unlock-panel/unlock-panel.tsx b/src/components/functional/unlock-panel/unlock-panel.tsx index f17bdf73..2e9ab875 100644 --- a/src/components/functional/unlock-panel/unlock-panel.tsx +++ b/src/components/functional/unlock-panel/unlock-panel.tsx @@ -188,17 +188,15 @@ export class UnlockPanel { {hasDetectedProviders && ( this.handleLogin(provider)} + onLogin={provider => this.handleLogin(provider)} class={styles.detectedPanelGroup} - groupLabel={ -
Detected
- } + groupLabel={
Detected
} /> )} this.handleLogin(provider)} + onLogin={provider => this.handleLogin(provider)} groupLabel={
Options
diff --git a/src/components/functional/wallet-connect/components/wallet-connect-download/wallet-connect-download.scss b/src/components/functional/wallet-connect/components/wallet-connect-download/wallet-connect-download.scss index 1d6519f0..9187f3e6 100644 --- a/src/components/functional/wallet-connect/components/wallet-connect-download/wallet-connect-download.scss +++ b/src/components/functional/wallet-connect/components/wallet-connect-download/wallet-connect-download.scss @@ -21,7 +21,7 @@ .wallet-connect-download-options { @apply mvx:h-60 mvx:flex mvx:flex-col mvx:gap-4 mvx:items-center mvx:justify-end mvx:my-auto mvx:mx-0; - .wallet-connect-download-option svg{ + .wallet-connect-download-option svg { @apply mvx:cursor-pointer mvx:transition-all mvx:ease-in-out mvx:duration-200 mvx:rounded-lg mvx:p-3; } } diff --git a/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts b/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts index 3672ccab..f59c8fb4 100644 --- a/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts +++ b/src/components/visual/data-with-explorer-link/tests/data-with-explorer-link.spec.ts @@ -252,4 +252,4 @@ describe('DataWithExplorerLink', () => { expect(component.class).toBe('custom'); expect(component.dataTestId).toBe('test'); }); -}); \ No newline at end of file +}); diff --git a/src/components/visual/pagination/helpers/getPagination/getPagination.ts b/src/components/visual/pagination/helpers/getPagination/getPagination.ts index d63a6338..deda8b25 100644 --- a/src/components/visual/pagination/helpers/getPagination/getPagination.ts +++ b/src/components/visual/pagination/helpers/getPagination/getPagination.ts @@ -2,7 +2,11 @@ import { ELLIPSIS } from 'constants/htmlStrings'; import inRange from 'lodash.inrange'; import range from 'lodash.range'; -import { MAX_PAGINATION_BATCH_LENGTH, MAX_PAGINATION_SLOTS, MIN_PAGINATION_BATCH_LENGTH } from './getPagination.constants'; +import { + MAX_PAGINATION_BATCH_LENGTH, + MAX_PAGINATION_SLOTS, + MIN_PAGINATION_BATCH_LENGTH, +} from './getPagination.constants'; interface GetPaginationType { currentPage: number; @@ -10,7 +14,8 @@ interface GetPaginationType { } export const getPagination = ({ currentPage, totalPages }: GetPaginationType): string[] => { - const trimBatch = (batch: number[], comparableBatch: number[]) => (batch.includes(currentPage) ? batch : batch.slice(0, MAX_PAGINATION_SLOTS - comparableBatch.length - 1)); + const trimBatch = (batch: number[], comparableBatch: number[]) => + batch.includes(currentPage) ? batch : batch.slice(0, MAX_PAGINATION_SLOTS - comparableBatch.length - 1); const previousPage = currentPage - 1; const nextPage = currentPage + 1; @@ -22,7 +27,9 @@ export const getPagination = ({ currentPage, totalPages }: GetPaginationType): s const isLeftBatchInRange = inRange(nextPage - 1, MIN_PAGINATION_BATCH_LENGTH, MAX_PAGINATION_BATCH_LENGTH); const isRightBatchInRange = inRange(previousPage + 1, totalPages - MIN_PAGINATION_BATCH_LENGTH, totalPages - 1); const leftBatch = isLeftBatchInRange ? range(1, nextPage + 1) : range(1, MAX_PAGINATION_BATCH_LENGTH - 1); - const rightBatch = isRightBatchInRange ? range(previousPage, totalPages + 1) : range(totalPages - MIN_PAGINATION_BATCH_LENGTH + 1, totalPages + 1); + const rightBatch = isRightBatchInRange + ? range(previousPage, totalPages + 1) + : range(totalPages - MIN_PAGINATION_BATCH_LENGTH + 1, totalPages + 1); const trimmedLeftBatch = trimBatch(leftBatch, rightBatch); const trimmedRightBatch = trimBatch(rightBatch.reverse(), leftBatch); diff --git a/src/components/visual/transaction-list-item/transaction-list-item.scss b/src/components/visual/transaction-list-item/transaction-list-item.scss index 47066553..afde8f5a 100644 --- a/src/components/visual/transaction-list-item/transaction-list-item.scss +++ b/src/components/visual/transaction-list-item/transaction-list-item.scss @@ -1,6 +1,6 @@ .transaction-item { @apply mvx:flex mvx:items-center mvx:py-5 mvx:px-3 mvx:gap-3 mvx:rounded-lg; - @apply mvx:transition-all mvx:duration-200 mvx:ease-in-out ; + @apply mvx:transition-all mvx:duration-200 mvx:ease-in-out; background-color: var(--mvx-bg-color-secondary); &:hover { @@ -53,7 +53,7 @@ color: var(--mvx-text-color-tertiary); &.truncate { - @apply mvx:truncate mvx:max-w-30 mvx:shrink-0; + @apply mvx:truncate mvx:max-w-30 mvx:shrink-0; } @media (min-width: 375px) { diff --git a/src/constants/transactionStatus.enum.ts b/src/constants/transactionStatus.enum.ts index 6928f07c..bd3da331 100644 --- a/src/constants/transactionStatus.enum.ts +++ b/src/constants/transactionStatus.enum.ts @@ -1,9 +1,9 @@ export enum TransactionStatusEnum { - success = 'success', - pending = 'pending', - fail = 'fail', - invalid = 'invalid', - executed = 'executed', - notExecuted = 'not executed', - rewardReverted = 'reward-reverted' -} \ No newline at end of file + success = 'success', + pending = 'pending', + fail = 'fail', + invalid = 'invalid', + executed = 'executed', + notExecuted = 'not executed', + rewardReverted = 'reward-reverted', +} diff --git a/src/global/tailwind.css b/src/global/tailwind.css index 4c645dd3..32f57f8f 100644 --- a/src/global/tailwind.css +++ b/src/global/tailwind.css @@ -107,4 +107,4 @@ .mvx\:animate-spinner { animation: SpinnerAnimation 3000ms linear infinite; } -} \ No newline at end of file +} diff --git a/src/setupTests.ts b/src/setupTests.ts index c38a55a6..b3ad4fab 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -1,7 +1,7 @@ Object.assign(global, { - ResizeObserver: class ResizeObserver { - observe() { } - disconnect() { } - unobserve() { } - } + ResizeObserver: class ResizeObserver { + observe() {} + disconnect() {} + unobserve() {} + }, }); diff --git a/src/utils/getTransactionStatus.ts b/src/utils/getTransactionStatus.ts index 3a2a3186..a7107ab6 100644 --- a/src/utils/getTransactionStatus.ts +++ b/src/utils/getTransactionStatus.ts @@ -1,7 +1,5 @@ import { TransactionStatusEnum } from 'constants/transactionStatus.enum'; export function getIsTransactionFailed(status: `${TransactionStatusEnum}`) { - return ( - status === TransactionStatusEnum.fail || status === TransactionStatusEnum.invalid - ); -} \ No newline at end of file + return status === TransactionStatusEnum.fail || status === TransactionStatusEnum.invalid; +} From ebab6245fe21ccbf40deecfee5c4df37488f2c95 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 25 Nov 2025 18:32:02 +0200 Subject: [PATCH 22/22] Updated changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 91f21554..acb5b117 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- [Eslint and prettierrc fixes](https://github.com/multiversx/mx-sdk-dapp-ui/pull/270) - [Refactored sign transactions panel internal components](https://github.com/multiversx/mx-sdk-dapp-ui/pull/267) ## [[0.1.4](https://github.com/multiversx/mx-sdk-dapp-ui/pull/269)] - 2025-11-21