@dynamic-labs/sdk-react-core 4.4.2-preview.0 → 4.4.2-preview.1

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

@@ -21,7 +21,6 @@ import { shortenWalletAddress } from '../../../../shared/utils/functions/shorten
 import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
-import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../shared/consts/index.js';
 import '../../../../events/dynamicEvents.js';
 import '../../../../../../_virtual/_tslib.js';
@@ -56,7 +55,9 @@ import '../../../../views/CollectUserDataView/useFields.js';
 import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
+import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../store/state/walletOptions/walletOptions.js';
+import '@dynamic-labs/ethereum-aa';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../../../components/Alert/Alert.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
@@ -102,13 +103,13 @@ const DepositView = () => {
     const { primaryWallet, getNameService } = useInternalDynamicContext();
     const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
     const { chain } = useFetchChain(walletConnector);
-    const { goToInitialDynamicWidgetView } = useWidgetContext();
+    const { setDynamicWidgetView } = useWidgetContext();
     const { data: ens } = usePromise(() => getNameService(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address), { deps: [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address], initialData: undefined });
     const ensName = (_a = ens === null || ens === void 0 ? void 0 : ens.name) !== null && _a !== void 0 ? _a : null;
     if (!primaryWallet) {
         return null;
     }
-    const backButton = (jsx(IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: goToInitialDynamicWidgetView, children: jsx(SvgArrowLeft, {}) }));
+    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, children: jsx(Typography, { variant: 'title', children: t('dyn_deposit.title') }) }), jsxs("div", { className: 'deposit-view__content', children: [jsx(QRCode, { className: 'deposit-view__content__qr-code', value: primaryWallet.address, Icon: jsx(SvgEmbeddedWalletIcon, {}), logoSize: 40, logoMargin: 64, size: 215 }), jsxs("div", { className: 'deposit-view__content__address', children: [ensName && (jsx(Typography, { className: 'deposit-view__content__address__ens', variant: 'title', children: ensName })), jsxs("div", { className: 'deposit-view__content__address__wrapper', children: [jsx(Typography, { "data-testid": 'deposit-view-address', variant: 'title', weight: 'medium', className: 'deposit-view__content__address__wrapper__text', children: shortenWalletAddress(primaryWallet.address, 3, 3) }), jsx(CopyButton, { variant: 'text', textToCopy: primaryWallet.address, className: 'deposit-view__content__address__wrapper__copy', children: jsx(SvgCopy, { "data-testid": 'copy-address' }) })] })] }), jsxs(Typography, { className: 'deposit-view__content__network', variant: 'body_small', color: 'secondary', children: [t('dyn_deposit.receive_funds_on'), chain === null || chain === void 0 ? void 0 : chain.name] })] })] }));
 };
 

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

@@ -19,7 +19,6 @@ var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
-require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
@@ -54,7 +53,9 @@ var useUserUpdateRequest = require('../../../../utils/hooks/useUserUpdateRequest
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
+require('@dynamic-labs/ethereum-aa');
 require('react-i18next');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');

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

@@ -15,7 +15,6 @@ import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
-import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
@@ -50,7 +49,9 @@ import { useUserUpdateRequestInternal } from '../../../../utils/hooks/useUserUpd
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '@dynamic-labs/rpc-providers';
+import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../store/state/walletOptions/walletOptions.js';
+import '@dynamic-labs/ethereum-aa';
 import 'react-i18next';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/FooterAnimationContext/index.js';

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

@@ -20,7 +20,6 @@ var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
-require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../shared/consts/index.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
@@ -59,7 +58,9 @@ require('../../../../views/CollectUserDataView/useFields.cjs');
 require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
+require('@dynamic-labs/ethereum-aa');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');

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

@@ -16,7 +16,6 @@ import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
-import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../shared/consts/index.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
@@ -55,7 +54,9 @@ import '../../../../views/CollectUserDataView/useFields.js';
 import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
+import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../store/state/walletOptions/walletOptions.js';
+import '@dynamic-labs/ethereum-aa';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';

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

@@ -7,7 +7,6 @@ var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
-var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 require('@dynamic-labs/utils');
 require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../../../components/Alert/Alert.cjs');
@@ -23,8 +22,6 @@ var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
-var useEffectOnce = require('../../../../shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
-require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
@@ -58,7 +55,10 @@ require('../../../../views/CollectUserDataView/useFields.cjs');
 require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
+var useEffectOnce = require('../../../../utils/hooks/useEffectOnce/useEffectOnce.cjs');
+require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
+require('@dynamic-labs/ethereum-aa');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
@@ -69,6 +69,7 @@ require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTar
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
+var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');

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

@@ -3,7 +3,6 @@ import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 import '@dynamic-labs/utils';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../../../components/Alert/Alert.js';
@@ -19,8 +18,6 @@ import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
-import { useEffectOnce } from '../../../../shared/utils/hooks/useEffectOnce/useEffectOnce.js';
-import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
@@ -54,7 +51,10 @@ import '../../../../views/CollectUserDataView/useFields.js';
 import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
+import { useEffectOnce } from '../../../../utils/hooks/useEffectOnce/useEffectOnce.js';
+import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../store/state/walletOptions/walletOptions.js';
+import '@dynamic-labs/ethereum-aa';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
@@ -65,6 +65,7 @@ import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarg
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
+import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';

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

@@ -22,7 +22,6 @@ require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
-require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
@@ -56,7 +55,9 @@ require('../../../../views/CollectUserDataView/useFields.cjs');
 require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
+require('@dynamic-labs/ethereum-aa');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');

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

@@ -18,7 +18,6 @@ import '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
-import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
@@ -52,7 +51,9 @@ import '../../../../views/CollectUserDataView/useFields.js';
 import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
+import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../store/state/walletOptions/walletOptions.js';
+import '@dynamic-labs/ethereum-aa';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';

package/src/lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs

@@ -22,7 +22,6 @@ var ViewContext = require('../../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../../utils/constants/colors.cjs');
 require('../../../../../utils/constants/values.cjs');
-require('../../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
@@ -56,7 +55,9 @@ require('../../../../../views/CollectUserDataView/useFields.cjs');
 require('../../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../../store/state/walletOptions/walletOptions.cjs');
+require('@dynamic-labs/ethereum-aa');
 var getPasskeyProviderFromUserAgent = require('../../../helpers/getPasskeyProviderFromUserAgent.cjs');
 var getTimeSince = require('../../../helpers/getTimeSince.cjs');
 var Typography = require('../../../../../components/Typography/Typography.cjs');

package/src/lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js

@@ -18,7 +18,6 @@ import { useViewContext } from '../../../../../context/ViewContext/ViewContext.j
 import '@dynamic-labs/wallet-book';
 import '../../../../../utils/constants/colors.js';
 import '../../../../../utils/constants/values.js';
-import '../../../../../store/state/loadingAndLifecycle.js';
 import '../../../../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../../../../context/CaptchaContext/CaptchaContext.js';
@@ -52,7 +51,9 @@ import '../../../../../views/CollectUserDataView/useFields.js';
 import '../../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
+import '../../../../../store/state/loadingAndLifecycle.js';
 import '../../../../../store/state/walletOptions/walletOptions.js';
+import '@dynamic-labs/ethereum-aa';
 import { getPasskeyProviderFromUserAgent } from '../../../helpers/getPasskeyProviderFromUserAgent.js';
 import { getTimeSince } from '../../../helpers/getTimeSince.js';
 import { Typography } from '../../../../../components/Typography/Typography.js';

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

@@ -26,7 +26,6 @@ require('../../../../context/ViewContext/ViewContext.cjs');
 var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
-require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../shared/consts/index.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
@@ -59,7 +58,9 @@ require('../../../../views/CollectUserDataView/useFields.cjs');
 require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../store/state/walletOptions/walletOptions.cjs');
+require('@dynamic-labs/ethereum-aa');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
@@ -142,7 +143,9 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
     const [hasUserInteracted, setHasUserInteracted] = React.useState(false);
     const [conversionErrorIconRef, setConversionErrorIconRef] = React.useState(null);
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
-    const tokenBalances = useTokensForFunding.useTokensForFunding({ wallet: externalWallet });
+    const { isLoading: tokenBalancesLoading, tokens: tokenBalances } = useTokensForFunding.useTokensForFunding({
+        wallet: externalWallet,
+    });
     const { data: exchangeRates$1 } = usePromise.usePromise(exchangeRates.getExchangeRates, {
         initialData: {},
         // Initialize amounts after exchange rates are fetched
@@ -269,7 +272,7 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
                                         withFixedZeros: isFiatToken.isFiatToken(primaryData.symbol) ||
                                             primaryData.symbol === 'USDC',
                                     })) !== null && _f !== void 0 ? _f : primaryData.amount
-                                    : primaryData.amount, onChange: primaryData.setAmount, emitter: inputEmitter, onInteraction: () => setHasUserInteracted(true), locked: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact' }, inputSymbolProp))), primaryData.amount === undefined && (jsxRuntime.jsx(Skeleton.Skeleton, { container: {
+                                    : primaryData.amount, onChange: primaryData.setAmount, emitter: inputEmitter, onInteraction: () => setHasUserInteracted(true), locked: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact' }, inputSymbolProp))), primaryData.amount === undefined && (jsxRuntime.jsx(Skeleton.Skeleton, { dataTestId: 'primary-amount-skeleton', container: {
                                     className: 'fund-from-wallet__content__amount-container__skeleton',
                                 } })), showQuickSuggestions && (jsxRuntime.jsx("div", { className: 'fund-from-wallet__content__amount-container__quick-suggestions', children: quickSuggestionsParsed.map(({ display, value }) => (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', onClick: () => handleQuickSuggestion(value), children: display }, value))) })), !showQuickSuggestions && secondaryDisplay && (jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-amount-container', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', className: classNames.classNames('fund-from-wallet__content__amount-container__secondary-amount-container__amount', {
                                             'fund-from-wallet__content__amount-container__secondary-amount-container__amount--zero': !isNonZero.isNonZero(secondaryData.amount),
@@ -278,14 +281,16 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
                                             value: consts.UNAVAILABLE_VALUE,
                                         }) }), jsxRuntime.jsx("div", { ref: setConversionErrorIconRef, children: jsxRuntime.jsx(Icon.Icon, { size: 'medium', color: 'text-tertiary', children: jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) }) }), jsxRuntime.jsx(Tooltip.Tooltip, { content: t('dyn_wallet_funding.from_external_wallet.funding_view.network_conversion_error'), targetRef: conversionErrorIconRef, className: 'fund-from-wallet__content__amount-container__secondary-missing__tooltip' })] })), jsxRuntime.jsx(Typography.Typography, { color: 'error-1', className: classNames.classNames('fund-from-wallet__content__amount-container__balance-error', {
                                     'fund-from-wallet__content__amount-container__balance-error--visible': showNotEnoughBalance,
-                                }), variant: 'body_normal', children: t('dyn_wallet_funding.from_external_wallet.funding_view.balance_error') })] }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card', children: [jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details', children: [jsxRuntime.jsx(walletBook.WalletIcon, { icon: externalWallet.connector.metadata.icon, walletKey: externalWallet.connector.key, className: 'fund-from-wallet__content__wallet-card__wallet-details__icon' }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details__rows', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_wallet_funding.from_external_wallet.funding_view.wallet_detail_from') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', children: shortenWalletAddress.shortenWalletAddress(externalWallet.address) })] })] }), jsxRuntime.jsxs("div", { className: classNames.classNames('fund-from-wallet__content__wallet-card__balance', {
+                                }), variant: 'body_normal', children: t('dyn_wallet_funding.from_external_wallet.funding_view.balance_error') })] }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card', children: [jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details', children: [jsxRuntime.jsx(walletBook.WalletIcon, { icon: externalWallet.connector.metadata.icon, walletKey: externalWallet.connector.key, className: 'fund-from-wallet__content__wallet-card__wallet-details__icon' }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details__rows', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_wallet_funding.from_external_wallet.funding_view.wallet_detail_from') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', children: shortenWalletAddress.shortenWalletAddress(externalWallet.address) })] })] }), tokenBalancesLoading && (jsxRuntime.jsx(Skeleton.Skeleton, { dataTestId: 'balance-skeleton', container: {
+                                    className: 'fund-from-wallet__content__wallet-card__balance-skeleton',
+                                } })), !tokenBalancesLoading && (jsxRuntime.jsxs("div", { className: classNames.classNames('fund-from-wallet__content__wallet-card__balance', {
                                     'fund-from-wallet__content__wallet-card__balance--disable-select': disableTokenSelect,
                                 }), onClick: () => !disableTokenSelect && setShowTokenSelect(true), children: [jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card__balance__rows', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', weight: 'bold', children: t('dyn_wallet_funding.from_external_wallet.funding_view.balance') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', "data-testid": `balance-amount-${tokenSymbol}`, children: formatValue.formatValue({
                                                     maxDecimals: 8,
                                                     symbol: tokenSymbol,
                                                     value: balanceNumber,
                                                     withFixedZeros: isFiatToken.isFiatToken(tokenSymbol) || tokenSymbol === 'USDC',
-                                                }) })] }), !disableTokenSelect && (jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'small', className: 'fund-from-wallet__content__wallet-card__balance__icon', children: jsxRuntime.jsx(chevronDown.ReactComponent, {}) }))] })] })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: !isMinimumRespected || showNotEnoughBalance || !isNonZero.isNonZero(tokenAmount), onClick: () => handleSubmit({
+                                                }) })] }), !disableTokenSelect && (jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'small', className: 'fund-from-wallet__content__wallet-card__balance__icon', children: jsxRuntime.jsx(chevronDown.ReactComponent, {}) }))] }))] })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: !isMinimumRespected || showNotEnoughBalance || !isNonZero.isNonZero(tokenAmount), onClick: () => handleSubmit({
                     externalWallet,
                     tokenAmount,
                     tokenBalances,

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

@@ -22,7 +22,6 @@ import '../../../../context/ViewContext/ViewContext.js';
 import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
-import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../shared/consts/index.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
@@ -55,7 +54,9 @@ import '../../../../views/CollectUserDataView/useFields.js';
 import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
+import '../../../../store/state/loadingAndLifecycle.js';
 import '../../../../store/state/walletOptions/walletOptions.js';
+import '@dynamic-labs/ethereum-aa';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
@@ -138,7 +139,9 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
     const [hasUserInteracted, setHasUserInteracted] = useState(false);
     const [conversionErrorIconRef, setConversionErrorIconRef] = useState(null);
     const { setDynamicWidgetView } = useWidgetContext();
-    const tokenBalances = useTokensForFunding({ wallet: externalWallet });
+    const { isLoading: tokenBalancesLoading, tokens: tokenBalances } = useTokensForFunding({
+        wallet: externalWallet,
+    });
     const { data: exchangeRates } = usePromise(getExchangeRates, {
         initialData: {},
         // Initialize amounts after exchange rates are fetched
@@ -265,7 +268,7 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
                                         withFixedZeros: isFiatToken(primaryData.symbol) ||
                                             primaryData.symbol === 'USDC',
                                     })) !== null && _f !== void 0 ? _f : primaryData.amount
-                                    : primaryData.amount, onChange: primaryData.setAmount, emitter: inputEmitter, onInteraction: () => setHasUserInteracted(true), locked: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact' }, inputSymbolProp))), primaryData.amount === undefined && (jsx(Skeleton, { container: {
+                                    : primaryData.amount, onChange: primaryData.setAmount, emitter: inputEmitter, onInteraction: () => setHasUserInteracted(true), locked: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact' }, inputSymbolProp))), primaryData.amount === undefined && (jsx(Skeleton, { dataTestId: 'primary-amount-skeleton', container: {
                                     className: 'fund-from-wallet__content__amount-container__skeleton',
                                 } })), showQuickSuggestions && (jsx("div", { className: 'fund-from-wallet__content__amount-container__quick-suggestions', children: quickSuggestionsParsed.map(({ display, value }) => (jsx(Typography, { variant: 'body_small', color: 'secondary', onClick: () => handleQuickSuggestion(value), children: display }, value))) })), !showQuickSuggestions && secondaryDisplay && (jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-amount-container', children: [jsx(Typography, { weight: 'medium', className: classNames('fund-from-wallet__content__amount-container__secondary-amount-container__amount', {
                                             'fund-from-wallet__content__amount-container__secondary-amount-container__amount--zero': !isNonZero(secondaryData.amount),
@@ -274,14 +277,16 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
                                             value: UNAVAILABLE_VALUE,
                                         }) }), jsx("div", { ref: setConversionErrorIconRef, children: jsx(Icon, { size: 'medium', color: 'text-tertiary', children: jsx(SvgFooterInfoIcon, {}) }) }), jsx(Tooltip, { content: t('dyn_wallet_funding.from_external_wallet.funding_view.network_conversion_error'), targetRef: conversionErrorIconRef, className: 'fund-from-wallet__content__amount-container__secondary-missing__tooltip' })] })), jsx(Typography, { color: 'error-1', className: classNames('fund-from-wallet__content__amount-container__balance-error', {
                                     'fund-from-wallet__content__amount-container__balance-error--visible': showNotEnoughBalance,
-                                }), variant: 'body_normal', children: t('dyn_wallet_funding.from_external_wallet.funding_view.balance_error') })] }), jsxs("div", { className: 'fund-from-wallet__content__wallet-card', children: [jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details', children: [jsx(WalletIcon, { icon: externalWallet.connector.metadata.icon, walletKey: externalWallet.connector.key, className: 'fund-from-wallet__content__wallet-card__wallet-details__icon' }), jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details__rows', children: [jsx(Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_wallet_funding.from_external_wallet.funding_view.wallet_detail_from') }), jsx(Typography, { variant: 'body_small', children: shortenWalletAddress(externalWallet.address) })] })] }), jsxs("div", { className: classNames('fund-from-wallet__content__wallet-card__balance', {
+                                }), variant: 'body_normal', children: t('dyn_wallet_funding.from_external_wallet.funding_view.balance_error') })] }), jsxs("div", { className: 'fund-from-wallet__content__wallet-card', children: [jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details', children: [jsx(WalletIcon, { icon: externalWallet.connector.metadata.icon, walletKey: externalWallet.connector.key, className: 'fund-from-wallet__content__wallet-card__wallet-details__icon' }), jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details__rows', children: [jsx(Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_wallet_funding.from_external_wallet.funding_view.wallet_detail_from') }), jsx(Typography, { variant: 'body_small', children: shortenWalletAddress(externalWallet.address) })] })] }), tokenBalancesLoading && (jsx(Skeleton, { dataTestId: 'balance-skeleton', container: {
+                                    className: 'fund-from-wallet__content__wallet-card__balance-skeleton',
+                                } })), !tokenBalancesLoading && (jsxs("div", { className: classNames('fund-from-wallet__content__wallet-card__balance', {
                                     'fund-from-wallet__content__wallet-card__balance--disable-select': disableTokenSelect,
                                 }), onClick: () => !disableTokenSelect && setShowTokenSelect(true), children: [jsxs("div", { className: 'fund-from-wallet__content__wallet-card__balance__rows', children: [jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'bold', children: t('dyn_wallet_funding.from_external_wallet.funding_view.balance') }), jsx(Typography, { variant: 'body_small', weight: 'bold', "data-testid": `balance-amount-${tokenSymbol}`, children: formatValue({
                                                     maxDecimals: 8,
                                                     symbol: tokenSymbol,
                                                     value: balanceNumber,
                                                     withFixedZeros: isFiatToken(tokenSymbol) || tokenSymbol === 'USDC',
-                                                }) })] }), !disableTokenSelect && (jsx(Icon, { color: 'text-tertiary', size: 'small', className: 'fund-from-wallet__content__wallet-card__balance__icon', children: jsx(SvgChevronDown, {}) }))] })] })] }), jsx(TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: !isMinimumRespected || showNotEnoughBalance || !isNonZero(tokenAmount), onClick: () => handleSubmit({
+                                                }) })] }), !disableTokenSelect && (jsx(Icon, { color: 'text-tertiary', size: 'small', className: 'fund-from-wallet__content__wallet-card__balance__icon', children: jsx(SvgChevronDown, {}) }))] }))] })] }), jsx(TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: !isMinimumRespected || showNotEnoughBalance || !isNonZero(tokenAmount), onClick: () => handleSubmit({
                     externalWallet,
                     tokenAmount,
                     tokenBalances,

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/TokenSelectScreen/TokenOption/TokenOption.cjs

@@ -22,7 +22,6 @@ require('../../../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../../../utils/constants/colors.cjs');
 require('../../../../../../utils/constants/values.cjs');
-require('../../../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../../../shared/consts/index.cjs');
 require('../../../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../../../context/ErrorContext/ErrorContext.cjs');
@@ -54,7 +53,9 @@ require('../../../../../../views/CollectUserDataView/useFields.cjs');
 require('../../../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../../../store/state/walletOptions/walletOptions.cjs');
+require('@dynamic-labs/ethereum-aa');
 var Typography = require('../../../../../../components/Typography/Typography.cjs');
 require('../../../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../../../components/ShadowDOM/ShadowDOM.cjs');

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/TokenSelectScreen/TokenOption/TokenOption.js

@@ -18,7 +18,6 @@ import '../../../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../../../utils/constants/colors.js';
 import '../../../../../../utils/constants/values.js';
-import '../../../../../../store/state/loadingAndLifecycle.js';
 import '../../../../../../shared/consts/index.js';
 import '../../../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../../../context/ErrorContext/ErrorContext.js';
@@ -50,7 +49,9 @@ import '../../../../../../views/CollectUserDataView/useFields.js';
 import '../../../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
+import '../../../../../../store/state/loadingAndLifecycle.js';
 import '../../../../../../store/state/walletOptions/walletOptions.js';
+import '@dynamic-labs/ethereum-aa';
 import { Typography } from '../../../../../../components/Typography/Typography.js';
 import '../../../../../../context/FooterAnimationContext/index.js';
 import '../../../../../../components/ShadowDOM/ShadowDOM.js';

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/TokenSelectScreen/TokenSelectScreen.cjs

@@ -19,11 +19,11 @@ require('../../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 var close = require('../../../../../shared/assets/close.cjs');
+var walletIllustration = require('../../../../../shared/assets/wallet-illustration.cjs');
 require('../../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../../utils/constants/colors.cjs');
 require('../../../../../utils/constants/values.cjs');
-require('../../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../../shared/consts/index.cjs');
 require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../../context/ErrorContext/ErrorContext.cjs');
@@ -55,7 +55,9 @@ require('../../../../../views/CollectUserDataView/useFields.cjs');
 require('../../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../../store/state/walletOptions/walletOptions.cjs');
+require('@dynamic-labs/ethereum-aa');
 var Typography = require('../../../../../components/Typography/Typography.cjs');
 require('../../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../../components/ShadowDOM/ShadowDOM.cjs');
@@ -95,6 +97,7 @@ require('../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
+var LinearGradientFrame = require('../../../../../components/LinearGradientFrame/LinearGradientFrame.cjs');
 var TokenOption = require('./TokenOption/TokenOption.cjs');
 
 const TokenSelectScreen = ({ onClose, onSelectToken, currentToken, tokens, className, style, }) => {
@@ -107,8 +110,11 @@ const TokenSelectScreen = ({ onClose, onSelectToken, currentToken, tokens, class
             return true;
         return false;
     });
+    const noAssets = tokens.length === 0;
     const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', id: 'close-button', "data-testid": 'close-button', onClick: onClose, children: jsxRuntime.jsx(close.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: classNames.classNames('token-select', className), style: style, "data-testid": 'token-select', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: t('dyn_wallet_funding.from_external_wallet.token_select.title') }) }), jsxRuntime.jsxs("label", { htmlFor: 'token-select-search', className: 'token-select__search', children: [jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'small', children: jsxRuntime.jsx(search.ReactComponent, {}) }), jsxRuntime.jsx("input", { id: 'token-select-search', placeholder: t('dyn_wallet_funding.from_external_wallet.token_select.search_placeholder'), className: 'token-select__search__input', value: search$1, onChange: (e) => setSearch(e.target.value) })] }), jsxRuntime.jsx("div", { className: 'token-select__tokens', children: filteredTokens.map((token) => (jsxRuntime.jsx(TokenOption.TokenOption, { token: token, isSelected: token.symbol === currentToken, onSelect: () => onSelectToken(token.symbol) }, token.symbol))) })] }));
+    return (jsxRuntime.jsxs("div", { className: classNames.classNames('token-select', className), style: style, "data-testid": 'token-select', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: t(noAssets
+                        ? 'dyn_wallet_funding.from_external_wallet.token_select.no_assets_title'
+                        : 'dyn_wallet_funding.from_external_wallet.token_select.title') }) }), noAssets && (jsxRuntime.jsxs("div", { className: 'token-select__no-assets', children: [jsxRuntime.jsx(LinearGradientFrame.LinearGradientFrame, { Icon: jsxRuntime.jsx(walletIllustration.ReactComponent, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'secondary', weight: 'medium', children: t('dyn_wallet_funding.from_external_wallet.token_select.no_assets_description') })] })), !noAssets && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("label", { htmlFor: 'token-select-search', className: 'token-select__search', children: [jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'small', children: jsxRuntime.jsx(search.ReactComponent, {}) }), jsxRuntime.jsx("input", { id: 'token-select-search', placeholder: t('dyn_wallet_funding.from_external_wallet.token_select.search_placeholder'), className: 'token-select__search__input', value: search$1, onChange: (e) => setSearch(e.target.value) })] }), jsxRuntime.jsx("div", { className: 'token-select__tokens', children: filteredTokens.map((token) => (jsxRuntime.jsx(TokenOption.TokenOption, { token: token, isSelected: token.symbol === currentToken, onSelect: () => onSelectToken(token.symbol) }, token.symbol))) })] }))] }));
 };
 
 exports.TokenSelectScreen = TokenSelectScreen;

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/TokenSelectScreen/TokenSelectScreen.js

@@ -1,5 +1,5 @@
 'use client'
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as SvgSearch } from '../../../../../assets/search.js';
@@ -15,11 +15,11 @@ import '../../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import { ReactComponent as SvgClose } from '../../../../../shared/assets/close.js';
+import { ReactComponent as SvgWalletIllustration } from '../../../../../shared/assets/wallet-illustration.js';
 import '../../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../../utils/constants/colors.js';
 import '../../../../../utils/constants/values.js';
-import '../../../../../store/state/loadingAndLifecycle.js';
 import '../../../../../shared/consts/index.js';
 import '../../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../../context/ErrorContext/ErrorContext.js';
@@ -51,7 +51,9 @@ import '../../../../../views/CollectUserDataView/useFields.js';
 import '../../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
+import '../../../../../store/state/loadingAndLifecycle.js';
 import '../../../../../store/state/walletOptions/walletOptions.js';
+import '@dynamic-labs/ethereum-aa';
 import { Typography } from '../../../../../components/Typography/Typography.js';
 import '../../../../../context/FooterAnimationContext/index.js';
 import '../../../../../components/ShadowDOM/ShadowDOM.js';
@@ -91,6 +93,7 @@ import '../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
+import { LinearGradientFrame } from '../../../../../components/LinearGradientFrame/LinearGradientFrame.js';
 import { TokenOption } from './TokenOption/TokenOption.js';
 
 const TokenSelectScreen = ({ onClose, onSelectToken, currentToken, tokens, className, style, }) => {
@@ -103,8 +106,11 @@ const TokenSelectScreen = ({ onClose, onSelectToken, currentToken, tokens, class
             return true;
         return false;
     });
+    const noAssets = tokens.length === 0;
     const closeButton = (jsx(IconButton, { type: 'button', id: 'close-button', "data-testid": 'close-button', onClick: onClose, children: jsx(SvgClose, {}) }));
-    return (jsxs("div", { className: classNames('token-select', className), style: style, "data-testid": 'token-select', children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { variant: 'title', children: t('dyn_wallet_funding.from_external_wallet.token_select.title') }) }), jsxs("label", { htmlFor: 'token-select-search', className: 'token-select__search', children: [jsx(Icon, { color: 'text-tertiary', size: 'small', children: jsx(SvgSearch, {}) }), jsx("input", { id: 'token-select-search', placeholder: t('dyn_wallet_funding.from_external_wallet.token_select.search_placeholder'), className: 'token-select__search__input', value: search, onChange: (e) => setSearch(e.target.value) })] }), jsx("div", { className: 'token-select__tokens', children: filteredTokens.map((token) => (jsx(TokenOption, { token: token, isSelected: token.symbol === currentToken, onSelect: () => onSelectToken(token.symbol) }, token.symbol))) })] }));
+    return (jsxs("div", { className: classNames('token-select', className), style: style, "data-testid": 'token-select', children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { variant: 'title', children: t(noAssets
+                        ? 'dyn_wallet_funding.from_external_wallet.token_select.no_assets_title'
+                        : 'dyn_wallet_funding.from_external_wallet.token_select.title') }) }), noAssets && (jsxs("div", { className: 'token-select__no-assets', children: [jsx(LinearGradientFrame, { Icon: jsx(SvgWalletIllustration, {}) }), jsx(Typography, { variant: 'title', color: 'secondary', weight: 'medium', children: t('dyn_wallet_funding.from_external_wallet.token_select.no_assets_description') })] })), !noAssets && (jsxs(Fragment, { children: [jsxs("label", { htmlFor: 'token-select-search', className: 'token-select__search', children: [jsx(Icon, { color: 'text-tertiary', size: 'small', children: jsx(SvgSearch, {}) }), jsx("input", { id: 'token-select-search', placeholder: t('dyn_wallet_funding.from_external_wallet.token_select.search_placeholder'), className: 'token-select__search__input', value: search, onChange: (e) => setSearch(e.target.value) })] }), jsx("div", { className: 'token-select__tokens', children: filteredTokens.map((token) => (jsx(TokenOption, { token: token, isSelected: token.symbol === currentToken, onSelect: () => onSelectToken(token.symbol) }, token.symbol))) })] }))] }));
 };
 
 export { TokenSelectScreen };

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/types.d.ts

@@ -44,7 +44,7 @@ export type ReceiveExternalWalletFundsProps = {
          * The amount to display.
          *
          * The amount is in fiat by default, but if token.rule is set to `exact-with-amount`,
-         * the amount is then in token instead.
+         * the amount then refers to the token instead.
          */
         value: number;
         /**
@@ -75,7 +75,9 @@ export type ReceiveExternalWalletFundsProps = {
     /**
      * Quick suggestions for the amount input.
      *
-     * If an array is passed directly, uses USD as the token.
+     * If an array is passed directly, uses $ (USD) as the token.
+     *
+     * If a token is provided, but doesn't correspond to the selected token, quick suggestions will NOT be shown.
      */
     quickSuggestions?: number[] | {
         token: string;