@dynamic-labs/sdk-react-core 0.19.3 → 1.0.0-alpha.1

package/src/lib/views/LoginView/sections/SocialSignInSection/MagicSocialSignIn/MagicSocialSignIn.cjs

@@ -16,7 +16,7 @@ require('../../../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('@dynamic-labs/utils');
 require('../../../../../shared/consts/index.cjs');
-require('../../../../../context/DynamicContext/DynamicContext.cjs');
+var useInternalDynamicContext = require('../../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('../../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../../context/ThemeContext/ThemeContext.cjs');
@@ -38,7 +38,7 @@ require('../../../../../context/MockContext/MockContext.cjs');
 require('../../../../../context/QrCodeContext/QrCodeContext.cjs');
 require('../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
+var CaptchaContext = require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 require('qrcode');
 require('../../../../../context/LoadingContext/LoadingContext.cjs');
@@ -60,8 +60,23 @@ var SocialSignIn = require('../../../../../components/SocialSignIn/SocialSignIn.
 var SocialRedirectContext = require('../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 
 const MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {
+    const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const { socialProvider, setSocialProvider, socialWalletConnector, enabledSocialProviders, } = SocialRedirectContext.useSocialRedirectContext();
+    const { engageCaptcha, setCaptchaTokenInLS } = CaptchaContext.useCaptchaContext();
     const { mutate: onClickProvider, isLoading } = useMutation.useMutation((provider) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security.hCaptcha) === null || _a === void 0 ? void 0 : _a.enabled) {
+            engageCaptcha({
+                authMethod: 'social',
+                onCaptchaSuccess: (captchaToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                    setCaptchaTokenInLS(captchaToken);
+                    setSocialProvider(provider);
+                    yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
+                    return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(provider);
+                }),
+            });
+            return;
+        }
         setSocialProvider(provider);
         yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
         return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(provider);

package/src/lib/views/LoginView/sections/SocialSignInSection/MagicSocialSignIn/MagicSocialSignIn.js

@@ -12,7 +12,7 @@ import '../../../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '@dynamic-labs/utils';
 import '../../../../../shared/consts/index.js';
-import '../../../../../context/DynamicContext/DynamicContext.js';
+import { useInternalDynamicContext } from '../../../../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import '../../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../../context/ThemeContext/ThemeContext.js';
@@ -34,7 +34,7 @@ import '../../../../../context/MockContext/MockContext.js';
 import '../../../../../context/QrCodeContext/QrCodeContext.js';
 import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import '../../../../../context/CaptchaContext/CaptchaContext.js';
+import { useCaptchaContext } from '../../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../../context/EmailVerificationContext/EmailVerificationContext.js';
 import 'qrcode';
 import '../../../../../context/LoadingContext/LoadingContext.js';
@@ -56,8 +56,23 @@ import { SocialSignIn } from '../../../../../components/SocialSignIn/SocialSignI
 import { useSocialRedirectContext } from '../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 
 const MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {
+    const { projectSettings } = useInternalDynamicContext();
     const { socialProvider, setSocialProvider, socialWalletConnector, enabledSocialProviders, } = useSocialRedirectContext();
+    const { engageCaptcha, setCaptchaTokenInLS } = useCaptchaContext();
     const { mutate: onClickProvider, isLoading } = useMutation((provider) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security.hCaptcha) === null || _a === void 0 ? void 0 : _a.enabled) {
+            engageCaptcha({
+                authMethod: 'social',
+                onCaptchaSuccess: (captchaToken) => __awaiter(void 0, void 0, void 0, function* () {
+                    setCaptchaTokenInLS(captchaToken);
+                    setSocialProvider(provider);
+                    yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
+                    return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(provider);
+                }),
+            });
+            return;
+        }
         setSocialProvider(provider);
         yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
         return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(provider);

package/src/lib/views/LoginView/sections/WalletSignInSection/ListItemButton/ListItemButton.cjs

@@ -65,7 +65,7 @@ const ListItemButton = ({ text, onClick, numberOfWallets, disabled = false, }) =
         if (numberOfWallets <= 10) {
             return numberOfWallets;
         }
-        return `+${Math.floor(numberOfWallets / 10) * 10}`;
+        return `${Math.floor(numberOfWallets / 10) * 10}+`;
     }, [numberOfWallets]);
     const trailing = (jsxRuntime.jsxs("div", { className: 'list-item-button__trailing', children: [jsxRuntime.jsx("div", { className: classNames.classNames('list-item-button__trailing-child', 'list-item-button__trailing-label'), children: jsxRuntime.jsx(Badge.Badge, { text: `${numberOfWalletsText} available` }) }), jsxRuntime.jsx("div", { className: classNames.classNames('list-item-button__trailing-child', 'list-item-button__trailing-icon'), children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'small', children: jsxRuntime.jsx(stroke.ReactComponent, {}) }) })] }));
     return (jsxRuntime.jsx(ListTile.ListTile, { trailing: trailing, onClick: onClick, className: 'list-item-button', disabled: disabled, children: text }));

package/src/lib/views/LoginView/sections/WalletSignInSection/ListItemButton/ListItemButton.js

@@ -61,7 +61,7 @@ const ListItemButton = ({ text, onClick, numberOfWallets, disabled = false, }) =
         if (numberOfWallets <= 10) {
             return numberOfWallets;
         }
-        return `+${Math.floor(numberOfWallets / 10) * 10}`;
+        return `${Math.floor(numberOfWallets / 10) * 10}+`;
     }, [numberOfWallets]);
     const trailing = (jsxs("div", { className: 'list-item-button__trailing', children: [jsx("div", { className: classNames('list-item-button__trailing-child', 'list-item-button__trailing-label'), children: jsx(Badge, { text: `${numberOfWalletsText} available` }) }), jsx("div", { className: classNames('list-item-button__trailing-child', 'list-item-button__trailing-icon'), children: jsx(Icon, { color: 'text-primary', size: 'small', children: jsx(SvgStroke, {}) }) })] }));
     return (jsx(ListTile, { trailing: trailing, onClick: onClick, className: 'list-item-button', disabled: disabled, children: text }));

package/src/lib/views/PasskeyIntroView/PasskeyIntroView.cjs

@@ -40,6 +40,7 @@ require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
+var smartWallet = require('../../utils/hooks/useWalletConnectors/utils/smartWallet/smartWallet.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
@@ -87,7 +88,7 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
     React.useEffect(() => localStorage.LocalStorage.removeFromLS(localStorage$1.LAST_USED_WALLET), []);
     const { mutate: createEmbeddedWalletWithPasskeyMutation, isLoading, error, } = useMutation.useMutation(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        const { embeddedWalletVerifiedCredentialId, jwt, decodedJwt, walletConnector, } = yield createEmbeddedWalletMutation({
+        const { embeddedWalletVerifiedCredential, jwt, decodedJwt, walletConnector, } = yield createEmbeddedWalletMutation({
             authToken,
             environmentId,
             user,
@@ -98,10 +99,21 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
             chain: walletConnector.connectedChain || '',
             connected: true,
             connector: walletConnector,
-            id: embeddedWalletVerifiedCredentialId,
+            id: embeddedWalletVerifiedCredential.id,
         };
         internalEvents.current.emit('embeddedWalletCreated', passkeyWallet);
-        setPrimaryWalletId(embeddedWalletVerifiedCredentialId);
+        const smartWallet$1 = smartWallet.findSmartWallet(embeddedWalletVerifiedCredential, decodedJwt.verifiedCredentials);
+        if (smartWallet$1) {
+            setPrimaryWalletId(smartWallet$1.id);
+            smartWallet.initializeSmartWallet({
+                account: smartWallet$1,
+                verifiedCredentials: decodedJwt.verifiedCredentials,
+                walletOptions: wallets,
+            });
+        }
+        else {
+            setPrimaryWalletId(embeddedWalletVerifiedCredential.id);
+        }
         index$1.storeAuthToken(jwt);
         setUser(createUserProfile.createUserProfile(decodedJwt));
         setShowAuthFlow(false);

package/src/lib/views/PasskeyIntroView/PasskeyIntroView.js

@@ -36,6 +36,7 @@ import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import { findSmartWallet, initializeSmartWallet } from '../../utils/hooks/useWalletConnectors/utils/smartWallet/smartWallet.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
@@ -83,7 +84,7 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
     useEffect(() => LocalStorage.removeFromLS(LAST_USED_WALLET), []);
     const { mutate: createEmbeddedWalletWithPasskeyMutation, isLoading, error, } = useMutation(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        const { embeddedWalletVerifiedCredentialId, jwt, decodedJwt, walletConnector, } = yield createEmbeddedWalletMutation({
+        const { embeddedWalletVerifiedCredential, jwt, decodedJwt, walletConnector, } = yield createEmbeddedWalletMutation({
             authToken,
             environmentId,
             user,
@@ -94,10 +95,21 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
             chain: walletConnector.connectedChain || '',
             connected: true,
             connector: walletConnector,
-            id: embeddedWalletVerifiedCredentialId,
+            id: embeddedWalletVerifiedCredential.id,
         };
         internalEvents.current.emit('embeddedWalletCreated', passkeyWallet);
-        setPrimaryWalletId(embeddedWalletVerifiedCredentialId);
+        const smartWallet = findSmartWallet(embeddedWalletVerifiedCredential, decodedJwt.verifiedCredentials);
+        if (smartWallet) {
+            setPrimaryWalletId(smartWallet.id);
+            initializeSmartWallet({
+                account: smartWallet,
+                verifiedCredentials: decodedJwt.verifiedCredentials,
+                walletOptions: wallets,
+            });
+        }
+        else {
+            setPrimaryWalletId(embeddedWalletVerifiedCredential.id);
+        }
         storeAuthToken(jwt);
         setUser(createUserProfile(decodedJwt));
         setShowAuthFlow(false);

package/src/lib/views/PasskeyIntroView/utils/createEmbeddedWalletWithPasskey/createEmbeddedWalletWithPasskey.cjs

@@ -47,11 +47,10 @@ const createEmbeddedWalletWithPasskey = ({ user, walletConnector, environmentId,
     if (!embeddedWalletVerifiedCredential) {
         throw new utils.DynamicError('EmbeddedWalletVerifiedCredential not found');
     }
-    const embeddedWalletVerifiedCredentialId = embeddedWalletVerifiedCredential.id;
     walletConnector.setVerifiedCredentials(decodedJwt.verifiedCredentials);
     return {
         decodedJwt,
-        embeddedWalletVerifiedCredentialId,
+        embeddedWalletVerifiedCredential,
         jwt,
         walletConnector,
     };

package/src/lib/views/PasskeyIntroView/utils/createEmbeddedWalletWithPasskey/createEmbeddedWalletWithPasskey.d.ts

@@ -7,7 +7,7 @@ export declare const createEmbeddedWalletWithPasskey: ({ user, walletConnector,
     walletConnector: (IPasskeyWalletConnector & IEmailWalletConnector) | undefined;
 }) => Promise<{
     decodedJwt: Omit<import("@dynamic-labs/sdk-api").DynamicJwt, "jwt">;
-    embeddedWalletVerifiedCredentialId: string;
+    embeddedWalletVerifiedCredential: import("@dynamic-labs/sdk-api").JwtVerifiedCredential;
     jwt: string;
     walletConnector: IPasskeyWalletConnector & IEmailWalletConnector;
 }>;

package/src/lib/views/PasskeyIntroView/utils/createEmbeddedWalletWithPasskey/createEmbeddedWalletWithPasskey.js

@@ -43,11 +43,10 @@ const createEmbeddedWalletWithPasskey = ({ user, walletConnector, environmentId,
     if (!embeddedWalletVerifiedCredential) {
         throw new DynamicError('EmbeddedWalletVerifiedCredential not found');
     }
-    const embeddedWalletVerifiedCredentialId = embeddedWalletVerifiedCredential.id;
     walletConnector.setVerifiedCredentials(decodedJwt.verifiedCredentials);
     return {
         decodedJwt,
-        embeddedWalletVerifiedCredentialId,
+        embeddedWalletVerifiedCredential,
         jwt,
         walletConnector,
     };

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

@@ -8,12 +8,12 @@ var React = require('react');
 var reactI18next = require('react-i18next');
 var viem = require('viem');
 var utils = require('@dynamic-labs/utils');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../config/ApiEndpoint.cjs');
 require('../../shared/logger.cjs');
 var getChainIcon = require('../../shared/utils/functions/chain/getChainIcon.cjs');
-require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/wallet-book');
 var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('../../utils/constants/colors.cjs');
@@ -81,8 +81,16 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         const balanceText = yield primaryWallet.connector.getBalance();
         return balanceText ? viem.parseEther(balanceText) : undefined;
     }));
+    const { data: isGasSponsored, isLoading: isGasSponsoredLoading } = usePromise.usePromise(() => {
+        if (!walletConnectorCore.canCheckGasSponsorship(primaryWallet.connector)) {
+            return false;
+        }
+        return primaryWallet.connector.isGasSponsored(transaction);
+    });
     const { mutate: send, isLoading, error: transactionError, } = useMutation.useMutation(mutation, {
-        onFailure: (error) => onError === null || onError === void 0 ? void 0 : onError(error),
+        onFailure: (error) => {
+            onError === null || onError === void 0 ? void 0 : onError(error);
+        },
         onSuccess: (tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx),
     });
     const { isLoading: isGasPriceLoading, gasTotalPrice, isGasEstimated, } = useTransactionGas.useTransactionGas({
@@ -100,12 +108,14 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
     }));
     const total = useTransactionTotal.useTransactionTotal({
         gasTotalPrice,
+        isGasSponsored,
         transactionValue,
     });
     const isTransactionLoading = isTransactionValueLoading ||
         isGasPriceLoading ||
         isTransactionToAddressLoading ||
-        isTransactionFromAddressLoading;
+        isTransactionFromAddressLoading ||
+        isGasSponsoredLoading;
     const ChainIconComponent = getChainIcon.getChainIcon(primaryWallet.chain);
     const chainIcon = (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(ChainIconComponent, {}) }));
     const errorMessage = transactionError && transactionErrorMessage.transactionErrorMessage(transactionError);
@@ -130,13 +140,11 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         });
     }, [currencySymbol, hasInsufficientFunds, missingFunds]);
     return (jsxRuntime.jsxs(TransactionConfirmationPageLayout.TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isTransactionLoading || hasInsufficientFunds, error: errorMessage, warningMessage: warningMessage, children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.from'), isLoading: isTransactionFromAddressLoading, title: transactionFromAddress, children: shortenWalletAddress.shortenWalletAddress(transactionFromAddress, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.to'), isLoading: isTransactionToAddressLoading, title: transactionToAddress, children: transactionToAddress &&
-                    shortenWalletAddress.shortenWalletAddress(transactionToAddress, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.amount'), isLoading: isTransactionValueLoading, isEmpty: !transactionValue, title: transactionValue ? formatBigNumber.formatBigNumber(transactionValue) : undefined, suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount', children: transactionValue ? formatBigNumber.formatBigNumber(transactionValue, 10) : 0 }), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: isGasEstimated
+                    shortenWalletAddress.shortenWalletAddress(transactionToAddress, 4, 4) }), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.amount'), isLoading: isTransactionValueLoading, isEmpty: !transactionValue, title: transactionValue ? formatBigNumber.formatBigNumber(transactionValue) : undefined, suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount', children: transactionValue ? formatBigNumber.formatBigNumber(transactionValue, 10) : 0 }), !isGasSponsored && (jsxRuntime.jsx(TransactionRow.TransactionRow, { label: isGasEstimated
                     ? t('dyn_send_transaction.confirmation.data.gas_estimate')
-                    : t('dyn_send_transaction.confirmation.data.gas'), isEmpty: !gasTotalPrice, isLoading: isGasPriceLoading, title: gasTotalPrice ? formatBigNumber.formatBigNumber(gasTotalPrice) : undefined, suffix: gasTotalPrice ? currencySymbol : undefined, icon: gasTotalPrice ? chainIcon : undefined, dataTestId: isGasEstimated
+                    : t('dyn_send_transaction.confirmation.data.gas'), isEmpty: !gasTotalPrice, isLoading: isGasPriceLoading || isGasSponsoredLoading, title: gasTotalPrice ? formatBigNumber.formatBigNumber(gasTotalPrice) : undefined, suffix: gasTotalPrice ? currencySymbol : undefined, icon: gasTotalPrice ? chainIcon : undefined, dataTestId: isGasEstimated
                     ? 'transaction-estimated-gas-fee'
-                    : 'transaction-gas-fee', children: gasTotalPrice
-                    ? formatBigNumber.formatBigNumber(gasTotalPrice, 10)
-                    : t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.total'), isEmpty: !total, title: total ? formatBigNumber.formatBigNumber(total) : undefined, suffix: total ? currencySymbol : undefined, icon: total ? chainIcon : undefined, dataTestId: 'transaction-total', children: total
+                    : 'transaction-gas-fee', children: gasTotalPrice ? formatBigNumber.formatBigNumber(gasTotalPrice, 10) : '--' })), jsxRuntime.jsx(TransactionRow.TransactionRow, { label: t('dyn_send_transaction.confirmation.data.total'), isEmpty: !total, title: total ? formatBigNumber.formatBigNumber(total) : undefined, suffix: total ? currencySymbol : undefined, icon: total ? chainIcon : undefined, dataTestId: 'transaction-total', children: total
                     ? formatBigNumber.formatBigNumber(total, 10)
                     : t('dyn_send_transaction.confirmation.not_applied') })] }));
 };

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

@@ -4,12 +4,12 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { parseEther, isHex, hexToBigInt } from 'viem';
 import { DynamicError } from '@dynamic-labs/utils';
+import { canCheckGasSponsorship } from '@dynamic-labs/wallet-connector-core';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../config/ApiEndpoint.js';
 import '../../shared/logger.js';
 import { getChainIcon } from '../../shared/utils/functions/chain/getChainIcon.js';
-import '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/wallet-book';
 import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '../../utils/constants/colors.js';
@@ -77,8 +77,16 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         const balanceText = yield primaryWallet.connector.getBalance();
         return balanceText ? parseEther(balanceText) : undefined;
     }));
+    const { data: isGasSponsored, isLoading: isGasSponsoredLoading } = usePromise(() => {
+        if (!canCheckGasSponsorship(primaryWallet.connector)) {
+            return false;
+        }
+        return primaryWallet.connector.isGasSponsored(transaction);
+    });
     const { mutate: send, isLoading, error: transactionError, } = useMutation(mutation, {
-        onFailure: (error) => onError === null || onError === void 0 ? void 0 : onError(error),
+        onFailure: (error) => {
+            onError === null || onError === void 0 ? void 0 : onError(error);
+        },
         onSuccess: (tx) => onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(tx),
     });
     const { isLoading: isGasPriceLoading, gasTotalPrice, isGasEstimated, } = useTransactionGas({
@@ -96,12 +104,14 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
     }));
     const total = useTransactionTotal({
         gasTotalPrice,
+        isGasSponsored,
         transactionValue,
     });
     const isTransactionLoading = isTransactionValueLoading ||
         isGasPriceLoading ||
         isTransactionToAddressLoading ||
-        isTransactionFromAddressLoading;
+        isTransactionFromAddressLoading ||
+        isGasSponsoredLoading;
     const ChainIconComponent = getChainIcon(primaryWallet.chain);
     const chainIcon = (jsx(Icon, { size: 'small', children: jsx(ChainIconComponent, {}) }));
     const errorMessage = transactionError && transactionErrorMessage(transactionError);
@@ -126,13 +136,11 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         });
     }, [currencySymbol, hasInsufficientFunds, missingFunds]);
     return (jsxs(TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isTransactionLoading || hasInsufficientFunds, error: errorMessage, warningMessage: warningMessage, children: [jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.from'), isLoading: isTransactionFromAddressLoading, title: transactionFromAddress, children: shortenWalletAddress(transactionFromAddress, 4, 4) }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.to'), isLoading: isTransactionToAddressLoading, title: transactionToAddress, children: transactionToAddress &&
-                    shortenWalletAddress(transactionToAddress, 4, 4) }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.amount'), isLoading: isTransactionValueLoading, isEmpty: !transactionValue, title: transactionValue ? formatBigNumber(transactionValue) : undefined, suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount', children: transactionValue ? formatBigNumber(transactionValue, 10) : 0 }), jsx(TransactionRow, { label: isGasEstimated
+                    shortenWalletAddress(transactionToAddress, 4, 4) }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.amount'), isLoading: isTransactionValueLoading, isEmpty: !transactionValue, title: transactionValue ? formatBigNumber(transactionValue) : undefined, suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount', children: transactionValue ? formatBigNumber(transactionValue, 10) : 0 }), !isGasSponsored && (jsx(TransactionRow, { label: isGasEstimated
                     ? t('dyn_send_transaction.confirmation.data.gas_estimate')
-                    : t('dyn_send_transaction.confirmation.data.gas'), isEmpty: !gasTotalPrice, isLoading: isGasPriceLoading, title: gasTotalPrice ? formatBigNumber(gasTotalPrice) : undefined, suffix: gasTotalPrice ? currencySymbol : undefined, icon: gasTotalPrice ? chainIcon : undefined, dataTestId: isGasEstimated
+                    : t('dyn_send_transaction.confirmation.data.gas'), isEmpty: !gasTotalPrice, isLoading: isGasPriceLoading || isGasSponsoredLoading, title: gasTotalPrice ? formatBigNumber(gasTotalPrice) : undefined, suffix: gasTotalPrice ? currencySymbol : undefined, icon: gasTotalPrice ? chainIcon : undefined, dataTestId: isGasEstimated
                     ? 'transaction-estimated-gas-fee'
-                    : 'transaction-gas-fee', children: gasTotalPrice
-                    ? formatBigNumber(gasTotalPrice, 10)
-                    : t('dyn_send_transaction.confirmation.data.gas_estimate') }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.total'), isEmpty: !total, title: total ? formatBigNumber(total) : undefined, suffix: total ? currencySymbol : undefined, icon: total ? chainIcon : undefined, dataTestId: 'transaction-total', children: total
+                    : 'transaction-gas-fee', children: gasTotalPrice ? formatBigNumber(gasTotalPrice, 10) : '--' })), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.total'), isEmpty: !total, title: total ? formatBigNumber(total) : undefined, suffix: total ? currencySymbol : undefined, icon: total ? chainIcon : undefined, dataTestId: 'transaction-total', children: total
                     ? formatBigNumber(total, 10)
                     : t('dyn_send_transaction.confirmation.not_applied') })] }));
 };

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

@@ -4,11 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-const useTransactionTotal = ({ transactionValue, gasTotalPrice, }) => React.useMemo(() => {
+const useTransactionTotal = ({ transactionValue, gasTotalPrice, isGasSponsored = false, }) => React.useMemo(() => {
+    if (isGasSponsored && transactionValue !== undefined) {
+        return transactionValue;
+    }
     if (gasTotalPrice !== undefined && transactionValue !== undefined) {
         return gasTotalPrice + transactionValue;
     }
     return transactionValue || gasTotalPrice;
-}, [gasTotalPrice, transactionValue]);
+}, [gasTotalPrice, transactionValue, isGasSponsored]);
 
 exports.useTransactionTotal = useTransactionTotal;

package/src/lib/views/TransactionConfirmationView/hooks/useTransactionTotal/useTransactionTotal.d.ts

@@ -1,6 +1,7 @@
 type UseTransactionTotalProps = {
     transactionValue?: bigint;
     gasTotalPrice?: bigint;
+    isGasSponsored?: boolean;
 };
-export declare const useTransactionTotal: ({ transactionValue, gasTotalPrice, }: UseTransactionTotalProps) => bigint | undefined;
+export declare const useTransactionTotal: ({ transactionValue, gasTotalPrice, isGasSponsored, }: UseTransactionTotalProps) => bigint | undefined;
 export {};

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

@@ -1,10 +1,13 @@
 import { useMemo } from 'react';
 
-const useTransactionTotal = ({ transactionValue, gasTotalPrice, }) => useMemo(() => {
+const useTransactionTotal = ({ transactionValue, gasTotalPrice, isGasSponsored = false, }) => useMemo(() => {
+    if (isGasSponsored && transactionValue !== undefined) {
+        return transactionValue;
+    }
     if (gasTotalPrice !== undefined && transactionValue !== undefined) {
         return gasTotalPrice + transactionValue;
     }
     return transactionValue || gasTotalPrice;
-}, [gasTotalPrice, transactionValue]);
+}, [gasTotalPrice, transactionValue, isGasSponsored]);
 
 export { useTransactionTotal };

package/src/lib/views/WalletSignSpinnerView/WalletSignSpinnerView.cjs

@@ -63,7 +63,7 @@ require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const WalletSignSpinnerView = () => {
     const { goToInitialView } = ViewContext.useViewContext();
-    const { setMultiWalletWidgetState, setSelectedWalletConnector, selectedWalletConnector: walletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setMultiWalletWidgetState, setSelectedWalletConnectorKey, selectedWalletConnector: walletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
     if (!walletConnector) {
         return null;
     }
@@ -72,7 +72,7 @@ const WalletSignSpinnerView = () => {
     const handleClose = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         goToInitialView();
         setMultiWalletWidgetState('idle');
-        setSelectedWalletConnector(null);
+        setSelectedWalletConnectorKey(null);
         yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.endSession());
     });
     const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: key, style: {

package/src/lib/views/WalletSignSpinnerView/WalletSignSpinnerView.js

@@ -59,7 +59,7 @@ import '../../components/MenuList/Dropdown/Dropdown.js';
 
 const WalletSignSpinnerView = () => {
     const { goToInitialView } = useViewContext();
-    const { setMultiWalletWidgetState, setSelectedWalletConnector, selectedWalletConnector: walletConnector, } = useInternalDynamicContext();
+    const { setMultiWalletWidgetState, setSelectedWalletConnectorKey, selectedWalletConnector: walletConnector, } = useInternalDynamicContext();
     if (!walletConnector) {
         return null;
     }
@@ -68,7 +68,7 @@ const WalletSignSpinnerView = () => {
     const handleClose = () => __awaiter(void 0, void 0, void 0, function* () {
         goToInitialView();
         setMultiWalletWidgetState('idle');
-        setSelectedWalletConnector(null);
+        setSelectedWalletConnectorKey(null);
         yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.endSession());
     });
     const icon = (jsx(WalletIcon, { walletKey: key, style: {

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.cjs

@@ -56,6 +56,7 @@ var PopperContext = require('../../../components/Popper/PopperContext/PopperCont
 var ModalCard = require('../../../components/ModalCard/ModalCard.cjs');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+var IsBrowser = require('../../../components/IsBrowser/IsBrowser.cjs');
 var SocialRedirectContext = require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../views/WalletList/WalletList.cjs');
 var viewToComponentMap = require('../../../views/viewToComponentMap.cjs');
@@ -82,7 +83,7 @@ const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) =>
     if (hide)
         return null;
     const content = (jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: viewToComponentMap.viewToComponentMap[authView] }));
-    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { className: 'embedded-widget', children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(SocialRedirectContext.SocialRedirectContextProvider, { children: jsxRuntime.jsx(index.FooterAnimationContextProvider, { children: background === 'none' ? (content) : (jsxRuntime.jsx(ModalCard.ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }) }));
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(ShadowDOM.ShadowDOM, { className: 'embedded-widget', children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(SocialRedirectContext.SocialRedirectContextProvider, { children: jsxRuntime.jsx(index.FooterAnimationContextProvider, { children: background === 'none' ? (content) : (jsxRuntime.jsx(ModalCard.ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }) }) }));
 };
 
 exports.DynamicEmbeddedAuthFlow = DynamicEmbeddedAuthFlow;

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import { EmbedProps } from '../EmbedProps.type';
 import { ClassStyleProps } from '../../../utils/types';
+import { EmbedProps } from '../EmbedProps.type';
 type DynamicEmbeddedAuthFlowProps = EmbedProps & ClassStyleProps;
 export declare const DynamicEmbeddedAuthFlow: FC<DynamicEmbeddedAuthFlowProps>;
 export {};

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.js

@@ -52,6 +52,7 @@ import { PopperProvider } from '../../../components/Popper/PopperContext/PopperC
 import { ModalCard } from '../../../components/ModalCard/ModalCard.js';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
+import { IsBrowser } from '../../../components/IsBrowser/IsBrowser.js';
 import { SocialRedirectContextProvider } from '../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../views/WalletList/WalletList.js';
 import { viewToComponentMap } from '../../../views/viewToComponentMap.js';
@@ -78,7 +79,7 @@ const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) =>
     if (hide)
         return null;
     const content = (jsx(DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: viewToComponentMap[authView] }));
-    return (jsx(ShadowDOM, { className: 'embedded-widget', children: jsx(PopperProvider, { children: jsx(SocialRedirectContextProvider, { children: jsx(FooterAnimationContextProvider, { children: background === 'none' ? (content) : (jsx(ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }) }));
+    return (jsx(IsBrowser, { children: jsx(ShadowDOM, { className: 'embedded-widget', children: jsx(PopperProvider, { children: jsx(SocialRedirectContextProvider, { children: jsx(FooterAnimationContextProvider, { children: background === 'none' ? (content) : (jsx(ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }) }) }));
 };
 
 export { DynamicEmbeddedAuthFlow };

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedUserProfile/DynamicEmbeddedUserProfile.cjs

@@ -52,13 +52,14 @@ var PopperContext = require('../../../components/Popper/PopperContext/PopperCont
 var ModalCard = require('../../../components/ModalCard/ModalCard.cjs');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+var IsBrowser = require('../../../components/IsBrowser/IsBrowser.cjs');
 
 const DynamicEmbeddedUserProfile = ({ background = 'none', className, style }) => {
     const show = useIsLoggedIn.useIsLoggedIn();
     if (!show)
         return null;
     const content = (jsxRuntime.jsx(DynamicUserProfileLayout.DynamicUserProfileLayout, { className: className, style: style, variant: 'modal' }));
-    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { className: 'embedded-widget', children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: background === 'none' ? (content) : (jsxRuntime.jsx(ModalCard.ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }));
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(ShadowDOM.ShadowDOM, { className: 'embedded-widget', children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: background === 'none' ? (content) : (jsxRuntime.jsx(ModalCard.ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }));
 };
 
 exports.DynamicEmbeddedUserProfile = DynamicEmbeddedUserProfile;

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedUserProfile/DynamicEmbeddedUserProfile.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import { EmbedProps } from '../EmbedProps.type';
 import { ClassStyleProps } from '../../../utils/types';
+import { EmbedProps } from '../EmbedProps.type';
 type DynamicEmbeddedUserProfileProps = EmbedProps & ClassStyleProps;
 export declare const DynamicEmbeddedUserProfile: FC<DynamicEmbeddedUserProfileProps>;
 export {};

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedUserProfile/DynamicEmbeddedUserProfile.js

@@ -48,13 +48,14 @@ import { PopperProvider } from '../../../components/Popper/PopperContext/PopperC
 import { ModalCard } from '../../../components/ModalCard/ModalCard.js';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
+import { IsBrowser } from '../../../components/IsBrowser/IsBrowser.js';
 
 const DynamicEmbeddedUserProfile = ({ background = 'none', className, style }) => {
     const show = useIsLoggedIn();
     if (!show)
         return null;
     const content = (jsx(DynamicUserProfileLayout, { className: className, style: style, variant: 'modal' }));
-    return (jsx(ShadowDOM, { className: 'embedded-widget', children: jsx(PopperProvider, { children: background === 'none' ? (content) : (jsx(ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }));
+    return (jsx(IsBrowser, { children: jsx(ShadowDOM, { className: 'embedded-widget', children: jsx(PopperProvider, { children: background === 'none' ? (content) : (jsx(ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }));
 };
 
 export { DynamicEmbeddedUserProfile };

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

@@ -19,7 +19,7 @@ require('../../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
 require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
-require('../../../../context/DynamicContext/DynamicContext.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
@@ -55,7 +55,6 @@ require('@dynamic-labs/types');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 var useKYCFlag = require('../../../../utils/hooks/useKYCFlag/useKYCFlag.cjs');
-var useMultiWalletFlag = require('../../../../utils/hooks/useMultiWalletFlag/useMultiWalletFlag.cjs');
 var DynamicWidgetWalletHeader = require('./DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.cjs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -74,19 +73,19 @@ const options = [
 ];
 const DynamicWidgetHeader = ({ variant, }) => {
     const { dynamicWidgetView, setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const { multiWallet } = useInternalDynamicContext.useInternalDynamicContext();
     const isKYCEnabled = useKYCFlag.useKYCFlag();
-    const isMultiWalletEnabled = useMultiWalletFlag.useMultiWalletFlag();
     // Marks 'Profile' view as active when client goes to 'Edit Profile' view
     const dynamicWidgetSwitcherOverwriteValue = React.useMemo(() => {
-        if (!isKYCEnabled && !isMultiWalletEnabled)
+        if (!isKYCEnabled && !multiWallet)
             return 'wallets';
         if (dynamicWidgetView === 'edit-profile')
             return 'profile';
         return dynamicWidgetView;
-    }, [dynamicWidgetView, isKYCEnabled, isMultiWalletEnabled]);
-    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-header', children: [isKYCEnabled && isMultiWalletEnabled && (jsxRuntime.jsx(OptionsSwitcher.OptionsSwitcher, { rootClassName: 'dynamic-widget-header__switcher', value: dynamicWidgetSwitcherOverwriteValue, options: options, onChange: (view) => setDynamicWidgetView(view) })), (dynamicWidgetSwitcherOverwriteValue === 'wallets' ||
+    }, [dynamicWidgetView, isKYCEnabled, multiWallet]);
+    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-header', children: [isKYCEnabled && multiWallet && (jsxRuntime.jsx(OptionsSwitcher.OptionsSwitcher, { rootClassName: 'dynamic-widget-header__switcher', value: dynamicWidgetSwitcherOverwriteValue, options: options, onChange: (view) => setDynamicWidgetView(view) })), (dynamicWidgetSwitcherOverwriteValue === 'wallets' ||
                 (dynamicWidgetSwitcherOverwriteValue === 'profile' &&
-                    !isMultiWalletEnabled)) && (jsxRuntime.jsx(DynamicWidgetWalletHeader.DynamicWidgetWalletHeader, { variant: variant }))] }));
+                    !multiWallet)) && jsxRuntime.jsx(DynamicWidgetWalletHeader.DynamicWidgetWalletHeader, { variant: variant })] }));
 };
 const MemoizedDynamicWidgetHeader = React__default["default"].memo(DynamicWidgetHeader);