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

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.js

@@ -24,11 +24,11 @@ import '@dynamic-labs/multi-wallet';
 import { isSupportedNetwork } from '../../../functions/isSupportedNetwork/isSupportedNetwork.js';
 import { isProgrammableNetworkSwitchSupported } from '../../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.js';
 
-const useConnectAndSign = () => {
+const useConnectAndSign = ({ shouldUpdateWallets = true } = {}) => {
     const { setView, goToInitialView } = useViewContext();
     const { setErrorMessage } = useErrorContext();
     const { captchaToken } = useCaptchaContext();
-    const { authMode, connectWallet, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, user, walletUiUtils, setCallback, setIsVerificationInProgress, isFullyConnected, } = useInternalDynamicContext();
+    const { authMode, connectWallet, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, user, walletUiUtils, setCallback, setIsVerificationInProgress, isFullyConnected, walletsToConnectByChain, } = useInternalDynamicContext();
     const { handleWalletsToConnect } = useHandleWalletsToConnect();
     const verifyWallet = useVerifyWallet({
         consumeNonce,
@@ -68,8 +68,10 @@ const useConnectAndSign = () => {
             }
             if (isConnectOnly(user, authMode)) {
                 LocalStorage.setToLS(LAST_USED_WALLET, walletConnector.name);
-                handleWalletsToConnect();
-                if (!isFullyConnected) {
+                if (shouldUpdateWallets) {
+                    handleWalletsToConnect();
+                }
+                if (!isFullyConnected || (walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain.length)) {
                     setCallback('connectSuccess');
                 }
                 return;

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

@@ -21,7 +21,7 @@ export { usePromise } from './usePromise';
 export { useMutation } from './useMutation';
 export { useUserUpdateRequest } from './useUserUpdateRequest/useUserUpdateRequest';
 export { useColorSchemePreference } from './useColorSchemePreference';
-export { useGetSocialIcon } from './useGetSocialIcon';
+export { useFindSocialIcon } from './useFindSocialIcon';
 export { useIconThemeVariant } from './useIconThemeVariant';
 export type { IconThemeVariant } from './useIconThemeVariant';
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
@@ -30,3 +30,6 @@ export { useInterval } from './useInterval/useInterval';
 export { useCountdown } from './useCountdown/useCountdown';
 export { useValidateSession } from './useValidateSession';
 export { useEventListener } from './useEventListener';
+export { useWalletConnectorEvent } from './useWalletConnectorEvent';
+export { useTransactionWithGasPrice } from './useTransactionWithGasPrice';
+export { useTransactionEstimatedGas } from './useTransactionEstimatedGas';

package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.cjs

@@ -3,13 +3,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+var localStorage = require('../../../constants/localStorage.cjs');
+require('../../../constants/colors.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+var useLocalStorage = require('../../../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
+require('../../../../shared/consts/index.cjs');
 
 const useMultiWallet = (multiWalletSettings) => {
     const isMultiWalletEnabled = multiWalletSettings !== null && multiWalletSettings !== void 0 ? multiWalletSettings : false;
-    const [multiWallet, setMultiWallet] = React.useState(isMultiWalletEnabled);
+    const [multiWallet, setMultiWallet] = useLocalStorage.useLocalStorage(localStorage.IS_MULTI_WALLET_ENABLED, isMultiWalletEnabled);
     React.useEffect(() => {
-        setMultiWallet(isMultiWalletEnabled);
-    }, [isMultiWalletEnabled]);
+        if (multiWalletSettings) {
+            setMultiWallet(multiWalletSettings);
+        }
+    }, [multiWalletSettings]);
     return { multiWallet, setMultiWallet };
 };
 

package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const useMultiWallet: (multiWalletSettings?: boolean) => {
     multiWallet: boolean;
-    setMultiWallet: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setMultiWallet: (value: boolean | ((val: boolean) => boolean)) => void;
 };

package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.js

@@ -1,11 +1,27 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import { IS_MULTI_WALLET_ENABLED } from '../../../constants/localStorage.js';
+import '../../../constants/colors.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import { useLocalStorage } from '../../../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
+import '../../../../shared/consts/index.js';
 
 const useMultiWallet = (multiWalletSettings) => {
     const isMultiWalletEnabled = multiWalletSettings !== null && multiWalletSettings !== void 0 ? multiWalletSettings : false;
-    const [multiWallet, setMultiWallet] = useState(isMultiWalletEnabled);
+    const [multiWallet, setMultiWallet] = useLocalStorage(IS_MULTI_WALLET_ENABLED, isMultiWalletEnabled);
     useEffect(() => {
-        setMultiWallet(isMultiWalletEnabled);
-    }, [isMultiWalletEnabled]);
+        if (multiWalletSettings) {
+            setMultiWallet(multiWalletSettings);
+        }
+    }, [multiWalletSettings]);
     return { multiWallet, setMultiWallet };
 };
 

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

@@ -68,7 +68,8 @@ const useAuthLayoutChecks = (walletConnector) => {
         view === 'login-with-email-or-wallet-full-wallet-list' ||
         view === 'wallet-group' ||
         view === 'pending-connect' ||
-        view === 'account-exists';
+        view === 'account-exists' ||
+        view === 'merge-user-accounts';
     const showQrCodePreHeader = view === 'qr-code' && showQrCodeMessage && !showQrCodeImage;
     return {
         isWalletListTypeView,

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

@@ -64,7 +64,8 @@ const useAuthLayoutChecks = (walletConnector) => {
         view === 'login-with-email-or-wallet-full-wallet-list' ||
         view === 'wallet-group' ||
         view === 'pending-connect' ||
-        view === 'account-exists';
+        view === 'account-exists' ||
+        view === 'merge-user-accounts';
     const showQrCodePreHeader = view === 'qr-code' && showQrCodeMessage && !showQrCodeImage;
     return {
         isWalletListTypeView,

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

@@ -0,0 +1 @@
+export * from './useFindSocialIcon';

package/src/lib/utils/hooks/{useGetSocialIcon/useGetSocialIcon.cjs → useFindSocialIcon/useFindSocialIcon.cjs}

@@ -6,9 +6,9 @@ var React = require('react');
 var iconic = require('@dynamic-labs/iconic');
 var useIconThemeVariant = require('../useIconThemeVariant/useIconThemeVariant.cjs');
 
-const useGetSocialIcon = () => {
+const useFindSocialIcon = () => {
     const variant = useIconThemeVariant.useIconThemeVariant();
-    return React.useCallback((provider) => iconic.getSocialIcon(provider, variant), [variant]);
+    return React.useCallback((provider) => iconic.findSocialIcon(provider, variant), [variant]);
 };
 
-exports.useGetSocialIcon = useGetSocialIcon;
+exports.useFindSocialIcon = useFindSocialIcon;

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

@@ -0,0 +1,3 @@
+import { Iconic } from '@dynamic-labs/iconic';
+import { SocialProvider } from '@dynamic-labs/wallet-connector-core';
+export declare const useFindSocialIcon: () => (provider: SocialProvider) => Iconic | null;

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

@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+import { findSocialIcon } from '@dynamic-labs/iconic';
+import { useIconThemeVariant } from '../useIconThemeVariant/useIconThemeVariant.js';
+
+const useFindSocialIcon = () => {
+    const variant = useIconThemeVariant();
+    return useCallback((provider) => findSocialIcon(provider, variant), [variant]);
+};
+
+export { useFindSocialIcon };

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

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

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

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var usePromise = require('../usePromise/usePromise.cjs');
+require('@dynamic-labs/sdk-api');
+var logger = require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('react');
+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');
+
+/**
+ * Hook to estimate the gas required for a transaction.
+ *
+ * This hook uses the `usePromise` hook to asynchronously estimate the gas required for a transaction.
+ * It first tries to estimate the gas without the 'from' field in the transaction, as the Alchemy API
+ * checks the origin address funds and can return an error if the origin wallet has no funds for the transaction.
+ * If the error 'UNPREDICTABLE_GAS_LIMIT' is encountered, it tries to estimate the gas again with the
+ * original transaction.
+ *
+ * @see {@link https://docs.alchemy.com/reference/eth-estimategas}
+ * @see {@link https://docs.ethers.org/v5/troubleshooting/errors/#help-UNPREDICTABLE_GAS_LIMIT}
+ *
+ * @param {ethers.providers.Web3Provider} provider - The Web3 provider to use for estimating the gas.
+ * @param {ethers.utils.Deferrable<ethers.providers.TransactionRequest>} transaction - The transaction for
+ * which to estimate the gas.
+ *
+ * @returns {PromiseState<ethers.BigNumber>} A promise that resolves to the estimated gas for the transaction.
+ */
+const useTransactionEstimatedGas = (provider, transaction) => usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    // To safely run estimateGas using alchemy, we need to remove the from address
+    // because alchemy checks the origin address funds and can return an error if
+    // origin wallet has no funds for the transaction
+    // https://docs.alchemy.com/reference/eth-estimategas
+    const transactionWithNoOrigin = _tslib.__rest(transaction, ["from"]);
+    try {
+        return yield provider.estimateGas(transactionWithNoOrigin);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }
+    catch (err) {
+        logger.logger.error(err);
+        // If the error is UNPREDICTABLE_GAS_LIMIT, we try to estimate gas again
+        // with original transaction
+        // https://docs.ethers.org/v5/troubleshooting/errors/#help-UNPREDICTABLE_GAS_LIMIT
+        if (err.code === 'UNPREDICTABLE_GAS_LIMIT') {
+            return provider.estimateGas(transaction);
+        }
+        throw err;
+    }
+}), { deps: [transaction, provider] });
+
+exports.useTransactionEstimatedGas = useTransactionEstimatedGas;

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

@@ -0,0 +1,20 @@
+import { ethers } from 'ethers';
+/**
+ * Hook to estimate the gas required for a transaction.
+ *
+ * This hook uses the `usePromise` hook to asynchronously estimate the gas required for a transaction.
+ * It first tries to estimate the gas without the 'from' field in the transaction, as the Alchemy API
+ * checks the origin address funds and can return an error if the origin wallet has no funds for the transaction.
+ * If the error 'UNPREDICTABLE_GAS_LIMIT' is encountered, it tries to estimate the gas again with the
+ * original transaction.
+ *
+ * @see {@link https://docs.alchemy.com/reference/eth-estimategas}
+ * @see {@link https://docs.ethers.org/v5/troubleshooting/errors/#help-UNPREDICTABLE_GAS_LIMIT}
+ *
+ * @param {ethers.providers.Web3Provider} provider - The Web3 provider to use for estimating the gas.
+ * @param {ethers.utils.Deferrable<ethers.providers.TransactionRequest>} transaction - The transaction for
+ * which to estimate the gas.
+ *
+ * @returns {PromiseState<ethers.BigNumber>} A promise that resolves to the estimated gas for the transaction.
+ */
+export declare const useTransactionEstimatedGas: (provider: ethers.providers.Web3Provider, transaction: ethers.utils.Deferrable<ethers.providers.TransactionRequest>) => import("../usePromise").PromiseState<ethers.BigNumber, Error>;

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

@@ -0,0 +1,57 @@
+import { __awaiter, __rest } from '../../../../../_virtual/_tslib.js';
+import { usePromise } from '../usePromise/usePromise.js';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import 'react';
+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';
+
+/**
+ * Hook to estimate the gas required for a transaction.
+ *
+ * This hook uses the `usePromise` hook to asynchronously estimate the gas required for a transaction.
+ * It first tries to estimate the gas without the 'from' field in the transaction, as the Alchemy API
+ * checks the origin address funds and can return an error if the origin wallet has no funds for the transaction.
+ * If the error 'UNPREDICTABLE_GAS_LIMIT' is encountered, it tries to estimate the gas again with the
+ * original transaction.
+ *
+ * @see {@link https://docs.alchemy.com/reference/eth-estimategas}
+ * @see {@link https://docs.ethers.org/v5/troubleshooting/errors/#help-UNPREDICTABLE_GAS_LIMIT}
+ *
+ * @param {ethers.providers.Web3Provider} provider - The Web3 provider to use for estimating the gas.
+ * @param {ethers.utils.Deferrable<ethers.providers.TransactionRequest>} transaction - The transaction for
+ * which to estimate the gas.
+ *
+ * @returns {PromiseState<ethers.BigNumber>} A promise that resolves to the estimated gas for the transaction.
+ */
+const useTransactionEstimatedGas = (provider, transaction) => usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
+    // To safely run estimateGas using alchemy, we need to remove the from address
+    // because alchemy checks the origin address funds and can return an error if
+    // origin wallet has no funds for the transaction
+    // https://docs.alchemy.com/reference/eth-estimategas
+    const transactionWithNoOrigin = __rest(transaction, ["from"]);
+    try {
+        return yield provider.estimateGas(transactionWithNoOrigin);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }
+    catch (err) {
+        logger.error(err);
+        // If the error is UNPREDICTABLE_GAS_LIMIT, we try to estimate gas again
+        // with original transaction
+        // https://docs.ethers.org/v5/troubleshooting/errors/#help-UNPREDICTABLE_GAS_LIMIT
+        if (err.code === 'UNPREDICTABLE_GAS_LIMIT') {
+            return provider.estimateGas(transaction);
+        }
+        throw err;
+    }
+}), { deps: [transaction, provider] });
+
+export { useTransactionEstimatedGas };

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

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

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

@@ -0,0 +1,32 @@
+import { ethers } from 'ethers';
+type UseTransactionWithGasPriceProps = {
+    provider: ethers.providers.Provider;
+    transaction: ethers.utils.Deferrable<ethers.providers.TransactionRequest>;
+    increasePercentage?: number;
+    enabled?: boolean;
+};
+/**
+ * A React Hook that returns a transaction object with the gas price set to the current gas price from the provider.
+ * The gas price is increased by a certain percentage specified by the user. The hook also allows the user to enable
+ * or disable this functionality.
+ *
+ * @param {Object} props - The properties for the hook.
+ * @param {ethers.providers.Provider} props.provider - The provider to use for getting the current gas price.
+ * @param {ethers.utils.Deferrable<ethers.providers.TransactionRequest>} props.transaction - The transaction object.
+ * @param {number} props.increasePercentage - The percentage by which to increase the current gas price.
+ * @param {boolean} [props.enabled=true] - A flag to enable or disable the gas price increase functionality.
+ *
+ * @returns {ethers.utils.Deferrable<ethers.providers.TransactionRequest>} A new transaction object with the gas price.
+ * If the `enabled` flag is set to false, or if the gas price is not available, or if the transaction already has a
+ * gas price set, the original transaction object is returned.
+ *
+ * @example
+ * const updatedTransaction = useTransactionWithGasPrice({
+ *   provider: myProvider,
+ *   transaction: myTransaction,
+ *   increasePercentage: 10,
+ *   enabled: true,
+ * });
+ */
+export declare const useTransactionWithGasPrice: ({ increasePercentage, provider, transaction, enabled, }: UseTransactionWithGasPriceProps) => ethers.utils.Deferrable<ethers.providers.TransactionRequest>;
+export {};

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(() => {