Updated transactions table props

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [Updated transactions table props](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/25)
+
 ## [[0.0.0-alpha.2](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/24)] - 2025-01-27
 
 - [Fixed generic modal event warning](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/23)

src/components.d.ts

@@ -151,7 +151,7 @@ export namespace Components {
         "wrapperId"?: string;
     }
     interface TransactionsTable {
-        "transactions": ITransactionsTableRow[];
+        "data": string;
     }
     interface WalletConnectModal {
         "data": IWalletConnectModalData;
@@ -583,7 +583,7 @@ declare namespace LocalJSX {
         "wrapperId"?: string;
     }
     interface TransactionsTable {
-        "transactions"?: ITransactionsTableRow[];
+        "data"?: string;
     }
     interface WalletConnectModal {
         "data"?: IWalletConnectModalData;

src/components/transactions-table/components/transaction-hash/tests/transaction-hash.spec.tsx

@@ -2,9 +2,9 @@ import { newSpecPage } from '@stencil/core/testing';
 import { h } from '@stencil/core';
 import { TransactionHash } from '../transaction-hash';
 import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
-import { ITransactionsTableRow } from '../../../transactions-table.type';
 import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
 import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
+import { ITransactionsTableRow } from '../../../transactions-table.type';
 
 describe('TransactionHash', () => {
   it('renders with transaction data', async () => {
@@ -31,15 +31,15 @@ describe('TransactionHash', () => {
         <mock:shadow-root>
           <div class="transactions-table-body-cell">
             <transaction-icon></transaction-icon>
-            <explorer-link datatestid="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/123" text="0x123456789abcdef"></explorer-link>
+            <explorer-link dataTestId="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/123" text="0x123456789abcdef"></explorer-link>
           </div>
         </mock:shadow-root>
       </transaction-hash>
     `);
   });
 
   it('updates when transaction prop changes', async () => {
-    const initialTransaction = {
+    const initialTransactionData: ITransactionsTableRow = {
       age: {
         timeAgo: '1h',
         tooltip: '1 hour ago',
@@ -54,21 +54,21 @@ describe('TransactionHash', () => {
 
     const page = await newSpecPage({
       components: [TransactionHash],
-      template: () => <transaction-hash transaction={initialTransaction}></transaction-hash>,
+      template: () => <transaction-hash transaction={initialTransactionData}></transaction-hash>,
     });
 
     expect(page.root).toEqualHtml(`
       <transaction-hash>
         <mock:shadow-root>
           <div class="transactions-table-body-cell">
             <transaction-icon></transaction-icon>
-            <explorer-link datatestid="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/initial" text="0xInitialHash"></explorer-link>
+            <explorer-link dataTestId="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/initial" text="0xInitialHash"></explorer-link>
           </div>
         </mock:shadow-root>
       </transaction-hash>
     `);
 
-    const updatedTransaction = {
+    const updatedTransactionData: ITransactionsTableRow = {
       age: {
         timeAgo: '1h',
         tooltip: '1 hour ago',
@@ -81,18 +81,31 @@ describe('TransactionHash', () => {
       txHash: '0xUpdatedHash',
     };
 
-    page.root.transaction = updatedTransaction;
+    page.root.transaction = updatedTransactionData;
     await page.waitForChanges();
 
     expect(page.root).toEqualHtml(`
       <transaction-hash>
         <mock:shadow-root>
           <div class="transactions-table-body-cell">
             <transaction-icon></transaction-icon>
-            <explorer-link datatestid="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/updated" text="0xUpdatedHash"></explorer-link>
+            <explorer-link dataTestId="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/updated" text="0xUpdatedHash"></explorer-link>
           </div>
         </mock:shadow-root>
       </transaction-hash>
     `);
   });
+
+  it('renders null when transaction is not provided', async () => {
+    const page = await newSpecPage({
+      components: [TransactionHash],
+      template: () => <transaction-hash></transaction-hash>,
+    });
+
+    expect(page.root).toEqualHtml(`
+      <transaction-hash>
+        <mock:shadow-root></mock:shadow-root>
+      </transaction-hash>
+    `);
+  });
 });

src/components/transactions-table/components/transaction-hash/transaction-hash.tsx

@@ -11,9 +11,13 @@ export class TransactionHash {
   @Prop() transaction: ITransactionsTableRow;
 
   render() {
+    if (!this.transaction) {
+      return null;
+    }
+
     return (
       <div class="transactions-table-body-cell">
-        <transaction-icon icon-info={this.transaction.iconInfo}></transaction-icon>
+        <transaction-icon iconInfo={this.transaction.iconInfo}></transaction-icon>
         <explorer-link dataTestId={DataTestIdsEnum.transactionLink} link={this.transaction.link} text={this.transaction.txHash}></explorer-link>
       </div>
     );

src/components/transactions-table/components/transaction-icon/transaction-icon.tsx

@@ -13,6 +13,10 @@ export class TransactionIcon {
   @Prop() iconInfo: ITransactionIconInfo;
 
   render() {
+    if (!this.iconInfo) {
+      return null;
+    }
+
     const iconHtml = getIconHtmlFromIconDefinition(this.iconInfo.icon);
 
     return (

src/components/transactions-table/readme.md

@@ -7,9 +7,9 @@
 
 ## Properties
 
-| Property       | Attribute | Description | Type                      | Default     |
-| -------------- | --------- | ----------- | ------------------------- | ----------- |
-| `transactions` | --        |             | `ITransactionsTableRow[]` | `undefined` |
+| Property | Attribute | Description | Type     | Default     |
+| -------- | --------- | ----------- | -------- | ----------- |
+| `data`   | `data`    |             | `string` | `undefined` |
 
 
 ## Dependencies

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

@@ -9,9 +9,11 @@ const COLUMNS = ['TxHash', 'Age', 'Shard', 'From', 'To', 'Method', 'Value'];
   shadow: true,
 })
 export class TransactionsTable {
-  @Prop() transactions: ITransactionsTableRow[];
+  @Prop() data: string;
 
   render() {
+    const transactions: ITransactionsTableRow[] = JSON.parse(this.data);
+
     return (
       <table class="transactions-table">
         <thead class="transactions-table-header">
@@ -24,7 +26,7 @@ export class TransactionsTable {
           </tr>
         </thead>
         <tbody class="transactions-table-body">
-          {this.transactions.map(transaction => (
+          {transactions.map(transaction => (
             <transaction-row key={transaction.txHash} transaction={transaction}></transaction-row>
           ))}
         </tbody>

src/utils/icons/getIconHtmlFromIconDefinition.ts

@@ -1,6 +1,10 @@
 import { library, icon, IconDefinition, Icon } from '@fortawesome/fontawesome-svg-core';
 
 export function getIconHtmlFromIconDefinition(iconDefinition: IconDefinition): string | null {
+  if (!iconDefinition) {
+    return null;
+  }
+
   let faIcon: Icon;
   library.add(iconDefinition);
   faIcon = icon(iconDefinition);