@dynamic-labs/sdk-react-core 2.0.0-alpha.3 → 2.0.0-alpha.5

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletAddress/ActiveWalletAddress.cjs

@@ -24,12 +24,14 @@ require('../../../../../shared/consts/index.cjs');
 require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
+require('../../../../../config/ApiEndpoint.cjs');
+require('react-international-phone');
 require('viem/chains');
 require('../../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../../context/AccountExistsContext/AccountExistsContext.cjs');
-require('../../../../../config/ApiEndpoint.cjs');
-require('../../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('../../../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
+require('../../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
 require('yup');
@@ -39,13 +41,14 @@ require('../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdate
 require('../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../../../components/ShadowDOM/ShadowDOM.cjs');
-require('../../../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../../context/FooterAnimationContext/index.cjs');
 var Typography = require('../../../../../components/Typography/Typography.cjs');
+var Skeleton = require('../../../../../components/Skeleton/Skeleton.cjs');
 require('../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
@@ -61,9 +64,10 @@ require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/Alert/Alert.cjs');
 require('../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 var PasskeyContext = require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
-require('@dynamic-labs/viem-utils');
+require('../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../../components/Input/Input.cjs');
 require('../../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../../components/Popper/Popper/Popper.cjs');
@@ -72,10 +76,11 @@ require('../../../../../views/WalletList/WalletList.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.cjs');
 
-const ActiveWalletAddreess = ({ address, nameServiceName, menuOption, }) => {
+const ActiveWalletAddress = ({ address, nameServiceName, menuOption, isLoading = false, }) => {
     const { showAlert } = PasskeyContext.usePasskeyContext();
-    return (jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameServiceName }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: nameServiceName ? 'regular' : 'medium', variant: nameServiceName ? 'body_small' : 'body_normal', color: nameServiceName ? 'secondary' : 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: () => jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 }), variant: 'yellow' })) : (jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 })) })] }));
+    return (jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameServiceName }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: nameServiceName ? 'regular' : 'medium', variant: nameServiceName ? 'body_small' : 'body_normal', color: nameServiceName ? 'secondary' : 'primary', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress.shortenWalletAddress(address, 4, 4)) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: () => jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 }), variant: 'yellow' })) : (jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 })) })] }));
 };
 
-exports.ActiveWalletAddreess = ActiveWalletAddreess;
+exports.ActiveWalletAddress = ActiveWalletAddress;

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletAddress/ActiveWalletAddress.d.ts

@@ -4,6 +4,7 @@ type Props = {
     address?: string;
     nameServiceName?: string;
     menuOption: DotsMenuOption[];
+    isLoading?: boolean;
 };
-export declare const ActiveWalletAddreess: ({ address, nameServiceName, menuOption, }: Props) => JSX.Element;
+export declare const ActiveWalletAddress: ({ address, nameServiceName, menuOption, isLoading, }: Props) => JSX.Element;
 export {};

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletAddress/ActiveWalletAddress.js

@@ -20,12 +20,14 @@ import '../../../../../shared/consts/index.js';
 import '../../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
+import '../../../../../config/ApiEndpoint.js';
+import 'react-international-phone';
 import 'viem/chains';
 import '../../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../../context/AccountExistsContext/AccountExistsContext.js';
-import '../../../../../config/ApiEndpoint.js';
-import '../../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '../../../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
+import '../../../../../context/WalletContext/WalletContext.js';
 import '../../../../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
 import 'yup';
@@ -35,13 +37,14 @@ import '../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateU
 import '../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
-import '../../../../../components/ShadowDOM/ShadowDOM.js';
-import '../../../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../../context/FooterAnimationContext/index.js';
 import { Typography } from '../../../../../components/Typography/Typography.js';
+import { Skeleton } from '../../../../../components/Skeleton/Skeleton.js';
 import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
@@ -57,9 +60,10 @@ import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../components/Alert/Alert.js';
 import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import { usePasskeyContext } from '../../../../../context/PasskeyContext/PasskeyContext.js';
-import '@dynamic-labs/viem-utils';
+import '../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../../components/Input/Input.js';
 import '../../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../../components/Popper/Popper/Popper.js';
@@ -68,10 +72,11 @@ import '../../../../../views/WalletList/WalletList.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '../../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
 
-const ActiveWalletAddreess = ({ address, nameServiceName, menuOption, }) => {
+const ActiveWalletAddress = ({ address, nameServiceName, menuOption, isLoading = false, }) => {
     const { showAlert } = usePasskeyContext();
-    return (jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameServiceName }), jsx(Typography, { className: 'active-wallet-information__address', weight: nameServiceName ? 'regular' : 'medium', variant: nameServiceName ? 'body_small' : 'body_normal', color: nameServiceName ? 'secondary' : 'primary', children: shortenWalletAddress(address, 4, 4) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsx(IconWithStatus, { Icon: () => jsx(SvgGear, { width: 16, height: 16 }), variant: 'yellow' })) : (jsx(SvgGear, { width: 16, height: 16 })) })] }));
+    return (jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameServiceName }), jsx(Typography, { className: 'active-wallet-information__address', weight: nameServiceName ? 'regular' : 'medium', variant: nameServiceName ? 'body_small' : 'body_normal', color: nameServiceName ? 'secondary' : 'primary', children: isLoading ? (jsx(Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress(address, 4, 4)) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsx(IconWithStatus, { Icon: () => jsx(SvgGear, { width: 16, height: 16 }), variant: 'yellow' })) : (jsx(SvgGear, { width: 16, height: 16 })) })] }));
 };
 
-export { ActiveWalletAddreess };
+export { ActiveWalletAddress };

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletAddress/index.d.ts

@@ -1 +1 @@
-export { ActiveWalletAddreess } from './ActiveWalletAddress';
+export { ActiveWalletAddress } from './ActiveWalletAddress';

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

@@ -24,16 +24,17 @@ require('../../../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
-var createOwnerWallet = require('../../../../utils/functions/createOwnerWallet/createOwnerWallet.cjs');
 require('@dynamic-labs/multi-wallet');
-var isAccountAbstractionWallet = require('../../../../utils/functions/isAccountAbstractionWallet/isAccountAbstractionWallet.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('react-international-phone');
 var isTestnet = require('../../../../utils/functions/isTestnet/isTestnet.cjs');
 require('viem/chains');
+var getEOAWallet = require('../../../../utils/functions/getEOAWallet/getEOAWallet.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
-require('../../../../config/ApiEndpoint.cjs');
-require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('../../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
+require('../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 var useIsTurnkeyWallet = require('../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 var usePromise = require('../../../../utils/hooks/usePromise/usePromise.cjs');
@@ -44,13 +45,14 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUse
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../../components/ShadowDOM/ShadowDOM.cjs');
-require('../../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
+var Skeleton = require('../../../../components/Skeleton/Skeleton.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
@@ -59,17 +61,18 @@ var AuthProviderIcon = require('../../../../components/AuthProviderIcon/AuthProv
 var helpers = require('../../helpers/helpers.cjs');
 require('qrcode');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('formik');
-require('../../../../components/IconButton/IconButton.cjs');
 var Alert = require('../../../../components/Alert/Alert.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 var PasskeyContext = require('../../../../context/PasskeyContext/PasskeyContext.cjs');
-require('@dynamic-labs/viem-utils');
+require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/Input/Input.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../views/WalletList/WalletList.cjs');
@@ -79,12 +82,13 @@ require('@hcaptcha/react-hcaptcha');
 require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 var Balance = require('../Balance/Balance.cjs');
+require('../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.cjs');
 var ActiveBitcoinWalletAddresses = require('./ActiveBitcoinWalletAddresses/ActiveBitcoinWalletAddresses.cjs');
 var ActiveWalletAddress = require('./ActiveWalletAddress/ActiveWalletAddress.cjs');
 
 const ICON_SIZE = 28;
-const ActiveWalletInformation = () => {
-    var _a, _b;
+const ActiveWalletInformation = ({ isLoading = false, }) => {
+    var _a, _b, _c, _d;
     const { t } = reactI18next.useTranslation();
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     const { primaryWallet, authToken, network, projectSettings, handleLogOut, user, } = useInternalDynamicContext.useInternalDynamicContext();
@@ -95,11 +99,11 @@ const ActiveWalletInformation = () => {
     const { data: testnet } = usePromise.usePromise(() => isTestnet.isTestnet(primaryWallet), { deps: [network] });
     const exportKeysOption = helpers.getExportKeysOption(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
     const { showAlert } = PasskeyContext.usePasskeyContext();
-    const wallet = isAccountAbstractionWallet.isAccountAbstractionWallet(primaryWallet)
-        ? createOwnerWallet.createOwnerWallet(primaryWallet, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || [])
-        : primaryWallet;
+    const wallet = getEOAWallet.getEOAWallet(primaryWallet, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || []);
     const isBitcoin = primaryWallet && walletConnectorCore.isBitcoinConnector(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
-    const isEmbeddedWallet = Boolean(wallet && ((_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.startsWith('turnkey')));
+    const isEmbeddedWallet = Boolean(wallet &&
+        (((_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.startsWith('turnkey')) ||
+            ((_d = (_c = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _c === void 0 ? void 0 : _c.key) === null || _d === void 0 ? void 0 : _d.startsWith('coinbase'))));
     const options = [
         {
             Icon: null,
@@ -118,7 +122,7 @@ const ActiveWalletInformation = () => {
             callback: () => setDynamicWidgetView('wallet-settings'),
             fontColor: showAlert() ? 'primary' : undefined,
             fontWeight: showAlert() ? 'bold' : undefined,
-            hide: !(wallet && wallet.connector.key.startsWith('turnkey')),
+            hide: !isEmbeddedWallet,
             text: 'Wallet settings',
         },
         {
@@ -143,16 +147,13 @@ const ActiveWalletInformation = () => {
         if (isBitcoin) {
             return (jsxRuntime.jsx(ActiveBitcoinWalletAddresses.ActiveBitcoinWalletAddresses, { wallet: primaryWallet, menuOption: options }));
         }
-        else if (isEmbeddedWallet) {
-            return (jsxRuntime.jsx(ActiveWalletAddress.ActiveWalletAddreess, { address: address, nameServiceName: user === null || user === void 0 ? void 0 : user.email, menuOption: options }));
-        }
         else {
-            return (jsxRuntime.jsx(ActiveWalletAddress.ActiveWalletAddreess, { address: address, nameServiceName: nameService === null || nameService === void 0 ? void 0 : nameService.name, menuOption: options }));
+            return (jsxRuntime.jsx(ActiveWalletAddress.ActiveWalletAddress, { address: address, nameServiceName: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || (user === null || user === void 0 ? void 0 : user.email), menuOption: options, isLoading: isLoading }));
         }
     };
     return (jsxRuntime.jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__header', children: [jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar__name-service', children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsxRuntime.jsx("div", { className: 'active-wallet-information__wallet-img', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: !isEmbeddedWallet }) })) }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__details', children: [jsxRuntime.jsx("div", { className: classNames.classNames('active-wallet-information__addresses-container', {
                                             'active-wallet-information__addresses-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: activeWalletAddress() }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), showTestnetAlert && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
+                                        }), children: activeWalletAddress() }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true, isLoading: isLoading })] })] }), showTestnetAlert && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet ? (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network })) : (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'balance-container__skeleton' }))] })] }));
 };
 
 exports.ActiveWalletInformation = ActiveWalletInformation;

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
-export declare const ActiveWalletInformation: () => JSX.Element;
+export declare const ActiveWalletInformation: ({ isLoading, }: {
+    isLoading?: boolean | undefined;
+}) => JSX.Element;

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

@@ -20,16 +20,17 @@ import '../../../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
-import { createOwnerWallet } from '../../../../utils/functions/createOwnerWallet/createOwnerWallet.js';
 import '@dynamic-labs/multi-wallet';
-import { isAccountAbstractionWallet } from '../../../../utils/functions/isAccountAbstractionWallet/isAccountAbstractionWallet.js';
+import '../../../../config/ApiEndpoint.js';
+import 'react-international-phone';
 import { isTestnet } from '../../../../utils/functions/isTestnet/isTestnet.js';
 import 'viem/chains';
+import { getEOAWallet } from '../../../../utils/functions/getEOAWallet/getEOAWallet.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
-import '../../../../config/ApiEndpoint.js';
-import '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '../../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
+import '../../../../context/WalletContext/WalletContext.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import { useIsTurnkeyWallet } from '../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import { usePromise } from '../../../../utils/hooks/usePromise/usePromise.js';
@@ -40,13 +41,14 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
-import '../../../../components/ShadowDOM/ShadowDOM.js';
-import '../../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
+import { Skeleton } from '../../../../components/Skeleton/Skeleton.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
@@ -55,17 +57,18 @@ import { AuthProviderIcon } from '../../../../components/AuthProviderIcon/AuthPr
 import { getExportKeysOption } from '../../helpers/helpers.js';
 import 'qrcode';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import 'formik';
-import '../../../../components/IconButton/IconButton.js';
 import { Alert } from '../../../../components/Alert/Alert.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import { usePasskeyContext } from '../../../../context/PasskeyContext/PasskeyContext.js';
-import '@dynamic-labs/viem-utils';
+import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/Input/Input.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../views/WalletList/WalletList.js';
@@ -75,12 +78,13 @@ import '@hcaptcha/react-hcaptcha';
 import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import { Balance } from '../Balance/Balance.js';
+import '../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
 import { ActiveBitcoinWalletAddresses } from './ActiveBitcoinWalletAddresses/ActiveBitcoinWalletAddresses.js';
-import { ActiveWalletAddreess } from './ActiveWalletAddress/ActiveWalletAddress.js';
+import { ActiveWalletAddress } from './ActiveWalletAddress/ActiveWalletAddress.js';
 
 const ICON_SIZE = 28;
-const ActiveWalletInformation = () => {
-    var _a, _b;
+const ActiveWalletInformation = ({ isLoading = false, }) => {
+    var _a, _b, _c, _d;
     const { t } = useTranslation();
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     const { primaryWallet, authToken, network, projectSettings, handleLogOut, user, } = useInternalDynamicContext();
@@ -91,11 +95,11 @@ const ActiveWalletInformation = () => {
     const { data: testnet } = usePromise(() => isTestnet(primaryWallet), { deps: [network] });
     const exportKeysOption = getExportKeysOption(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
     const { showAlert } = usePasskeyContext();
-    const wallet = isAccountAbstractionWallet(primaryWallet)
-        ? createOwnerWallet(primaryWallet, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || [])
-        : primaryWallet;
+    const wallet = getEOAWallet(primaryWallet, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || []);
     const isBitcoin = primaryWallet && isBitcoinConnector(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
-    const isEmbeddedWallet = Boolean(wallet && ((_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.startsWith('turnkey')));
+    const isEmbeddedWallet = Boolean(wallet &&
+        (((_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.startsWith('turnkey')) ||
+            ((_d = (_c = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _c === void 0 ? void 0 : _c.key) === null || _d === void 0 ? void 0 : _d.startsWith('coinbase'))));
     const options = [
         {
             Icon: null,
@@ -114,7 +118,7 @@ const ActiveWalletInformation = () => {
             callback: () => setDynamicWidgetView('wallet-settings'),
             fontColor: showAlert() ? 'primary' : undefined,
             fontWeight: showAlert() ? 'bold' : undefined,
-            hide: !(wallet && wallet.connector.key.startsWith('turnkey')),
+            hide: !isEmbeddedWallet,
             text: 'Wallet settings',
         },
         {
@@ -139,16 +143,13 @@ const ActiveWalletInformation = () => {
         if (isBitcoin) {
             return (jsx(ActiveBitcoinWalletAddresses, { wallet: primaryWallet, menuOption: options }));
         }
-        else if (isEmbeddedWallet) {
-            return (jsx(ActiveWalletAddreess, { address: address, nameServiceName: user === null || user === void 0 ? void 0 : user.email, menuOption: options }));
-        }
         else {
-            return (jsx(ActiveWalletAddreess, { address: address, nameServiceName: nameService === null || nameService === void 0 ? void 0 : nameService.name, menuOption: options }));
+            return (jsx(ActiveWalletAddress, { address: address, nameServiceName: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || (user === null || user === void 0 ? void 0 : user.email), menuOption: options, isLoading: isLoading }));
         }
     };
     return (jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information__header', children: [jsx("div", { className: 'active-wallet-information__avatar', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", { className: 'active-wallet-information__avatar__name-service', children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsx("div", { className: 'active-wallet-information__wallet-img', children: jsx(AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: !isEmbeddedWallet }) })) }), jsxs("div", { className: 'active-wallet-information__details', children: [jsx("div", { className: classNames('active-wallet-information__addresses-container', {
                                             'active-wallet-information__addresses-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: activeWalletAddress() }), jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), showTestnetAlert && (jsx(Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
+                                        }), children: activeWalletAddress() }), jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true, isLoading: isLoading })] })] }), showTestnetAlert && (jsx(Alert, { variant: 'warning', copykey: 'dyn_active_wallet_info.testnet_warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet ? (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network })) : (jsx(Skeleton, { className: 'balance-container__skeleton' }))] })] }));
 };
 
 export { ActiveWalletInformation };

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

@@ -22,12 +22,14 @@ require('../../../../shared/consts/index.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
+require('../../../../config/ApiEndpoint.cjs');
+require('react-international-phone');
 require('viem/chains');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
-require('../../../../config/ApiEndpoint.cjs');
-require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('../../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
+require('../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
 require('yup');
@@ -37,13 +39,14 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUse
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../../components/ShadowDOM/ShadowDOM.cjs');
-require('../../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
+var Skeleton = require('../../../../components/Skeleton/Skeleton.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
@@ -53,30 +56,37 @@ require('../../../../context/LoadingContext/LoadingContext.cjs');
 var helpers = require('../../helpers/helpers.cjs');
 require('qrcode');
 require('../../context/DynamicWidgetContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('formik');
-require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
-require('@dynamic-labs/viem-utils');
+require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/Input/Input.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../views/WalletList/WalletList.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.cjs');
 
 const Balance = ({ connector, address, network, className }) => {
-    const [chain] = useFetchCurrency.useFetchCurrency(connector, network);
-    const [balance] = useFetchBalance.useFetchBalance({ address, chain, connector, network });
+    const { currency, isLoading: isLoadingCurrency } = useFetchCurrency.useFetchCurrency(connector, network);
+    const { balance, isLoading: isLoadingBalance } = useFetchBalance.useFetchBalance({
+        address,
+        chain: currency,
+        connector,
+        network,
+    });
     if (!balance)
         return null;
-    return (jsxRuntime.jsxs(Typography.Typography, { className: className, variant: 'body_normal', color: 'primary', children: [helpers.roundBalance(balance), ' ', jsxRuntime.jsx(Typography.Typography, { as: 'span', variant: 'body_normal', color: 'secondary', children: chain })] }));
+    return (jsxRuntime.jsxs(Typography.Typography, { className: className, variant: 'body_normal', color: 'primary', children: [isLoadingBalance ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'balance-skeleton' })) : (helpers.roundBalance(balance)), ' ', !isLoadingCurrency && (jsxRuntime.jsx(Typography.Typography, { as: 'span', variant: 'body_normal', color: 'secondary', children: currency }))] }));
 };
 
 exports.Balance = Balance;

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

@@ -18,12 +18,14 @@ import '../../../../shared/consts/index.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
+import '../../../../config/ApiEndpoint.js';
+import 'react-international-phone';
 import 'viem/chains';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
-import '../../../../config/ApiEndpoint.js';
-import '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '../../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
+import '../../../../context/WalletContext/WalletContext.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
 import 'yup';
@@ -33,13 +35,14 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
-import '../../../../components/ShadowDOM/ShadowDOM.js';
-import '../../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
+import { Skeleton } from '../../../../components/Skeleton/Skeleton.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
@@ -49,30 +52,37 @@ import '../../../../context/LoadingContext/LoadingContext.js';
 import { roundBalance } from '../../helpers/helpers.js';
 import 'qrcode';
 import '../../context/DynamicWidgetContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import 'formik';
-import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
-import '@dynamic-labs/viem-utils';
+import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/Input/Input.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../views/WalletList/WalletList.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
 
 const Balance = ({ connector, address, network, className }) => {
-    const [chain] = useFetchCurrency(connector, network);
-    const [balance] = useFetchBalance({ address, chain, connector, network });
+    const { currency, isLoading: isLoadingCurrency } = useFetchCurrency(connector, network);
+    const { balance, isLoading: isLoadingBalance } = useFetchBalance({
+        address,
+        chain: currency,
+        connector,
+        network,
+    });
     if (!balance)
         return null;
-    return (jsxs(Typography, { className: className, variant: 'body_normal', color: 'primary', children: [roundBalance(balance), ' ', jsx(Typography, { as: 'span', variant: 'body_normal', color: 'secondary', children: chain })] }));
+    return (jsxs(Typography, { className: className, variant: 'body_normal', color: 'primary', children: [isLoadingBalance ? (jsx(Skeleton, { className: 'balance-skeleton' })) : (roundBalance(balance)), ' ', !isLoadingCurrency && (jsx(Typography, { as: 'span', variant: 'body_normal', color: 'secondary', children: currency }))] }));
 };
 
 export { Balance };