multiversx · razvantomegea · Jul 30, 2025 · Jul 30, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.0.21](https://github.com/multiversx/mx-sdk-dapp-ui/pull/177)] - 2025-07-30
+
+- [Added sign transactions panel data-testids](https://github.com/multiversx/mx-sdk-dapp-ui/pull/176)
+
 ## [[0.0.20](https://github.com/multiversx/mx-sdk-dapp-ui/pull/175)] - 2025-07-25
 
 - [Added browser detection](https://github.com/multiversx/mx-sdk-dapp-ui/pull/174)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",

diff --git a/...ponents/sign-transactions-advanced-data-decode/sign-transactions-advanced-data-decode.tsx b/...ponents/sign-transactions-advanced-data-decode/sign-transactions-advanced-data-decode.tsx
@@ -1,6 +1,7 @@
 import { Component, h, Prop } from '@stencil/core';
 import classNames from 'classnames';
 import { DecodeMethodEnum } from 'components/functional/sign-transactions-panel/sign-transactions-panel.types';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 
 const signTransactionsAdvancedDataDecodeClasses: Record<string, string> = {
   icon: 'mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:relative mvx:h-3! mvx:w-auto!',
@@ -18,8 +19,16 @@ export class SignTransactionsAdvancedDataDecode {
 
   render() {
     return (
-      <div class="sign-transactions-advanced-data-decode">
-        <div class="sign-transactions-advanced-data-decode-label">{this.currentDecodeMethod}</div>
+      <div
+        class="sign-transactions-advanced-data-decode"
+        data-testid={DataTestIdsEnum.signTransactionsAdvancedDataDecode}
+      >
+        <div
+          class="sign-transactions-advanced-data-decode-label"
+          data-testid={DataTestIdsEnum.signTransactionsAdvancedDataDecodeLabel}
+        >
+          {this.currentDecodeMethod}
+        </div>
 
         <mvx-single-angle-down-icon
           class={classNames('sign-transactions-advanced-data-decode-icon', {

diff --git a/...s-advanced/components/sign-transactions-advanced-data/sign-transactions-advanced-data.tsx b/...s-advanced/components/sign-transactions-advanced-data/sign-transactions-advanced-data.tsx
@@ -1,6 +1,7 @@
 import { Component, Fragment, h, Prop, State } from '@stencil/core';
 import { DecodeMethodEnum } from 'components/functional/sign-transactions-panel/sign-transactions-panel.types';
 import state from 'components/functional/sign-transactions-panel/signTransactionsPanelStore';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 
 import { getProcessedHighlightedData } from './helpers/getProcessedHighlightedData';
 
@@ -56,7 +57,7 @@ export class SignTransactionsAdvancedData {
     const { beforeHighlight, afterHighlight, highlight } = this.computedDisplayData;
 
     return (
-      <div class="sign-transactions-advanced-data">
+      <div class="sign-transactions-advanced-data" data-testid={DataTestIdsEnum.signTransactionsAdvancedData}>
         <div class="sign-transactions-advanced-data-top">
           <div class="sign-transactions-advanced-data-label">Data</div>
 
@@ -73,11 +74,13 @@ export class SignTransactionsAdvancedData {
           >
             <div
               class="sign-transactions-advanced-data-decode-options"
+              data-testid={DataTestIdsEnum.signTransactionsAdvancedDataDecodeOptions}
               onClick={(event: MouseEvent) => event.stopPropagation()}
             >
               {Object.values(DecodeMethodEnum).map((decodeMethod: DecodeMethodEnum) => (
                 <div
                   onClick={() => this.setDecodeMethod(decodeMethod)}
+                  data-testid={DataTestIdsEnum.signTransactionsAdvancedDataDecodeOption}
                   class={{
                     'sign-transactions-advanced-data-decode-option': true,
                     'active': decodeMethod === this.decodeMethod,
@@ -94,16 +97,39 @@ export class SignTransactionsAdvancedData {
           <div class="sign-transactions-advanced-data-wrapper">
             {beforeHighlight || afterHighlight ? (
               <Fragment>
-                {beforeHighlight && <div class="sign-transactions-advanced-data-text">{beforeHighlight}</div>}
+                {beforeHighlight && (
+                  <div
+                    class="sign-transactions-advanced-data-text"
+                    data-testid={DataTestIdsEnum.signTransactionsAdvancedDataText}
+                  >
+                    {beforeHighlight}
+                  </div>
+                )}
 
-                <div class="sign-transactions-advanced-data-highlight bolded" ref={el => (this.highlightElement = el)}>
+                <div
+                  class="sign-transactions-advanced-data-highlight bolded"
+                  data-testid={DataTestIdsEnum.signTransactionsAdvancedDataHighlight}
+                  ref={el => (this.highlightElement = el)}
+                >
                   {highlight}
                 </div>
 
-                {afterHighlight && <div class="sign-transactions-advanced-data-text">{afterHighlight}</div>}
+                {afterHighlight && (
+                  <div
+                    class="sign-transactions-advanced-data-text"
+                    data-testid={DataTestIdsEnum.signTransactionsAdvancedDataText}
+                  >
+                    {afterHighlight}
+                  </div>
+                )}
               </Fragment>
             ) : (
-              <div class="sign-transactions-advanced-data-highlight">{highlight}</div>
+              <div
+                class="sign-transactions-advanced-data-highlight"
+                data-testid={DataTestIdsEnum.signTransactionsAdvancedDataHighlight}
+              >
+                {highlight}
+              </div>
             )}
           </div>
         </div>

diff --git a/...n-transactions-panel/components/sign-transactions-advanced/sign-transactions-advanced.tsx b/...n-transactions-panel/components/sign-transactions-advanced/sign-transactions-advanced.tsx
@@ -1,4 +1,5 @@
 import { Component, h, Prop, State } from '@stencil/core';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 
 import { DecodeMethodEnum } from '../../sign-transactions-panel.types';
 import state from '../../signTransactionsPanelStore';
@@ -37,26 +38,27 @@ export class SignTransactionsAdvanced {
     } = state;
 
     return (
-      <div class="advanced-details">
-        <div class="gas-settings">
+      <div class="advanced-details" data-testid={DataTestIdsEnum.signTransactionsAdvanced}>
+        <div class="gas-settings" data-testid={DataTestIdsEnum.signTransactionsAdvancedGasSettings}>
           <div class="gas-wrapper">
-            <div class="gas-header">
+            <div class="gas-header" data-testid={DataTestIdsEnum.signTransactionsAdvancedGasPrice}>
               <span class="gas-price">Gas Price</span>
               <span class="gas-price-value">{gasPrice} EGLD</span>
             </div>
-            <div class="gas-speed-selector">
+            <div class="gas-speed-selector" data-testid={DataTestIdsEnum.signTransactionsAdvancedGasSpeedSelector}>
               {ppuOptions.map(ppuOption => (
                 <button
                   key={ppuOption.label}
                   disabled={!needsSigning}
                   class={`speed-option ${this.pricePerUnitOption === ppuOption.value ? 'active' : ''}`}
+                  data-testid={DataTestIdsEnum.signTransactionsAdvancedSpeedOption}
                   onClick={() => state.setPpuOption(ppuOption.value)}
                 >
                   <span class="speed-text">{ppuOption.label}</span>
                 </button>
               ))}
             </div>
-            <div class="gas-limit-row">
+            <div class="gas-limit-row" data-testid={DataTestIdsEnum.signTransactionsAdvancedGasLimit}>
               <span class="gas-limit">Gas Limit</span>
               <span class="gas-limit-value">{gasLimit}</span>
             </div>

diff --git a/.../sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx b/.../sign-transactions-panel/components/sign-transactions-footer/sign-transactions-footer.tsx
@@ -61,8 +61,8 @@ export class SignTransactionsFooter {
     }
 
     return (
-      <div class="sign-transactions-footer">
-        <div class="sign-transactions-footer-buttons">
+      <div class="sign-transactions-footer" data-testid={DataTestIdsEnum.signTransactionsFooter}>
+        <div class="sign-transactions-footer-buttons" data-testid={DataTestIdsEnum.signTransactionsFooterButtons}>
           <div class="sign-transactions-footer-button-wrapper cancel">
             <button
               data-testid={isFirstTransaction ? DataTestIdsEnum.signCancelBtn : DataTestIdsEnum.signBackBtn}
@@ -137,17 +137,26 @@ export class SignTransactionsFooter {
           </div>
         </div>
 
-        <div class="sign-transactions-footer-identity">
+        <div class="sign-transactions-footer-identity" data-testid={DataTestIdsEnum.signTransactionsFooterIdentity}>
           <div class="sign-transactions-footer-identity-label">Sign with</div>
 
           {username && (
-            <div class="sign-transactions-footer-identity-username">
+            <div
+              class="sign-transactions-footer-identity-username"
+              data-testid={DataTestIdsEnum.signTransactionsFooterIdentityUsername}
+            >
               <span class="sign-transactions-footer-identity-username-prefix">@</span>
               <span class="sign-transactions-footer-identity-username-text">{username}</span>
             </div>
           )}
 
-          {!username && address && <mvx-trim text={address} class="sign-transactions-footer-identity-address" />}
+          {!username && address && (
+            <mvx-trim
+              text={address}
+              class="sign-transactions-footer-identity-address"
+              data-testid={DataTestIdsEnum.signTransactionsFooterIdentityAddress}
+            />
+          )}
 
           <mvx-copy-button
             text={username ?? address}

diff --git a/.../sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.tsx b/.../sign-transactions-panel/components/sign-transactions-header/sign-transactions-header.tsx
@@ -1,5 +1,6 @@
 import { Component, h } from '@stencil/core';
 import classNames from 'classnames';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 
 import state from '../../signTransactionsPanelStore';
 
@@ -18,17 +19,25 @@ export class SignTransactionsHeader {
     const { currentIndex, transactionsCount, origin } = state.commonData;
 
     return (
-      <div class="sign-transactions-header">
+      <div class="sign-transactions-header" data-testid={DataTestIdsEnum.signTransactionsHeader}>
         {transactionsCount > 1 && (
-          <div class="sign-transactions-header-pager" onClick={(event: MouseEvent) => event.stopPropagation()}>
+          <div
+            class="sign-transactions-header-pager"
+            data-testid={DataTestIdsEnum.signTransactionsHeaderPager}
+            onClick={(event: MouseEvent) => event.stopPropagation()}
+          >
             <mvx-single-angle-left-icon
               onClick={onBack}
+              data-testid={DataTestIdsEnum.signTransactionsHeaderPagerPrevBtn}
               class={classNames('sign-transactions-header-pager-icon', {
                 [signTransactionsHeaderClasses.pagerIcon]: true,
                 disabled: currentIndex === 0,
               })}
             />
-            <div class="sign-transactions-header-pager-text">
+            <div
+              class="sign-transactions-header-pager-text"
+              data-testid={DataTestIdsEnum.signTransactionsHeaderPagerText}
+            >
               <div class="sign-transactions-header-pager-text-label">Transaction</div>
               <div class={{ 'sign-transactions-header-pager-text-value': true, 'large': transactionsCount >= 10 }}>
                 {currentIndex + 1}
@@ -42,6 +51,7 @@ export class SignTransactionsHeader {
 
             <mvx-single-angle-right-icon
               onClick={onNext}
+              data-testid={DataTestIdsEnum.signTransactionsHeaderPagerNextBtn}
               class={classNames('sign-transactions-header-pager-icon', {
                 disabled: currentIndex + 1 === transactionsCount,
                 [signTransactionsHeaderClasses.pagerIcon]: true,
@@ -50,14 +60,22 @@ export class SignTransactionsHeader {
           </div>
         )}
 
-        <div class={{ 'sign-transactions-header-origin': true, 'centered': transactionsCount <= 1 }}>
+        <div
+          class={{ 'sign-transactions-header-origin': true, 'centered': transactionsCount <= 1 }}
+          data-testid={DataTestIdsEnum.signTransactionsHeaderOrigin}
+        >
           <div class="sign-transactions-header-origin-label">Request from</div>
 
           <div class="sign-transactions-header-origin-image">
             <img class="sign-transactions-header-origin-image-icon" src={`${origin}/favicon.ico`} alt="favicon" />
           </div>
 
-          <span class="sign-transactions-header-origin-name">{origin}</span>
+          <span
+            class="sign-transactions-header-origin-name"
+            data-testid={DataTestIdsEnum.signTransactionsHeaderOriginName}
+          >
+            {origin}
+          </span>
         </div>
       </div>
     );

diff --git a/...n-transactions-panel/components/sign-transactions-overview/sign-transactions-overview.tsx b/...n-transactions-panel/components/sign-transactions-overview/sign-transactions-overview.tsx
@@ -1,5 +1,6 @@
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { Component, h, Prop } from '@stencil/core';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 
 import { handleAmountResize } from '../../helpers';
 
@@ -29,18 +30,18 @@ export class SignTransactionsOverview {
 
   render() {
     return (
-      <div class="overview-container">
+      <div class="overview-container" data-testid={DataTestIdsEnum.signTransactionsOverview}>
         <div class="overview-content">
-          <div class="detail-row amount-row">
+          <div class="detail-row amount-row" data-testid={DataTestIdsEnum.signTransactionsOverviewAmountRow}>
             <div class="detail-label">{this.isApp ? 'Amount' : 'Send'}</div>
             <div class="amount-display">
               <div class="amount-value-container">
-                <div class="amount-value" ref={el => (this.amountValueRef = el)}>
+                <div class="amount-value" data-testid={DataTestIdsEnum.signTransactionsOverviewAmountValue} ref={el => (this.amountValueRef = el)}>
                   <span>
                     {this.amount} {this.identifier}
                   </span>
                 </div>
-                {this.identifier !== 'USD' && <div class="usd-value">{this.usdValue}</div>}
+                {this.identifier !== 'USD' && <div class="usd-value" data-testid={DataTestIdsEnum.signTransactionsOverviewUsdValue}>{this.usdValue}</div>}
               </div>
               {this.tokenIconUrl && (
                 <div class="token-icon">
@@ -59,22 +60,22 @@ export class SignTransactionsOverview {
             </div>
           </div>
 
-          <div class="detail-row interactor-row">
+          <div class="detail-row interactor-row" data-testid={DataTestIdsEnum.signTransactionsOverviewInteractorRow}>
             <div class="detail-label">{this.isApp ? 'App' : 'To'}</div>
             <div class="interactor-info">
               {this.interactorIconUrl && (
                 <div class="interactor-icon">
                   <img src={this.interactorIconUrl} alt={this.interactor} />
                 </div>
               )}
-              {this.interactor && <mvx-trim class="interactor-name" text={this.interactor}></mvx-trim>}
+              {this.interactor && <mvx-trim class="interactor-name" data-testid={DataTestIdsEnum.signTransactionsOverviewInteractorName} text={this.interactor}></mvx-trim>}
             </div>
           </div>
 
           {this.isApp && (
-            <div class="detail-row action-row">
+            <div class="detail-row action-row" data-testid={DataTestIdsEnum.signTransactionsOverviewActionRow}>
               <div class="detail-label">Action</div>
-              <div class="action-value">{this.action}</div>
+              <div class="action-value" data-testid={DataTestIdsEnum.signTransactionsOverviewActionValue}>{this.action}</div>
             </div>
           )}
         </div>
@@ -85,7 +86,7 @@ export class SignTransactionsOverview {
               <span class="fee-label">Network Fee</span>
               <div class="info-icon"></div>
             </div>
-            <div class="fee-value">{this.networkFee}</div>
+            <div class="fee-value" data-testid={DataTestIdsEnum.signTransactionsOverviewNetworkFee}>{this.networkFee}</div>
           </div>
         </div>
       </div>

diff --git a/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx b/src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx
@@ -1,5 +1,6 @@
 import { Component, h, Method, State } from '@stencil/core';
 import { ANIMATION_DELAY_PROMISE } from 'components/visual/side-panel/side-panel.constants';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 import { ConnectionMonitor } from 'utils/ConnectionMonitor';
 import type { IEventBus } from 'utils/EventBus';
 import { EventBus } from 'utils/EventBus';
@@ -125,17 +126,20 @@ export class SignTransactionsPanel {
         panelTitle="Confirm Transaction"
         hasBackButton={false}
       >
-        <div class="sign-transactions-panel">
+        <div class="sign-transactions-panel" data-testid={DataTestIdsEnum.signTransactionsPanel}>
           <mvx-sign-transactions-header />
 
-          <div class="sign-transaction-content">
+          <div class="sign-transaction-content" data-testid={DataTestIdsEnum.signTransactionsPanelContent}>
             <div class="sign-transactions-tabs">
               {transactionTabs.map(transactionTab => (
                 <div
                   class={{ 'sign-transactions-tab': true, 'active': transactionTab === this.activeTab }}
+                  data-testid={DataTestIdsEnum.signTransactionsTab}
                   onClick={() => this.setActiveTab(transactionTab)}
                 >
-                  <div class="sign-transactions-tab-text">{transactionTab}</div>
+                  <div class="sign-transactions-tab-text" data-testid={DataTestIdsEnum.signTransactionsTabText}>
+                    {transactionTab}
+                  </div>
                 </div>
               ))}
             </div>