@dynamic-labs/sdk-react-core 0.17.0-RC.17 → 0.17.0-RC.19

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

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+require('../../constants/colors.cjs');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/utils');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('react');
+require('ethers');
+var getReferencedAccount = require('../../functions/getReferencedAccount/getReferencedAccount.cjs');
+
+/**
+ * This function will use a referenced account to kick off the social wallet
+ * authentication. This is useful in the multiwallet scenario where the user
+ * wants to set their disconnected social wallet as their primary wallet, in
+ * which case the wallet needs to be reconnected
+ */
+const reconnectSocialWallet = (jwt, wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    if (!walletConnectorCore.isSocialWalletConnector(wallet.connector)) {
+        return;
+    }
+    const socialAccountDataForWallet = getReferencedAccount.getReferencedAccount(jwt, wallet.id);
+    if (!socialAccountDataForWallet ||
+        !socialAccountDataForWallet.oauthProvider) {
+        return;
+    }
+    yield wallet.connector.connect(socialAccountDataForWallet.oauthProvider);
+});
+
+exports.reconnectSocialWallet = reconnectSocialWallet;

package/src/lib/utils/hooks/useWalletConnectors/reconnectSocialWallet.d.ts

@@ -0,0 +1,8 @@
+import { Wallet } from '../../../shared';
+/**
+ * This function will use a referenced account to kick off the social wallet
+ * authentication. This is useful in the multiwallet scenario where the user
+ * wants to set their disconnected social wallet as their primary wallet, in
+ * which case the wallet needs to be reconnected
+ */
+export declare const reconnectSocialWallet: (jwt: string | undefined, wallet: Wallet) => Promise<void>;

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

@@ -0,0 +1,33 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { isSocialWalletConnector } from '@dynamic-labs/wallet-connector-core';
+import '../../constants/colors.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/utils';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import 'react';
+import 'ethers';
+import { getReferencedAccount } from '../../functions/getReferencedAccount/getReferencedAccount.js';
+
+/**
+ * This function will use a referenced account to kick off the social wallet
+ * authentication. This is useful in the multiwallet scenario where the user
+ * wants to set their disconnected social wallet as their primary wallet, in
+ * which case the wallet needs to be reconnected
+ */
+const reconnectSocialWallet = (jwt, wallet) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!isSocialWalletConnector(wallet.connector)) {
+        return;
+    }
+    const socialAccountDataForWallet = getReferencedAccount(jwt, wallet.id);
+    if (!socialAccountDataForWallet ||
+        !socialAccountDataForWallet.oauthProvider) {
+        return;
+    }
+    yield wallet.connector.connect(socialAccountDataForWallet.oauthProvider);
+});
+
+export { reconnectSocialWallet };

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

@@ -21,6 +21,7 @@ var isSameWalletName = require('../../functions/isSameWalletName/isSameWalletNam
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/sdk-api');
 var shouldManuallyReconnectOnRefresh = require('../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.cjs');
+var reconnectSocialWallet = require('./reconnectSocialWallet.cjs');
 
 const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = React.useState(false);
@@ -140,6 +141,11 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
                 emailConnector.setEmail(email);
             }
         }
+        if (walletConnectorCore.isSocialWalletConnector(newPrimaryWallet.connector) &&
+            !newPrimaryWallet.connected) {
+            reconnectSocialWallet.reconnectSocialWallet(authToken, newPrimaryWallet);
+            return;
+        }
         /* istanbul ignore next */
         const publicAddress = yield newPrimaryWallet.connector.fetchPublicAddress({
             onDesktopUri: (uri) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -166,6 +172,7 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
             logger.logger.error('Failed to connect to wallet');
         }
     }), [
+        authToken,
         checkIfAccountChangeIsRequired,
         checkIfShowQrCodeModal,
         getPrimaryWallet,

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

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useState, useCallback, useEffect } from 'react';
-import { isEmailWalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { isEmailWalletConnector, isSocialWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { DynamicError } from '@dynamic-labs/utils';
 import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.js';
 import { logger } from '../../../shared/logger.js';
@@ -17,6 +17,7 @@ import { isSameWalletName } from '../../functions/isSameWalletName/isSameWalletN
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/sdk-api';
 import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.js';
+import { reconnectSocialWallet } from './reconnectSocialWallet.js';
 
 const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = useState(false);
@@ -136,6 +137,11 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
                 emailConnector.setEmail(email);
             }
         }
+        if (isSocialWalletConnector(newPrimaryWallet.connector) &&
+            !newPrimaryWallet.connected) {
+            reconnectSocialWallet(authToken, newPrimaryWallet);
+            return;
+        }
         /* istanbul ignore next */
         const publicAddress = yield newPrimaryWallet.connector.fetchPublicAddress({
             onDesktopUri: (uri) => __awaiter(void 0, void 0, void 0, function* () {
@@ -162,6 +168,7 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
             logger.error('Failed to connect to wallet');
         }
     }), [
+        authToken,
         checkIfAccountChangeIsRequired,
         checkIfShowQrCodeModal,
         getPrimaryWallet,

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

@@ -91,17 +91,16 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         primaryWallet.connector.setupEventListeners({
             onAccountChange: (accounts) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                 const [newAddress] = accounts;
-                yield computeConnectedStateForWallets();
                 const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
                 if (walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
                     setMultiWalletWidgetState('idle');
                 }
                 else if (!multiWallet) {
                     yield handleLogOut();
+                    return;
                 }
                 else if (multiWalletWidgetState === 'awaiting_account_switch') {
                     handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
-                    yield computeConnectedStateForWallets();
                 }
                 else if (multiWalletWidgetState === 'idle' && newWallet) {
                     setPrimaryWalletId(newWallet.id);
@@ -110,6 +109,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                     if (user) {
                         setMultiWalletWidgetState('detected_new_wallet');
                         setSelectedWalletConnector(primaryWallet.connector);
+                        yield computeConnectedStateForWallets();
                         return;
                     }
                     connectWalletByAddressAndChain(primaryWallet.connector.name, newAddress, primaryWallet.chain);
@@ -118,9 +118,9 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                     logger.logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
                     setMultiWalletWidgetState('idle');
                 }
+                yield computeConnectedStateForWallets();
             }),
             onChainChange: (chain) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                /* istanbul ignore next */
                 setNetwork(parseInt(chain));
             }),
             onDisconnect: handleLogOut,
@@ -137,6 +137,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         secondaryWallets,
         setSelectedWalletConnector,
         handleAccountChangeWhenAwaitingAccountSwitch,
+        setPrimaryWalletId,
     ]);
     const addSecondaryWalletEventListeners = React.useCallback((seen) => {
         const secondaryListeners = {

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

@@ -87,17 +87,16 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         primaryWallet.connector.setupEventListeners({
             onAccountChange: (accounts) => __awaiter(void 0, void 0, void 0, function* () {
                 const [newAddress] = accounts;
-                yield computeConnectedStateForWallets();
                 const newWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
                 if (isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
                     setMultiWalletWidgetState('idle');
                 }
                 else if (!multiWallet) {
                     yield handleLogOut();
+                    return;
                 }
                 else if (multiWalletWidgetState === 'awaiting_account_switch') {
                     handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
-                    yield computeConnectedStateForWallets();
                 }
                 else if (multiWalletWidgetState === 'idle' && newWallet) {
                     setPrimaryWalletId(newWallet.id);
@@ -106,6 +105,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                     if (user) {
                         setMultiWalletWidgetState('detected_new_wallet');
                         setSelectedWalletConnector(primaryWallet.connector);
+                        yield computeConnectedStateForWallets();
                         return;
                     }
                     connectWalletByAddressAndChain(primaryWallet.connector.name, newAddress, primaryWallet.chain);
@@ -114,9 +114,9 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                     logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
                     setMultiWalletWidgetState('idle');
                 }
+                yield computeConnectedStateForWallets();
             }),
             onChainChange: (chain) => __awaiter(void 0, void 0, void 0, function* () {
-                /* istanbul ignore next */
                 setNetwork(parseInt(chain));
             }),
             onDisconnect: handleLogOut,
@@ -133,6 +133,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         secondaryWallets,
         setSelectedWalletConnector,
         handleAccountChangeWhenAwaitingAccountSwitch,
+        setPrimaryWalletId,
     ]);
     const addSecondaryWalletEventListeners = useCallback((seen) => {
         const secondaryListeners = {

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

@@ -18,9 +18,9 @@ require('react/jsx-runtime');
 require('react');
 require('ethers');
 var requiresTwoStepAuthentication = require('../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.cjs');
+require('../../../shared/consts/index.cjs');
 var useConnectAndSign = require('../authenticationHooks/useConnectAndSign/useConnectAndSign.cjs');
 require('../../../config/ApiEndpoint.cjs');
-require('../../../shared/consts/index.cjs');
 var useConnectAndSignSplitSteps = require('../authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.cjs');
 var isSelectedWalletAlreadyConnected = require('../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.cjs');
 

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

@@ -14,9 +14,9 @@ import 'react/jsx-runtime';
 import 'react';
 import 'ethers';
 import { requiresTwoStepAuthentication } from '../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.js';
+import '../../../shared/consts/index.js';
 import { useConnectAndSign } from '../authenticationHooks/useConnectAndSign/useConnectAndSign.js';
 import '../../../config/ApiEndpoint.js';
-import '../../../shared/consts/index.js';
 import { useConnectAndSignSplitSteps } from '../authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.js';
 import { isSelectedWalletAlreadyConnected } from '../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.js';
 

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

@@ -8,40 +8,42 @@ var React = require('react');
 var SignMessageConfirmationModal = require('../../../modals/SignMessageConfirmationModal/SignMessageConfirmationModal.cjs');
 var TransactionConfirmationModal = require('../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs');
 var useConfirmationModal = require('../useConfirmationModal/useConfirmationModal.cjs');
-require('../../constants/colors.cjs');
-require('@dynamic-labs/multi-wallet');
-require('@dynamic-labs/utils');
-var getAuthToken = require('../../functions/getAuthToken/getAuthToken.cjs');
-require('@dynamic-labs/wallet-connector-core');
-require('@dynamic-labs/sdk-api');
 
 const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
-    const fakeSignerRef = React.useRef('disabled');
+    const confirmationStateRef = React.useRef('enabled');
     const { modal: sendTransactionModal, open: openSendTransaction } = useConfirmationModal.useConfirmationModal({
         elementId: 'dynamic-send-transaction',
     });
     const { modal, open: openSignMessage } = useConfirmationModal.useConfirmationModal({
         elementId: 'dynamic-sign-message',
     });
+    const shouldConfirmAction = React.useCallback(() => {
+        if (confirmationStateRef.current === 'disabled') {
+            confirmationStateRef.current = 'enabled';
+            return false;
+        }
+        return true;
+    }, [confirmationStateRef]);
     const signMessage = React.useCallback(({ message, handler }) => {
-        const jwt = getAuthToken.getAuthToken();
-        if (!jwt && fakeSignerRef.current === 'enabled') {
-            fakeSignerRef.current = 'disabled';
+        if (!shouldConfirmAction()) {
             return handler(message);
         }
         return openSignMessage((resolve, reject) => (jsxRuntime.jsx(SignMessageConfirmationModal.SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
-    }, [appLogoUrl, appName, getAppOrigin, openSignMessage]);
+    }, [appLogoUrl, appName, getAppOrigin, openSignMessage, shouldConfirmAction]);
     const sendTransaction = React.useCallback(({ transaction, handler, provider }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        return openSendTransaction((resolve, reject) => (jsxRuntime.jsx(TransactionConfirmationModal.TransactionConfirmationModal, { title: 'Send Transaction', appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
-    }), [appLogoUrl, appName, getAppOrigin, openSendTransaction]);
-    const enableInternalSign = React.useCallback(() => {
-        fakeSignerRef.current = 'enabled';
+        if (!shouldConfirmAction()) {
+            return handler(transaction);
+        }
+        return openSendTransaction((resolve, reject) => (jsxRuntime.jsx(TransactionConfirmationModal.TransactionConfirmationModal, { title: 'Send Transaction', transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
+    }), [openSendTransaction, shouldConfirmAction]);
+    const disabledConfirmationOnce = React.useCallback(() => {
+        confirmationStateRef.current = 'disabled';
     }, []);
     const walletUiUtils = React.useMemo(() => ({
-        enableInternalSign,
+        disabledConfirmationOnce,
         sendTransaction,
         signMessage,
-    }), [signMessage, enableInternalSign, sendTransaction]);
+    }), [signMessage, disabledConfirmationOnce, sendTransaction]);
     return React.useMemo(() => [modal || sendTransactionModal, walletUiUtils], [modal, sendTransactionModal, walletUiUtils]);
 };
 

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

@@ -4,40 +4,42 @@ import { useRef, useCallback, useMemo } from 'react';
 import { SignMessageConfirmationModal } from '../../../modals/SignMessageConfirmationModal/SignMessageConfirmationModal.js';
 import { TransactionConfirmationModal } from '../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.js';
 import { useConfirmationModal } from '../useConfirmationModal/useConfirmationModal.js';
-import '../../constants/colors.js';
-import '@dynamic-labs/multi-wallet';
-import '@dynamic-labs/utils';
-import { getAuthToken } from '../../functions/getAuthToken/getAuthToken.js';
-import '@dynamic-labs/wallet-connector-core';
-import '@dynamic-labs/sdk-api';
 
 const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
-    const fakeSignerRef = useRef('disabled');
+    const confirmationStateRef = useRef('enabled');
     const { modal: sendTransactionModal, open: openSendTransaction } = useConfirmationModal({
         elementId: 'dynamic-send-transaction',
     });
     const { modal, open: openSignMessage } = useConfirmationModal({
         elementId: 'dynamic-sign-message',
     });
+    const shouldConfirmAction = useCallback(() => {
+        if (confirmationStateRef.current === 'disabled') {
+            confirmationStateRef.current = 'enabled';
+            return false;
+        }
+        return true;
+    }, [confirmationStateRef]);
     const signMessage = useCallback(({ message, handler }) => {
-        const jwt = getAuthToken();
-        if (!jwt && fakeSignerRef.current === 'enabled') {
-            fakeSignerRef.current = 'disabled';
+        if (!shouldConfirmAction()) {
             return handler(message);
         }
         return openSignMessage((resolve, reject) => (jsx(SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
-    }, [appLogoUrl, appName, getAppOrigin, openSignMessage]);
+    }, [appLogoUrl, appName, getAppOrigin, openSignMessage, shouldConfirmAction]);
     const sendTransaction = useCallback(({ transaction, handler, provider }) => __awaiter(void 0, void 0, void 0, function* () {
-        return openSendTransaction((resolve, reject) => (jsx(TransactionConfirmationModal, { title: 'Send Transaction', appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
-    }), [appLogoUrl, appName, getAppOrigin, openSendTransaction]);
-    const enableInternalSign = useCallback(() => {
-        fakeSignerRef.current = 'enabled';
+        if (!shouldConfirmAction()) {
+            return handler(transaction);
+        }
+        return openSendTransaction((resolve, reject) => (jsx(TransactionConfirmationModal, { title: 'Send Transaction', transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
+    }), [openSendTransaction, shouldConfirmAction]);
+    const disabledConfirmationOnce = useCallback(() => {
+        confirmationStateRef.current = 'disabled';
     }, []);
     const walletUiUtils = useMemo(() => ({
-        enableInternalSign,
+        disabledConfirmationOnce,
         sendTransaction,
         signMessage,
-    }), [signMessage, enableInternalSign, sendTransaction]);
+    }), [signMessage, disabledConfirmationOnce, sendTransaction]);
     return useMemo(() => [modal || sendTransactionModal, walletUiUtils], [modal, sendTransactionModal, walletUiUtils]);
 };
 

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

@@ -2,50 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var data = require('../../../views/WalletList/data.cjs');
 
 const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletUiUtils, walletConnectorsProp, }) => {
-    const [wallets, setWallets] = React.useState([]);
-    React.useEffect(() => {
-        const getWalletList = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            if (projectSettings) {
-                const installedWallets = yield data.getInstalledWallets(projectSettings, {
-                    appLogoUrl,
-                    appName,
-                    customerApiProviders: projectSettings.providers || [],
-                    flowNetwork,
-                    networkConfigurations,
-                    skipMemo: true,
-                    walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
-                    walletUiUtils,
-                });
-                const notInstalledWallets = yield data.getNotInstalledWallets(projectSettings, {
-                    appLogoUrl,
-                    appName,
-                    customerApiProviders: projectSettings.providers || [],
-                    flowNetwork,
-                    networkConfigurations,
-                    skipMemo: true,
-                    walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
-                    walletUiUtils,
-                });
-                const unfilteredWallets = [
-                    ...installedWallets,
-                    ...notInstalledWallets,
-                ];
-                setWallets(unfilteredWallets);
-            }
+    const wallets = React.useMemo(() => {
+        if (!projectSettings)
+            return [];
+        const installedWallets = data.getInstalledWallets(projectSettings, {
+            appLogoUrl,
+            appName,
+            customerApiProviders: projectSettings.providers || [],
+            flowNetwork,
+            networkConfigurations,
+            skipMemo: true,
+            walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
+            walletUiUtils,
         });
-        getWalletList();
-    }, 
-    // Cannot include walletUiUtils in the dependency array because it will cause an infinite loop
-    [
-        projectSettings,
+        const notInstalledWallets = data.getNotInstalledWallets(projectSettings, {
+            appLogoUrl,
+            appName,
+            customerApiProviders: projectSettings.providers || [],
+            flowNetwork,
+            networkConfigurations,
+            skipMemo: true,
+            walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
+            walletUiUtils,
+        });
+        return [...installedWallets, ...notInstalledWallets];
+        // Cannot include walletUiUtils in the dependency array because it will cause an infinite loop
+    }, [
         appLogoUrl,
         appName,
         networkConfigurations,
+        projectSettings,
         walletConnectorsProp,
         flowNetwork,
     ]);

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

@@ -1,7 +1,6 @@
 import { ProjectSettings } from '@dynamic-labs/sdk-api';
 import { NetworkConfigurationMap, WalletUiUtils } from '@dynamic-labs/types';
 import { WalletConnectorsMethod } from '@dynamic-labs/wallet-connector-core';
-import { WalletOption } from '../../../shared';
 type Props = {
     appLogoUrl?: string;
     appName?: string;
@@ -12,6 +11,6 @@ type Props = {
     walletUiUtils: WalletUiUtils;
 };
 export declare const useWallets: ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletUiUtils, walletConnectorsProp, }: Props) => {
-    wallets: WalletOption[];
+    wallets: import("../../../shared").WalletOption[];
 };
 export {};

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

@@ -1,47 +1,37 @@
-import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useEffect } from 'react';
+import { useMemo } from 'react';
 import { getInstalledWallets, getNotInstalledWallets } from '../../../views/WalletList/data.js';
 
 const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletUiUtils, walletConnectorsProp, }) => {
-    const [wallets, setWallets] = useState([]);
-    useEffect(() => {
-        const getWalletList = () => __awaiter(void 0, void 0, void 0, function* () {
-            if (projectSettings) {
-                const installedWallets = yield getInstalledWallets(projectSettings, {
-                    appLogoUrl,
-                    appName,
-                    customerApiProviders: projectSettings.providers || [],
-                    flowNetwork,
-                    networkConfigurations,
-                    skipMemo: true,
-                    walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
-                    walletUiUtils,
-                });
-                const notInstalledWallets = yield getNotInstalledWallets(projectSettings, {
-                    appLogoUrl,
-                    appName,
-                    customerApiProviders: projectSettings.providers || [],
-                    flowNetwork,
-                    networkConfigurations,
-                    skipMemo: true,
-                    walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
-                    walletUiUtils,
-                });
-                const unfilteredWallets = [
-                    ...installedWallets,
-                    ...notInstalledWallets,
-                ];
-                setWallets(unfilteredWallets);
-            }
+    const wallets = useMemo(() => {
+        if (!projectSettings)
+            return [];
+        const installedWallets = getInstalledWallets(projectSettings, {
+            appLogoUrl,
+            appName,
+            customerApiProviders: projectSettings.providers || [],
+            flowNetwork,
+            networkConfigurations,
+            skipMemo: true,
+            walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
+            walletUiUtils,
         });
-        getWalletList();
-    }, 
-    // Cannot include walletUiUtils in the dependency array because it will cause an infinite loop
-    [
-        projectSettings,
+        const notInstalledWallets = getNotInstalledWallets(projectSettings, {
+            appLogoUrl,
+            appName,
+            customerApiProviders: projectSettings.providers || [],
+            flowNetwork,
+            networkConfigurations,
+            skipMemo: true,
+            walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
+            walletUiUtils,
+        });
+        return [...installedWallets, ...notInstalledWallets];
+        // Cannot include walletUiUtils in the dependency array because it will cause an infinite loop
+    }, [
         appLogoUrl,
         appName,
         networkConfigurations,
+        projectSettings,
         walletConnectorsProp,
         flowNetwork,
     ]);

package/src/lib/views/CaptchaVerifyUser/CaptchaVerifyUser.cjs

@@ -37,6 +37,8 @@ require('../../components/Alert/Alert.cjs');
 var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../components/SendBalanceForm/SendBalanceForm.cjs');
 var Captcha = require('../../components/Captcha/Captcha.cjs');
 
 const CaptchaVerifyUser = () => {

package/src/lib/views/CaptchaVerifyUser/CaptchaVerifyUser.js

@@ -33,6 +33,8 @@ import '../../components/Alert/Alert.js';
 import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
+import '@dynamic-labs/wallet-book';
+import '../../components/SendBalanceForm/SendBalanceForm.js';
 import { Captcha } from '../../components/Captcha/Captcha.js';
 
 const CaptchaVerifyUser = () => {

package/src/lib/views/CollectUserDataView/CollectUserDataView.cjs

@@ -39,6 +39,7 @@ require('../../components/Alert/Alert.cjs');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
+require('../../components/SendBalanceForm/SendBalanceForm.cjs');
 var NetworkPicker = require('../../components/NetworkPicker/NetworkPicker.cjs');
 var UserAddress = require('../../components/UserAddress/UserAddress.cjs');
 var useFetchNameService = require('../../widgets/DynamicWidget/hooks/useFetchNameService/useFetchNameService.cjs');

package/src/lib/views/CollectUserDataView/CollectUserDataView.js

@@ -35,6 +35,7 @@ import '../../components/Alert/Alert.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
+import '../../components/SendBalanceForm/SendBalanceForm.js';
 import { NetworkPicker } from '../../components/NetworkPicker/NetworkPicker.js';
 import { UserAddress } from '../../components/UserAddress/UserAddress.js';
 import { useFetchNameService } from '../../widgets/DynamicWidget/hooks/useFetchNameService/useFetchNameService.js';

package/src/lib/views/CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.cjs

@@ -36,6 +36,8 @@ require('../../../components/IconButton/IconButton.cjs');
 require('../../../components/Alert/Alert.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../components/SendBalanceForm/SendBalanceForm.cjs');
 var index = require('../UserDataFields/index.cjs');
 var useUserDataForm = require('../../../utils/hooks/useUserDataForm/useUserDataForm.cjs');
 

package/src/lib/views/CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.js

@@ -32,6 +32,8 @@ import '../../../components/IconButton/IconButton.js';
 import '../../../components/Alert/Alert.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
+import '@dynamic-labs/wallet-book';
+import '../../../components/SendBalanceForm/SendBalanceForm.js';
 import { UserDataFields } from '../UserDataFields/index.js';
 import { useUserDataForm } from '../../../utils/hooks/useUserDataForm/useUserDataForm.js';
 

package/src/lib/views/CollectUserDataView/UserDataFields/index.cjs

@@ -38,6 +38,8 @@ require('../../../components/IconButton/IconButton.cjs');
 require('../../../components/Alert/Alert.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../components/SendBalanceForm/SendBalanceForm.cjs');
 var fieldsConfig = require('../fieldsConfig.cjs');
 var getDisplayErrorMessage = require('./utils/getDisplayErrorMessage/getDisplayErrorMessage.cjs');
 

package/src/lib/views/CollectUserDataView/UserDataFields/index.js

@@ -34,6 +34,8 @@ import '../../../components/IconButton/IconButton.js';
 import '../../../components/Alert/Alert.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
+import '@dynamic-labs/wallet-book';
+import '../../../components/SendBalanceForm/SendBalanceForm.js';
 import { fieldsConfig } from '../fieldsConfig.js';
 import { getDisplayErrorMessage } from './utils/getDisplayErrorMessage/getDisplayErrorMessage.js';