@dynamic-labs/sdk-react-core 4.80.0 → 4.82.0

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

@@ -0,0 +1,193 @@
+'use client'
+'use strict';
+
+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 walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var Skeleton = require('../../../../components/Skeleton/Skeleton.cjs');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
+require('@dynamic-labs/iconic');
+var midnightShielded = require('../../../../shared/assets/midnight-shielded.cjs');
+var midnightUnshielded = require('../../../../shared/assets/midnight-unshielded.cjs');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../../../shared/consts/index.cjs');
+require('../../../../events/dynamicEvents.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+require('../../../../store/state/nonce/nonce.cjs');
+require('@dynamic-labs-sdk/client/core');
+require('eventemitter3');
+require('@dynamic-labs-sdk/client');
+require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/locale');
+require('../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../../../store/state/primaryWalletId/primaryWalletId.cjs');
+require('../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
+require('../../../../utils/functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../store/state/authMode/authMode.cjs');
+require('../../../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../../../utils/functions/compareChains/compareChains.cjs');
+require('../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
+var usePromise = require('../../../../utils/hooks/usePromise/usePromise.cjs');
+require('@dynamic-labs/types');
+require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../../context/WalletContext/WalletContext.cjs');
+require('../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('yup');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../views/CollectUserDataView/useFields.cjs');
+require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../store/state/walletOptions/walletOptions.cjs');
+require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/Input/Input.cjs');
+require('../../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.cjs');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('qrcode');
+require('formik');
+require('../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
+require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../context/DynamicWidgetContext.cjs');
+require('../../../../utils/hooks/useGetMfaToken/useGetMfaToken.cjs');
+require('../../../../utils/hooks/useWalletBackup/useWalletBackup.cjs');
+require('../../../../utils/hooks/useWalletBackup/types.cjs');
+require('../../../../utils/hooks/useWalletBackup/cloudProviders.cjs');
+require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../helpers/convertExchangeKeyAndProviderEnum.cjs');
+require('../../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
+require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.cjs');
+require('../../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../../context/OnrampContext/OnrampContext.cjs');
+require('../../../../store/state/sendBalances.cjs');
+require('../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
+require('../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../PasskeyCard/PasskeyCard.cjs');
+require('../../views/CryptoComOnramp/CryptoComOnramp.cjs');
+require('../../../../../index.cjs');
+require('../../views/ManagePasskeysMfaWidgetView/ManagePasskeysMfaWidgetView.cjs');
+require('../../views/ManageTotpMfaWidgetView/ManageTotpMfaWidgetView.cjs');
+require('../../views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
+require('../../../../store/state/tokenBalances.cjs');
+require('../../../../store/state/multichainBalances.cjs');
+require('@dynamic-labs/store');
+require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
+
+const DUST_SEGMENTS = 20;
+const truncateToDecimals = (value, decimals) => {
+    const [whole, fractional] = value.split('.');
+    if (!fractional || decimals <= 0)
+        return whole;
+    const sliced = fractional.slice(0, decimals);
+    let end = sliced.length;
+    while (end > 0 && sliced[end - 1] === '0') {
+        end -= 1;
+    }
+    const trimmed = sliced.slice(0, end);
+    return trimmed.length > 0 ? `${whole}.${trimmed}` : whole;
+};
+const getDustFillCount = (balance, cap) => {
+    const b = parseFloat(balance);
+    const c = parseFloat(cap);
+    if (!c || isNaN(b) || isNaN(c))
+        return 0;
+    return Math.round(Math.min(b / c, 1) * DUST_SEGMENTS);
+};
+const TABS = [
+    {
+        copykey: 'dyn_active_wallet_info.midnight_shielded_balance',
+        id: 'shielded',
+    },
+    {
+        copykey: 'dyn_active_wallet_info.midnight_unshielded_balance',
+        id: 'unshielded',
+    },
+];
+const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
+    const { t } = reactI18next.useTranslation();
+    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const [activeTab, setActiveTab] = React.useState('shielded');
+    const walletAddress = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
+    const enabled = Boolean(!isLoading && primaryWallet && walletConnectorCore.isMidnightConnector(primaryWallet.connector));
+    const { data: balances, isLoading: balancesLoading } = usePromise.usePromise(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!primaryWallet ||
+            !walletConnectorCore.isMidnightConnector(primaryWallet.connector) ||
+            !walletConnectorCore.isMidnightWallet(primaryWallet)) {
+            return undefined;
+        }
+        return primaryWallet.getFormattedBalances();
+    }), {
+        deps: [walletAddress, primaryWallet],
+        enabled,
+    });
+    const { dustBalance, shieldedBalance, unshieldedBalance } = balances !== null && balances !== void 0 ? balances : {};
+    if (isLoading || balancesLoading) {
+        return (jsxRuntime.jsx("div", { className: 'active-midnight-balance', children: jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-midnight-balance__skeleton' }) }));
+    }
+    const dustFill = dustBalance
+        ? getDustFillCount(dustBalance.balance, dustBalance.cap)
+        : 0;
+    const dustBalanceDisplay = dustBalance
+        ? {
+            balance: truncateToDecimals(dustBalance.balance, 2),
+            cap: truncateToDecimals(dustBalance.cap, 2),
+        }
+        : undefined;
+    const activeBalance = activeTab === 'shielded' ? shieldedBalance : unshieldedBalance;
+    return (jsxRuntime.jsx("div", { className: 'active-midnight-balance', children: jsxRuntime.jsxs("div", { className: 'active-midnight-balance__card', children: [dustBalance && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'active-midnight-balance__dust', children: [jsxRuntime.jsxs("div", { className: 'active-midnight-balance__dust-header', children: [jsxRuntime.jsxs("div", { className: 'active-midnight-balance__dust-title', children: [jsxRuntime.jsx("svg", { className: 'active-midnight-balance__dust-icon', width: '12', height: '12', viewBox: '0 0 24 24', children: jsxRuntime.jsx("path", { d: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z' }) }), jsxRuntime.jsx("span", { className: 'active-midnight-balance__dust-label', "data-copykey": 'dyn_active_wallet_info.midnight_dust_generating', children: t('dyn_active_wallet_info.midnight_dust_generating') })] }), jsxRuntime.jsxs("span", { className: 'active-midnight-balance__dust-count', children: [dustBalanceDisplay === null || dustBalanceDisplay === void 0 ? void 0 : dustBalanceDisplay.balance, "/", dustBalanceDisplay === null || dustBalanceDisplay === void 0 ? void 0 : dustBalanceDisplay.cap] })] }), jsxRuntime.jsx("div", { className: 'active-midnight-balance__dust-bar', children: Array.from({ length: DUST_SEGMENTS }, (_, i) => (jsxRuntime.jsx("div", { className: [
+                                            'active-midnight-balance__dust-segment',
+                                            i === 0 && 'active-midnight-balance__dust-segment--first',
+                                            i === DUST_SEGMENTS - 1 &&
+                                                'active-midnight-balance__dust-segment--last',
+                                            i < dustFill &&
+                                                'active-midnight-balance__dust-segment--filled',
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' ') }, i))) })] }), jsxRuntime.jsx("div", { className: 'active-midnight-balance__divider' })] })), jsxRuntime.jsx("div", { className: 'active-midnight-balance__tab-bar', children: TABS.map(({ id, copykey }) => (jsxRuntime.jsx("button", { className: classNames.classNames('active-midnight-balance__tab', {
+                            'active-midnight-balance__tab--active': activeTab === id,
+                        }), "data-copykey": copykey, onClick: () => setActiveTab(id), children: t(copykey) }, id))) }), jsxRuntime.jsxs("div", { className: 'active-midnight-balance__pocket', children: [activeTab === 'shielded' ? (jsxRuntime.jsx(midnightShielded.ReactComponent, { className: 'active-midnight-balance__pocket-icon' })) : (jsxRuntime.jsx(midnightUnshielded.ReactComponent, { className: 'active-midnight-balance__pocket-icon' })), jsxRuntime.jsxs("span", { className: 'active-midnight-balance__amount', children: [activeBalance !== null && activeBalance !== void 0 ? activeBalance : '—', " NIGHT"] })] })] }) }));
+};
+
+exports.ActiveMidnightWalletBalance = ActiveMidnightWalletBalance;

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import './ActiveMidnightWalletBalance.scss';
+type Props = {
+    isLoading?: boolean;
+};
+export declare const ActiveMidnightWalletBalance: FC<Props>;
+export {};

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

@@ -0,0 +1,189 @@
+'use client'
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { isMidnightConnector, isMidnightWallet } from '@dynamic-labs/wallet-connector-core';
+import { Skeleton } from '../../../../components/Skeleton/Skeleton.js';
+import '../../../../context/DynamicContext/DynamicContext.js';
+import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '@dynamic-labs/iconic';
+import { ReactComponent as SvgMidnightShielded } from '../../../../shared/assets/midnight-shielded.js';
+import { ReactComponent as SvgMidnightUnshielded } from '../../../../shared/assets/midnight-unshielded.js';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import '../../../../utils/constants/values.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../../../shared/consts/index.js';
+import '../../../../events/dynamicEvents.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../../../store/state/nonce/nonce.js';
+import '@dynamic-labs-sdk/client/core';
+import 'eventemitter3';
+import '@dynamic-labs-sdk/client';
+import '../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/locale';
+import '../../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../../../store/state/primaryWalletId/primaryWalletId.js';
+import '../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+import '../../../../utils/functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../../store/state/authMode/authMode.js';
+import '../../../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../../../utils/functions/compareChains/compareChains.js';
+import '../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
+import { usePromise } from '../../../../utils/hooks/usePromise/usePromise.js';
+import '@dynamic-labs/types';
+import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../../context/LoadingContext/LoadingContext.js';
+import '../../../../context/WalletContext/WalletContext.js';
+import '../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import 'yup';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../views/CollectUserDataView/useFields.js';
+import '../../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../store/state/walletOptions/walletOptions.js';
+import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+import '../../../../components/Alert/Alert.js';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/Input/Input.js';
+import '../../../../components/IsBrowser/IsBrowser.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.js';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'qrcode';
+import 'formik';
+import '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
+import '../../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../context/DynamicWidgetContext.js';
+import '../../../../utils/hooks/useGetMfaToken/useGetMfaToken.js';
+import '../../../../utils/hooks/useWalletBackup/useWalletBackup.js';
+import '../../../../utils/hooks/useWalletBackup/types.js';
+import '../../../../utils/hooks/useWalletBackup/cloudProviders.js';
+import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../helpers/convertExchangeKeyAndProviderEnum.js';
+import '../../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
+import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.js';
+import '../../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../../context/OnrampContext/OnrampContext.js';
+import '../../../../store/state/sendBalances.js';
+import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';
+import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
+import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
+import '../PasskeyCard/PasskeyCard.js';
+import '../../views/CryptoComOnramp/CryptoComOnramp.js';
+import '../../../../../index.js';
+import '../../views/ManagePasskeysMfaWidgetView/ManagePasskeysMfaWidgetView.js';
+import '../../views/ManageTotpMfaWidgetView/ManageTotpMfaWidgetView.js';
+import '../../views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../../../store/state/tokenBalances.js';
+import '../../../../store/state/multichainBalances.js';
+import '@dynamic-labs/store';
+import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
+
+const DUST_SEGMENTS = 20;
+const truncateToDecimals = (value, decimals) => {
+    const [whole, fractional] = value.split('.');
+    if (!fractional || decimals <= 0)
+        return whole;
+    const sliced = fractional.slice(0, decimals);
+    let end = sliced.length;
+    while (end > 0 && sliced[end - 1] === '0') {
+        end -= 1;
+    }
+    const trimmed = sliced.slice(0, end);
+    return trimmed.length > 0 ? `${whole}.${trimmed}` : whole;
+};
+const getDustFillCount = (balance, cap) => {
+    const b = parseFloat(balance);
+    const c = parseFloat(cap);
+    if (!c || isNaN(b) || isNaN(c))
+        return 0;
+    return Math.round(Math.min(b / c, 1) * DUST_SEGMENTS);
+};
+const TABS = [
+    {
+        copykey: 'dyn_active_wallet_info.midnight_shielded_balance',
+        id: 'shielded',
+    },
+    {
+        copykey: 'dyn_active_wallet_info.midnight_unshielded_balance',
+        id: 'unshielded',
+    },
+];
+const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
+    const { t } = useTranslation();
+    const { primaryWallet } = useInternalDynamicContext();
+    const [activeTab, setActiveTab] = useState('shielded');
+    const walletAddress = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
+    const enabled = Boolean(!isLoading && primaryWallet && isMidnightConnector(primaryWallet.connector));
+    const { data: balances, isLoading: balancesLoading } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!primaryWallet ||
+            !isMidnightConnector(primaryWallet.connector) ||
+            !isMidnightWallet(primaryWallet)) {
+            return undefined;
+        }
+        return primaryWallet.getFormattedBalances();
+    }), {
+        deps: [walletAddress, primaryWallet],
+        enabled,
+    });
+    const { dustBalance, shieldedBalance, unshieldedBalance } = balances !== null && balances !== void 0 ? balances : {};
+    if (isLoading || balancesLoading) {
+        return (jsx("div", { className: 'active-midnight-balance', children: jsx(Skeleton, { className: 'active-midnight-balance__skeleton' }) }));
+    }
+    const dustFill = dustBalance
+        ? getDustFillCount(dustBalance.balance, dustBalance.cap)
+        : 0;
+    const dustBalanceDisplay = dustBalance
+        ? {
+            balance: truncateToDecimals(dustBalance.balance, 2),
+            cap: truncateToDecimals(dustBalance.cap, 2),
+        }
+        : undefined;
+    const activeBalance = activeTab === 'shielded' ? shieldedBalance : unshieldedBalance;
+    return (jsx("div", { className: 'active-midnight-balance', children: jsxs("div", { className: 'active-midnight-balance__card', children: [dustBalance && (jsxs(Fragment, { children: [jsxs("div", { className: 'active-midnight-balance__dust', children: [jsxs("div", { className: 'active-midnight-balance__dust-header', children: [jsxs("div", { className: 'active-midnight-balance__dust-title', children: [jsx("svg", { className: 'active-midnight-balance__dust-icon', width: '12', height: '12', viewBox: '0 0 24 24', children: jsx("path", { d: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z' }) }), jsx("span", { className: 'active-midnight-balance__dust-label', "data-copykey": 'dyn_active_wallet_info.midnight_dust_generating', children: t('dyn_active_wallet_info.midnight_dust_generating') })] }), jsxs("span", { className: 'active-midnight-balance__dust-count', children: [dustBalanceDisplay === null || dustBalanceDisplay === void 0 ? void 0 : dustBalanceDisplay.balance, "/", dustBalanceDisplay === null || dustBalanceDisplay === void 0 ? void 0 : dustBalanceDisplay.cap] })] }), jsx("div", { className: 'active-midnight-balance__dust-bar', children: Array.from({ length: DUST_SEGMENTS }, (_, i) => (jsx("div", { className: [
+                                            'active-midnight-balance__dust-segment',
+                                            i === 0 && 'active-midnight-balance__dust-segment--first',
+                                            i === DUST_SEGMENTS - 1 &&
+                                                'active-midnight-balance__dust-segment--last',
+                                            i < dustFill &&
+                                                'active-midnight-balance__dust-segment--filled',
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' ') }, i))) })] }), jsx("div", { className: 'active-midnight-balance__divider' })] })), jsx("div", { className: 'active-midnight-balance__tab-bar', children: TABS.map(({ id, copykey }) => (jsx("button", { className: classNames('active-midnight-balance__tab', {
+                            'active-midnight-balance__tab--active': activeTab === id,
+                        }), "data-copykey": copykey, onClick: () => setActiveTab(id), children: t(copykey) }, id))) }), jsxs("div", { className: 'active-midnight-balance__pocket', children: [activeTab === 'shielded' ? (jsx(SvgMidnightShielded, { className: 'active-midnight-balance__pocket-icon' })) : (jsx(SvgMidnightUnshielded, { className: 'active-midnight-balance__pocket-icon' })), jsxs("span", { className: 'active-midnight-balance__amount', children: [activeBalance !== null && activeBalance !== void 0 ? activeBalance : '—', " NIGHT"] })] })] }) }));
+};
+
+export { ActiveMidnightWalletBalance };

package/src/lib/widgets/DynamicWidget/components/ActiveMidnightWalletBalance/index.d.ts

@@ -0,0 +1 @@
+export { ActiveMidnightWalletBalance } from './ActiveMidnightWalletBalance';