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/eslint.config.mjs b/eslint.config.mjs
@@ -1,106 +1,24 @@
-import globals from 'globals';
-import pluginJs from '@eslint/js';
-import tseslint from 'typescript-eslint';
-import importPlugin from 'eslint-plugin-import';
-import prettierPlugin from 'eslint-plugin-prettier';
-import jestPlugin from 'eslint-plugin-jest';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import typescriptParser from '@typescript-eslint/parser';
+import typescriptPlugin from '@typescript-eslint/eslint-plugin';
 
-/** @type {import('eslint').Linter.Config[]} */
 export default [
   {
-    files: ['**/*.{js,mjs,cjs,ts,tsx}', '**/*.{test,spec}.{js,ts,tsx}'],
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-        ...globals.jest
-      },
-      parser: tseslint.parser,
-      parserOptions: {
-        ecmaVersion: 2021,
-        sourceType: 'module',
-        ecmaFeatures: {
-          jsx: true
-        },
-        project: './tsconfig.json'
-      }
-    },
+    files: ['src/**/*.{ts,tsx}'],
     plugins: {
-      import: importPlugin,
-      prettier: prettierPlugin,
-      jest: jestPlugin,
-      '@typescript-eslint': tseslint.plugin
-    },
-    settings: {
-      'import/parsers': {
-        '@typescript-eslint/parser': ['.ts', '.tsx']
-      },
-      'import/resolver': {
-        node: {
-          extensions: ['.js', '.jsx', '.ts', '.tsx'],
-          moduleDirectory: ['node_modules', 'src/']
-        },
-        typescript: {
-          alwaysTryTypes: true
-        }
-      }
+      '@typescript-eslint': typescriptPlugin,
+      'simple-import-sort': simpleImportSort
     },
     rules: {
-      ...jestPlugin.configs.recommended.rules,
-      ...pluginJs.configs.recommended.rules,
-      ...tseslint.configs.recommended.rules,
-      'import/order': [
-        'warn',
-        {
-          groups: ['builtin', 'external', 'internal'],
-          pathGroups: [
-            {
-              pattern: 'react',
-              group: 'external',
-              position: 'before'
-            }
-          ],
-          'newlines-between': 'ignore',
-          alphabetize: {
-            order: 'asc',
-            caseInsensitive: true
-          }
-        }
-      ],
-      'prettier/prettier': ['error', { endOfLine: 'lf' }],
-      '@typescript-eslint/indent': 'off',
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      '@typescript-eslint/no-use-before-define': [
-        'error',
-        { functions: false, classes: false }
-      ],
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-empty-function': 'off',
-      '@typescript-eslint/no-unused-vars': [
-        'error',
-        {
-          argsIgnorePattern: '^_',
-          caughtErrorsIgnorePattern: '^_'
-        }
-      ],
-      '@typescript-eslint/no-var-requires': 'off',
-      '@typescript-eslint/explicit-function-return-type': 'off',
-      'linebreak-style': ['error', 'unix'],
-      quotes: ['error', 'single'],
-      semi: ['error', 'always'],
-      'no-unused-vars': ['off'],
-      'no-prototype-builtins': 'off',
-      'jest/no-mocks-import': 'off',
-      'no-async-promise-executor': 'off',
-      'object-curly-newline': 'off',
-      'arrow-body-style': 'off',
-      'implicit-arrow-linebreak': 'off',
-      'func-names': 'off',
-      curly: ['error', 'all'],
-      'operator-linebreak': 'off',
-      'function-paren-newline': 'off',
-      'no-shadow': 'off',
-      '@typescript-eslint/no-shadow': 'off'
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+      '@typescript-eslint/consistent-type-imports': 'error'
+    },
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        project: true
+      }
     }
   }
 ];
diff --git a/package.json b/package.json
@@ -45,6 +45,8 @@
     "build": "stencil build",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
     "unpublish-verdaccio": "npm unpublish @multiversx/sdk-dapp-core-ui --force --registry http://localhost:4873",
     "publish-verdaccio": "npm run unpublish-verdaccio && npm run build && npm publish --registry http://localhost:4873/",
     "test.watch": "stencil test --spec --e2e --watchAll",
@@ -59,17 +61,23 @@
   },
   "devDependencies": {
     "@stencil/core": "^4.22.3",
+    "@stencil/react-output-target": "0.8.2",
     "@stencil/sass": "^3.0.12",
     "@stencil/store": "2.0.16",
-    "@stencil/react-output-target": "0.8.2",
     "@types/jest": "^29.5.14",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^22.10.0",
+    "@typescript-eslint/eslint-plugin": "^8.23.0",
+    "@typescript-eslint/parser": "^8.23.0",
+    "eslint": "^9.19.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^15.14.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jsdom": "^22.1.0",
     "prettier": "3.2.5",
     "puppeteer": "^23.9.0",
-    "rollup-plugin-node-polyfills": "^0.2.1"
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "typescript": "^5.7.3"
   }
 }
diff --git a/src/common/generic-modal/generic-modal.tsx b/src/common/generic-modal/generic-modal.tsx
@@ -1,4 +1,5 @@
-import { Component, Event, EventEmitter, Prop, VNode, h } from '@stencil/core';
+import type { EventEmitter, VNode} from '@stencil/core';
+import { Component, Event, h,Prop } from '@stencil/core';
 
 @Component({
   tag: 'generic-modal',

diff --git a/src/common/generic-spinner/generic-spinner.tsx b/src/common/generic-spinner/generic-spinner.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Element } from '@stencil/core';
+import { Component, Element,h } from '@stencil/core';
 
 @Component({
   tag: 'generic-spinner',

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,5 +1,7 @@
-import { Component, Prop, h, State } from '@stencil/core';
-import { faCheck, faCopy, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
+import { Component, h, Prop, State } from '@stencil/core';
+import classNames from 'classnames';
 import { copyToClipboard } from 'utils/copyToClipboard';
 
 @Component({
@@ -8,7 +10,7 @@ import { copyToClipboard } from 'utils/copyToClipboard';
   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 +45,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/copy-button/tests/copy-button.spec.ts b/src/components/copy-button/tests/copy-button.spec.ts
@@ -1,7 +1,8 @@
 import { newSpecPage } from '@stencil/core/testing';
-import { CopyButton } from '../copy-button';
 import * as copyUtils from 'utils/copyToClipboard';
 
+import { CopyButton } from '../copy-button';
+
 describe('CopyButton', () => {
   it('renders with default props', async () => {
     const page = await newSpecPage({
@@ -29,7 +30,7 @@ describe('CopyButton', () => {
     expect(page.root).toEqualHtml(`
       <copy-button class="custom-class" text="Copy me">
         <mock:shadow-root>
-          <a href="/#" class="custom-class">
+          <a href="/#" class="custom-class copy-button">
             <fa-icon></fa-icon>
           </a>
         </mock:shadow-root>

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,15 @@
-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 type { IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { Component, Element, h, Prop, State } from '@stencil/core';
+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 +23,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