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

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

@@ -44,6 +44,7 @@ require('../../../../../../utils/functions/compareChains/compareChains.cjs');
 require('../../../../../../context/ThemeContext/ThemeContext.cjs');
 require('../../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 require('@dynamic-labs/types');
+require('../../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../../../context/LoadingContext/LoadingContext.cjs');
 require('../../../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
@@ -61,7 +62,6 @@ require('../../../../../../components/Transition/ZoomTransition/ZoomTransition.c
 require('../../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
-require('../../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
@@ -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

@@ -40,6 +40,7 @@ import '../../../../../../utils/functions/compareChains/compareChains.js';
 import '../../../../../../context/ThemeContext/ThemeContext.js';
 import '../../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
 import '@dynamic-labs/types';
+import '../../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../../../context/LoadingContext/LoadingContext.js';
 import '../../../../../../context/WalletContext/WalletContext.js';
 import '../../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
@@ -57,7 +58,6 @@ import '../../../../../../components/Transition/ZoomTransition/ZoomTransition.js
 import '../../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
-import '../../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
@@ -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

@@ -45,6 +45,7 @@ require('../../../../../utils/functions/compareChains/compareChains.cjs');
 require('../../../../../context/ThemeContext/ThemeContext.cjs');
 require('../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 require('@dynamic-labs/types');
+require('../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../../context/LoadingContext/LoadingContext.cjs');
 require('../../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
@@ -62,7 +63,6 @@ require('../../../../../components/Transition/ZoomTransition/ZoomTransition.cjs'
 require('../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
-require('../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
@@ -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

@@ -41,6 +41,7 @@ import '../../../../../utils/functions/compareChains/compareChains.js';
 import '../../../../../context/ThemeContext/ThemeContext.js';
 import '../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
 import '@dynamic-labs/types';
+import '../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../../context/LoadingContext/LoadingContext.js';
 import '../../../../../context/WalletContext/WalletContext.js';
 import '../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
@@ -58,7 +59,6 @@ import '../../../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
-import '../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
@@ -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

@@ -39,6 +39,7 @@ require('../../../../../../utils/functions/compareChains/compareChains.cjs');
 require('../../../../../../context/ThemeContext/ThemeContext.cjs');
 require('../../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 require('@dynamic-labs/types');
+require('../../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../../../context/LoadingContext/LoadingContext.cjs');
 require('../../../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
@@ -74,7 +75,6 @@ require('../../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs')
 require('../../../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
-require('../../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../../../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.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

@@ -35,6 +35,7 @@ import '../../../../../../utils/functions/compareChains/compareChains.js';
 import '../../../../../../context/ThemeContext/ThemeContext.js';
 import '../../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
 import '@dynamic-labs/types';
+import '../../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../../../context/LoadingContext/LoadingContext.js';
 import '../../../../../../context/WalletContext/WalletContext.js';
 import '../../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
@@ -70,7 +71,6 @@ import '../../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
 import '../../../../../../context/FooterAnimationContext/index.js';
 import '../../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../../../../context/IpConfigurationContext/IpConfigurationContext.js';
-import '../../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../../../../context/ConnectWithOtpContext/constants.js';
 import '../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.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

@@ -60,6 +60,7 @@ var useSmartWallets = require('../../../../utils/hooks/useSmartWallets/useSmartW
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 var usePasskeyRecovery = require('../../../../utils/hooks/usePasskeyRecovery/usePasskeyRecovery.cjs');
 require('@dynamic-labs/types');
+require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../context/LoadingContext/LoadingContext.cjs');
 var useEmbeddedWallet = require('../../../../utils/hooks/useEmbeddedWallet/useEmbeddedWallet.cjs');
 require('../../../../context/WalletContext/WalletContext.cjs');
@@ -95,7 +96,6 @@ require('../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
-require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.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

@@ -56,6 +56,7 @@ import { useSmartWallets } from '../../../../utils/hooks/useSmartWallets/useSmar
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
 import { usePasskeyRecovery } from '../../../../utils/hooks/usePasskeyRecovery/usePasskeyRecovery.js';
 import '@dynamic-labs/types';
+import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../context/LoadingContext/LoadingContext.js';
 import { useEmbeddedWallet } from '../../../../utils/hooks/useEmbeddedWallet/useEmbeddedWallet.js';
 import '../../../../context/WalletContext/WalletContext.js';
@@ -91,7 +92,6 @@ import '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
-import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../../context/ConnectWithOtpContext/constants.js';
 import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.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

@@ -43,6 +43,7 @@ require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 var useKYCFlag = require('../../../../utils/hooks/useKYCFlag/useKYCFlag.cjs');
 require('@dynamic-labs/types');
+require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../context/LoadingContext/LoadingContext.cjs');
 require('../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
@@ -61,7 +62,6 @@ require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
-require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
@@ -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

@@ -39,6 +39,7 @@ import '../../../../context/ThemeContext/ThemeContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
 import { useKYCFlag } from '../../../../utils/hooks/useKYCFlag/useKYCFlag.js';
 import '@dynamic-labs/types';
+import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../context/LoadingContext/LoadingContext.js';
 import '../../../../context/WalletContext/WalletContext.js';
 import '../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
@@ -57,7 +58,6 @@ import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
-import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
@@ -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();