Refactor components in transactions table

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [Added the Storybook as a live server deployment](https://github.com/multiversx/mx-sdk-dapp-ui/pull/248)
 
+- [Refactor components in transactions table](https://github.com/multiversx/mx-sdk-dapp-ui/pull/243)
+
 ## [[0.0.35](https://github.com/multiversx/mx-sdk-dapp-ui/pull/246)] - 2025-10-10
 
 - [Added passkey provider](https://github.com/multiversx/mx-sdk-dapp-ui/pull/242)

package.json

@@ -132,4 +132,4 @@
     "typescript": "^5.7.3",
     "vite": "^7.0.6"
   }
-}
+}

src/common/Icon/icon.types.ts

@@ -25,7 +25,6 @@ export enum IconNameEnum {
   circleInfo = 'circle-info',
   coins = 'coins',
   arrowsRotate = 'arrows-rotate'
-
 }
 
 export type IconPropsType = JSXBase.IntrinsicElements['svg'] & {

src/components.d.ts

@@ -11,12 +11,11 @@ import { CustomToastType, IComponentToast, ISimpleToast } from "./components/fun
 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 { TransactionAccountType, TransactionIconInfoType, TransactionRowType } from "./components/controlled/transactions-table/transactions-table.type";
 import { ITransactionListItem } from "./components/visual/transaction-list-item/transaction-list-item.types";
 import { LocalJSX as JSX } from "@stencil/core";
 import { ITransactionListItem as ITransactionListItem1 } from "./components/visual/transaction-list-item/transaction-list-item.types";
 import { IToastDataState, ITransactionProgressState } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type";
-import { TransactionValueType } from "./components/controlled/transactions-table/transactions-table.type";
+import { TransactionRowType } from "./components/controlled/transactions-table/transactions-table.type";
 import { IProviderBase, ProviderTypeEnum } from "./types/provider.types";
 import { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from "./components.d";
 export { IAddressTableData } from "./types/address-table.types";
@@ -25,12 +24,11 @@ export { CustomToastType, IComponentToast, ISimpleToast } from "./components/fun
 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 { TransactionAccountType, TransactionIconInfoType, TransactionRowType } from "./components/controlled/transactions-table/transactions-table.type";
 export { ITransactionListItem } from "./components/visual/transaction-list-item/transaction-list-item.types";
 export { LocalJSX as JSX } from "@stencil/core";
 export { ITransactionListItem as ITransactionListItem1 } from "./components/visual/transaction-list-item/transaction-list-item.types";
 export { IToastDataState, ITransactionProgressState } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type";
-export { TransactionValueType } from "./components/controlled/transactions-table/transactions-table.type";
+export { TransactionRowType } from "./components/controlled/transactions-table/transactions-table.type";
 export { IProviderBase, ProviderTypeEnum } from "./types/provider.types";
 export { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from "./components.d";
 export namespace Components {
@@ -321,52 +319,9 @@ export namespace Components {
          */
         "triggerOnClick"?: boolean;
     }
-    interface MvxTransactionAccount {
-        "account": TransactionAccountType;
-        "class"?: string;
-        "dataTestId"?: string;
-        "scope": 'receiver' | 'sender';
-        /**
-          * @default false
-         */
-        "showLockedAccounts": boolean;
-    }
-    interface MvxTransactionAccountName {
-        "address": string;
-        "class"?: string;
-        "dataTestId"?: string;
-        "description": string;
-        "name"?: string;
-    }
-    interface MvxTransactionAge {
-        "age": string;
-        "class"?: string;
-        "tooltip"?: string;
-    }
-    interface MvxTransactionDirectionBadge {
-        "class"?: string;
-        "direction": string;
-    }
-    interface MvxTransactionHash {
-        "class"?: string;
-        "transaction": TransactionRowType;
-    }
-    interface MvxTransactionIcon {
-        "class"?: string;
-        "iconInfo": TransactionIconInfoType;
-    }
     interface MvxTransactionListItem {
         "transaction": ITransactionListItem;
     }
-    interface MvxTransactionMethod {
-        "actionDescription": string;
-        "class"?: string;
-        "method": string;
-    }
-    interface MvxTransactionShards {
-        "class"?: string;
-        "transaction": TransactionRowType;
-    }
     interface MvxTransactionToast {
         "fullWidth"?: boolean;
         /**
@@ -415,10 +370,6 @@ export namespace Components {
         "isStatusPending"?: boolean;
         "startTime"?: number;
     }
-    interface MvxTransactionValue {
-        "class"?: string;
-        "value": TransactionValueType;
-    }
     interface MvxTransactionsTable {
         "class"?: string;
         "transactions": TransactionRowType[];
@@ -988,60 +939,12 @@ declare global {
         prototype: HTMLMvxTooltipElement;
         new (): HTMLMvxTooltipElement;
     };
-    interface HTMLMvxTransactionAccountElement extends Components.MvxTransactionAccount, HTMLStencilElement {
-    }
-    var HTMLMvxTransactionAccountElement: {
-        prototype: HTMLMvxTransactionAccountElement;
-        new (): HTMLMvxTransactionAccountElement;
-    };
-    interface HTMLMvxTransactionAccountNameElement extends Components.MvxTransactionAccountName, HTMLStencilElement {
-    }
-    var HTMLMvxTransactionAccountNameElement: {
-        prototype: HTMLMvxTransactionAccountNameElement;
-        new (): HTMLMvxTransactionAccountNameElement;
-    };
-    interface HTMLMvxTransactionAgeElement extends Components.MvxTransactionAge, HTMLStencilElement {
-    }
-    var HTMLMvxTransactionAgeElement: {
-        prototype: HTMLMvxTransactionAgeElement;
-        new (): HTMLMvxTransactionAgeElement;
-    };
-    interface HTMLMvxTransactionDirectionBadgeElement extends Components.MvxTransactionDirectionBadge, HTMLStencilElement {
-    }
-    var HTMLMvxTransactionDirectionBadgeElement: {
-        prototype: HTMLMvxTransactionDirectionBadgeElement;
-        new (): HTMLMvxTransactionDirectionBadgeElement;
-    };
-    interface HTMLMvxTransactionHashElement extends Components.MvxTransactionHash, HTMLStencilElement {
-    }
-    var HTMLMvxTransactionHashElement: {
-        prototype: HTMLMvxTransactionHashElement;
-        new (): HTMLMvxTransactionHashElement;
-    };
-    interface HTMLMvxTransactionIconElement extends Components.MvxTransactionIcon, HTMLStencilElement {
-    }
-    var HTMLMvxTransactionIconElement: {
-        prototype: HTMLMvxTransactionIconElement;
-        new (): HTMLMvxTransactionIconElement;
-    };
     interface HTMLMvxTransactionListItemElement extends Components.MvxTransactionListItem, HTMLStencilElement {
     }
     var HTMLMvxTransactionListItemElement: {
         prototype: HTMLMvxTransactionListItemElement;
         new (): HTMLMvxTransactionListItemElement;
     };
-    interface HTMLMvxTransactionMethodElement extends Components.MvxTransactionMethod, HTMLStencilElement {
-    }
-    var HTMLMvxTransactionMethodElement: {
-        prototype: HTMLMvxTransactionMethodElement;
-        new (): HTMLMvxTransactionMethodElement;
-    };
-    interface HTMLMvxTransactionShardsElement extends Components.MvxTransactionShards, HTMLStencilElement {
-    }
-    var HTMLMvxTransactionShardsElement: {
-        prototype: HTMLMvxTransactionShardsElement;
-        new (): HTMLMvxTransactionShardsElement;
-    };
     interface HTMLMvxTransactionToastElementEventMap {
         "deleteToast": void;
     }
@@ -1094,12 +997,6 @@ declare global {
         prototype: HTMLMvxTransactionToastProgressElement;
         new (): HTMLMvxTransactionToastProgressElement;
     };
-    interface HTMLMvxTransactionValueElement extends Components.MvxTransactionValue, HTMLStencilElement {
-    }
-    var HTMLMvxTransactionValueElement: {
-        prototype: HTMLMvxTransactionValueElement;
-        new (): HTMLMvxTransactionValueElement;
-    };
     interface HTMLMvxTransactionsTableElement extends Components.MvxTransactionsTable, HTMLStencilElement {
     }
     var HTMLMvxTransactionsTableElement: {
@@ -1266,21 +1163,12 @@ declare global {
         "mvx-spinner-icon": HTMLMvxSpinnerIconElement;
         "mvx-toast-list": HTMLMvxToastListElement;
         "mvx-tooltip": HTMLMvxTooltipElement;
-        "mvx-transaction-account": HTMLMvxTransactionAccountElement;
-        "mvx-transaction-account-name": HTMLMvxTransactionAccountNameElement;
-        "mvx-transaction-age": HTMLMvxTransactionAgeElement;
-        "mvx-transaction-direction-badge": HTMLMvxTransactionDirectionBadgeElement;
-        "mvx-transaction-hash": HTMLMvxTransactionHashElement;
-        "mvx-transaction-icon": HTMLMvxTransactionIconElement;
         "mvx-transaction-list-item": HTMLMvxTransactionListItemElement;
-        "mvx-transaction-method": HTMLMvxTransactionMethodElement;
-        "mvx-transaction-shards": HTMLMvxTransactionShardsElement;
         "mvx-transaction-toast": HTMLMvxTransactionToastElement;
         "mvx-transaction-toast-content": HTMLMvxTransactionToastContentElement;
         "mvx-transaction-toast-details": HTMLMvxTransactionToastDetailsElement;
         "mvx-transaction-toast-details-body": HTMLMvxTransactionToastDetailsBodyElement;
         "mvx-transaction-toast-progress": HTMLMvxTransactionToastProgressElement;
-        "mvx-transaction-value": HTMLMvxTransactionValueElement;
         "mvx-transactions-table": HTMLMvxTransactionsTableElement;
         "mvx-trim": HTMLMvxTrimElement;
         "mvx-unlock-button": HTMLMvxUnlockButtonElement;
@@ -1594,52 +1482,9 @@ declare namespace LocalJSX {
          */
         "triggerOnClick"?: boolean;
     }
-    interface MvxTransactionAccount {
-        "account"?: TransactionAccountType;
-        "class"?: string;
-        "dataTestId"?: string;
-        "scope"?: 'receiver' | 'sender';
-        /**
-          * @default false
-         */
-        "showLockedAccounts"?: boolean;
-    }
-    interface MvxTransactionAccountName {
-        "address"?: string;
-        "class"?: string;
-        "dataTestId"?: string;
-        "description"?: string;
-        "name"?: string;
-    }
-    interface MvxTransactionAge {
-        "age"?: string;
-        "class"?: string;
-        "tooltip"?: string;
-    }
-    interface MvxTransactionDirectionBadge {
-        "class"?: string;
-        "direction"?: string;
-    }
-    interface MvxTransactionHash {
-        "class"?: string;
-        "transaction"?: TransactionRowType;
-    }
-    interface MvxTransactionIcon {
-        "class"?: string;
-        "iconInfo"?: TransactionIconInfoType;
-    }
     interface MvxTransactionListItem {
         "transaction"?: ITransactionListItem;
     }
-    interface MvxTransactionMethod {
-        "actionDescription"?: string;
-        "class"?: string;
-        "method"?: string;
-    }
-    interface MvxTransactionShards {
-        "class"?: string;
-        "transaction"?: TransactionRowType;
-    }
     interface MvxTransactionToast {
         "fullWidth"?: boolean;
         "onDeleteToast"?: (event: MvxTransactionToastCustomEvent<void>) => void;
@@ -1690,10 +1535,6 @@ declare namespace LocalJSX {
         "isStatusPending"?: boolean;
         "startTime"?: number;
     }
-    interface MvxTransactionValue {
-        "class"?: string;
-        "value"?: TransactionValueType;
-    }
     interface MvxTransactionsTable {
         "class"?: string;
         "transactions"?: TransactionRowType[];
@@ -1825,21 +1666,12 @@ declare namespace LocalJSX {
         "mvx-spinner-icon": MvxSpinnerIcon;
         "mvx-toast-list": MvxToastList;
         "mvx-tooltip": MvxTooltip;
-        "mvx-transaction-account": MvxTransactionAccount;
-        "mvx-transaction-account-name": MvxTransactionAccountName;
-        "mvx-transaction-age": MvxTransactionAge;
-        "mvx-transaction-direction-badge": MvxTransactionDirectionBadge;
-        "mvx-transaction-hash": MvxTransactionHash;
-        "mvx-transaction-icon": MvxTransactionIcon;
         "mvx-transaction-list-item": MvxTransactionListItem;
-        "mvx-transaction-method": MvxTransactionMethod;
-        "mvx-transaction-shards": MvxTransactionShards;
         "mvx-transaction-toast": MvxTransactionToast;
         "mvx-transaction-toast-content": MvxTransactionToastContent;
         "mvx-transaction-toast-details": MvxTransactionToastDetails;
         "mvx-transaction-toast-details-body": MvxTransactionToastDetailsBody;
         "mvx-transaction-toast-progress": MvxTransactionToastProgress;
-        "mvx-transaction-value": MvxTransactionValue;
         "mvx-transactions-table": MvxTransactionsTable;
         "mvx-trim": MvxTrim;
         "mvx-unlock-button": MvxUnlockButton;
@@ -1909,21 +1741,12 @@ declare module "@stencil/core" {
             "mvx-spinner-icon": LocalJSX.MvxSpinnerIcon & JSXBase.HTMLAttributes<HTMLMvxSpinnerIconElement>;
             "mvx-toast-list": LocalJSX.MvxToastList & JSXBase.HTMLAttributes<HTMLMvxToastListElement>;
             "mvx-tooltip": LocalJSX.MvxTooltip & JSXBase.HTMLAttributes<HTMLMvxTooltipElement>;
-            "mvx-transaction-account": LocalJSX.MvxTransactionAccount & JSXBase.HTMLAttributes<HTMLMvxTransactionAccountElement>;
-            "mvx-transaction-account-name": LocalJSX.MvxTransactionAccountName & JSXBase.HTMLAttributes<HTMLMvxTransactionAccountNameElement>;
-            "mvx-transaction-age": LocalJSX.MvxTransactionAge & JSXBase.HTMLAttributes<HTMLMvxTransactionAgeElement>;
-            "mvx-transaction-direction-badge": LocalJSX.MvxTransactionDirectionBadge & JSXBase.HTMLAttributes<HTMLMvxTransactionDirectionBadgeElement>;
-            "mvx-transaction-hash": LocalJSX.MvxTransactionHash & JSXBase.HTMLAttributes<HTMLMvxTransactionHashElement>;
-            "mvx-transaction-icon": LocalJSX.MvxTransactionIcon & JSXBase.HTMLAttributes<HTMLMvxTransactionIconElement>;
             "mvx-transaction-list-item": LocalJSX.MvxTransactionListItem & JSXBase.HTMLAttributes<HTMLMvxTransactionListItemElement>;
-            "mvx-transaction-method": LocalJSX.MvxTransactionMethod & JSXBase.HTMLAttributes<HTMLMvxTransactionMethodElement>;
-            "mvx-transaction-shards": LocalJSX.MvxTransactionShards & JSXBase.HTMLAttributes<HTMLMvxTransactionShardsElement>;
             "mvx-transaction-toast": LocalJSX.MvxTransactionToast & JSXBase.HTMLAttributes<HTMLMvxTransactionToastElement>;
             "mvx-transaction-toast-content": LocalJSX.MvxTransactionToastContent & JSXBase.HTMLAttributes<HTMLMvxTransactionToastContentElement>;
             "mvx-transaction-toast-details": LocalJSX.MvxTransactionToastDetails & JSXBase.HTMLAttributes<HTMLMvxTransactionToastDetailsElement>;
             "mvx-transaction-toast-details-body": LocalJSX.MvxTransactionToastDetailsBody & JSXBase.HTMLAttributes<HTMLMvxTransactionToastDetailsBodyElement>;
             "mvx-transaction-toast-progress": LocalJSX.MvxTransactionToastProgress & JSXBase.HTMLAttributes<HTMLMvxTransactionToastProgressElement>;
-            "mvx-transaction-value": LocalJSX.MvxTransactionValue & JSXBase.HTMLAttributes<HTMLMvxTransactionValueElement>;
             "mvx-transactions-table": LocalJSX.MvxTransactionsTable & JSXBase.HTMLAttributes<HTMLMvxTransactionsTableElement>;
             "mvx-trim": LocalJSX.MvxTrim & JSXBase.HTMLAttributes<HTMLMvxTrimElement>;
             "mvx-unlock-button": LocalJSX.MvxUnlockButton & JSXBase.HTMLAttributes<HTMLMvxUnlockButtonElement>;

src/components/controlled/transactions-table/components/TransactionAccount/TransactionAccount.tsx

@@ -0,0 +1,52 @@
+import { h } from '@stencil/core';
+import { Icon } from 'common/Icon';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
+
+import type { TransactionAccountType } from '../../transactions-table.type';
+import { TransactionAccountName } from './components';
+
+// prettier-ignore
+const styles = {
+    transactionAccount: 'transaction-account mvx:flex mvx:items-center mvx:gap-2',
+    transactionAccountExplorerLink: 'transaction-account-explorer-link mvx:text-primary!'
+} satisfies Record<string, string>;
+
+interface TransactionAccountPropsType {
+    account: TransactionAccountType;
+    class?: string;
+    dataTestId?: string;
+    scope: 'receiver' | 'sender';
+    showLockedAccounts: boolean;
+}
+
+export function TransactionAccount({ account, dataTestId, scope, showLockedAccounts = false, class: className }: TransactionAccountPropsType) {
+    const explorerLinkDataTestId =
+        scope === 'receiver' ? DataTestIdsEnum.receiverLink : DataTestIdsEnum.senderLink;
+
+    return (
+        <div
+            data-testid={dataTestId}
+            class={{ [styles.transactionAccount]: true, [className]: Boolean(className) }}
+        >
+            {showLockedAccounts && account.isTokenLocked && <Icon name="lock" />}
+            {account.isContract && <Icon name="contract" />}
+
+            {account.showLink ? (
+                <mvx-explorer-link
+                    link={account.link}
+                    data-testid={explorerLinkDataTestId}
+                    class={styles.transactionAccountExplorerLink}
+                >
+                    <span>{account.address}</span>
+                </mvx-explorer-link>
+            ) : (
+                <TransactionAccountName
+                    name={account.name}
+                    description={account.description}
+                    address={account.address}
+                />
+            )}
+        </div>
+    );
+}
+