Add waiting screen for IFrame

src/core/providers-strategy/IFrameProviderStrategy.ts

@@ -1,11 +1,19 @@
+import { Message, Transaction } from '@multiversx/sdk-core/out';
 import { IframeProvider } from '@multiversx/sdk-web-wallet-iframe-provider/out';
 import { IframeLoginTypes } from '@multiversx/sdk-web-wallet-iframe-provider/out/constants';
 import { getAccount } from 'core/methods/account/getAccount';
 import { getAddress } from 'core/methods/account/getAddress';
-import { IProvider } from 'core/providers/types/providerFactory.types';
+import { PendingTransactionsEventsEnum } from 'core/providers/helpers/pendingTransactions/pendingTransactions.types';
+import { PendingTransactionsStateManager } from 'core/providers/helpers/pendingTransactions/PendingTransactionsStateManagement';
+import {
+  IProvider,
+  ProviderTypeEnum
+} from 'core/providers/types/providerFactory.types';
+import { PendingTransactionsModal } from 'lib/sdkDappCoreUi';
 import { networkSelector } from 'store/selectors/networkSelectors';
 import { getState } from 'store/store';
 import { ProviderErrorsEnum } from 'types';
+import { createModalElement } from 'utils/createModalElement';
 
 type IFrameProviderType = {
   type: IframeLoginTypes;
@@ -15,6 +23,10 @@ export class IFrameProviderStrategy {
   private provider: IframeProvider | null = null;
   private address?: string;
   private type: IframeLoginTypes | null = null;
+  private _signTransactions:
+    | ((transactions: Transaction[]) => Promise<Transaction[]>)
+    | null = null;
+  private _signMessage: ((message: Message) => Promise<Message>) | null = null;
 
   constructor({ type, address }: IFrameProviderType) {
     this.type = type;
@@ -36,6 +48,8 @@ export class IFrameProviderStrategy {
 
     this.provider.setLoginType(this.type);
     this.provider.setWalletUrl(String(network.iframeWalletAddress));
+    this._signTransactions = this.provider.signTransactions.bind(this.provider);
+    this._signMessage = this.provider.signMessage.bind(this.provider);
 
     return this.buildProvider();
   };
@@ -50,7 +64,8 @@ export class IFrameProviderStrategy {
     const provider = this.provider as unknown as IProvider;
 
     provider.setAccount({ address: this.address || address });
-
+    provider.signTransactions = this.signTransactions;
+    provider.signMessage = this.signMessage;
     return provider;
   };
 
@@ -67,4 +82,100 @@ export class IFrameProviderStrategy {
 
     this.address = address;
   };
+
+  private signTransactions = async (transactions: Transaction[]) => {
+    if (!this.provider || !this._signTransactions) {
+      throw new Error(ProviderErrorsEnum.notInitialized);
+    }
+
+    const { eventBus } = await createModalElement<PendingTransactionsModal>({
+      name: 'pending-transactions-modal',
+      withEventBus: true
+    });
+
+    if (!eventBus) {
+      throw new Error(ProviderErrorsEnum.eventBusError);
+    }
+
+    const manager = PendingTransactionsStateManager.getInstance(eventBus);
+
+    const onClose = (cancelAction = true) => {
+      if (cancelAction && this.provider) {
+        this.provider.cancelAction();
+      }
+
+      manager.closeAndReset();
+    };
+
+    eventBus.subscribe(PendingTransactionsEventsEnum.CLOSE, onClose);
+
+    manager.updateData({
+      isPending: true,
+      title: `Confirm on MultiversX ${this.type}`,
+      subtitle: `Check your MultiversX ${this.type} to sign the transaction`,
+      type: this.type as unknown as ProviderTypeEnum
+    });
+    try {
+      const signedTransactions: Transaction[] =
+        await this._signTransactions(transactions);
+
+      return signedTransactions;
+    } catch (error) {
+      this.provider.cancelAction();
+      throw error;
+    } finally {
+      onClose(false);
+      eventBus.unsubscribe(PendingTransactionsEventsEnum.CLOSE, onClose);
+    }
+  };
+
+  private signMessage = async (message: Message) => {
+    if (!this.provider || !this._signMessage || !this.type) {
+      throw new Error(ProviderErrorsEnum.notInitialized);
+    }
+
+    const { eventBus } = await createModalElement<PendingTransactionsModal>({
+      name: 'pending-transactions-modal',
+      withEventBus: true
+    });
+
+    if (!eventBus) {
+      throw new Error(ProviderErrorsEnum.eventBusError);
+    }
+
+    const manager = PendingTransactionsStateManager.getInstance(eventBus);
+
+    const onClose = (cancelAction = true) => {
+      if (!this.provider) {
+        throw new Error(ProviderErrorsEnum.notInitialized);
+      }
+
+      if (cancelAction) {
+        this.provider.cancelAction();
+      }
+
+      manager.closeAndReset();
+    };
+
+    eventBus.subscribe(PendingTransactionsEventsEnum.CLOSE, onClose);
+
+    manager.updateData({
+      isPending: true,
+      title: 'Message Signing',
+      subtitle: `Check your MultiversX ${this.type} to sign the message`,
+      type: this.type as unknown as ProviderTypeEnum
+    });
+
+    try {
+      const signedMessage: Message = await this._signMessage(message);
+
+      return signedMessage;
+    } catch (error) {
+      this.provider.cancelAction();
+      throw error;
+    } finally {
+      onClose(false);
+      eventBus.unsubscribe(PendingTransactionsEventsEnum.CLOSE, onClose);
+    }
+  };
 }