@dynamic-labs/sdk-react-core 4.74.1 → 4.76.0

package/CHANGELOG.md

@@ -1,4 +1,25 @@
 
+## [4.76.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.75.0...v4.76.0) (2026-04-06)
+
+
+### Features
+
+* handle credential_not_enabled_for_sign_in error across all sign-in methods ([#10819](https://github.com/dynamic-labs/dynamic-auth/issues/10819)) ([f694b85](https://github.com/dynamic-labs/dynamic-auth/commit/f694b857eab9d377626078d290473ca369652331))
+
+
+### Bug Fixes
+
+* modal transition race condition (opacity stuck at 0) ([#10857](https://github.com/dynamic-labs/dynamic-auth/issues/10857)) ([6e9ec68](https://github.com/dynamic-labs/dynamic-auth/commit/6e9ec68040776cc5be333ad20ad0096374947b74))
+* **react-native:** ensure session is correctly mapped ([#10860](https://github.com/dynamic-labs/dynamic-auth/issues/10860)) ([117b013](https://github.com/dynamic-labs/dynamic-auth/commit/117b013faf9a0d4bc6b8429a36d8e88dba546889))
+
+## [4.75.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.74.1...v4.75.0) (2026-04-03)
+
+
+### Features
+
+* **midnight:** add midnight base package scaffolding ([#10850](https://github.com/dynamic-labs/dynamic-auth/issues/10850)) ([5844849](https://github.com/dynamic-labs/dynamic-auth/commit/584484916cf49d7ec46ec5cf862e2e6b8308d90f))
+* **tempo:** add FeeTokenSelector component for fee token selection ([#10842](https://github.com/dynamic-labs/dynamic-auth/issues/10842)) ([18bc637](https://github.com/dynamic-labs/dynamic-auth/commit/18bc6374bea6eeff6656edaa725b0620bc8b36dd))
+
 ### [4.74.1](https://github.com/dynamic-labs/dynamic-auth/compare/v4.74.0...v4.74.1) (2026-04-02)
 
 This was a version bump only, there were no code changes.

package/package.cjs

@@ -3,10 +3,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.74.1";
+var version = "4.76.0";
 var dependencies = {
-	"@dynamic-labs/sdk-api-core": "0.0.909",
-	"@dynamic-labs-sdk/client": "0.19.0",
+	"@dynamic-labs/sdk-api-core": "0.0.923",
+	"@dynamic-labs-sdk/client": "0.23.2",
 	"@dynamic-labs-wallet/browser-wallet-client": "0.0.314",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"@thumbmarkjs/thumbmarkjs": "0.16.0",

package/package.js

@@ -1,8 +1,8 @@
 'use client'
-var version = "4.74.1";
+var version = "4.76.0";
 var dependencies = {
-	"@dynamic-labs/sdk-api-core": "0.0.909",
-	"@dynamic-labs-sdk/client": "0.19.0",
+	"@dynamic-labs/sdk-api-core": "0.0.923",
+	"@dynamic-labs-sdk/client": "0.23.2",
 	"@dynamic-labs-wallet/browser-wallet-client": "0.0.314",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"@thumbmarkjs/thumbmarkjs": "0.16.0",

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.74.1",
+  "version": "4.76.0",
   "dependencies": {
-    "@dynamic-labs/sdk-api-core": "0.0.909",
-    "@dynamic-labs-sdk/client": "0.19.0",
+    "@dynamic-labs/sdk-api-core": "0.0.923",
+    "@dynamic-labs-sdk/client": "0.23.2",
     "@dynamic-labs-wallet/browser-wallet-client": "0.0.314",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "@thumbmarkjs/thumbmarkjs": "0.16.0",
@@ -16,17 +16,17 @@
     "yup": "0.32.11",
     "react-international-phone": "4.5.0",
     "bs58": "5.0.0",
-    "@dynamic-labs/assert-package-version": "4.74.1",
-    "@dynamic-labs/iconic": "4.74.1",
-    "@dynamic-labs/locale": "4.74.1",
-    "@dynamic-labs/logger": "4.74.1",
-    "@dynamic-labs/multi-wallet": "4.74.1",
-    "@dynamic-labs/rpc-providers": "4.74.1",
-    "@dynamic-labs/store": "4.74.1",
-    "@dynamic-labs/types": "4.74.1",
-    "@dynamic-labs/utils": "4.74.1",
-    "@dynamic-labs/wallet-book": "4.74.1",
-    "@dynamic-labs/wallet-connector-core": "4.74.1",
+    "@dynamic-labs/assert-package-version": "4.76.0",
+    "@dynamic-labs/iconic": "4.76.0",
+    "@dynamic-labs/locale": "4.76.0",
+    "@dynamic-labs/logger": "4.76.0",
+    "@dynamic-labs/multi-wallet": "4.76.0",
+    "@dynamic-labs/rpc-providers": "4.76.0",
+    "@dynamic-labs/store": "4.76.0",
+    "@dynamic-labs/types": "4.76.0",
+    "@dynamic-labs/utils": "4.76.0",
+    "@dynamic-labs/wallet-book": "4.76.0",
+    "@dynamic-labs/wallet-connector-core": "4.76.0",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/client/extension/deprecated/mfa/verifyTotpMfaDevice/verifyTotpMfaDevice.d.ts

@@ -1,3 +1,3 @@
 export declare const verifyTotpMfaDevice: ({ code }: {
     code: string;
-}) => Promise<import("@dynamic-labs-sdk/client").MFADevice>;
+}) => Promise<import("@dynamic-labs/sdk-api-core").MFADevice>;

package/src/lib/components/SendBalanceForm/FeeTokenSelector/FeeTokenSelector.cjs

@@ -0,0 +1,165 @@
+'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');
+require('../../Accordion/components/AccordionItem/AccordionItem.cjs');
+var stroke = require('../../../shared/assets/stroke.cjs');
+require('@dynamic-labs/iconic');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('../../../../../_virtual/_tslib.cjs');
+var classNames = require('../../../utils/functions/classNames/classNames.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../utils/constants/colors.cjs');
+require('../../../utils/constants/values.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../../shared/consts/index.cjs');
+require('../../Alert/Alert.cjs');
+require('../../../events/dynamicEvents.cjs');
+require('../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
+require('../../../store/state/authMode/authMode.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('@dynamic-labs-sdk/client/core');
+require('../../../client/client.cjs');
+require('@dynamic-labs-sdk/client');
+require('../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/locale');
+require('../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../../store/state/primaryWalletId/primaryWalletId.cjs');
+require('../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
+require('../../../utils/functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.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('../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
+require('../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
+require('@dynamic-labs/types');
+require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../context/WalletContext/WalletContext.cjs');
+require('../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('yup');
+require('../../../context/MockContext/MockContext.cjs');
+require('../../../views/CollectUserDataView/useFields.cjs');
+require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../store/state/walletOptions/walletOptions.cjs');
+var Typography = require('../../Typography/Typography.cjs');
+require('../../../context/FooterAnimationContext/index.cjs');
+require('../../ShadowDOM/ShadowDOM.cjs');
+require('../../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('react-focus-lock');
+var Icon = require('../../Icon/Icon.cjs');
+require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../IconButton/IconButton.cjs');
+require('../../../utils/hooks/useGetMfaToken/useGetMfaToken.cjs');
+require('../../MenuList/Dropdown/Dropdown.cjs');
+var Image = require('../../Image/Image.cjs');
+require('formik');
+require('../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
+require('../../../store/state/sendBalances.cjs');
+require('../../Input/Input.cjs');
+var MenuList = require('../../MenuList/MenuList/MenuList.cjs');
+require('../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../widgets/DynamicWidget/components/PasskeyCard/PasskeyCard.cjs');
+require('../../../utils/hooks/useWalletBackup/useWalletBackup.cjs');
+require('../../../utils/hooks/useWalletBackup/types.cjs');
+require('../../../utils/hooks/useWalletBackup/cloudProviders.cjs');
+require('../../../widgets/DynamicWidget/views/CryptoComOnramp/CryptoComOnramp.cjs');
+require('../../../context/OnrampContext/OnrampContext.cjs');
+require('../../../../index.cjs');
+require('../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.cjs');
+require('qrcode');
+require('../../../widgets/DynamicWidget/views/ManagePasskeysMfaWidgetView/ManagePasskeysMfaWidgetView.cjs');
+require('../../../widgets/DynamicWidget/views/ManageTotpMfaWidgetView/ManageTotpMfaWidgetView.cjs');
+require('../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
+require('../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
+require('../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.cjs');
+require('../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
+require('../../../store/state/tokenBalances.cjs');
+require('../../../store/state/multichainBalances.cjs');
+require('../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+require('../../InlineWidget/InlineWidget.cjs');
+require('../../IsBrowser/IsBrowser.cjs');
+require('../../OverlayCard/OverlayCard.cjs');
+require('../../Popper/Popper/Popper.cjs');
+require('../../Popper/PopperContext/PopperContext.cjs');
+
+const FeeTokenSelector = ({ feeTokenOptions, currentFeeToken, setCurrentFeeToken, label, }) => {
+    const { t } = reactI18next.useTranslation();
+    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+    const anchorRef = React.useRef(null);
+    const handleTokenClick = (selectedToken) => {
+        setCurrentFeeToken(selectedToken);
+        setIsDropdownOpen(false);
+    };
+    return (jsxRuntime.jsxs("div", { className: 'fee-token-selector', children: [label && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', className: 'fee-token-selector__label', children: label })), jsxRuntime.jsxs("div", { className: 'fee-token-selector__dropdown', ref: anchorRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), "data-testid": 'fee-token-selector', style: {
+                    alignItems: 'center',
+                    backgroundColor: 'var(--dynamic-base-2)',
+                    border: '1px solid var(--dynamic-base-4)',
+                    borderRadius: 'calc(var(--dynamic-border-radius) / 2)',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    gap: '8px',
+                    padding: '14px 12px',
+                }, children: [jsxRuntime.jsx(Image.Image, { src: currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.logoURI, alt: currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.symbol, className: 'token-balance-item__icon', dataTestId: 'fee-token-icon', fallback: jsxRuntime.jsx("div", { className: 'token-balance-item__skeleton-icon' }) }), jsxRuntime.jsx(Typography.Typography, { as: 'span', variant: 'body_normal', color: 'primary', children: (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.name) || (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.symbol) }), jsxRuntime.jsx("div", { style: { marginLeft: 'auto' }, children: jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'small', children: jsxRuntime.jsx(stroke.ReactComponent, {}) }) })] }), jsxRuntime.jsx(MenuList.MenuList, { className: 'fee-token-selector__menu-list', isOpen: isDropdownOpen, onClickClose: () => setIsDropdownOpen(false), popperProps: {
+                    anchorOrigin: 'bottom-left',
+                    anchorRef,
+                }, mobileTitle: t('dyn_send_transaction.data.fee_token_label'), style: { minWidth: '310px', padding: '8px 16px' }, children: feeTokenOptions.map((token) => {
+                    var _a;
+                    return (jsxRuntime.jsxs("button", { className: classNames.classNames('fee-token-selector__menu-item', {
+                            'fee-token-selector__menu-item--selected': token.address === (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.address),
+                        }), onClick: () => handleTokenClick(token), type: 'button', style: {
+                            alignItems: 'center',
+                            background: 'transparent',
+                            border: 'none',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            gap: '10px',
+                            justifyContent: 'space-between',
+                            padding: '8px 0',
+                            textAlign: 'left',
+                            width: '100%',
+                        }, children: [jsxRuntime.jsxs("div", { style: {
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    gap: '5px',
+                                    minWidth: '150px',
+                                }, children: [jsxRuntime.jsx(Image.Image, { src: token.logoURI, alt: token.symbol, className: 'token-balance-item__icon', fallback: jsxRuntime.jsx("div", { className: 'token-balance-item__skeleton-icon' }) }), jsxRuntime.jsx(Typography.Typography, { as: 'span', variant: 'body_small', color: 'primary', children: token.name || token.symbol })] }), jsxRuntime.jsxs("div", { style: {
+                                    alignItems: 'flex-end',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                }, children: [jsxRuntime.jsx(Typography.Typography, { as: 'span', variant: 'body_small', color: 'secondary', children: token.symbol }), jsxRuntime.jsx(Typography.Typography, { as: 'span', variant: 'body_small', color: 'primary', children: ((_a = token.balance) === null || _a === void 0 ? void 0 : _a.toLocaleString()) || 0 })] })] }, token.address));
+                }) })] }));
+};
+
+exports.FeeTokenSelector = FeeTokenSelector;

package/src/lib/components/SendBalanceForm/FeeTokenSelector/FeeTokenSelector.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, FC, SetStateAction } from 'react';
+import { TokenBalance } from '@dynamic-labs/sdk-api-core';
+import './FeeTokenSelector.scss';
+type FeeTokenSelectorProps = {
+    feeTokenOptions: TokenBalance[];
+    currentFeeToken: TokenBalance | undefined;
+    setCurrentFeeToken: Dispatch<SetStateAction<TokenBalance | undefined>>;
+    label?: string;
+};
+export declare const FeeTokenSelector: FC<FeeTokenSelectorProps>;
+export {};

package/src/lib/components/SendBalanceForm/FeeTokenSelector/FeeTokenSelector.js

@@ -0,0 +1,161 @@
+'use client'
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import '../../Accordion/components/AccordionItem/AccordionItem.js';
+import { ReactComponent as SvgStroke } from '../../../shared/assets/stroke.js';
+import '@dynamic-labs/iconic';
+import '../../../context/ViewContext/ViewContext.js';
+import '../../../../../_virtual/_tslib.js';
+import { classNames } from '../../../utils/functions/classNames/classNames.js';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../shared/logger.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../utils/constants/colors.js';
+import '../../../utils/constants/values.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../../shared/consts/index.js';
+import '../../Alert/Alert.js';
+import '../../../events/dynamicEvents.js';
+import '../../../context/DynamicContext/DynamicContext.js';
+import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '../../../store/state/authMode/authMode.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../../store/state/nonce/nonce.js';
+import '@dynamic-labs-sdk/client/core';
+import '../../../client/client.js';
+import '@dynamic-labs-sdk/client';
+import '../../../config/ApiEndpoint.js';
+import '@dynamic-labs/locale';
+import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../../store/state/primaryWalletId/primaryWalletId.js';
+import '../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+import '../../../utils/functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.js';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../../utils/functions/compareChains/compareChains.js';
+import '../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
+import '../../../context/ThemeContext/ThemeContext.js';
+import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
+import '@dynamic-labs/types';
+import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../context/LoadingContext/LoadingContext.js';
+import '../../../context/WalletContext/WalletContext.js';
+import '../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import 'yup';
+import '../../../context/MockContext/MockContext.js';
+import '../../../views/CollectUserDataView/useFields.js';
+import '../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../store/state/walletOptions/walletOptions.js';
+import { Typography } from '../../Typography/Typography.js';
+import '../../../context/FooterAnimationContext/index.js';
+import '../../ShadowDOM/ShadowDOM.js';
+import '../../Transition/ZoomTransition/ZoomTransition.js';
+import '../../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../Transition/OpacityTransition/OpacityTransition.js';
+import '../../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'react-focus-lock';
+import { Icon } from '../../Icon/Icon.js';
+import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../IconButton/IconButton.js';
+import '../../../utils/hooks/useGetMfaToken/useGetMfaToken.js';
+import '../../MenuList/Dropdown/Dropdown.js';
+import { Image } from '../../Image/Image.js';
+import 'formik';
+import '../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
+import '../../../store/state/sendBalances.js';
+import '../../Input/Input.js';
+import { MenuList } from '../../MenuList/MenuList/MenuList.js';
+import '../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
+import '../../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../widgets/DynamicWidget/components/PasskeyCard/PasskeyCard.js';
+import '../../../utils/hooks/useWalletBackup/useWalletBackup.js';
+import '../../../utils/hooks/useWalletBackup/types.js';
+import '../../../utils/hooks/useWalletBackup/cloudProviders.js';
+import '../../../widgets/DynamicWidget/views/CryptoComOnramp/CryptoComOnramp.js';
+import '../../../context/OnrampContext/OnrampContext.js';
+import '../../../../index.js';
+import '../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
+import 'qrcode';
+import '../../../widgets/DynamicWidget/views/ManagePasskeysMfaWidgetView/ManagePasskeysMfaWidgetView.js';
+import '../../../widgets/DynamicWidget/views/ManageTotpMfaWidgetView/ManageTotpMfaWidgetView.js';
+import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
+import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.js';
+import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
+import '../../../store/state/tokenBalances.js';
+import '../../../store/state/multichainBalances.js';
+import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import '../../InlineWidget/InlineWidget.js';
+import '../../IsBrowser/IsBrowser.js';
+import '../../OverlayCard/OverlayCard.js';
+import '../../Popper/Popper/Popper.js';
+import '../../Popper/PopperContext/PopperContext.js';
+
+const FeeTokenSelector = ({ feeTokenOptions, currentFeeToken, setCurrentFeeToken, label, }) => {
+    const { t } = useTranslation();
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const handleTokenClick = (selectedToken) => {
+        setCurrentFeeToken(selectedToken);
+        setIsDropdownOpen(false);
+    };
+    return (jsxs("div", { className: 'fee-token-selector', children: [label && (jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', className: 'fee-token-selector__label', children: label })), jsxs("div", { className: 'fee-token-selector__dropdown', ref: anchorRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), "data-testid": 'fee-token-selector', style: {
+                    alignItems: 'center',
+                    backgroundColor: 'var(--dynamic-base-2)',
+                    border: '1px solid var(--dynamic-base-4)',
+                    borderRadius: 'calc(var(--dynamic-border-radius) / 2)',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    gap: '8px',
+                    padding: '14px 12px',
+                }, children: [jsx(Image, { src: currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.logoURI, alt: currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.symbol, className: 'token-balance-item__icon', dataTestId: 'fee-token-icon', fallback: jsx("div", { className: 'token-balance-item__skeleton-icon' }) }), jsx(Typography, { as: 'span', variant: 'body_normal', color: 'primary', children: (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.name) || (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.symbol) }), jsx("div", { style: { marginLeft: 'auto' }, children: jsx(Icon, { color: 'text-tertiary', size: 'small', children: jsx(SvgStroke, {}) }) })] }), jsx(MenuList, { className: 'fee-token-selector__menu-list', isOpen: isDropdownOpen, onClickClose: () => setIsDropdownOpen(false), popperProps: {
+                    anchorOrigin: 'bottom-left',
+                    anchorRef,
+                }, mobileTitle: t('dyn_send_transaction.data.fee_token_label'), style: { minWidth: '310px', padding: '8px 16px' }, children: feeTokenOptions.map((token) => {
+                    var _a;
+                    return (jsxs("button", { className: classNames('fee-token-selector__menu-item', {
+                            'fee-token-selector__menu-item--selected': token.address === (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.address),
+                        }), onClick: () => handleTokenClick(token), type: 'button', style: {
+                            alignItems: 'center',
+                            background: 'transparent',
+                            border: 'none',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            gap: '10px',
+                            justifyContent: 'space-between',
+                            padding: '8px 0',
+                            textAlign: 'left',
+                            width: '100%',
+                        }, children: [jsxs("div", { style: {
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    gap: '5px',
+                                    minWidth: '150px',
+                                }, children: [jsx(Image, { src: token.logoURI, alt: token.symbol, className: 'token-balance-item__icon', fallback: jsx("div", { className: 'token-balance-item__skeleton-icon' }) }), jsx(Typography, { as: 'span', variant: 'body_small', color: 'primary', children: token.name || token.symbol })] }), jsxs("div", { style: {
+                                    alignItems: 'flex-end',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                }, children: [jsx(Typography, { as: 'span', variant: 'body_small', color: 'secondary', children: token.symbol }), jsx(Typography, { as: 'span', variant: 'body_small', color: 'primary', children: ((_a = token.balance) === null || _a === void 0 ? void 0 : _a.toLocaleString()) || 0 })] })] }, token.address));
+                }) })] }));
+};
+
+export { FeeTokenSelector };

package/src/lib/components/SendBalanceForm/FeeTokenSelector/index.d.ts

@@ -0,0 +1 @@
+export { FeeTokenSelector } from './FeeTokenSelector';

package/src/lib/components/SendBalanceForm/SendBalanceForm.cjs

@@ -100,6 +100,7 @@ require('../../context/OnrampContext/OnrampContext.cjs');
 var sendBalances = require('../../store/state/sendBalances.cjs');
 var TokensBalanceDropdown = require('../SendBalancePageLayout/components/TokensBalanceDropdown/TokensBalanceDropdown.cjs');
 var utils = require('../TransactionConfirmationPageLayout/utils.cjs');
+var FeeTokenSelector = require('./FeeTokenSelector/FeeTokenSelector.cjs');
 require('../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -139,9 +140,7 @@ const getDisplayErrorMessage = (errors, t, field, decimals) => {
     }
     return '';
 };
-const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddress = () => true, validateAmount = () => true, currentToken, transaction, tokenBalances, setCurrentToken, isLoading, 
-// Tempo-specific props
-isTempo = false, feeTokenOptions, currentFeeToken, setCurrentFeeToken, }) => {
+const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddress = () => true, validateAmount = () => true, currentToken, transaction, tokenBalances, setCurrentToken, isLoading, supportsFeeTokenSelection = false, feeTokenOptions, currentFeeToken, setCurrentFeeToken, }) => {
     const { t } = reactI18next.useTranslation();
     const { showFiat } = useInternalDynamicContext.useInternalDynamicContext();
     const floatingValueRef = React.useRef(null);
@@ -196,18 +195,11 @@ isTempo = false, feeTokenOptions, currentFeeToken, setCurrentFeeToken, }) => {
                                     paddingLeft: `${leftSymbolPadding}px`,
                                 } }), jsxRuntime.jsx("div", { className: 'send-balance-form__amount-container__floating_value', ref: floatingValueRef, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', weight: 'regular', color: 'secondary', children: currentToken === null || currentToken === void 0 ? void 0 : currentToken.symbol }) }), jsxRuntime.jsx("div", { className: 'send-balance-form__amount-container__balance', children: showFiat && !Number.isNaN(amount) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_mini', weight: 'bold', color: 'secondary', children: "$" }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_mini', weight: 'regular', color: 'secondary', children: utils.getDisplayFiatPrice(amount, currentToken) })] })) })] }), jsxRuntime.jsx(Typography.Typography, { className: 'send-balance-form__amount_available', variant: 'body_small', weight: 'regular', color: 'secondary', as: 'div', children: jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '0.225rem' }, children: [jsxRuntime.jsx(Typography.Typography, { className: 'send-balance-form__amount_available__line', variant: 'body_small', weight: 'bold', color: 'primary', as: 'div', children: (_a = currentToken === null || currentToken === void 0 ? void 0 : currentToken.balance) !== null && _a !== void 0 ? _a : 0 }), t('dyn_send_transaction.data.symbol_available', {
                                     symbol: currentToken === null || currentToken === void 0 ? void 0 : currentToken.symbol,
-                                })] }) }), isTempo &&
+                                })] }) }), supportsFeeTokenSelection &&
                         feeTokenOptions &&
                         feeTokenOptions.length > 0 &&
-                        setCurrentFeeToken && (jsxRuntime.jsxs("div", { className: 'send-balance-form__fee-token-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', style: { marginBottom: '8px' }, children: t('dyn_send_transaction.data.fee_token_label') }), jsxRuntime.jsx("select", { className: 'send-balance-form__fee-token-select', value: (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.address) || '', onChange: ({ target: { value } }) => {
-                                    const selected = feeTokenOptions.find((token) => token.address === value);
-                                    if (selected) {
-                                        setCurrentFeeToken(selected);
-                                    }
-                                }, children: feeTokenOptions.map((token) => {
-                                    var _a;
-                                    return (jsxRuntime.jsxs("option", { value: token.address, children: [token.symbol, " (", ((_a = token.balance) === null || _a === void 0 ? void 0 : _a.toLocaleString()) || 0, ' ', "available)"] }, token.address));
-                                }) })] })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', copykey: 'dyn_send_transaction.data.recipient.label', children: "Recipient Address" }), jsxRuntime.jsx(formik.Field, { className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input.Input, error: errors['recipient'], copykey: 'dyn_send_transaction.data.recipient.label', message: touched['recipient'] &&
+                        setCurrentFeeToken &&
+                        currentFeeToken && (jsxRuntime.jsx(FeeTokenSelector.FeeTokenSelector, { feeTokenOptions: feeTokenOptions, currentFeeToken: currentFeeToken, setCurrentFeeToken: setCurrentFeeToken, label: t('dyn_send_transaction.data.fee_token_label') })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', copykey: 'dyn_send_transaction.data.recipient.label', children: "Recipient Address" }), jsxRuntime.jsx(formik.Field, { className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input.Input, error: errors['recipient'], copykey: 'dyn_send_transaction.data.recipient.label', message: touched['recipient'] &&
                             getDisplayErrorMessage(errors, t, 'recipient') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'small', buttonClassName: 'send-balance-form__button', copykey: 'dyn_send_transaction.preview_transaction', children: t('dyn_send_transaction.preview_transaction') })] }));
         } }));
 };

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

@@ -16,7 +16,7 @@ export type Props = {
     setCurrentToken: Dispatch<SetStateAction<TokenBalance | undefined>>;
     isLoading?: boolean;
     transaction: IUITransaction;
-    isTempo?: boolean;
+    supportsFeeTokenSelection?: boolean;
     feeTokenOptions?: TokenBalance[];
     currentFeeToken?: TokenBalance;
     setCurrentFeeToken?: Dispatch<SetStateAction<TokenBalance | undefined>>;

package/src/lib/components/SendBalanceForm/SendBalanceForm.js

@@ -96,6 +96,7 @@ import '../../context/OnrampContext/OnrampContext.js';
 import { useSendBalanceState, setSendBalanceVariable } from '../../store/state/sendBalances.js';
 import { TokensBalanceDropdown } from '../SendBalancePageLayout/components/TokensBalanceDropdown/TokensBalanceDropdown.js';
 import { getDisplayFiatPrice } from '../TransactionConfirmationPageLayout/utils.js';
+import { FeeTokenSelector } from './FeeTokenSelector/FeeTokenSelector.js';
 import '../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -135,9 +136,7 @@ const getDisplayErrorMessage = (errors, t, field, decimals) => {
     }
     return '';
 };
-const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddress = () => true, validateAmount = () => true, currentToken, transaction, tokenBalances, setCurrentToken, isLoading, 
-// Tempo-specific props
-isTempo = false, feeTokenOptions, currentFeeToken, setCurrentFeeToken, }) => {
+const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddress = () => true, validateAmount = () => true, currentToken, transaction, tokenBalances, setCurrentToken, isLoading, supportsFeeTokenSelection = false, feeTokenOptions, currentFeeToken, setCurrentFeeToken, }) => {
     const { t } = useTranslation();
     const { showFiat } = useInternalDynamicContext();
     const floatingValueRef = useRef(null);
@@ -192,18 +191,11 @@ isTempo = false, feeTokenOptions, currentFeeToken, setCurrentFeeToken, }) => {
                                     paddingLeft: `${leftSymbolPadding}px`,
                                 } }), jsx("div", { className: 'send-balance-form__amount-container__floating_value', ref: floatingValueRef, children: jsx(Typography, { variant: 'title', weight: 'regular', color: 'secondary', children: currentToken === null || currentToken === void 0 ? void 0 : currentToken.symbol }) }), jsx("div", { className: 'send-balance-form__amount-container__balance', children: showFiat && !Number.isNaN(amount) && (jsxs(Fragment, { children: [jsx(Typography, { variant: 'body_mini', weight: 'bold', color: 'secondary', children: "$" }), jsx(Typography, { variant: 'body_mini', weight: 'regular', color: 'secondary', children: getDisplayFiatPrice(amount, currentToken) })] })) })] }), jsx(Typography, { className: 'send-balance-form__amount_available', variant: 'body_small', weight: 'regular', color: 'secondary', as: 'div', children: jsxs("div", { style: { display: 'flex', gap: '0.225rem' }, children: [jsx(Typography, { className: 'send-balance-form__amount_available__line', variant: 'body_small', weight: 'bold', color: 'primary', as: 'div', children: (_a = currentToken === null || currentToken === void 0 ? void 0 : currentToken.balance) !== null && _a !== void 0 ? _a : 0 }), t('dyn_send_transaction.data.symbol_available', {
                                     symbol: currentToken === null || currentToken === void 0 ? void 0 : currentToken.symbol,
-                                })] }) }), isTempo &&
+                                })] }) }), supportsFeeTokenSelection &&
                         feeTokenOptions &&
                         feeTokenOptions.length > 0 &&
-                        setCurrentFeeToken && (jsxs("div", { className: 'send-balance-form__fee-token-container', children: [jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', style: { marginBottom: '8px' }, children: t('dyn_send_transaction.data.fee_token_label') }), jsx("select", { className: 'send-balance-form__fee-token-select', value: (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.address) || '', onChange: ({ target: { value } }) => {
-                                    const selected = feeTokenOptions.find((token) => token.address === value);
-                                    if (selected) {
-                                        setCurrentFeeToken(selected);
-                                    }
-                                }, children: feeTokenOptions.map((token) => {
-                                    var _a;
-                                    return (jsxs("option", { value: token.address, children: [token.symbol, " (", ((_a = token.balance) === null || _a === void 0 ? void 0 : _a.toLocaleString()) || 0, ' ', "available)"] }, token.address));
-                                }) })] })), jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', copykey: 'dyn_send_transaction.data.recipient.label', children: "Recipient Address" }), jsx(Field, { className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input, error: errors['recipient'], copykey: 'dyn_send_transaction.data.recipient.label', message: touched['recipient'] &&
+                        setCurrentFeeToken &&
+                        currentFeeToken && (jsx(FeeTokenSelector, { feeTokenOptions: feeTokenOptions, currentFeeToken: currentFeeToken, setCurrentFeeToken: setCurrentFeeToken, label: t('dyn_send_transaction.data.fee_token_label') })), jsx(Typography, { variant: 'body_small', weight: 'regular', color: 'secondary', copykey: 'dyn_send_transaction.data.recipient.label', children: "Recipient Address" }), jsx(Field, { className: 'send-balance-form__field', placeholder: t('dyn_send_transaction.data.recipient.placeholder'), label: t('dyn_send_transaction.data.recipient.label'), id: 'recipient', name: 'recipient', as: Input, error: errors['recipient'], copykey: 'dyn_send_transaction.data.recipient.label', message: touched['recipient'] &&
                             getDisplayErrorMessage(errors, t, 'recipient') }), jsx(TypographyButton, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'small', buttonClassName: 'send-balance-form__button', copykey: 'dyn_send_transaction.preview_transaction', children: t('dyn_send_transaction.preview_transaction') })] }));
         } }));
 };