@dynamic-labs/sdk-react-core 4.66.0 → 4.67.0

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

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useState, useRef, useCallback } from 'react';
-import { verifyOTP, sendEmailOTP, supportedCountries, sendSmsOTP } from '@dynamic-labs-sdk/client';
+import { verifyOTP, authenticatePasskeyMFA, authenticateTotpMfaDevice, sendEmailOTP, supportedCountries, sendSmsOTP } from '@dynamic-labs-sdk/client';
 import { JwtVerifiedCredentialFormatEnum } from '@dynamic-labs/sdk-api-core';
 import '@dynamic-labs-sdk/client/core';
 import '../../../client/client.js';
@@ -20,12 +20,13 @@ import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../../store/state/nonce/nonce.js';
 import '@dynamic-labs/locale';
-import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import { useEnvironmentId } from '../../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../../store/state/primaryWalletId/primaryWalletId.js';
 import '../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
 import '../../functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.js';
 import '../../../events/dynamicEvents.js';
 import { useUser } from '../../../client/extension/user/useUser/useUser.js';
+import { hasElevatedAccessToken } from '../../../client/extension/functions/hasElevatedAccessToken/hasElevatedAccessToken.js';
 import { useConnectAndSign } from '../authenticationHooks/useConnectAndSign/useConnectAndSign.js';
 import { useInternalUserWallets } from '../../../context/UserWalletsContext/UserWalletsContext.js';
 
@@ -68,47 +69,55 @@ const dispatchOtp = (credential) => __awaiter(void 0, void 0, void 0, function*
         : sendSmsOtp(credential);
 });
 /**
- * Perform step-up authentication for an already-authenticated user via OTP.
+ * Perform step-up authentication for an already-authenticated user.
  *
- * Automatically selects the first sign-in enabled email or SMS credential on
- * the user, or targets a specific credential when `credentialId` is provided.
+ * Supports multiple verification methods:
+ * - **OTP** (email/SMS): `sendOtp()` then `verifyOtp()`
+ * - **Wallet**: `verifyWallet()` for wallet signature verification
+ * - **Passkey MFA**: `verifyPasskeyMfa()` for passkey-based MFA
+ * - **TOTP MFA**: `verifyTotpMfa()` for authenticator app codes
  *
- * @param params.credentialId - Optional id of a specific verified credential to
- *   use. Must be an email or SMS credential. Defaults to the first sign-in
- *   enabled email or SMS credential on the authenticated user.
+ * For OTP and wallet methods, automatically selects the first sign-in enabled
+ * credential, or targets a specific one when `credentialId` is provided.
  *
- * @returns `sendOtp` – sends the OTP to the resolved credential.
- * @returns `verifyOtp` – verifies the OTP code supplied by the user.
- * @returns `state` – current loading / error / otpVerification state.
- * @returns `resetState` – resets state back to its initial value.
+ * @param params.credentialId - Optional id of a specific verified credential or
+ *   wallet to use. For OTP, must be an email or SMS credential. Defaults to the
+ *   first sign-in enabled email or SMS credential on the authenticated user.
  *
  * @example
  * ```tsx
- * const { sendOtp, verifyOtp, state } = useStepUpAuthentication();
- *
- * // Step 1: send OTP
+ * // OTP flow
+ * const { sendOtp, verifyOtp } = useStepUpAuthentication();
  * await sendOtp();
+ * const result = await verifyOtp({ verificationToken: '123456', requestedScopes: ['wallet:export'] });
+ *
+ * // Passkey MFA flow
+ * const { verifyPasskeyMfa } = useStepUpAuthentication();
+ * const result = await verifyPasskeyMfa({ requestedScopes: ['wallet:export'] });
  *
- * // Step 2: after the user enters the code
- * const result = await verifyOtp({ verificationToken: '123456' });
+ * // TOTP MFA flow
+ * const { verifyTotpMfa } = useStepUpAuthentication();
+ * const result = await verifyTotpMfa({ code: '123456', requestedScopes: ['wallet:export'] });
  * ```
  */
 const useStepUpAuthentication = ({ credentialId, } = {}) => {
     const user = useUser();
+    const environmentId = useEnvironmentId();
     const [state, setState] = useState(INITIAL_STATE);
     const connectAndSign = useConnectAndSign();
     const { userWallets } = useInternalUserWallets();
     // Ref keeps the latest otpVerification available inside the verifyOtp
     // callback without creating a stale closure over state.
     const otpVerificationRef = useRef(null);
+    const isStepUpRequired = useCallback(({ scope }) => !hasElevatedAccessToken(scope), []);
     const resetState = useCallback(() => {
         otpVerificationRef.current = null;
         setState(INITIAL_STATE);
     }, []);
     const setError = useCallback((errorMessage) => {
         setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
-        logger.error(errorMessage);
-    }, []);
+        logger.error(errorMessage, { environmentId, userId: user === null || user === void 0 ? void 0 : user.id });
+    }, [environmentId, user === null || user === void 0 ? void 0 : user.id]);
     const sendOtp = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         const credentials = user === null || user === void 0 ? void 0 : user.verifiedCredentials;
         if (!(credentials === null || credentials === void 0 ? void 0 : credentials.length)) {
@@ -134,10 +143,20 @@ const useStepUpAuthentication = ({ credentialId, } = {}) => {
         catch (error) {
             const errorMessage = error instanceof Error ? error.message : 'Failed to send OTP';
             setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
-            logger.error('Failed to send OTP for step-up authentication', { error });
+            logger.error('Failed to send OTP for step-up authentication', {
+                environmentId,
+                error,
+                userId: user === null || user === void 0 ? void 0 : user.id,
+            });
             return null;
         }
-    }), [credentialId, setError, user === null || user === void 0 ? void 0 : user.verifiedCredentials]);
+    }), [
+        credentialId,
+        environmentId,
+        setError,
+        user === null || user === void 0 ? void 0 : user.id,
+        user === null || user === void 0 ? void 0 : user.verifiedCredentials,
+    ]);
     const verifyOtp = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ requestedScopes, verificationToken, }) {
         const otpVerification = otpVerificationRef.current;
         if (!otpVerification) {
@@ -158,11 +177,13 @@ const useStepUpAuthentication = ({ credentialId, } = {}) => {
             const errorMessage = error instanceof Error ? error.message : 'Failed to verify OTP';
             setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
             logger.error('Failed to verify OTP for step-up authentication', {
+                environmentId,
                 error,
+                userId: user === null || user === void 0 ? void 0 : user.id,
             });
             return null;
         }
-    }), [setError]);
+    }), [environmentId, setError, user === null || user === void 0 ? void 0 : user.id]);
     const verifyWallet = useCallback((_b) => __awaiter(void 0, [_b], void 0, function* ({ requestedScopes }) {
         setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: true })));
         const wallet = userWallets.find((w) => w.id === credentialId);
@@ -183,11 +204,69 @@ const useStepUpAuthentication = ({ credentialId, } = {}) => {
                 : 'Failed to verify wallet for step-up authentication';
             setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
             logger.error('Failed to verify wallet for step-up authentication', {
+                environmentId,
                 error,
+                userId: user === null || user === void 0 ? void 0 : user.id,
+            });
+        }
+    }), [
+        connectAndSign,
+        credentialId,
+        environmentId,
+        setError,
+        user === null || user === void 0 ? void 0 : user.id,
+        userWallets,
+    ]);
+    const verifyPasskeyMfa = useCallback((_c) => __awaiter(void 0, [_c], void 0, function* ({ requestedScopes, }) {
+        setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: true })));
+        try {
+            // requestedScopes is available in @dynamic-labs-sdk/client >= 0.14.0
+            const response = yield authenticatePasskeyMFA({
+                requestedScopes,
             });
+            setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: false })));
+            return response;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : 'Failed to authenticate passkey for step-up authentication';
+            setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
+            logger.error('Failed to authenticate passkey for step-up authentication', { environmentId, error, userId: user === null || user === void 0 ? void 0 : user.id });
+            return null;
+        }
+    }), [environmentId, user === null || user === void 0 ? void 0 : user.id]);
+    const verifyTotpMfa = useCallback((_d) => __awaiter(void 0, [_d], void 0, function* ({ code, deviceId, requestedScopes, }) {
+        setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: true })));
+        try {
+            // requestedScopes is available in @dynamic-labs-sdk/client >= 0.14.0
+            const response = yield authenticateTotpMfaDevice({
+                code,
+                deviceId,
+                requestedScopes,
+            });
+            setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: false })));
+            return response;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : 'Failed to authenticate TOTP device for step-up authentication';
+            setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
+            logger.error('Failed to authenticate TOTP device for step-up authentication', { environmentId, error, userId: user === null || user === void 0 ? void 0 : user.id });
+            return null;
         }
-    }), [connectAndSign, credentialId, setError, userWallets]);
-    return { resetState, sendOtp, state, verifyOtp, verifyWallet };
+    }), [environmentId, user === null || user === void 0 ? void 0 : user.id]);
+    return {
+        isStepUpRequired,
+        resetState,
+        sendOtp,
+        state,
+        verifyOtp,
+        verifyPasskeyMfa,
+        verifyTotpMfa,
+        verifyWallet,
+    };
 };
 
 export { useStepUpAuthentication };

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

@@ -50,9 +50,10 @@ const useWalletConnectorNetwork = (walletConnector, { onChange } = { onChange: (
         },
     });
     useWalletConnectorEvent.useWalletConnectorEvent(walletConnector || undefined, 'chainChange', ({ chain }) => {
-        // STARK and STELLAR use string chainIds; others use numeric
+        // STARK, STELLAR and ALEO use string chainIds; others use numeric
         const useChainAsString = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STARK' ||
-            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STELLAR';
+            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STELLAR' ||
+            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'ALEO';
         const parsedChain = useChainAsString ? chain : parseInt(chain);
         setNetwork(parsedChain);
         onChange === null || onChange === void 0 ? void 0 : onChange(parsedChain);

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

@@ -46,9 +46,10 @@ const useWalletConnectorNetwork = (walletConnector, { onChange } = { onChange: (
         },
     });
     useWalletConnectorEvent(walletConnector || undefined, 'chainChange', ({ chain }) => {
-        // STARK and STELLAR use string chainIds; others use numeric
+        // STARK, STELLAR and ALEO use string chainIds; others use numeric
         const useChainAsString = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STARK' ||
-            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STELLAR';
+            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STELLAR' ||
+            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'ALEO';
         const parsedChain = useChainAsString ? chain : parseInt(chain);
         setNetwork(parsedChain);
         onChange === null || onChange === void 0 ? void 0 : onChange(parsedChain);

package/src/lib/views/CollectUserDataView/UserDataFields/UserPhoneField/UserPhoneField.cjs

@@ -114,18 +114,22 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 const UserPhoneField = ({ onChange, value: phone, onBlur, disabled, label, required, error, name, verify, }) => {
     const { selectedPhoneCountry } = FieldsStateContext.useFieldsState();
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const initialPhoneRef = React.useRef(phone);
+    const onChangeRef = React.useRef(onChange);
+    const nameRef = React.useRef(name);
+    onChangeRef.current = onChange;
+    nameRef.current = name;
     const handleUpdate = React.useCallback(({ country, phone: newPhone }) => {
         selectedPhoneCountry.current = country;
-        if (newPhone !== phone)
-            onChange({
-                target: { name, value: newPhone },
-            });
-    }, [onChange, phone, name, selectedPhoneCountry]);
+        onChangeRef.current({
+            target: { name: nameRef.current, value: newPhone },
+        });
+    }, [selectedPhoneCountry]);
     const countries = React.useMemo(() => {
         const enabledCountries = getSupportedCountriesForVerificationFromProjectSettings.getSupportedCountriesForVerificationFromProjectSettings(projectSettings);
         return getCustomCountries.getCustomCountries(verify ? getDefaultCountriesIfEmpty.getDefaultCountriesIfEmpty(enabledCountries) : undefined);
     }, [verify, projectSettings]);
-    return (jsxRuntime.jsx(PhoneNumberField.PhoneNumberField, { countries: countries, initialPhone: phone, disabled: disabled, onUpdate: handleUpdate, onBlur: onBlur, label: label, appendRight: !disabled && !required ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'user-phone-field__optional-label', children: "Optional" })) : undefined, error: error }));
+    return (jsxRuntime.jsx(PhoneNumberField.PhoneNumberField, { countries: countries, initialPhone: initialPhoneRef.current, disabled: disabled, onUpdate: handleUpdate, onBlur: onBlur, label: label, appendRight: !disabled && !required ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'user-phone-field__optional-label', children: "Optional" })) : undefined, error: error }));
 };
 
 exports.UserPhoneField = UserPhoneField;

package/src/lib/views/CollectUserDataView/UserDataFields/UserPhoneField/UserPhoneField.js

@@ -1,6 +1,6 @@
 'use client'
 import { jsx } from 'react/jsx-runtime';
-import { useCallback, useMemo } from 'react';
+import { useRef, useCallback, useMemo } from 'react';
 import '@dynamic-labs/utils';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import 'react-i18next';
@@ -110,18 +110,22 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 const UserPhoneField = ({ onChange, value: phone, onBlur, disabled, label, required, error, name, verify, }) => {
     const { selectedPhoneCountry } = useFieldsState();
     const { projectSettings } = useInternalDynamicContext();
+    const initialPhoneRef = useRef(phone);
+    const onChangeRef = useRef(onChange);
+    const nameRef = useRef(name);
+    onChangeRef.current = onChange;
+    nameRef.current = name;
     const handleUpdate = useCallback(({ country, phone: newPhone }) => {
         selectedPhoneCountry.current = country;
-        if (newPhone !== phone)
-            onChange({
-                target: { name, value: newPhone },
-            });
-    }, [onChange, phone, name, selectedPhoneCountry]);
+        onChangeRef.current({
+            target: { name: nameRef.current, value: newPhone },
+        });
+    }, [selectedPhoneCountry]);
     const countries = useMemo(() => {
         const enabledCountries = getSupportedCountriesForVerificationFromProjectSettings(projectSettings);
         return getCustomCountries(verify ? getDefaultCountriesIfEmpty(enabledCountries) : undefined);
     }, [verify, projectSettings]);
-    return (jsx(PhoneNumberField, { countries: countries, initialPhone: phone, disabled: disabled, onUpdate: handleUpdate, onBlur: onBlur, label: label, appendRight: !disabled && !required ? (jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'user-phone-field__optional-label', children: "Optional" })) : undefined, error: error }));
+    return (jsx(PhoneNumberField, { countries: countries, initialPhone: initialPhoneRef.current, disabled: disabled, onUpdate: handleUpdate, onBlur: onBlur, label: label, appendRight: !disabled && !required ? (jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'user-phone-field__optional-label', children: "Optional" })) : undefined, error: error }));
 };
 
 export { UserPhoneField };

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

@@ -128,6 +128,7 @@ const getTransactionValue = (transaction, isNativeToken) => {
 };
 const getSupportedChainName = (connectedChain) => {
     const supportedChains = {
+        ALEO: sdkApiCore.ChainEnum.Aleo,
         APTOS: sdkApiCore.ChainEnum.Aptos,
         BTC: sdkApiCore.ChainEnum.Btc,
         EVM: sdkApiCore.ChainEnum.Evm,

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

@@ -124,6 +124,7 @@ const getTransactionValue = (transaction, isNativeToken) => {
 };
 const getSupportedChainName = (connectedChain) => {
     const supportedChains = {
+        ALEO: ChainEnum.Aleo,
         APTOS: ChainEnum.Aptos,
         BTC: ChainEnum.Btc,
         EVM: ChainEnum.Evm,

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.cjs

@@ -151,6 +151,8 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         status: SimulationStatus.LOADING,
     });
     const [recipient, setRecipient] = React.useState(undefined);
+    // Pre-submit validation error (e.g., Stellar account activation requirements)
+    const [preSubmitValidationError, setPreSubmitValidationError] = React.useState(undefined);
     const isFetchingSimulationRef = React.useRef(false);
     const fetchSimulationResult = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _d, _e, _f, _g, _h, _j, _k;
@@ -278,6 +280,18 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         }
         fetchSimulationResult();
     }, [fetchSimulationResult, primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, simulationState.status]);
+    // Check destination account for chains that require it (e.g., Stellar)
+    React.useEffect(() => {
+        const checkDestination = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (transaction.checkDestinationAccount) {
+                yield transaction.checkDestinationAccount();
+                const error = (_a = transaction.getPreSubmitValidationError) === null || _a === void 0 ? void 0 : _a.call(transaction);
+                setPreSubmitValidationError(error);
+            }
+        });
+        checkDestination();
+    }, [transaction]);
     /**
      * Update transaction fee and trigger a react update
      * to reflect the new fee on the UI
@@ -348,6 +362,10 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
     const alert = React.useMemo(() => {
         if (errorMessage)
             return null;
+        // Check for pre-submit validation errors (e.g., Stellar account activation)
+        if (preSubmitValidationError) {
+            return (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'current-color', "data-testid": 'presubmit_error_content', children: preSubmitValidationError }) }));
+        }
         // Check for gas sponsorship errors
         if (utils.TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             return (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', copykey: 'dyn_send_transaction.error_message.gas_not_sponsored', children: t('dyn_send_transaction.error_message.gas_not_sponsored') }));
@@ -389,6 +407,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         transaction,
         isGasSponsored,
         hasInsufficientFunds,
+        preSubmitValidationError,
         t,
         currency === null || currency === void 0 ? void 0 : currency.symbol,
     ]);
@@ -413,7 +432,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
             alert,
             copykey,
             currentToken,
-            disableSendButton: isBalanceLoading,
+            disableSendButton: isBalanceLoading || Boolean(preSubmitValidationError),
             displayPoweredByDynamicFooter,
             error: errorMessage,
             fetchTransactionFee,
@@ -462,6 +481,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         simulationState.result,
         sendBalanceTransaction,
         fetchTransactionFee,
+        preSubmitValidationError,
     ]);
     return simulationState.status === SimulationStatus.LOADING ? null : (jsxRuntime.jsx(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, Object.assign({}, layoutProps)));
 };

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.js

@@ -143,6 +143,8 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         status: SimulationStatus.LOADING,
     });
     const [recipient, setRecipient] = useState(undefined);
+    // Pre-submit validation error (e.g., Stellar account activation requirements)
+    const [preSubmitValidationError, setPreSubmitValidationError] = useState(undefined);
     const isFetchingSimulationRef = useRef(false);
     const fetchSimulationResult = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _d, _e, _f, _g, _h, _j, _k;
@@ -270,6 +272,18 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         }
         fetchSimulationResult();
     }, [fetchSimulationResult, primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, simulationState.status]);
+    // Check destination account for chains that require it (e.g., Stellar)
+    useEffect(() => {
+        const checkDestination = () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (transaction.checkDestinationAccount) {
+                yield transaction.checkDestinationAccount();
+                const error = (_a = transaction.getPreSubmitValidationError) === null || _a === void 0 ? void 0 : _a.call(transaction);
+                setPreSubmitValidationError(error);
+            }
+        });
+        checkDestination();
+    }, [transaction]);
     /**
      * Update transaction fee and trigger a react update
      * to reflect the new fee on the UI
@@ -340,6 +354,10 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
     const alert = useMemo(() => {
         if (errorMessage)
             return null;
+        // Check for pre-submit validation errors (e.g., Stellar account activation)
+        if (preSubmitValidationError) {
+            return (jsx(Alert, { icon: 'error', variant: 'error', children: jsx(Typography, { variant: 'body_small', color: 'current-color', "data-testid": 'presubmit_error_content', children: preSubmitValidationError }) }));
+        }
         // Check for gas sponsorship errors
         if (TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             return (jsx(Alert, { icon: 'error', variant: 'error', copykey: 'dyn_send_transaction.error_message.gas_not_sponsored', children: t('dyn_send_transaction.error_message.gas_not_sponsored') }));
@@ -381,6 +399,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         transaction,
         isGasSponsored,
         hasInsufficientFunds,
+        preSubmitValidationError,
         t,
         currency === null || currency === void 0 ? void 0 : currency.symbol,
     ]);
@@ -405,7 +424,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
             alert,
             copykey,
             currentToken,
-            disableSendButton: isBalanceLoading,
+            disableSendButton: isBalanceLoading || Boolean(preSubmitValidationError),
             displayPoweredByDynamicFooter,
             error: errorMessage,
             fetchTransactionFee,
@@ -454,6 +473,7 @@ const TransactionConfirmationView = ({ transaction, onError, onSuccess, mutation
         simulationState.result,
         sendBalanceTransaction,
         fetchTransactionFee,
+        preSubmitValidationError,
     ]);
     return simulationState.status === SimulationStatus.LOADING ? null : (jsx(TransactionConfirmationPageLayout, Object.assign({}, layoutProps)));
 };

package/src/lib/views/WalletList/data.cjs

@@ -23,6 +23,7 @@ require('../../shared/consts/index.cjs');
  * getChainInfo differs from the one used in the wallet connectors
  */
 const chainInfoOverrides = {
+    aleo: 'ALEO',
     starknet: 'STARK',
     stellar: 'STELLAR',
 };

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

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

package/src/lib/views/WalletList/data.js

@@ -19,6 +19,7 @@ import '../../shared/consts/index.js';
  * getChainInfo differs from the one used in the wallet connectors
  */
 const chainInfoOverrides = {
+    aleo: 'ALEO',
     starknet: 'STARK',
     stellar: 'STELLAR',
 };