@dynamic-labs/sdk-react-core 4.5.0 → 4.5.1

package/src/lib/widgets/DynamicWidget/views/ChooseWalletFundingMethod/useFundingMethods/useFundingMethods.cjs

@@ -124,9 +124,14 @@ const useFundingMethods = () => {
     const onrampOptions = React.useMemo(() => enabledOnrampProviders.filter(({ isPaymentMethod }) => !isPaymentMethod), [enabledOnrampProviders]);
     const paymentMethods = React.useMemo(() => enabledOnrampProviders.filter(({ isPaymentMethod }) => isPaymentMethod), [enabledOnrampProviders]);
     const handleQrClick = React.useCallback(() => setDynamicWidgetView('deposit-view'), [setDynamicWidgetView]);
-    const handleBuyCryptoClick = React.useCallback(() => onrampOptions.length > 1
-        ? setDynamicWidgetView('choose-onramp-provider')
-        : onrampOptions[0].onClick(), [onrampOptions, setDynamicWidgetView]);
+    const handleBuyCryptoClick = React.useCallback(() => {
+        if (!primaryWallet) {
+            return;
+        }
+        onrampOptions.length > 1
+            ? setDynamicWidgetView('choose-onramp-provider')
+            : onrampOptions[0].onClick({ wallet: primaryWallet });
+    }, [onrampOptions, setDynamicWidgetView, primaryWallet]);
     const previewWalletIcons = React.useMemo(() => {
         if (!externalWalletFundingEnabled)
             return [];
@@ -150,15 +155,17 @@ const useFundingMethods = () => {
                 showChevron: true,
             },
         ];
-        paymentMethods.forEach(({ id, iconUrl, displayName, onClick }) => {
-            methods.push({
-                icon: jsxRuntime.jsx("img", { src: iconUrl, alt: displayName }),
-                key: id,
-                label: displayName,
-                onClick,
-                showChevron: false,
+        if (primaryWallet) {
+            paymentMethods.forEach(({ id, iconUrl, displayName, onClick }) => {
+                methods.push({
+                    icon: jsxRuntime.jsx("img", { src: iconUrl, alt: displayName }),
+                    key: id,
+                    label: displayName,
+                    onClick: () => onClick({ wallet: primaryWallet }),
+                    showChevron: false,
+                });
             });
-        });
+        }
         if (onrampOptions.length) {
             methods.push({
                 icon: jsxRuntime.jsx(globe.ReactComponent, {}),
@@ -190,6 +197,7 @@ const useFundingMethods = () => {
         externalWalletFundingEnabled,
         startExternalWalletFunding,
         previewWalletIcons,
+        primaryWallet,
     ]);
 };
 

package/src/lib/widgets/DynamicWidget/views/ChooseWalletFundingMethod/useFundingMethods/useFundingMethods.js

@@ -120,9 +120,14 @@ const useFundingMethods = () => {
     const onrampOptions = useMemo(() => enabledOnrampProviders.filter(({ isPaymentMethod }) => !isPaymentMethod), [enabledOnrampProviders]);
     const paymentMethods = useMemo(() => enabledOnrampProviders.filter(({ isPaymentMethod }) => isPaymentMethod), [enabledOnrampProviders]);
     const handleQrClick = useCallback(() => setDynamicWidgetView('deposit-view'), [setDynamicWidgetView]);
-    const handleBuyCryptoClick = useCallback(() => onrampOptions.length > 1
-        ? setDynamicWidgetView('choose-onramp-provider')
-        : onrampOptions[0].onClick(), [onrampOptions, setDynamicWidgetView]);
+    const handleBuyCryptoClick = useCallback(() => {
+        if (!primaryWallet) {
+            return;
+        }
+        onrampOptions.length > 1
+            ? setDynamicWidgetView('choose-onramp-provider')
+            : onrampOptions[0].onClick({ wallet: primaryWallet });
+    }, [onrampOptions, setDynamicWidgetView, primaryWallet]);
     const previewWalletIcons = useMemo(() => {
         if (!externalWalletFundingEnabled)
             return [];
@@ -146,15 +151,17 @@ const useFundingMethods = () => {
                 showChevron: true,
             },
         ];
-        paymentMethods.forEach(({ id, iconUrl, displayName, onClick }) => {
-            methods.push({
-                icon: jsx("img", { src: iconUrl, alt: displayName }),
-                key: id,
-                label: displayName,
-                onClick,
-                showChevron: false,
+        if (primaryWallet) {
+            paymentMethods.forEach(({ id, iconUrl, displayName, onClick }) => {
+                methods.push({
+                    icon: jsx("img", { src: iconUrl, alt: displayName }),
+                    key: id,
+                    label: displayName,
+                    onClick: () => onClick({ wallet: primaryWallet }),
+                    showChevron: false,
+                });
             });
-        });
+        }
         if (onrampOptions.length) {
             methods.push({
                 icon: jsx(SvgGlobe, {}),
@@ -186,6 +193,7 @@ const useFundingMethods = () => {
         externalWalletFundingEnabled,
         startExternalWalletFunding,
         previewWalletIcons,
+        primaryWallet,
     ]);
 };
 

package/src/lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs

@@ -58,8 +58,6 @@ require('../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cj
 require('@dynamic-labs/rpc-providers');
 require('../../../../../store/state/loadingAndLifecycle.cjs');
 require('../../../../../store/state/walletOptions/walletOptions.cjs');
-var getPasskeyProviderFromUserAgent = require('../../../helpers/getPasskeyProviderFromUserAgent.cjs');
-var getTimeSince = require('../../../helpers/getTimeSince.cjs');
 var Typography = require('../../../../../components/Typography/Typography.cjs');
 require('../../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../../components/ShadowDOM/ShadowDOM.cjs');
@@ -70,6 +68,8 @@ require('../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCard
 require('../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
+var getPasskeyProviderFromUserAgent = require('../../../helpers/getPasskeyProviderFromUserAgent.cjs');
+var getTimeSince = require('../../../helpers/getTimeSince.cjs');
 require('../../../context/DynamicWidgetContext.cjs');
 require('formik');
 require('../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');

package/src/lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js

@@ -54,8 +54,6 @@ import '../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js'
 import '@dynamic-labs/rpc-providers';
 import '../../../../../store/state/loadingAndLifecycle.js';
 import '../../../../../store/state/walletOptions/walletOptions.js';
-import { getPasskeyProviderFromUserAgent } from '../../../helpers/getPasskeyProviderFromUserAgent.js';
-import { getTimeSince } from '../../../helpers/getTimeSince.js';
 import { Typography } from '../../../../../components/Typography/Typography.js';
 import '../../../../../context/FooterAnimationContext/index.js';
 import '../../../../../components/ShadowDOM/ShadowDOM.js';
@@ -66,6 +64,8 @@ import '../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardT
 import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
+import { getPasskeyProviderFromUserAgent } from '../../../helpers/getPasskeyProviderFromUserAgent.js';
+import { getTimeSince } from '../../../helpers/getTimeSince.js';
 import '../../../context/DynamicWidgetContext.js';
 import 'formik';
 import '../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/ReceiveExternalWalletFunds.cjs

@@ -123,7 +123,7 @@ const rulesThatHideQuickSuggestions = ['exact', 'minimum'];
 const rulesThatDisableTokenSelect = ['exact', 'exact-with-amount'];
 const inputEmitter = formattedInputEmitter.createFormattedInputEmitter();
 const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, externalWallet, quickSuggestions = defaultQuickSuggestions, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     // For now we hardcode the default value, soon we will fetch this from project settings
     const initialToken = initialTokenRaw !== null && initialTokenRaw !== void 0 ? initialTokenRaw : {
         rule: 'recommended',
@@ -208,10 +208,11 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
             },
             { amount: tokenAmount, symbol: tokenSymbol },
         ];
+    const secondaryDisplayHasFixedZeros = isFiatToken.isFiatToken(secondaryData.symbol) || secondaryData.symbol === 'USDC';
     const secondaryDisplay = formatValue.formatValue({
         symbol: secondaryData.symbol,
         value: secondaryData.amount,
-        withFixedZeros: isFiatToken.isFiatToken(secondaryData.symbol) || secondaryData.symbol === 'USDC',
+        withFixedZeros: secondaryDisplayHasFixedZeros,
     });
     const quickSuggestionsWithToken = Array.isArray(quickSuggestions)
         ? { token: 'USD', values: quickSuggestions }
@@ -251,6 +252,9 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
         inputEmitter.emit('focus');
     };
     const handleSubmit = useSubmitExternalWalletFunding.useSubmitExternalWalletFunding();
+    const grayOutSecondaryDisplay = !isNonZero.isNonZero(secondaryData.amount) ||
+        (secondaryDisplayHasFixedZeros &&
+            parseFloat((_f = secondaryData.amount) !== null && _f !== void 0 ? _f : '0') < 0.0099);
     const inputSymbolProp = primaryData.symbol === 'USD'
         ? { leading: '$' }
         : { trailing: primaryData.symbol };
@@ -265,17 +269,17 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
                                         value: minimum.value,
                                     }),
                                 }) })), primaryData.amount !== undefined && (jsxRuntime.jsx(FormattedInput.FormattedInput, Object.assign({ className: 'fund-from-wallet__content__amount-container__amount', value: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact'
-                                    ? (_f = formatValue.formatValue({
+                                    ? (_g = formatValue.formatValue({
                                         maxDecimals: 8,
                                         symbol: undefined,
                                         value: primaryData.amount,
                                         withFixedZeros: isFiatToken.isFiatToken(primaryData.symbol) ||
                                             primaryData.symbol === 'USDC',
-                                    })) !== null && _f !== void 0 ? _f : primaryData.amount
+                                    })) !== null && _g !== void 0 ? _g : primaryData.amount
                                     : primaryData.amount, onChange: primaryData.setAmount, emitter: inputEmitter, onInteraction: () => setHasUserInteracted(true), locked: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact' }, inputSymbolProp))), primaryData.amount === undefined && (jsxRuntime.jsx(Skeleton.Skeleton, { dataTestId: 'primary-amount-skeleton', container: {
                                     className: 'fund-from-wallet__content__amount-container__skeleton',
                                 } })), showQuickSuggestions && (jsxRuntime.jsx("div", { className: 'fund-from-wallet__content__amount-container__quick-suggestions', children: quickSuggestionsParsed.map(({ display, value }) => (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', onClick: () => handleQuickSuggestion(value), children: display }, value))) })), !showQuickSuggestions && secondaryDisplay && (jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-amount-container', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', className: classNames.classNames('fund-from-wallet__content__amount-container__secondary-amount-container__amount', {
-                                            'fund-from-wallet__content__amount-container__secondary-amount-container__amount--zero': !isNonZero.isNonZero(secondaryData.amount),
+                                            'fund-from-wallet__content__amount-container__secondary-amount-container__amount--grayed-out': grayOutSecondaryDisplay,
                                         }), children: secondaryDisplay }), jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', className: 'fund-from-wallet__content__amount-container__secondary-amount-container__switch', children: jsxRuntime.jsx(switchToggle.ReactComponent, { "data-testid": 'switch-primary-and-secondary', onClick: switchPrimaryAndSecondary }) })] })), !showQuickSuggestions && !secondaryDisplay && (jsxRuntime.jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-missing', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', children: formatValue.formatValue({
                                             symbol: secondaryData.symbol,
                                             value: consts.UNAVAILABLE_VALUE,

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/ReceiveExternalWalletFunds.js

@@ -119,7 +119,7 @@ const rulesThatHideQuickSuggestions = ['exact', 'minimum'];
 const rulesThatDisableTokenSelect = ['exact', 'exact-with-amount'];
 const inputEmitter = createFormattedInputEmitter();
 const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialTokenRaw, externalWallet, quickSuggestions = defaultQuickSuggestions, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     // For now we hardcode the default value, soon we will fetch this from project settings
     const initialToken = initialTokenRaw !== null && initialTokenRaw !== void 0 ? initialTokenRaw : {
         rule: 'recommended',
@@ -204,10 +204,11 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
             },
             { amount: tokenAmount, symbol: tokenSymbol },
         ];
+    const secondaryDisplayHasFixedZeros = isFiatToken(secondaryData.symbol) || secondaryData.symbol === 'USDC';
     const secondaryDisplay = formatValue({
         symbol: secondaryData.symbol,
         value: secondaryData.amount,
-        withFixedZeros: isFiatToken(secondaryData.symbol) || secondaryData.symbol === 'USDC',
+        withFixedZeros: secondaryDisplayHasFixedZeros,
     });
     const quickSuggestionsWithToken = Array.isArray(quickSuggestions)
         ? { token: 'USD', values: quickSuggestions }
@@ -247,6 +248,9 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
         inputEmitter.emit('focus');
     };
     const handleSubmit = useSubmitExternalWalletFunding();
+    const grayOutSecondaryDisplay = !isNonZero(secondaryData.amount) ||
+        (secondaryDisplayHasFixedZeros &&
+            parseFloat((_f = secondaryData.amount) !== null && _f !== void 0 ? _f : '0') < 0.0099);
     const inputSymbolProp = primaryData.symbol === 'USD'
         ? { leading: '$' }
         : { trailing: primaryData.symbol };
@@ -261,17 +265,17 @@ const ReceiveExternalWalletFunds = ({ amount: initialAmount, token: initialToken
                                         value: minimum.value,
                                     }),
                                 }) })), primaryData.amount !== undefined && (jsx(FormattedInput, Object.assign({ className: 'fund-from-wallet__content__amount-container__amount', value: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact'
-                                    ? (_f = formatValue({
+                                    ? (_g = formatValue({
                                         maxDecimals: 8,
                                         symbol: undefined,
                                         value: primaryData.amount,
                                         withFixedZeros: isFiatToken(primaryData.symbol) ||
                                             primaryData.symbol === 'USDC',
-                                    })) !== null && _f !== void 0 ? _f : primaryData.amount
+                                    })) !== null && _g !== void 0 ? _g : primaryData.amount
                                     : primaryData.amount, onChange: primaryData.setAmount, emitter: inputEmitter, onInteraction: () => setHasUserInteracted(true), locked: (initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.rule) === 'exact' }, inputSymbolProp))), primaryData.amount === undefined && (jsx(Skeleton, { dataTestId: 'primary-amount-skeleton', container: {
                                     className: 'fund-from-wallet__content__amount-container__skeleton',
                                 } })), showQuickSuggestions && (jsx("div", { className: 'fund-from-wallet__content__amount-container__quick-suggestions', children: quickSuggestionsParsed.map(({ display, value }) => (jsx(Typography, { variant: 'body_small', color: 'secondary', onClick: () => handleQuickSuggestion(value), children: display }, value))) })), !showQuickSuggestions && secondaryDisplay && (jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-amount-container', children: [jsx(Typography, { weight: 'medium', className: classNames('fund-from-wallet__content__amount-container__secondary-amount-container__amount', {
-                                            'fund-from-wallet__content__amount-container__secondary-amount-container__amount--zero': !isNonZero(secondaryData.amount),
+                                            'fund-from-wallet__content__amount-container__secondary-amount-container__amount--grayed-out': grayOutSecondaryDisplay,
                                         }), children: secondaryDisplay }), jsx(Icon, { size: 'small', color: 'text-secondary', className: 'fund-from-wallet__content__amount-container__secondary-amount-container__switch', children: jsx(SvgSwitchToggle, { "data-testid": 'switch-primary-and-secondary', onClick: switchPrimaryAndSecondary }) })] })), !showQuickSuggestions && !secondaryDisplay && (jsxs("div", { className: 'fund-from-wallet__content__amount-container__secondary-missing', children: [jsx(Typography, { weight: 'medium', children: formatValue({
                                             symbol: secondaryData.symbol,
                                             value: UNAVAILABLE_VALUE,

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/utils/formatValue/formatValue.cjs

@@ -32,6 +32,12 @@ const formatValue = ({ value, symbol, withFixedZeros = false, maxDecimals, }) =>
     if (value === undefined)
         return undefined;
     const parsed = value === '' ? 0 : parseFloat(value.toString());
+    if (parsed === 0)
+        return addSymbol(withFixedZeros ? '0.00' : '0', symbol);
+    // When value is inferior to 0.01 and withFixedZeros is true, we would return 0.00,
+    // so to avoid this misleading behavior, we return a less than 0.01 value
+    if (withFixedZeros && parsed < 0.0099)
+        return `< ${addSymbol('0.01', symbol)}`;
     const categorized = categorizeValue(parsed);
     const categorySymbol = typeof categorized === 'object' ? categorized.symbol : '';
     let formattedValue;

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/utils/formatValue/formatValue.js

@@ -28,6 +28,12 @@ const formatValue = ({ value, symbol, withFixedZeros = false, maxDecimals, }) =>
     if (value === undefined)
         return undefined;
     const parsed = value === '' ? 0 : parseFloat(value.toString());
+    if (parsed === 0)
+        return addSymbol(withFixedZeros ? '0.00' : '0', symbol);
+    // When value is inferior to 0.01 and withFixedZeros is true, we would return 0.00,
+    // so to avoid this misleading behavior, we return a less than 0.01 value
+    if (withFixedZeros && parsed < 0.0099)
+        return `< ${addSymbol('0.01', symbol)}`;
     const categorized = categorizeValue(parsed);
     const categorySymbol = typeof categorized === 'object' ? categorized.symbol : '';
     let formattedValue;

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/utils/useSubmitExternalWalletFunding/useSubmitExternalWalletFunding.cjs

@@ -4,14 +4,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var reactI18next = require('react-i18next');
+var Typography = require('../../../../../../components/Typography/Typography.cjs');
 var logger = require('../../../../../../shared/logger.cjs');
+var pixelToRem = require('../../../../../../utils/functions/pixelToRem/pixelToRem.cjs');
 var useFundWithWallet = require('../../../../../../utils/hooks/useFundWithWallet/useFundWithWallet.cjs');
 var DynamicWidgetContext = require('../../../../context/DynamicWidgetContext.cjs');
 
 const useSubmitExternalWalletFunding = () => {
     const { fund } = useFundWithWallet.useFundWithWallet();
     const { goToInitialDynamicWidgetView, setHeaderAlert } = DynamicWidgetContext.useWidgetContext();
+    const { t } = reactI18next.useTranslation();
     return React.useCallback((_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ tokenAmount, externalWallet, tokenSymbol, tokenBalances, }) {
         var _b;
         if (!tokenAmount)
@@ -29,16 +34,23 @@ const useSubmitExternalWalletFunding = () => {
                 token: token === 'native' ? undefined : token,
             });
             logger.logger.info(`Funding with external wallet succeeded with transaction id: ${txId}`);
+            const blockExplorerUrl = (yield externalWallet.connector.getBlockExplorerUrlsForCurrentNetwork())[0];
+            const TxnSuccessAlert = (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'current-color', children: [t('dyn_wallet_funding.success'), blockExplorerUrl && (jsxRuntime.jsx(Typography.Typography, { as: 'a', href: `${blockExplorerUrl}/tx/${txId}`, target: '_blank', rel: 'noreferrer', style: {
+                            marginLeft: pixelToRem.pixelToRem(4),
+                            textDecoration: 'underline',
+                            textDecorationThickness: pixelToRem.pixelToRem(1),
+                            textUnderlineOffset: pixelToRem.pixelToRem(2),
+                        }, weight: 'bold', color: 'current-color', children: t('dyn_wallet_funding.success_txn_link') }))] }));
             goToInitialDynamicWidgetView();
             setHeaderAlert({
-                copykey: 'dyn_wallet_funding.success',
+                content: TxnSuccessAlert,
                 variant: 'success',
             });
         }
         catch (error) {
             logger.logger.error('Failed to fund with external wallet', error);
         }
-    }), [fund, goToInitialDynamicWidgetView, setHeaderAlert]);
+    }), [fund, goToInitialDynamicWidgetView, setHeaderAlert, t]);
 };
 
 exports.useSubmitExternalWalletFunding = useSubmitExternalWalletFunding;

package/src/lib/widgets/DynamicWidget/views/ReceiveExternalWalletFunds/utils/useSubmitExternalWalletFunding/useSubmitExternalWalletFunding.js

@@ -1,13 +1,18 @@
 'use client'
 import { __awaiter } from '../../../../../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Typography } from '../../../../../../components/Typography/Typography.js';
 import { logger } from '../../../../../../shared/logger.js';
+import { pixelToRem } from '../../../../../../utils/functions/pixelToRem/pixelToRem.js';
 import { useFundWithWallet } from '../../../../../../utils/hooks/useFundWithWallet/useFundWithWallet.js';
 import { useWidgetContext } from '../../../../context/DynamicWidgetContext.js';
 
 const useSubmitExternalWalletFunding = () => {
     const { fund } = useFundWithWallet();
     const { goToInitialDynamicWidgetView, setHeaderAlert } = useWidgetContext();
+    const { t } = useTranslation();
     return useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ tokenAmount, externalWallet, tokenSymbol, tokenBalances, }) {
         var _b;
         if (!tokenAmount)
@@ -25,16 +30,23 @@ const useSubmitExternalWalletFunding = () => {
                 token: token === 'native' ? undefined : token,
             });
             logger.info(`Funding with external wallet succeeded with transaction id: ${txId}`);
+            const blockExplorerUrl = (yield externalWallet.connector.getBlockExplorerUrlsForCurrentNetwork())[0];
+            const TxnSuccessAlert = (jsxs(Typography, { variant: 'body_normal', color: 'current-color', children: [t('dyn_wallet_funding.success'), blockExplorerUrl && (jsx(Typography, { as: 'a', href: `${blockExplorerUrl}/tx/${txId}`, target: '_blank', rel: 'noreferrer', style: {
+                            marginLeft: pixelToRem(4),
+                            textDecoration: 'underline',
+                            textDecorationThickness: pixelToRem(1),
+                            textUnderlineOffset: pixelToRem(2),
+                        }, weight: 'bold', color: 'current-color', children: t('dyn_wallet_funding.success_txn_link') }))] }));
             goToInitialDynamicWidgetView();
             setHeaderAlert({
-                copykey: 'dyn_wallet_funding.success',
+                content: TxnSuccessAlert,
                 variant: 'success',
             });
         }
         catch (error) {
             logger.error('Failed to fund with external wallet', error);
         }
-    }), [fund, goToInitialDynamicWidgetView, setHeaderAlert]);
+    }), [fund, goToInitialDynamicWidgetView, setHeaderAlert, t]);
 };
 
 export { useSubmitExternalWalletFunding };

package/src/lib/widgets/DynamicWidget/views/SettingsView/SettingsView.cjs

@@ -18,7 +18,6 @@ require('@dynamic-labs/sdk-api-core');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 var add = require('../../../../shared/assets/add.cjs');
-var altKey = require('../../../../shared/assets/alt-key.cjs');
 var androidTouchId = require('../../../../shared/assets/android-touch-id.cjs');
 var checkCircle = require('../../../../shared/assets/check-circle.cjs');
 var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
@@ -62,7 +61,6 @@ require('bs58');
 require('@dynamic-labs/types');
 require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../context/LoadingContext/LoadingContext.cjs');
-var useEmbeddedWallet = require('../../../../utils/hooks/useEmbeddedWallet/useEmbeddedWallet.cjs');
 require('../../../../context/WalletContext/WalletContext.cjs');
 var useIsTurnkeyWallet = require('../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 require('../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
@@ -119,14 +117,13 @@ require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
 const SettingsView = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const { projectSettings, primaryWallet, user, handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
     const { globalWallet } = 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) !== null && _a !== void 0 ? _a : {};
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const { addEmbeddedWalletRecoveryEmail } = useEmbeddedWalletAuthenticator.useEmbeddedWalletAuthenticator();
-    const { createPassword } = useEmbeddedWallet.useEmbeddedWallet();
     const { initExportProcess } = useEmbeddedReveal.useEmbeddedReveal();
     const { isTurnkeyWallet, isTurnkeyWalletWithoutAuthenticator, hasRecoveryEmail, } = useIsTurnkeyWallet.useIsTurnkeyWallet();
     const { theme } = ThemeContext.useThemeContext();
@@ -134,12 +131,9 @@ const SettingsView = () => {
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery.usePasskeyRecovery();
     const [isLoading, setIsLoading] = React.useState(false);
     const { getEOAWallet } = useSmartWallets.useSmartWallets();
-    const cbWalletProperties = (_c = (_b = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _b === void 0 ? void 0 : _b.find(({ walletName }) => walletName === 'coinbasempc')) === null || _c === void 0 ? void 0 : _c.walletProperties;
-    const isCoinbaseWallet = walletConnectorCore.isCoinbaseMpcWalletConnector(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
-    const hasClaimedCoinbaseMPC = Boolean(cbWalletProperties === null || cbWalletProperties === void 0 ? void 0 : cbWalletProperties.claimed);
-    const turnkeyWalletProperties = (_e = (_d = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _d === void 0 ? void 0 : _d.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _e === void 0 ? void 0 : _e.walletProperties;
+    const turnkeyWalletProperties = (_c = (_b = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _b === void 0 ? void 0 : _b.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _c === void 0 ? void 0 : _c.walletProperties;
     const isTurnkeyHDWallet = turnkeyWalletProperties === null || turnkeyWalletProperties === void 0 ? void 0 : turnkeyWalletProperties.turnkeyHDWalletId;
-    const isPasskeyEnabled = Boolean((_j = (_h = (_g = (_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _f === void 0 ? void 0 : _f.embeddedWallets) === null || _g === void 0 ? void 0 : _g.supportedSecurityMethods) === null || _h === void 0 ? void 0 : _h.passkey) === null || _j === void 0 ? void 0 : _j.isEnabled);
+    const isPasskeyEnabled = Boolean((_g = (_f = (_e = (_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _d === void 0 ? void 0 : _d.embeddedWallets) === null || _e === void 0 ? void 0 : _e.supportedSecurityMethods) === null || _f === void 0 ? void 0 : _f.passkey) === null || _g === void 0 ? void 0 : _g.isEnabled);
     const isTurnkeyWalletWithAuthenticator = isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator;
     const eoaWallet = primaryWallet && getEOAWallet(primaryWallet);
     const wallet = eoaWallet !== null && eoaWallet !== void 0 ? eoaWallet : primaryWallet;
@@ -184,12 +178,10 @@ const SettingsView = () => {
             return jsxRuntime.jsx(spinner.Spinner, {});
         return jsxRuntime.jsx(add.ReactComponent, { "data-testid": 'email-add-icon' });
     };
-    const isEmbeddedWallet = Boolean(wallet &&
-        (((_l = (_k = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _k === void 0 ? void 0 : _k.key) === null || _l === void 0 ? void 0 : _l.startsWith('turnkey')) ||
-            ((_o = (_m = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _m === void 0 ? void 0 : _m.key) === null || _o === void 0 ? void 0 : _o.startsWith('coinbasempc'))));
-    const isMfaEnabled = Boolean((_q = (_p = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security) === null || _p === void 0 ? void 0 : _p.mfa) === null || _q === void 0 ? void 0 : _q.enabled);
+    const isEmbeddedWallet = Boolean(wallet && ((_j = (_h = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _h === void 0 ? void 0 : _h.key) === null || _j === void 0 ? void 0 : _j.startsWith('turnkey')));
+    const isMfaEnabled = Boolean((_l = (_k = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security) === null || _k === void 0 ? void 0 : _k.mfa) === null || _l === void 0 ? void 0 : _l.enabled);
     const shouldShowPasskeyMFA = isPasskeyEnabled && isTurnkeyWallet && !isSessionKeyCompatible;
-    const shouldShowSecuritySection = isMfaEnabled || isCoinbaseWallet || shouldShowPasskeyMFA;
+    const shouldShowSecuritySection = isMfaEnabled || shouldShowPasskeyMFA;
     return (jsxRuntime.jsxs("div", { className: 'settings-view', children: [jsxRuntime.jsxs("div", { className: 'settings-view__body', children: [jsxRuntime.jsxs("div", { className: 'settings-view__body__section', children: [jsxRuntime.jsx("div", { className: 'settings-view__body__section__title', children: t('dyn_settings.global_section.title') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'currency-button', buttonClassName: classNames.classNames('settings-view__body__section__button', 'settings-view__body__section__button__badge'), startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
                                 jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(currency.ReactComponent, { className: 'settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.global_section.currency.badge', children: t('dyn_settings.global_section.currency.title') }), jsxRuntime.jsx(Badge.Badge, { text: t('dyn_settings.global_section.currency.badge'), copykey: 'dyn_settings.global_section.currency.badge', variant: 'secondary' })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: true, showInternalLoading: false })] }), globalWallet && (jsxRuntime.jsxs("div", { className: 'settings-view__body__section', children: [jsxRuntime.jsx("div", { className: 'settings-view__body__section__title', children: t('dyn_settings.global_connectivity_section.title') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: () => handleConnectedAppsClick(), dataTestId: 'connected-apps-button', buttonClassName: 'settings-view__body__section__button', startSlot: 
@@ -202,9 +194,7 @@ const SettingsView = () => {
                                 // eslint-disable-next-line react/jsx-wrap-multilines
                                 jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(PasskeyDeviceIcon.PasskeyDeviceIcon, { className: 'settings-view__body__section__button__icon', defaultIcon: jsxRuntime.jsx(androidTouchId.ReactComponent, { "data-testid": 'default-icon' }) }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.passkey_button', children: t('dyn_settings.security_section.passkey_button') }), !isTurnkeyWalletWithAuthenticator && (jsxRuntime.jsx(Badge.Badge, { text: t('dyn_settings.tags.recommended'), copykey: 'dyn_settings.tags.recommended', variant: 'secondary' }))] }), endSlot: renderPasskeysButtonEndSlot(), disabled: isLoading, showInternalLoading: false })), isMfaEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'manage-mfa-button', onClick: () => setDynamicWidgetView('manage-mfa'), buttonClassName: 'settings-view__body__section__button', startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(shield.ReactComponent, { className: 'settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.mfa_button', children: t('dyn_settings.security_section.mfa_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false })), isCoinbaseWallet && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'manage-password-button', onClick: () => createPassword(!hasClaimedCoinbaseMPC), buttonClassName: 'settings-view__body__section__button', startSlot: 
-                                // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(altKey.ReactComponent, { className: 'settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.passkey_button', children: t('dyn_settings.security_section.password_button') })] }), endSlot: hasClaimedCoinbaseMPC ? (jsxRuntime.jsx(checkCircle.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--success' })) : undefined, showInternalLoading: false }))] })), isEmbeddedWallet && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isTurnkeyWallet &&
+                                jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(shield.ReactComponent, { className: 'settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.mfa_button', children: t('dyn_settings.security_section.mfa_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false }))] })), isEmbeddedWallet && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isTurnkeyWallet &&
                                 !hasRecoveryEmail &&
                                 !isSessionKeyCompatible && (jsxRuntime.jsxs("div", { className: 'settings-view__body__section', children: [jsxRuntime.jsxs("div", { className: classNames.classNames('settings-view__body__section__title', 'settings-view__body__section__title__info-icon'), children: [t('dyn_settings.identity_section.title'), jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(footerInfoIcon.ReactComponent, { className: 'settings-view__body__section__title__info-icon', "data-testid": 'email-info-icon-title' }) })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'manage-email-recovery-button', onClick: addEmbeddedWalletRecoveryEmail, buttonClassName: classNames.classNames('settings-view__body__section__button', 'settings-view__body__section__button__badge'), startSlot: 
                                         // eslint-disable-next-line react/jsx-wrap-multilines

package/src/lib/widgets/DynamicWidget/views/SettingsView/SettingsView.js

@@ -3,7 +3,7 @@ import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { isCoinbaseMpcWalletConnector, isSessionKeyCompatibleWallet } from '@dynamic-labs/wallet-connector-core';
+import { isSessionKeyCompatibleWallet } from '@dynamic-labs/wallet-connector-core';
 import { Badge } from '../../../../components/Badge/Badge.js';
 import { Icon } from '../../../../components/Icon/Icon.js';
 import { Spinner } from '../../../../components/Spinner/spinner.js';
@@ -14,7 +14,6 @@ import '@dynamic-labs/sdk-api-core';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import { ReactComponent as SvgAdd } from '../../../../shared/assets/add.js';
-import { ReactComponent as SvgAltKey } from '../../../../shared/assets/alt-key.js';
 import { ReactComponent as SvgAndroidTouchId } from '../../../../shared/assets/android-touch-id.js';
 import { ReactComponent as SvgCheckCircle } from '../../../../shared/assets/check-circle.js';
 import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
@@ -58,7 +57,6 @@ import 'bs58';
 import '@dynamic-labs/types';
 import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../context/LoadingContext/LoadingContext.js';
-import { useEmbeddedWallet } from '../../../../utils/hooks/useEmbeddedWallet/useEmbeddedWallet.js';
 import '../../../../context/WalletContext/WalletContext.js';
 import { useIsTurnkeyWallet } from '../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import '../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
@@ -115,14 +113,13 @@ import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const SettingsView = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const { projectSettings, primaryWallet, user, handleLogOut } = useInternalDynamicContext();
     const { globalWallet } = 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) !== null && _a !== void 0 ? _a : {};
     const { setDynamicWidgetView } = useWidgetContext();
     const { addEmbeddedWalletRecoveryEmail } = useEmbeddedWalletAuthenticator();
-    const { createPassword } = useEmbeddedWallet();
     const { initExportProcess } = useEmbeddedReveal();
     const { isTurnkeyWallet, isTurnkeyWalletWithoutAuthenticator, hasRecoveryEmail, } = useIsTurnkeyWallet();
     const { theme } = useThemeContext();
@@ -130,12 +127,9 @@ const SettingsView = () => {
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery();
     const [isLoading, setIsLoading] = useState(false);
     const { getEOAWallet } = useSmartWallets();
-    const cbWalletProperties = (_c = (_b = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _b === void 0 ? void 0 : _b.find(({ walletName }) => walletName === 'coinbasempc')) === null || _c === void 0 ? void 0 : _c.walletProperties;
-    const isCoinbaseWallet = isCoinbaseMpcWalletConnector(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
-    const hasClaimedCoinbaseMPC = Boolean(cbWalletProperties === null || cbWalletProperties === void 0 ? void 0 : cbWalletProperties.claimed);
-    const turnkeyWalletProperties = (_e = (_d = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _d === void 0 ? void 0 : _d.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _e === void 0 ? void 0 : _e.walletProperties;
+    const turnkeyWalletProperties = (_c = (_b = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _b === void 0 ? void 0 : _b.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _c === void 0 ? void 0 : _c.walletProperties;
     const isTurnkeyHDWallet = turnkeyWalletProperties === null || turnkeyWalletProperties === void 0 ? void 0 : turnkeyWalletProperties.turnkeyHDWalletId;
-    const isPasskeyEnabled = Boolean((_j = (_h = (_g = (_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _f === void 0 ? void 0 : _f.embeddedWallets) === null || _g === void 0 ? void 0 : _g.supportedSecurityMethods) === null || _h === void 0 ? void 0 : _h.passkey) === null || _j === void 0 ? void 0 : _j.isEnabled);
+    const isPasskeyEnabled = Boolean((_g = (_f = (_e = (_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _d === void 0 ? void 0 : _d.embeddedWallets) === null || _e === void 0 ? void 0 : _e.supportedSecurityMethods) === null || _f === void 0 ? void 0 : _f.passkey) === null || _g === void 0 ? void 0 : _g.isEnabled);
     const isTurnkeyWalletWithAuthenticator = isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator;
     const eoaWallet = primaryWallet && getEOAWallet(primaryWallet);
     const wallet = eoaWallet !== null && eoaWallet !== void 0 ? eoaWallet : primaryWallet;
@@ -180,12 +174,10 @@ const SettingsView = () => {
             return jsx(Spinner, {});
         return jsx(SvgAdd, { "data-testid": 'email-add-icon' });
     };
-    const isEmbeddedWallet = Boolean(wallet &&
-        (((_l = (_k = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _k === void 0 ? void 0 : _k.key) === null || _l === void 0 ? void 0 : _l.startsWith('turnkey')) ||
-            ((_o = (_m = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _m === void 0 ? void 0 : _m.key) === null || _o === void 0 ? void 0 : _o.startsWith('coinbasempc'))));
-    const isMfaEnabled = Boolean((_q = (_p = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security) === null || _p === void 0 ? void 0 : _p.mfa) === null || _q === void 0 ? void 0 : _q.enabled);
+    const isEmbeddedWallet = Boolean(wallet && ((_j = (_h = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _h === void 0 ? void 0 : _h.key) === null || _j === void 0 ? void 0 : _j.startsWith('turnkey')));
+    const isMfaEnabled = Boolean((_l = (_k = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security) === null || _k === void 0 ? void 0 : _k.mfa) === null || _l === void 0 ? void 0 : _l.enabled);
     const shouldShowPasskeyMFA = isPasskeyEnabled && isTurnkeyWallet && !isSessionKeyCompatible;
-    const shouldShowSecuritySection = isMfaEnabled || isCoinbaseWallet || shouldShowPasskeyMFA;
+    const shouldShowSecuritySection = isMfaEnabled || shouldShowPasskeyMFA;
     return (jsxs("div", { className: 'settings-view', children: [jsxs("div", { className: 'settings-view__body', children: [jsxs("div", { className: 'settings-view__body__section', children: [jsx("div", { className: 'settings-view__body__section__title', children: t('dyn_settings.global_section.title') }), jsx(TypographyButton, { dataTestId: 'currency-button', buttonClassName: classNames('settings-view__body__section__button', 'settings-view__body__section__button__badge'), startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
                                 jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgCurrency, { className: 'settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.global_section.currency.badge', children: t('dyn_settings.global_section.currency.title') }), jsx(Badge, { text: t('dyn_settings.global_section.currency.badge'), copykey: 'dyn_settings.global_section.currency.badge', variant: 'secondary' })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: true, showInternalLoading: false })] }), globalWallet && (jsxs("div", { className: 'settings-view__body__section', children: [jsx("div", { className: 'settings-view__body__section__title', children: t('dyn_settings.global_connectivity_section.title') }), jsx(TypographyButton, { onClick: () => handleConnectedAppsClick(), dataTestId: 'connected-apps-button', buttonClassName: 'settings-view__body__section__button', startSlot: 
@@ -198,9 +190,7 @@ const SettingsView = () => {
                                 // eslint-disable-next-line react/jsx-wrap-multilines
                                 jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(PasskeyDeviceIcon, { className: 'settings-view__body__section__button__icon', defaultIcon: jsx(SvgAndroidTouchId, { "data-testid": 'default-icon' }) }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.passkey_button', children: t('dyn_settings.security_section.passkey_button') }), !isTurnkeyWalletWithAuthenticator && (jsx(Badge, { text: t('dyn_settings.tags.recommended'), copykey: 'dyn_settings.tags.recommended', variant: 'secondary' }))] }), endSlot: renderPasskeysButtonEndSlot(), disabled: isLoading, showInternalLoading: false })), isMfaEnabled && (jsx(TypographyButton, { dataTestId: 'manage-mfa-button', onClick: () => setDynamicWidgetView('manage-mfa'), buttonClassName: 'settings-view__body__section__button', startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgShield, { className: 'settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.mfa_button', children: t('dyn_settings.security_section.mfa_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false })), isCoinbaseWallet && (jsx(TypographyButton, { dataTestId: 'manage-password-button', onClick: () => createPassword(!hasClaimedCoinbaseMPC), buttonClassName: 'settings-view__body__section__button', startSlot: 
-                                // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgAltKey, { className: 'settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.passkey_button', children: t('dyn_settings.security_section.password_button') })] }), endSlot: hasClaimedCoinbaseMPC ? (jsx(SvgCheckCircle, { className: 'settings-view__body__section__button__icon-secondary--success' })) : undefined, showInternalLoading: false }))] })), isEmbeddedWallet && (jsxs(Fragment, { children: [isTurnkeyWallet &&
+                                jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgShield, { className: 'settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.mfa_button', children: t('dyn_settings.security_section.mfa_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false }))] })), isEmbeddedWallet && (jsxs(Fragment, { children: [isTurnkeyWallet &&
                                 !hasRecoveryEmail &&
                                 !isSessionKeyCompatible && (jsxs("div", { className: 'settings-view__body__section', children: [jsxs("div", { className: classNames('settings-view__body__section__title', 'settings-view__body__section__title__info-icon'), children: [t('dyn_settings.identity_section.title'), jsx(Icon, { size: 'small', children: jsx(SvgFooterInfoIcon, { className: 'settings-view__body__section__title__info-icon', "data-testid": 'email-info-icon-title' }) })] }), jsx(TypographyButton, { dataTestId: 'manage-email-recovery-button', onClick: addEmbeddedWalletRecoveryEmail, buttonClassName: classNames('settings-view__body__section__button', 'settings-view__body__section__button__badge'), startSlot: 
                                         // eslint-disable-next-line react/jsx-wrap-multilines