added transaction tracking

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [Added transaction tracking](https://github.com/multiversx/mx-sdk-dapp-core/pull/51)
 - [Added provider constants and getTransactions API call](https://github.com/multiversx/mx-sdk-dapp-core/pull/50)
 - [Added pending transactions](https://github.com/multiversx/mx-sdk-dapp-core/pull/48)
 - [Added transaction manager](https://github.com/multiversx/mx-sdk-dapp-core/pull/41)

src/core/managers/TransactionManager/TransactionManager.ts

@@ -2,9 +2,10 @@ import { Transaction } from '@multiversx/sdk-core/out';
 import axios, { AxiosError } from 'axios';
 import { BATCH_TRANSACTIONS_ID_SEPARATOR } from 'constants/transactions.constants';
 import { getAccount } from 'core/methods/account/getAccount';
+import { createTrackedTransactionsSession } from 'store/actions/trackedTransactions/trackedTransactionsActions';
 import { networkSelector } from 'store/selectors';
 import { getState } from 'store/store';
-import { GuardianActionsEnum } from 'types';
+import { GuardianActionsEnum, TransactionServerStatusesEnum } from 'types';
 import { BatchTransactionsResponseType } from 'types/serverTransactions.types';
 import { SignedTransactionType } from 'types/transactions.types';
 
@@ -55,6 +56,19 @@ export class TransactionManager {
     }
   };
 
+  public track = async (
+    signedTransactions: Transaction[],
+    options?: { enableToasts: boolean }
+  ) => {
+    const parsedTransactions = signedTransactions.map((transaction) =>
+      this.parseSignedTransaction(transaction)
+    );
+    createTrackedTransactionsSession({
+      transactions: parsedTransactions,
+      enableToasts: options?.enableToasts ?? true
+    });
+  };
+
   private sendSignedTransactions = async (
     signedTransactions: Transaction[]
   ): Promise<string[]> => {
@@ -132,7 +146,8 @@ export class TransactionManager {
   private parseSignedTransaction = (signedTransaction: Transaction) => {
     const parsedTransaction = {
       ...signedTransaction.toPlainObject(),
-      hash: signedTransaction.getHash().hex()
+      hash: signedTransaction.getHash().hex(),
+      status: TransactionServerStatusesEnum.pending
     };
 
     // TODO: Remove when the protocol supports usernames for guardian transactions

src/core/methods/initApp/initApp.ts

@@ -41,9 +41,6 @@ export async function initApp({
 }: InitAppType) {
   initStore(storage.getStorageCallback);
 
-  const shouldEnableTransactionTracker =
-    dAppConfig.enableTansactionTracker !== false;
-
   const { apiAddress } = await initializeNetwork({
     customNetworkConfig: dAppConfig.network,
     environment: dAppConfig.environment
@@ -66,9 +63,7 @@ export async function initApp({
     setCrossWindowConfig(dAppConfig.providers.crossWindow);
   }
 
-  if (shouldEnableTransactionTracker) {
-    trackTransactions();
-  }
+  trackTransactions();
 
   const isLoggedIn = getIsLoggedIn();
 

src/core/methods/initApp/initApp.types.ts

@@ -14,10 +14,6 @@ type BaseDappConfigType = {
    * If set to `NativeAuthConfigType`, will set the native auth configuration.
    */
   nativeAuth?: boolean | NativeAuthConfigType;
-  /**
-   * default: `true`
-   */
-  enableTansactionTracker?: boolean;
   providers?: {
     crossWindow?: CrossWindowConfig;
     walletConnect?: WalletConnectConfig;

src/core/methods/trackTransactions/helpers/checkTransactionStatus/checkBatch.ts

@@ -1,8 +1,8 @@
 import { getTransactionsByHashes } from 'apiCalls/transactions/getTransactionsByHashes';
 import {
-  updateSignedTransactionStatus,
-  updateTransactionsSession
-} from 'store/actions/transactions/transactionsActions';
+  updateTrackedTransactionStatus,
+  updateTrackedTransactionsSession
+} from 'store/actions/trackedTransactions/trackedTransactionsActions';
 import { getIsTransactionFailed } from 'store/actions/transactions/transactionStateByStatus';
 import {
   TransactionBatchStatusesEnum,
@@ -63,7 +63,7 @@ function manageTransaction({
     const retriesForThisHash = retries[hash];
     if (retriesForThisHash > 30) {
       // consider transaction as stuck after 1 minute
-      updateTransactionsSession({
+      updateTrackedTransactionsSession({
         sessionId,
         status: TransactionBatchStatusesEnum.timedOut
       });
@@ -81,7 +81,7 @@ function manageTransaction({
     // The tx is from a sequential batch.
     // If the transactions before this are not successful then it means that no other tx will be processed
     if (isSequential && !status) {
-      updateSignedTransactionStatus({
+      updateTrackedTransactionStatus({
         sessionId,
         status,
         transactionHash: hash,
@@ -92,7 +92,7 @@ function manageTransaction({
     }
 
     if (hasStatusChanged) {
-      updateSignedTransactionStatus({
+      updateTrackedTransactionStatus({
         sessionId,
         status,
         transactionHash: hash,
@@ -111,7 +111,7 @@ function manageTransaction({
     }
   } catch (error) {
     console.error(error);
-    updateTransactionsSession({
+    updateTrackedTransactionsSession({
       sessionId,
       status: TransactionBatchStatusesEnum.timedOut
     });
@@ -159,7 +159,7 @@ export async function checkBatch({
       );
 
       if (isSuccessful) {
-        updateTransactionsSession({
+        updateTrackedTransactionsSession({
           sessionId,
           status: TransactionBatchStatusesEnum.success
         });
@@ -171,7 +171,7 @@ export async function checkBatch({
       );
 
       if (isFailed) {
-        updateTransactionsSession({
+        updateTrackedTransactionsSession({
           sessionId,
           status: TransactionBatchStatusesEnum.fail
         });

src/core/methods/trackTransactions/helpers/checkTransactionStatus/checkTransactionStatus.ts

@@ -1,14 +1,15 @@
 import { refreshAccount } from 'utils/account';
 import { checkBatch } from './checkBatch';
 import { TransactionsTrackerType } from '../../trackTransactions.types';
-import { getPendingStoreTransactions } from '../getPendingStoreTransactions';
+import { getPendingStoreTrackedTransactions } from '../getPendingStoreTrackedTransactions';
 
 export async function checkTransactionStatus(
   props: TransactionsTrackerType & {
     shouldRefreshBalance?: boolean;
   }
 ) {
-  const { pendingSessions } = getPendingStoreTransactions();
+  const { pendingTrackedSessions: pendingSessions } =
+    getPendingStoreTrackedTransactions();
   if (Object.keys(pendingSessions).length > 0) {
     for (const [sessionId, { transactions }] of Object.entries(
       pendingSessions

src/core/methods/trackTransactions/helpers/checkTransactionStatus/manageFailedTransactions.ts

@@ -1,7 +1,7 @@
 import {
-  updateSignedTransactionStatus,
-  updateTransactionsSession
-} from 'store/actions/transactions/transactionsActions';
+  updateTrackedTransactionStatus,
+  updateTrackedTransactionsSession
+} from 'store/actions/trackedTransactions/trackedTransactionsActions';
 import {
   TransactionBatchStatusesEnum,
   TransactionServerStatusesEnum
@@ -22,7 +22,7 @@ export function manageFailedTransactions({
     (scResult) => scResult?.returnMessage !== ''
   );
 
-  updateSignedTransactionStatus({
+  updateTrackedTransactionStatus({
     transactionHash: hash,
     sessionId,
     status: TransactionServerStatusesEnum.fail,
@@ -31,7 +31,7 @@ export function manageFailedTransactions({
     serverTransaction: resultWithError as unknown as ServerTransactionType
   });
 
-  updateTransactionsSession({
+  updateTrackedTransactionsSession({
     sessionId,
     status: TransactionBatchStatusesEnum.fail,
     errorMessage: resultWithError?.returnMessage

src/core/methods/trackTransactions/helpers/getPendingStoreTrackedTransactions.ts

@@ -0,0 +1,26 @@
+import {
+  pendingTrackedSessionsSelector,
+  pendingTrackedTransactionsSelector
+} from 'store/selectors/trackedTransactionsSelector';
+import { TrackedTransactionsSliceType } from 'store/slices/trackedTransactions/trackedTransactionsSlice.types';
+import { getState } from 'store/store';
+import { SignedTransactionType } from 'types/transactions.types';
+
+export interface UseGetPendingTrackedTransactionsReturnType {
+  pendingTrackedTransactions: SignedTransactionType[];
+  pendingTrackedSessions: TrackedTransactionsSliceType;
+  hasPendingTrackedTransactions: boolean;
+}
+
+export function getPendingStoreTrackedTransactions(): UseGetPendingTrackedTransactionsReturnType {
+  const pendingTrackedTransactions =
+    pendingTrackedTransactionsSelector(getState());
+  const pendingTrackedSessions = pendingTrackedSessionsSelector(getState());
+  const hasPendingTrackedTransactions = pendingTrackedTransactions.length > 0;
+
+  return {
+    pendingTrackedTransactions,
+    pendingTrackedSessions,
+    hasPendingTrackedTransactions
+  };
+}

src/core/methods/trackTransactions/trackTransactions.ts

@@ -1,44 +1,34 @@
-import { getTransactionsByHashes as defaultGetTxByHash } from 'apiCalls/transactions/getTransactionsByHashes';
+import { getTransactionsByHashes } from 'apiCalls/transactions/getTransactionsByHashes';
 import { websocketEventSelector } from 'store/selectors/accountSelectors';
 import { getStore } from 'store/store';
 import { checkTransactionStatus } from './helpers/checkTransactionStatus';
 import { getPollingInterval } from './helpers/getPollingInterval';
-import { TransactionsTrackerType } from './trackTransactions.types';
 import {
   websocketConnection,
   WebsocketConnectionStatusEnum
 } from '../initApp/websocket/websocket.constants';
 
 /**
  * Tracks transactions using websocket or polling
- * @param props - optional object with additional websocket parameters
  * @returns cleanup function
  */
-export async function trackTransactions(props?: TransactionsTrackerType) {
+export async function trackTransactions() {
   const store = getStore();
   const pollingInterval = getPollingInterval();
   // eslint-disable-next-line no-undef
   let pollingIntervalTimer: NodeJS.Timeout | null = null;
   let timestamp = websocketEventSelector(store.getState())?.timestamp;
 
-  // Check if websocket is completed
   const isWebsocketCompleted =
     websocketConnection.status === WebsocketConnectionStatusEnum.COMPLETED;
 
-  // Assign getTransactionsByHash based on props or use default
-  const getTransactionsByHash =
-    props?.getTransactionsByHash ?? defaultGetTxByHash;
-
-  // Function that handles message (checking transaction status)
   const recheckStatus = () => {
     checkTransactionStatus({
       shouldRefreshBalance: isWebsocketCompleted,
-      getTransactionsByHash,
-      ...props
+      getTransactionsByHash: getTransactionsByHashes
     });
   };
 
-  // recheck on page initial page load
   recheckStatus();
 
   if (isWebsocketCompleted) {
@@ -60,7 +50,6 @@ export async function trackTransactions(props?: TransactionsTrackerType) {
     }
   }
 
-  // Return cleanup function for clearing the interval
   function cleanup() {
     if (pollingIntervalTimer) {
       clearInterval(pollingIntervalTimer);

src/store/actions/toasts/toastsActions.ts

@@ -0,0 +1,63 @@
+import {
+  CustomToastType,
+  ToastsEnum
+} from 'store/slices/toast/toastSlice.types';
+import { getStore } from 'store/store';
+import { getUnixTimestamp } from 'utils';
+
+export const addCustomToast = (
+  customToasts: CustomToastType,
+  currentToastId?: string
+) => {
+  getStore().setState(({ toasts: state }) => {
+    const toastId =
+      currentToastId || `custom-toast-${state.customToasts.length + 1}`;
+
+    const existingToastIndex = state.customToasts.findIndex(
+      (toast) => toast.toastId === toastId
+    );
+
+    if (existingToastIndex !== -1) {
+      state.customToasts[existingToastIndex] = {
+        ...state.customToasts[existingToastIndex],
+        ...customToasts,
+        type: ToastsEnum.custom,
+        toastId
+      } as CustomToastType;
+      return;
+    }
+
+    state.customToasts.push({
+      ...customToasts,
+      type: ToastsEnum.custom,
+      toastId
+    });
+  });
+};
+
+export const removeCustomToast = (toastId: string) => {
+  getStore().setState(({ toasts: state }) => {
+    state.customToasts = state.customToasts.filter(
+      (toast) => toast.toastId !== toastId
+    );
+  });
+};
+
+export const addTransactionToast = (toastId: string) => {
+  getStore().setState(({ toasts: state }) => {
+    state.transactionToasts.push({
+      type: ToastsEnum.transaction,
+      startTimestamp: getUnixTimestamp(),
+      toastId:
+        toastId || `transaction-toast-${state.transactionToasts.length + 1}`
+    });
+  });
+};
+
+export const removeTransactionToast = (toastId: string) => {
+  getStore().setState(({ toasts: state }) => {
+    state.transactionToasts = state.transactionToasts.filter((toast) => {
+      return toast.toastId !== toastId;
+    });
+  });
+};