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

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

@@ -73,6 +73,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 '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.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 EditProfileView = ({ rootClassName, }) => {
     const { setView } = useViewContext();

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

@@ -80,6 +80,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');
 var blockaid = require('../../../../data/api/transactions/blockaid.cjs');
 var GlobalWalletScanner = require('./scanner/GlobalWalletScanner.cjs');
 require('../ReceiveExternalWalletFunds/ReceiveExternalWalletFunds.cjs');
@@ -96,7 +98,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 GlobalWalletView = () => {
     var _a;

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

@@ -76,6 +76,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 { isMaliciousUrl } from '../../../../data/api/transactions/blockaid.js';
 import { GlobalWalletScanner } from './scanner/GlobalWalletScanner.js';
 import '../ReceiveExternalWalletFunds/ReceiveExternalWalletFunds.js';
@@ -92,7 +94,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 GlobalWalletView = () => {
     var _a;

package/src/lib/widgets/DynamicWidget/views/GlobalWalletView/index.d.ts

@@ -0,0 +1,2 @@
+export * from './GlobalWalletTypes';
+export * from './GlobalWalletView';

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

@@ -81,6 +81,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');
 var MfaDeviceTileSkeleton = require('../../../../components/MfaDeviceTileSkeleton/MfaDeviceTileSkeleton.cjs');
 var UserDeviceTile = require('./components/UserDeviceTile.cjs');
 var sort = require('./components/utils/sort.cjs');
@@ -100,7 +102,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 ManageMfaWidgetView = () => {
     var _a;

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

@@ -77,6 +77,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 { MfaDeviceTileSkeleton } from '../../../../components/MfaDeviceTileSkeleton/MfaDeviceTileSkeleton.js';
 import { UserDeviceTile } from './components/UserDeviceTile.js';
 import { sortDevices } from './components/utils/sort.js';
@@ -96,7 +98,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 ManageMfaWidgetView = () => {
     var _a;

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

@@ -81,6 +81,8 @@ require('../../../../components/OverlayCard/OverlayCard.cjs');
 require('../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 var PasskeyContext = require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 var PasskeyCard = require('./PasskeyCard/PasskeyCard.cjs');
+require('../../../../context/OnrampContext/OnrampContext.cjs');
+require('qrcode');
 require('../ReceiveExternalWalletFunds/ReceiveExternalWalletFunds.cjs');
 require('../../../../../index.cjs');
 require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
@@ -95,7 +97,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 ManagePasskeysWidgetView = () => {
     var _a;

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

@@ -77,6 +77,8 @@ import '../../../../components/OverlayCard/OverlayCard.js';
 import '../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import { usePasskeyContext } from '../../../../context/PasskeyContext/PasskeyContext.js';
 import { PasskeyCard } from './PasskeyCard/PasskeyCard.js';
+import '../../../../context/OnrampContext/OnrampContext.js';
+import 'qrcode';
 import '../ReceiveExternalWalletFunds/ReceiveExternalWalletFunds.js';
 import '../../../../../index.js';
 import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
@@ -91,7 +93,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 ManagePasskeysWidgetView = () => {
     var _a;

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

@@ -79,6 +79,8 @@ require('../../../../../components/OverlayCard/OverlayCard.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 var PasskeyContext = require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../../../context/OnrampContext/OnrampContext.cjs');
+require('qrcode');
 require('../../ReceiveExternalWalletFunds/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');
 
 const mapPasskeyProviderToIcon = {
     android: jsxRuntime.jsx(iconic.AndroidIcon, {}),

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

@@ -75,6 +75,8 @@ import '../../../../../components/OverlayCard/OverlayCard.js';
 import '../../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import { usePasskeyContext } from '../../../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../../../context/OnrampContext/OnrampContext.js';
+import 'qrcode';
 import '../../ReceiveExternalWalletFunds/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';
 
 const mapPasskeyProviderToIcon = {
     android: jsx(AndroidIcon, {}),

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

@@ -86,6 +86,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('../../../../../index.cjs');
 require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
@@ -99,7 +101,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 exchangeRates = require('../../../../data/api/exchangeRates/exchangeRates.cjs');
 var FormattedInput = require('./FormattedInput/FormattedInput.cjs');
 var formattedInputEmitter = require('./FormattedInput/formattedInputEmitter.cjs');
@@ -110,6 +111,7 @@ var formatValue = require('./utils/formatValue/formatValue.cjs');
 var isFiatToken = require('./utils/isFiatToken/isFiatToken.cjs');
 var isNonZero = require('./utils/isNonZero/isNonZero.cjs');
 var respectsMinimum = require('./utils/respectsMinimum/respectsMinimum.cjs');
+var useSubmitExternalWalletFunding = require('./utils/useSubmitExternalWalletFunding/useSubmitExternalWalletFunding.cjs');
 var useTokensForFunding = require('./utils/useTokensForFunding/useTokensForFunding.cjs');
 
 const defaultQuickSuggestions = {
@@ -139,7 +141,7 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
     const { t } = reactI18next.useTranslation();
     const [hasUserInteracted, setHasUserInteracted] = React.useState(false);
     const [conversionErrorIconRef, setConversionErrorIconRef] = React.useState(null);
-    const { goToInitialDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const tokenBalances = useTokensForFunding.useTokensForFunding({ wallet: externalWallet });
     const { data: exchangeRates$1 } = usePromise.usePromise(exchangeRates.getExchangeRates, {
         initialData: {},
@@ -245,23 +247,16 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
             setAmountsByTokenValue(value.toString());
         inputEmitter.emit('focus');
     };
+    const handleSubmit = useSubmitExternalWalletFunding.useSubmitExternalWalletFunding();
     const inputSymbolProp = primaryData.symbol === 'USD'
         ? { leading: '$' }
         : { trailing: primaryData.symbol };
-    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: goToInitialDynamicWidgetView, children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
-    const walletCardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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_receive_external_wallet_funds.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', {
-                    '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_receive_external_wallet_funds.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, {}) }))] })] }));
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => setDynamicWidgetView('choose-wallet-funding-method'), children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
     return (jsxRuntime.jsxs("div", { className: 'fund-from-wallet', children: [!disableTokenSelect && (jsxRuntime.jsx(TokenSelectScreen.TokenSelectScreen, { onClose: () => setShowTokenSelect(false), onSelectToken: handleSelectToken, tokens: tokenBalances !== null && tokenBalances !== void 0 ? tokenBalances : [], currentToken: tokenSymbol, className: classNames.classNames('fund-from-wallet__token-select', {
                     'fund-from-wallet__token-select--open': showTokenSelect,
-                }) })), jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: t('dyn_receive_external_wallet_funds.funding_view.title') }) }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content', children: [jsxRuntime.jsx("div", { className: classNames.classNames('fund-from-wallet__content__wallet-card', 'fund-from-wallet__content__wallet-card--invisible'), children: walletCardContent }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__amount-container', children: [minimum && (jsxRuntime.jsx(Typography.Typography, { color: 'error-1', className: classNames.classNames('fund-from-wallet__content__amount-container__minimum-error', {
+                }) })), jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: t('dyn_wallet_funding.from_external_wallet.funding_view.title') }) }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content', children: [jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__amount-container', children: [minimum && (jsxRuntime.jsx(Typography.Typography, { color: 'error-1', className: classNames.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.formatValue({
                                         symbol: minimum.token,
                                         value: minimum.value,
@@ -281,11 +276,21 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
                                         }), children: secondaryDisplay }), jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', className: 'fund-from-wallet__content__amount-container__secondary-amount-container__switch', children: jsxRuntime.jsx(switchToggle.ReactComponent, { "data-testid": 'switch-primary-and-secondary', onClick: switchPrimaryAndSecondary }) })] })), !showQuickSuggestions && !secondaryDisplay && (jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-missing', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', children: formatValue.formatValue({
                                             symbol: secondaryData.symbol,
                                             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_receive_external_wallet_funds.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', {
+                                        }) }), 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_receive_external_wallet_funds.funding_view.balance_error') })] }), jsxRuntime.jsx("div", { className: 'fund-from-wallet__content__wallet-card', children: walletCardContent })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: !isMinimumRespected ||
-                    showNotEnoughBalance ||
-                    !isNonZero.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') })] }), 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', {
+                                    '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({
+                    externalWallet,
+                    tokenAmount,
+                    tokenBalances,
+                    tokenSymbol,
+                }), children: t('dyn_wallet_funding.from_external_wallet.funding_view.confirm_button') })] }));
 };
 
 exports.ReceiveExternalWalletFunds = ReceiveExternalWalletFunds;

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

@@ -1,5 +1,5 @@
 'use client'
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
@@ -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,23 +243,16 @@ 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', {
-                    '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({
-                                    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, {}) }))] })] }));
+    const backButton = (jsx(IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => setDynamicWidgetView('choose-wallet-funding-method'), children: jsx(SvgArrowLeft, {}) }));
     return (jsxs("div", { className: '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: [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 +272,21 @@ 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') })] }), 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', {
+                                    '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({
+                    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>;