Fixed sign transactions button states (#87)

Author: razvantomegea

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 - [Added providers customization support](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/89)
+- [Fixed sign transactions button states](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/87)
 
 ## [[0.0.0-alpha.13](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/88)] - 2025-05-02
 

src/components/functional/sign-transactions-panel/components/sign-transaction-component/sign-transaction-component.tsx

@@ -1,5 +1,5 @@
 import type { VNode } from '@stencil/core';
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h, Prop, State } from '@stencil/core';
 import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 import { formatAddress } from 'utils/utils';
 
@@ -12,23 +12,43 @@ import state from '../../signTransactionsPanelStore';
 export class SignTransaction {
   @Prop() header: VNode;
 
+  @State() isConfirming: boolean = false;
+
+  private previousIndex: number = -1;
+
+  componentWillRender() {
+    const { currentIndex } = state.commonData;
+
+    if (this.previousIndex !== -1 && currentIndex !== this.previousIndex) {
+      this.isConfirming = false;
+    }
+
+    this.previousIndex = currentIndex;
+  }
+
+  onConfirm() {
+    this.isConfirming = true;
+    state.onConfirm();
+  }
+
   getSignButtonProps() {
-    const { needsSigning } = state.commonData;
+    const { needsSigning, providerName } = state.commonData;
+    const confirmText = providerName ? `Confirm on ${providerName}` : 'Confirm';
 
     if (needsSigning) {
       return {
-        'signText': 'Sign',
-        'disabled': state.isWaitingForSignature,
+        'signText': this.isConfirming ? confirmText : 'Sign',
+        'disabled': state.isWaitingForSignature || this.isConfirming,
         'data-testid': DataTestIdsEnum.signTransactionBtn,
-        'onClick': state.onConfirm,
+        'onClick': this.onConfirm.bind(this),
       };
     }
 
     return {
       'signText': 'Next',
       'disabled': false,
       'data-testid': DataTestIdsEnum.signNextTransactionBtn,
-      'onClick': state.onConfirm,
+      'onClick': this.onConfirm.bind(this),
     };
   }
 
@@ -52,7 +72,7 @@ export class SignTransaction {
       'data-testid': DataTestIdsEnum.signBackBtn,
       'backButtonText': 'Back',
       'onClick': state.onBack,
-      'disabled': state.isWaitingForSignature,
+      'disabled': state.isWaitingForSignature || this.isConfirming,
     };
   }
 

src/components/functional/sign-transactions-panel/sign-transactions-panel.css

@@ -14,7 +14,6 @@
   width: 450px;
   max-width: 100%;
   padding: 0;
-  background-color: #ffffff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
@@ -47,3 +46,10 @@
   flex: 1;
   overflow-y: auto;
 }
+
+
+.sign-transactions-panel,
+.sign-transactions-header *,
+.sign-transactions-body * {
+  color: #ffffff !important;
+}

src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx

@@ -7,10 +7,10 @@ import { SignEventsEnum } from './sign-transactions-panel.types';
 import state, { resetState } from './signTransactionsPanelStore';
 
 const signScreens = {
-  FungibleESDT: 'token-component',
-  SemiFungibleESDT: 'fungible-component',
-  NonFungibleESDT: 'fungible-component',
-  MetaESDT: 'token-component',
+  FungibleESDT: 'mvx-token-component',
+  SemiFungibleESDT: 'mvx-fungible-component',
+  NonFungibleESDT: 'mvx-fungible-component',
+  MetaESDT: 'mvx-token-component',
 };
 
 @Component({

src/components/functional/sign-transactions-panel/sign-transactions-panel.types.ts

@@ -40,6 +40,7 @@ export interface ISignTransactionsPanelCommonData {
   highlight?: string | null;
   scCall?: string | null;
   nextUnsignedTxIndex?: number;
+  providerName?: string;
 }
 
 export interface ISignTransactionsPanelData {