@dynamic-labs/sdk-react-core 4.3.2 → 4.4.0

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

@@ -82,6 +82,8 @@ import '../../../../components/OverlayCard/OverlayCard.js';
 import '../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../../context/OnrampContext/OnrampContext.js';
+import 'qrcode';
 import '../../../../../index.js';
 import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
@@ -95,7 +97,6 @@ import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
-import 'qrcode';
 import { getExchangeRates } from '../../../../data/api/exchangeRates/exchangeRates.js';
 import { FormattedInput } from './FormattedInput/FormattedInput.js';
 import { createFormattedInputEmitter } from './FormattedInput/formattedInputEmitter.js';
@@ -106,6 +107,7 @@ import { formatValue } from './utils/formatValue/formatValue.js';
 import { isFiatToken } from './utils/isFiatToken/isFiatToken.js';
 import { isNonZero } from './utils/isNonZero/isNonZero.js';
 import { respectsMinimum } from './utils/respectsMinimum/respectsMinimum.js';
+import { useSubmitExternalWalletFunding } from './utils/useSubmitExternalWalletFunding/useSubmitExternalWalletFunding.js';
 import { useTokensForFunding } from './utils/useTokensForFunding/useTokensForFunding.js';
 
 const defaultQuickSuggestions = {
@@ -135,7 +137,7 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
     const { t } = useTranslation();
     const [hasUserInteracted, setHasUserInteracted] = useState(false);
     const [conversionErrorIconRef, setConversionErrorIconRef] = useState(null);
-    const { goToInitialDynamicWidgetView } = useWidgetContext();
+    const { setDynamicWidgetView } = useWidgetContext();
     const tokenBalances = useTokensForFunding({ wallet: externalWallet });
     const { data: exchangeRates } = usePromise(getExchangeRates, {
         initialData: {},
@@ -241,13 +243,14 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
             setAmountsByTokenValue(value.toString());
         inputEmitter.emit('focus');
     };
+    const handleSubmit = useSubmitExternalWalletFunding();
     const inputSymbolProp = primaryData.symbol === 'USD'
         ? { leading: '$' }
         : { trailing: primaryData.symbol };
-    const backButton = (jsx(IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: goToInitialDynamicWidgetView, children: jsx(SvgArrowLeft, {}) }));
-    const walletCardContent = (jsxs(Fragment, { 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_receive_external_wallet_funds.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', {
+    const backButton = (jsx(IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => setDynamicWidgetView('choose-wallet-funding-method'), children: jsx(SvgArrowLeft, {}) }));
+    const walletCardContent = (jsxs(Fragment, { 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', {
                     '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_receive_external_wallet_funds.funding_view.balance') }), jsx(Typography, { variant: 'body_small', weight: 'bold', "data-testid": `balance-amount-${tokenSymbol}`, children: formatValue({
+                }), 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,
@@ -255,9 +258,9 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
                                 }) })] }), !disableTokenSelect && (jsx(Icon, { color: 'text-tertiary', size: 'small', className: 'fund-from-wallet__content__wallet-card__balance__icon', children: jsx(SvgChevronDown, {}) }))] })] }));
     return (jsxs("div", { className: 'fund-from-wallet', children: [!disableTokenSelect && (jsx(TokenSelectScreen, { onClose: () => setShowTokenSelect(false), onSelectToken: handleSelectToken, tokens: tokenBalances !== null && tokenBalances !== void 0 ? tokenBalances : [], currentToken: tokenSymbol, className: classNames('fund-from-wallet__token-select', {
                     'fund-from-wallet__token-select--open': showTokenSelect,
-                }) })), jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', children: t('dyn_receive_external_wallet_funds.funding_view.title') }) }), jsxs("div", { className: 'fund-from-wallet__content', children: [jsx("div", { className: classNames('fund-from-wallet__content__wallet-card', 'fund-from-wallet__content__wallet-card--invisible'), children: walletCardContent }), jsxs("div", { className: 'fund-from-wallet__content__amount-container', children: [minimum && (jsx(Typography, { color: 'error-1', className: classNames('fund-from-wallet__content__amount-container__minimum-error', {
+                }) })), jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', children: t('dyn_wallet_funding.from_external_wallet.funding_view.title') }) }), jsxs("div", { className: 'fund-from-wallet__content', children: [jsx("div", { className: classNames('fund-from-wallet__content__wallet-card', 'fund-from-wallet__content__wallet-card--invisible'), children: walletCardContent }), jsxs("div", { className: 'fund-from-wallet__content__amount-container', children: [minimum && (jsx(Typography, { color: 'error-1', className: classNames('fund-from-wallet__content__amount-container__minimum-error', {
                                     'fund-from-wallet__content__amount-container__minimum-error--visible': showMinimumRequired,
-                                }), variant: 'body_normal', children: t('dyn_receive_external_wallet_funds.funding_view.minimum_error', {
+                                }), variant: 'body_normal', children: t('dyn_wallet_funding.from_external_wallet.funding_view.minimum_error', {
                                     minimum: formatValue({
                                         symbol: minimum.token,
                                         value: minimum.value,
@@ -277,11 +280,14 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
                                         }), children: secondaryDisplay }), jsx(Icon, { size: 'small', color: 'text-secondary', className: 'fund-from-wallet__content__amount-container__secondary-amount-container__switch', children: jsx(SvgSwitchToggle, { "data-testid": 'switch-primary-and-secondary', onClick: switchPrimaryAndSecondary }) })] })), !showQuickSuggestions && !secondaryDisplay && (jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-missing', children: [jsx(Typography, { weight: 'medium', children: formatValue({
                                             symbol: secondaryData.symbol,
                                             value: UNAVAILABLE_VALUE,
-                                        }) }), jsx("div", { ref: setConversionErrorIconRef, children: jsx(Icon, { size: 'medium', color: 'text-tertiary', children: jsx(SvgFooterInfoIcon, {}) }) }), jsx(Tooltip, { content: t('dyn_receive_external_wallet_funds.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', {
+                                        }) }), 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_receive_external_wallet_funds.funding_view.balance_error') })] }), jsx("div", { className: 'fund-from-wallet__content__wallet-card', children: walletCardContent })] }), jsx(TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: !isMinimumRespected ||
-                    showNotEnoughBalance ||
-                    !isNonZero(primaryData.amount), children: t('dyn_receive_external_wallet_funds.funding_view.confirm_button') })] }));
+                                }), variant: 'body_normal', children: t('dyn_wallet_funding.from_external_wallet.funding_view.balance_error') })] }), jsx("div", { className: 'fund-from-wallet__content__wallet-card', children: walletCardContent })] }), 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,
+                    tokenSymbol,
+                }), children: t('dyn_wallet_funding.from_external_wallet.funding_view.confirm_button') })] }));
 };
 
 export { ReceiveExternalWalletFunds };

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

@@ -76,6 +76,8 @@ require('../../../../../../components/OverlayCard/OverlayCard.cjs');
 require('../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 require('../../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../../../context/OnrampContext/OnrampContext.cjs');
+require('qrcode');
 require('../../ReceiveExternalWalletFunds.cjs');
 require('../../../../../../../index.cjs');
 require('../../../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
@@ -90,14 +92,13 @@ require('../../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../../components/Popper/PopperContext/PopperContext.cjs');
-require('qrcode');
 var formatValue = require('../../utils/formatValue/formatValue.cjs');
 
 const TokenOption = ({ token, isSelected, onSelect, }) => {
     const { t } = reactI18next.useTranslation();
     return (jsxRuntime.jsxs("div", { className: classNames.classNames('token-option', {
             'token-option--selected': isSelected,
-        }), onClick: onSelect, "data-testid": `token-option-${token.symbol}`, children: [token.logoURI ? (jsxRuntime.jsx(Image.Image, { src: token.logoURI, alt: token.symbol, className: 'token-option__icon', dataTestId: 'token-option-icon' })) : (jsxRuntime.jsx("div", { className: 'token-option__icon--skeleton', "data-testid": 'token-option__icon--skeleton' })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', className: 'token-option__name', children: token.name }), jsxRuntime.jsxs("div", { className: 'token-option__balance-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', className: 'token-option__balance-label', color: 'secondary', weight: 'medium', children: t('dyn_receive_external_wallet_funds.token_select.token_option.balance_label') }), jsxRuntime.jsx("div", { className: 'token-option__balance-container__balance-value-container', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'body_small', children: formatValue.formatValue({
+        }), onClick: onSelect, "data-testid": `token-option-${token.symbol}`, children: [token.logoURI ? (jsxRuntime.jsx(Image.Image, { src: token.logoURI, alt: token.symbol, className: 'token-option__icon', dataTestId: 'token-option-icon' })) : (jsxRuntime.jsx("div", { className: 'token-option__icon--skeleton', "data-testid": 'token-option__icon--skeleton' })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', className: 'token-option__name', children: token.name }), jsxRuntime.jsxs("div", { className: 'token-option__balance-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', className: 'token-option__balance-label', color: 'secondary', weight: 'medium', children: t('dyn_wallet_funding.from_external_wallet.token_select.token_option.balance_label') }), jsxRuntime.jsx("div", { className: 'token-option__balance-container__balance-value-container', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'body_small', children: formatValue.formatValue({
                                 maxDecimals: 8,
                                 symbol: token.symbol,
                                 value: token.balance,

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

@@ -72,6 +72,8 @@ import '../../../../../../components/OverlayCard/OverlayCard.js';
 import '../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import '../../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../../../../context/OnrampContext/OnrampContext.js';
+import 'qrcode';
 import '../../ReceiveExternalWalletFunds.js';
 import '../../../../../../../index.js';
 import '../../../../../../context/IpConfigurationContext/IpConfigurationContext.js';
@@ -86,14 +88,13 @@ import '../../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../../components/Popper/PopperContext/PopperContext.js';
-import 'qrcode';
 import { formatValue } from '../../utils/formatValue/formatValue.js';
 
 const TokenOption = ({ token, isSelected, onSelect, }) => {
     const { t } = useTranslation();
     return (jsxs("div", { className: classNames('token-option', {
             'token-option--selected': isSelected,
-        }), onClick: onSelect, "data-testid": `token-option-${token.symbol}`, children: [token.logoURI ? (jsx(Image, { src: token.logoURI, alt: token.symbol, className: 'token-option__icon', dataTestId: 'token-option-icon' })) : (jsx("div", { className: 'token-option__icon--skeleton', "data-testid": 'token-option__icon--skeleton' })), jsx(Typography, { variant: 'body_normal', className: 'token-option__name', children: token.name }), jsxs("div", { className: 'token-option__balance-container', children: [jsx(Typography, { variant: 'body_small', className: 'token-option__balance-label', color: 'secondary', weight: 'medium', children: t('dyn_receive_external_wallet_funds.token_select.token_option.balance_label') }), jsx("div", { className: 'token-option__balance-container__balance-value-container', children: jsx(Typography, { weight: 'medium', variant: 'body_small', children: formatValue({
+        }), onClick: onSelect, "data-testid": `token-option-${token.symbol}`, children: [token.logoURI ? (jsx(Image, { src: token.logoURI, alt: token.symbol, className: 'token-option__icon', dataTestId: 'token-option-icon' })) : (jsx("div", { className: 'token-option__icon--skeleton', "data-testid": 'token-option__icon--skeleton' })), jsx(Typography, { variant: 'body_normal', className: 'token-option__name', children: token.name }), jsxs("div", { className: 'token-option__balance-container', children: [jsx(Typography, { variant: 'body_small', className: 'token-option__balance-label', color: 'secondary', weight: 'medium', children: t('dyn_wallet_funding.from_external_wallet.token_select.token_option.balance_label') }), jsx("div", { className: 'token-option__balance-container__balance-value-container', children: jsx(Typography, { weight: 'medium', variant: 'body_small', children: formatValue({
                                 maxDecimals: 8,
                                 symbol: token.symbol,
                                 value: token.balance,

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

@@ -79,6 +79,8 @@ require('../../../../../components/OverlayCard/OverlayCard.cjs');
 require('../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../../context/OnrampContext/OnrampContext.cjs');
+require('qrcode');
 require('../ReceiveExternalWalletFunds.cjs');
 require('../../../../../../index.cjs');
 require('../../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
@@ -93,7 +95,6 @@ require('../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
-require('qrcode');
 var TokenOption = require('./TokenOption/TokenOption.cjs');
 
 const TokenSelectScreen = ({ onClose, onSelectToken, currentToken, tokens, className, style, }) => {
@@ -107,7 +108,7 @@ const TokenSelectScreen = ({ onClose, onSelectToken, currentToken, tokens, class
         return false;
     });
     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_receive_external_wallet_funds.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_receive_external_wallet_funds.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('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))) })] }));
 };
 
 exports.TokenSelectScreen = TokenSelectScreen;

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

@@ -75,6 +75,8 @@ import '../../../../../components/OverlayCard/OverlayCard.js';
 import '../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import '../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../../../context/OnrampContext/OnrampContext.js';
+import 'qrcode';
 import '../ReceiveExternalWalletFunds.js';
 import '../../../../../../index.js';
 import '../../../../../context/IpConfigurationContext/IpConfigurationContext.js';
@@ -89,7 +91,6 @@ import '../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
-import 'qrcode';
 import { TokenOption } from './TokenOption/TokenOption.js';
 
 const TokenSelectScreen = ({ onClose, onSelectToken, currentToken, tokens, className, style, }) => {
@@ -103,7 +104,7 @@ const TokenSelectScreen = ({ onClose, onSelectToken, currentToken, tokens, class
         return false;
     });
     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_receive_external_wallet_funds.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_receive_external_wallet_funds.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('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))) })] }));
 };
 
 export { TokenSelectScreen };

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

@@ -4,6 +4,10 @@ export type FundingTokenData = {
     symbol: string;
     balance: number;
     logoURI: string | undefined;
+    token: 'native' | {
+        address: string;
+        decimals?: number;
+    };
 };
 /**
  * Rule over how the user can input the amount.

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

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

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

@@ -0,0 +1,44 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+var logger = require('../../../../../../shared/logger.cjs');
+var useFunding = require('../../../../../../utils/hooks/useFunding/useFunding.cjs');
+var DynamicWidgetContext = require('../../../../context/DynamicWidgetContext.cjs');
+
+const useSubmitExternalWalletFunding = () => {
+    const { fundWithExternalWallet } = useFunding.useFunding();
+    const { goToInitialDynamicWidgetView, setHeaderAlert } = DynamicWidgetContext.useWidgetContext();
+    return React.useCallback((_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ tokenAmount, externalWallet, tokenSymbol, tokenBalances, }) {
+        var _b;
+        if (!tokenAmount)
+            return;
+        // This should be defined because if the current token is not in the tokenBalances,
+        // the user would not be able to select it in the token select screen,
+        // or if it was already selected, the user would see balance as 0 and submit button would be disabled
+        const token = (_b = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find(({ symbol }) => symbol === tokenSymbol)) === null || _b === void 0 ? void 0 : _b.token;
+        if (!token)
+            return;
+        try {
+            const txId = yield fundWithExternalWallet({
+                amount: parseFloat(tokenAmount),
+                fromWallet: externalWallet,
+                token: token === 'native' ? undefined : token,
+            });
+            logger.logger.info(`Funding with external wallet succeeded with transaction id: ${txId}`);
+            goToInitialDynamicWidgetView();
+            setHeaderAlert({
+                copykey: 'dyn_wallet_funding.success',
+                variant: 'success',
+            });
+        }
+        catch (error) {
+            logger.logger.error('Failed to fund with external wallet', error);
+        }
+    }), [fundWithExternalWallet, goToInitialDynamicWidgetView, setHeaderAlert]);
+};
+
+exports.useSubmitExternalWalletFunding = useSubmitExternalWalletFunding;

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

@@ -0,0 +1,9 @@
+import { Wallet } from '@dynamic-labs/wallet-connector-core';
+import { FundingTokenData } from '../../types';
+export type submitExternalWalletFundingProps = {
+    tokenAmount: string | undefined;
+    externalWallet: Wallet;
+    tokenSymbol: string;
+    tokenBalances: FundingTokenData[];
+};
+export declare const useSubmitExternalWalletFunding: () => ({ tokenAmount, externalWallet, tokenSymbol, tokenBalances, }: submitExternalWalletFundingProps) => Promise<void>;

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

@@ -0,0 +1,40 @@
+'use client'
+import { __awaiter } from '../../../../../../../../_virtual/_tslib.js';
+import { useCallback } from 'react';
+import { logger } from '../../../../../../shared/logger.js';
+import { useFunding } from '../../../../../../utils/hooks/useFunding/useFunding.js';
+import { useWidgetContext } from '../../../../context/DynamicWidgetContext.js';
+
+const useSubmitExternalWalletFunding = () => {
+    const { fundWithExternalWallet } = useFunding();
+    const { goToInitialDynamicWidgetView, setHeaderAlert } = useWidgetContext();
+    return useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ tokenAmount, externalWallet, tokenSymbol, tokenBalances, }) {
+        var _b;
+        if (!tokenAmount)
+            return;
+        // This should be defined because if the current token is not in the tokenBalances,
+        // the user would not be able to select it in the token select screen,
+        // or if it was already selected, the user would see balance as 0 and submit button would be disabled
+        const token = (_b = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find(({ symbol }) => symbol === tokenSymbol)) === null || _b === void 0 ? void 0 : _b.token;
+        if (!token)
+            return;
+        try {
+            const txId = yield fundWithExternalWallet({
+                amount: parseFloat(tokenAmount),
+                fromWallet: externalWallet,
+                token: token === 'native' ? undefined : token,
+            });
+            logger.info(`Funding with external wallet succeeded with transaction id: ${txId}`);
+            goToInitialDynamicWidgetView();
+            setHeaderAlert({
+                copykey: 'dyn_wallet_funding.success',
+                variant: 'success',
+            });
+        }
+        catch (error) {
+            logger.error('Failed to fund with external wallet', error);
+        }
+    }), [fundWithExternalWallet, goToInitialDynamicWidgetView, setHeaderAlert]);
+};
+
+export { useSubmitExternalWalletFunding };

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

@@ -86,6 +86,7 @@ require('../../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayC
 require('../../../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 require('../../../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../ReceiveExternalWalletFunds.cjs');
 require('../../../../../../../index.cjs');
 var useTokenBalances = require('../../../../../../utils/hooks/useTokenBalances/useTokenBalances.cjs');
@@ -95,8 +96,11 @@ var useInternalDynamicContext = require('../../../../../../context/DynamicContex
 const useTokensForFunding = ({ wallet, }) => {
     var _a, _b, _c, _d, _e;
     const { network } = useInternalDynamicContext.useInternalDynamicContext();
-    const { tokenBalances } = useTokenBalances.useTokenBalances({
+    const { tokenBalances, isLoading: tokenBalancesLoading } = useTokenBalances.useTokenBalances({
         accountAddress: wallet.address,
+        chainName: wallet.connector.connectedChain,
+        includeFiat: true,
+        includeNativeBalance: true,
     });
     const { currency } = useFetchCurrency.useFetchCurrency(wallet.connector, network);
     const { balance } = useFetchBalance.useFetchBalance({
@@ -106,24 +110,35 @@ const useTokensForFunding = ({ wallet, }) => {
     });
     const evmNetworks = (_a = wallet.connector.evmNetworks) !== null && _a !== void 0 ? _a : [];
     const solNetworks = (_b = wallet.connector.solNetworks) !== null && _b !== void 0 ? _b : [];
-    const parsedTokens = tokenBalances
-        // Contrary to what the type says, symbol and name may be undefined
-        .filter(({ symbol, balance }) => symbol && balance)
-        .map(({ symbol, balance, name, logoURI }) => ({
-        balance: parseFloat(balance.toString()),
-        logoURI,
-        name: name !== null && name !== void 0 ? name : symbol,
-        symbol: symbol,
-    }));
+    let parsedTokens = [];
+    if (!tokenBalancesLoading) {
+        parsedTokens = tokenBalances
+            // Contrary to what the type says, symbol and name may be undefined
+            .filter(({ symbol, balance, address }) => symbol && balance && address)
+            .map(({ symbol, balance, name, logoURI, address, decimals }) => ({
+            balance: parseFloat(balance.toString()),
+            logoURI,
+            name: name !== null && name !== void 0 ? name : symbol,
+            symbol: symbol,
+            token: {
+                address,
+                decimals,
+            },
+        }));
+    }
     if ((currency === null || currency === void 0 ? void 0 : currency.symbol) && parseFloat(balance !== null && balance !== void 0 ? balance : '0')) {
-        if (parsedTokens.find((token) => token.symbol === currency.symbol))
+        const nativeToken = parsedTokens.find((token) => token.symbol === currency.symbol);
+        if (nativeToken) {
+            nativeToken.token = 'native';
             return 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 = {
             balance: parseFloat(balance !== null && balance !== void 0 ? balance : '0'),
             logoURI,
             name: (_e = currency.name) !== null && _e !== void 0 ? _e : currency.symbol,
             symbol: currency.symbol,
+            token: 'native',
         };
         return [...parsedTokens, fetchedToken];
     }

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

@@ -82,6 +82,7 @@ import '../../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCa
 import '../../../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import '../../../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../../../../context/OnrampContext/OnrampContext.js';
 import '../../ReceiveExternalWalletFunds.js';
 import '../../../../../../../index.js';
 import { useTokenBalances } from '../../../../../../utils/hooks/useTokenBalances/useTokenBalances.js';
@@ -91,8 +92,11 @@ import { useInternalDynamicContext } from '../../../../../../context/DynamicCont
 const useTokensForFunding = ({ wallet, }) => {
     var _a, _b, _c, _d, _e;
     const { network } = useInternalDynamicContext();
-    const { tokenBalances } = useTokenBalances({
+    const { tokenBalances, isLoading: tokenBalancesLoading } = useTokenBalances({
         accountAddress: wallet.address,
+        chainName: wallet.connector.connectedChain,
+        includeFiat: true,
+        includeNativeBalance: true,
     });
     const { currency } = useFetchCurrency(wallet.connector, network);
     const { balance } = useFetchBalance({
@@ -102,24 +106,35 @@ const useTokensForFunding = ({ wallet, }) => {
     });
     const evmNetworks = (_a = wallet.connector.evmNetworks) !== null && _a !== void 0 ? _a : [];
     const solNetworks = (_b = wallet.connector.solNetworks) !== null && _b !== void 0 ? _b : [];
-    const parsedTokens = tokenBalances
-        // Contrary to what the type says, symbol and name may be undefined
-        .filter(({ symbol, balance }) => symbol && balance)
-        .map(({ symbol, balance, name, logoURI }) => ({
-        balance: parseFloat(balance.toString()),
-        logoURI,
-        name: name !== null && name !== void 0 ? name : symbol,
-        symbol: symbol,
-    }));
+    let parsedTokens = [];
+    if (!tokenBalancesLoading) {
+        parsedTokens = tokenBalances
+            // Contrary to what the type says, symbol and name may be undefined
+            .filter(({ symbol, balance, address }) => symbol && balance && address)
+            .map(({ symbol, balance, name, logoURI, address, decimals }) => ({
+            balance: parseFloat(balance.toString()),
+            logoURI,
+            name: name !== null && name !== void 0 ? name : symbol,
+            symbol: symbol,
+            token: {
+                address,
+                decimals,
+            },
+        }));
+    }
     if ((currency === null || currency === void 0 ? void 0 : currency.symbol) && parseFloat(balance !== null && balance !== void 0 ? balance : '0')) {
-        if (parsedTokens.find((token) => token.symbol === currency.symbol))
+        const nativeToken = parsedTokens.find((token) => token.symbol === currency.symbol);
+        if (nativeToken) {
+            nativeToken.token = 'native';
             return 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 = {
             balance: parseFloat(balance !== null && balance !== void 0 ? balance : '0'),
             logoURI,
             name: (_e = currency.name) !== null && _e !== void 0 ? _e : currency.symbol,
             symbol: currency.symbol,
+            token: 'native',
         };
         return [...parsedTokens, fetchedToken];
     }

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

@@ -110,6 +110,7 @@ require('../../../../views/TransactionConfirmationView/TransactionConfirmationVi
 require('../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 var useEmbeddedReveal = require('../../../../utils/hooks/useEmbeddedReveal/useEmbeddedReveal.cjs');
 var useEmbeddedWalletAuthenticator = require('../../../../utils/hooks/useEmbeddedWalletAuthenticator/useEmbeddedWalletAuthenticator.cjs');
+require('../../../../context/OnrampContext/OnrampContext.cjs');
 require('../ReceiveExternalWalletFunds/ReceiveExternalWalletFunds.cjs');
 require('../../../../../index.cjs');
 require('../../../../store/state/tokenBalances.cjs');

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

@@ -106,6 +106,7 @@ import '../../../../views/TransactionConfirmationView/TransactionConfirmationVie
 import '../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import { useEmbeddedReveal } from '../../../../utils/hooks/useEmbeddedReveal/useEmbeddedReveal.js';
 import { useEmbeddedWalletAuthenticator } from '../../../../utils/hooks/useEmbeddedWalletAuthenticator/useEmbeddedWalletAuthenticator.js';
+import '../../../../context/OnrampContext/OnrampContext.js';
 import '../ReceiveExternalWalletFunds/ReceiveExternalWalletFunds.js';
 import '../../../../../index.js';
 import '../../../../store/state/tokenBalances.js';

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

@@ -78,6 +78,8 @@ require('../../../../components/OverlayCard/OverlayCard.cjs');
 require('../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../context/OnrampContext/OnrampContext.cjs');
+require('qrcode');
 require('../ReceiveExternalWalletFunds/ReceiveExternalWalletFunds.cjs');
 require('../../../../../index.cjs');
 require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
@@ -92,7 +94,6 @@ require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
-require('qrcode');
 
 const WalletsView = () => {
     const { user, multiWallet } = useInternalDynamicContext.useInternalDynamicContext();

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

@@ -74,6 +74,8 @@ import '../../../../components/OverlayCard/OverlayCard.js';
 import '../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../../context/OnrampContext/OnrampContext.js';
+import 'qrcode';
 import '../ReceiveExternalWalletFunds/ReceiveExternalWalletFunds.js';
 import '../../../../../index.js';
 import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
@@ -88,7 +90,6 @@ import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
-import 'qrcode';
 
 const WalletsView = () => {
     const { user, multiWallet } = useInternalDynamicContext();

package/src/lib/widgets/FundingWidget/views/FundWalletView/FundWalletView.cjs

@@ -4,10 +4,10 @@
 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('react');
 require('../../../../events/dynamicEvents.cjs');
 require('../../../../../../_virtual/_tslib.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
@@ -22,7 +22,6 @@ require('../../../../utils/constants/values.cjs');
 require('../../../../store/state/loadingAndLifecycle.cjs');
 var index = require('../../../../shared/utils/hooks/useOnClickOutside/index.cjs');
 require('../../../../shared/consts/index.cjs');
-var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -75,6 +74,8 @@ 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');
@@ -89,28 +90,15 @@ require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
-require('qrcode');
-var FundingContext = require('../../../../context/FundingContext/FundingContext.cjs');
 
-const Modal = ({ onrampUrl }) => {
-    const { fundingRef, setShowFunding } = FundingContext.useFundingContext();
-    const close = () => {
-        setShowFunding(false);
-    };
-    index.useOnClickOutside(fundingRef, close);
-    return (jsxRuntime.jsx("div", { className: 'fund-wallet__modal', "data-testid": 'fund-wallet-modal', children: jsxRuntime.jsx("div", { className: 'fund-wallet__modal-content', ref: fundingRef, children: jsxRuntime.jsx("iframe", { id: 'onramp-iframe', src: onrampUrl, allow: 'camera *;geolocation *', title: 'Crypto Onramp' }) }) }));
-};
 const FundWalletView = () => {
-    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
-    const { showFunding, fundingUrl, fundingEnabled } = FundingContext.useFundingContext();
-    if (!fundingEnabled ||
-        !showFunding ||
-        !fundingUrl ||
-        !(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address)) {
+    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: showFunding, children: [jsxRuntime.jsx("div", { className: 'fund-wallet__backdrop', "aria-hidden": 'true' }), jsxRuntime.jsx("div", { className: 'fund-wallet__modal-container', children: jsxRuntime.jsx(Modal, { onrampUrl: fundingUrl }) })] }) }));
+    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { children: jsxRuntime.jsxs(OpacityTransition.OpacityTransition, { isShown: showOnramp, children: [jsxRuntime.jsx("div", { className: 'fund-wallet__backdrop', "aria-hidden": 'true', "data-testid": 'fund-wallet-backdrop' }), jsxRuntime.jsx("div", { className: 'fund-wallet__modal', "data-testid": 'fund-wallet-modal', ref: setOnrampRef, children: jsxRuntime.jsx("iframe", { id: 'onramp-iframe', src: selectedOnramp.url, allow: 'camera *;geolocation *', title: 'Crypto Onramp' }) })] }) }));
 };
 
 exports.FundWalletView = FundWalletView;
-exports.Modal = Modal;

package/src/lib/widgets/FundingWidget/views/FundWalletView/FundWalletView.d.ts

@@ -1,5 +1,2 @@
 import { FC } from 'react';
-export declare const Modal: ({ onrampUrl }: {
-    onrampUrl: string;
-}) => JSX.Element;
 export declare const FundWalletView: FC;