@dynamic-labs/sdk-react-core 0.19.0-alpha.0 → 0.19.0-alpha.2

package/src/lib/utils/hooks/useUserUpdateRequest/useUpdateUserWithModal/validateUpdateRequest/validateUpdateRequest.js

@@ -0,0 +1,27 @@
+import { getUserProfileFields } from '../../../../functions/getUserProfileFields/getUserProfileFields.js';
+
+// eslint-disable-next-line multiline-comment-style
+/** This function is used to verify that an update request with modal is valid
+ * @returns empty string if request is valid, a string with the error message otherwise
+ */
+const validateUpdateRequest = (fields, user, projectSettings) => {
+    // Catch no fields
+    if (!fields.length)
+        return 'At least one field must be provided for editing';
+    // Catch no user
+    if (!user)
+        return 'No signed-in user';
+    // Catch field not set in dashboard
+    const allUserFields = getUserProfileFields({
+        projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
+        user,
+    });
+    for (const field of fields) {
+        // i.e. If any of the provided fields is not found in the project settings fields
+        if (!allUserFields.find(({ name }) => name === field))
+            return `Please ensure field "${field}" is enabled under "Configurations > Onboarding > Information capture" in your app's dashboard before using it with updateUserWithModal`;
+    }
+    return '';
+};
+
+export { validateUpdateRequest };

package/src/lib/utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs

@@ -2,102 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../../../../_virtual/_tslib.cjs');
-var React = require('react');
-var yup = require('yup');
-var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
-var api = require('../../../data/api.cjs');
-var isEmailVerificationRequired = require('../../functions/authenication/isEmailVerificationRequired/isEmailVerificationRequired.cjs');
-var EmailVerificationContext = require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
-var useEmailVerificationRequest = require('../authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.cjs');
-var useUpdateUserProfileByJWTCallback = require('../useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.cjs');
-var decodeJwt = require('../../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
-require('@dynamic-labs/iconic');
-require('@dynamic-labs/wallet-connector-core');
-require('react/jsx-runtime');
-require('../../../context/ViewContext/ViewContext.cjs');
-require('../../../shared/logger.cjs');
-require('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
-require('../../constants/colors.cjs');
-require('../../../shared/utils/classes/storage/localStorage.cjs');
-require('ethers');
-require('../../../shared/consts/index.cjs');
+var useUpdateUser = require('./useUpdateUser/useUpdateUser.cjs');
+var useUpdateUserWithModal = require('./useUpdateUserWithModal/useUpdateUserWithModal.cjs');
 
-// User Fields Schema without captchaToken and policiesConsent properties
-const userFieldsSchema = yup.object().shape({
-    alias: yup.string(),
-    btcWallet: yup.string(),
-    ckbWallet: yup.string(),
-    country: yup.string(),
-    discordNotification: yup.boolean(),
-    dogeWallet: yup.string(),
-    email: yup.string(),
-    emailNotification: yup.boolean(),
-    firstName: yup.string(),
-    jobTitle: yup.string(),
-    kasWallet: yup.string(),
-    kdaWallet: yup.string(),
-    lastName: yup.string(),
-    ltcWallet: yup.string(),
-    newsletterNotification: yup.boolean(),
-    phoneNumber: yup.string(),
-    tShirtSize: yup.string(),
-    team: yup.string(),
-    username: yup.string(),
-});
-// Hook exposed to the public
+/* eslint-disable sort-keys */
+// Hook only available internally
 const useUserUpdateRequestInternal = ({ validationSchemaStripUnknown, }) => {
-    const { authToken, onboardingOnlyJwt, environmentId } = useInternalDynamicContext.useInternalDynamicContext();
-    const jwtToken = onboardingOnlyJwt || authToken;
-    const { setVerificationUUID, setEmail } = EmailVerificationContext.useEmailVerificationContext();
-    const { verifyEmail: verifyEmailFn } = useEmailVerificationRequest.useEmailVerificationRequest();
-    const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback.useUpdateUserProfileByJWTCallback();
-    const updateUser = React.useCallback((userFields, userEnvironmentId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c;
-        const validatedUserFields = yield userFieldsSchema.validate(userFields, {
-            stripUnknown: validationSchemaStripUnknown,
-        });
-        const updateUserProfileResponse = yield api.updateUserProfileFields(jwtToken, userEnvironmentId || environmentId, validatedUserFields);
-        // check if decoded JWT still somehow has missing fields, we can't proceed if it does
-        const decodedJwt = decodeJwt.decodeJwt(updateUserProfileResponse.jwt);
-        const missingFields = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) !== null && _a !== void 0 ? _a : [];
-        const _isEmailVerificationRequired = isEmailVerificationRequired.isEmailVerificationRequired(updateUserProfileResponse);
-        if (!_isEmailVerificationRequired) {
-            // If email verification is not needed then we can update the user profile immediately.
-            yield updateUserProfileByJWT(updateUserProfileResponse.jwt);
-            return {
-                isEmailVerificationRequired: false,
-                missingFields,
-                updateUserProfileResponse,
-            };
-        }
-        // We update EmailContext to use this information in the Email Verification view
-        setEmail((_b = updateUserProfileResponse.emailVerification) === null || _b === void 0 ? void 0 : _b.email);
-        setVerificationUUID((_c = updateUserProfileResponse.emailVerification) === null || _c === void 0 ? void 0 : _c.verificationUUID);
-        // DYN-2046 - Customers have the opportunity to programmatically use our email verification and profile editing.
-        // VerifyEmailFN was scoped to bypass the problem with memoization of the state at the beginning of Promise.
-        // setEmail and setVerificationUUID in the above lines will are not visible in this promise.
-        const scopedVerifyEmailFn = (verificationToken) => {
-            var _a;
-            return verifyEmailFn(verificationToken, (_a = updateUserProfileResponse.emailVerification) === null || _a === void 0 ? void 0 : _a.verificationUUID);
-        };
-        return {
-            isEmailVerificationRequired: true,
-            missingFields,
-            updateUserProfileResponse,
-            verifyEmailFn: scopedVerifyEmailFn,
-        };
-    }), [
-        environmentId,
-        jwtToken,
-        setEmail,
-        setVerificationUUID,
-        validationSchemaStripUnknown,
-        updateUserProfileByJWT,
-        verifyEmailFn,
-    ]);
-    return { updateUser };
+    const updateUser = useUpdateUser.useUpdateUser(validationSchemaStripUnknown);
+    const updateUserWithModal = useUpdateUserWithModal.useUpdateUserWithModal(updateUser);
+    return { updateUser, updateUserWithModal };
 };
 // Hook exposed to the clients
 // We do not want customers to be able to edit properties such as policiesConsent or captchaToken

package/src/lib/utils/hooks/useUserUpdateRequest/useUserUpdateRequest.d.ts

@@ -1,30 +1,10 @@
-import { UserFields } from '@dynamic-labs/sdk-api';
-export type UpdateUserFieldsArg = Omit<UserFields, 'captchaToken' | 'policiesConsent'>;
 export declare const useUserUpdateRequestInternal: ({ validationSchemaStripUnknown, }: {
     validationSchemaStripUnknown: boolean;
 }) => {
-    updateUser: (userFields: UpdateUserFieldsArg, userEnvironmentId?: string) => Promise<{
-        isEmailVerificationRequired: boolean;
-        missingFields: import("@dynamic-labs/sdk-api").ProjectSettingsKyc[];
-        updateUserProfileResponse: import("@dynamic-labs/sdk-api").UpdateSelfResponse;
-        verifyEmailFn?: undefined;
-    } | {
-        isEmailVerificationRequired: boolean;
-        missingFields: import("@dynamic-labs/sdk-api").ProjectSettingsKyc[];
-        updateUserProfileResponse: import("@dynamic-labs/sdk-api").UpdateSelfResponse;
-        verifyEmailFn: (verificationToken: string) => Promise<import("@dynamic-labs/sdk-api").UpdateSelfResponse>;
-    }>;
+    updateUser: (userFields: import("./useUpdateUser").UpdateUserFieldsArg, userEnvironmentId?: string | undefined) => Promise<import("./useUpdateUser").UpdateUserReturnPayload>;
+    updateUserWithModal: (fields: import("./useUpdateUserWithModal").UpdateUserWithModalFields, options?: import("./useUpdateUserWithModal").UpdateUserWithModalOptions | undefined) => Promise<import("@dynamic-labs/sdk-api").UserFields>;
 };
 export declare const useUserUpdateRequest: () => {
-    updateUser: (userFields: UpdateUserFieldsArg, userEnvironmentId?: string) => Promise<{
-        isEmailVerificationRequired: boolean;
-        missingFields: import("@dynamic-labs/sdk-api").ProjectSettingsKyc[];
-        updateUserProfileResponse: import("@dynamic-labs/sdk-api").UpdateSelfResponse;
-        verifyEmailFn?: undefined;
-    } | {
-        isEmailVerificationRequired: boolean;
-        missingFields: import("@dynamic-labs/sdk-api").ProjectSettingsKyc[];
-        updateUserProfileResponse: import("@dynamic-labs/sdk-api").UpdateSelfResponse;
-        verifyEmailFn: (verificationToken: string) => Promise<import("@dynamic-labs/sdk-api").UpdateSelfResponse>;
-    }>;
+    updateUser: (userFields: import("./useUpdateUser").UpdateUserFieldsArg, userEnvironmentId?: string | undefined) => Promise<import("./useUpdateUser").UpdateUserReturnPayload>;
+    updateUserWithModal: (fields: import("./useUpdateUserWithModal").UpdateUserWithModalFields, options?: import("./useUpdateUserWithModal").UpdateUserWithModalOptions | undefined) => Promise<import("@dynamic-labs/sdk-api").UserFields>;
 };

package/src/lib/utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js

@@ -1,99 +1,12 @@
-import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useCallback } from 'react';
-import { object, string, boolean } from 'yup';
-import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
-import { updateUserProfileFields } from '../../../data/api.js';
-import { isEmailVerificationRequired } from '../../functions/authenication/isEmailVerificationRequired/isEmailVerificationRequired.js';
-import { useEmailVerificationContext } from '../../../context/EmailVerificationContext/EmailVerificationContext.js';
-import { useEmailVerificationRequest } from '../authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.js';
-import { useUpdateUserProfileByJWTCallback } from '../useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.js';
-import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.js';
-import '@dynamic-labs/iconic';
-import '@dynamic-labs/wallet-connector-core';
-import 'react/jsx-runtime';
-import '../../../context/ViewContext/ViewContext.js';
-import '../../../shared/logger.js';
-import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
-import '../../constants/colors.js';
-import '../../../shared/utils/classes/storage/localStorage.js';
-import 'ethers';
-import '../../../shared/consts/index.js';
+import { useUpdateUser } from './useUpdateUser/useUpdateUser.js';
+import { useUpdateUserWithModal } from './useUpdateUserWithModal/useUpdateUserWithModal.js';
 
-// User Fields Schema without captchaToken and policiesConsent properties
-const userFieldsSchema = object().shape({
-    alias: string(),
-    btcWallet: string(),
-    ckbWallet: string(),
-    country: string(),
-    discordNotification: boolean(),
-    dogeWallet: string(),
-    email: string(),
-    emailNotification: boolean(),
-    firstName: string(),
-    jobTitle: string(),
-    kasWallet: string(),
-    kdaWallet: string(),
-    lastName: string(),
-    ltcWallet: string(),
-    newsletterNotification: boolean(),
-    phoneNumber: string(),
-    tShirtSize: string(),
-    team: string(),
-    username: string(),
-});
-// Hook exposed to the public
+/* eslint-disable sort-keys */
+// Hook only available internally
 const useUserUpdateRequestInternal = ({ validationSchemaStripUnknown, }) => {
-    const { authToken, onboardingOnlyJwt, environmentId } = useInternalDynamicContext();
-    const jwtToken = onboardingOnlyJwt || authToken;
-    const { setVerificationUUID, setEmail } = useEmailVerificationContext();
-    const { verifyEmail: verifyEmailFn } = useEmailVerificationRequest();
-    const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback();
-    const updateUser = useCallback((userFields, userEnvironmentId) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c;
-        const validatedUserFields = yield userFieldsSchema.validate(userFields, {
-            stripUnknown: validationSchemaStripUnknown,
-        });
-        const updateUserProfileResponse = yield updateUserProfileFields(jwtToken, userEnvironmentId || environmentId, validatedUserFields);
-        // check if decoded JWT still somehow has missing fields, we can't proceed if it does
-        const decodedJwt = decodeJwt(updateUserProfileResponse.jwt);
-        const missingFields = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) !== null && _a !== void 0 ? _a : [];
-        const _isEmailVerificationRequired = isEmailVerificationRequired(updateUserProfileResponse);
-        if (!_isEmailVerificationRequired) {
-            // If email verification is not needed then we can update the user profile immediately.
-            yield updateUserProfileByJWT(updateUserProfileResponse.jwt);
-            return {
-                isEmailVerificationRequired: false,
-                missingFields,
-                updateUserProfileResponse,
-            };
-        }
-        // We update EmailContext to use this information in the Email Verification view
-        setEmail((_b = updateUserProfileResponse.emailVerification) === null || _b === void 0 ? void 0 : _b.email);
-        setVerificationUUID((_c = updateUserProfileResponse.emailVerification) === null || _c === void 0 ? void 0 : _c.verificationUUID);
-        // DYN-2046 - Customers have the opportunity to programmatically use our email verification and profile editing.
-        // VerifyEmailFN was scoped to bypass the problem with memoization of the state at the beginning of Promise.
-        // setEmail and setVerificationUUID in the above lines will are not visible in this promise.
-        const scopedVerifyEmailFn = (verificationToken) => {
-            var _a;
-            return verifyEmailFn(verificationToken, (_a = updateUserProfileResponse.emailVerification) === null || _a === void 0 ? void 0 : _a.verificationUUID);
-        };
-        return {
-            isEmailVerificationRequired: true,
-            missingFields,
-            updateUserProfileResponse,
-            verifyEmailFn: scopedVerifyEmailFn,
-        };
-    }), [
-        environmentId,
-        jwtToken,
-        setEmail,
-        setVerificationUUID,
-        validationSchemaStripUnknown,
-        updateUserProfileByJWT,
-        verifyEmailFn,
-    ]);
-    return { updateUser };
+    const updateUser = useUpdateUser(validationSchemaStripUnknown);
+    const updateUserWithModal = useUpdateUserWithModal(updateUser);
+    return { updateUser, updateUserWithModal };
 };
 // Hook exposed to the clients
 // We do not want customers to be able to edit properties such as policiesConsent or captchaToken

package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.cjs

@@ -101,6 +101,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
             setView('wallet-used');
             setIsSingleWalletAccount(false);
             if (e.code === 'reassign_wallet_error') {
+                setView('wallet-cannot-be-transferred');
                 setIsSingleWalletAccount(true);
             }
             return;
@@ -145,6 +146,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
     return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const walletProvider = getWalletProvider.getWalletProvider(walletConnector);
         try {
+            setIsVerificationInProgress(true);
             const Jwt = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth);
             const decodedJwt = decodeJwt.decodeJwt(Jwt);
             if (decodedJwt === undefined)

package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.js

@@ -97,6 +97,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
             setView('wallet-used');
             setIsSingleWalletAccount(false);
             if (e.code === 'reassign_wallet_error') {
+                setView('wallet-cannot-be-transferred');
                 setIsSingleWalletAccount(true);
             }
             return;
@@ -141,6 +142,7 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
     return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, }) => __awaiter(void 0, void 0, void 0, function* () {
         const walletProvider = getWalletProvider(walletConnector);
         try {
+            setIsVerificationInProgress(true);
             const Jwt = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth);
             const decodedJwt = decodeJwt(Jwt);
             if (decodedJwt === undefined)

package/src/lib/utils/hooks/useWalletConnectorEvent/index.d.ts

@@ -0,0 +1 @@
+export { useWalletConnectorEvent } from './useWalletConnectorEvent';

package/src/lib/utils/hooks/useWalletConnectorEvent/useWalletConnectorEvent.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs');
+
+const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
+    const callbackRef = React.useRef(handler);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        callbackRef.current = handler;
+    }, [handler]);
+    React.useEffect(() => {
+        if (!eventEmitters)
+            return;
+        const eventEmittersArray = Array.isArray(eventEmitters)
+            ? eventEmitters
+            : [eventEmitters];
+        /**
+         * Initialize the event listeners for the wallet connectors
+         * to ensure they were initialized before listening to events
+         *
+         * This will be removed when all wallets are migrated to
+         * use the event emitter "emit" method
+         *
+         * Ticket todo - QNTM-88
+         */
+        eventEmittersArray.forEach((connector) => connector.initEventListener());
+        const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));
+        const unsubscribeCallbacks = uniqueEventEmitters.map((emitter) => {
+            const callback = (...args) => {
+                callbackRef.current(emitter, ...args);
+            };
+            emitter.on(eventName, callback);
+            return () => emitter.off(eventName, callback);
+        });
+        return () => unsubscribeCallbacks.forEach((unsubscribe) => unsubscribe());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [eventEmitters, eventName]);
+};
+
+exports.useWalletConnectorEvent = useWalletConnectorEvent;

package/src/lib/utils/hooks/useWalletConnectorEvent/useWalletConnectorEvent.d.ts

@@ -0,0 +1,12 @@
+import { WalletConnector, WalletConnectorEventTypes } from '@dynamic-labs/wallet-connector-core';
+/**
+ * This type is a copy of the ArgumentMap type from eventemitter3 package.
+ * Is used extract the arguments from a event type.
+ * Then we can use the arguments to reconstruct the callback we want
+ */
+type ArgumentMap<T extends object> = {
+    [K in keyof T]: T[K] extends (...args: any[]) => void ? Parameters<T[K]> : T[K] extends any[] ? T[K] : any[];
+};
+type EventArg<Event extends keyof WalletConnectorEventTypes> = ArgumentMap<WalletConnectorEventTypes>[Extract<Event, keyof WalletConnectorEventTypes>];
+export declare const useWalletConnectorEvent: <Event_1 extends keyof WalletConnectorEventTypes = keyof WalletConnectorEventTypes>(eventEmitters: WalletConnector | WalletConnector[] | undefined, eventName: Event_1, handler: (connector: WalletConnector, ...args: EventArg<Event_1>) => void) => void;
+export {};

package/src/lib/utils/hooks/useWalletConnectorEvent/useWalletConnectorEvent.js

@@ -0,0 +1,38 @@
+import { useRef, useEffect } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+
+const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
+    const callbackRef = useRef(handler);
+    useIsomorphicLayoutEffect(() => {
+        callbackRef.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        if (!eventEmitters)
+            return;
+        const eventEmittersArray = Array.isArray(eventEmitters)
+            ? eventEmitters
+            : [eventEmitters];
+        /**
+         * Initialize the event listeners for the wallet connectors
+         * to ensure they were initialized before listening to events
+         *
+         * This will be removed when all wallets are migrated to
+         * use the event emitter "emit" method
+         *
+         * Ticket todo - QNTM-88
+         */
+        eventEmittersArray.forEach((connector) => connector.initEventListener());
+        const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));
+        const unsubscribeCallbacks = uniqueEventEmitters.map((emitter) => {
+            const callback = (...args) => {
+                callbackRef.current(emitter, ...args);
+            };
+            emitter.on(eventName, callback);
+            return () => emitter.off(eventName, callback);
+        });
+        return () => unsubscribeCallbacks.forEach((unsubscribe) => unsubscribe());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [eventEmitters, eventName]);
+};
+
+export { useWalletConnectorEvent };

package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.cjs

@@ -44,6 +44,18 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
         }
         return connectedWallets;
     }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
+    /**
+     * This useEffect is temporary.
+     * While the wallet connectors don't use the event emitter, we need to manually
+     * initialize the bridge between the old event listeners and the new event emitter.
+     * When the wallet connectors are migrated to the new event emitter, there will be no
+     * need to initialize or teardown event listeners, then we can remove this useEffect.
+     * @todo remove this useEffect
+     * Ticket todo - QNTM-88
+     */
+    React.useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
+        wallet.connector.initEventListener();
+    }), [walletsBasedOnAuthMode]);
     const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = React.useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
     React.useEffect(() => {

package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.js

@@ -40,6 +40,18 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
         }
         return connectedWallets;
     }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
+    /**
+     * This useEffect is temporary.
+     * While the wallet connectors don't use the event emitter, we need to manually
+     * initialize the bridge between the old event listeners and the new event emitter.
+     * When the wallet connectors are migrated to the new event emitter, there will be no
+     * need to initialize or teardown event listeners, then we can remove this useEffect.
+     * @todo remove this useEffect
+     * Ticket todo - QNTM-88
+     */
+    useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
+        wallet.connector.initEventListener();
+    }), [walletsBasedOnAuthMode]);
     const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
     useEffect(() => {