@dynamic-labs/sdk-react-core 3.0.0-alpha.5 → 3.0.0-alpha.51

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs

@@ -3,19 +3,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var reactI18next = require('react-i18next');
-var walletBook = require('@dynamic-labs/wallet-book');
 var IconButton = require('../IconButton/IconButton.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
-require('react');
-var chevronLeft = require('../../shared/assets/chevron-left.cjs');
+var arrowLeft = require('../../shared/assets/arrow-left.cjs');
 var close = require('../../shared/assets/close.cjs');
-var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
@@ -24,7 +24,6 @@ require('@dynamic-labs/utils');
 require('../../shared/consts/index.cjs');
 var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
 var Typography = require('../Typography/Typography.cjs');
-var Icon = require('../Icon/Icon.cjs');
 var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
@@ -33,11 +32,9 @@ require('../Transition/OpacityTransition/OpacityTransition.cjs');
 var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs');
 var Alert = require('../Alert/Alert.cjs');
 var SendBalanceForm = require('../SendBalanceForm/SendBalanceForm.cjs');
-var Chip = require('../Chip/Chip.cjs');
-var FormFieldLabel = require('../FormFieldLabel/FormFieldLabel.cjs');
 require('../../events/dynamicEvents.cjs');
-require('../../../../_virtual/_tslib.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -51,6 +48,7 @@ require('../../context/UserWalletsContext/UserWalletsContext.cjs');
 require('../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../context/WalletContext/WalletContext.cjs');
+require('../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
 var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
@@ -79,48 +77,106 @@ require('../../views/WalletList/WalletList.cjs');
 require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
+require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
-require('../../context/MfaSettingsContext/MfaSettingsContext.cjs');
 require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../context/PasskeyContext/PasskeyContext.cjs');
-var TokenBalanceCard = require('./components/TokenBalanceCard/TokenBalanceCard.cjs');
+var constants = require('./components/TokensBalanceDropdown/constants.cjs');
+var utils = require('./utils.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../polyfills.cjs');
+require('../../context/ErrorBoundary/ErrorBoundaryBase.cjs');
+require('../../context/ErrorBoundary/ErrorBoundaryContext.cjs');
+require('../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
+require('../../widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.cjs');
+require('../../context/WidgetRegistry/WidgetRegistryContextProvider.cjs');
+require('../../context/FundingContext/FundingContext.cjs');
+require('../../context/SendBalanceContext/SendBalanceContext.cjs');
+require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../context/ConnectWithOtpContext/constants.cjs');
+require('../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
 
-const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletKey, onSubmit, displayPoweredByDynamicFooter = false, transaction, currencySymbol, networkName, networkIcon, networkCurrencyDecimals, }) => {
+const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, displayPoweredByDynamicFooter = false, transaction, networkCurrencyDecimals, tokenBalances, currentToken, setCurrentToken, isLoading, isNativeToken, chainName, setNativePrice, }) => {
     var _a;
     const { t } = reactI18next.useTranslation();
+    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
-    const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
     const { data: balance } = usePromise.usePromise(() => transaction.getBalance(), {
         deps: [transaction],
     });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', copykey: 'dyn_send_transaction.data.from', children: t('dyn_send_transaction.data.from') }), walletKey && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey }) })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__body', children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__network-container', children: jsxRuntime.jsx(Chip.Chip, { icon: networkIcon, children: networkName }) })), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, { divider: true, children: "Token" }), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance
-                                    ? transaction.format(balance, { precision: 6 })
-                                    : undefined })] }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: ({ amount, recipient }) => {
-                            transaction.value = transaction.parse(amount);
+    React.useEffect(() => {
+        const getNativeTokenAndFetchBalance = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            const token = Object.assign(Object.assign({}, utils.getNativeTokenInfo(chainName.toLowerCase())), { address: chainName === 'Solana' ? constants.nativeSolanaAddress : constants.zeroAddress, balance: 0, decimals: chainName === 'Solana' ? 9 : 18, rawBalance: 0 });
+            const tokenBalance = yield (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.getBalance(primaryWallet.address));
+            if (tokenBalance) {
+                token.balance = Number(tokenBalance);
+                token.rawBalance = Number(tokenBalance) / Math.pow(10, token.decimals);
+            }
+            setCurrentToken(token);
+        });
+        const updateTokenBalances = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            if (isLoading)
+                return;
+            if (tokenBalances === undefined ||
+                (Array.isArray(tokenBalances) && tokenBalances.length === 0)) {
+                yield getNativeTokenAndFetchBalance();
+            }
+            else if (!currentToken) {
+                setCurrentToken(tokenBalances[0]);
+            }
+        });
+        updateTokenBalances();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tokenBalances]);
+    const getAmount = () => {
+        if (isNativeToken) {
+            return transaction.value ? transaction.format(transaction.value) : '';
+        }
+        // Non-native token
+        return (transaction === null || transaction === void 0 ? void 0 : transaction.formatNonNativeToken) &&
+            (transaction === null || transaction === void 0 ? void 0 : transaction.nonNativeValue) &&
+            (transaction === null || transaction === void 0 ? void 0 : transaction.nonNativeDecimal)
+            ? transaction.formatNonNativeToken(transaction.nonNativeValue, transaction.nonNativeDecimal)
+            : '';
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_send_transaction.data.send', children: t('dyn_send_transaction.data.send') }) }) }), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__body', children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { tokenBalances: tokenBalances, setCurrentToken: setCurrentToken, isLoading: isLoading, setNativePrice: setNativePrice, onSubmit: ({ amount, recipient }) => {
+                            if (isNativeToken) {
+                                transaction.value = transaction.parse(amount);
+                            }
+                            else if (transaction.parseNonNativeToken) {
+                                transaction.nonNativeValue = transaction.parseNonNativeToken(amount, (currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals) || 18);
+                                transaction.value = BigInt(0);
+                                transaction.nonNativeAddress = currentToken === null || currentToken === void 0 ? void 0 : currentToken.address;
+                                transaction.nonNativeDecimal = currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals;
+                            }
                             transaction.to = recipient;
                             onSubmit();
                         }, initialValues: {
-                            amount: transaction.value
-                                ? transaction.format(transaction.value)
-                                : '',
+                            amount: getAmount(),
                             recipient: (_a = transaction.to) !== null && _a !== void 0 ? _a : '',
-                        }, decimals: networkCurrencyDecimals, validateAddress: (value) => {
+                        }, decimals: isNativeToken ? networkCurrencyDecimals : currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals, validateAddress: (value) => {
                             if (!value)
                                 return true;
                             return transaction.validateAddressFormat(value);
                         }, validateAmount: (amountText) => {
                             if (!amountText)
                                 return false;
-                            if (!balance)
+                            if (isNativeToken) {
+                                if (!balance)
+                                    return false;
+                                const amount = transaction.parse(amountText);
+                                return amount <= balance;
+                            }
+                            // Non Native
+                            if (!(currentToken === null || currentToken === void 0 ? void 0 : currentToken.rawBalance) || !transaction.parseNonNativeToken)
                                 return false;
-                            const amount = transaction.parse(amountText);
-                            return amount <= balance;
-                        } }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
+                            const amount = Number(transaction.parseNonNativeToken(amountText, (currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals) || 18));
+                            return amount <= currentToken.rawBalance;
+                        }, currentToken: currentToken, transaction: transaction }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 exports.SendBalancePageLayout = SendBalancePageLayout;

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.d.ts

@@ -1,8 +1,8 @@
-import { FC, MouseEventHandler, ReactNode } from 'react';
+import { FC, MouseEventHandler, ReactNode, SetStateAction, Dispatch } from 'react';
+import { TokenBalance } from '@dynamic-labs/sdk-api-core';
 import { IUITransaction } from '@dynamic-labs/types';
 export type SendBalancePageLayoutProps = {
     transaction: IUITransaction;
-    currencySymbol: string;
     displayPoweredByDynamicFooter?: boolean;
     error?: string;
     networkIcon?: ReactNode;
@@ -12,6 +12,13 @@ export type SendBalancePageLayoutProps = {
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onSubmit: () => void;
     walletAddress: string;
-    walletKey: string;
+    walletKey?: string;
+    tokenBalances: TokenBalance[] | undefined;
+    currentToken: TokenBalance | undefined;
+    setCurrentToken: Dispatch<SetStateAction<TokenBalance | undefined>>;
+    isLoading?: boolean;
+    isNativeToken: boolean;
+    chainName: string;
+    setNativePrice: Dispatch<SetStateAction<number>>;
 };
 export declare const SendBalancePageLayout: FC<SendBalancePageLayoutProps>;

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js

@@ -1,17 +1,17 @@
 'use client'
+import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { WalletIcon } from '@dynamic-labs/wallet-book';
 import { IconButton } from '../IconButton/IconButton.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
-import 'react';
-import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgArrowLeft } from '../../shared/assets/arrow-left.js';
 import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
-import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '@dynamic-labs/wallet-book';
 import '../../utils/constants/colors.js';
 import '../../utils/constants/values.js';
 import '../../shared/utils/classes/storage/localStorage.js';
@@ -20,7 +20,6 @@ import '@dynamic-labs/utils';
 import '../../shared/consts/index.js';
 import { ModalHeader } from '../ModalHeader/ModalHeader.js';
 import { Typography } from '../Typography/Typography.js';
-import { Icon } from '../Icon/Icon.js';
 import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
@@ -29,11 +28,9 @@ import '../Transition/OpacityTransition/OpacityTransition.js';
 import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition/VerticalDrawerTransition.js';
 import { Alert } from '../Alert/Alert.js';
 import { SendBalanceForm } from '../SendBalanceForm/SendBalanceForm.js';
-import { Chip } from '../Chip/Chip.js';
-import { FormFieldLabel } from '../FormFieldLabel/FormFieldLabel.js';
 import '../../events/dynamicEvents.js';
-import '../../../../_virtual/_tslib.js';
 import '../../context/DynamicContext/DynamicContext.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -47,6 +44,7 @@ import '../../context/UserWalletsContext/UserWalletsContext.js';
 import '../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../context/WalletContext/WalletContext.js';
+import '../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
 import { usePromise } from '../../utils/hooks/usePromise/usePromise.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
@@ -75,48 +73,106 @@ import '../../views/WalletList/WalletList.js';
 import '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../context/FooterAnimationContext/index.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
-import '../../context/MfaSettingsContext/MfaSettingsContext.js';
 import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../context/PasskeyContext/PasskeyContext.js';
-import { TokenBalanceCard } from './components/TokenBalanceCard/TokenBalanceCard.js';
+import { nativeSolanaAddress, zeroAddress } from './components/TokensBalanceDropdown/constants.js';
+import { getNativeTokenInfo } from './utils.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../polyfills.js';
+import '../../context/ErrorBoundary/ErrorBoundaryBase.js';
+import '../../context/ErrorBoundary/ErrorBoundaryContext.js';
+import '../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.js';
+import '../../context/WidgetRegistry/WidgetRegistryContextProvider.js';
+import '../../context/FundingContext/FundingContext.js';
+import '../../context/SendBalanceContext/SendBalanceContext.js';
+import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../context/ConnectWithOtpContext/constants.js';
+import '../../context/ReinitializeContext/ReinitializeContextProvider.js';
 
-const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletKey, onSubmit, displayPoweredByDynamicFooter = false, transaction, currencySymbol, networkName, networkIcon, networkCurrencyDecimals, }) => {
+const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, displayPoweredByDynamicFooter = false, transaction, networkCurrencyDecimals, tokenBalances, currentToken, setCurrentToken, isLoading, isNativeToken, chainName, setNativePrice, }) => {
     var _a;
     const { t } = useTranslation();
+    const { primaryWallet } = useInternalDynamicContext();
     const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
-    const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
+    const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }));
     const { data: balance } = usePromise(() => transaction.getBalance(), {
         deps: [transaction],
     });
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', copykey: 'dyn_send_transaction.data.from', children: t('dyn_send_transaction.data.from') }), walletKey && (jsx(Icon, { size: 'small', children: jsx(WalletIcon, { walletKey: walletKey }) })), jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxs("div", { className: 'send-balance-page-layout__body', children: [jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'send-balance-page-layout__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsx("div", { className: 'send-balance-page-layout__network-container', children: jsx(Chip, { icon: networkIcon, children: networkName }) })), jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsx(FormFieldLabel, { divider: true, children: "Token" }), jsx(TokenBalanceCard, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance
-                                    ? transaction.format(balance, { precision: 6 })
-                                    : undefined })] }), jsx(SendBalanceForm, { onSubmit: ({ amount, recipient }) => {
-                            transaction.value = transaction.parse(amount);
+    useEffect(() => {
+        const getNativeTokenAndFetchBalance = () => __awaiter(void 0, void 0, void 0, function* () {
+            const token = Object.assign(Object.assign({}, getNativeTokenInfo(chainName.toLowerCase())), { address: chainName === 'Solana' ? nativeSolanaAddress : zeroAddress, balance: 0, decimals: chainName === 'Solana' ? 9 : 18, rawBalance: 0 });
+            const tokenBalance = yield (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.getBalance(primaryWallet.address));
+            if (tokenBalance) {
+                token.balance = Number(tokenBalance);
+                token.rawBalance = Number(tokenBalance) / Math.pow(10, token.decimals);
+            }
+            setCurrentToken(token);
+        });
+        const updateTokenBalances = () => __awaiter(void 0, void 0, void 0, function* () {
+            if (isLoading)
+                return;
+            if (tokenBalances === undefined ||
+                (Array.isArray(tokenBalances) && tokenBalances.length === 0)) {
+                yield getNativeTokenAndFetchBalance();
+            }
+            else if (!currentToken) {
+                setCurrentToken(tokenBalances[0]);
+            }
+        });
+        updateTokenBalances();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tokenBalances]);
+    const getAmount = () => {
+        if (isNativeToken) {
+            return transaction.value ? transaction.format(transaction.value) : '';
+        }
+        // Non-native token
+        return (transaction === null || transaction === void 0 ? void 0 : transaction.formatNonNativeToken) &&
+            (transaction === null || transaction === void 0 ? void 0 : transaction.nonNativeValue) &&
+            (transaction === null || transaction === void 0 ? void 0 : transaction.nonNativeDecimal)
+            ? transaction.formatNonNativeToken(transaction.nonNativeValue, transaction.nonNativeDecimal)
+            : '';
+    };
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, alignContent: 'bottom', children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_send_transaction.data.send', children: t('dyn_send_transaction.data.send') }) }) }), jsxs("div", { className: 'send-balance-page-layout__body', children: [jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'send-balance-page-layout__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsx(SendBalanceForm, { tokenBalances: tokenBalances, setCurrentToken: setCurrentToken, isLoading: isLoading, setNativePrice: setNativePrice, onSubmit: ({ amount, recipient }) => {
+                            if (isNativeToken) {
+                                transaction.value = transaction.parse(amount);
+                            }
+                            else if (transaction.parseNonNativeToken) {
+                                transaction.nonNativeValue = transaction.parseNonNativeToken(amount, (currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals) || 18);
+                                transaction.value = BigInt(0);
+                                transaction.nonNativeAddress = currentToken === null || currentToken === void 0 ? void 0 : currentToken.address;
+                                transaction.nonNativeDecimal = currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals;
+                            }
                             transaction.to = recipient;
                             onSubmit();
                         }, initialValues: {
-                            amount: transaction.value
-                                ? transaction.format(transaction.value)
-                                : '',
+                            amount: getAmount(),
                             recipient: (_a = transaction.to) !== null && _a !== void 0 ? _a : '',
-                        }, decimals: networkCurrencyDecimals, validateAddress: (value) => {
+                        }, decimals: isNativeToken ? networkCurrencyDecimals : currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals, validateAddress: (value) => {
                             if (!value)
                                 return true;
                             return transaction.validateAddressFormat(value);
                         }, validateAmount: (amountText) => {
                             if (!amountText)
                                 return false;
-                            if (!balance)
+                            if (isNativeToken) {
+                                if (!balance)
+                                    return false;
+                                const amount = transaction.parse(amountText);
+                                return amount <= balance;
+                            }
+                            // Non Native
+                            if (!(currentToken === null || currentToken === void 0 ? void 0 : currentToken.rawBalance) || !transaction.parseNonNativeToken)
                                 return false;
-                            const amount = transaction.parse(amountText);
-                            return amount <= balance;
-                        } }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
+                            const amount = Number(transaction.parseNonNativeToken(amountText, (currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals) || 18));
+                            return amount <= currentToken.rawBalance;
+                        }, currentToken: currentToken, transaction: transaction }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 export { SendBalancePageLayout };

package/src/lib/components/SendBalancePageLayout/components/TokensBalanceDropdown/TokensBalanceDropdown.cjs

@@ -0,0 +1,160 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var ethereumCore = require('@dynamic-labs/ethereum-core');
+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');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var stroke = require('../../../../shared/assets/stroke.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('../../../../shared/utils/classes/storage/sessionStorage.cjs');
+require('@dynamic-labs/utils');
+require('../../../../shared/consts/index.cjs');
+require('../../../../events/dynamicEvents.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/store');
+require('../../../../locale/locale.cjs');
+var sendBalanceActions = require('../../../../store/actions/sendBalanceActions/sendBalanceActions.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('../../../../context/WalletContext/WalletContext.cjs');
+require('../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('@dynamic-labs/types');
+require('../../../../context/LoadingContext/LoadingContext.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');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('../../../Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../../Alert/Alert.cjs');
+var Typography = require('../../../Typography/Typography.cjs');
+var Icon = require('../../../Icon/Icon.cjs');
+require('../../../ShadowDOM/ShadowDOM.cjs');
+require('../../../IconButton/IconButton.cjs');
+require('../../../InlineWidget/InlineWidget.cjs');
+require('../../../Input/Input.cjs');
+require('../../../IsBrowser/IsBrowser.cjs');
+require('../../../MenuList/Dropdown/Dropdown.cjs');
+var MenuList = require('../../../MenuList/MenuList/MenuList.cjs');
+require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../Popper/Popper/Popper.cjs');
+require('../../../Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('qrcode');
+require('formik');
+require('../../../../views/WalletList/WalletList.cjs');
+require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../../../context/FooterAnimationContext/index.cjs');
+var Skeleton = require('../../../Skeleton/Skeleton.cjs');
+require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../../context/PasskeyContext/PasskeyContext.cjs');
+var roundToNthDecimal = require('../../../../utils/functions/roundToNthDecimal/roundToNthDecimal.cjs');
+require('../../../OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../../polyfills.cjs');
+require('../../../../context/ErrorBoundary/ErrorBoundaryBase.cjs');
+require('../../../../context/ErrorBoundary/ErrorBoundaryContext.cjs');
+require('../../../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
+require('../../../../widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.cjs');
+require('../../../../context/WidgetRegistry/WidgetRegistryContextProvider.cjs');
+require('../../../../context/FundingContext/FundingContext.cjs');
+require('../../../../context/SendBalanceContext/SendBalanceContext.cjs');
+require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../../context/ConnectWithOtpContext/constants.cjs');
+require('../../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+
+const TokensBalanceDropdown = ({ tokenBalances, currentToken, setCurrentToken, isLoading, setFieldValue, setErrors, setNativePrice, }) => {
+    const { t } = reactI18next.useTranslation();
+    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+    const filteredTokenBalances = (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.filter((token) => token.name)) || [];
+    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const anchorRef = React.useRef(null);
+    const fetchTokenData = (selectedToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const publicClient = yield (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.getPublicClient());
+        if (!publicClient)
+            return;
+        const erc20Contract = {
+            abi: ethereumCore.erc20Abi,
+            address: selectedToken.address,
+        };
+        const results = yield publicClient.multicall({
+            contracts: [
+                Object.assign(Object.assign({}, erc20Contract), { args: [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address], functionName: 'balanceOf' }),
+                Object.assign(Object.assign({}, erc20Contract), { functionName: 'decimals' }),
+            ],
+        });
+        const [balance, decimals] = results.map((v) => Number(v.result));
+        if (balance && decimals) {
+            selectedToken.balance = balance / Math.pow(10, decimals);
+            selectedToken.rawBalance = balance;
+            if (tokenBalances) {
+                const index = tokenBalances.findIndex((t) => t.name === selectedToken.name);
+                tokenBalances[index] = selectedToken;
+            }
+            selectedToken.decimals = decimals;
+        }
+    });
+    const handleTokenClick = (selectedTokenName) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const selectedToken = (_a = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find((t) => t.name === selectedTokenName)) !== null && _a !== void 0 ? _a : undefined;
+        // we dont need to refetch solana balances because we simulate before sending
+        if ((selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.address) && (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.address.startsWith('0x'))) {
+            fetchTokenData(selectedToken);
+        }
+        if (selectedToken) {
+            if (tokenBalances && ((_b = tokenBalances[0]) === null || _b === void 0 ? void 0 : _b.price))
+                setNativePrice(tokenBalances[0].price);
+            setCurrentToken(selectedToken);
+            setFieldValue('amount', '');
+            sendBalanceActions.setSendBalance({ amount: 0 });
+            setErrors({});
+        }
+        setIsDropdownOpen(!isDropdownOpen);
+    });
+    if (isLoading) {
+        return jsxRuntime.jsx(Skeleton.Skeleton, {});
+    }
+    const tokenLogo = (token, size) => (token === null || token === void 0 ? void 0 : token.logoURI) ? (jsxRuntime.jsx("img", { src: token.logoURI, alt: token === null || token === void 0 ? void 0 : token.name, width: size, height: size })) : (jsxRuntime.jsx("div", { className: 'token-balance-item__skeleton-icon', "data-testid": 'token-balance-item__skeleton-icon' }));
+    return (jsxRuntime.jsxs("div", { className: 'tokens-balance-dropdown', ref: anchorRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), "data-testid": 'tokens-balance-dropdown', children: [!isLoading && (jsxRuntime.jsxs("div", { className: 'tokens-balance-dropdown__selected', children: [tokenLogo(currentToken, '20'), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: currentToken === null || currentToken === void 0 ? void 0 : currentToken.name }), jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'small', className: classNames.classNames('evm-network-control__arrow-icon', {
+                            'evm-network-control__arrow-icon--active': isDropdownOpen,
+                        }), children: jsxRuntime.jsx(stroke.ReactComponent, {}) })] })), jsxRuntime.jsx(MenuList.MenuList, { className: 'tokens-balance-dropdown__menu_list', isOpen: isDropdownOpen, popperProps: {
+                    anchorOrigin: 'bottom-left',
+                    anchorRef,
+                }, mobileTitle: 'Select token', children: filteredTokenBalances.length > 0 ? (filteredTokenBalances.map((t) => (jsxRuntime.jsxs("button", { className: 'tokens-balance-dropdown__menu_list_item', onClick: () => handleTokenClick(t.name), children: [jsxRuntime.jsxs("div", { className: 'tokens-balance-dropdown__menu_list_item__name', children: [tokenLogo(t, '16'), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: t.name })] }), jsxRuntime.jsxs("div", { className: 'tokens-balance-dropdown__menu_list_item__balance', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t.symbol }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: roundToNthDecimal.roundToNthDecimal(t.balance, 6) })] })] }, t.address)))) : (jsxRuntime.jsx("div", { className: 'token-balance-list__empty', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_wallet_information.multi_asset.empty_state') }) })) })] }));
+};
+
+exports.TokensBalanceDropdown = TokensBalanceDropdown;

package/src/lib/components/SendBalancePageLayout/components/TokensBalanceDropdown/TokensBalanceDropdown.d.ts

@@ -0,0 +1,13 @@
+import { FC, Dispatch, SetStateAction } from 'react';
+import { TokenBalance } from '@dynamic-labs/sdk-api-core';
+type TokensBalanceDropdownProps = {
+    tokenBalances: TokenBalance[] | undefined;
+    currentToken: TokenBalance | undefined;
+    setCurrentToken: Dispatch<SetStateAction<TokenBalance | undefined>>;
+    isLoading?: boolean;
+    setFieldValue: (field: string, value: string) => void;
+    setErrors: (errors: any) => void;
+    setNativePrice: Dispatch<SetStateAction<number>>;
+};
+export declare const TokensBalanceDropdown: FC<TokensBalanceDropdownProps>;
+export {};