Tm/feature/sign screens proposal

.gitignore

@@ -6,6 +6,7 @@ node_modules
 .cache
 *.log
 .DS_Store
+**/.DS_Store
 
 # builds
 build
@@ -18,7 +19,6 @@ out
 .husky
 
 # misc
-.DS_Store
 .env
 .env.local
 .env.development.local

README.md

@@ -16,4 +16,29 @@ In your project, make sure to use the `preserveSymlinks` option in the server co
 ```
 
 // TODO: DEMONSTRATE API
+
+
+```mermaid
+flowchart TB;
+    id1{index.tsx} 
+
+    -- sdk-dpp-core config --> 
+
+    F(
+        persistance
+        network
+        custom providers
+    )
+
+    -- await config --> 
+
+    id2{/unlock}  
+
+    -- user presses login --> 
+
+    Provider.login
+
+    -- redirect --> 
+
+    /dashboard
 ```

package.json

@@ -57,7 +57,7 @@
     "immer": "10.x"
   },
   "optionalDependencies": {
-    "@multiversx/sdk-dapp-core-ui": "file:../mx-sdk-dapp-core-ui"
+    "@multiversx/sdk-dapp-core-ui": "0.0.0"
   },
   "resolutions": {
     "string-width": "4.1.0"
@@ -91,7 +91,6 @@
     "glob": "10.3.14",
     "immer": "^10.1.1",
     "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
     "msw": "1.3.1",
     "node-stdlib-browser": "1.2.0",
     "prettier": "3.2.5",

src/core/providers/ProviderFactory.ts

@@ -1,13 +1,10 @@
 import { IframeLoginTypes } from '@multiversx/sdk-web-wallet-iframe-provider/out/constants';
-import { SECOND_LOGIN_ATTEMPT_ERROR } from 'constants/errorMessages.constants';
 import { getAddress } from 'core/methods/account/getAddress';
-import { getIsLoggedIn } from 'core/methods/account/getIsLoggedIn';
 import { setProviderType } from 'store/actions/loginInfo/loginInfoActions';
 import { setAccountProvider } from './accountProvider';
 import { DappProvider } from './DappProvider/DappProvider';
 import { createCrossWindowProvider } from './helpers/crossWindow/createCrossWindowProvider';
 import { createExtensionProvider } from './helpers/extension/createExtensionProvider';
-import { getConfig } from './helpers/getConfig';
 import { createIframeProvider } from './helpers/iframe/createIframeProvider';
 import { createLedgerProvider } from './helpers/ledger/createLedgerProvider';
 import { createWalletConnectProvider } from './helpers/walletConnect/createWalletConnectProvider';
@@ -26,12 +23,10 @@ export class ProviderFactory {
   }
 
   public static async create({
-    type,
-    config: userConfig
+    type
   }: IProviderFactory): Promise<DappProvider> {
     let createdProvider: IProvider | null = null;
-    const config = await getConfig(userConfig);
-    const { account, UI, walletConnect } = config;
+    const address = getAddress();
 
     switch (type) {
       case ProviderTypeEnum.extension: {
@@ -45,7 +40,7 @@ export class ProviderFactory {
 
       case ProviderTypeEnum.crossWindow: {
         const provider = await createCrossWindowProvider({
-          address: account?.address
+          address
         });
         createdProvider = provider as unknown as IProvider;
 
@@ -55,7 +50,7 @@ export class ProviderFactory {
       }
 
       case ProviderTypeEnum.ledger: {
-        const ledgerProvider = await createLedgerProvider(UI.ledger.mount);
+        const ledgerProvider = await createLedgerProvider();
 
         if (!ledgerProvider) {
           throw new Error('Unable to create ledger provider');
@@ -65,21 +60,14 @@ export class ProviderFactory {
 
         createdProvider.getType = () => ProviderTypeEnum.ledger;
 
-        const loggedIn = getIsLoggedIn();
-
-        if (loggedIn) {
-          console.warn('Already logged in with:', getAddress());
-          throw new Error(SECOND_LOGIN_ATTEMPT_ERROR);
-        }
-
         await createdProvider.init?.();
 
         break;
       }
 
       case ProviderTypeEnum.metamask: {
         const provider = await createIframeProvider({
-          address: account?.address,
+          address,
           type: IframeLoginTypes.metamask
         });
 
@@ -96,7 +84,7 @@ export class ProviderFactory {
 
       case ProviderTypeEnum.passkey: {
         const provider = await createIframeProvider({
-          address: account?.address,
+          address,
           type: IframeLoginTypes.passkey
         });
 
@@ -111,10 +99,7 @@ export class ProviderFactory {
         break;
       }
       case ProviderTypeEnum.walletConnect: {
-        const provider = await createWalletConnectProvider({
-          mount: UI.walletConnect.mount,
-          config: walletConnect
-        });
+        const provider = await createWalletConnectProvider({} as any);
 
         if (!provider) {
           throw new Error('Unable to create wallet connect provider');
@@ -130,7 +115,7 @@ export class ProviderFactory {
       default: {
         for (const customProvider of this._customProviders) {
           if (customProvider.type === type) {
-            createdProvider = await customProvider.constructor(config);
+            createdProvider = await customProvider.constructor(address);
             createdProvider.getType = () => type;
           }
         }

src/core/providers/helpers/components/SignTransactionsModal/SignTransactionsStateManager.ts

@@ -0,0 +1,70 @@
+import {
+  ISignTransactionsModalData,
+  SignEventsEnum
+} from './signTransactionsModal.types';
+
+export interface IEventBus {
+  publish(event: string, data: any): void;
+}
+
+const notInitializedError = () => new Error('Event bus not initialized');
+
+export class SignTransactionsStateManager<T extends IEventBus = IEventBus> {
+  private static instance: SignTransactionsStateManager<IEventBus> | null =
+    null;
+  public readonly addressesPerPage = 10;
+
+  private eventBus: T = {
+    publish: notInitializedError,
+    subscribe: notInitializedError,
+    unsubscribe: notInitializedError
+  } as unknown as T;
+
+  // whole data to be sent on update events
+  private initialData: ISignTransactionsModalData = {
+    transaction: null
+  };
+
+  private data: ISignTransactionsModalData = { ...this.initialData };
+
+  private constructor(eventBus: T) {
+    this.eventBus = eventBus;
+    this.resetData();
+  }
+
+  public static getInstance<U extends IEventBus>(
+    eventBus?: U
+  ): SignTransactionsStateManager<U> | null {
+    if (!eventBus) {
+      return null;
+    }
+    if (!SignTransactionsStateManager.instance) {
+      SignTransactionsStateManager.instance = new SignTransactionsStateManager(
+        eventBus
+      );
+    }
+    return SignTransactionsStateManager.instance as SignTransactionsStateManager<U>;
+  }
+
+  public updateTransaction(members: Partial<ISignTransactionsModalData>): void {
+    this.data = {
+      ...this.data,
+      ...members
+    };
+    this.notifyDataUpdate();
+  }
+
+  private resetData(): void {
+    this.data = { ...this.initialData };
+  }
+
+  public closeAndReset(): void {
+    this.data.shouldClose = true;
+    this.notifyDataUpdate();
+    this.resetData();
+  }
+
+  private notifyDataUpdate(): void {
+    this.eventBus.publish(SignEventsEnum.DATA_UPDATE, this.data);
+  }
+}

src/core/providers/helpers/components/SignTransactionsModal/signTransactionsModal.types.ts

@@ -0,0 +1,17 @@
+export interface ITransactionData {
+  receiver?: string;
+  value?: string;
+}
+
+export interface ISignTransactionsModalData {
+  transaction: ITransactionData | null;
+  shouldClose?: true;
+}
+
+export enum SignEventsEnum {
+  'SIGN_TRANSACTION' = 'SIGN_TRANSACTION',
+  'NEXT_PAGE' = 'NEXT_PAGE',
+  'PREV_PAGE' = 'PREV_PAGE',
+  'CLOSE' = 'CLOSE',
+  'DATA_UPDATE' = 'DATA_UPDATE'
+}

src/core/providers/helpers/crossWindow/createCrossWindowProvider.ts

@@ -15,6 +15,7 @@ export async function createCrossWindowProvider({
   const network = networkSelector(getState());
   const provider = CrossWindowProvider.getInstance();
   await provider.init();
+
   provider.setWalletUrl(walletAddress || network.walletAddress);
   provider.setAddress(address);