@dynamic-labs/sdk-react-core 4.38.0 → 4.39.0

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

@@ -10,9 +10,7 @@ var iconic = require('@dynamic-labs/iconic');
 var walletBook = require('@dynamic-labs/wallet-book');
 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 close = require('../../../../shared/assets/close.cjs');
 var footerInfoIcon = require('../../../../shared/assets/footer-info-icon.cjs');
 var switchToggle = require('../../../../shared/assets/switch-toggle.cjs');
 require('../../../../context/ViewContext/ViewContext.cjs');
@@ -81,7 +79,7 @@ require('../../../../context/ThemeContext/ThemeContext.cjs');
 var Icon = require('../../../../components/Icon/Icon.cjs');
 var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
-var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
 var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
 var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
@@ -95,6 +93,7 @@ require('../../../../views/TransactionConfirmationView/TransactionConfirmationVi
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../components/PasskeyCard/PasskeyCard.cjs');
+require('../CryptoComOnramp/CryptoComOnramp.cjs');
 require('../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../../../../index.cjs');
 var convertExchangeKeyAndProviderEnum = require('../../helpers/convertExchangeKeyAndProviderEnum.cjs');
@@ -129,6 +128,10 @@ var useExchangeRatesForFunding = require('./utils/useExchangeRatesForFunding/use
 var useExchangeTokensForFunding = require('./utils/useExchangeTokensForFunding/useExchangeTokensForFunding.cjs');
 var useSubmitWalletFunding = require('./utils/useSubmitWalletFunding/useSubmitWalletFunding.cjs');
 var useTokensForFunding = require('./utils/useTokensForFunding/useTokensForFunding.cjs');
+var createFundingButtons = require('./utils/createFundingButtons/createFundingButtons.cjs');
+var parseQuickSuggestions = require('./utils/parseQuickSuggestions/parseQuickSuggestions.cjs');
+var useFundingHandlers = require('./utils/useFundingHandlers/useFundingHandlers.cjs');
+var useFundingDisplay = require('./utils/useFundingDisplay/useFundingDisplay.cjs');
 
 const defaultQuickSuggestions = {
     token: 'USD',
@@ -138,7 +141,7 @@ const rulesThatHideQuickSuggestions = ['exact', 'minimum'];
 const rulesThatDisableTokenSelect = ['exact', 'exact-with-amount'];
 const inputEmitter = formattedInputEmitter.createFormattedInputEmitter();
 const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wallet, exchange, fundingWithExchange = false, accounts, quickSuggestions = defaultQuickSuggestions, network, destinationAddress, onBack, hideBackButton = false, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     // For now we hardcode the default value, soon we will fetch this from project settings
     const initialToken = initialTokenRaw !== null && initialTokenRaw !== void 0 ? initialTokenRaw : {
         rule: 'recommended',
@@ -212,17 +215,6 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
         setTokenAmount(convert.convertFromFiat(amount, tokenSymbol, exchangeRates));
     }, [tokenSymbol, exchangeRates]);
     const [showTokenAsPrimary, setShowTokenAsPrimary] = React.useState(false);
-    const switchPrimaryAndSecondary = React.useCallback(() => {
-        setHasUserInteracted(true);
-        setShowTokenAsPrimary(!showTokenAsPrimary);
-        if (tokenAmount && isNaN(parseFloat(tokenAmount))) {
-            setTokenAmount('');
-        }
-        if (fiatAmount && isNaN(parseFloat(fiatAmount))) {
-            setFiatAmount('');
-        }
-        inputEmitter.emit('focus');
-    }, [fiatAmount, showTokenAsPrimary, tokenAmount]);
     const isMinimumRespected = minimum
         ? respectsMinimum.respectsMinimum({ token: fiatSymbol, value: fiatAmount !== null && fiatAmount !== void 0 ? fiatAmount : '' }, minimum, exchangeRates)
         : true;
@@ -243,25 +235,14 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
             },
             { amount: tokenAmount, symbol: tokenSymbol },
         ];
-    const secondaryDisplay = formatValue.formatValue({
-        maxDecimals: isFiatToken.isFiatOrStablecoin(secondaryData.symbol) ? 2 : undefined,
-        symbol: secondaryData.symbol,
-        value: secondaryData.amount,
-        withFixedZeros: isFiatToken.isFiatOrStablecoin(secondaryData.symbol),
+    const { secondaryDisplay, grayOutSecondaryDisplay, inputSymbolProp } = useFundingDisplay.useFundingDisplay({
+        primaryData,
+        secondaryData,
     });
-    const quickSuggestionsWithToken = Array.isArray(quickSuggestions)
+    const quickSuggestionsWithTokenTemp = Array.isArray(quickSuggestions)
         ? { token: 'USD', values: quickSuggestions }
         : quickSuggestions;
-    const quickSuggestionsParsed = quickSuggestionsWithToken.values
-        .filter((value) => respectsMinimum.respectsMinimum({ token: quickSuggestionsWithToken.token, value: value.toString() }, minimum, exchangeRates))
-        .map((value) => ({
-        display: formatValue.formatValue({
-            symbol: quickSuggestionsWithToken.token,
-            value: value,
-        }),
-        value,
-    }))
-        .filter(({ display }) => display !== undefined);
+    const { quickSuggestionsWithToken, quickSuggestionsParsed } = parseQuickSuggestions.parseQuickSuggestions(quickSuggestions, (value) => respectsMinimum.respectsMinimum({ token: quickSuggestionsWithTokenTemp.token, value: value.toString() }, minimum, exchangeRates));
     const currentToken = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find(({ symbol }) => symbol === tokenSymbol);
     const fiatBalance = calculateFiatBalance.calculateFiatBalance(currentToken, exchangeRates);
     const [primaryBalance, secondaryBalance] = showTokenAsPrimary
@@ -304,40 +285,31 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
             isFiatToken.isFiatToken(quickSuggestionsWithToken.token));
     const disableTokenSelect = rulesThatDisableTokenSelect.includes(initialToken.rule);
     const [showTokenSelect, setShowTokenSelect] = React.useState(false);
-    const handleSelectToken = React.useCallback((token) => {
-        setTokenSymbol(token);
-        setShowTokenSelect(false);
-    }, [setTokenSymbol]);
-    const handleQuickSuggestion = React.useCallback((value) => {
-        setHasUserInteracted(true);
-        if (isFiatToken.isFiatToken(quickSuggestionsWithToken.token))
-            setAmountsByFiatValue(value.toString());
-        else
-            setAmountsByTokenValue(value.toString());
-        inputEmitter.emit('focus');
-    }, [
-        quickSuggestionsWithToken.token,
+    const { handleSelectToken, handleQuickSuggestion, closeTokenSelect, switchPrimaryAndSecondary, } = useFundingHandlers.useFundingHandlers({
+        fiatAmount,
+        inputEmitter,
+        quickSuggestionsToken: quickSuggestionsWithToken.token,
         setAmountsByFiatValue,
         setAmountsByTokenValue,
-    ]);
+        setFiatAmount,
+        setHasUserInteracted,
+        setShowTokenAsPrimary,
+        setShowTokenSelect,
+        setTokenAmount,
+        setTokenSymbol,
+        showTokenAsPrimary,
+        tokenAmount,
+    });
     const handleSubmit = useSubmitWalletFunding.useSubmitWalletFunding();
     const handleExchangeSubmit = useSubmitExchangeFunding.useSubmitExchangeFunding();
     const disableSubmit = !isMinimumRespected || showNotEnoughBalance || !isNonZero.isNonZero(tokenAmount);
-    const closeTokenSelect = React.useCallback(() => {
-        setShowTokenSelect(false);
-        inputEmitter.emit('focus');
-    }, []);
-    const grayOutSecondaryDisplay = !isNonZero.isNonZero(secondaryData.amount) ||
-        (isFiatToken.isFiatOrStablecoin(secondaryData.symbol) &&
-            parseFloat((_f = secondaryData.amount) !== null && _f !== void 0 ? _f : '0') < 0.0099);
-    const inputSymbolProp = primaryData.symbol === 'USD'
-        ? { leading: '$' }
-        : { trailing: primaryData.symbol };
-    const backButton = hideBackButton ? undefined : (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => onBack ? onBack() : setDynamicWidgetView('choose-wallet-funding-method'), children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
-    const closeButton = hideBackButton ? (jsxRuntime.jsx(IconButton.IconButton, { onClick: () => {
-            setShowAuthFlow(false);
-            setShowDynamicUserProfile(false);
-        }, type: 'button', id: 'close-button', "data-testid": 'close-button-main', children: jsxRuntime.jsx(close.ReactComponent, {}) })) : undefined;
+    const { backButton, closeButton } = createFundingButtons.createFundingButtons({
+        defaultBackAction: () => setDynamicWidgetView('choose-wallet-funding-method'),
+        hideBackButton,
+        onBack,
+        setShowAuthFlow,
+        setShowDynamicUserProfile,
+    });
     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, trailing: closeButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', copykey: fundingWithExchange
@@ -352,14 +324,14 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
                                         value: minimum.value,
                                     }),
                                 }) })), primaryData.amount !== undefined && (jsxRuntime.jsx(FormattedInput.FormattedInput, Object.assign({ className: 'fund-from-wallet__content__amount-container__amount', value: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact'
-                                    ? (_g = formatValue.formatValue({
+                                    ? (_f = formatValue.formatValue({
                                         maxDecimals: isFiatToken.isFiatOrStablecoin(primaryData.symbol)
                                             ? 2
                                             : 8,
                                         symbol: undefined,
                                         value: primaryData.amount,
                                         withFixedZeros: isFiatToken.isFiatOrStablecoin(primaryData.symbol),
-                                    })) !== null && _g !== void 0 ? _g : primaryData.amount
+                                    })) !== null && _f !== void 0 ? _f : primaryData.amount
                                     : primaryData.amount, onChange: primaryData.setAmount, emitter: inputEmitter, onInteraction: () => setHasUserInteracted(true), locked: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact' }, inputSymbolProp))), primaryData.amount === undefined && (jsxRuntime.jsx(Skeleton.Skeleton, { dataTestId: 'primary-amount-skeleton', container: {
                                     className: 'fund-from-wallet__content__amount-container__skeleton',
                                 } })), showQuickSuggestions && (jsxRuntime.jsx("div", { className: 'fund-from-wallet__content__amount-container__quick-suggestions', children: quickSuggestionsParsed.map(({ display, value }) => (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', onClick: () => handleQuickSuggestion(value), weight: 'medium', children: display }, value))) })), !showQuickSuggestions && secondaryDisplay && (jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-amount-container', children: [(currentToken === null || currentToken === void 0 ? void 0 : currentToken.logoURI) ? (jsxRuntime.jsx(Image.Image, { dataTestId: 'token-icon', alt: tokenSymbol, src: currentToken.logoURI, className: 'fund-from-wallet__content__token-icon' })) : null, jsxRuntime.jsx(Typography.Typography, { weight: 'medium', className: classNames.classNames('fund-from-wallet__content__amount-container__secondary-amount-container__amount', {
@@ -378,14 +350,14 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
                                                         ? 2
                                                         : 6,
                                                     symbol: primaryBalance.symbol,
-                                                    value: (_h = primaryBalance.value) !== null && _h !== void 0 ? _h : consts.UNAVAILABLE_VALUE,
+                                                    value: (_g = primaryBalance.value) !== null && _g !== void 0 ? _g : consts.UNAVAILABLE_VALUE,
                                                     withFixedZeros: isFiatToken.isFiatOrStablecoin(primaryBalance.symbol),
                                                 }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', "data-testid": `secondary-balance-amount-${secondaryBalance.symbol}`, color: 'secondary', weight: 'medium', children: formatValue.formatValue({
                                                     maxDecimals: isFiatToken.isFiatOrStablecoin(secondaryBalance.symbol)
                                                         ? 2
                                                         : 6,
                                                     symbol: secondaryBalance.symbol,
-                                                    value: (_j = secondaryBalance.value) !== null && _j !== void 0 ? _j : consts.UNAVAILABLE_VALUE,
+                                                    value: (_h = secondaryBalance.value) !== null && _h !== void 0 ? _h : 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: () => {
                     if (fundingWithExchange && exchange) {

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

@@ -1,14 +1,12 @@
 'use client'
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SocialIcon } from '@dynamic-labs/iconic';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
 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 SvgClose } from '../../../../shared/assets/close.js';
 import { ReactComponent as SvgFooterInfoIcon } from '../../../../shared/assets/footer-info-icon.js';
 import { ReactComponent as SvgSwitchToggle } from '../../../../shared/assets/switch-toggle.js';
 import '../../../../context/ViewContext/ViewContext.js';
@@ -77,7 +75,7 @@ import '../../../../context/ThemeContext/ThemeContext.js';
 import { Icon } from '../../../../components/Icon/Icon.js';
 import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
-import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import '../../../../components/IconButton/IconButton.js';
 import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
 import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
@@ -91,6 +89,7 @@ import '../../../../views/TransactionConfirmationView/TransactionConfirmationVie
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../components/PasskeyCard/PasskeyCard.js';
+import '../CryptoComOnramp/CryptoComOnramp.js';
 import '../../../../context/OnrampContext/OnrampContext.js';
 import '../../../../../index.js';
 import { convertExchangeKeytoProviderEnum } from '../../helpers/convertExchangeKeyAndProviderEnum.js';
@@ -118,13 +117,17 @@ import { UNAVAILABLE_VALUE } from './consts.js';
 import { calculateFiatBalance } from './utils/calculateFiatBalance/calculateFiatBalance.js';
 import { convertFromFiat, convertToFiat } from './utils/convert/convert.js';
 import { formatValue } from './utils/formatValue/formatValue.js';
-import { isFiatOrStablecoin, isFiatToken } from './utils/isFiatToken/isFiatToken.js';
+import { isFiatToken, isFiatOrStablecoin } from './utils/isFiatToken/isFiatToken.js';
 import { isNonZero } from './utils/isNonZero/isNonZero.js';
 import { respectsMinimum } from './utils/respectsMinimum/respectsMinimum.js';
 import { useExchangeRatesForFunding } from './utils/useExchangeRatesForFunding/useExchangeRatesForFunding.js';
 import { useExchangeTokensForFunding } from './utils/useExchangeTokensForFunding/useExchangeTokensForFunding.js';
 import { useSubmitWalletFunding } from './utils/useSubmitWalletFunding/useSubmitWalletFunding.js';
 import { useTokensForFunding } from './utils/useTokensForFunding/useTokensForFunding.js';
+import { createFundingButtons } from './utils/createFundingButtons/createFundingButtons.js';
+import { parseQuickSuggestions } from './utils/parseQuickSuggestions/parseQuickSuggestions.js';
+import { useFundingHandlers } from './utils/useFundingHandlers/useFundingHandlers.js';
+import { useFundingDisplay } from './utils/useFundingDisplay/useFundingDisplay.js';
 
 const defaultQuickSuggestions = {
     token: 'USD',
@@ -134,7 +137,7 @@ const rulesThatHideQuickSuggestions = ['exact', 'minimum'];
 const rulesThatDisableTokenSelect = ['exact', 'exact-with-amount'];
 const inputEmitter = createFormattedInputEmitter();
 const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wallet, exchange, fundingWithExchange = false, accounts, quickSuggestions = defaultQuickSuggestions, network, destinationAddress, onBack, hideBackButton = false, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     // For now we hardcode the default value, soon we will fetch this from project settings
     const initialToken = initialTokenRaw !== null && initialTokenRaw !== void 0 ? initialTokenRaw : {
         rule: 'recommended',
@@ -208,17 +211,6 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
         setTokenAmount(convertFromFiat(amount, tokenSymbol, exchangeRates));
     }, [tokenSymbol, exchangeRates]);
     const [showTokenAsPrimary, setShowTokenAsPrimary] = useState(false);
-    const switchPrimaryAndSecondary = useCallback(() => {
-        setHasUserInteracted(true);
-        setShowTokenAsPrimary(!showTokenAsPrimary);
-        if (tokenAmount && isNaN(parseFloat(tokenAmount))) {
-            setTokenAmount('');
-        }
-        if (fiatAmount && isNaN(parseFloat(fiatAmount))) {
-            setFiatAmount('');
-        }
-        inputEmitter.emit('focus');
-    }, [fiatAmount, showTokenAsPrimary, tokenAmount]);
     const isMinimumRespected = minimum
         ? respectsMinimum({ token: fiatSymbol, value: fiatAmount !== null && fiatAmount !== void 0 ? fiatAmount : '' }, minimum, exchangeRates)
         : true;
@@ -239,25 +231,14 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
             },
             { amount: tokenAmount, symbol: tokenSymbol },
         ];
-    const secondaryDisplay = formatValue({
-        maxDecimals: isFiatOrStablecoin(secondaryData.symbol) ? 2 : undefined,
-        symbol: secondaryData.symbol,
-        value: secondaryData.amount,
-        withFixedZeros: isFiatOrStablecoin(secondaryData.symbol),
+    const { secondaryDisplay, grayOutSecondaryDisplay, inputSymbolProp } = useFundingDisplay({
+        primaryData,
+        secondaryData,
     });
-    const quickSuggestionsWithToken = Array.isArray(quickSuggestions)
+    const quickSuggestionsWithTokenTemp = Array.isArray(quickSuggestions)
         ? { token: 'USD', values: quickSuggestions }
         : quickSuggestions;
-    const quickSuggestionsParsed = quickSuggestionsWithToken.values
-        .filter((value) => respectsMinimum({ token: quickSuggestionsWithToken.token, value: value.toString() }, minimum, exchangeRates))
-        .map((value) => ({
-        display: formatValue({
-            symbol: quickSuggestionsWithToken.token,
-            value: value,
-        }),
-        value,
-    }))
-        .filter(({ display }) => display !== undefined);
+    const { quickSuggestionsWithToken, quickSuggestionsParsed } = parseQuickSuggestions(quickSuggestions, (value) => respectsMinimum({ token: quickSuggestionsWithTokenTemp.token, value: value.toString() }, minimum, exchangeRates));
     const currentToken = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find(({ symbol }) => symbol === tokenSymbol);
     const fiatBalance = calculateFiatBalance(currentToken, exchangeRates);
     const [primaryBalance, secondaryBalance] = showTokenAsPrimary
@@ -300,40 +281,31 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
             isFiatToken(quickSuggestionsWithToken.token));
     const disableTokenSelect = rulesThatDisableTokenSelect.includes(initialToken.rule);
     const [showTokenSelect, setShowTokenSelect] = useState(false);
-    const handleSelectToken = useCallback((token) => {
-        setTokenSymbol(token);
-        setShowTokenSelect(false);
-    }, [setTokenSymbol]);
-    const handleQuickSuggestion = useCallback((value) => {
-        setHasUserInteracted(true);
-        if (isFiatToken(quickSuggestionsWithToken.token))
-            setAmountsByFiatValue(value.toString());
-        else
-            setAmountsByTokenValue(value.toString());
-        inputEmitter.emit('focus');
-    }, [
-        quickSuggestionsWithToken.token,
+    const { handleSelectToken, handleQuickSuggestion, closeTokenSelect, switchPrimaryAndSecondary, } = useFundingHandlers({
+        fiatAmount,
+        inputEmitter,
+        quickSuggestionsToken: quickSuggestionsWithToken.token,
         setAmountsByFiatValue,
         setAmountsByTokenValue,
-    ]);
+        setFiatAmount,
+        setHasUserInteracted,
+        setShowTokenAsPrimary,
+        setShowTokenSelect,
+        setTokenAmount,
+        setTokenSymbol,
+        showTokenAsPrimary,
+        tokenAmount,
+    });
     const handleSubmit = useSubmitWalletFunding();
     const handleExchangeSubmit = useSubmitExchangeFunding();
     const disableSubmit = !isMinimumRespected || showNotEnoughBalance || !isNonZero(tokenAmount);
-    const closeTokenSelect = useCallback(() => {
-        setShowTokenSelect(false);
-        inputEmitter.emit('focus');
-    }, []);
-    const grayOutSecondaryDisplay = !isNonZero(secondaryData.amount) ||
-        (isFiatOrStablecoin(secondaryData.symbol) &&
-            parseFloat((_f = secondaryData.amount) !== null && _f !== void 0 ? _f : '0') < 0.0099);
-    const inputSymbolProp = primaryData.symbol === 'USD'
-        ? { leading: '$' }
-        : { trailing: primaryData.symbol };
-    const backButton = hideBackButton ? undefined : (jsx(IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => onBack ? onBack() : setDynamicWidgetView('choose-wallet-funding-method'), children: jsx(SvgArrowLeft, {}) }));
-    const closeButton = hideBackButton ? (jsx(IconButton, { onClick: () => {
-            setShowAuthFlow(false);
-            setShowDynamicUserProfile(false);
-        }, type: 'button', id: 'close-button', "data-testid": 'close-button-main', children: jsx(SvgClose, {}) })) : undefined;
+    const { backButton, closeButton } = createFundingButtons({
+        defaultBackAction: () => setDynamicWidgetView('choose-wallet-funding-method'),
+        hideBackButton,
+        onBack,
+        setShowAuthFlow,
+        setShowDynamicUserProfile,
+    });
     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, trailing: closeButton, children: jsx(Typography, { variant: 'title', copykey: fundingWithExchange
@@ -348,14 +320,14 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
                                         value: minimum.value,
                                     }),
                                 }) })), primaryData.amount !== undefined && (jsx(FormattedInput, Object.assign({ className: 'fund-from-wallet__content__amount-container__amount', value: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact'
-                                    ? (_g = formatValue({
+                                    ? (_f = formatValue({
                                         maxDecimals: isFiatOrStablecoin(primaryData.symbol)
                                             ? 2
                                             : 8,
                                         symbol: undefined,
                                         value: primaryData.amount,
                                         withFixedZeros: isFiatOrStablecoin(primaryData.symbol),
-                                    })) !== null && _g !== void 0 ? _g : primaryData.amount
+                                    })) !== null && _f !== void 0 ? _f : primaryData.amount
                                     : primaryData.amount, onChange: primaryData.setAmount, emitter: inputEmitter, onInteraction: () => setHasUserInteracted(true), locked: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact' }, inputSymbolProp))), primaryData.amount === undefined && (jsx(Skeleton, { dataTestId: 'primary-amount-skeleton', container: {
                                     className: 'fund-from-wallet__content__amount-container__skeleton',
                                 } })), showQuickSuggestions && (jsx("div", { className: 'fund-from-wallet__content__amount-container__quick-suggestions', children: quickSuggestionsParsed.map(({ display, value }) => (jsx(Typography, { variant: 'body_small', color: 'secondary', onClick: () => handleQuickSuggestion(value), weight: 'medium', children: display }, value))) })), !showQuickSuggestions && secondaryDisplay && (jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-amount-container', children: [(currentToken === null || currentToken === void 0 ? void 0 : currentToken.logoURI) ? (jsx(Image, { dataTestId: 'token-icon', alt: tokenSymbol, src: currentToken.logoURI, className: 'fund-from-wallet__content__token-icon' })) : null, jsx(Typography, { weight: 'medium', className: classNames('fund-from-wallet__content__amount-container__secondary-amount-container__amount', {
@@ -374,14 +346,14 @@ const ReceiveWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, wal
                                                         ? 2
                                                         : 6,
                                                     symbol: primaryBalance.symbol,
-                                                    value: (_h = primaryBalance.value) !== null && _h !== void 0 ? _h : UNAVAILABLE_VALUE,
+                                                    value: (_g = primaryBalance.value) !== null && _g !== void 0 ? _g : UNAVAILABLE_VALUE,
                                                     withFixedZeros: isFiatOrStablecoin(primaryBalance.symbol),
                                                 }) }), jsx(Typography, { variant: 'body_small', "data-testid": `secondary-balance-amount-${secondaryBalance.symbol}`, color: 'secondary', weight: 'medium', children: formatValue({
                                                     maxDecimals: isFiatOrStablecoin(secondaryBalance.symbol)
                                                         ? 2
                                                         : 6,
                                                     symbol: secondaryBalance.symbol,
-                                                    value: (_j = secondaryBalance.value) !== null && _j !== void 0 ? _j : UNAVAILABLE_VALUE,
+                                                    value: (_h = secondaryBalance.value) !== null && _h !== void 0 ? _h : 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: () => {
                     if (fundingWithExchange && exchange) {

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

@@ -82,6 +82,7 @@ require('../../../../../../views/TransactionConfirmationView/TransactionConfirma
 require('../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../components/PasskeyCard/PasskeyCard.cjs');
+require('../../../CryptoComOnramp/CryptoComOnramp.cjs');
 require('../../../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../../../../../../index.cjs');
 require('../../../../helpers/convertExchangeKeyAndProviderEnum.cjs');

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

@@ -78,6 +78,7 @@ import '../../../../../../views/TransactionConfirmationView/TransactionConfirmat
 import '../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../components/PasskeyCard/PasskeyCard.js';
+import '../../../CryptoComOnramp/CryptoComOnramp.js';
 import '../../../../../../context/OnrampContext/OnrampContext.js';
 import '../../../../../../../index.js';
 import '../../../../helpers/convertExchangeKeyAndProviderEnum.js';

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

@@ -87,6 +87,7 @@ require('../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuc
 require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../components/PasskeyCard/PasskeyCard.cjs');
 var LinearGradientFrame = require('../../../../../components/LinearGradientFrame/LinearGradientFrame.cjs');
+require('../../CryptoComOnramp/CryptoComOnramp.cjs');
 require('../../../../../context/OnrampContext/OnrampContext.cjs');
 require('../../../../../../index.cjs');
 require('../../../helpers/convertExchangeKeyAndProviderEnum.cjs');

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

@@ -83,6 +83,7 @@ import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSucc
 import '../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../components/PasskeyCard/PasskeyCard.js';
 import { LinearGradientFrame } from '../../../../../components/LinearGradientFrame/LinearGradientFrame.js';
+import '../../CryptoComOnramp/CryptoComOnramp.js';
 import '../../../../../context/OnrampContext/OnrampContext.js';
 import '../../../../../../index.js';
 import '../../../helpers/convertExchangeKeyAndProviderEnum.js';

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

@@ -0,0 +1,23 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var arrowLeft = require('../../../../../../shared/assets/arrow-left.cjs');
+var close = require('../../../../../../shared/assets/close.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../../../context/ViewContext/ViewContext.cjs');
+var IconButton = require('../../../../../../components/IconButton/IconButton.cjs');
+
+const createFundingButtons = ({ hideBackButton, onBack, defaultBackAction, setShowAuthFlow, setShowDynamicUserProfile, }) => {
+    const backButton = hideBackButton ? undefined : (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => (onBack ? onBack() : defaultBackAction()), children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
+    const closeButton = hideBackButton ? (jsxRuntime.jsx(IconButton.IconButton, { onClick: () => {
+            setShowAuthFlow(false);
+            setShowDynamicUserProfile(false);
+        }, type: 'button', id: 'close-button', "data-testid": 'close-button-main', children: jsxRuntime.jsx(close.ReactComponent, {}) })) : undefined;
+    return { backButton, closeButton };
+};
+
+exports.createFundingButtons = createFundingButtons;

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/createFundingButtons/createFundingButtons.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type CreateFundingButtonsParams = {
+    hideBackButton: boolean;
+    onBack?: () => void;
+    defaultBackAction: () => void;
+    setShowAuthFlow: (show: boolean) => void;
+    setShowDynamicUserProfile: (show: boolean) => void;
+};
+export declare const createFundingButtons: ({ hideBackButton, onBack, defaultBackAction, setShowAuthFlow, setShowDynamicUserProfile, }: CreateFundingButtonsParams) => {
+    backButton: ReactNode;
+    closeButton: ReactNode;
+};

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

@@ -0,0 +1,19 @@
+'use client'
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { ReactComponent as SvgArrowLeft } from '../../../../../../shared/assets/arrow-left.js';
+import { ReactComponent as SvgClose } from '../../../../../../shared/assets/close.js';
+import '@dynamic-labs/iconic';
+import '../../../../../../context/ViewContext/ViewContext.js';
+import { IconButton } from '../../../../../../components/IconButton/IconButton.js';
+
+const createFundingButtons = ({ hideBackButton, onBack, defaultBackAction, setShowAuthFlow, setShowDynamicUserProfile, }) => {
+    const backButton = hideBackButton ? undefined : (jsx(IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => (onBack ? onBack() : defaultBackAction()), children: jsx(SvgArrowLeft, {}) }));
+    const closeButton = hideBackButton ? (jsx(IconButton, { onClick: () => {
+            setShowAuthFlow(false);
+            setShowDynamicUserProfile(false);
+        }, type: 'button', id: 'close-button', "data-testid": 'close-button-main', children: jsx(SvgClose, {}) })) : undefined;
+    return { backButton, closeButton };
+};
+
+export { createFundingButtons };

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/createFundingButtons/index.d.ts

@@ -0,0 +1,2 @@
+export { createFundingButtons } from './createFundingButtons';
+export type { CreateFundingButtonsParams } from './createFundingButtons';

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/parseQuickSuggestions/index.d.ts

@@ -0,0 +1,2 @@
+export { parseQuickSuggestions } from './parseQuickSuggestions';
+export type { ParseQuickSuggestionsResult } from './parseQuickSuggestions';

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

@@ -0,0 +1,27 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var formatValue = require('../formatValue/formatValue.cjs');
+
+const parseQuickSuggestions = (quickSuggestions, filterFn) => {
+    const quickSuggestionsWithToken = Array.isArray(quickSuggestions)
+        ? { token: 'USD', values: quickSuggestions }
+        : quickSuggestions;
+    const values = filterFn
+        ? quickSuggestionsWithToken.values.filter(filterFn)
+        : quickSuggestionsWithToken.values;
+    const quickSuggestionsParsed = values
+        .map((value) => ({
+        display: formatValue.formatValue({
+            symbol: quickSuggestionsWithToken.token,
+            value: value,
+        }),
+        value,
+    }))
+        .filter(({ display }) => display !== undefined);
+    return { quickSuggestionsParsed, quickSuggestionsWithToken };
+};
+
+exports.parseQuickSuggestions = parseQuickSuggestions;

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/parseQuickSuggestions/parseQuickSuggestions.d.ts

@@ -0,0 +1,14 @@
+export type ParseQuickSuggestionsResult = {
+    quickSuggestionsWithToken: {
+        token: string;
+        values: number[];
+    };
+    quickSuggestionsParsed: Array<{
+        display: string | undefined;
+        value: number;
+    }>;
+};
+export declare const parseQuickSuggestions: (quickSuggestions: number[] | {
+    token: string;
+    values: number[];
+}, filterFn?: (value: number) => boolean) => ParseQuickSuggestionsResult;

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

@@ -0,0 +1,23 @@
+'use client'
+import { formatValue } from '../formatValue/formatValue.js';
+
+const parseQuickSuggestions = (quickSuggestions, filterFn) => {
+    const quickSuggestionsWithToken = Array.isArray(quickSuggestions)
+        ? { token: 'USD', values: quickSuggestions }
+        : quickSuggestions;
+    const values = filterFn
+        ? quickSuggestionsWithToken.values.filter(filterFn)
+        : quickSuggestionsWithToken.values;
+    const quickSuggestionsParsed = values
+        .map((value) => ({
+        display: formatValue({
+            symbol: quickSuggestionsWithToken.token,
+            value: value,
+        }),
+        value,
+    }))
+        .filter(({ display }) => display !== undefined);
+    return { quickSuggestionsParsed, quickSuggestionsWithToken };
+};
+
+export { parseQuickSuggestions };

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

@@ -94,6 +94,7 @@ require('../../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayC
 require('../../../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 require('../../../../components/PasskeyCard/PasskeyCard.cjs');
+require('../../../CryptoComOnramp/CryptoComOnramp.cjs');
 require('../../../../../../../index.cjs');
 require('../../ReceiveWalletFunds.cjs');
 require('../../../../../../store/state/tokenBalances.cjs');

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

@@ -90,6 +90,7 @@ import '../../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCa
 import '../../../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import '../../../../components/PasskeyCard/PasskeyCard.js';
+import '../../../CryptoComOnramp/CryptoComOnramp.js';
 import '../../../../../../../index.js';
 import '../../ReceiveWalletFunds.js';
 import '../../../../../../store/state/tokenBalances.js';

package/src/lib/widgets/DynamicWidget/views/ReceiveWalletFunds/utils/useFundingDisplay/index.d.ts

@@ -0,0 +1,2 @@
+export { useFundingDisplay } from './useFundingDisplay';
+export type { UseFundingDisplayParams } from './useFundingDisplay';