@dynamic-labs/sdk-react-core 4.20.6 → 4.20.8

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

@@ -7,13 +7,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
 var walletBook = require('@dynamic-labs/wallet-book');
+var iconic = require('@dynamic-labs/iconic');
 var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
 require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 var arrowLeft = require('../../../../shared/assets/arrow-left.cjs');
 var chevronDown = require('../../../../shared/assets/chevron-down.cjs');
 var footerInfoIcon = require('../../../../shared/assets/footer-info-icon.cjs');
 var switchToggle = require('../../../../shared/assets/switch-toggle.cjs');
-require('@dynamic-labs/iconic');
 require('../../../../context/ViewContext/ViewContext.cjs');
 require('../../../../../../_virtual/_tslib.cjs');
 require('@dynamic-labs/sdk-api-core');
@@ -29,6 +29,7 @@ require('../../../../events/dynamicEvents.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
 require('../../../../store/state/authMode/authMode.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -48,7 +49,7 @@ require('../../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../../../utils/functions/compareChains/compareChains.cjs');
 require('../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
-require('../../../../context/ThemeContext/ThemeContext.cjs');
+var useIconThemeVariant = require('../../../../utils/hooks/useIconThemeVariant/useIconThemeVariant.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 require('bs58');
 require('@dynamic-labs/types');
@@ -75,6 +76,7 @@ var Tooltip = require('../../../../components/Tooltip/Tooltip.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
 var Icon = require('../../../../components/Icon/Icon.cjs');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
@@ -99,10 +101,11 @@ require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWall
 require('@hcaptcha/react-hcaptcha');
 require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
-require('../../helpers/convertExchangeKeyAndProviderEnum.cjs');
+var convertExchangeKeyAndProviderEnum = require('../../helpers/convertExchangeKeyAndProviderEnum.cjs');
 require('../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../../../../store/state/tokenBalances.cjs');
 require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+var useSubmitExchangeFunding = require('../../../../utils/hooks/useSubmitExchangeFunding/useSubmitExchangeFunding.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
@@ -120,6 +123,7 @@ var useExchangeRatesForFunding = require('./utils/useExchangeRatesForFunding/use
 var useSubmitWalletFunding = require('./utils/useSubmitWalletFunding/useSubmitWalletFunding.cjs');
 var useTokensForFunding = require('./utils/useTokensForFunding/useTokensForFunding.cjs');
 var calculateFiatBalance = require('./utils/calculateFiatBalance/calculateFiatBalance.cjs');
+var useExchangeTokensForFunding = require('./utils/useExchangeTokensForFunding/useExchangeTokensForFunding.cjs');
 
 const defaultQuickSuggestions = {
     token: 'USD',
@@ -128,7 +132,7 @@ const defaultQuickSuggestions = {
 const rulesThatHideQuickSuggestions = ['exact', 'minimum'];
 const rulesThatDisableTokenSelect = ['exact', 'exact-with-amount'];
 const inputEmitter = formattedInputEmitter.createFormattedInputEmitter();
-const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wallet, quickSuggestions = defaultQuickSuggestions, }) => {
+const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wallet, exchange, fundingWithExchange = false, accounts, quickSuggestions = defaultQuickSuggestions, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     // For now we hardcode the default value, soon we will fetch this from project settings
     const initialToken = initialTokenRaw !== null && initialTokenRaw !== void 0 ? initialTokenRaw : {
@@ -148,10 +152,31 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
     const { t } = reactI18next.useTranslation();
     const [hasUserInteracted, setHasUserInteracted] = React.useState(false);
     const [conversionErrorIconRef, setConversionErrorIconRef] = React.useState(null);
+    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const iconThemeVariant = useIconThemeVariant.useIconThemeVariant();
+    const provider = exchange
+        ? convertExchangeKeyAndProviderEnum.convertExchangeKeytoProviderEnum(exchange)
+        : undefined;
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
-    const { isLoading: tokenBalancesLoading, tokens: tokenBalances } = useTokensForFunding.useTokensForFunding({
-        wallet: wallet,
-    });
+    let tokenBalancesLoading = false;
+    let tokenBalances = [];
+    if (wallet) {
+        const { isLoading: tokenBalancesLoadingWallet, tokens: tokenBalancesWallet, } = 
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useTokensForFunding.useTokensForFunding({
+            wallet: wallet,
+        });
+        tokenBalancesLoading = tokenBalancesLoadingWallet;
+        tokenBalances = tokenBalancesWallet;
+    }
+    else {
+        tokenBalancesLoading = false;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { tokens: tokenBalancesExchange } = useExchangeTokensForFunding.useExchangeTokensForFunding({
+            accounts: accounts !== null && accounts !== void 0 ? accounts : [],
+        });
+        tokenBalances = tokenBalancesExchange;
+    }
     const exchangeRates = useExchangeRatesForFunding.useExchangeRatesForFunding({
         // Initialize amounts after exchange rates are fetched
         onFetch: (exchangeRates) => {
@@ -267,6 +292,13 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
         tokenAmount !== undefined &&
         (!currentToken || currentToken.balance < parseFloat(tokenAmount)));
     const showMinimumRequired = Boolean(!isMinimumRespected && !showNotEnoughBalance);
+    let addressToDisplay = '';
+    if (wallet) {
+        addressToDisplay = shortenWalletAddress.shortenWalletAddress(wallet.address);
+    }
+    else if (exchange) {
+        addressToDisplay = exchange.charAt(0).toUpperCase() + exchange.slice(1);
+    }
     const showQuickSuggestions = quickSuggestionsParsed.length > 0 &&
         !hasUserInteracted &&
         !rulesThatHideQuickSuggestions.includes(initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) &&
@@ -291,6 +323,7 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
         setAmountsByTokenValue,
     ]);
     const handleSubmit = useSubmitWalletFunding.useSubmitWalletFunding();
+    const handleExchangeSubmit = useSubmitExchangeFunding.useSubmitExchangeFunding();
     const disableSubmit = !isMinimumRespected || showNotEnoughBalance || !isNonZero.isNonZero(tokenAmount);
     const closeTokenSelect = React.useCallback(() => {
         setShowTokenSelect(false);
@@ -305,7 +338,9 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
     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: closeTokenSelect, 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,
-                }), showTokenAsPrimary: showTokenAsPrimary, exchangeRates: exchangeRates })), jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: t('dyn_wallet_funding.from_wallet.amount_input.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', {
+                }), showTokenAsPrimary: showTokenAsPrimary, exchangeRates: exchangeRates })), jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: fundingWithExchange
+                        ? t('dyn_fund_from_exchange.title')
+                        : t('dyn_wallet_funding.from_wallet.amount_input.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', weight: 'medium', children: t('dyn_wallet_funding.from_wallet.amount_input.minimum_error', {
                                     minimum: formatValue.formatValue({
@@ -330,7 +365,7 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
                                             value: consts.UNAVAILABLE_VALUE,
                                         }) }), jsxRuntime.jsx("div", { ref: setConversionErrorIconRef, children: jsxRuntime.jsx(Icon.Icon, { size: 'medium', color: 'text-tertiary', children: jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) }) }), jsxRuntime.jsx(Tooltip.Tooltip, { content: t('dyn_wallet_funding.from_wallet.amount_input.pricing_unavailable'), 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', weight: 'medium', children: t('dyn_wallet_funding.from_wallet.amount_input.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: wallet.connector.metadata.icon, walletKey: wallet.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', weight: 'medium', children: t('dyn_wallet_funding.from_wallet.amount_input.wallet_detail_from') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', weight: 'medium', children: shortenWalletAddress.shortenWalletAddress(wallet.address) })] })] }), tokenBalancesLoading && (jsxRuntime.jsx(Skeleton.Skeleton, { dataTestId: 'balance-skeleton', container: {
+                                }), variant: 'body_normal', weight: 'medium', children: t('dyn_wallet_funding.from_wallet.amount_input.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: [wallet && (jsxRuntime.jsx(walletBook.WalletIcon, { icon: wallet.connector.metadata.icon, walletKey: wallet.connector.key, className: 'fund-from-wallet__content__wallet-card__wallet-details__icon' })), provider && (jsxRuntime.jsx(iconic.SocialIcon, { name: provider, variant: iconThemeVariant, 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', weight: 'medium', children: t('dyn_wallet_funding.from_wallet.amount_input.wallet_detail_from') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', weight: 'medium', children: addressToDisplay })] })] }), tokenBalancesLoading && (jsxRuntime.jsx(Skeleton.Skeleton, { dataTestId: 'balance-skeleton', container: {
                                     className: 'fund-from-wallet__content__wallet-card__balance-skeleton',
                                 } })), !tokenBalancesLoading && (jsxRuntime.jsxs("div", { className: classNames.classNames('fund-from-wallet__content__wallet-card__balance', {
                                     'fund-from-wallet__content__wallet-card__balance--disable-select': disableTokenSelect,
@@ -348,12 +383,47 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
                                                     symbol: secondaryBalance.symbol,
                                                     value: (_j = secondaryBalance.value) !== null && _j !== void 0 ? _j : consts.UNAVAILABLE_VALUE,
                                                     withFixedZeros: isFiatToken.isFiatOrStablecoin(secondaryBalance.symbol),
-                                                }) })] }), !disableTokenSelect && (jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'small', className: 'fund-from-wallet__content__wallet-card__balance__icon', children: jsxRuntime.jsx(chevronDown.ReactComponent, { "data-testid": 'token-select-dropdown' }) }))] }))] })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'confirm-button', buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: disableSubmit, onClick: () => handleSubmit({
-                    tokenAmount,
-                    tokenBalances,
-                    tokenSymbol,
-                    wallet,
-                }), children: t('dyn_wallet_funding.from_wallet.amount_input.confirm_button') })] }));
+                                                }) })] }), !disableTokenSelect && (jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'small', className: 'fund-from-wallet__content__wallet-card__balance__icon', children: jsxRuntime.jsx(chevronDown.ReactComponent, { "data-testid": 'token-select-dropdown' }) }))] }))] })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'confirm-button', buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: disableSubmit, onClick: () => {
+                    if (fundingWithExchange && exchange) {
+                        const baseConfirmProps = {
+                            amount: tokenAmount ? parseFloat(tokenAmount) : undefined,
+                            exchange,
+                            fiatAmount: fiatAmount ? parseFloat(fiatAmount) : undefined,
+                            fiatCurrencySymbol: fiatSymbol,
+                            onBack: () => setDynamicWidgetView('receive-wallet-funds', {
+                                accounts,
+                                amount: initialAmount,
+                                exchange,
+                                fundingWithExchange,
+                                quickSuggestions,
+                                token: { rule: 'recommended', value: tokenSymbol },
+                                wallet,
+                            }),
+                            toAddress: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
+                            token: currentToken,
+                        };
+                        const handleConfirmSubmit = () => {
+                            var _a;
+                            return handleExchangeSubmit({
+                                exchange,
+                                props: Object.assign(Object.assign({}, baseConfirmProps), { onSubmit: handleConfirmSubmit }),
+                                toAddress: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) !== null && _a !== void 0 ? _a : '',
+                                tokenAmount,
+                                tokenSymbol,
+                            });
+                        };
+                        const confirmProps = Object.assign(Object.assign({}, baseConfirmProps), { onSubmit: handleConfirmSubmit });
+                        setDynamicWidgetView('confirm-exchange-transfer', confirmProps);
+                    }
+                    else if (wallet) {
+                        handleSubmit({
+                            tokenAmount,
+                            tokenBalances,
+                            tokenSymbol,
+                            wallet,
+                        });
+                    }
+                }, children: t('dyn_wallet_funding.from_wallet.amount_input.confirm_button') })] }));
 };
 
 exports.ReceiveWalletFunds = ReceiveWalletFunds;

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

@@ -3,13 +3,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { SocialIcon } from '@dynamic-labs/iconic';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import { ReactComponent as SvgArrowLeft } from '../../../../shared/assets/arrow-left.js';
 import { ReactComponent as SvgChevronDown } from '../../../../shared/assets/chevron-down.js';
 import { ReactComponent as SvgFooterInfoIcon } from '../../../../shared/assets/footer-info-icon.js';
 import { ReactComponent as SvgSwitchToggle } from '../../../../shared/assets/switch-toggle.js';
-import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
 import '../../../../../../_virtual/_tslib.js';
 import '@dynamic-labs/sdk-api-core';
@@ -25,6 +25,7 @@ import '../../../../events/dynamicEvents.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
 import '../../../../store/state/authMode/authMode.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -44,7 +45,7 @@ import '../../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../../../utils/functions/compareChains/compareChains.js';
 import '../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
-import '../../../../context/ThemeContext/ThemeContext.js';
+import { useIconThemeVariant } from '../../../../utils/hooks/useIconThemeVariant/useIconThemeVariant.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
 import 'bs58';
 import '@dynamic-labs/types';
@@ -71,6 +72,7 @@ import { Tooltip } from '../../../../components/Tooltip/Tooltip.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
+import '../../../../context/ThemeContext/ThemeContext.js';
 import { Icon } from '../../../../components/Icon/Icon.js';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
@@ -95,10 +97,11 @@ import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWalle
 import '@hcaptcha/react-hcaptcha';
 import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
-import '../../helpers/convertExchangeKeyAndProviderEnum.js';
+import { convertExchangeKeytoProviderEnum } from '../../helpers/convertExchangeKeyAndProviderEnum.js';
 import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../../../../store/state/tokenBalances.js';
 import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import { useSubmitExchangeFunding } from '../../../../utils/hooks/useSubmitExchangeFunding/useSubmitExchangeFunding.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../components/Popper/Popper/Popper.js';
@@ -116,6 +119,7 @@ import { useExchangeRatesForFunding } from './utils/useExchangeRatesForFunding/u
 import { useSubmitWalletFunding } from './utils/useSubmitWalletFunding/useSubmitWalletFunding.js';
 import { useTokensForFunding } from './utils/useTokensForFunding/useTokensForFunding.js';
 import { calculateFiatBalance } from './utils/calculateFiatBalance/calculateFiatBalance.js';
+import { useExchangeTokensForFunding } from './utils/useExchangeTokensForFunding/useExchangeTokensForFunding.js';
 
 const defaultQuickSuggestions = {
     token: 'USD',
@@ -124,7 +128,7 @@ const defaultQuickSuggestions = {
 const rulesThatHideQuickSuggestions = ['exact', 'minimum'];
 const rulesThatDisableTokenSelect = ['exact', 'exact-with-amount'];
 const inputEmitter = createFormattedInputEmitter();
-const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wallet, quickSuggestions = defaultQuickSuggestions, }) => {
+const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wallet, exchange, fundingWithExchange = false, accounts, quickSuggestions = defaultQuickSuggestions, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     // For now we hardcode the default value, soon we will fetch this from project settings
     const initialToken = initialTokenRaw !== null && initialTokenRaw !== void 0 ? initialTokenRaw : {
@@ -144,10 +148,31 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
     const { t } = useTranslation();
     const [hasUserInteracted, setHasUserInteracted] = useState(false);
     const [conversionErrorIconRef, setConversionErrorIconRef] = useState(null);
+    const { primaryWallet } = useInternalDynamicContext();
+    const iconThemeVariant = useIconThemeVariant();
+    const provider = exchange
+        ? convertExchangeKeytoProviderEnum(exchange)
+        : undefined;
     const { setDynamicWidgetView } = useWidgetContext();
-    const { isLoading: tokenBalancesLoading, tokens: tokenBalances } = useTokensForFunding({
-        wallet: wallet,
-    });
+    let tokenBalancesLoading = false;
+    let tokenBalances = [];
+    if (wallet) {
+        const { isLoading: tokenBalancesLoadingWallet, tokens: tokenBalancesWallet, } = 
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useTokensForFunding({
+            wallet: wallet,
+        });
+        tokenBalancesLoading = tokenBalancesLoadingWallet;
+        tokenBalances = tokenBalancesWallet;
+    }
+    else {
+        tokenBalancesLoading = false;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { tokens: tokenBalancesExchange } = useExchangeTokensForFunding({
+            accounts: accounts !== null && accounts !== void 0 ? accounts : [],
+        });
+        tokenBalances = tokenBalancesExchange;
+    }
     const exchangeRates = useExchangeRatesForFunding({
         // Initialize amounts after exchange rates are fetched
         onFetch: (exchangeRates) => {
@@ -263,6 +288,13 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
         tokenAmount !== undefined &&
         (!currentToken || currentToken.balance < parseFloat(tokenAmount)));
     const showMinimumRequired = Boolean(!isMinimumRespected && !showNotEnoughBalance);
+    let addressToDisplay = '';
+    if (wallet) {
+        addressToDisplay = shortenWalletAddress(wallet.address);
+    }
+    else if (exchange) {
+        addressToDisplay = exchange.charAt(0).toUpperCase() + exchange.slice(1);
+    }
     const showQuickSuggestions = quickSuggestionsParsed.length > 0 &&
         !hasUserInteracted &&
         !rulesThatHideQuickSuggestions.includes(initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) &&
@@ -287,6 +319,7 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
         setAmountsByTokenValue,
     ]);
     const handleSubmit = useSubmitWalletFunding();
+    const handleExchangeSubmit = useSubmitExchangeFunding();
     const disableSubmit = !isMinimumRespected || showNotEnoughBalance || !isNonZero(tokenAmount);
     const closeTokenSelect = useCallback(() => {
         setShowTokenSelect(false);
@@ -301,7 +334,9 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
     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: closeTokenSelect, 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,
-                }), showTokenAsPrimary: showTokenAsPrimary, exchangeRates: exchangeRates })), jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', children: t('dyn_wallet_funding.from_wallet.amount_input.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', {
+                }), showTokenAsPrimary: showTokenAsPrimary, exchangeRates: exchangeRates })), jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', children: fundingWithExchange
+                        ? t('dyn_fund_from_exchange.title')
+                        : t('dyn_wallet_funding.from_wallet.amount_input.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', weight: 'medium', children: t('dyn_wallet_funding.from_wallet.amount_input.minimum_error', {
                                     minimum: formatValue({
@@ -326,7 +361,7 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
                                             value: UNAVAILABLE_VALUE,
                                         }) }), jsx("div", { ref: setConversionErrorIconRef, children: jsx(Icon, { size: 'medium', color: 'text-tertiary', children: jsx(SvgFooterInfoIcon, {}) }) }), jsx(Tooltip, { content: t('dyn_wallet_funding.from_wallet.amount_input.pricing_unavailable'), 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', weight: 'medium', children: t('dyn_wallet_funding.from_wallet.amount_input.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: wallet.connector.metadata.icon, walletKey: wallet.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', weight: 'medium', children: t('dyn_wallet_funding.from_wallet.amount_input.wallet_detail_from') }), jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'medium', children: shortenWalletAddress(wallet.address) })] })] }), tokenBalancesLoading && (jsx(Skeleton, { dataTestId: 'balance-skeleton', container: {
+                                }), variant: 'body_normal', weight: 'medium', children: t('dyn_wallet_funding.from_wallet.amount_input.balance_error') })] }), jsxs("div", { className: 'fund-from-wallet__content__wallet-card', children: [jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details', children: [wallet && (jsx(WalletIcon, { icon: wallet.connector.metadata.icon, walletKey: wallet.connector.key, className: 'fund-from-wallet__content__wallet-card__wallet-details__icon' })), provider && (jsx(SocialIcon, { name: provider, variant: iconThemeVariant, 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', weight: 'medium', children: t('dyn_wallet_funding.from_wallet.amount_input.wallet_detail_from') }), jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'medium', children: addressToDisplay })] })] }), tokenBalancesLoading && (jsx(Skeleton, { dataTestId: 'balance-skeleton', container: {
                                     className: 'fund-from-wallet__content__wallet-card__balance-skeleton',
                                 } })), !tokenBalancesLoading && (jsxs("div", { className: classNames('fund-from-wallet__content__wallet-card__balance', {
                                     'fund-from-wallet__content__wallet-card__balance--disable-select': disableTokenSelect,
@@ -344,12 +379,47 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
                                                     symbol: secondaryBalance.symbol,
                                                     value: (_j = secondaryBalance.value) !== null && _j !== void 0 ? _j : UNAVAILABLE_VALUE,
                                                     withFixedZeros: isFiatOrStablecoin(secondaryBalance.symbol),
-                                                }) })] }), !disableTokenSelect && (jsx(Icon, { color: 'text-tertiary', size: 'small', className: 'fund-from-wallet__content__wallet-card__balance__icon', children: jsx(SvgChevronDown, { "data-testid": 'token-select-dropdown' }) }))] }))] })] }), jsx(TypographyButton, { dataTestId: 'confirm-button', buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: disableSubmit, onClick: () => handleSubmit({
-                    tokenAmount,
-                    tokenBalances,
-                    tokenSymbol,
-                    wallet,
-                }), children: t('dyn_wallet_funding.from_wallet.amount_input.confirm_button') })] }));
+                                                }) })] }), !disableTokenSelect && (jsx(Icon, { color: 'text-tertiary', size: 'small', className: 'fund-from-wallet__content__wallet-card__balance__icon', children: jsx(SvgChevronDown, { "data-testid": 'token-select-dropdown' }) }))] }))] })] }), jsx(TypographyButton, { dataTestId: 'confirm-button', buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: disableSubmit, onClick: () => {
+                    if (fundingWithExchange && exchange) {
+                        const baseConfirmProps = {
+                            amount: tokenAmount ? parseFloat(tokenAmount) : undefined,
+                            exchange,
+                            fiatAmount: fiatAmount ? parseFloat(fiatAmount) : undefined,
+                            fiatCurrencySymbol: fiatSymbol,
+                            onBack: () => setDynamicWidgetView('receive-wallet-funds', {
+                                accounts,
+                                amount: initialAmount,
+                                exchange,
+                                fundingWithExchange,
+                                quickSuggestions,
+                                token: { rule: 'recommended', value: tokenSymbol },
+                                wallet,
+                            }),
+                            toAddress: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
+                            token: currentToken,
+                        };
+                        const handleConfirmSubmit = () => {
+                            var _a;
+                            return handleExchangeSubmit({
+                                exchange,
+                                props: Object.assign(Object.assign({}, baseConfirmProps), { onSubmit: handleConfirmSubmit }),
+                                toAddress: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) !== null && _a !== void 0 ? _a : '',
+                                tokenAmount,
+                                tokenSymbol,
+                            });
+                        };
+                        const confirmProps = Object.assign(Object.assign({}, baseConfirmProps), { onSubmit: handleConfirmSubmit });
+                        setDynamicWidgetView('confirm-exchange-transfer', confirmProps);
+                    }
+                    else if (wallet) {
+                        handleSubmit({
+                            tokenAmount,
+                            tokenBalances,
+                            tokenSymbol,
+                            wallet,
+                        });
+                    }
+                }, children: t('dyn_wallet_funding.from_wallet.amount_input.confirm_button') })] }));
 };
 
 export { ReceiveWalletFunds };

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

@@ -1,3 +1,4 @@
+import { Account, ExchangeKeyEnum } from '@dynamic-labs/sdk-api-core';
 import { Wallet } from '../../../../shared/types/wallets';
 export type FundingTokenData = {
     name: string;
@@ -31,7 +32,7 @@ export type FundingAmountRule = 'exact' | 'minimum' | 'recommended';
 export type FundingTokenRule = 'exact' | 'recommended' | 'exact-with-amount';
 export type FiatToken = 'USD';
 export type ReceiveWalletFundsProps = {
-    wallet: Wallet;
+    wallet?: Wallet;
     /**
      * Configure the amount input.
      *
@@ -74,6 +75,18 @@ export type ReceiveWalletFundsProps = {
          */
         rule: FundingTokenRule;
     };
+    /**
+     * The exchange that is connected for funding if applicable
+     */
+    exchange?: ExchangeKeyEnum;
+    /**
+     * True if funding with an exchange and false if funding with wallet
+     */
+    fundingWithExchange?: boolean;
+    /**
+     * Accounts associated with exchange
+     */
+    accounts?: Account[];
     /**
      * Quick suggestions for the amount input.
      *

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useExchangeTokensForFunding/useExchangeTokensForFunding.cjs

@@ -0,0 +1,131 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useExchangeRatesForFunding = require('../useExchangeRatesForFunding/useExchangeRatesForFunding.cjs');
+require('../../../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../../../../utils/constants/colors.cjs');
+require('../../../../../../utils/constants/values.cjs');
+require('../../../../../../shared/consts/index.cjs');
+require('../../../../../../events/dynamicEvents.cjs');
+require('../../../../../../../../_virtual/_tslib.cjs');
+require('../../../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+require('../../../../../../store/state/nonce/nonce.cjs');
+require('../../../../../../store/state/projectSettings/projectSettings.cjs');
+require('../../../../../../config/ApiEndpoint.cjs');
+require('../../../../../../store/state/user/user.cjs');
+require('../../../../../../locale/locale.cjs');
+require('../../../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../../../../../store/state/primaryWalletId/primaryWalletId.cjs');
+require('../../../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
+require('../../../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../../../store/state/authMode/authMode.cjs');
+require('../../../../../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../../../../../utils/functions/compareChains/compareChains.cjs');
+require('../../../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
+require('../../../../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
+require('@dynamic-labs/types');
+require('../../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../../../../context/WalletContext/WalletContext.cjs');
+require('../../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('yup');
+require('../../../../../../context/MockContext/MockContext.cjs');
+require('../../../../../../views/CollectUserDataView/useFields.cjs');
+require('../../../../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../../../store/state/walletOptions/walletOptions.cjs');
+require('react-i18next');
+require('../../../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../../../../../components/Alert/Alert.cjs');
+require('../../../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../../../components/IconButton/IconButton.cjs');
+require('../../../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../../../components/Input/Input.cjs');
+require('../../../../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../../../components/OverlayCard/OverlayCard.cjs');
+require('../../../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('qrcode');
+require('formik');
+require('../../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
+require('../../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../../context/DynamicWidgetContext.cjs');
+require('../../../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../../../../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../../helpers/convertExchangeKeyAndProviderEnum.cjs');
+require('../../../../../../store/state/sendBalances.cjs');
+require('../../../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
+require('../../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../../../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../../../context/OnrampContext/OnrampContext.cjs');
+require('../../ReceiveWalletFunds.cjs');
+require('../../../../../../../index.cjs');
+require('../../../../../../store/state/tokenBalances.cjs');
+require('../../../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+var useInternalDynamicContext = require('../../../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
+
+const useExchangeTokensForFunding = ({ accounts, }) => {
+    var _a;
+    const { primaryWallet, network } = useInternalDynamicContext.useInternalDynamicContext();
+    const enabledNetworks = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.getEnabledNetworks();
+    const logoURI = (_a = enabledNetworks === null || enabledNetworks === void 0 ? void 0 : enabledNetworks.find(({ chainId }) => chainId === network)) === null || _a === void 0 ? void 0 : _a.iconUrls[0];
+    const fundingTokens = accounts.flatMap((account) => account.balances.map((balance) => ({
+        balance: balance.balance,
+        fiatBalance: undefined,
+        logoURI: logoURI, // INFORMATION WILL BE ADDED FROM BACKEND
+        name: balance.currency,
+        symbol: balance.currency,
+        token: 'native', // INFORMATION WILL BE ADDED FROM BACKEND
+    })));
+    const exchangeRates = useExchangeRatesForFunding.useExchangeRatesForFunding({
+        onFetch: () => { },
+        tokenBalances: fundingTokens,
+    });
+    const updatedFundingTokens = React.useMemo(() => {
+        if (!exchangeRates)
+            return fundingTokens;
+        return fundingTokens.map((t) => {
+            const price = exchangeRates[t.symbol];
+            return Object.assign(Object.assign({}, t), { fiatBalance: price !== undefined ? t.balance * price : undefined });
+        });
+    }, [fundingTokens, exchangeRates]);
+    return {
+        tokens: updatedFundingTokens,
+    };
+};
+
+exports.useExchangeTokensForFunding = useExchangeTokensForFunding;