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

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,6 +58,7 @@ 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');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
@@ -142,7 +142,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 +271,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 +280,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,6 +54,7 @@ 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 { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/FooterAnimationContext/index.js';
@@ -138,7 +138,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 +267,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 +276,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,6 +53,7 @@ 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');
 var Typography = require('../../../../../../components/Typography/Typography.cjs');
 require('../../../../../../context/FooterAnimationContext/index.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,6 +49,7 @@ 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 { Typography } from '../../../../../../components/Typography/Typography.js';
 import '../../../../../../context/FooterAnimationContext/index.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,6 +55,7 @@ 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');
 var Typography = require('../../../../../components/Typography/Typography.cjs');
 require('../../../../../context/FooterAnimationContext/index.cjs');
@@ -95,6 +96,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 +109,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,6 +51,7 @@ 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 { Typography } from '../../../../../components/Typography/Typography.js';
 import '../../../../../context/FooterAnimationContext/index.js';
@@ -91,6 +92,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 +105,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;

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

@@ -15,7 +15,6 @@ require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../../../../../utils/constants/colors.cjs');
 require('../../../../../../utils/constants/values.cjs');
-require('../../../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../../../shared/consts/index.cjs');
 require('../../../../../../events/dynamicEvents.cjs');
 require('../../../../../../../../_virtual/_tslib.cjs');
@@ -49,6 +48,7 @@ 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('react-i18next');
 require('../../../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
@@ -102,12 +102,18 @@ const useTokensForFunding = ({ wallet, }) => {
         includeFiat: true,
         includeNativeBalance: true,
     });
-    const { currency } = useFetchCurrency.useFetchCurrency(wallet.connector, network);
-    const { balance } = useFetchBalance.useFetchBalance({
+    const { currency, isLoading: currencyLoading } = useFetchCurrency.useFetchCurrency(wallet.connector, network);
+    const { balance, isLoading: balanceLoading } = useFetchBalance.useFetchBalance({
         chain: currency === null || currency === void 0 ? void 0 : currency.symbol,
         network,
         wallet,
     });
+    if (tokenBalancesLoading || currencyLoading || balanceLoading) {
+        return {
+            isLoading: true,
+            tokens: [],
+        };
+    }
     const evmNetworks = (_a = wallet.connector.evmNetworks) !== null && _a !== void 0 ? _a : [];
     const solNetworks = (_b = wallet.connector.solNetworks) !== null && _b !== void 0 ? _b : [];
     let parsedTokens = [];
@@ -130,7 +136,10 @@ const useTokensForFunding = ({ wallet, }) => {
         const nativeToken = parsedTokens.find((token) => token.symbol === currency.symbol);
         if (nativeToken) {
             nativeToken.token = 'native';
-            return parsedTokens;
+            return {
+                isLoading: false,
+                tokens: parsedTokens,
+            };
         }
         const logoURI = (_d = (_c = [...evmNetworks, ...solNetworks]) === null || _c === void 0 ? void 0 : _c.find(({ chainId }) => chainId === network)) === null || _d === void 0 ? void 0 : _d.iconUrls[0];
         const fetchedToken = {
@@ -140,9 +149,15 @@ const useTokensForFunding = ({ wallet, }) => {
             symbol: currency.symbol,
             token: 'native',
         };
-        return [...parsedTokens, fetchedToken];
+        return {
+            isLoading: false,
+            tokens: [...parsedTokens, fetchedToken],
+        };
     }
-    return parsedTokens;
+    return {
+        isLoading: false,
+        tokens: parsedTokens,
+    };
 };
 
 exports.useTokensForFunding = useTokensForFunding;

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/utils/useTokensForFunding/useTokensForFunding.d.ts

@@ -3,5 +3,8 @@ import { FundingTokenData } from '../../types';
 type UseTokensForFundingProps = {
     wallet: Wallet;
 };
-export declare const useTokensForFunding: ({ wallet, }: UseTokensForFundingProps) => FundingTokenData[];
+export declare const useTokensForFunding: ({ wallet, }: UseTokensForFundingProps) => {
+    isLoading: boolean;
+    tokens: FundingTokenData[];
+};
 export {};

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

@@ -11,7 +11,6 @@ import '@dynamic-labs/wallet-book';
 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';
@@ -45,6 +44,7 @@ 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 'react-i18next';
 import '../../../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
@@ -98,12 +98,18 @@ const useTokensForFunding = ({ wallet, }) => {
         includeFiat: true,
         includeNativeBalance: true,
     });
-    const { currency } = useFetchCurrency(wallet.connector, network);
-    const { balance } = useFetchBalance({
+    const { currency, isLoading: currencyLoading } = useFetchCurrency(wallet.connector, network);
+    const { balance, isLoading: balanceLoading } = useFetchBalance({
         chain: currency === null || currency === void 0 ? void 0 : currency.symbol,
         network,
         wallet,
     });
+    if (tokenBalancesLoading || currencyLoading || balanceLoading) {
+        return {
+            isLoading: true,
+            tokens: [],
+        };
+    }
     const evmNetworks = (_a = wallet.connector.evmNetworks) !== null && _a !== void 0 ? _a : [];
     const solNetworks = (_b = wallet.connector.solNetworks) !== null && _b !== void 0 ? _b : [];
     let parsedTokens = [];
@@ -126,7 +132,10 @@ const useTokensForFunding = ({ wallet, }) => {
         const nativeToken = parsedTokens.find((token) => token.symbol === currency.symbol);
         if (nativeToken) {
             nativeToken.token = 'native';
-            return parsedTokens;
+            return {
+                isLoading: false,
+                tokens: parsedTokens,
+            };
         }
         const logoURI = (_d = (_c = [...evmNetworks, ...solNetworks]) === null || _c === void 0 ? void 0 : _c.find(({ chainId }) => chainId === network)) === null || _d === void 0 ? void 0 : _d.iconUrls[0];
         const fetchedToken = {
@@ -136,9 +145,15 @@ const useTokensForFunding = ({ wallet, }) => {
             symbol: currency.symbol,
             token: 'native',
         };
-        return [...parsedTokens, fetchedToken];
+        return {
+            isLoading: false,
+            tokens: [...parsedTokens, fetchedToken],
+        };
     }
-    return parsedTokens;
+    return {
+        isLoading: false,
+        tokens: parsedTokens,
+    };
 };
 
 export { useTokensForFunding };

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

@@ -35,7 +35,6 @@ require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
-require('../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../shared/consts/index.cjs');
 require('../../../../events/dynamicEvents.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
@@ -72,6 +71,7 @@ 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');
 var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
 require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');

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

@@ -31,7 +31,6 @@ import '@dynamic-labs/wallet-book';
 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 '../../../../context/CaptchaContext/CaptchaContext.js';
@@ -68,6 +67,7 @@ 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 { classNames } from '../../../../utils/functions/classNames/classNames.js';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';

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

@@ -19,7 +19,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');
@@ -53,6 +52,7 @@ 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('react-i18next');
 var Typography = require('../../../../components/Typography/Typography.cjs');

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

@@ -15,7 +15,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';
@@ -49,6 +48,7 @@ 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 'react-i18next';
 import { Typography } from '../../../../components/Typography/Typography.js';

package/src/lib/widgets/OnrampWidget/OnrampWidget.cjs

@@ -0,0 +1,104 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('@dynamic-labs/utils');
+require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../components/Alert/Alert.cjs');
+require('../../events/dynamicEvents.cjs');
+require('../../../../_virtual/_tslib.cjs');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../utils/constants/colors.cjs');
+require('../../utils/constants/values.cjs');
+var index = require('../../shared/utils/hooks/useOnClickOutside/index.cjs');
+require('../../shared/consts/index.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+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');
+require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../store/state/primaryWalletId/primaryWalletId.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../utils/functions/compareChains/compareChains.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('@dynamic-labs/types');
+require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../context/LoadingContext/LoadingContext.cjs');
+require('../../context/WalletContext/WalletContext.cjs');
+require('../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('yup');
+require('../../context/MockContext/MockContext.cjs');
+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('react-i18next');
+require('../../context/FooterAnimationContext/index.cjs');
+var ShadowDOM = require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+var OpacityTransition = require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('react-focus-lock');
+require('../DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../components/IconButton/IconButton.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('formik');
+require('../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
+require('../../store/state/sendBalances.cjs');
+require('../../components/Input/Input.cjs');
+require('../../components/OverlayCard/OverlayCard.cjs');
+require('../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../../context/PasskeyContext/PasskeyContext.cjs');
+require('../DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var OnrampContext = require('../../context/OnrampContext/OnrampContext.cjs');
+require('qrcode');
+require('../DynamicWidget/views/ReceiveExternalWalletFunds/ReceiveExternalWalletFunds.cjs');
+require('../../../index.cjs');
+require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../context/ConnectWithOtpContext/constants.cjs');
+require('../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../store/state/tokenBalances.cjs');
+require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/IsBrowser/IsBrowser.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
+
+const OnrampWidget = () => {
+    const { showOnramp, selectedOnramp, onrampEnabled, setShowOnramp } = OnrampContext.useOnrampContext();
+    const [onrampRef, setOnrampRef] = React.useState(null);
+    index.useOnClickOutside(onrampRef, () => setShowOnramp(false));
+    if (!onrampEnabled || !(selectedOnramp === null || selectedOnramp === void 0 ? void 0 : selectedOnramp.url)) {
+        return null;
+    }
+    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { children: jsxRuntime.jsxs(OpacityTransition.OpacityTransition, { isShown: showOnramp, children: [jsxRuntime.jsx("div", { className: 'onramp-widget__backdrop', "aria-hidden": 'true', "data-testid": 'onramp-widget-backdrop' }), jsxRuntime.jsx("div", { className: 'onramp-widget__modal', children: jsxRuntime.jsx("iframe", { id: 'onramp-iframe', src: selectedOnramp.url, allow: 'camera *;geolocation *', title: 'Crypto Onramp', ref: setOnrampRef, "data-testid": 'onramp-widget-modal' }) })] }) }));
+};
+
+exports.OnrampWidget = OnrampWidget;

package/src/lib/widgets/OnrampWidget/OnrampWidget.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const OnrampWidget: FC;