multiversx · razvantomegea · Feb 5, 2025 · Feb 4, 2025 · Feb 5, 2025 · Feb 5, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [Added transactions table styling](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/30)
 - [Added react output config](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/29)
 - [Added Trim and CopyButton components](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/28)
 - [Added transaction account](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/27)

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -109,10 +109,11 @@ export namespace Components {
         "showLockedAccounts": boolean;
     }
     interface TransactionAccountName {
+        "address": string;
         "class"?: string;
         "dataTestId"?: string;
         "description": string;
-        "name": string;
+        "name"?: string;
     }
     interface TransactionAge {
         "age": string;
@@ -136,10 +137,6 @@ export namespace Components {
         "class"?: string;
         "method": string;
     }
-    interface TransactionRow {
-        "class"?: string;
-        "transaction": ITransactionsTableRow;
-    }
     interface TransactionShards {
         "class"?: string;
         "transaction": ITransactionsTableRow;
@@ -406,12 +403,6 @@ declare global {
         prototype: HTMLTransactionMethodElement;
         new (): HTMLTransactionMethodElement;
     };
-    interface HTMLTransactionRowElement extends Components.TransactionRow, HTMLStencilElement {
-    }
-    var HTMLTransactionRowElement: {
-        prototype: HTMLTransactionRowElement;
-        new (): HTMLTransactionRowElement;
-    };
     interface HTMLTransactionShardsElement extends Components.TransactionShards, HTMLStencilElement {
     }
     var HTMLTransactionShardsElement: {
@@ -525,7 +516,6 @@ declare global {
         "transaction-hash": HTMLTransactionHashElement;
         "transaction-icon": HTMLTransactionIconElement;
         "transaction-method": HTMLTransactionMethodElement;
-        "transaction-row": HTMLTransactionRowElement;
         "transaction-shards": HTMLTransactionShardsElement;
         "transaction-toast": HTMLTransactionToastElement;
         "transaction-toast-content": HTMLTransactionToastContentElement;
@@ -621,6 +611,7 @@ declare namespace LocalJSX {
         "showLockedAccounts"?: boolean;
     }
     interface TransactionAccountName {
+        "address"?: string;
         "class"?: string;
         "dataTestId"?: string;
         "description"?: string;
@@ -648,10 +639,6 @@ declare namespace LocalJSX {
         "class"?: string;
         "method"?: string;
     }
-    interface TransactionRow {
-        "class"?: string;
-        "transaction"?: ITransactionsTableRow;
-    }
     interface TransactionShards {
         "class"?: string;
         "transaction"?: ITransactionsTableRow;
@@ -730,7 +717,6 @@ declare namespace LocalJSX {
         "transaction-hash": TransactionHash;
         "transaction-icon": TransactionIcon;
         "transaction-method": TransactionMethod;
-        "transaction-row": TransactionRow;
         "transaction-shards": TransactionShards;
         "transaction-toast": TransactionToast;
         "transaction-toast-content": TransactionToastContent;
@@ -772,7 +758,6 @@ declare module "@stencil/core" {
             "transaction-hash": LocalJSX.TransactionHash & JSXBase.HTMLAttributes<HTMLTransactionHashElement>;
             "transaction-icon": LocalJSX.TransactionIcon & JSXBase.HTMLAttributes<HTMLTransactionIconElement>;
             "transaction-method": LocalJSX.TransactionMethod & JSXBase.HTMLAttributes<HTMLTransactionMethodElement>;
-            "transaction-row": LocalJSX.TransactionRow & JSXBase.HTMLAttributes<HTMLTransactionRowElement>;
             "transaction-shards": LocalJSX.TransactionShards & JSXBase.HTMLAttributes<HTMLTransactionShardsElement>;
             "transaction-toast": LocalJSX.TransactionToast & JSXBase.HTMLAttributes<HTMLTransactionToastElement>;
             "transaction-toast-content": LocalJSX.TransactionToastContent & JSXBase.HTMLAttributes<HTMLTransactionToastContentElement>;

diff --git a/src/components/copy-button/copy-button.tsx b/src/components/copy-button/copy-button.tsx
@@ -1,14 +1,15 @@
 import { Component, Prop, h, State } from '@stencil/core';
 import { faCheck, faCopy, IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { copyToClipboard } from 'utils/copyToClipboard';
+import classNames from 'classnames';
 
 @Component({
   tag: 'copy-button',
   styleUrl: 'copy-button.css',
   shadow: true,
 })
 export class CopyButton {
-  @Prop() class?: string = 'copy-button';
+  @Prop() class?: string;
   @Prop() copyIcon: IconDefinition = faCopy;
   @Prop() successIcon: IconDefinition = faCheck;
   @Prop() text: string;
@@ -43,7 +44,7 @@ export class CopyButton {
 
   render() {
     return (
-      <a href="/#" class={this.class} onClick={this.handleClick}>
+      <a href="/#" class={classNames(this.class, 'copy-button')} onClick={this.handleClick}>
         <fa-icon icon={this.isSuccess ? this.successIcon : this.copyIcon}></fa-icon>
       </a>
     );

diff --git a/src/components/copy-button/readme.md b/src/components/copy-button/readme.md
@@ -7,12 +7,12 @@
 
 ## Properties
 
-| Property      | Attribute | Description | Type             | Default         |
-| ------------- | --------- | ----------- | ---------------- | --------------- |
-| `class`       | `class`   |             | `string`         | `'copy-button'` |
-| `copyIcon`    | --        |             | `IconDefinition` | `faCopy`        |
-| `successIcon` | --        |             | `IconDefinition` | `faCheck`       |
-| `text`        | `text`    |             | `string`         | `undefined`     |
+| Property      | Attribute | Description | Type             | Default     |
+| ------------- | --------- | ----------- | ---------------- | ----------- |
+| `class`       | `class`   |             | `string`         | `undefined` |
+| `copyIcon`    | --        |             | `IconDefinition` | `faCopy`    |
+| `successIcon` | --        |             | `IconDefinition` | `faCheck`   |
+| `text`        | `text`    |             | `string`         | `undefined` |
 
 
 ## Dependencies

diff --git a/src/components/explorer-link/explorer-link.css b/src/components/explorer-link/explorer-link.css
@@ -0,0 +1,3 @@
+.explorer-link {
+  text-decoration: none;
+}
diff --git a/src/components/explorer-link/explorer-link.tsx b/src/components/explorer-link/explorer-link.tsx
@@ -1,14 +1,14 @@
 import { Component, Prop, h, Element, State } from '@stencil/core';
-import { getIconHtmlFromIconDefinition } from 'utils/icons/getIconHtmlFromIconDefinition';
 import { IconDefinition, faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import classNames from 'classnames';
 
 @Component({
   tag: 'explorer-link',
   styleUrl: 'explorer-link.css',
   shadow: true,
 })
 export class ExplorerLink {
-  @Prop() class: string = 'explorer-link';
+  @Prop() class: string;
   @Prop() dataTestId?: string;
   @Prop() icon?: IconDefinition;
   @Prop() link: string;
@@ -22,11 +22,9 @@ export class ExplorerLink {
   }
 
   render() {
-    const icon = getIconHtmlFromIconDefinition(this.icon ?? faArrowUpRightFromSquare);
-
     return (
-      <a data-testid={this.dataTestId} href={this.link} target="_blank" class={this.class} rel="noreferrer">
-        {this.hasSlotContent ? <slot name="content"></slot> : this.text ?? <span innerHTML={icon}></span>}
+      <a data-testid={this.dataTestId} href={this.link} target="_blank" class={classNames(this.class, 'explorer-link')} rel="noreferrer">
+        {this.hasSlotContent ? <slot name="content"></slot> : this.text ?? <fa-icon icon={this.icon ?? faArrowUpRightFromSquare}></fa-icon>}
       </a>
     );
   }

diff --git a/src/components/explorer-link/readme.md b/src/components/explorer-link/readme.md
@@ -7,13 +7,13 @@
 
 ## Properties
 
-| Property     | Attribute      | Description | Type             | Default           |
-| ------------ | -------------- | ----------- | ---------------- | ----------------- |
-| `class`      | `class`        |             | `string`         | `'explorer-link'` |
-| `dataTestId` | `data-test-id` |             | `string`         | `undefined`       |
-| `icon`       | --             |             | `IconDefinition` | `undefined`       |
-| `link`       | `link`         |             | `string`         | `undefined`       |
-| `text`       | `text`         |             | `string`         | `undefined`       |
+| Property     | Attribute      | Description | Type             | Default     |
+| ------------ | -------------- | ----------- | ---------------- | ----------- |
+| `class`      | `class`        |             | `string`         | `undefined` |
+| `dataTestId` | `data-test-id` |             | `string`         | `undefined` |
+| `icon`       | --             |             | `IconDefinition` | `undefined` |
+| `link`       | `link`         |             | `string`         | `undefined` |
+| `text`       | `text`         |             | `string`         | `undefined` |
 
 
 ## Dependencies
@@ -25,9 +25,14 @@
  - [transaction-shards](../transactions-table/components/transaction-shards)
  - [transaction-value](../transactions-table/components/transaction-value)
 
+### Depends on
+
+- [fa-icon](../fa-icon)
+
 ### Graph
 ```mermaid
 graph TD;
+  explorer-link --> fa-icon
   transaction-account --> explorer-link
   transaction-hash --> explorer-link
   transaction-shards --> explorer-link

diff --git a/src/components/explorer-link/tests/explorer-link.spec.ts b/src/components/explorer-link/tests/explorer-link.spec.ts
@@ -1,7 +1,6 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { ExplorerLink } from '../explorer-link';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
-import * as iconUtils from 'utils/icons/getIconHtmlFromIconDefinition';
 
 describe('ExplorerLink', () => {
   it('renders with default props', async () => {
@@ -13,9 +12,7 @@ describe('ExplorerLink', () => {
       <explorer-link link="https://example.com">
         <mock:shadow-root>
           <a href="https://example.com" target="_blank" class="explorer-link" rel="noreferrer">
-            <span>
-              <svg aria-hidden="true" class="fa-arrow-up-right-from-square svg-inline--fa" data-icon="arrow-up-right-from-square" data-prefix="fas" focusable="false" role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z" fill="currentColor"></path></svg>
-            </span>
+            <fa-icon></fa-icon>
           </a>
         </mock:shadow-root>
       </explorer-link>
@@ -46,20 +43,15 @@ describe('ExplorerLink', () => {
     expect(page.root).toEqualHtml(`
       <explorer-link link="https://example.com" class="custom-class">
         <mock:shadow-root>
-          <a href="https://example.com" target="_blank" class="custom-class" rel="noreferrer">
-            <span>
-              <svg aria-hidden="true" class="fa-arrow-up-right-from-square svg-inline--fa" data-icon="arrow-up-right-from-square" data-prefix="fas" focusable="false" role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z" fill="currentColor"></path></svg>
-            </span>
+          <a href="https://example.com" target="_blank" class="custom-class explorer-link" rel="noreferrer">
+            <fa-icon></fa-icon>
           </a>
         </mock:shadow-root>
       </explorer-link>
     `);
   });
 
   it('renders with custom icon', async () => {
-    const mockIconHtml = '<i class="fa-check"></i>';
-    jest.spyOn(iconUtils, 'getIconHtmlFromIconDefinition').mockReturnValue(mockIconHtml);
-
     const page = await newSpecPage({
       components: [ExplorerLink],
       html: '<explorer-link link="https://example.com"></explorer-link>',
@@ -72,7 +64,7 @@ describe('ExplorerLink', () => {
       <explorer-link link="https://example.com">
         <mock:shadow-root>
           <a href="https://example.com" target="_blank" class="explorer-link" rel="noreferrer">
-            <span>${mockIconHtml}</span>
+            <fa-icon></fa-icon>
           </a>
         </mock:shadow-root>
       </explorer-link>

diff --git a/src/components/fa-icon/fa-icon.css b/src/components/fa-icon/fa-icon.css
@@ -0,0 +1,6 @@
+.fa-icon .svg-inline--fa {
+  align-items: center;
+  display: flex;
+  height: 1rem;
+  justify-content: center;
+}
diff --git a/src/components/fa-icon/fa-icon.tsx b/src/components/fa-icon/fa-icon.tsx
@@ -1,13 +1,15 @@
 import { Component, Prop, h } from '@stencil/core';
 import { getIconHtmlFromIconDefinition } from 'utils/icons/getIconHtmlFromIconDefinition';
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import classNames from 'classnames';
 
 @Component({
   tag: 'fa-icon',
+  styleUrl: 'fa-icon.css',
   shadow: true,
 })
 export class FaIcon {
-  @Prop() class?: string = 'fa-icon';
+  @Prop() class?: string;
   @Prop() icon: IconDefinition;
   @Prop() description?: string;
 
@@ -18,6 +20,6 @@ export class FaIcon {
 
     const iconHtml = getIconHtmlFromIconDefinition(this.icon);
 
-    return <i class={this.class} innerHTML={iconHtml} title={this.description}></i>;
+    return <i class={classNames(this.class, 'fa-icon')} innerHTML={iconHtml} title={this.description}></i>;
   }
 }
diff --git a/src/components/fa-icon/readme.md b/src/components/fa-icon/readme.md
@@ -9,7 +9,7 @@
 
 | Property      | Attribute     | Description | Type             | Default     |
 | ------------- | ------------- | ----------- | ---------------- | ----------- |
-| `class`       | `class`       |             | `string`         | `'fa-icon'` |
+| `class`       | `class`       |             | `string`         | `undefined` |
 | `description` | `description` |             | `string`         | `undefined` |
 | `icon`        | --            |             | `IconDefinition` | `undefined` |
 
@@ -19,6 +19,7 @@
 ### Used by
 
  - [copy-button](../copy-button)
+ - [explorer-link](../explorer-link)
  - [transaction-account](../transactions-table/components/transaction-account)
  - [transaction-icon](../transactions-table/components/transaction-icon)
  - [transaction-value](../transactions-table/components/transaction-value)
@@ -27,6 +28,7 @@
 ```mermaid
 graph TD;
   copy-button --> fa-icon
+  explorer-link --> fa-icon
   transaction-account --> fa-icon
   transaction-icon --> fa-icon
   transaction-value --> fa-icon

diff --git a/src/components/format-amount/format-amount.css b/src/components/format-amount/format-amount.css
@@ -1,3 +1,7 @@
+.format-amount {
+  align-items: center;
+}
+
 .int-amount {
   color: inherit;
 }
@@ -8,4 +12,5 @@
 
 .symbol {
   color: inherit;
+  margin-left: 0.25rem;
 }
diff --git a/src/components/format-amount/format-amount.tsx b/src/components/format-amount/format-amount.tsx
@@ -1,5 +1,6 @@
 import { Component, Prop, h } from '@stencil/core';
 import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
+import classNames from 'classnames';
 
 @Component({
   tag: 'format-amount',
@@ -31,7 +32,7 @@ export class FormatAmount {
 
   private renderValid() {
     return (
-      <span data-testid={this.dataTestId} class={this.class}>
+      <span data-testid={this.dataTestId} class={classNames(this.class, 'format-amount')}>
         <span class="int-amount" data-testid={DataTestIdsEnum.formatAmountInt}>
           {this.valueInteger}
         </span>

diff --git a/...le/components/transaction-account/components/transaction-account-name/readme.md b/...le/components/transaction-account/components/transaction-account-name/readme.md
@@ -7,12 +7,13 @@
 
 ## Properties
 
-| Property      | Attribute      | Description | Type     | Default                      |
-| ------------- | -------------- | ----------- | -------- | ---------------------------- |
-| `class`       | `class`        |             | `string` | `'transaction-account-name'` |
-| `dataTestId`  | `data-test-id` |             | `string` | `undefined`                  |
-| `description` | `description`  |             | `string` | `undefined`                  |
-| `name`        | `name`         |             | `string` | `undefined`                  |
+| Property      | Attribute      | Description | Type     | Default     |
+| ------------- | -------------- | ----------- | -------- | ----------- |
+| `address`     | `address`      |             | `string` | `undefined` |
+| `class`       | `class`        |             | `string` | `undefined` |
+| `dataTestId`  | `data-test-id` |             | `string` | `undefined` |
+| `description` | `description`  |             | `string` | `undefined` |
+| `name`        | `name`         |             | `string` | `undefined` |
 
 
 ## Dependencies