@dynamic-labs/sdk-react-core 4.70.0 → 4.71.0

package/CHANGELOG.md

@@ -1,4 +1,17 @@
 
+## [4.71.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.70.0...v4.71.0) (2026-03-24)
+
+
+### Features
+
+* add Tempo chain connector and core type definitions ([#10672](https://github.com/dynamic-labs/dynamic-auth/issues/10672)) ([0439c15](https://github.com/dynamic-labs/dynamic-auth/commit/0439c153238359083b9f226dcd2ebf6d83e26519))
+* add verifySocial method to demo site step-up auth methods ([#10721](https://github.com/dynamic-labs/dynamic-auth/issues/10721)) ([b9ef517](https://github.com/dynamic-labs/dynamic-auth/commit/b9ef5173df3e3ed08f718de49b036ea899dc1832))
+* **demo:** add Tempo chain support to demo app ([#10674](https://github.com/dynamic-labs/dynamic-auth/issues/10674)) ([a5918fc](https://github.com/dynamic-labs/dynamic-auth/commit/a5918fc2ab0821e7f025aa470573129f71de33cc))
+* repurpose verifyWithExternalJwt for elevated access token requests ([#10743](https://github.com/dynamic-labs/dynamic-auth/issues/10743)) ([d1abda0](https://github.com/dynamic-labs/dynamic-auth/commit/d1abda0111d68c78226d30bd0630e6e341dedad9))
+* **sdk:** add Tempo chain support to UI components ([#10673](https://github.com/dynamic-labs/dynamic-auth/issues/10673)) ([aec9fbb](https://github.com/dynamic-labs/dynamic-auth/commit/aec9fbb20754a2935bffe106e7e8715f46be3de7))
+* support multi-chain wallet creation in createWallet ([#10694](https://github.com/dynamic-labs/dynamic-auth/issues/10694)) ([0b6b57f](https://github.com/dynamic-labs/dynamic-auth/commit/0b6b57f4179c35d1f86d1c8c9c40f52cb307c849))
+* wire up elevatedAccessToken for sign, reshare, and refresh operations ([#10737](https://github.com/dynamic-labs/dynamic-auth/issues/10737)) ([f9d5c76](https://github.com/dynamic-labs/dynamic-auth/commit/f9d5c768037aff4f5d7994b6bc6c338621a6ee6b))
+
 ## [4.70.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.69.0...v4.70.0) (2026-03-23)
 
 

package/package.cjs

@@ -3,11 +3,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.70.0";
+var version = "4.71.0";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.909",
-	"@dynamic-labs-sdk/client": "0.17.4",
-	"@dynamic-labs-wallet/browser-wallet-client": "0.0.309",
+	"@dynamic-labs-sdk/client": "0.18.0",
+	"@dynamic-labs-wallet/browser-wallet-client": "0.0.314",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"@thumbmarkjs/thumbmarkjs": "0.16.0",
 	"country-list": "2.3.0",

package/package.js

@@ -1,9 +1,9 @@
 'use client'
-var version = "4.70.0";
+var version = "4.71.0";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.909",
-	"@dynamic-labs-sdk/client": "0.17.4",
-	"@dynamic-labs-wallet/browser-wallet-client": "0.0.309",
+	"@dynamic-labs-sdk/client": "0.18.0",
+	"@dynamic-labs-wallet/browser-wallet-client": "0.0.314",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"@thumbmarkjs/thumbmarkjs": "0.16.0",
 	"country-list": "2.3.0",

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.70.0",
+  "version": "4.71.0",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.909",
-    "@dynamic-labs-sdk/client": "0.17.4",
-    "@dynamic-labs-wallet/browser-wallet-client": "0.0.309",
+    "@dynamic-labs-sdk/client": "0.18.0",
+    "@dynamic-labs-wallet/browser-wallet-client": "0.0.314",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "@thumbmarkjs/thumbmarkjs": "0.16.0",
     "country-list": "2.3.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.70.0",
-    "@dynamic-labs/iconic": "4.70.0",
-    "@dynamic-labs/locale": "4.70.0",
-    "@dynamic-labs/logger": "4.70.0",
-    "@dynamic-labs/multi-wallet": "4.70.0",
-    "@dynamic-labs/rpc-providers": "4.70.0",
-    "@dynamic-labs/store": "4.70.0",
-    "@dynamic-labs/types": "4.70.0",
-    "@dynamic-labs/utils": "4.70.0",
-    "@dynamic-labs/wallet-book": "4.70.0",
-    "@dynamic-labs/wallet-connector-core": "4.70.0",
+    "@dynamic-labs/assert-package-version": "4.71.0",
+    "@dynamic-labs/iconic": "4.71.0",
+    "@dynamic-labs/locale": "4.71.0",
+    "@dynamic-labs/logger": "4.71.0",
+    "@dynamic-labs/multi-wallet": "4.71.0",
+    "@dynamic-labs/rpc-providers": "4.71.0",
+    "@dynamic-labs/store": "4.71.0",
+    "@dynamic-labs/types": "4.71.0",
+    "@dynamic-labs/utils": "4.71.0",
+    "@dynamic-labs/wallet-book": "4.71.0",
+    "@dynamic-labs/wallet-connector-core": "4.71.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-api-core").MFADevice>;
+}) => Promise<import("@dynamic-labs-sdk/client").MFADevice>;

package/src/lib/client/extension/hooks/useInitializeSdkClient/syncEvents/syncEvents.cjs

@@ -25,6 +25,18 @@ const syncEvents = (client$1) => {
             dynamicEvents.dynamicEvents.emit('logout');
         },
     }, client$1);
+    client.onEvent({
+        event: 'deviceRegistrationCompleted',
+        listener: () => {
+            dynamicEvents.dynamicEvents.emit('deviceRegistrationCompleted');
+        },
+    }, client$1);
+    client.onEvent({
+        event: 'deviceRegistrationCompletedInAnotherTab',
+        listener: () => {
+            dynamicEvents.dynamicEvents.emit('deviceRegistrationCompletedInAnotherTab');
+        },
+    }, client$1);
 };
 
 exports.syncEvents = syncEvents;

package/src/lib/client/extension/hooks/useInitializeSdkClient/syncEvents/syncEvents.js

@@ -21,6 +21,18 @@ const syncEvents = (client) => {
             dynamicEvents.emit('logout');
         },
     }, client);
+    onEvent({
+        event: 'deviceRegistrationCompleted',
+        listener: () => {
+            dynamicEvents.emit('deviceRegistrationCompleted');
+        },
+    }, client);
+    onEvent({
+        event: 'deviceRegistrationCompletedInAnotherTab',
+        listener: () => {
+            dynamicEvents.emit('deviceRegistrationCompletedInAnotherTab');
+        },
+    }, client);
 };
 
 export { syncEvents };

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

@@ -139,7 +139,9 @@ const getDisplayErrorMessage = (errors, t, field, decimals) => {
     }
     return '';
 };
-const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddress = () => true, validateAmount = () => true, currentToken, transaction, tokenBalances, setCurrentToken, isLoading, }) => {
+const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddress = () => true, validateAmount = () => true, currentToken, transaction, tokenBalances, setCurrentToken, isLoading, 
+// Tempo-specific props
+isTempo = false, feeTokenOptions, currentFeeToken, setCurrentFeeToken, }) => {
     const { t } = reactI18next.useTranslation();
     const { showFiat } = useInternalDynamicContext.useInternalDynamicContext();
     const floatingValueRef = React.useRef(null);
@@ -194,7 +196,18 @@ const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddre
                                     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,
-                                })] }) }), 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'] &&
+                                })] }) }), isTempo &&
+                        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'] &&
                             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,5 +16,9 @@ export type Props = {
     setCurrentToken: Dispatch<SetStateAction<TokenBalance | undefined>>;
     isLoading?: boolean;
     transaction: IUITransaction;
+    isTempo?: boolean;
+    feeTokenOptions?: TokenBalance[];
+    currentFeeToken?: TokenBalance;
+    setCurrentFeeToken?: Dispatch<SetStateAction<TokenBalance | undefined>>;
 };
 export declare const SendBalanceForm: FC<Props>;

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

@@ -135,7 +135,9 @@ const getDisplayErrorMessage = (errors, t, field, decimals) => {
     }
     return '';
 };
-const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddress = () => true, validateAmount = () => true, currentToken, transaction, tokenBalances, setCurrentToken, isLoading, }) => {
+const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddress = () => true, validateAmount = () => true, currentToken, transaction, tokenBalances, setCurrentToken, isLoading, 
+// Tempo-specific props
+isTempo = false, feeTokenOptions, currentFeeToken, setCurrentFeeToken, }) => {
     const { t } = useTranslation();
     const { showFiat } = useInternalDynamicContext();
     const floatingValueRef = useRef(null);
@@ -190,7 +192,18 @@ const SendBalanceForm = ({ initialValues, onSubmit, decimals = 18, validateAddre
                                     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,
-                                })] }) }), 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'] &&
+                                })] }) }), isTempo &&
+                        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'] &&
                             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;
+    var _a, _b;
     const { t } = reactI18next.useTranslation();
     const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext.useInternalDynamicContext();
     const networkInfo = useNetworkConfigurationsFromProjectSettings.useNetworkConfigurationsFromProjectSettings({
@@ -132,6 +132,21 @@ 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 [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)
+    React.useEffect(() => {
+        if (isTempo && tokenBalances && tokenBalances.length > 0) {
+            const currentTokenStillExists = currentFeeToken
+                ? tokenBalances.some((token) => token.address === currentFeeToken.address)
+                : false;
+            if (!currentFeeToken || !currentTokenStillExists) {
+                setCurrentFeeToken(tokenBalances[0]);
+            }
+        }
+    }, [isTempo, 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(), {
@@ -191,7 +206,9 @@ 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, 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, 
+                        // Tempo-specific props
+                        isTempo: isTempo, feeTokenOptions: isTempo ? tokenBalances : undefined, currentFeeToken: currentFeeToken, setCurrentFeeToken: setCurrentFeeToken, onSubmit: ({ amount, recipient }) => {
                             if (isNativeToken) {
                                 transaction.value = transaction.parse(amount);
                             }
@@ -202,10 +219,15 @@ 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)) {
+                                transaction.feeTokenAddress = currentFeeToken.address;
+                                transaction.feeTokenSymbol = currentFeeToken.symbol;
+                            }
                             onSubmit();
                         }, initialValues: {
                             amount: getAmount(),
-                            recipient: (_a = transaction.to) !== null && _a !== void 0 ? _a : '',
+                            recipient: (_b = transaction.to) !== null && _b !== void 0 ? _b : '',
                         }, 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

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../store/state/loadingAndLifecycle/loadingAndLifecycle.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;
+    var _a, _b;
     const { t } = useTranslation();
     const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext();
     const networkInfo = useNetworkConfigurationsFromProjectSettings({
@@ -128,6 +128,21 @@ 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 [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)
+    useEffect(() => {
+        if (isTempo && tokenBalances && tokenBalances.length > 0) {
+            const currentTokenStillExists = currentFeeToken
+                ? tokenBalances.some((token) => token.address === currentFeeToken.address)
+                : false;
+            if (!currentFeeToken || !currentTokenStillExists) {
+                setCurrentFeeToken(tokenBalances[0]);
+            }
+        }
+    }, [isTempo, 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(), {
@@ -187,7 +202,9 @@ 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, 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, 
+                        // Tempo-specific props
+                        isTempo: isTempo, feeTokenOptions: isTempo ? tokenBalances : undefined, currentFeeToken: currentFeeToken, setCurrentFeeToken: setCurrentFeeToken, onSubmit: ({ amount, recipient }) => {
                             if (isNativeToken) {
                                 transaction.value = transaction.parse(amount);
                             }
@@ -198,10 +215,15 @@ 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)) {
+                                transaction.feeTokenAddress = currentFeeToken.address;
+                                transaction.feeTokenSymbol = currentFeeToken.symbol;
+                            }
                             onSubmit();
                         }, initialValues: {
                             amount: getAmount(),
-                            recipient: (_a = transaction.to) !== null && _a !== void 0 ? _a : '',
+                            recipient: (_b = transaction.to) !== null && _b !== void 0 ? _b : '',
                         }, decimals: isNativeToken ? networkCurrencyDecimals : currentToken === null || currentToken === void 0 ? void 0 : currentToken.decimals, validateAddress: (value) => {
                             if (!value)
                                 return true;

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

@@ -78,6 +78,7 @@ 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');
 var sendBalances = require('../../../../store/state/sendBalances.cjs');
@@ -192,7 +193,9 @@ const TokensBalanceDropdown = ({ tokenBalances, currentToken, setCurrentToken, i
     if (isLoading) {
         return jsxRuntime.jsx(Skeleton.Skeleton, {});
     }
-    const tokenLogo = (token, size) => (token === null || token === void 0 ? void 0 : token.logoURI) ? (jsxRuntime.jsx("img", { src: token.logoURI, alt: token === null || token === void 0 ? void 0 : token.name, width: size, height: size })) : (jsxRuntime.jsx("div", { className: 'token-balance-item__skeleton-icon', "data-testid": 'token-balance-item__skeleton-icon' }));
+    const tokenLogo = (token, size) => (jsxRuntime.jsx(Image.Image, { src: token === null || token === void 0 ? void 0 : token.logoURI, alt: token === null || token === void 0 ? void 0 : token.name, className: 'token-balance-item__icon', dataTestId: 'token-balance-item-icon', fallback: 
+        // eslint-disable-next-line react/jsx-wrap-multilines
+        jsxRuntime.jsx("div", { className: 'token-balance-item__skeleton-icon', "data-testid": 'token-balance-item__skeleton-icon', style: { height: `${size}px`, width: `${size}px` } }) }));
     return (jsxRuntime.jsxs("div", { className: 'tokens-balance-dropdown', ref: anchorRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), "data-testid": 'tokens-balance-dropdown', children: [!isLoading && (jsxRuntime.jsxs("div", { className: 'tokens-balance-dropdown__selected', children: [tokenLogo(currentToken, '20'), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: currentToken === null || currentToken === void 0 ? void 0 : currentToken.name }), jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'small', className: classNames.classNames('evm-network-control__arrow-icon', {
                             'evm-network-control__arrow-icon--active': isDropdownOpen,
                         }), children: jsxRuntime.jsx(stroke.ReactComponent, {}) })] })), jsxRuntime.jsx(MenuList.MenuList, { className: 'tokens-balance-dropdown__menu_list', isOpen: isDropdownOpen, popperProps: {

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

@@ -74,6 +74,7 @@ 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 { setSendBalanceVariable } from '../../../../store/state/sendBalances.js';
@@ -188,7 +189,9 @@ const TokensBalanceDropdown = ({ tokenBalances, currentToken, setCurrentToken, i
     if (isLoading) {
         return jsx(Skeleton, {});
     }
-    const tokenLogo = (token, size) => (token === null || token === void 0 ? void 0 : token.logoURI) ? (jsx("img", { src: token.logoURI, alt: token === null || token === void 0 ? void 0 : token.name, width: size, height: size })) : (jsx("div", { className: 'token-balance-item__skeleton-icon', "data-testid": 'token-balance-item__skeleton-icon' }));
+    const tokenLogo = (token, size) => (jsx(Image, { src: token === null || token === void 0 ? void 0 : token.logoURI, alt: token === null || token === void 0 ? void 0 : token.name, className: 'token-balance-item__icon', dataTestId: 'token-balance-item-icon', fallback: 
+        // eslint-disable-next-line react/jsx-wrap-multilines
+        jsx("div", { className: 'token-balance-item__skeleton-icon', "data-testid": 'token-balance-item__skeleton-icon', style: { height: `${size}px`, width: `${size}px` } }) }));
     return (jsxs("div", { className: 'tokens-balance-dropdown', ref: anchorRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), "data-testid": 'tokens-balance-dropdown', children: [!isLoading && (jsxs("div", { className: 'tokens-balance-dropdown__selected', children: [tokenLogo(currentToken, '20'), jsx(Typography, { variant: 'body_normal', color: 'primary', children: currentToken === null || currentToken === void 0 ? void 0 : currentToken.name }), jsx(Icon, { color: 'text-primary', size: 'small', className: classNames('evm-network-control__arrow-icon', {
                             'evm-network-control__arrow-icon--active': isDropdownOpen,
                         }), children: jsx(SvgStroke, {}) })] })), jsx(MenuList, { className: 'tokens-balance-dropdown__menu_list', isOpen: isDropdownOpen, popperProps: {

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;
+    var _a, _b, _c;
     const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext.useInternalDynamicContext();
     const networkInfo = useNetworkConfigurationsFromProjectSettings.useNetworkConfigurationsFromProjectSettings({
         evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
@@ -136,15 +136,17 @@ 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 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 _c;
+        var _d;
         if (!isBitcoinTransaction || feePriority === newPriority) {
             return;
         }
         setFeePriority(newPriority);
-        yield ((_c = bitcoinTransaction.updateFeePriority) === null || _c === void 0 ? void 0 : _c.call(bitcoinTransaction, newPriority));
+        yield ((_d = bitcoinTransaction.updateFeePriority) === null || _d === void 0 ? void 0 : _d.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 ||
@@ -154,7 +156,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 && (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 || 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) ||
                                                 (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',
@@ -180,7 +182,9 @@ 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.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsxRuntime.jsx(Tooltip.Tooltip, { content: '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
+                                                    }, 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
+                                                ? `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'
                                             : `$${gasFiatValue}` })) : (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: [transaction.fee.gas
                                                 ? transaction.format(transaction.fee.gas, {

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;
+    var _a, _b, _c;
     const { primaryWallet, projectSettings, overrides } = useInternalDynamicContext();
     const networkInfo = useNetworkConfigurationsFromProjectSettings({
         evmNetworksOverrides: overrides === null || overrides === void 0 ? void 0 : overrides.evmNetworks,
@@ -132,15 +132,17 @@ 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 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 _c;
+        var _d;
         if (!isBitcoinTransaction || feePriority === newPriority) {
             return;
         }
         setFeePriority(newPriority);
-        yield ((_c = bitcoinTransaction.updateFeePriority) === null || _c === void 0 ? void 0 : _c.call(bitcoinTransaction, newPriority));
+        yield ((_d = bitcoinTransaction.updateFeePriority) === null || _d === void 0 ? void 0 : _d.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 ||
@@ -150,7 +152,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 && (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 || 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) ||
                                                 (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',
@@ -176,7 +178,9 @@ 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: [jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_send_transaction.confirmation.data.gas_estimate', children: t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsx(Tooltip, { content: '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
+                                                    }, 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
+                                                ? `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'
                                             : `$${gasFiatValue}` })) : (jsxs(Typography, { variant: 'body_normal', color: 'primary', "data-testid": 'transaction-estimated-gas-fee', children: [transaction.fee.gas
                                                 ? transaction.format(transaction.fee.gas, {

package/src/lib/events/deviceRegistration.d.ts

@@ -0,0 +1,4 @@
+export type DeviceRegistrationEvents = {
+    deviceRegistrationCompleted: () => void;
+    deviceRegistrationCompletedInAnotherTab: () => void;
+};

package/src/lib/events/dynamicEvents.cjs

@@ -34,6 +34,8 @@ const externalEvents = [
     'embeddedWalletRevealCompleted',
     'embeddedWalletRevealFailed',
     'walletReturnFromDeepLink',
+    'deviceRegistrationCompleted',
+    'deviceRegistrationCompletedInAnotherTab',
 ];
 // Full internal event emitter
 const dynamicEvents = new EventEmitter__default["default"]();

package/src/lib/events/dynamicEvents.d.ts

@@ -1,5 +1,6 @@
 import EventEmitter from 'eventemitter3';
 import { AuthEvents } from './auth';
+import { DeviceRegistrationEvents } from './deviceRegistration';
 import { EmbeddedWalletEvents } from './embeddedWallet';
 import { FundingEvents } from './funding';
 import { MultiWalletInternalEvents } from './multiWallet';
@@ -11,10 +12,10 @@ import { UIEvents } from './ui';
 import { UserEvents } from './user';
 import { WalletEvents } from './wallets';
 /** Maps internal event names to their listeners */
-export type DynamicEvents = AuthEvents & UIEvents & OTPEvents & WalletEvents & PasskeyEvents & SocialEvents & EmbeddedWalletEvents & MultiWalletInternalEvents & TokenBalancesEvents & UserEvents & FundingEvents;
+export type DynamicEvents = AuthEvents & DeviceRegistrationEvents & UIEvents & OTPEvents & WalletEvents & PasskeyEvents & SocialEvents & EmbeddedWalletEvents & MultiWalletInternalEvents & TokenBalancesEvents & UserEvents & FundingEvents;
 type PublicDynamicEvents = Pick<DynamicEvents, typeof externalEvents[number]>;
 /** Which events are accessible by our clients */
-export declare const externalEvents: ("authFailure" | "authInit" | "logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "authFlowOpen" | "authFlowClose" | "authFlowCancelled" | "walletTabSelected" | "emailVerificationResult" | "smsVerificationResult" | "walletAdded" | "walletRemoved" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "userWalletsChanged" | "walletConnectionFailed" | "walletConnectionQrCodeReady" | "walletReturnFromDeepLink" | "embeddedWalletCreated" | "embeddedWalletRevealCompleted" | "embeddedWalletRevealFailed" | "walletConnectedForFunding")[];
+export declare const externalEvents: ("authFailure" | "authInit" | "logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "deviceRegistrationCompleted" | "deviceRegistrationCompletedInAnotherTab" | "authFlowOpen" | "authFlowClose" | "authFlowCancelled" | "walletTabSelected" | "emailVerificationResult" | "smsVerificationResult" | "walletAdded" | "walletRemoved" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "userWalletsChanged" | "walletConnectionFailed" | "walletConnectionQrCodeReady" | "walletReturnFromDeepLink" | "embeddedWalletCreated" | "embeddedWalletRevealCompleted" | "embeddedWalletRevealFailed" | "walletConnectedForFunding")[];
 export declare const dynamicEvents: EventEmitter<DynamicEvents, any>;
 export declare const publicDynamicEvents: EventEmitter<PublicDynamicEvents, any>;
 export type DynamicEventEmitter = typeof dynamicEvents;

package/src/lib/events/dynamicEvents.js

@@ -26,6 +26,8 @@ const externalEvents = [
     'embeddedWalletRevealCompleted',
     'embeddedWalletRevealFailed',
     'walletReturnFromDeepLink',
+    'deviceRegistrationCompleted',
+    'deviceRegistrationCompletedInAnotherTab',
 ];
 // Full internal event emitter
 const dynamicEvents = new EventEmitter();

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

@@ -24,6 +24,7 @@ const chainIconMap = {
     starknet: iconic.StarknetIcon,
     stellar: iconic.StellarIcon,
     sui: iconic.SuiIcon,
+    tempo: iconic.TempoIcon,
     ton: iconic.TonIcon,
     tron: iconic.TronIcon,
 };