@dynamic-labs/sdk-react-core 4.74.0 → 4.75.0

package/CHANGELOG.md

@@ -1,4 +1,16 @@
 
+## [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.
+
 ## [4.74.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.73.2...v4.74.0) (2026-04-02)
 
 

package/package.cjs

@@ -3,10 +3,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.74.0";
+var version = "4.75.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.0";
+var version = "4.75.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.0",
+  "version": "4.75.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.0",
-    "@dynamic-labs/iconic": "4.74.0",
-    "@dynamic-labs/locale": "4.74.0",
-    "@dynamic-labs/logger": "4.74.0",
-    "@dynamic-labs/multi-wallet": "4.74.0",
-    "@dynamic-labs/rpc-providers": "4.74.0",
-    "@dynamic-labs/store": "4.74.0",
-    "@dynamic-labs/types": "4.74.0",
-    "@dynamic-labs/utils": "4.74.0",
-    "@dynamic-labs/wallet-book": "4.74.0",
-    "@dynamic-labs/wallet-connector-core": "4.74.0",
+    "@dynamic-labs/assert-package-version": "4.75.0",
+    "@dynamic-labs/iconic": "4.75.0",
+    "@dynamic-labs/locale": "4.75.0",
+    "@dynamic-labs/logger": "4.75.0",
+    "@dynamic-labs/multi-wallet": "4.75.0",
+    "@dynamic-labs/rpc-providers": "4.75.0",
+    "@dynamic-labs/store": "4.75.0",
+    "@dynamic-labs/types": "4.75.0",
+    "@dynamic-labs/utils": "4.75.0",
+    "@dynamic-labs/wallet-book": "4.75.0",
+    "@dynamic-labs/wallet-connector-core": "4.75.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') })] }));
         } }));
 };

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

@@ -123,7 +123,7 @@ require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
 
 const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, displayPoweredByDynamicFooter = false, transaction, networkCurrencyDecimals, tokenBalances, currentToken, setCurrentToken, isLoading, isNativeToken, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { t } = reactI18next.useTranslation();
     const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext.useInternalDynamicContext();
     const networkInfo = useNetworkConfigurationsFromProjectSettings.useNetworkConfigurationsFromProjectSettings({
@@ -132,13 +132,13 @@ const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, dis
     });
     const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
     const { chain } = useFetchChain.useFetchChain(walletConnector);
-    // Tempo-specific: detect Tempo chain and manage fee token state
-    const isTempo = ((_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain) === 'TEMPO';
+    const supportsFeeTokenSelection = (_b = (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.supportsFeeTokenSelection) !== null && _b !== void 0 ? _b : false;
     const [currentFeeToken, setCurrentFeeToken] = React.useState(undefined);
-    // Initialize fee token to first available token for Tempo
-    // Also reset if current token is no longer in the list (stale after refresh)
+    // Initialize fee token when connector supports fee token selection
     React.useEffect(() => {
-        if (isTempo && tokenBalances && tokenBalances.length > 0) {
+        if (supportsFeeTokenSelection &&
+            tokenBalances &&
+            tokenBalances.length > 0) {
             const currentTokenStillExists = currentFeeToken
                 ? tokenBalances.some((token) => token.address === currentFeeToken.address)
                 : false;
@@ -146,7 +146,7 @@ const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, dis
                 setCurrentFeeToken(tokenBalances[0]);
             }
         }
-    }, [isTempo, tokenBalances, currentFeeToken]);
+    }, [supportsFeeTokenSelection, tokenBalances, currentFeeToken]);
     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(arrowLeft.ReactComponent, {}) }));
     const { data: balance } = usePromise.usePromise(() => transaction.getBalance(), {
@@ -206,9 +206,7 @@ const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, dis
             ? 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, 
-                        // Tempo-specific props
-                        isTempo: isTempo, feeTokenOptions: isTempo ? tokenBalances : undefined, currentFeeToken: currentFeeToken, setCurrentFeeToken: setCurrentFeeToken, onSubmit: ({ amount, recipient }) => {
+    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, supportsFeeTokenSelection: supportsFeeTokenSelection, feeTokenOptions: supportsFeeTokenSelection ? tokenBalances : undefined, currentFeeToken: currentFeeToken, setCurrentFeeToken: setCurrentFeeToken, onSubmit: ({ amount, recipient }) => {
                             if (isNativeToken) {
                                 transaction.value = transaction.parse(amount);
                             }
@@ -219,15 +217,14 @@ const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, dis
                                 transaction.nonNativeDecimal = currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals;
                             }
                             transaction.to = recipient;
-                            // Tempo-specific: set fee token address and symbol
-                            if (isTempo && (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.address)) {
+                            if (supportsFeeTokenSelection && (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.address)) {
                                 transaction.feeTokenAddress = currentFeeToken.address;
                                 transaction.feeTokenSymbol = currentFeeToken.symbol;
                             }
                             onSubmit();
                         }, initialValues: {
                             amount: getAmount(),
-                            recipient: (_b = transaction.to) !== null && _b !== void 0 ? _b : '',
+                            recipient: (_c = transaction.to) !== null && _c !== void 0 ? _c : '',
                         }, decimals: isNativeToken ? networkCurrencyDecimals : currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals, validateAddress: (value) => {
                             if (!value)
                                 return true;

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

@@ -119,7 +119,7 @@ import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 
 const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, displayPoweredByDynamicFooter = false, transaction, networkCurrencyDecimals, tokenBalances, currentToken, setCurrentToken, isLoading, isNativeToken, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { t } = useTranslation();
     const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext();
     const networkInfo = useNetworkConfigurationsFromProjectSettings({
@@ -128,13 +128,13 @@ const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, dis
     });
     const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
     const { chain } = useFetchChain(walletConnector);
-    // Tempo-specific: detect Tempo chain and manage fee token state
-    const isTempo = ((_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.connectedChain) === 'TEMPO';
+    const supportsFeeTokenSelection = (_b = (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.supportsFeeTokenSelection) !== null && _b !== void 0 ? _b : false;
     const [currentFeeToken, setCurrentFeeToken] = useState(undefined);
-    // Initialize fee token to first available token for Tempo
-    // Also reset if current token is no longer in the list (stale after refresh)
+    // Initialize fee token when connector supports fee token selection
     useEffect(() => {
-        if (isTempo && tokenBalances && tokenBalances.length > 0) {
+        if (supportsFeeTokenSelection &&
+            tokenBalances &&
+            tokenBalances.length > 0) {
             const currentTokenStillExists = currentFeeToken
                 ? tokenBalances.some((token) => token.address === currentFeeToken.address)
                 : false;
@@ -142,7 +142,7 @@ const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, dis
                 setCurrentFeeToken(tokenBalances[0]);
             }
         }
-    }, [isTempo, tokenBalances, currentFeeToken]);
+    }, [supportsFeeTokenSelection, tokenBalances, currentFeeToken]);
     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(SvgArrowLeft, {}) }));
     const { data: balance } = usePromise(() => transaction.getBalance(), {
@@ -202,9 +202,7 @@ const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, dis
             ? 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, 
-                        // Tempo-specific props
-                        isTempo: isTempo, feeTokenOptions: isTempo ? tokenBalances : undefined, currentFeeToken: currentFeeToken, setCurrentFeeToken: setCurrentFeeToken, onSubmit: ({ amount, recipient }) => {
+    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, supportsFeeTokenSelection: supportsFeeTokenSelection, feeTokenOptions: supportsFeeTokenSelection ? tokenBalances : undefined, currentFeeToken: currentFeeToken, setCurrentFeeToken: setCurrentFeeToken, onSubmit: ({ amount, recipient }) => {
                             if (isNativeToken) {
                                 transaction.value = transaction.parse(amount);
                             }
@@ -215,15 +213,14 @@ const SendBalancePageLayout = ({ error, onClickClose, onClickBack, onSubmit, dis
                                 transaction.nonNativeDecimal = currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals;
                             }
                             transaction.to = recipient;
-                            // Tempo-specific: set fee token address and symbol
-                            if (isTempo && (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.address)) {
+                            if (supportsFeeTokenSelection && (currentFeeToken === null || currentFeeToken === void 0 ? void 0 : currentFeeToken.address)) {
                                 transaction.feeTokenAddress = currentFeeToken.address;
                                 transaction.feeTokenSymbol = currentFeeToken.symbol;
                             }
                             onSubmit();
                         }, initialValues: {
                             amount: getAmount(),
-                            recipient: (_b = transaction.to) !== null && _b !== void 0 ? _b : '',
+                            recipient: (_c = transaction.to) !== null && _c !== void 0 ? _c : '',
                         }, decimals: isNativeToken ? networkCurrencyDecimals : currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals, validateAddress: (value) => {
                             if (!value)
                                 return true;

package/src/lib/components/TransactionCard/SendBalanceTransactionCard.cjs

@@ -120,7 +120,7 @@ require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
 
 const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, onFeeUpdate, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext.useInternalDynamicContext();
     const networkInfo = useNetworkConfigurationsFromProjectSettings.useNetworkConfigurationsFromProjectSettings({
         evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
@@ -136,17 +136,16 @@ const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol,
     const isBitcoinTransaction = transaction.chain === 'BTC' ||
         ((_b = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _b === void 0 ? void 0 : _b.connectedChain) === 'BTC' ||
         ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) && walletConnectorCore.isBitcoinConnector(primaryWallet.connector));
-    // Check if this is a Tempo transaction (for fee token display)
-    const isTempoTransaction = ((_c = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _c === void 0 ? void 0 : _c.connectedChain) === 'TEMPO';
+    const hasFeeToken = Boolean(transaction.feeTokenSymbol);
     const bitcoinTransaction = transaction;
     const [feePriority, setFeePriority] = React.useState((bitcoinTransaction === null || bitcoinTransaction === void 0 ? void 0 : bitcoinTransaction.feePriority) || 'medium');
     const handleFeePriorityChange = React.useCallback((newPriority) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _d;
+        var _c;
         if (!isBitcoinTransaction || feePriority === newPriority) {
             return;
         }
         setFeePriority(newPriority);
-        yield ((_d = bitcoinTransaction.updateFeePriority) === null || _d === void 0 ? void 0 : _d.call(bitcoinTransaction, newPriority));
+        yield ((_c = bitcoinTransaction.updateFeePriority) === null || _c === void 0 ? void 0 : _c.call(bitcoinTransaction, newPriority));
         onFeeUpdate === null || onFeeUpdate === void 0 ? void 0 : onFeeUpdate();
     }), [isBitcoinTransaction, feePriority, bitcoinTransaction, onFeeUpdate]);
     const renderTransferDetails = () => (jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsx("div", { className: 'transaction-card__assets-container', children: jsxRuntime.jsx("div", { className: 'transaction-card__out', children: jsxRuntime.jsxs("div", { className: 'transaction-card__info-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', children: t('dyn_send_transaction.confirmation.data.transfer.send') }), jsxRuntime.jsxs("div", { className: 'transaction-card__amount-symbol', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__token-info', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__token-row', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'error-1', "data-testid": 'transaction-transfer-amount', children: ["-", valueRounded ||
@@ -156,7 +155,7 @@ const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol,
                                                                 })
                                                                 : '')] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', children: currencySymbol })] }), transactionValue && (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'error-1', "data-testid": 'transaction-transfer-amount-fiat', children: ["$", utils.getDisplayFiatPrice(Number(transactionValue) || Number(valueRounded) || 0, currentToken)] }))] }), jsxRuntime.jsx("div", { className: 'transaction-card__icon', children: jsxRuntime.jsx("div", { className: 'transaction-card__icon__container', children: jsxRuntime.jsx("img", { src: (currentToken === null || currentToken === void 0 ? void 0 : currentToken.logoURI) ||
                                                 (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: currencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }) }) }));
-    const renderTransactionDetails = () => (jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsxs("div", { className: 'transaction-card__details', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress.shortenWalletAddress(transaction.to) })] }), (!isGasSponsored || isTempoTransaction) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-card__divider' }), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', "data-testid": 'transaction-network', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxRuntime.jsxs("div", { className: 'transaction-card__network-info', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) ||
+    const renderTransactionDetails = () => (jsxRuntime.jsx("div", { className: 'transaction-card', children: jsxRuntime.jsxs("div", { className: 'transaction-card__details', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress.shortenWalletAddress(transaction.to) })] }), (!isGasSponsored || hasFeeToken) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-card__divider' }), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', "data-testid": 'transaction-network', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxRuntime.jsxs("div", { className: 'transaction-card__network-info', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) ||
                                                 (isBitcoinTransaction ? 'Bitcoin' : 'Ethereum') }), jsxRuntime.jsx("img", { src: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.iconUrls[0]) || (chain === null || chain === void 0 ? void 0 : chain.icon), alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) ||
                                                 (isBitcoinTransaction ? 'Bitcoin' : 'Network icon'), width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), isBitcoinTransaction && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'transaction-card__divider' }), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.fee_priority', children: "Fee Priority" }), jsxRuntime.jsxs("div", { className: 'transaction-card__value', style: {
                                                 alignItems: 'center',
@@ -182,7 +181,7 @@ const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol,
                                                         pointerEvents: 'none',
                                                         position: 'absolute',
                                                         right: 0,
-                                                    }, children: jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(chevronDown.ReactComponent, {}) }) })] })] })] })), jsxRuntime.jsx("div", { className: 'transaction-card__divider' }), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: [t('dyn_send_transaction.confirmation.data.gas_estimate'), isTempoTransaction && transaction.feeTokenSymbol && (jsxRuntime.jsxs("span", { style: { fontWeight: 'normal' }, children: [' ', "(in ", transaction.feeTokenSymbol, ")"] }))] }), jsxRuntime.jsx(Tooltip.Tooltip, { content: isTempoTransaction && transaction.feeTokenSymbol
+                                                    }, children: jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(chevronDown.ReactComponent, {}) }) })] })] })] })), jsxRuntime.jsx("div", { className: 'transaction-card__divider' }), jsxRuntime.jsxs("div", { className: 'transaction-card__row', children: [jsxRuntime.jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: [t('dyn_send_transaction.confirmation.data.gas_estimate'), hasFeeToken && (jsxRuntime.jsxs("span", { style: { fontWeight: 'normal' }, children: [' ', "(in ", transaction.feeTokenSymbol, ")"] }))] }), jsxRuntime.jsx(Tooltip.Tooltip, { content: hasFeeToken
                                                 ? `Network fees paid in ${transaction.feeTokenSymbol}`
                                                 : 'Network fees are paid to process your transaction', className: 'transaction-confirmation', children: jsxRuntime.jsx(Icon.Icon, { size: 'small', className: 'fee-tooltip', children: jsxRuntime.jsx(tooltip.ReactComponent, {}) }) })] }), jsxRuntime.jsx("div", { className: 'transaction-card__value', children: (currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: Number(gasFiatValue) <= 0.01
                                             ? '<$0.01'

package/src/lib/components/TransactionCard/SendBalanceTransactionCard.js

@@ -116,7 +116,7 @@ import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 
 const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol, valueRounded, transactionValue, isGasSponsored, gasFiatValue, totalGasFiatValue, currency, total, t, onFeeUpdate, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext();
     const networkInfo = useNetworkConfigurationsFromProjectSettings({
         evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
@@ -132,17 +132,16 @@ const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol,
     const isBitcoinTransaction = transaction.chain === 'BTC' ||
         ((_b = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _b === void 0 ? void 0 : _b.connectedChain) === 'BTC' ||
         ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) && isBitcoinConnector(primaryWallet.connector));
-    // Check if this is a Tempo transaction (for fee token display)
-    const isTempoTransaction = ((_c = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _c === void 0 ? void 0 : _c.connectedChain) === 'TEMPO';
+    const hasFeeToken = Boolean(transaction.feeTokenSymbol);
     const bitcoinTransaction = transaction;
     const [feePriority, setFeePriority] = useState((bitcoinTransaction === null || bitcoinTransaction === void 0 ? void 0 : bitcoinTransaction.feePriority) || 'medium');
     const handleFeePriorityChange = useCallback((newPriority) => __awaiter(void 0, void 0, void 0, function* () {
-        var _d;
+        var _c;
         if (!isBitcoinTransaction || feePriority === newPriority) {
             return;
         }
         setFeePriority(newPriority);
-        yield ((_d = bitcoinTransaction.updateFeePriority) === null || _d === void 0 ? void 0 : _d.call(bitcoinTransaction, newPriority));
+        yield ((_c = bitcoinTransaction.updateFeePriority) === null || _c === void 0 ? void 0 : _c.call(bitcoinTransaction, newPriority));
         onFeeUpdate === null || onFeeUpdate === void 0 ? void 0 : onFeeUpdate();
     }), [isBitcoinTransaction, feePriority, bitcoinTransaction, onFeeUpdate]);
     const renderTransferDetails = () => (jsx("div", { className: 'transaction-card', children: jsx("div", { className: 'transaction-card__assets-container', children: jsx("div", { className: 'transaction-card__out', children: jsxs("div", { className: 'transaction-card__info-container', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', children: t('dyn_send_transaction.confirmation.data.transfer.send') }), jsxs("div", { className: 'transaction-card__amount-symbol', children: [jsxs("div", { className: 'transaction-card__token-info', children: [jsxs("div", { className: 'transaction-card__token-row', children: [jsxs(Typography, { variant: 'body_normal', color: 'error-1', "data-testid": 'transaction-transfer-amount', children: ["-", valueRounded ||
@@ -152,7 +151,7 @@ const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol,
                                                                 })
                                                                 : '')] }), jsx(Typography, { variant: 'body_normal', color: 'secondary', children: currencySymbol })] }), transactionValue && (jsxs(Typography, { variant: 'body_small', color: 'error-1', "data-testid": 'transaction-transfer-amount-fiat', children: ["$", getDisplayFiatPrice(Number(transactionValue) || Number(valueRounded) || 0, currentToken)] }))] }), jsx("div", { className: 'transaction-card__icon', children: jsx("div", { className: 'transaction-card__icon__container', children: jsx("img", { src: (currentToken === null || currentToken === void 0 ? void 0 : currentToken.logoURI) ||
                                                 (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.nativeCurrency.iconUrl), alt: currencySymbol, width: 32, height: 32, className: 'transaction-card__icon__container__main' }) }) })] })] }) }) }) }));
-    const renderTransactionDetails = () => (jsx("div", { className: 'transaction-card', children: jsxs("div", { className: 'transaction-card__details', children: [jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress(transaction.to) })] }), (!isGasSponsored || isTempoTransaction) && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', "data-testid": 'transaction-network', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxs("div", { className: 'transaction-card__network-info', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) ||
+    const renderTransactionDetails = () => (jsx("div", { className: 'transaction-card', children: jsxs("div", { className: 'transaction-card__details', children: [jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.destination', children: t('dyn_send_transaction.confirmation.data.destination') }), jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-destination', children: shortenWalletAddress(transaction.to) })] }), (!isGasSponsored || hasFeeToken) && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', "data-testid": 'transaction-network', copykey: 'dyn_send_transaction.confirmation.data.network', children: t('dyn_send_transaction.confirmation.data.network') }), jsxs("div", { className: 'transaction-card__network-info', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) ||
                                                 (isBitcoinTransaction ? 'Bitcoin' : 'Ethereum') }), jsx("img", { src: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.iconUrls[0]) || (chain === null || chain === void 0 ? void 0 : chain.icon), alt: (networkInfoEntry === null || networkInfoEntry === void 0 ? void 0 : networkInfoEntry.name) ||
                                                 (isBitcoinTransaction ? 'Bitcoin' : 'Network icon'), width: 16, height: 16, className: 'transaction-card__network-icon' })] })] }), isBitcoinTransaction && (jsxs(Fragment, { children: [jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.fee_priority', children: "Fee Priority" }), jsxs("div", { className: 'transaction-card__value', style: {
                                                 alignItems: 'center',
@@ -178,7 +177,7 @@ const SendBalanceTransactionCard = ({ transaction, currentToken, currencySymbol,
                                                         pointerEvents: 'none',
                                                         position: 'absolute',
                                                         right: 0,
-                                                    }, children: jsx(Icon, { size: 'small', children: jsx(SvgChevronDown, {}) }) })] })] })] })), jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsxs(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: [t('dyn_send_transaction.confirmation.data.gas_estimate'), isTempoTransaction && transaction.feeTokenSymbol && (jsxs("span", { style: { fontWeight: 'normal' }, children: [' ', "(in ", transaction.feeTokenSymbol, ")"] }))] }), jsx(Tooltip, { content: isTempoTransaction && transaction.feeTokenSymbol
+                                                    }, children: jsx(Icon, { size: 'small', children: jsx(SvgChevronDown, {}) }) })] })] })] })), jsx("div", { className: 'transaction-card__divider' }), jsxs("div", { className: 'transaction-card__row', children: [jsxs("div", { className: 'transaction-card__label-with-tooltip', children: [jsxs(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: [t('dyn_send_transaction.confirmation.data.gas_estimate'), hasFeeToken && (jsxs("span", { style: { fontWeight: 'normal' }, children: [' ', "(in ", transaction.feeTokenSymbol, ")"] }))] }), jsx(Tooltip, { content: hasFeeToken
                                                 ? `Network fees paid in ${transaction.feeTokenSymbol}`
                                                 : 'Network fees are paid to process your transaction', className: 'transaction-confirmation', children: jsx(Icon, { size: 'small', className: 'fee-tooltip', children: jsx(SvgTooltip, {}) }) })] }), jsx("div", { className: 'transaction-card__value', children: (currentToken === null || currentToken === void 0 ? void 0 : currentToken.price) ? (jsx(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: Number(gasFiatValue) <= 0.01
                                             ? '<$0.01'

package/src/lib/shared/utils/functions/chain/getChainIcon.cjs

@@ -19,6 +19,7 @@ const chainIconMap = {
     eclipse: iconic.EclipseIcon,
     evm: iconic.EthereumIcon,
     flow: iconic.FlowIcon,
+    midnight: iconic.MidnightIcon,
     solana: iconic.SolanaIcon,
     spark: iconic.SparkIcon,
     starknet: iconic.StarknetIcon,

package/src/lib/shared/utils/functions/chain/getChainIcon.js

@@ -1,5 +1,5 @@
 'use client'
-import { AleoIcon, AlgorandIcon, AptosIcon, BitcoinIcon, CosmosIcon, EclipseIcon, EthereumIcon, FlowIcon, SolanaIcon, SparkIcon, StarknetIcon, StellarIcon, SuiIcon, TempoIcon, TonIcon, TronIcon } from '@dynamic-labs/iconic';
+import { AleoIcon, AlgorandIcon, AptosIcon, BitcoinIcon, CosmosIcon, EclipseIcon, EthereumIcon, FlowIcon, MidnightIcon, SolanaIcon, SparkIcon, StarknetIcon, StellarIcon, SuiIcon, TempoIcon, TonIcon, TronIcon } from '@dynamic-labs/iconic';
 import { getChainInfo } from '@dynamic-labs/wallet-connector-core';
 import 'react';
 import { ReactComponent as SvgError } from '../../../assets/error.js';
@@ -15,6 +15,7 @@ const chainIconMap = {
     eclipse: EclipseIcon,
     evm: EthereumIcon,
     flow: FlowIcon,
+    midnight: MidnightIcon,
     solana: SolanaIcon,
     spark: SparkIcon,
     starknet: StarknetIcon,

package/src/lib/utils/hooks/useNetworkConfigurationsFromProjectSettings/useNetworkConfigurationsFromProjectSettings.cjs

@@ -84,12 +84,14 @@ const useNetworkConfigurationsFromProjectSettings = ({ projectSettings, aleoNetw
     bitcoinNetworksOverrides,
 ]);
 const createNetwork = (network, parser = (input) => input) => {
+    var _a, _b;
     const result = {
         bech32Prefix: network.bech32Prefix,
         blockExplorerUrls: network.blockExplorerUrls,
         chainId: parser(network.chainId),
         cluster: network.cluster,
         genesisHash: network.genesisHash,
+        hasNativeToken: (_a = network.hasNativeToken) !== null && _a !== void 0 ? _a : true,
         iconUrls: network.iconUrls,
         isTestnet: network.isTestnet,
         key: network.key,
@@ -99,6 +101,7 @@ const createNetwork = (network, parser = (input) => input) => {
         networkId: parser(network.networkId),
         privateCustomerRpcUrls: network.privateCustomerRpcUrls,
         rpcUrls: network.rpcUrls,
+        supportsFeeTokenSelection: (_b = network.supportsFeeTokenSelection) !== null && _b !== void 0 ? _b : false,
         vanityName: network.vanityName,
     };
     return result;

package/src/lib/utils/hooks/useNetworkConfigurationsFromProjectSettings/useNetworkConfigurationsFromProjectSettings.js

@@ -80,12 +80,14 @@ const useNetworkConfigurationsFromProjectSettings = ({ projectSettings, aleoNetw
     bitcoinNetworksOverrides,
 ]);
 const createNetwork = (network, parser = (input) => input) => {
+    var _a, _b;
     const result = {
         bech32Prefix: network.bech32Prefix,
         blockExplorerUrls: network.blockExplorerUrls,
         chainId: parser(network.chainId),
         cluster: network.cluster,
         genesisHash: network.genesisHash,
+        hasNativeToken: (_a = network.hasNativeToken) !== null && _a !== void 0 ? _a : true,
         iconUrls: network.iconUrls,
         isTestnet: network.isTestnet,
         key: network.key,
@@ -95,6 +97,7 @@ const createNetwork = (network, parser = (input) => input) => {
         networkId: parser(network.networkId),
         privateCustomerRpcUrls: network.privateCustomerRpcUrls,
         rpcUrls: network.rpcUrls,
+        supportsFeeTokenSelection: (_b = network.supportsFeeTokenSelection) !== null && _b !== void 0 ? _b : false,
         vanityName: network.vanityName,
     };
     return result;

package/src/lib/views/SendBalanceView/SendBalanceView.cjs

@@ -89,6 +89,7 @@ require('../../utils/hooks/useGetMfaToken/useGetMfaToken.cjs');
 require('../../utils/hooks/useWalletBackup/useWalletBackup.cjs');
 require('../../utils/hooks/useWalletBackup/types.cjs');
 require('../../utils/hooks/useWalletBackup/cloudProviders.cjs');
+var useStepUpAuthentication = require('../../utils/hooks/useStepUpAuthentication/useStepUpAuthentication.cjs');
 require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
@@ -114,9 +115,7 @@ require('../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds
 var useNetworkDataFromWallet = require('../../utils/hooks/useNetworkDataFromWallet/useNetworkDataFromWallet.cjs');
 var useTokenBalances = require('../../utils/hooks/useTokenBalances/useTokenBalances.cjs');
 require('../../store/state/multichainBalances.cjs');
-var usePromptMfaAuth = require('../../utils/hooks/usePromptMfaAuth/usePromptMfaAuth.cjs');
 require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
-var useIsMfaRequiredForAction = require('../../utils/hooks/useIsMfaRequiredForAction/useIsMfaRequiredForAction.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
 
 const usingNative = (token) => Boolean(token.isNative);
@@ -148,8 +147,7 @@ const getSupportedChainName = (connectedChain) => {
 const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBack, onClickClose, onError, onSuccess, onDone, displayPoweredByDynamicFooter = false, }) => {
     const [stage, setStage] = React.useState('form');
     const { primaryWallet, walletUiUtils } = useInternalDynamicContext.useInternalDynamicContext();
-    const isMfaRequiredForAction = useIsMfaRequiredForAction.useIsMfaRequiredForAction();
-    const promptMfaAuth = usePromptMfaAuth.usePromptMfaAuth();
+    const { isStepUpRequired, promptStepUpAuth } = useStepUpAuthentication.useStepUpAuthentication();
     const { t } = reactI18next.useTranslation();
     const [isNativeToken, setIsNativeToken] = React.useState(false);
     const [currentToken, setCurrentToken] = React.useState(undefined);
@@ -238,11 +236,13 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
             : networkData.nativeCurrency.decimals, walletAddress: shortenWalletAddress.shortenWalletAddress(currentToken === null || currentToken === void 0 ? void 0 : currentToken.address), walletKey: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.key, onClickClose: onClickClose, displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, onSubmit: () => setStage('confirmation'), tokenBalances: tokenBalances !== null && tokenBalances !== void 0 ? tokenBalances : (currentToken && [currentToken]), currentToken: currentToken, setCurrentToken: setCurrentToken, isLoading: isLoading, isNativeToken: isNativeToken }));
     const buildTransactionStage = () => (jsxRuntime.jsx(TransactionConfirmationView.TransactionConfirmationView, { walletConnector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, transaction: transaction, mutation: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
             if (primaryWallet.connector.key === 'dynamicwaas') {
-                const isMfaRequired = yield isMfaRequiredForAction({
-                    mfaAction: sdkApiCore.MFAAction.WalletWaasSign,
+                const requiresStepUp = yield isStepUpRequired({
+                    scope: sdkApiCore.TokenScope.Walletsign,
                 });
-                if (isMfaRequired) {
-                    yield promptMfaAuth({ createMfaToken: true });
+                if (requiresStepUp) {
+                    yield promptStepUpAuth({
+                        requestedScopes: [sdkApiCore.TokenScope.Walletsign],
+                    });
                 }
             }
             walletUiUtils.disabledConfirmationOnce();

package/src/lib/views/SendBalanceView/SendBalanceView.js

@@ -3,7 +3,7 @@ import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ChainEnum, MFAAction } from '@dynamic-labs/sdk-api-core';
+import { ChainEnum, TokenScope } from '@dynamic-labs/sdk-api-core';
 import { DynamicError } from '@dynamic-labs/utils';
 import { isSendBalanceWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { ChainIcon } from '../../components/ChainIcon/ChainIcon.js';
@@ -85,6 +85,7 @@ import '../../utils/hooks/useGetMfaToken/useGetMfaToken.js';
 import '../../utils/hooks/useWalletBackup/useWalletBackup.js';
 import '../../utils/hooks/useWalletBackup/types.js';
 import '../../utils/hooks/useWalletBackup/cloudProviders.js';
+import { useStepUpAuthentication } from '../../utils/hooks/useStepUpAuthentication/useStepUpAuthentication.js';
 import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
@@ -110,9 +111,7 @@ import '../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.
 import { useNetworkDataFromWallet } from '../../utils/hooks/useNetworkDataFromWallet/useNetworkDataFromWallet.js';
 import { useTokenBalances } from '../../utils/hooks/useTokenBalances/useTokenBalances.js';
 import '../../store/state/multichainBalances.js';
-import { usePromptMfaAuth } from '../../utils/hooks/usePromptMfaAuth/usePromptMfaAuth.js';
 import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
-import { useIsMfaRequiredForAction } from '../../utils/hooks/useIsMfaRequiredForAction/useIsMfaRequiredForAction.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 
 const usingNative = (token) => Boolean(token.isNative);
@@ -144,8 +143,7 @@ const getSupportedChainName = (connectedChain) => {
 const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBack, onClickClose, onError, onSuccess, onDone, displayPoweredByDynamicFooter = false, }) => {
     const [stage, setStage] = useState('form');
     const { primaryWallet, walletUiUtils } = useInternalDynamicContext();
-    const isMfaRequiredForAction = useIsMfaRequiredForAction();
-    const promptMfaAuth = usePromptMfaAuth();
+    const { isStepUpRequired, promptStepUpAuth } = useStepUpAuthentication();
     const { t } = useTranslation();
     const [isNativeToken, setIsNativeToken] = useState(false);
     const [currentToken, setCurrentToken] = useState(undefined);
@@ -234,11 +232,13 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
             : networkData.nativeCurrency.decimals, walletAddress: shortenWalletAddress(currentToken === null || currentToken === void 0 ? void 0 : currentToken.address), walletKey: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.key, onClickClose: onClickClose, displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, onSubmit: () => setStage('confirmation'), tokenBalances: tokenBalances !== null && tokenBalances !== void 0 ? tokenBalances : (currentToken && [currentToken]), currentToken: currentToken, setCurrentToken: setCurrentToken, isLoading: isLoading, isNativeToken: isNativeToken }));
     const buildTransactionStage = () => (jsx(TransactionConfirmationView, { walletConnector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, transaction: transaction, mutation: () => __awaiter(void 0, void 0, void 0, function* () {
             if (primaryWallet.connector.key === 'dynamicwaas') {
-                const isMfaRequired = yield isMfaRequiredForAction({
-                    mfaAction: MFAAction.WalletWaasSign,
+                const requiresStepUp = yield isStepUpRequired({
+                    scope: TokenScope.Walletsign,
                 });
-                if (isMfaRequired) {
-                    yield promptMfaAuth({ createMfaToken: true });
+                if (requiresStepUp) {
+                    yield promptStepUpAuth({
+                        requestedScopes: [TokenScope.Walletsign],
+                    });
                 }
             }
             walletUiUtils.disabledConfirmationOnce();

package/src/lib/views/WalletList/data.d.ts

@@ -4,7 +4,7 @@ interface IChain {
     enabled: boolean;
     name: string;
 }
-export declare const getEnabledChains: (chains: IChain[]) => ("ALEO" | "STARK" | "STELLAR" | "TEMPO" | "ALGO" | "APTOS" | "ATOM" | "BTC" | "COSMOS" | "ECLIPSE" | "ETH" | "EVM" | "FLOW" | "SOL" | "SPARK" | "SUI" | "TRON" | "TON")[];
+export declare const getEnabledChains: (chains: IChain[]) => ("ALEO" | "STARK" | "STELLAR" | "TEMPO" | "ALGO" | "APTOS" | "ATOM" | "BTC" | "COSMOS" | "ECLIPSE" | "ETH" | "EVM" | "FLOW" | "MIDNIGHT" | "SOL" | "SPARK" | "SUI" | "TRON" | "TON")[];
 type BaseGetSupportedWalletOpts = Omit<GetSupportedWalletsOpts, 'walletConnectProjectId' | 'chainRpcProviders'>;
 export declare const getWallets: (props: {
     getSupportedWalletOpts: BaseGetSupportedWalletOpts;

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/ActiveWalletBalance.cjs

@@ -120,7 +120,7 @@ var TokenBalanceList = require('./TokenBalanceList/TokenBalanceList.cjs');
 
 /** Component to display token balances for the primary wallet */
 const ActiveWalletBalance = ({ isLoading = false, }) => {
-    var _a;
+    var _a, _b, _c;
     const { t } = reactI18next.useTranslation();
     /** Controls for the multi asset balance accordion */
     const [balanceIsExpanded, setBalanceIsExpanded] = React.useState(false);
@@ -132,14 +132,13 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
     const successTimeoutRef = React.useRef(null);
     const refreshTimeoutRef = React.useRef(null);
     const { primaryWallet, network, showFiat, multiAsset } = useInternalDynamicContext.useInternalDynamicContext();
-    // Tempo has no native token, so always need fiat values to show aggregated token balance
-    const isTempo = (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.connectedChain) === 'TEMPO';
+    const hasNativeToken = (_b = (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.hasNativeToken) !== null && _b !== void 0 ? _b : true;
     const authMode$1 = authMode.useAuthMode();
     const projectSettings = useProjectSettings.useProjectSettings();
     const { data: testnet } = usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () { return Boolean(yield (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isTestnet())); }), { deps: [network], initialData: false });
     const { isLoading: isLoadingTokenBalances, tokenBalances, error: errorTokenBalances, fetchAccountBalances, } = useTokenBalances.useTokenBalances({
         chainName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.connectedChain,
-        includeFiat: showFiat || isTempo,
+        includeFiat: showFiat || !hasNativeToken,
         includeNativeBalance: true,
     });
     const filteredTokenBalances = React.useMemo(() => (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.filter((token) => token.name)) || [], [tokenBalances]);
@@ -152,7 +151,7 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
             multiAsset;
     }, [
         authMode$1,
-        (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _a === void 0 ? void 0 : _a.connectOnlyMultiAsset,
+        (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _c === void 0 ? void 0 : _c.connectOnlyMultiAsset,
         multiAsset,
     ]);
     const isTooManyRequests = errorTokenBalances === 'Too many requests fetching balances';
@@ -202,8 +201,8 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
         if (!primaryWallet || isLoadingTokenBalances || isLoading) {
             return jsxRuntime.jsx(Skeleton.Skeleton, { className: 'balance-container__skeleton' });
         }
-        // Tempo has no native token - always show aggregated token values
-        if (isTempo) {
+        // Chain has no native token - show aggregated fiat token values
+        if (!hasNativeToken) {
             return (jsxRuntime.jsx(Typography.Typography, { variant: 'numbers_display', color: 'primary', children: totalValue === 0 || totalValue >= 0.01
                     ? currencyFormatter.format(parseFloat(totalValue.toFixed(2)))
                     : '<$0.01' }));

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/ActiveWalletBalance.js

@@ -116,7 +116,7 @@ import { TokenBalanceList } from './TokenBalanceList/TokenBalanceList.js';
 
 /** Component to display token balances for the primary wallet */
 const ActiveWalletBalance = ({ isLoading = false, }) => {
-    var _a;
+    var _a, _b, _c;
     const { t } = useTranslation();
     /** Controls for the multi asset balance accordion */
     const [balanceIsExpanded, setBalanceIsExpanded] = useState(false);
@@ -128,14 +128,13 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
     const successTimeoutRef = useRef(null);
     const refreshTimeoutRef = useRef(null);
     const { primaryWallet, network, showFiat, multiAsset } = useInternalDynamicContext();
-    // Tempo has no native token, so always need fiat values to show aggregated token balance
-    const isTempo = (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.connectedChain) === 'TEMPO';
+    const hasNativeToken = (_b = (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.hasNativeToken) !== null && _b !== void 0 ? _b : true;
     const authMode = useAuthMode();
     const projectSettings = useProjectSettings();
     const { data: testnet } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () { return Boolean(yield (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isTestnet())); }), { deps: [network], initialData: false });
     const { isLoading: isLoadingTokenBalances, tokenBalances, error: errorTokenBalances, fetchAccountBalances, } = useTokenBalances({
         chainName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.connectedChain,
-        includeFiat: showFiat || isTempo,
+        includeFiat: showFiat || !hasNativeToken,
         includeNativeBalance: true,
     });
     const filteredTokenBalances = useMemo(() => (tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.filter((token) => token.name)) || [], [tokenBalances]);
@@ -148,7 +147,7 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
             multiAsset;
     }, [
         authMode,
-        (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _a === void 0 ? void 0 : _a.connectOnlyMultiAsset,
+        (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.featureFlags) === null || _c === void 0 ? void 0 : _c.connectOnlyMultiAsset,
         multiAsset,
     ]);
     const isTooManyRequests = errorTokenBalances === 'Too many requests fetching balances';
@@ -198,8 +197,8 @@ const ActiveWalletBalance = ({ isLoading = false, }) => {
         if (!primaryWallet || isLoadingTokenBalances || isLoading) {
             return jsx(Skeleton, { className: 'balance-container__skeleton' });
         }
-        // Tempo has no native token - always show aggregated token values
-        if (isTempo) {
+        // Chain has no native token - show aggregated fiat token values
+        if (!hasNativeToken) {
             return (jsx(Typography, { variant: 'numbers_display', color: 'primary', children: totalValue === 0 || totalValue >= 0.01
                     ? currencyFormatter.format(parseFloat(totalValue.toFixed(2)))
                     : '<$0.01' }));