@dynamic-labs/sdk-react-core 4.5.0 → 4.5.2

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.cjs

@@ -64,7 +64,6 @@ require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs')
 require('@dynamic-labs/rpc-providers');
 require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
-var helpers = require('../../helpers/helpers.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
@@ -77,6 +76,7 @@ require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
 var AuthProviderIcon = require('../../../../components/AuthProviderIcon/AuthProviderIcon.cjs');
+var helpers = require('../../helpers/helpers.cjs');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
@@ -114,12 +114,11 @@ var ActiveBitcoinWalletAddresses = require('./ActiveBitcoinWalletAddresses/Activ
 var ActiveWalletAddress = require('./ActiveWalletAddress/ActiveWalletAddress.cjs');
 var TokenBalanceList = require('./TokenBalanceList/TokenBalanceList.cjs');
 
-const ICON_SIZE = 28;
+const ICON_SIZE = 32;
 const DROPDOWN_ICON_SIZE = 16;
 const ActiveWalletInformation = ({ isLoading = false, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const { t } = reactI18next.useTranslation();
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     const [balanceIsExpanded, setBalanceIsExpanded] = React.useState(false);
     const [hasShadow, setHasShadow] = React.useState(false);
     const [detailsCardOpen, setDetailsCardOpen] = React.useState(false);
@@ -142,9 +141,10 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
     const { showAlert } = PasskeyContext.usePasskeyContext();
     const wallet = (_a = (primaryWallet && getEOAWallet(primaryWallet))) !== null && _a !== void 0 ? _a : primaryWallet;
     const isBitcoin = primaryWallet && walletConnectorCore.isBitcoinConnector(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
-    const isEmbeddedWallet = Boolean(wallet &&
-        (((_c = (_b = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _b === void 0 ? void 0 : _b.key) === null || _c === void 0 ? void 0 : _c.startsWith('turnkey')) ||
-            ((_e = (_d = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _d === void 0 ? void 0 : _d.key) === null || _e === void 0 ? void 0 : _e.startsWith('coinbasempc'))));
+    const isEmbeddedWallet = Boolean(wallet && ((_c = (_b = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _b === void 0 ? void 0 : _b.key) === null || _c === void 0 ? void 0 : _c.startsWith('turnkey')));
+    const openDetailsCard = React.useCallback(() => {
+        setTimeout(() => setDetailsCardOpen(true), 0);
+    }, []);
     const options = [
         {
             Icon: jsxRuntime.jsx(copy.ReactComponent, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE }),
@@ -154,9 +154,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
         },
         {
             Icon: (jsxRuntime.jsx(eyeOutline.ReactComponent, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE })),
-            callback: () => {
-                setDetailsCardOpen(true);
-            },
+            callback: openDetailsCard,
             hide: !address,
             text: t('dyn_active_wallet_info.options.view_address'),
         },
@@ -175,9 +173,6 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
             text: t('dyn_active_wallet_info.options.export'),
         },
     ];
-    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
-        (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
-        [];
     const showTestnetAlert = testnet && !isTurnkeyWalletWithoutAuthenticator;
     const shouldHideNetwork = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.hideNetworkInDynamicWidget;
     const activeWalletAddress = () => {
@@ -190,7 +185,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
     };
     const enableMultiAsset = (authMode === 'connect-and-sign' ||
         (authMode === 'connect-only' &&
-            ((_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _f === void 0 ? void 0 : _f.connectOnlyMultiAsset))) &&
+            ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _d === void 0 ? void 0 : _d.connectOnlyMultiAsset))) &&
         multiAsset;
     const isNetworkMultiAssetSupported = isMultiAssetSupportedNetwork.isMultiAssetSupportedNetwork(primaryConnector, network);
     const isTooManyRequests = errorTokenBalances === 'Too many requests fetching balances';
@@ -220,7 +215,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
     }
     return (jsxRuntime.jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__header', children: [jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar__name-service', children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsxRuntime.jsx("div", { className: 'active-wallet-information__wallet-img', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: ICON_SIZE }) })) }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__details', children: [jsxRuntime.jsx("div", { className: classNames.classNames('active-wallet-information__addresses-container', {
                                             'active-wallet-information__addresses-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: activeWalletAddress() }), address && (jsxRuntime.jsx(WalletDetailsCard.WalletDetailsCard, { open: detailsCardOpen, address: address, onClose: () => setDetailsCardOpen(false) })), !shouldHideNetwork && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true, isLoading: isLoading }))] })] }), headerAlert && (jsxRuntime.jsx(Alert.Alert, { variant: headerAlert.variant, copykey: headerAlert.copykey, children: t(headerAlert.copykey) })), showTestnetAlert && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), showMultiAsset ? (jsxRuntime.jsx("div", { className: 'multi-asset-balance-container', children: multiAssetHeader() })) : (jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_active_wallet_info.balance') }), primaryWalletNativeBalance()] }))] }));
+                                        }), children: activeWalletAddress() }), address && (jsxRuntime.jsx(WalletDetailsCard.WalletDetailsCard, { open: detailsCardOpen, address: address, onClose: () => setDetailsCardOpen(false) })), !shouldHideNetwork && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', showNetworkName: true, isLoading: isLoading }))] })] }), headerAlert && (jsxRuntime.jsx(Alert.Alert, { variant: headerAlert.variant, children: headerAlert.content })), showTestnetAlert && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), showMultiAsset ? (jsxRuntime.jsx("div", { className: 'multi-asset-balance-container', children: multiAssetHeader() })) : (jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_active_wallet_info.balance') }), primaryWalletNativeBalance()] }))] }));
 };
 
 exports.ActiveWalletInformation = ActiveWalletInformation;

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.js

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isBitcoinConnector } from '@dynamic-labs/wallet-connector-core';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
@@ -60,7 +60,6 @@ import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../store/state/walletOptions/walletOptions.js';
-import { getExportKeysOption } from '../../helpers/helpers.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
@@ -73,6 +72,7 @@ import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import { AuthProviderIcon } from '../../../../components/AuthProviderIcon/AuthProviderIcon.js';
+import { getExportKeysOption } from '../../helpers/helpers.js';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
@@ -110,12 +110,11 @@ import { ActiveBitcoinWalletAddresses } from './ActiveBitcoinWalletAddresses/Act
 import { ActiveWalletAddress } from './ActiveWalletAddress/ActiveWalletAddress.js';
 import { TokenBalanceList } from './TokenBalanceList/TokenBalanceList.js';
 
-const ICON_SIZE = 28;
+const ICON_SIZE = 32;
 const DROPDOWN_ICON_SIZE = 16;
 const ActiveWalletInformation = ({ isLoading = false, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const { t } = useTranslation();
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     const [balanceIsExpanded, setBalanceIsExpanded] = useState(false);
     const [hasShadow, setHasShadow] = useState(false);
     const [detailsCardOpen, setDetailsCardOpen] = useState(false);
@@ -138,9 +137,10 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
     const { showAlert } = usePasskeyContext();
     const wallet = (_a = (primaryWallet && getEOAWallet(primaryWallet))) !== null && _a !== void 0 ? _a : primaryWallet;
     const isBitcoin = primaryWallet && isBitcoinConnector(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
-    const isEmbeddedWallet = Boolean(wallet &&
-        (((_c = (_b = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _b === void 0 ? void 0 : _b.key) === null || _c === void 0 ? void 0 : _c.startsWith('turnkey')) ||
-            ((_e = (_d = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _d === void 0 ? void 0 : _d.key) === null || _e === void 0 ? void 0 : _e.startsWith('coinbasempc'))));
+    const isEmbeddedWallet = Boolean(wallet && ((_c = (_b = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _b === void 0 ? void 0 : _b.key) === null || _c === void 0 ? void 0 : _c.startsWith('turnkey')));
+    const openDetailsCard = useCallback(() => {
+        setTimeout(() => setDetailsCardOpen(true), 0);
+    }, []);
     const options = [
         {
             Icon: jsx(SvgCopy, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE }),
@@ -150,9 +150,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
         },
         {
             Icon: (jsx(SvgEyeOutline, { width: DROPDOWN_ICON_SIZE, height: DROPDOWN_ICON_SIZE })),
-            callback: () => {
-                setDetailsCardOpen(true);
-            },
+            callback: openDetailsCard,
             hide: !address,
             text: t('dyn_active_wallet_info.options.view_address'),
         },
@@ -171,9 +169,6 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
             text: t('dyn_active_wallet_info.options.export'),
         },
     ];
-    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
-        (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
-        [];
     const showTestnetAlert = testnet && !isTurnkeyWalletWithoutAuthenticator;
     const shouldHideNetwork = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.hideNetworkInDynamicWidget;
     const activeWalletAddress = () => {
@@ -186,7 +181,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
     };
     const enableMultiAsset = (authMode === 'connect-and-sign' ||
         (authMode === 'connect-only' &&
-            ((_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _f === void 0 ? void 0 : _f.connectOnlyMultiAsset))) &&
+            ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _d === void 0 ? void 0 : _d.connectOnlyMultiAsset))) &&
         multiAsset;
     const isNetworkMultiAssetSupported = isMultiAssetSupportedNetwork(primaryConnector, network);
     const isTooManyRequests = errorTokenBalances === 'Too many requests fetching balances';
@@ -216,7 +211,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
     }
     return (jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information__header', children: [jsx("div", { className: 'active-wallet-information__avatar', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", { className: 'active-wallet-information__avatar__name-service', children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsx("div", { className: 'active-wallet-information__wallet-img', children: jsx(AuthProviderIcon, { iconSize: ICON_SIZE }) })) }), jsxs("div", { className: 'active-wallet-information__details', children: [jsx("div", { className: classNames('active-wallet-information__addresses-container', {
                                             'active-wallet-information__addresses-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: activeWalletAddress() }), address && (jsx(WalletDetailsCard, { open: detailsCardOpen, address: address, onClose: () => setDetailsCardOpen(false) })), !shouldHideNetwork && (jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true, isLoading: isLoading }))] })] }), headerAlert && (jsx(Alert, { variant: headerAlert.variant, copykey: headerAlert.copykey, children: t(headerAlert.copykey) })), showTestnetAlert && (jsx(Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), showMultiAsset ? (jsx("div", { className: 'multi-asset-balance-container', children: multiAssetHeader() })) : (jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_active_wallet_info.balance') }), primaryWalletNativeBalance()] }))] }));
+                                        }), children: activeWalletAddress() }), address && (jsx(WalletDetailsCard, { open: detailsCardOpen, address: address, onClose: () => setDetailsCardOpen(false) })), !shouldHideNetwork && (jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', showNetworkName: true, isLoading: isLoading }))] })] }), headerAlert && (jsx(Alert, { variant: headerAlert.variant, children: headerAlert.content })), showTestnetAlert && (jsx(Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), showMultiAsset ? (jsx("div", { className: 'multi-asset-balance-container', children: multiAssetHeader() })) : (jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_active_wallet_info.balance') }), primaryWalletNativeBalance()] }))] }));
 };
 
 export { ActiveWalletInformation };

package/src/lib/widgets/DynamicWidget/components/Balance/Balance.cjs

@@ -54,7 +54,6 @@ require('@dynamic-labs/rpc-providers');
 require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
 require('react-i18next');
-var helpers = require('../../helpers/helpers.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
@@ -68,6 +67,7 @@ require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
 var useFetchBalance = require('../../hooks/useFetchBalance/useFetchBalance.cjs');
 var useFetchCurrency = require('../../hooks/useFetchCurrency/useFetchCurrency.cjs');
+var helpers = require('../../helpers/helpers.cjs');
 require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');

package/src/lib/widgets/DynamicWidget/components/Balance/Balance.js

@@ -50,7 +50,6 @@ import '@dynamic-labs/rpc-providers';
 import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../store/state/walletOptions/walletOptions.js';
 import 'react-i18next';
-import { roundBalance } from '../../helpers/helpers.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
@@ -64,6 +63,7 @@ import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import { useFetchBalance } from '../../hooks/useFetchBalance/useFetchBalance.js';
 import { useFetchCurrency } from '../../hooks/useFetchCurrency/useFetchCurrency.js';
+import { roundBalance } from '../../helpers/helpers.js';
 import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';

package/src/lib/widgets/DynamicWidget/components/DynamicNav/DynamicNav.cjs

@@ -4,8 +4,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var AccountControl = require('../AccountControl/AccountControl.cjs');
+require('react');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../../../shared/logger.cjs');
@@ -95,16 +95,12 @@ require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
 const DynamicNav = () => {
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     const { primaryWallet, projectSettings, network } = useInternalDynamicContext.useInternalDynamicContext();
     const { inlineControlsRef } = DynamicWidgetContext.useWidgetContext();
-    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
-        primaryWallet.connector.evmNetworks) ||
-        [];
     if (!projectSettings)
         return null;
     const shouldHideNetwork = projectSettings.sdk.hideNetworkInDynamicWidget;
-    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsxRuntime.jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsxRuntime.jsx(AccountControl.AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox' }) })), jsxRuntime.jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsxRuntime.jsx(AccountControl.AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
 };
 const ShadowedDynamicNav = () => (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { children: jsxRuntime.jsx(DynamicNav, {}) }));
 

package/src/lib/widgets/DynamicWidget/components/DynamicNav/DynamicNav.js

@@ -1,7 +1,7 @@
 'use client'
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState } from 'react';
 import { AccountControl } from '../AccountControl/AccountControl.js';
+import 'react';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../../shared/logger.js';
@@ -91,16 +91,12 @@ import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const DynamicNav = () => {
-    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     const { primaryWallet, projectSettings, network } = useInternalDynamicContext();
     const { inlineControlsRef } = useWidgetContext();
-    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
-        primaryWallet.connector.evmNetworks) ||
-        [];
     if (!projectSettings)
         return null;
     const shouldHideNetwork = projectSettings.sdk.hideNetworkInDynamicWidget;
-    return (jsx(IsBrowser, { children: jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsx(PopperProvider, { children: jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsx(AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
+    return (jsx(IsBrowser, { children: jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsx(PopperProvider, { children: jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox' }) })), jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsx(AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
 };
 const ShadowedDynamicNav = () => (jsx(ShadowDOM, { children: jsx(DynamicNav, {}) }));
 

package/src/lib/widgets/DynamicWidget/components/EmailOTPConnectorPendingSignModalContent/EmailOTPConnectorPendingSignModalContent.cjs

@@ -28,13 +28,13 @@ require('react-international-phone');
 var shortenEmail = require('../../../../shared/utils/functions/shortenEmail/shortenEmail.cjs');
 require('../../../../store/state/nonce/nonce.cjs');
 require('../../../../store/state/projectSettings/projectSettings.cjs');
-require('../../../../config/ApiEndpoint.cjs');
-require('../../../../store/state/user/user.cjs');
-require('../../../../locale/locale.cjs');
 var updatePrimaryWalletId = require('../../../../utils/functions/updatePrimaryWalletId/updatePrimaryWalletId.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../store/state/user/user.cjs');
+require('../../../../locale/locale.cjs');
 require('../../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../../../utils/functions/compareChains/compareChains.cjs');

package/src/lib/widgets/DynamicWidget/components/EmailOTPConnectorPendingSignModalContent/EmailOTPConnectorPendingSignModalContent.js

@@ -24,13 +24,13 @@ import 'react-international-phone';
 import { shortenEmail } from '../../../../shared/utils/functions/shortenEmail/shortenEmail.js';
 import '../../../../store/state/nonce/nonce.js';
 import '../../../../store/state/projectSettings/projectSettings.js';
-import '../../../../config/ApiEndpoint.js';
-import '../../../../store/state/user/user.js';
-import '../../../../locale/locale.js';
 import { updatePrimaryWalletId } from '../../../../utils/functions/updatePrimaryWalletId/updatePrimaryWalletId.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../store/state/user/user.js';
+import '../../../../locale/locale.js';
 import '../../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../../../utils/functions/compareChains/compareChains.js';

package/src/lib/widgets/DynamicWidget/components/SingleWalletButtons/SingleWalletButtons.cjs

@@ -56,7 +56,6 @@ require('@dynamic-labs/rpc-providers');
 require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
 require('react-i18next');
-var helpers = require('../../helpers/helpers.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
@@ -66,6 +65,7 @@ require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTar
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
+var helpers = require('../../helpers/helpers.cjs');
 require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');

package/src/lib/widgets/DynamicWidget/components/SingleWalletButtons/SingleWalletButtons.js

@@ -52,7 +52,6 @@ import '@dynamic-labs/rpc-providers';
 import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../store/state/walletOptions/walletOptions.js';
 import 'react-i18next';
-import { copyToClipboard } from '../../helpers/helpers.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
@@ -62,6 +61,7 @@ import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarg
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
+import { copyToClipboard } from '../../helpers/helpers.js';
 import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.cjs

@@ -113,7 +113,7 @@ const DynamicWidgetContextProvider = ({ children, }) => {
     }, []);
     const setHeaderAlert = React.useCallback((alert) => {
         var _a;
-        const timeout = (_a = alert === null || alert === void 0 ? void 0 : alert.timeout) !== null && _a !== void 0 ? _a : 6000;
+        const timeout = (_a = alert === null || alert === void 0 ? void 0 : alert.timeout) !== null && _a !== void 0 ? _a : 10000;
         _setHeaderAlert(alert);
         headerAlertTimeoutRef.current = setTimeout(clearHeaderAlert, timeout);
     }, [clearHeaderAlert]);

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.js

@@ -109,7 +109,7 @@ const DynamicWidgetContextProvider = ({ children, }) => {
     }, []);
     const setHeaderAlert = useCallback((alert) => {
         var _a;
-        const timeout = (_a = alert === null || alert === void 0 ? void 0 : alert.timeout) !== null && _a !== void 0 ? _a : 6000;
+        const timeout = (_a = alert === null || alert === void 0 ? void 0 : alert.timeout) !== null && _a !== void 0 ? _a : 10000;
         _setHeaderAlert(alert);
         headerAlertTimeoutRef.current = setTimeout(clearHeaderAlert, timeout);
     }, [clearHeaderAlert]);

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.types.d.ts

@@ -32,7 +32,7 @@ export type WidgetContextProps = {
 };
 export type WidgetHeaderAlert = {
     variant: AlertProps['variant'];
-    copykey: string;
+    content: string | JSX.Element;
 };
 export type SetHeaderAlert = (alert: WidgetHeaderAlert & {
     timeout?: number;

package/src/lib/widgets/DynamicWidget/prompts/PendingConnectionModal/PendingConnectionModal.cjs

@@ -56,7 +56,6 @@ require('@dynamic-labs/rpc-providers');
 require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
 require('react-i18next');
-var helpers = require('../../helpers/helpers.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
@@ -71,6 +70,7 @@ var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
 var useCloseMultiWalletPrompt = require('../../hooks/useCloseMultiWalletPrompt/useCloseMultiWalletPrompt.cjs');
 var DefaultPromptModal = require('../DefaultPromptModal/DefaultPromptModal.cjs');
 var AuthProviderIcon = require('../../../../components/AuthProviderIcon/AuthProviderIcon.cjs');
+var helpers = require('../../helpers/helpers.cjs');
 require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');

package/src/lib/widgets/DynamicWidget/prompts/PendingConnectionModal/PendingConnectionModal.js

@@ -52,7 +52,6 @@ import '@dynamic-labs/rpc-providers';
 import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../store/state/walletOptions/walletOptions.js';
 import 'react-i18next';
-import { capitalize } from '../../helpers/helpers.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
@@ -67,6 +66,7 @@ import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
 import { useCloseMultiWalletPrompt } from '../../hooks/useCloseMultiWalletPrompt/useCloseMultiWalletPrompt.js';
 import { DefaultPromptLayout } from '../DefaultPromptModal/DefaultPromptModal.js';
 import { AuthProviderIcon } from '../../../../components/AuthProviderIcon/AuthProviderIcon.js';
+import { capitalize } from '../../helpers/helpers.js';
 import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';

package/src/lib/widgets/DynamicWidget/views/ChooseOnrampProviderView/ChooseOnrampProviderView.cjs

@@ -27,6 +27,7 @@ require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
 require('../../../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -100,9 +101,11 @@ const ChooseOnrampProviderView = () => {
     const { t } = reactI18next.useTranslation();
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const { enabledOnrampProviders } = OnrampContext.useOnrampContext();
+    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
     const onrampOptions = React.useMemo(() => enabledOnrampProviders.filter(({ isPaymentMethod }) => !isPaymentMethod), [enabledOnrampProviders]);
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => setDynamicWidgetView('choose-wallet-funding-method'), children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: 'deposit-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, description: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'choose-onramp-provider__header-description', children: t('dyn_wallet_funding.onramp_provider_selection.description') }), children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: t('dyn_wallet_funding.onramp_provider_selection.title') }) }), jsxRuntime.jsx("div", { className: 'choose-wallet-funding-method__options', children: onrampOptions.map((option) => (jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: option.onClick, leading: jsxRuntime.jsx(Icon.Icon, { className: 'choose-onramp-provider__options__option__icon', children: jsxRuntime.jsx("img", { src: option.iconUrl, alt: option.displayName }) }), typographyProps: { variant: 'body_normal', weight: 'medium' }, buttonVariant: 'card', className: 'choose-wallet-funding-method__options__option', description: option.description, children: option.displayName }, option.id))) })] }));
+    return (jsxRuntime.jsxs("div", { className: 'deposit-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, description: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'choose-onramp-provider__header-description', children: t('dyn_wallet_funding.onramp_provider_selection.description') }), children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: t('dyn_wallet_funding.onramp_provider_selection.title') }) }), jsxRuntime.jsx("div", { className: 'choose-wallet-funding-method__options', children: primaryWallet &&
+                    onrampOptions.map((option) => (jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: () => option.onClick({ wallet: primaryWallet }), leading: jsxRuntime.jsx(Icon.Icon, { className: 'choose-onramp-provider__options__option__icon', children: jsxRuntime.jsx("img", { src: option.iconUrl, alt: option.displayName }) }), typographyProps: { variant: 'body_normal', weight: 'medium' }, buttonVariant: 'card', className: 'choose-wallet-funding-method__options__option', description: option.description, children: option.displayName }, option.id))) })] }));
 };
 
 exports.ChooseOnrampProviderView = ChooseOnrampProviderView;

package/src/lib/widgets/DynamicWidget/views/ChooseOnrampProviderView/ChooseOnrampProviderView.js

@@ -23,6 +23,7 @@ import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
 import '../../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -96,9 +97,11 @@ const ChooseOnrampProviderView = () => {
     const { t } = useTranslation();
     const { setDynamicWidgetView } = useWidgetContext();
     const { enabledOnrampProviders } = useOnrampContext();
+    const { primaryWallet } = useInternalDynamicContext();
     const onrampOptions = useMemo(() => enabledOnrampProviders.filter(({ isPaymentMethod }) => !isPaymentMethod), [enabledOnrampProviders]);
     const backButton = (jsx(IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => setDynamicWidgetView('choose-wallet-funding-method'), children: jsx(SvgArrowLeft, {}) }));
-    return (jsxs("div", { className: 'deposit-view', children: [jsx(ModalHeader, { leading: backButton, description: jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'choose-onramp-provider__header-description', children: t('dyn_wallet_funding.onramp_provider_selection.description') }), children: jsx(Typography, { variant: 'title', children: t('dyn_wallet_funding.onramp_provider_selection.title') }) }), jsx("div", { className: 'choose-wallet-funding-method__options', children: onrampOptions.map((option) => (jsx(TypographyButton, { onClick: option.onClick, leading: jsx(Icon, { className: 'choose-onramp-provider__options__option__icon', children: jsx("img", { src: option.iconUrl, alt: option.displayName }) }), typographyProps: { variant: 'body_normal', weight: 'medium' }, buttonVariant: 'card', className: 'choose-wallet-funding-method__options__option', description: option.description, children: option.displayName }, option.id))) })] }));
+    return (jsxs("div", { className: 'deposit-view', children: [jsx(ModalHeader, { leading: backButton, description: jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'choose-onramp-provider__header-description', children: t('dyn_wallet_funding.onramp_provider_selection.description') }), children: jsx(Typography, { variant: 'title', children: t('dyn_wallet_funding.onramp_provider_selection.title') }) }), jsx("div", { className: 'choose-wallet-funding-method__options', children: primaryWallet &&
+                    onrampOptions.map((option) => (jsx(TypographyButton, { onClick: () => option.onClick({ wallet: primaryWallet }), leading: jsx(Icon, { className: 'choose-onramp-provider__options__option__icon', children: jsx("img", { src: option.iconUrl, alt: option.displayName }) }), typographyProps: { variant: 'body_normal', weight: 'medium' }, buttonVariant: 'card', className: 'choose-wallet-funding-method__options__option', description: option.description, children: option.displayName }, option.id))) })] }));
 };
 
 export { ChooseOnrampProviderView };

package/src/lib/widgets/DynamicWidget/views/ChooseWalletFundingMethod/ChooseWalletFundingMethod.cjs

@@ -23,7 +23,7 @@ const ChooseWalletFundingMethod = () => {
     const { t } = reactI18next.useTranslation();
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: goToInitialDynamicWidgetView, children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
     const methods = useFundingMethods.useFundingMethods();
-    return (jsxRuntime.jsxs("div", { className: 'choose-wallet-funding-method', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, description: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'choose-wallet-funding-method__header-description', children: t('dyn_wallet_funding.funding_method_selection.description') }), children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: t('dyn_wallet_funding.funding_method_selection.title') }) }), jsxRuntime.jsx("div", { className: 'choose-wallet-funding-method__options', children: methods.map((method) => {
+    return (jsxRuntime.jsxs("div", { className: 'choose-wallet-funding-method', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: t('dyn_wallet_funding.funding_method_selection.title') }) }), jsxRuntime.jsx("div", { className: 'choose-wallet-funding-method__options', children: methods.map((method) => {
                     var _a;
                     return (jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: method.onClick, description: method.description, leading: jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', className: 'choose-wallet-funding-method__options__option__icon', children: method.icon }), trailing: jsxRuntime.jsx(MakeTrailing.MakeTrailing, { previewIcons: (_a = method.previewIcons) !== null && _a !== void 0 ? _a : [], showChevron: Boolean(method.showChevron) }), typographyProps: { variant: 'body_normal', weight: 'medium' }, buttonVariant: 'card', className: 'choose-wallet-funding-method__options__option', children: method.label }, method.key));
                 }) })] }));

package/src/lib/widgets/DynamicWidget/views/ChooseWalletFundingMethod/ChooseWalletFundingMethod.js

@@ -19,7 +19,7 @@ const ChooseWalletFundingMethod = () => {
     const { t } = useTranslation();
     const backButton = (jsx(IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: goToInitialDynamicWidgetView, children: jsx(SvgArrowLeft, {}) }));
     const methods = useFundingMethods();
-    return (jsxs("div", { className: 'choose-wallet-funding-method', children: [jsx(ModalHeader, { leading: backButton, description: jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'choose-wallet-funding-method__header-description', children: t('dyn_wallet_funding.funding_method_selection.description') }), children: jsx(Typography, { variant: 'title', children: t('dyn_wallet_funding.funding_method_selection.title') }) }), jsx("div", { className: 'choose-wallet-funding-method__options', children: methods.map((method) => {
+    return (jsxs("div", { className: 'choose-wallet-funding-method', children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', children: t('dyn_wallet_funding.funding_method_selection.title') }) }), jsx("div", { className: 'choose-wallet-funding-method__options', children: methods.map((method) => {
                     var _a;
                     return (jsx(TypographyButton, { onClick: method.onClick, description: method.description, leading: jsx(Icon, { color: 'text-tertiary', className: 'choose-wallet-funding-method__options__option__icon', children: method.icon }), trailing: jsx(MakeTrailing, { previewIcons: (_a = method.previewIcons) !== null && _a !== void 0 ? _a : [], showChevron: Boolean(method.showChevron) }), typographyProps: { variant: 'body_normal', weight: 'medium' }, buttonVariant: 'card', className: 'choose-wallet-funding-method__options__option', children: method.label }, method.key));
                 }) })] }));

package/src/lib/widgets/DynamicWidget/views/ChooseWalletFundingMethod/useFundingMethods/useFundingMethods.cjs

@@ -124,9 +124,14 @@ const useFundingMethods = () => {
     const onrampOptions = React.useMemo(() => enabledOnrampProviders.filter(({ isPaymentMethod }) => !isPaymentMethod), [enabledOnrampProviders]);
     const paymentMethods = React.useMemo(() => enabledOnrampProviders.filter(({ isPaymentMethod }) => isPaymentMethod), [enabledOnrampProviders]);
     const handleQrClick = React.useCallback(() => setDynamicWidgetView('deposit-view'), [setDynamicWidgetView]);
-    const handleBuyCryptoClick = React.useCallback(() => onrampOptions.length > 1
-        ? setDynamicWidgetView('choose-onramp-provider')
-        : onrampOptions[0].onClick(), [onrampOptions, setDynamicWidgetView]);
+    const handleBuyCryptoClick = React.useCallback(() => {
+        if (!primaryWallet) {
+            return;
+        }
+        onrampOptions.length > 1
+            ? setDynamicWidgetView('choose-onramp-provider')
+            : onrampOptions[0].onClick({ wallet: primaryWallet });
+    }, [onrampOptions, setDynamicWidgetView, primaryWallet]);
     const previewWalletIcons = React.useMemo(() => {
         if (!externalWalletFundingEnabled)
             return [];
@@ -150,15 +155,17 @@ const useFundingMethods = () => {
                 showChevron: true,
             },
         ];
-        paymentMethods.forEach(({ id, iconUrl, displayName, onClick }) => {
-            methods.push({
-                icon: jsxRuntime.jsx("img", { src: iconUrl, alt: displayName }),
-                key: id,
-                label: displayName,
-                onClick,
-                showChevron: false,
+        if (primaryWallet) {
+            paymentMethods.forEach(({ id, iconUrl, displayName, onClick }) => {
+                methods.push({
+                    icon: jsxRuntime.jsx("img", { src: iconUrl, alt: displayName }),
+                    key: id,
+                    label: displayName,
+                    onClick: () => onClick({ wallet: primaryWallet }),
+                    showChevron: false,
+                });
             });
-        });
+        }
         if (onrampOptions.length) {
             methods.push({
                 icon: jsxRuntime.jsx(globe.ReactComponent, {}),
@@ -190,6 +197,7 @@ const useFundingMethods = () => {
         externalWalletFundingEnabled,
         startExternalWalletFunding,
         previewWalletIcons,
+        primaryWallet,
     ]);
 };
 

package/src/lib/widgets/DynamicWidget/views/ChooseWalletFundingMethod/useFundingMethods/useFundingMethods.js

@@ -120,9 +120,14 @@ const useFundingMethods = () => {
     const onrampOptions = useMemo(() => enabledOnrampProviders.filter(({ isPaymentMethod }) => !isPaymentMethod), [enabledOnrampProviders]);
     const paymentMethods = useMemo(() => enabledOnrampProviders.filter(({ isPaymentMethod }) => isPaymentMethod), [enabledOnrampProviders]);
     const handleQrClick = useCallback(() => setDynamicWidgetView('deposit-view'), [setDynamicWidgetView]);
-    const handleBuyCryptoClick = useCallback(() => onrampOptions.length > 1
-        ? setDynamicWidgetView('choose-onramp-provider')
-        : onrampOptions[0].onClick(), [onrampOptions, setDynamicWidgetView]);
+    const handleBuyCryptoClick = useCallback(() => {
+        if (!primaryWallet) {
+            return;
+        }
+        onrampOptions.length > 1
+            ? setDynamicWidgetView('choose-onramp-provider')
+            : onrampOptions[0].onClick({ wallet: primaryWallet });
+    }, [onrampOptions, setDynamicWidgetView, primaryWallet]);
     const previewWalletIcons = useMemo(() => {
         if (!externalWalletFundingEnabled)
             return [];
@@ -146,15 +151,17 @@ const useFundingMethods = () => {
                 showChevron: true,
             },
         ];
-        paymentMethods.forEach(({ id, iconUrl, displayName, onClick }) => {
-            methods.push({
-                icon: jsx("img", { src: iconUrl, alt: displayName }),
-                key: id,
-                label: displayName,
-                onClick,
-                showChevron: false,
+        if (primaryWallet) {
+            paymentMethods.forEach(({ id, iconUrl, displayName, onClick }) => {
+                methods.push({
+                    icon: jsx("img", { src: iconUrl, alt: displayName }),
+                    key: id,
+                    label: displayName,
+                    onClick: () => onClick({ wallet: primaryWallet }),
+                    showChevron: false,
+                });
             });
-        });
+        }
         if (onrampOptions.length) {
             methods.push({
                 icon: jsx(SvgGlobe, {}),
@@ -186,6 +193,7 @@ const useFundingMethods = () => {
         externalWalletFundingEnabled,
         startExternalWalletFunding,
         previewWalletIcons,
+        primaryWallet,
     ]);
 };