Refactor components in transactions table

package.json

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

src/components.d.ts

@@ -335,11 +335,6 @@ export namespace Components {
         "description": string;
         "name"?: string;
     }
-    interface MvxTransactionAge {
-        "age": string;
-        "class"?: string;
-        "tooltip"?: string;
-    }
     interface MvxTransactionDirectionBadge {
         "class"?: string;
         "direction": string;
@@ -991,12 +986,6 @@ declare global {
         prototype: HTMLMvxTransactionAccountNameElement;
         new (): HTMLMvxTransactionAccountNameElement;
     };
-    interface HTMLMvxTransactionAgeElement extends Components.MvxTransactionAge, HTMLStencilElement {
-    }
-    var HTMLMvxTransactionAgeElement: {
-        prototype: HTMLMvxTransactionAgeElement;
-        new (): HTMLMvxTransactionAgeElement;
-    };
     interface HTMLMvxTransactionDirectionBadgeElement extends Components.MvxTransactionDirectionBadge, HTMLStencilElement {
     }
     var HTMLMvxTransactionDirectionBadgeElement: {
@@ -1258,7 +1247,6 @@ declare global {
         "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;
@@ -1598,11 +1586,6 @@ declare namespace LocalJSX {
         "description"?: string;
         "name"?: string;
     }
-    interface MvxTransactionAge {
-        "age"?: string;
-        "class"?: string;
-        "tooltip"?: string;
-    }
     interface MvxTransactionDirectionBadge {
         "class"?: string;
         "direction"?: string;
@@ -1813,7 +1796,6 @@ declare namespace LocalJSX {
         "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;
@@ -1896,7 +1878,6 @@ declare module "@stencil/core" {
             "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>;

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

@@ -0,0 +1,34 @@
+import { h } from '@stencil/core';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
+
+// prettier-ignore
+const styles = {
+    transactionAge: 'transaction-age mvx:w-max'
+} satisfies Record<string, string>;
+
+interface TransactionAgePropsType {
+    age: string;
+    class?: string;
+    tooltip?: string;
+}
+
+export function TransactionAge({ age, tooltip, class: className }: TransactionAgePropsType) {
+    const component = tooltip ? (
+        <div
+            title={tooltip}
+            data-testid={DataTestIdsEnum.transactionAge}
+            class={{ [styles.transactionAge]: true, [className]: Boolean(className) }}
+        >
+            {age}
+        </div>
+    ) : (
+        <div
+            data-testid={DataTestIdsEnum.transactionAge}
+            class={{ [styles.transactionAge]: true, [className]: Boolean(className) }}
+        >
+            {age}
+        </div>
+    );
+
+    return <div class={{ [className]: Boolean(className), [styles.transactionAge]: true }}>{component}</div>;
+}

src/components/controlled/transactions-table/TransactionAge/index.ts

@@ -0,0 +1 @@
+export * from './TransactionAge'

src/components/controlled/transactions-table/components/transaction-age/tests/transaction-age.spec.ts → src/components/controlled/transactions-table/TransactionAge/tests/transaction-age.spec.ts

@@ -1,7 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing';
+import { TransactionAge } from 'components/controlled/transactions-table/TransactionAge';
 import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 
-import { TransactionAge } from '../transaction-age';
 
 describe('TransactionAge', () => {
   it('renders with age prop', async () => {

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

@@ -3,6 +3,7 @@ import { Component, h, Prop } from '@stencil/core';
 import { DataTestIdsEnum } from '../../../constants/dataTestIds.enum';
 import type { TransactionRowType } from './transactions-table.type';
 import styles from './transactions-table.styles'
+import { TransactionAge } from './TransactionAge';
 
 const COLUMNS = ['Txn Hash', 'Age', 'Shard', 'From', 'To', 'Method', 'Value'];
 
@@ -33,11 +34,11 @@ export class TransactionsTable {
                 <mvx-transaction-hash class={styles.transactionsTableBodyCellChild} transaction={transaction}></mvx-transaction-hash>
               </td>
               <td class={styles.transactionsTableBodyCell}>
-                <mvx-transaction-age
+                <TransactionAge
                   class={styles.transactionsTableBodyCellChild}
                   age={transaction.age.timeAgo}
                   tooltip={transaction.age.tooltip}
-                ></mvx-transaction-age>
+                />
               </td>
               <td class={styles.transactionsTableBodyCell}>
                 <mvx-transaction-shards class={styles.transactionsTableBodyCellChild} transaction={transaction}></mvx-transaction-shards>