@dynamic-labs/sdk-react-core 4.2.2 → 4.3.0

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

@@ -0,0 +1,87 @@
+'use client'
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useRef, useState, useCallback, useEffect } from 'react';
+import { classNames } from '../../../../../utils/functions/classNames/classNames.js';
+import { MAX_DISPLAY_LENGTH } from '../consts.js';
+
+const FormattedInput = ({ value, onChange, leading, trailing, className, style, onInteraction, emitter, locked, }) => {
+    var _a, _b;
+    const id = useId();
+    const cursorPosition = useRef(0);
+    const [inputRef, _setInputRef] = useState(null);
+    const setInputRef = (ref) => {
+        _setInputRef(ref);
+        // When we first populate this ref, we want to focus it
+        if (!ref || inputRef)
+            return;
+        resetCursorToEnd(ref);
+    };
+    const setCursorPosition = (position) => {
+        requestAnimationFrame(() => {
+            if (!inputRef)
+                return;
+            inputRef.focus();
+            inputRef.setSelectionRange(position, position);
+        });
+    };
+    const resetCursorToEnd = useCallback((ref = inputRef) => {
+        if (!ref)
+            return;
+        ref.focus();
+        ref.setSelectionRange(ref.value.length, ref.value.length);
+    }, [inputRef]);
+    const handleCursorPosition = () => {
+        if (!inputRef)
+            return;
+        if (inputRef.selectionStart)
+            cursorPosition.current = inputRef.selectionStart;
+    };
+    const handleInputChange = (e) => {
+        onInteraction === null || onInteraction === void 0 ? void 0 : onInteraction();
+        const amountNumber = e.target.value
+            .replace(/[^\d.]/g, '')
+            .slice(0, MAX_DISPLAY_LENGTH);
+        // When nothing changes, ensure the cursor stays put
+        if (amountNumber === value) {
+            setCursorPosition(cursorPosition.current);
+            return;
+        }
+        // If there are multiple decimal points, keep only the new one
+        const decimalCount = amountNumber.split('.').length - 1;
+        let decimalValidated = amountNumber;
+        if (decimalCount > 1) {
+            // Find position of the new decimal point by comparing with previous value
+            const newDecimalIndex = amountNumber
+                .split('')
+                .findIndex((char, i) => char === '.' && value[i] !== '.');
+            // Keep only the new decimal point
+            decimalValidated = amountNumber
+                .split('')
+                .filter((char, i) => char !== '.' || i === newDecimalIndex)
+                .join('');
+            // Set the cursor to after the new decimal point
+            setCursorPosition(value.indexOf('.') > newDecimalIndex
+                ? newDecimalIndex + 1
+                : newDecimalIndex);
+        }
+        onChange(decimalValidated);
+        handleCursorPosition();
+    };
+    useEffect(() => {
+        emitter === null || emitter === void 0 ? void 0 : emitter.on('focus', resetCursorToEnd);
+        return () => {
+            emitter === null || emitter === void 0 ? void 0 : emitter.off('focus', resetCursorToEnd);
+        };
+    }, [emitter, resetCursorToEnd]);
+    return (jsxs("label", { className: classNames(className, 'formatted-input'), 
+        // 0 and 1 length should be the same because placeholder is '0'
+        style: Object.assign(Object.assign({}, style), { '--char-count': (value.length || 1) +
+                ((_a = leading === null || leading === void 0 ? void 0 : leading.length) !== null && _a !== void 0 ? _a : 0) +
+                ((_b = trailing === null || trailing === void 0 ? void 0 : trailing.length) !== null && _b !== void 0 ? _b : 0) }), htmlFor: id, children: [leading && (jsx("label", { htmlFor: id, className: classNames('formatted-input__leading', {
+                    'formatted-input__leading--secondary': value === '',
+                }), children: leading })), jsxs("div", { className: 'formatted-input__input-container', children: [!locked && (jsx("input", { ref: setInputRef, value: value, onChange: handleInputChange, placeholder: '0', onKeyUp: handleCursorPosition, onClick: handleCursorPosition, className: 'formatted-input__input-container__input', id: id, "data-testid": 'formatted-input' })), jsx("label", { htmlFor: id, className: classNames('formatted-input__input-container__ghost-text', {
+                            'formatted-input__input-container__ghost-text--visible': locked,
+                        }), "data-testid": 'formatted-input-ghost-text', children: value === '' ? '0' : value })] }), trailing && (jsx("label", { htmlFor: id, className: 'formatted-input__trailing', children: trailing }))] }));
+};
+
+export { FormattedInput };

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

@@ -0,0 +1,14 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var EventEmitter = require('eventemitter3');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
+
+const createFormattedInputEmitter = () => new EventEmitter__default["default"]();
+
+exports.createFormattedInputEmitter = createFormattedInputEmitter;

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/FormattedInput/formattedInputEmitter.d.ts

@@ -0,0 +1,5 @@
+import EventEmitter from 'eventemitter3';
+export type FormattedInputEvents = {
+    focus: () => void;
+};
+export declare const createFormattedInputEmitter: () => EventEmitter<FormattedInputEvents, any>;

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

@@ -0,0 +1,6 @@
+'use client'
+import EventEmitter from 'eventemitter3';
+
+const createFormattedInputEmitter = () => new EventEmitter();
+
+export { createFormattedInputEmitter };

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

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

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

@@ -0,0 +1,291 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var walletBook = require('@dynamic-labs/wallet-book');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../../../components/Alert/Alert.cjs');
+require('../../../../events/dynamicEvents.cjs');
+require('../../../../../../_virtual/_tslib.cjs');
+require('@dynamic-labs/utils');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+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('../../../../context/ViewContext/ViewContext.cjs');
+var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
+require('../../../../store/state/loadingAndLifecycle.cjs');
+require('../../../../shared/consts/index.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('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../../../utils/functions/compareChains/compareChains.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+var usePromise = require('../../../../utils/hooks/usePromise/usePromise.cjs');
+require('@dynamic-labs/types');
+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');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
+var Skeleton = require('../../../../components/Skeleton/Skeleton.cjs');
+var Tooltip = require('../../../../components/Tooltip/Tooltip.cjs');
+require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('react-focus-lock');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+require('formik');
+require('../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+require('../../../../store/state/sendBalances.cjs');
+require('../../../../components/Input/Input.cjs');
+require('../../../../components/OverlayCard/OverlayCard.cjs');
+require('../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../../index.cjs');
+require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../../context/ConnectWithOtpContext/constants.cjs');
+require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../../store/state/tokenBalances.cjs');
+require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('qrcode');
+var exchangeRates = require('../../../../data/api/exchangeRates/exchangeRates.cjs');
+var FormattedInput = require('./FormattedInput/FormattedInput.cjs');
+var formattedInputEmitter = require('./FormattedInput/formattedInputEmitter.cjs');
+var TokenSelectScreen = require('./TokenSelectScreen/TokenSelectScreen.cjs');
+var consts = require('./consts.cjs');
+var convert = require('./utils/convert/convert.cjs');
+var formatValue = require('./utils/formatValue/formatValue.cjs');
+var isFiatToken = require('./utils/isFiatToken/isFiatToken.cjs');
+var isNonZero = require('./utils/isNonZero/isNonZero.cjs');
+var respectsMinimum = require('./utils/respectsMinimum/respectsMinimum.cjs');
+var useTokensForFunding = require('./utils/useTokensForFunding/useTokensForFunding.cjs');
+
+const defaultQuickSuggestions = {
+    token: 'USD',
+    values: [25, 100, 500],
+};
+const rulesThatHideQuickSuggestions = ['exact', 'minimum'];
+const rulesThatDisableTokenSelect = ['exact', 'exact-with-amount'];
+const inputEmitter = formattedInputEmitter.createFormattedInputEmitter();
+const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, externalWallet, quickSuggestions = defaultQuickSuggestions, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    // 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',
+        value: 'USDC',
+    };
+    /** Whether the amount specified in the prop refers to the token amount instead of the fiat amount */
+    const isInitialAmountValueForToken = (initialToken === null || initialToken === void 0 ? void 0 : initialToken.rule) === 'exact-with-amount';
+    const minimum = (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'minimum'
+        ? {
+            token: isInitialAmountValueForToken
+                ? initialToken.value
+                : 'USD',
+            value: initialAmount.value.toString(),
+        }
+        : undefined;
+    const { t } = reactI18next.useTranslation();
+    const [hasUserInteracted, setHasUserInteracted] = React.useState(false);
+    const [conversionErrorIconRef, setConversionErrorIconRef] = React.useState(null);
+    const { goToInitialDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const tokenBalances = useTokensForFunding.useTokensForFunding({ wallet: externalWallet });
+    const { data: exchangeRates$1 } = usePromise.usePromise(exchangeRates.getExchangeRates, {
+        initialData: {},
+        // Initialize amounts after exchange rates are fetched
+        onResolve: (exchangeRates) => {
+            if (tokenAmount === undefined && fiatAmount !== undefined) {
+                setTokenAmount(convert.convertFromFiat(fiatAmount, tokenSymbol, exchangeRates));
+            }
+            if (fiatAmount === undefined && tokenAmount !== undefined) {
+                setFiatAmount(convert.convertToFiat(tokenAmount, tokenSymbol, exchangeRates));
+            }
+        },
+    });
+    const [tokenAmount, setTokenAmount] = React.useState(isInitialAmountValueForToken
+        ? (_a = initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.value.toString()) !== null && _a !== void 0 ? _a : ''
+        : convert.convertFromFiat((_b = initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.value.toString()) !== null && _b !== void 0 ? _b : '', initialToken.value, exchangeRates$1));
+    const [tokenSymbol, _setTokenSymbol] = React.useState(initialToken.value);
+    const setTokenSymbol = (symbol) => {
+        setHasUserInteracted(true);
+        _setTokenSymbol(symbol);
+        if (fiatAmount)
+            setTokenAmount(convert.convertFromFiat(fiatAmount, symbol, exchangeRates$1));
+    };
+    const [fiatAmount, setFiatAmount] = React.useState(isInitialAmountValueForToken
+        ? convert.convertToFiat(tokenAmount !== null && tokenAmount !== void 0 ? tokenAmount : '', tokenSymbol, exchangeRates$1)
+        : (_c = initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.value.toString()) !== null && _c !== void 0 ? _c : '');
+    // When we eventually allow changing this, add setter as _setFiatSymbol
+    // And then create a setFiatSymbol function similar to how we have setTokenSymbol
+    const [fiatSymbol] = React.useState('USD');
+    const setAmountsByTokenValue = (amount) => {
+        setTokenAmount(amount);
+        setFiatAmount(convert.convertToFiat(amount, tokenSymbol, exchangeRates$1));
+    };
+    const setAmountsByFiatValue = (amount) => {
+        setFiatAmount(amount);
+        setTokenAmount(convert.convertFromFiat(amount, tokenSymbol, exchangeRates$1));
+    };
+    const [showTokenAsPrimary, setShowTokenAsPrimary] = React.useState(false);
+    const switchPrimaryAndSecondary = () => {
+        setHasUserInteracted(true);
+        setShowTokenAsPrimary(!showTokenAsPrimary);
+        inputEmitter.emit('focus');
+    };
+    const isMinimumRespected = minimum
+        ? respectsMinimum.respectsMinimum({ token: fiatSymbol, value: fiatAmount !== null && fiatAmount !== void 0 ? fiatAmount : '' }, minimum, exchangeRates$1)
+        : true;
+    const [primaryData, secondaryData] = showTokenAsPrimary
+        ? [
+            {
+                amount: tokenAmount,
+                setAmount: setAmountsByTokenValue,
+                symbol: tokenSymbol,
+            },
+            { amount: fiatAmount, symbol: fiatSymbol },
+        ]
+        : [
+            {
+                amount: fiatAmount,
+                setAmount: setAmountsByFiatValue,
+                symbol: fiatSymbol,
+            },
+            { amount: tokenAmount, symbol: tokenSymbol },
+        ];
+    const secondaryDisplay = formatValue.formatValue({
+        symbol: secondaryData.symbol,
+        value: secondaryData.amount,
+        withFixedZeros: isFiatToken.isFiatToken(secondaryData.symbol) || secondaryData.symbol === 'USDC',
+    });
+    const quickSuggestionsWithToken = Array.isArray(quickSuggestions)
+        ? { token: 'USD', values: quickSuggestions }
+        : quickSuggestions;
+    const quickSuggestionsParsed = quickSuggestionsWithToken.values
+        .filter((value) => respectsMinimum.respectsMinimum({ token: quickSuggestionsWithToken.token, value: value.toString() }, minimum, exchangeRates$1))
+        .map((value) => ({
+        display: formatValue.formatValue({
+            symbol: quickSuggestionsWithToken.token,
+            value: value,
+        }),
+        value,
+    }))
+        .filter(({ display }) => display !== undefined);
+    const balanceNumber = (_e = (_d = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find(({ symbol }) => symbol === tokenSymbol)) === null || _d === void 0 ? void 0 : _d.balance) !== null && _e !== void 0 ? _e : 0;
+    const showNotEnoughBalance = Boolean(isNonZero.isNonZero(tokenAmount) &&
+        tokenAmount !== undefined &&
+        balanceNumber < parseFloat(tokenAmount));
+    const showMinimumRequired = Boolean(!isMinimumRespected && !showNotEnoughBalance);
+    const showQuickSuggestions = quickSuggestionsParsed.length > 0 &&
+        !hasUserInteracted &&
+        !rulesThatHideQuickSuggestions.includes(initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) &&
+        (tokenSymbol === quickSuggestionsWithToken.token ||
+            isFiatToken.isFiatToken(quickSuggestionsWithToken.token));
+    const disableTokenSelect = rulesThatDisableTokenSelect.includes(initialToken.rule);
+    const [showTokenSelect, setShowTokenSelect] = React.useState(false);
+    const handleSelectToken = (token) => {
+        setTokenSymbol(token);
+        setShowTokenSelect(false);
+    };
+    const handleQuickSuggestion = (value) => {
+        setHasUserInteracted(true);
+        if (isFiatToken.isFiatToken(quickSuggestionsWithToken.token))
+            setAmountsByFiatValue(value.toString());
+        else
+            setAmountsByTokenValue(value.toString());
+        inputEmitter.emit('focus');
+    };
+    const inputSymbolProp = primaryData.symbol === 'USD'
+        ? { leading: '$' }
+        : { trailing: primaryData.symbol };
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: goToInitialDynamicWidgetView, children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
+    const walletCardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details', children: [jsxRuntime.jsx(walletBook.WalletIcon, { icon: externalWallet.connector.metadata.icon, walletKey: externalWallet.connector.key, className: 'fund-from-wallet__content__wallet-card__wallet-details__icon' }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card__wallet-details__rows', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_receive_external_wallet_funds.funding_view.wallet_detail_from') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', children: shortenWalletAddress.shortenWalletAddress(externalWallet.address) })] })] }), jsxRuntime.jsxs("div", { className: classNames.classNames('fund-from-wallet__content__wallet-card__balance', {
+                    'fund-from-wallet__content__wallet-card__balance--disable-select': disableTokenSelect,
+                }), onClick: () => !disableTokenSelect && setShowTokenSelect(true), children: [jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__wallet-card__balance__rows', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', weight: 'bold', children: t('dyn_receive_external_wallet_funds.funding_view.balance') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', "data-testid": `balance-amount-${tokenSymbol}`, children: formatValue.formatValue({
+                                    maxDecimals: 8,
+                                    symbol: tokenSymbol,
+                                    value: balanceNumber,
+                                    withFixedZeros: isFiatToken.isFiatToken(tokenSymbol) || tokenSymbol === 'USDC',
+                                }) })] }), !disableTokenSelect && (jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'small', className: 'fund-from-wallet__content__wallet-card__balance__icon', children: jsxRuntime.jsx(chevronDown.ReactComponent, {}) }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'fund-from-wallet', children: [!disableTokenSelect && (jsxRuntime.jsx(TokenSelectScreen.TokenSelectScreen, { onClose: () => setShowTokenSelect(false), onSelectToken: handleSelectToken, tokens: tokenBalances !== null && tokenBalances !== void 0 ? tokenBalances : [], currentToken: tokenSymbol, className: classNames.classNames('fund-from-wallet__token-select', {
+                    'fund-from-wallet__token-select--open': showTokenSelect,
+                }) })), jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', children: t('dyn_receive_external_wallet_funds.funding_view.title') }) }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content', children: [jsxRuntime.jsx("div", { className: classNames.classNames('fund-from-wallet__content__wallet-card', 'fund-from-wallet__content__wallet-card--invisible'), children: walletCardContent }), jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__amount-container', children: [minimum && (jsxRuntime.jsx(Typography.Typography, { color: 'error-1', className: classNames.classNames('fund-from-wallet__content__amount-container__minimum-error', {
+                                    'fund-from-wallet__content__amount-container__minimum-error--visible': showMinimumRequired,
+                                }), variant: 'body_normal', children: t('dyn_receive_external_wallet_funds.funding_view.minimum_error', {
+                                    minimum: formatValue.formatValue({
+                                        symbol: minimum.token,
+                                        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'
+                                    ? (_f = formatValue.formatValue({
+                                        maxDecimals: 8,
+                                        symbol: undefined,
+                                        value: primaryData.amount,
+                                        withFixedZeros: isFiatToken.isFiatToken(primaryData.symbol) ||
+                                            primaryData.symbol === 'USDC',
+                                    })) !== 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, { 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), children: display }, value))) })), !showQuickSuggestions && secondaryDisplay && (jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-amount-container', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', className: classNames.classNames('fund-from-wallet__content__amount-container__secondary-amount-container__amount', {
+                                            'fund-from-wallet__content__amount-container__secondary-amount-container__amount--zero': !isNonZero.isNonZero(secondaryData.amount),
+                                        }), children: secondaryDisplay }), jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', className: 'fund-from-wallet__content__amount-container__secondary-amount-container__switch', children: jsxRuntime.jsx(switchToggle.ReactComponent, { "data-testid": 'switch-primary-and-secondary', onClick: switchPrimaryAndSecondary }) })] })), !showQuickSuggestions && !secondaryDisplay && (jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-missing', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', children: formatValue.formatValue({
+                                            symbol: secondaryData.symbol,
+                                            value: consts.UNAVAILABLE_VALUE,
+                                        }) }), jsxRuntime.jsx("div", { ref: setConversionErrorIconRef, children: jsxRuntime.jsx(Icon.Icon, { size: 'medium', color: 'text-tertiary', children: jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) }) }), jsxRuntime.jsx(Tooltip.Tooltip, { content: t('dyn_receive_external_wallet_funds.funding_view.network_conversion_error'), targetRef: conversionErrorIconRef, className: 'fund-from-wallet__content__amount-container__secondary-missing__tooltip' })] })), jsxRuntime.jsx(Typography.Typography, { color: 'error-1', className: classNames.classNames('fund-from-wallet__content__amount-container__balance-error', {
+                                    'fund-from-wallet__content__amount-container__balance-error--visible': showNotEnoughBalance,
+                                }), variant: 'body_normal', children: t('dyn_receive_external_wallet_funds.funding_view.balance_error') })] }), jsxRuntime.jsx("div", { className: 'fund-from-wallet__content__wallet-card', children: walletCardContent })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: { color: 'white' }, className: 'fund-from-wallet__confirm-button', disabled: !isMinimumRespected ||
+                    showNotEnoughBalance ||
+                    !isNonZero.isNonZero(primaryData.amount), children: t('dyn_receive_external_wallet_funds.funding_view.confirm_button') })] }));
+};
+
+exports.ReceiveExternalWalletFunds = ReceiveExternalWalletFunds;

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ReceiveExternalWalletFundsProps } from './types';
+export declare const ReceiveExternalWalletFunds: FC<ReceiveExternalWalletFundsProps>;