handleCopyButtonClick?.(event)}
+ class={{
+ [styles.copyButton]: true,
+ [className]: Boolean(className),
+ }}
+ >
+
+ );
+}
diff --git a/src/common/CopyButton/getCopyClickAction.ts b/src/common/CopyButton/getCopyClickAction.ts
new file mode 100644
index 00000000..322cea44
--- /dev/null
+++ b/src/common/CopyButton/getCopyClickAction.ts
@@ -0,0 +1,26 @@
+import { copyToClipboard } from 'utils/copyToClipboard';
+
+interface CopyHandlerOptions {
+ onSuccessChange?: (isSuccess: boolean) => void;
+}
+
+export function getCopyClickAction({ 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/common/Icon/Icon.tsx b/src/common/Icon/Icon.tsx
index 2a431186..84ffa060 100644
--- a/src/common/Icon/Icon.tsx
+++ b/src/common/Icon/Icon.tsx
@@ -24,7 +24,9 @@ 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';
+import { ArrowRightIcon } from './components/ArrowRightIcon';
export const Icon = ({ name, ...properties }: IconPropsType) => {
if (!name) {
@@ -104,6 +106,12 @@ export const Icon = ({ name, ...properties }: IconPropsType) => {
case 'arrows-rotate':
return
+ {isTooltipVisible && (
+
+ );
+}
\ No newline at end of file
diff --git a/src/common/Trim/Trim.tsx b/src/common/Trim/Trim.tsx
index 8a671942..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.d.ts b/src/components.d.ts
index 3d50c26c..a9d86ead 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -6,11 +6,10 @@
*/
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";
-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";
@@ -20,11 +19,10 @@ 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";
-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,45 +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 MvxSignTransactionsFooter {
- }
- 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
+
+ )}
+
+ {trigger}
+ event.stopPropagation()}
+ >
+ {children}
+
+
+
+ );
+}
+
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..1e08ba37
--- /dev/null
+++ b/src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx
@@ -0,0 +1,147 @@
+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 {
+ decodeMethod?: DecodeMethodEnum;
+ onDecodeMethodChange?: (method: DecodeMethodEnum) => void;
+ decodeTooltipVisible?: boolean;
+ onDecodeTooltipVisibilityChange?: (isVisible: boolean) => void;
+}
+
+export function SignTransactionsAdvancedData({ decodeMethod = DecodeMethodEnum.raw, onDecodeMethodChange, decodeTooltipVisible, onDecodeTooltipVisibilityChange }: SignTransactionsAdvancedDataPropsType) {
+ const { data, highlight } = state.commonData;
+ 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) {
+
+ const timeoutId = setTimeout(() => {
+ highlightElement?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+ });
+
+ clearTimeout(timeoutId);
+ }
+
+ return (
+
+
+
+
+
+
+ Gas Price
+
+ {gasPrice} {egldLabel}
+
+
+
+ {gasPriceOptions?.map(({ label, value }) => {
+ const isActive = gasPriceOption?.toString() === value.toString();
+
+ return (
+
+ );
+ })}
+
+
+ Gas Limit
+ {gasLimit}
+
+
+
+ );
+}
+
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
+ {
+ if (onDecodeTooltipVisibilityChange) {
+ onDecodeTooltipVisibilityChange(isVisible);
+ }
+ }}
+ isTooltipVisible={decodeTooltipVisible}
+ trigger={
+
+
+
+ Data
+
+ 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/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
+ {currentDecodeMethod}
+
+
+
+ {transactionsCount > 1 && (
+
+ );
+}
+
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..b2cbb595 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-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',
@@ -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 event.stopPropagation()}
+ >
+
+ )}
+
+
+
+
+ Transaction
+ = NUMBER_OF_TRANSACTIONS,
+ }}
+ >
+ {currentIndex + 1}
+
+
+ of
+ = NUMBER_OF_TRANSACTIONS,
+ }}
+ >
+ {transactionsCount}
+
+
+
+ Request from
+
+ {showFavicon && (
+
+ 
{
+ showFavicon = false;
+ }}
+ />
+
+ )}
+
+
+ {origin}
+
+
+
+ );
+}
+
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
+
+
+
+
+
+ {isApp ? 'Amount' : 'Send'}
+
+
+
+
+ {tokenIconUrl && (
+
+
+ {amount} {identifier}
+
+
+ {identifier !== 'USD' && (
+
+ {usdValue}
+
+ )}
+
+ 
+
+ )}
+
+
+
+
+
+
+
+ {isApp && (
+ {isApp ? 'App' : 'To'}
+
+ {interactorIconUrl && (
+
+
+ 
+
+ )}
+ {interactor && (
+
+
+ )}
+ Action
+
+ {action}
+
+
+
+
+
+
+ Network Fee
+
+
+
+ {networkFee}
+
+
-
- );
- }
-}
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 (
-
- {this.currentDecodeMethod}
-
-
-
-
- );
- }
-}
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 (
-
- {
- this.isDecodeTooltipOpen = event.detail;
- }}
- trigger={
-
-
-
- Data
-
-
-
-
- {beforeHighlight || afterHighlight ? (
-
- {beforeHighlight && (
-
- ) : (
-
-
- {beforeHighlight}
-
- )}
-
- (this.highlightElement = el)}
- >
- {highlight}
-
-
- {afterHighlight && (
-
- {afterHighlight}
-
- )}
-
- {highlight}
-
- )}
-
-
- );
- }
-}
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 6b3ce95f..00000000
--- a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-: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);
- }
- }
- }
-}
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 2bc8a967..00000000
--- a/src/components/functional/sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx
+++ /dev/null
@@ -1,179 +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';
-
-const signTransactionsFooterClasses: Record
-
-
-
-
-
- Gas Price
-
- {gasPrice} {egldLabel}
-
-
-
- {gasPriceOptions.map(({ label, value }) => (
-
- ))}
-
-
- Gas Limit
- {gasLimit}
-
-
- {transactionsCount > 1 && (
-
- );
- }
-}
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 (
- event.stopPropagation()}
- >
-
- )}
-
-
-
-
- Transaction
- = 10,
- }}
- >
- {currentIndex + 1}
-
-
- of
- = 10,
- }}
- >
- {transactionsCount}
-
-
-
- Request from
-
- {this.showFavicon && (
-
- {
- this.showFavicon = false;
- }}
- />
-
- )}
-
-
- {origin}
-
-
-
- );
- }
-}
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.scss b/src/components/functional/sign-transactions-panel/sign-transactions-panel.scss
index ff99cd5c..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,115 +1,36 @@
-.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;
+.trim {
+ @apply mvx:flex mvx:relative mvx:max-w-full mvx:overflow-hidden mvx:whitespace-nowrap;
}
-.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;
+.trim-full {
+ @apply mvx:text-transparent mvx:absolute mvx:leading-5;
}
-.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;
+.trim-full-visible {
+ @apply mvx:text-inherit mvx:relative mvx:leading-5;
}
-.frame-2 {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- flex-wrap: nowrap;
- flex-shrink: 0;
- position: relative;
- width: 30px;
+.trim-wrapper {
+ @apply mvx:hidden;
}
-.mx-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: nowrap;
- flex-shrink: 0;
- position: relative;
- width: 30px;
- height: 30px;
+.trim-wrapper-visible {
+ @apply mvx:overflow-hidden mvx:max-w-full mvx:flex;
}
-.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;
+.trim-left-wrapper {
+ @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:text-left mvx:text-[1px];
}
-.navigation-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: nowrap;
- flex-shrink: 0;
- position: relative;
- width: 25px;
- height: 25px;
+.trim-left {
+ @apply mvx:select-none mvx:pointer-events-none mvx:inline mvx:text-base mvx:leading-5;
}
-.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;
- }
- }
- }
+.trim-right-wrapper {
+ @apply mvx:flex-shrink mvx:text-ellipsis mvx:overflow-hidden mvx:whitespace-nowrap mvx:text-right mvx:text-[1px];
+ direction: rtl;
}
-@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-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
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..e568781a
--- /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
-
-
-
-
-
- {this.isApp ? 'Amount' : 'Send'}
-
-
-
-
- {this.tokenIconUrl && (
- (this.amountValueRef = el)}
- >
-
- {this.amount} {this.identifier}
-
-
- {this.identifier !== 'USD' && (
-
- {this.usdValue}
-
- )}
-
- 
-
- )}
-
-
-
-
-
-
- {this.isApp && (
- {this.isApp ? 'App' : 'To'}
-
- {this.interactorIconUrl && (
-
-
- 
-
- )}
- {this.interactor && (
-
-
- )}
- Action
-
- {this.action}
-
-
-
-
-
-
- Network Fee
-
-
-
- {this.networkFee}
-
-
-
-
+
+ ;
-
-@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 (
- ;
-
-@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 (
-
+
-
+
);
}
}
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/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
{transactionTabs.map(transactionTab => (
- this.setActiveTab(transactionTab)}
>
-
{this.activeTab === TransactionTabsEnum.overview ? (
-
+
@@ -146,15 +181,25 @@ export class SignTransactionsPanel {
{transactionTab}
-
- );
- }
-}
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..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
@@ -2,8 +2,8 @@ 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 { Tooltip } from '../../tooltip/tooltip';
+import { CopyButton } from '../../../common/copy-button/copy-button';
+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
- {this.isTooltipVisible && (
-
- );
- }
-}
diff --git a/src/global/tailwind.css b/src/global/tailwind.css
index 35760edb..4c645dd3 100644
--- a/src/global/tailwind.css
+++ b/src/global/tailwind.css
@@ -13,6 +13,7 @@
--color-preloader: var(--mvx-preloader-item-bg);
--color-pending: var(--mvx-pending-color);
--color-secondary: var(--mvx-bg-color-secondary);
+ --color-tertiary: var(--mvx-bg-color-tertiary);
--color-error: var(--mvx-error-color);
--color-primary: var(--mvx-text-color-primary);
--color-secondary-text: var(--mvx-text-color-secondary);
@@ -21,6 +22,8 @@
--color-hover: var(--mvx-hover-color-primary);
--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);
@@ -29,9 +32,20 @@
--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-accent-variant: var(--mvx-bg-accent-variant-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);
+ --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 {
@@ -83,4 +97,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 88ba5d745271e22bcc52fbbe4c9f0a55c8bb8aa6 Mon Sep 17 00:00:00 2001
From: Iulia Cimpeanu <72752718+iuliacimpeanu@users.noreply.github.com>
Date: Wed, 26 Nov 2025 11:45:09 +0200
Subject: [PATCH 02/10] Eslint and prettierrc fixes (#270)
* Eslint fixes
* Prettierrc fixes
* Updated changelog
---
CHANGELOG.md | 1 +
.../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 | 72 +-
src/common/Button/button.styles.ts | 2 +-
src/common/CopyButton/CopyButton.tsx | 59 +-
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 | 8 +-
.../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 | 145 +-
src/common/Trim/Trim.tsx | 294 +-
src/common/Trim/trim.styles.ts | 2 +-
src/common/UnlockButton/UnlockButton.tsx | 1 +
.../UnlockButton/unlockButton.styles.ts | 2 +-
src/components.d.ts | 3619 ++++++++++-------
src/components/common/button/button.scss | 2 +-
.../common/button/button.stories.tsx | 2 +-
src/components/common/button/button.tsx | 3 +-
.../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 | 4 +-
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 | 35 +-
.../SignTransactionsAdvancedData.tsx | 34 +-
.../SignTransactionsAdvancedDataDecode.tsx | 6 +-
.../signTransactionsAdvancedData.styles.ts | 2 +-
.../signTransactionsAdvanced.styles.ts | 2 +-
.../SignTransactionsFooter.tsx | 33 +-
.../signTransactionsFooter.styles.ts | 41 +-
.../SignTransactionsHeader.tsx | 11 +-
.../SignTransactionsOverview.tsx | 50 +-
.../signTransactionsOverview.styles.ts | 2 +-
.../sign-transactions-panel.scss | 22 +-
.../sign-transactions-panel.styles.ts | 2 +-
.../sign-transactions-panel.tsx | 22 +-
.../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 +-
.../transaction-toast-content.tsx | 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 | 7 +-
.../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 | 12 +-
.../wallet-connect-download.scss | 2 +-
.../tests/data-with-explorer-link.spec.ts | 4 +-
src/components/visual/index.ts | 1 -
.../helpers/getPagination/getPagination.ts | 13 +-
.../transaction-list-item.scss | 4 +-
.../transaction-list-item.tsx | 2 +-
src/constants/transactionStatus.enum.ts | 16 +-
src/global/tailwind.css | 2 +-
src/setupTests.ts | 10 +-
src/utils/getTransactionStatus.ts | 6 +-
119 files changed, 3076 insertions(+), 2289 deletions(-)
delete mode 100644 src/components/visual/index.ts
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
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) }}
>
-
-
- )}
-
- {this.trigger}
- event.stopPropagation()}
- >
-
-