Tm/address-table-story (#307)

* Add upgradeAddressTables function to enhance address table data handling in Storybook

* Enhance upgradeAddressTables function to include selectedIndex handling for improved address table data management in Storybook

* Add disabled state styling for sign transactions button in SignTransactionsFooter

* Added checkboxes and checked datatestid

* Update version to 0.1.23 and add changelog entry for addressTable fixes

Author: arhtudormorar

.storybook/preview.tsx

@@ -11,6 +11,52 @@ import './tailwind.css';
 
 defineCustomElements();
 
+const upgradeAddressTables = () => {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  const elements = Array.from(
+    document.querySelectorAll<HTMLElement>('mvx-address-table[data-account-screen-data]'),
+  );
+
+  elements.forEach(element => {
+    const raw = element.getAttribute('data-account-screen-data');
+    const selectedIndexAttr = element.getAttribute('selectedindex');
+
+    if (!raw) {
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(raw);
+      const typedElement = element as unknown as { accountScreenData?: unknown; selectedIndex?: unknown };
+
+      typedElement.accountScreenData = parsed;
+
+      if (selectedIndexAttr != null) {
+        const parsedSelectedIndex = Number(selectedIndexAttr);
+        if (!Number.isNaN(parsedSelectedIndex)) {
+          typedElement.selectedIndex = parsedSelectedIndex;
+        }
+      }
+    } catch {
+      // Ignore parse errors in Storybook only.
+    }
+  });
+};
+
+if (typeof window !== 'undefined' && 'MutationObserver' in window) {
+  const observer = new MutationObserver(() => {
+    upgradeAddressTables();
+  });
+
+  window.addEventListener('load', () => {
+    upgradeAddressTables();
+    observer.observe(document.documentElement, { childList: true, subtree: true });
+  });
+}
+
 export const decorators: Preview['decorators'] = [
   (Story, context) =>
     renderJsxToHtml(

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.1.23](https://github.com/multiversx/mx-sdk-dapp-ui/pull/308)] - 2026-02-20
+
+- [Fixed addressTable data-testid & markup](https://github.com/multiversx/mx-sdk-dapp-ui/pull/307)
+
 ## [[0.1.22](https://github.com/multiversx/mx-sdk-dapp-ui/pull/306)] - 2026-02-20
 
 - [Added part attributes to SidePanel and SignTransactions ](https://github.com/multiversx/mx-sdk-dapp-ui/pull/306)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",

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

@@ -110,7 +110,13 @@ export function SignTransactionsFooter({
               data-testid={DataTestIdsEnum.signNextTransactionBtn}
               onClick={showForwardAction ? handleSignClick : onNext}
               disabled={currentIndexCannotBeSignedYet || state.isWaitingForSignature}
-              class={classNames(styles.signTransactionsFooterButton, styles.signTransactionsActionButton)}
+              class={classNames(
+                styles.signTransactionsFooterButton,
+                styles.signTransactionsActionButton,
+                {
+                  [styles.signTransactionsButtonDisabled]: currentIndexCannotBeSignedYet || state.isWaitingForSignature,
+                }
+              )}
             >
               {showForwardAction ? (
                 <span>

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

@@ -18,5 +18,6 @@ export default {
   signTransactionsFooterIdentityCopy: 'sign-transactions-footer-identity-copy mvx:text-primary',
   signTransactionsButtonTooltip: 'sign-transactions-button-tooltip mvx:absolute mvx:top-0 mvx:h-12 mvx:left-0 mvx:right-0',
   signTransactionsActionButton: 'sign-transactions-action-button mvx:text-base! mvx:w-full',
+  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',
   signTransactionsExplorerLinkIcon: 'sign-transactions-explorer-link-icon mvx:text-primary',
 } satisfies Record<string, string>;

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

@@ -60,6 +60,8 @@
             @apply mvx:relative mvx:z-1 mvx:cursor-pointer mvx:transition-all mvx:duration-200 mvx:rounded-full;
             @apply mvx:ease-in-out mvx:mr-2 mvx:min-w-4 mvx:max-w-4 mvx:h-4;
             border: 1px solid var(--mvx-text-color-primary);
+            appearance: none;
+            -webkit-appearance: none;
 
             &:after {
               @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

@@ -0,0 +1,118 @@
+import { h } from '@stencil/core';
+import type { Meta, StoryObj } from '@stencil/storybook-plugin';
+import type { IAddressTableData } from 'types/address-table.types';
+
+// prettier-ignore
+const styles = {
+  addressTableStoriesWrapper: 'address-table-stories-wrapper mvx:flex mvx:justify-center mvx:items-stretch mvx:h-[600px] mvx:bg-neutral-900',
+  addressTableStoriesContainer: 'address-table-stories-container mvx:w-full mvx:max-w-3xl mvx:p-6',
+} satisfies Record<string, string>;
+
+const exampleAccountScreenData: IAddressTableData = {
+  startIndex: 0,
+  addressesPerPage: 10,
+  isLoading: false,
+  accounts: [
+    {
+      address: 'erd1qyu5wthldzr8wx5c9ucg8kjagg0jfs53s8nr3zpz3hypefsdd8ssycr6th',
+      balance: '1.2345 EGLD',
+      usdValue: '$250.12',
+      index: 0,
+      shard: 0,
+    },
+    {
+      address: 'erd1qqqqqqqqqqqqqpgqzqvm5ywqqf524efwrhr039tjs29w0qltkklsa05pk7',
+      balance: '0.5000 EGLD',
+      usdValue: '$101.25',
+      index: 1,
+      shard: 1,
+    },
+    {
+      address: 'erd1qj8g8j9h0x0k9p7s0q3w4e5r6t7y8u9i0o1p2a3s4d5f6g7h8j9k0l1m2n3',
+      balance: '10.0000 EGLD',
+      usdValue: '$2,025.00',
+      index: 2,
+      shard: 2,
+    },
+    {
+      address: 'erd1k9p7s0q3w4e5r6t7y8u9i0o1p2a3s4d5f6g7h8j9k0l1m2n3q4r5s6t7u8v',
+      balance: '0.0100 EGLD',
+      usdValue: '$2.05',
+      index: 3,
+      shard: 0,
+    },
+    {
+      address: 'erd1x2c3v4b5n6m7a8s9d0f1g2h3j4k5l6z7x8c9v0b1n2m3a4s5d6f7g8h9j0',
+      balance: '5.6789 EGLD',
+      usdValue: '$1,150.45',
+      index: 4,
+      shard: 1,
+    },
+  ],
+};
+
+type AddressTableStoryArgs = {
+  accountScreenData: IAddressTableData;
+  selectedIndex: number;
+};
+
+const storySettings: Meta<AddressTableStoryArgs> = {
+  tags: ['autodocs'],
+  title: 'Components/AddressTable',
+  args: {
+    accountScreenData: exampleAccountScreenData,
+    selectedIndex: exampleAccountScreenData.accounts[0].index,
+  },
+  argTypes: {
+    accountScreenData: { control: 'object' },
+    selectedIndex: { control: { type: 'number', min: 0 } },
+  },
+};
+
+export const Default: StoryObj<AddressTableStoryArgs> = {
+  render: properties => (
+    <div class={styles.addressTableStoriesWrapper}>
+      <div class={styles.addressTableStoriesContainer}>
+        <mvx-address-table
+          data-account-screen-data={JSON.stringify(properties.accountScreenData ?? exampleAccountScreenData)}
+          selectedIndex={properties.selectedIndex}
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const PageChanging: StoryObj<AddressTableStoryArgs> = {
+  render: properties => (
+    <div class={styles.addressTableStoriesWrapper}>
+      <div class={styles.addressTableStoriesContainer}>
+        <mvx-address-table
+          data-account-screen-data={JSON.stringify({
+            ...exampleAccountScreenData,
+            isLoading: true,
+          })}
+          selectedIndex={properties.selectedIndex}
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const InitialLoadingIntro: StoryObj<AddressTableStoryArgs> = {
+  render: properties => (
+    <div class={styles.addressTableStoriesWrapper}>
+      <div class={styles.addressTableStoriesContainer}>
+        <mvx-address-table
+          data-account-screen-data={JSON.stringify({
+            ...exampleAccountScreenData,
+            accounts: [],
+            isLoading: true,
+          })}
+          selectedIndex={properties.selectedIndex}
+        />
+      </div>
+    </div>
+  ),
+};
+
+export default storySettings;

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

@@ -126,14 +126,17 @@ export class AddressTable {
           <div class={{ 'address-table-list': true, 'visible': !isPageChanging }}>
             {this.accountScreenData.accounts.map(accountDerivation => (
               <div
-                data-testid={`${DataTestIdsEnum.addressTableItem}-${accountDerivation.address}`}
+                data-testid={`${DataTestIdsEnum.check}_${accountDerivation.address}`}
                 onClick={this.handleSelectAccount(accountDerivation.index)}
                 class={{
                   'address-table-list-item': true,
                   'checked': accountDerivation.index === this.selectedIndex,
                 }}
               >
-                <div
+                <input
+                  type="radio"
+                  name="address-table-selection"
+                  checked={accountDerivation.index === this.selectedIndex}
                   class={{
                     'address-table-list-item-checkbox': true,
                     'checked': accountDerivation.index === this.selectedIndex,

src/constants/dataTestIds.enum.ts

@@ -1,7 +1,7 @@
 export enum DataTestIdsEnum {
   accessWalletBtn = 'accessWalletBtn',
   addressTableContainer = 'addressTableContainer',
-  addressTableItem = 'addressTableItem',
+  check = 'check',
   firstBtn = 'firstBtn',
   lastBtn = 'lastBtn',
   paginationItem = 'paginationItem',