Skip to content

Commit 7fcec72

Browse files
arhtudormorararhtudormorar
authored
Merge pull request #308 from multiversx/development
0.1.23
2 parents 2023cb2 + aa2fc0b commit 7fcec72

File tree

9 files changed

+223
-42
lines changed

9 files changed

+223
-42
lines changed

‎.storybook/preview.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,52 @@ import './tailwind.css';
1111

1212
defineCustomElements();
1313

14+
const upgradeAddressTables = () => {
15+
if (typeof document === 'undefined') {
16+
return;
17+
}
18+
19+
const elements = Array.from(
20+
document.querySelectorAll<HTMLElement>('mvx-address-table[data-account-screen-data]'),
21+
);
22+
23+
elements.forEach(element => {
24+
const raw = element.getAttribute('data-account-screen-data');
25+
const selectedIndexAttr = element.getAttribute('selectedindex');
26+
27+
if (!raw) {
28+
return;
29+
}
30+
31+
try {
32+
const parsed = JSON.parse(raw);
33+
const typedElement = element as unknown as { accountScreenData?: unknown; selectedIndex?: unknown };
34+
35+
typedElement.accountScreenData = parsed;
36+
37+
if (selectedIndexAttr != null) {
38+
const parsedSelectedIndex = Number(selectedIndexAttr);
39+
if (!Number.isNaN(parsedSelectedIndex)) {
40+
typedElement.selectedIndex = parsedSelectedIndex;
41+
}
42+
}
43+
} catch {
44+
// Ignore parse errors in Storybook only.
45+
}
46+
});
47+
};
48+
49+
if (typeof window !== 'undefined' && 'MutationObserver' in window) {
50+
const observer = new MutationObserver(() => {
51+
upgradeAddressTables();
52+
});
53+
54+
window.addEventListener('load', () => {
55+
upgradeAddressTables();
56+
observer.observe(document.documentElement, { childList: true, subtree: true });
57+
});
58+
}
59+
1460
export const decorators: Preview['decorators'] = [
1561
(Story, context) =>
1662
renderJsxToHtml(

‎CHANGELOG.md‎

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

88
## [Unreleased]
99

10+
## [[0.1.23](https://github.com/multiversx/mx-sdk-dapp-ui/pull/308)] - 2026-02-20
11+
12+
- [Fixed addressTable data-testid & markup](https://github.com/multiversx/mx-sdk-dapp-ui/pull/307)
13+
1014
## [[0.1.22](https://github.com/multiversx/mx-sdk-dapp-ui/pull/306)] - 2026-02-20
1115

1216
- [Added part attributes to SidePanel and SignTransactions ](https://github.com/multiversx/mx-sdk-dapp-ui/pull/306)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@multiversx/sdk-dapp-ui",
3-
"version": "0.1.22",
3+
"version": "0.1.23",
44
"description": "A library to hold UI components for a dApp on the MultiversX blockchain",
55
"author": "MultiversX",
66
"license": "MIT",

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ export function SignTransactionsFooter({
5353
const showForwardAction = currentIndexNeedsSigning || currentIndexCannotBeSignedYet;
5454
const checkButtonText = providerName ? `Check ${providerName}` : 'Check your device';
5555

56+
const isDisabled = currentIndexCannotBeSignedYet || state.isWaitingForSignature;
57+
5658
return (
5759
<div class={styles.signTransactionsFooterContainer} part="sign-transactions-footer-container">
5860
<div class={styles.signTransactionsFooter} data-testid={DataTestIdsEnum.signTransactionsFooter}>
@@ -109,8 +111,10 @@ export function SignTransactionsFooter({
109111
size="small"
110112
data-testid={DataTestIdsEnum.signNextTransactionBtn}
111113
onClick={showForwardAction ? handleSignClick : onNext}
112-
disabled={currentIndexCannotBeSignedYet || state.isWaitingForSignature}
113-
class={classNames(styles.signTransactionsFooterButton, styles.signTransactionsActionButton)}
114+
disabled={isDisabled}
115+
class={classNames(styles.signTransactionsFooterButton, styles.signTransactionsActionButton, {
116+
[styles.signTransactionsButtonDisabled]: isDisabled,
117+
})}
114118
>
115119
{showForwardAction ? (
116120
<span>

‎src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/signTransactionsFooter.styles.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,6 @@ export default {
1818
signTransactionsFooterIdentityCopy: 'sign-transactions-footer-identity-copy mvx:text-primary',
1919
signTransactionsButtonTooltip: 'sign-transactions-button-tooltip mvx:absolute mvx:top-0 mvx:h-12 mvx:left-0 mvx:right-0',
2020
signTransactionsActionButton: 'sign-transactions-action-button mvx:text-base! mvx:w-full',
21+
signTransactionsButtonDisabled: 'sign-transactions-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',
2122
signTransactionsExplorerLinkIcon: 'sign-transactions-explorer-link-icon mvx:text-primary',
2223
} satisfies Record<string, string>;

‎src/components/visual/address-table/address-table.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@
6060
@apply mvx:relative mvx:z-1 mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:rounded-full;
6161
@apply mvx:ease-in-out mvx:mr-2 mvx:min-w-4 mvx:max-w-4 mvx:h-4;
6262
border: 1px solid var(--mvx-text-color-primary);
63+
appearance: none;
64+
-webkit-appearance: none;
6365

6466
&:after {
6567
@apply mvx:absolute mvx:left-1/2 mvx:top-1/2 mvx:rounded-full mvx:opacity-0 mvx:transition-all mvx:duration-200;

‎src/components/visual/address-table/address-table.stories.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import { h } from '@stencil/core';
2+
import type { Meta, StoryObj } from '@stencil/storybook-plugin';
3+
import type { IAddressTableData } from 'types/address-table.types';
4+
5+
// prettier-ignore
6+
const styles = {
7+
addressTableStoriesWrapper: 'address-table-stories-wrapper mvx:flex mvx:justify-center mvx:items-stretch mvx:h-[600px] mvx:bg-neutral-900',
8+
addressTableStoriesContainer: 'address-table-stories-container mvx:w-full mvx:max-w-3xl mvx:p-6',
9+
} satisfies Record<string, string>;
10+
11+
const exampleAccountScreenData: IAddressTableData = {
12+
startIndex: 0,
13+
addressesPerPage: 10,
14+
isLoading: false,
15+
accounts: [
16+
{
17+
address: 'erd1qyu5wthldzr8wx5c9ucg8kjagg0jfs53s8nr3zpz3hypefsdd8ssycr6th',
18+
balance: '1.2345 EGLD',
19+
usdValue: '$250.12',
20+
index: 0,
21+
shard: 0,
22+
},
23+
{
24+
address: 'erd1qqqqqqqqqqqqqpgqzqvm5ywqqf524efwrhr039tjs29w0qltkklsa05pk7',
25+
balance: '0.5000 EGLD',
26+
usdValue: '$101.25',
27+
index: 1,
28+
shard: 1,
29+
},
30+
{
31+
address: 'erd1qj8g8j9h0x0k9p7s0q3w4e5r6t7y8u9i0o1p2a3s4d5f6g7h8j9k0l1m2n3',
32+
balance: '10.0000 EGLD',
33+
usdValue: '$2,025.00',
34+
index: 2,
35+
shard: 2,
36+
},
37+
{
38+
address: 'erd1k9p7s0q3w4e5r6t7y8u9i0o1p2a3s4d5f6g7h8j9k0l1m2n3q4r5s6t7u8v',
39+
balance: '0.0100 EGLD',
40+
usdValue: '$2.05',
41+
index: 3,
42+
shard: 0,
43+
},
44+
{
45+
address: 'erd1x2c3v4b5n6m7a8s9d0f1g2h3j4k5l6z7x8c9v0b1n2m3a4s5d6f7g8h9j0',
46+
balance: '5.6789 EGLD',
47+
usdValue: '$1,150.45',
48+
index: 4,
49+
shard: 1,
50+
},
51+
],
52+
};
53+
54+
type AddressTableStoryArgs = {
55+
accountScreenData: IAddressTableData;
56+
selectedIndex: number;
57+
};
58+
59+
const storySettings: Meta<AddressTableStoryArgs> = {
60+
tags: ['autodocs'],
61+
title: 'Components/AddressTable',
62+
args: {
63+
accountScreenData: exampleAccountScreenData,
64+
selectedIndex: exampleAccountScreenData.accounts[0].index,
65+
},
66+
argTypes: {
67+
accountScreenData: { control: 'object' },
68+
selectedIndex: { control: { type: 'number', min: 0 } },
69+
},
70+
};
71+
72+
export const Default: StoryObj<AddressTableStoryArgs> = {
73+
render: properties => (
74+
<div class={styles.addressTableStoriesWrapper}>
75+
<div class={styles.addressTableStoriesContainer}>
76+
<mvx-address-table
77+
data-account-screen-data={JSON.stringify(properties.accountScreenData ?? exampleAccountScreenData)}
78+
selectedIndex={properties.selectedIndex}
79+
/>
80+
</div>
81+
</div>
82+
),
83+
};
84+
85+
export const PageChanging: StoryObj<AddressTableStoryArgs> = {
86+
render: properties => (
87+
<div class={styles.addressTableStoriesWrapper}>
88+
<div class={styles.addressTableStoriesContainer}>
89+
<mvx-address-table
90+
data-account-screen-data={JSON.stringify({
91+
...exampleAccountScreenData,
92+
isLoading: true,
93+
})}
94+
selectedIndex={properties.selectedIndex}
95+
/>
96+
</div>
97+
</div>
98+
),
99+
};
100+
101+
export const InitialLoadingIntro: StoryObj<AddressTableStoryArgs> = {
102+
render: properties => (
103+
<div class={styles.addressTableStoriesWrapper}>
104+
<div class={styles.addressTableStoriesContainer}>
105+
<mvx-address-table
106+
data-account-screen-data={JSON.stringify({
107+
...exampleAccountScreenData,
108+
accounts: [],
109+
isLoading: true,
110+
})}
111+
selectedIndex={properties.selectedIndex}
112+
/>
113+
</div>
114+
</div>
115+
),
116+
};
117+
118+
export default storySettings;

‎src/components/visual/address-table/address-table.tsx‎

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -124,49 +124,55 @@ export class AddressTable {
124124
</div>
125125

126126
<div class={{ 'address-table-list': true, 'visible': !isPageChanging }}>
127-
{this.accountScreenData.accounts.map(accountDerivation => (
128-
<div
129-
data-testid={`${DataTestIdsEnum.addressTableItem}-${accountDerivation.address}`}
130-
onClick={this.handleSelectAccount(accountDerivation.index)}
131-
class={{
132-
'address-table-list-item': true,
133-
'checked': accountDerivation.index === this.selectedIndex,
134-
}}
135-
>
136-
<div
137-
class={{
138-
'address-table-list-item-checkbox': true,
139-
'checked': accountDerivation.index === this.selectedIndex,
140-
}}
141-
/>
142-
127+
{this.accountScreenData.accounts.map(accountDerivation => {
128+
const isChecked = accountDerivation.index === this.selectedIndex;
129+
return (
143130
<div
131+
data-testid={`${DataTestIdsEnum.check}_${accountDerivation.address}`}
132+
onClick={this.handleSelectAccount(accountDerivation.index)}
144133
class={{
145-
'address-table-list-item-index': true,
146-
'checked': accountDerivation.index === this.selectedIndex,
147-
'narrow': isSingleDigitIndex,
148-
'middle': isIndexBelowOneHundred,
149-
'larger': isIndexInTheHundreds,
150-
'largest': isIndexInTheThousands,
134+
'address-table-list-item': true,
135+
'checked': isChecked,
151136
}}
152137
>
153-
#{this.processLedgerAddressIndex(accountDerivation)}
154-
{accountDerivation.shard != null && (
155-
<mvx-tooltip
156-
position={accountDerivation.index === this.accountScreenData.startIndex ? 'bottom' : 'top'}
157-
trigger={
158-
<mvx-shard-icon shard={accountDerivation.shard} class="address-table-list-item-shard-icon" />
159-
}
160-
>
161-
<div class="address-table-list-item-shard-tooltip">Shard {accountDerivation.shard}</div>
162-
</mvx-tooltip>
163-
)}
138+
<input
139+
type="radio"
140+
name="address-table-selection"
141+
checked={isChecked}
142+
class={{
143+
'address-table-list-item-checkbox': true,
144+
'checked': isChecked,
145+
}}
146+
/>
147+
148+
<div
149+
class={{
150+
'address-table-list-item-index': true,
151+
'checked': isChecked,
152+
'narrow': isSingleDigitIndex,
153+
'middle': isIndexBelowOneHundred,
154+
'larger': isIndexInTheHundreds,
155+
'largest': isIndexInTheThousands,
156+
}}
157+
>
158+
#{this.processLedgerAddressIndex(accountDerivation)}
159+
{accountDerivation.shard != null && (
160+
<mvx-tooltip
161+
position={accountDerivation.index === this.accountScreenData.startIndex ? 'bottom' : 'top'}
162+
trigger={
163+
<mvx-shard-icon shard={accountDerivation.shard} class="address-table-list-item-shard-icon" />
164+
}
165+
>
166+
<div class="address-table-list-item-shard-tooltip">Shard {accountDerivation.shard}</div>
167+
</mvx-tooltip>
168+
)}
169+
</div>
170+
171+
<mvx-trim text={accountDerivation.address} class="address-table-list-item-address" part="address" />
172+
<div class="address-table-list-item-balance">{accountDerivation.usdValue}</div>
164173
</div>
165-
166-
<mvx-trim text={accountDerivation.address} class="address-table-list-item-address" part="address" />
167-
<div class="address-table-list-item-balance">{accountDerivation.usdValue}</div>
168-
</div>
169-
))}
174+
);
175+
})}
170176
</div>
171177
</div>
172178

‎src/constants/dataTestIds.enum.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export enum DataTestIdsEnum {
22
accessWalletBtn = 'accessWalletBtn',
33
addressTableContainer = 'addressTableContainer',
4-
addressTableItem = 'addressTableItem',
4+
check = 'check',
55
firstBtn = 'firstBtn',
66
lastBtn = 'lastBtn',
77
paginationItem = 'paginationItem',

0 commit comments

Comments
 (0)