Skip to content

Commit 0c18f1e

Browse files
arhtudormorararhtudormorar
committed
Minor edits
1 parent 5d5ca99 commit 0c18f1e

File tree

15 files changed

+76
-62
lines changed

15 files changed

+76
-62
lines changed

‎CHANGELOG.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1515

1616
## [[0.1.6](https://github.com/multiversx/mx-sdk-dapp-ui/pull/277)] - 2025-12-09
1717

18-
- [Fixed compatibility issue on stencil/core](https://github.com/multiversx/mx-sdk-dapp-ui/pull/279)
1918
- [Sync development with main](https://github.com/multiversx/mx-sdk-dapp-ui/pull/278)
2019
- [Fixed copy button](https://github.com/multiversx/mx-sdk-dapp-ui/pull/276)
2120

‎src/common/SidePanel/components/SidePanelHeader/SidePanelHeader.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,26 +23,33 @@ interface SidePanelHeaderPropsType {
2323
rightIcon?: any;
2424
}
2525

26-
export function SidePanelHeader({ panelClassName, panelTitle, hasLeftButton = true, hasRightButton = true, onRightButtonClick, onLeftButtonClick, leftIcon, rightIcon }: SidePanelHeaderPropsType) {
26+
export function SidePanelHeader({
27+
panelClassName,
28+
panelTitle,
29+
hasLeftButton = true,
30+
hasRightButton = true,
31+
onRightButtonClick,
32+
onLeftButtonClick,
33+
leftIcon,
34+
rightIcon,
35+
}: SidePanelHeaderPropsType) {
2736
const handleRightIconClick = (event: MouseEvent) => {
2837
event.preventDefault();
2938
onRightButtonClick?.(event);
30-
}
39+
};
3140

3241
const handleLeftIconClick = (event: MouseEvent) => {
3342
event.preventDefault();
3443
onLeftButtonClick?.(event);
35-
}
44+
};
3645

3746
return (
3847
<div class={classNames(styles.sidePanelHeading, panelClassName)}>
3948
<div
4049
class={{ [styles.sidePanelHeadingLeft]: true, [styles.sidePanelHeadingLeftVisible]: hasLeftButton }}
4150
onClick={handleLeftIconClick}
4251
>
43-
{hasLeftButton && (
44-
leftIcon || <Icon name="back-arrow" />
45-
)}
52+
{hasLeftButton && (leftIcon || <Icon name="back-arrow" />)}
4653
</div>
4754

4855
<div class={styles.sidePanelHeadingTitle}>{panelTitle}</div>
@@ -51,9 +58,8 @@ export function SidePanelHeader({ panelClassName, panelTitle, hasLeftButton = tr
5158
class={{ [styles.sidePanelHeadingRight]: true, [styles.sidePanelHeadingRightVisible]: hasRightButton }}
5259
onClick={handleRightIconClick}
5360
>
54-
{rightIcon || <Icon name="close" />}
61+
{hasRightButton && (rightIcon || <Icon name="close" />)}
5562
</div>
56-
</div >
63+
</div>
5764
);
5865
}
59-

‎src/common/SidePanel/components/SidePanelSwiper/SidePanelSwiper.tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { h } from '@stencil/core';
2+
23
import { state } from '../../sidePanelStore';
34
import styles from './sidePanelSwiper.styles';
45

@@ -14,7 +15,7 @@ let previousOpen: boolean | null = null;
1415
const snapPointsArray: string[] = ['100%'];
1516
const SNAP_PERCENT_DEFAULT = '50';
1617
const OPEN_TIMEOUT_VALUE = 50;
17-
const CLOSE_TTMEOUT_VALUE = 300;
18+
const CLOSE_TIMEOUT_VALUE = 300;
1819
const TRANSLATE_Y_VALUE = 100;
1920
let sheetElement: HTMLElement | null = null;
2021

@@ -27,10 +28,13 @@ let dragState = {
2728

2829
let isDragging = false;
2930

30-
export function SidePanelSwiper({ open = false, onSheetDismiss, onSheetSnapChange }: SidePanelSwiperPropsType, children: JSX.Element) {
31+
export function SidePanelSwiper(
32+
{ open = false, onSheetDismiss, onSheetSnapChange }: SidePanelSwiperPropsType,
33+
children: JSX.Element,
34+
) {
3135
const handleSheetDismiss = () => {
3236
onSheetDismiss?.();
33-
}
37+
};
3438

3539
const animateToPosition = (snapIndex: number, emitEvent: boolean = true) => {
3640
if (!sheetElement || dragState.isAnimating) {
@@ -55,7 +59,7 @@ export function SidePanelSwiper({ open = false, onSheetDismiss, onSheetSnapChang
5559
sheetElement.style.transition = '';
5660
}
5761
}, 350);
58-
}
62+
};
5963

6064
const openToSnapPoint = (snapIndex: number = 1) => {
6165
if (dragState.isAnimating) {
@@ -70,7 +74,7 @@ export function SidePanelSwiper({ open = false, onSheetDismiss, onSheetSnapChang
7074
animateToPosition(state.currentSnapIndex, false);
7175
}
7276
}, OPEN_TIMEOUT_VALUE);
73-
}
77+
};
7478

7579
const animateToClose = () => {
7680
if (!sheetElement || dragState.isAnimating) {
@@ -88,16 +92,16 @@ export function SidePanelSwiper({ open = false, onSheetDismiss, onSheetSnapChang
8892
if (sheetElement) {
8993
sheetElement.style.transition = '';
9094
}
91-
}, CLOSE_TTMEOUT_VALUE);
92-
}
95+
}, CLOSE_TIMEOUT_VALUE);
96+
};
9397

9498
const closeSwiper = () => {
9599
if (dragState.isAnimating || !state.isVisible) {
96100
return;
97101
}
98102

99103
animateToClose();
100-
}
104+
};
101105

102106
if (previousOpen !== null && previousOpen !== open) {
103107
if (open && !state.isVisible) {
@@ -124,8 +128,7 @@ export function SidePanelSwiper({ open = false, onSheetDismiss, onSheetSnapChang
124128
openToSnapPoint(state.currentSnapIndex);
125129
}
126130
}
127-
}
128-
131+
};
129132

130133
const handleDragStart = (e: MouseEvent | TouchEvent) => {
131134
if (dragState.isAnimating) {
@@ -227,15 +230,17 @@ export function SidePanelSwiper({ open = false, onSheetDismiss, onSheetSnapChang
227230
}
228231
}
229232
return TRANSLATE_Y_VALUE;
230-
}
233+
};
231234
return (
232235
<div class={styles.sidePanelSwiperContainer}>
233-
<div class={{ [styles.sidePanelSwiperWrapper]: true, [styles.sidePanelSwiperWrapperVisible]: state.isVisible, [styles.sidePanelSwiperWrapperHidden]: !state.isVisible }}>
234-
<div
235-
class={styles.sidePanelSwiper}
236-
ref={setSheetRef}
237-
onClick={(event: MouseEvent) => event.stopPropagation()}
238-
>
236+
<div
237+
class={{
238+
[styles.sidePanelSwiperWrapper]: true,
239+
[styles.sidePanelSwiperWrapperVisible]: state.isVisible,
240+
[styles.sidePanelSwiperWrapperHidden]: !state.isVisible,
241+
}}
242+
>
243+
<div class={styles.sidePanelSwiper} ref={setSheetRef} onClick={(event: MouseEvent) => event.stopPropagation()}>
239244
<div class={styles.sidePanelSwiperHandleWrapper}>
240245
<div
241246
class={styles.sidePanelSwiperHandleContainer}
@@ -246,12 +251,9 @@ export function SidePanelSwiper({ open = false, onSheetDismiss, onSheetSnapChang
246251
</div>
247252
</div>
248253

249-
<div class={styles.sidePanelSwiperContent}>
250-
{children}
251-
</div>
254+
<div class={styles.sidePanelSwiperContent}>{children}</div>
252255
</div>
253256
</div>
254257
</div>
255258
);
256259
}
257-

‎src/common/SidePanel/components/SidePanelSwiper/sidePanelSwiper.styles.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// prettier-ignore
22
export default {
3-
sidePanelSwiperContainer: 'side-panel-swipper-container mvx:flex mvx:xs:flex-col mvx:xs:h-full',
4-
sidePanelSwiperWrapper: 'side-panel-swipper-wrapper mvx:fixed mvx:left-0 mvx:top-0 mvx:bottom-0 mvx:right-0 mvx:z-50 mvx:xs:static mvx:xs:h-full mvx:before:opacity-90 mvx:before:left-0 mvx:before:top-0 mvx:before:right-0 mvx:before:bottom-0 mvx:before:transition-all mvx:before:duration-200 mvx:before:pointer-events-none mvx:before:absolute mvx:before:ease-in-out mvx:before:bg-neutral-900 mvx:before:content-[""] mvx:before:supports-[backdrop-filter]:opacity-50 mvx:before:supports-[backdrop-filter]:backdrop-blur-sm mvx:before:supports-[backdrop-filter]:bg-neutral-900 mvx:xs:before:content-none',
3+
sidePanelSwiperContainer: 'side-panel-swiper-container mvx:flex mvx:xs:flex-col mvx:xs:h-full',
4+
sidePanelSwiperWrapper: 'side-panel-swiper-wrapper mvx:fixed mvx:left-0 mvx:top-0 mvx:bottom-0 mvx:right-0 mvx:z-50 mvx:xs:static mvx:xs:h-full mvx:before:opacity-90 mvx:before:left-0 mvx:before:top-0 mvx:before:right-0 mvx:before:bottom-0 mvx:before:transition-all mvx:before:duration-200 mvx:before:pointer-events-none mvx:before:absolute mvx:before:ease-in-out mvx:before:bg-neutral-900 mvx:before:content-[""] mvx:before:supports-[backdrop-filter]:opacity-50 mvx:before:supports-[backdrop-filter]:backdrop-blur-sm mvx:before:supports-[backdrop-filter]:bg-neutral-900 mvx:xs:before:content-none',
55
sidePanelSwiperWrapperVisible: 'side-panel-swiper-visible mvx:!flex',
66
sidePanelSwiperWrapperHidden: 'side-panel-swiper-wrapper-hidden mvx:hidden mvx:xs:block',
77
sidePanelSwiperHidden: 'side-panel-swiper-hidden mvx:translate-y-full',
@@ -10,4 +10,4 @@ export default {
1010
sidePanelSwiperHandleContainer: 'side-panel-swiper-handle-container mvx:flex mvx:top-0 mvx:bottom-0 mvx:absolute mvx:right-0 mvx:left-0 mvx:justify-center mvx:touch-none mvx:select-none mvx:cursor-grab mvx:active:cursor-grabbing',
1111
sidePanelSwiperHandle: 'side-panel-swiper-handle mvx:w-32 mvx:mt-3 mvx:h-1 mvx:rounded mvx:bg-primary',
1212
sidePanelSwiperContent: 'side-panel-swiper-content mvx:overflow-y-auto mvx:max-h-[calc(100dvh-4rem)] mvx:xs:max-h-none mvx:xs:h-full'
13-
} satisfies Record<string, string>;
13+
} satisfies Record<string, string>;

‎src/common/SidePanel/sidePanel.constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const ANIMATION_DELAY_PROMISE = new Promise(resolve => setTimeout(resolve, 300));
1+
export const ANIMATION_DELAY_PROMISE = () => new Promise(resolve => setTimeout(resolve, 300));

‎src/components/functional/notifications-feed/components/TransactionListItem/TransactionListItem.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { h } from '@stencil/core';
22
import classNames from 'classnames';
33
import { FormatAmount } from 'common/FormatAmount/FormatAmount';
4+
import { Icon } from 'common/Icon';
5+
import { Tooltip } from 'common/Tooltip/Tooltip';
46
import { IconSizeEnumType, TransactionAssetIcon } from 'common/TransactionAssetIcon/TransactionAssetIcon';
57
import { Trim } from 'common/Trim/Trim';
6-
import { getAmountParts } from 'components/functional/toasts-list/helpers';
8+
import { getAmountParts } from 'components/functional/toasts-list/helpers/getAmountParts';
79
import { getIsTransactionFailed } from 'utils/getTransactionStatus';
8-
import styles from './transactionListItem.styles'
910

11+
import styles from './transactionListItem.styles';
1012
import type { ITransactionListItem } from './transactionListItem.types';
11-
import { Tooltip } from 'common/Tooltip/Tooltip';
12-
import { Icon } from 'common/Icon';
1313

1414
interface TransactionListItemPropsType {
1515
transaction: ITransactionListItem;
@@ -23,7 +23,7 @@ export function TransactionListItem({ transaction }: TransactionListItemPropsTyp
2323
const showTooltip = transaction.amount && amount.label.length > 12;
2424

2525
return (
26-
<a href={transaction.link} target="_blank" rel="noopener noreferrer">
26+
<a href={transaction.link || '#'} target="_blank" rel="noopener noreferrer">
2727
<div class={styles.transactionItem}>
2828
<div
2929
class={classNames(styles.transactionIcon, {
@@ -43,11 +43,11 @@ export function TransactionListItem({ transaction }: TransactionListItemPropsTyp
4343
<div class={styles.transactionDetailsHeader}>
4444
<div class={styles.transactionHeaderLeft}>
4545
<h4 class={classNames(styles.transactionTitle, { [styles.transactionTitleTruncate]: showTooltip })}>
46-
{transaction.action.name}
46+
{transaction.action?.name || 'Unknown Action'}
4747
</h4>
4848

4949
{showTooltip && (
50-
<Tooltip position="bottom" trigger={<Icon name='circle-info' />}>
50+
<Tooltip position="bottom" trigger={<Icon name="circle-info" />}>
5151
{amount.label}
5252
</Tooltip>
5353
)}
@@ -76,9 +76,14 @@ export function TransactionListItem({ transaction }: TransactionListItemPropsTyp
7676

7777
<div class={styles.transactionDetailsInfoIcon}>
7878
{transaction.interactorAsset ? (
79-
<img src={transaction.interactorAsset} alt="Service icon" loading="lazy" class={styles.transactionDetailsInfoIconImg} />
79+
<img
80+
src={transaction.interactorAsset}
81+
alt="Service icon"
82+
loading="lazy"
83+
class={styles.transactionDetailsInfoIconImg}
84+
/>
8085
) : (
81-
<Icon name='default-transaction-icon-small' />
86+
<Icon name="default-transaction-icon-small" />
8287
)}
8388
</div>
8489

@@ -89,4 +94,3 @@ export function TransactionListItem({ transaction }: TransactionListItemPropsTyp
8994
</a>
9095
);
9196
}
92-

‎src/components/functional/notifications-feed/components/TransactionListItem/tests/TransactionListItem.spec.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import type { ITransactionListItem } from '../transactionListItem.types';
88
describe('transaction-list-item', () => {
99
const createPage = async (transaction: ITransactionListItem) => {
1010
const page = await newSpecPage({
11-
components: [],
11+
components: [TransactionListItem],
1212
template: () => <TransactionListItem transaction={transaction} />,
1313
});
1414

@@ -38,7 +38,7 @@ describe('transaction-list-item', () => {
3838
describe('empty state', () => {
3939
it('renders empty when no transaction is provided', async () => {
4040
const page = await newSpecPage({
41-
components: [],
41+
components: [TransactionListItem],
4242
template: () => <TransactionListItem transaction={null} />,
4343
});
4444
expect(page.root).toBeFalsy();
@@ -156,4 +156,4 @@ describe('transaction-list-item', () => {
156156
expect(amount.textContent.trim()).toBe(transaction.amount.replace(' ', ''));
157157
});
158158
});
159-
});
159+
});

‎src/components/functional/notifications-feed/notifications-feed.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export class NotificationsFeed {
2929

3030
@Method() async closeWithAnimation() {
3131
this.isOpen = false;
32-
const animationDelay = await ANIMATION_DELAY_PROMISE;
32+
const animationDelay = await ANIMATION_DELAY_PROMISE();
3333
return animationDelay;
3434
}
3535

‎src/components/functional/pending-transactions-panel/pending-transactions-panel.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, h, Method, State } from '@stencil/core';
22
import { ProviderIdleScreen } from 'common/ProviderIdleScreen/ProviderIdleScreen';
3-
import { ANIMATION_DELAY_PROMISE } from 'common/SidePanel/sidePanel.constants';
43
import { SidePanel } from 'common/SidePanel/SidePanel';
4+
import { ANIMATION_DELAY_PROMISE } from 'common/SidePanel/sidePanel.constants';
55
import type { IProviderBase } from 'types/provider.types';
66
import { ProviderTypeEnum } from 'types/provider.types';
77
import { ConnectionMonitor } from 'utils/ConnectionMonitor';
@@ -45,7 +45,7 @@ export class PendingTransactionsPanel {
4545

4646
@Method() async closeWithAnimation() {
4747
this.isOpen = false;
48-
const animationDelay = await ANIMATION_DELAY_PROMISE;
48+
const animationDelay = await ANIMATION_DELAY_PROMISE();
4949
return animationDelay;
5050
}
5151

‎src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export class SignTransactionsPanel {
2828

2929
@Method() async closeWithAnimation() {
3030
this.isOpen = false;
31-
const animationDelay = await ANIMATION_DELAY_PROMISE;
31+
const animationDelay = await ANIMATION_DELAY_PROMISE();
3232
return animationDelay;
3333
}
3434

0 commit comments

Comments
 (0)