Merge branch 'development' into di/feature/devtools-action-name

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [Added transaction display info support](https://github.com/multiversx/mx-sdk-dapp-core/pull/73)
 - [Remove storage helpers](https://github.com/multiversx/mx-sdk-dapp-core/pull/72)
 
 ## [[0.0.0-alpha.12](https://github.com/multiversx/mx-sdk-dapp-core/pull/56)] - 2025-01-20

src/core/managers/ToastManager/ToastManager.ts

@@ -116,7 +116,8 @@ export class ToastManager {
         continue;
       }
 
-      const { status, transactions } = sessionTransactions;
+      const { status, transactions, transactionsDisplayInfo } =
+        sessionTransactions;
       const isPending = getIsTransactionPending(status);
       const isTimedOut = getIsTransactionTimedOut(status);
       const isFailed = getIsTransactionFailed(status);
@@ -132,7 +133,8 @@ export class ToastManager {
           address: account.address,
           sender: transactions[0]?.sender,
           toastId: toast.toastId,
-          status
+          status,
+          transactionsDisplayInfo
         }),
         processedTransactionsStatus: getToastProceededStatus(transactions),
         transactionProgressState: isPending

src/core/managers/ToastManager/helpers/getToastDataStateByStatus.ts

@@ -16,52 +16,64 @@ export const getToastDataStateByStatus = ({
   address,
   sender,
   status,
-  toastId
+  toastId,
+  transactionsDisplayInfo
 }: GetToastsOptionsDataPropsType) => {
   const successToastData: IToastDataState = {
     id: toastId,
     icon: ToastIconsEnum.check,
     hasCloseButton: true,
-    title: TransactionsDefaultTitles.success,
+    title:
+      transactionsDisplayInfo?.successMessage ??
+      TransactionsDefaultTitles.success,
     iconClassName: 'success'
   };
 
   const receivedToastData: IToastDataState = {
     id: toastId,
     icon: ToastIconsEnum.check,
     hasCloseButton: true,
-    title: TransactionsDefaultTitles.received,
+    title:
+      transactionsDisplayInfo?.receivedMessage ??
+      TransactionsDefaultTitles.received,
     iconClassName: 'success'
   };
 
   const pendingToastData: IToastDataState = {
     id: toastId,
     icon: ToastIconsEnum.hourglass,
     hasCloseButton: false,
-    title: TransactionsDefaultTitles.pending,
+    title:
+      transactionsDisplayInfo?.processingMessage ??
+      TransactionsDefaultTitles.pending,
     iconClassName: 'warning'
   };
 
   const failToastData: IToastDataState = {
     id: toastId,
     icon: ToastIconsEnum.times,
-    title: TransactionsDefaultTitles.failed,
+    title:
+      transactionsDisplayInfo?.errorMessage ?? TransactionsDefaultTitles.failed,
     hasCloseButton: true,
     iconClassName: 'danger'
   };
 
   const invalidToastData: IToastDataState = {
     id: toastId,
     icon: ToastIconsEnum.ban,
-    title: TransactionsDefaultTitles.invalid,
+    title:
+      transactionsDisplayInfo?.invalidMessage ??
+      TransactionsDefaultTitles.invalid,
     hasCloseButton: true,
     iconClassName: 'warning'
   };
 
   const timedOutToastData = {
     id: toastId,
     icon: ToastIconsEnum.times,
-    title: TransactionsDefaultTitles.timedOut,
+    title:
+      transactionsDisplayInfo?.timedOutMessage ??
+      TransactionsDefaultTitles.timedOut,
     hasCloseButton: true,
     iconClassName: 'warning'
   };

src/core/managers/ToastManager/types/toast.types.ts

@@ -2,6 +2,7 @@ import {
   TransactionBatchStatusesEnum,
   TransactionServerStatusesEnum
 } from 'types/enums.types';
+import { ITransactionsDisplayInfo } from 'types/transactions.types';
 
 export enum TransactionsDefaultTitles {
   success = 'Transaction successful',
@@ -17,6 +18,7 @@ export interface GetToastsOptionsDataPropsType {
   sender: string;
   status?: TransactionBatchStatusesEnum | TransactionServerStatusesEnum;
   toastId: string;
+  transactionsDisplayInfo?: ITransactionsDisplayInfo;
 }
 
 export interface IToastDataState {

src/core/managers/TransactionManager/TransactionManager.ts

@@ -8,7 +8,10 @@ import { networkSelector } from 'store/selectors';
 import { getState } from 'store/store';
 import { TransactionServerStatusesEnum } from 'types/enums.types';
 import { BatchTransactionsResponseType } from 'types/serverTransactions.types';
-import { SignedTransactionType } from 'types/transactions.types';
+import {
+  ITransactionsDisplayInfo,
+  SignedTransactionType
+} from 'types/transactions.types';
 import { isGuardianTx } from 'utils/transactions/isGuardianTx';
 
 export class TransactionManager {
@@ -60,12 +63,18 @@ export class TransactionManager {
 
   public track = async (
     signedTransactions: Transaction[],
-    options: { disableToasts?: boolean } = { disableToasts: false }
+    options: {
+      disableToasts?: boolean;
+      transactionsDisplayInfo?: ITransactionsDisplayInfo;
+    } = { disableToasts: false }
   ) => {
     const parsedTransactions = signedTransactions.map((transaction) =>
       this.parseSignedTransaction(transaction)
     );
-    const sessionId = createTrackedTransactionsSession(parsedTransactions);
+    const sessionId = createTrackedTransactionsSession({
+      transactions: parsedTransactions,
+      transactionsDisplayInfo: options.transactionsDisplayInfo
+    });
 
     if (options.disableToasts === true) {
       return;

src/store/actions/trackedTransactions/trackedTransactionsActions.ts

@@ -4,7 +4,10 @@ import {
   TransactionServerStatusesEnum
 } from 'types/enums.types';
 import { ServerTransactionType } from 'types/serverTransactions.types';
-import { SignedTransactionType } from 'types/transactions.types';
+import {
+  ITransactionsDisplayInfo,
+  SignedTransactionType
+} from 'types/transactions.types';
 import {
   getIsTransactionFailed,
   getIsTransactionNotExecuted,
@@ -20,15 +23,20 @@ export interface UpdateTrackedTransactionStatusPayloadType {
   inTransit?: boolean;
 }
 
-export const createTrackedTransactionsSession = (
-  transactions: SignedTransactionType[]
-) => {
+export const createTrackedTransactionsSession = ({
+  transactions,
+  transactionsDisplayInfo
+}: {
+  transactions: SignedTransactionType[];
+  transactionsDisplayInfo?: ITransactionsDisplayInfo;
+}) => {
   const sessionId = Date.now().toString();
   getStore().setState(
     ({ trackedTransactions: state }) => {
       state[sessionId] = {
         transactions,
-        status: TransactionBatchStatusesEnum.sent
+        status: TransactionBatchStatusesEnum.sent,
+        transactionsDisplayInfo
       };
     },
     false,

src/store/slices/trackedTransactions/trackedTransactionsSlice.types.ts

@@ -2,12 +2,19 @@ import {
   TransactionBatchStatusesEnum,
   TransactionServerStatusesEnum
 } from 'types';
-import { SignedTransactionType } from 'types/transactions.types';
+import {
+  ITransactionsDisplayInfo,
+  SignedTransactionType
+} from 'types/transactions.types';
 
 export interface TrackedTransactionsSliceType {
   [sessionId: string]: {
     transactions: SignedTransactionType[];
     status?: TransactionBatchStatusesEnum | TransactionServerStatusesEnum;
     errorMessage?: string;
+    /**
+     * Optional custom information to be displayed in the toast notification.
+     */
+    transactionsDisplayInfo?: ITransactionsDisplayInfo;
   };
 }

src/types/transactions.types.ts

@@ -81,3 +81,48 @@ export enum TransactionDirectionEnum {
   IN = 'In',
   OUT = 'Out'
 }
+
+/**
+ * Allows editing the title toast information
+ */
+export interface ITransactionsDisplayInfo {
+  /**
+   * Optional error message to be displayed in notification title in notification title if the transaction fails.
+   */
+  errorMessage?: string;
+
+  /**
+   * Optional success message to be displayed in notification title if the transaction succeeds.
+   */
+  successMessage?: string;
+
+  /**
+   * Optional message to be displayed in notification title while the transaction is processing.
+   */
+  processingMessage?: string;
+
+  /**
+   * Optional message to be displayed in notification title when the transaction is submitted.
+   */
+  submittedMessage?: string;
+
+  /**
+   * Optional duration of the transaction in milliseconds.
+   */
+  transactionDuration?: number;
+
+  /**
+   * Optional message to be displayed in notification title if the transaction times out.
+   */
+  timedOutMessage?: string;
+
+  /**
+   * Optional message to be displayed in notification title if the transaction is invalid.
+   */
+  invalidMessage?: string;
+
+  /**
+   * Optional message to be displayed in notification title when the transaction is received.
+   */
+  receivedMessage?: string;
+}