@dynamic-labs/sdk-react-core 4.91.0 → 4.91.1

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

@@ -84,7 +84,10 @@ const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
     React.useEffect(() => {
         if (!dustSyncing)
             return undefined;
-        const id = setInterval(() => setDustPollTick((tick) => tick + 1), 15000);
+        // Poll frequently while syncing so the gauge appears within a couple
+        // seconds of dust completing (sync now finishes in ~4s). The effect stops
+        // the moment `dustSyncing` flips false, so this adds no steady-state load.
+        const id = setInterval(() => setDustPollTick((tick) => tick + 1), 2500);
         return () => clearInterval(id);
     }, [dustSyncing]);
     // `registerDust` is a WaaS-only connector method (external/injected Midnight
@@ -134,7 +137,7 @@ const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
                                         .join(' ') }, segmentKey))) })] }), jsxRuntime.jsx("div", { className: 'active-midnight-balance__divider' })] }));
         }
         if (isWaasWallet) {
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'active-midnight-balance__dust', children: [jsxRuntime.jsx("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.jsx(Button.Button, { buttonPadding: 'small', buttonVariant: 'secondary', buttonClassName: 'active-midnight-balance__register-dust-button', onClick: handleRegisterDust, "data-copykey": 'dyn_active_wallet_info.midnight_register_dust', children: t('dyn_active_wallet_info.midnight_register_dust') })] }), jsxRuntime.jsx("div", { className: 'active-midnight-balance__divider' })] }));
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'active-midnight-balance__dust', children: [jsxRuntime.jsx("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_not_registered', children: t('dyn_active_wallet_info.midnight_dust_not_registered') })] }) }), jsxRuntime.jsx(Button.Button, { buttonPadding: 'small', buttonVariant: 'secondary', buttonClassName: 'active-midnight-balance__register-dust-button', onClick: handleRegisterDust, "data-copykey": 'dyn_active_wallet_info.midnight_register_dust', children: t('dyn_active_wallet_info.midnight_register_dust') })] }), jsxRuntime.jsx("div", { className: 'active-midnight-balance__divider' })] }));
         }
         return null;
     };

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

@@ -80,7 +80,10 @@ const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
     useEffect(() => {
         if (!dustSyncing)
             return undefined;
-        const id = setInterval(() => setDustPollTick((tick) => tick + 1), 15000);
+        // Poll frequently while syncing so the gauge appears within a couple
+        // seconds of dust completing (sync now finishes in ~4s). The effect stops
+        // the moment `dustSyncing` flips false, so this adds no steady-state load.
+        const id = setInterval(() => setDustPollTick((tick) => tick + 1), 2500);
         return () => clearInterval(id);
     }, [dustSyncing]);
     // `registerDust` is a WaaS-only connector method (external/injected Midnight
@@ -130,7 +133,7 @@ const ActiveMidnightWalletBalance = ({ isLoading = false, }) => {
                                         .join(' ') }, segmentKey))) })] }), jsx("div", { className: 'active-midnight-balance__divider' })] }));
         }
         if (isWaasWallet) {
-            return (jsxs(Fragment, { children: [jsxs("div", { className: 'active-midnight-balance__dust', children: [jsx("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') })] }) }), jsx(Button, { buttonPadding: 'small', buttonVariant: 'secondary', buttonClassName: 'active-midnight-balance__register-dust-button', onClick: handleRegisterDust, "data-copykey": 'dyn_active_wallet_info.midnight_register_dust', children: t('dyn_active_wallet_info.midnight_register_dust') })] }), jsx("div", { className: 'active-midnight-balance__divider' })] }));
+            return (jsxs(Fragment, { children: [jsxs("div", { className: 'active-midnight-balance__dust', children: [jsx("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_not_registered', children: t('dyn_active_wallet_info.midnight_dust_not_registered') })] }) }), jsx(Button, { buttonPadding: 'small', buttonVariant: 'secondary', buttonClassName: 'active-midnight-balance__register-dust-button', onClick: handleRegisterDust, "data-copykey": 'dyn_active_wallet_info.midnight_register_dust', children: t('dyn_active_wallet_info.midnight_register_dust') })] }), jsx("div", { className: 'active-midnight-balance__divider' })] }));
         }
         return null;
     };

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

@@ -4,7 +4,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var reactI18next = require('react-i18next');
+var sdkApiCore = require('@dynamic-labs/sdk-api-core');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var CopyButton = require('../../../../components/CopyButton/CopyButton.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
@@ -12,13 +15,14 @@ var QRCode = require('../../../../components/QRCode/QRCode.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/DynamicContext/useDynamicContext/useDynamicContext.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
-require('react');
 var arrowLeft = require('../../../../shared/assets/arrow-left.cjs');
 var copy = require('../../../../shared/assets/copy.cjs');
 var embeddedWalletIcon = require('../../../../shared/assets/embedded-wallet-icon.cjs');
 require('@dynamic-labs/iconic');
 require('../../../../context/ViewContext/ViewContext.cjs');
 var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+var getWalletAdditionalAddressByType = require('../../../../utils/functions/getWalletAdditionalAddressByType/getWalletAdditionalAddressByType.cjs');
 var usePromise = require('../../../../utils/hooks/usePromise/usePromise.cjs');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 var useFetchChain = require('../../hooks/useFetchChain/useFetchChain.cjs');
@@ -30,13 +34,25 @@ const DepositView = () => {
     const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
     const { chain } = useFetchChain.useFetchChain(walletConnector);
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const [midnightAddressType, setMidnightAddressType] = React.useState('unshielded');
     const { data: ens } = usePromise.usePromise(() => getNameService(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address), { deps: [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address], initialData: undefined });
     const ensName = (_a = ens === null || ens === void 0 ? void 0 : ens.name) !== null && _a !== void 0 ? _a : null;
     if (!primaryWallet) {
         return null;
     }
+    const shieldedAddress = walletConnectorCore.isMidnightWallet(primaryWallet)
+        ? getWalletAdditionalAddressByType.getWalletAdditionalAddressByType(sdkApiCore.WalletAddressType.MidnightShielded, primaryWallet)
+        : undefined;
+    const showMidnightToggle = Boolean(shieldedAddress);
+    const depositAddress = showMidnightToggle && midnightAddressType === 'shielded' && shieldedAddress
+        ? shieldedAddress
+        : primaryWallet.address;
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => setDynamicWidgetView('choose-wallet-funding-method'), children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: 'deposit-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', copykey: 'dyn_deposit.title', children: t('dyn_deposit.title') }) }), jsxRuntime.jsxs("div", { className: 'deposit-view__content', children: [jsxRuntime.jsx(QRCode.QRCode, { className: 'deposit-view__content__qr-code', value: primaryWallet.address, Icon: jsxRuntime.jsx(embeddedWalletIcon.ReactComponent, {}), logoSize: 40, logoMargin: 64, size: 215 }), jsxRuntime.jsxs("div", { className: 'deposit-view__content__address', children: [ensName && (jsxRuntime.jsx(Typography.Typography, { className: 'deposit-view__content__address__ens', variant: 'title', children: ensName })), jsxRuntime.jsxs("div", { className: 'deposit-view__content__address__wrapper', children: [jsxRuntime.jsx(Typography.Typography, { "data-testid": 'deposit-view-address', variant: 'title', weight: 'medium', className: 'deposit-view__content__address__wrapper__text', children: shortenWalletAddress.shortenWalletAddress(primaryWallet.address) }), jsxRuntime.jsx(CopyButton.CopyButton, { variant: 'text', textToCopy: primaryWallet.address, className: 'deposit-view__content__address__wrapper__copy', children: jsxRuntime.jsx(copy.ReactComponent, { "data-testid": 'copy-address' }) })] })] }), jsxRuntime.jsxs(Typography.Typography, { className: 'deposit-view__content__network', variant: 'body_small', color: 'secondary', copykey: 'dyn_deposit.receive_funds_on', children: [t('dyn_deposit.receive_funds_on'), chain === null || chain === void 0 ? void 0 : chain.name] })] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'deposit-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', copykey: 'dyn_deposit.title', children: t('dyn_deposit.title') }) }), jsxRuntime.jsxs("div", { className: 'deposit-view__content', children: [showMidnightToggle && (jsxRuntime.jsxs("div", { className: 'deposit-view__content__toggle', children: [jsxRuntime.jsx("button", { type: 'button', "data-testid": 'deposit-toggle-unshielded', className: classNames.classNames('deposit-view__content__toggle__option', {
+                                    'deposit-view__content__toggle__option--active': midnightAddressType === 'unshielded',
+                                }), "data-copykey": 'dyn_active_wallet_info.midnight_unshielded_address', onClick: () => setMidnightAddressType('unshielded'), children: t('dyn_active_wallet_info.midnight_unshielded_address') }), jsxRuntime.jsx("button", { type: 'button', "data-testid": 'deposit-toggle-shielded', className: classNames.classNames('deposit-view__content__toggle__option', {
+                                    'deposit-view__content__toggle__option--active': midnightAddressType === 'shielded',
+                                }), "data-copykey": 'dyn_active_wallet_info.midnight_shielded_address', onClick: () => setMidnightAddressType('shielded'), children: t('dyn_active_wallet_info.midnight_shielded_address') })] })), jsxRuntime.jsx(QRCode.QRCode, { className: 'deposit-view__content__qr-code', value: depositAddress, Icon: jsxRuntime.jsx(embeddedWalletIcon.ReactComponent, {}), logoSize: 40, logoMargin: 64, size: 215 }), jsxRuntime.jsxs("div", { className: 'deposit-view__content__address', children: [ensName && (jsxRuntime.jsx(Typography.Typography, { className: 'deposit-view__content__address__ens', variant: 'title', children: ensName })), jsxRuntime.jsxs("div", { className: 'deposit-view__content__address__wrapper', children: [jsxRuntime.jsx(Typography.Typography, { "data-testid": 'deposit-view-address', variant: 'title', weight: 'medium', className: 'deposit-view__content__address__wrapper__text', children: shortenWalletAddress.shortenWalletAddress(depositAddress) }), jsxRuntime.jsx(CopyButton.CopyButton, { variant: 'text', textToCopy: depositAddress, className: 'deposit-view__content__address__wrapper__copy', children: jsxRuntime.jsx(copy.ReactComponent, { "data-testid": 'copy-address' }) })] })] }), jsxRuntime.jsxs(Typography.Typography, { className: 'deposit-view__content__network', variant: 'body_small', color: 'secondary', copykey: 'dyn_deposit.receive_funds_on', children: [t('dyn_deposit.receive_funds_on'), chain === null || chain === void 0 ? void 0 : chain.name] })] })] }));
 };
 
 exports.DepositView = DepositView;

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

@@ -1,6 +1,9 @@
 'use client'
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { WalletAddressType } from '@dynamic-labs/sdk-api-core';
+import { isMidnightWallet } from '@dynamic-labs/wallet-connector-core';
 import { CopyButton } from '../../../../components/CopyButton/CopyButton.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
@@ -8,13 +11,14 @@ import { QRCode } from '../../../../components/QRCode/QRCode.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/DynamicContext/useDynamicContext/useDynamicContext.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
-import 'react';
 import { ReactComponent as SvgArrowLeft } from '../../../../shared/assets/arrow-left.js';
 import { ReactComponent as SvgCopy } from '../../../../shared/assets/copy.js';
 import { ReactComponent as SvgEmbeddedWalletIcon } from '../../../../shared/assets/embedded-wallet-icon.js';
 import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
 import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+import { getWalletAdditionalAddressByType } from '../../../../utils/functions/getWalletAdditionalAddressByType/getWalletAdditionalAddressByType.js';
 import { usePromise } from '../../../../utils/hooks/usePromise/usePromise.js';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 import { useFetchChain } from '../../hooks/useFetchChain/useFetchChain.js';
@@ -26,13 +30,25 @@ const DepositView = () => {
     const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
     const { chain } = useFetchChain(walletConnector);
     const { setDynamicWidgetView } = useWidgetContext();
+    const [midnightAddressType, setMidnightAddressType] = useState('unshielded');
     const { data: ens } = usePromise(() => getNameService(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address), { deps: [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address], initialData: undefined });
     const ensName = (_a = ens === null || ens === void 0 ? void 0 : ens.name) !== null && _a !== void 0 ? _a : null;
     if (!primaryWallet) {
         return null;
     }
+    const shieldedAddress = isMidnightWallet(primaryWallet)
+        ? getWalletAdditionalAddressByType(WalletAddressType.MidnightShielded, primaryWallet)
+        : undefined;
+    const showMidnightToggle = Boolean(shieldedAddress);
+    const depositAddress = showMidnightToggle && midnightAddressType === 'shielded' && shieldedAddress
+        ? shieldedAddress
+        : primaryWallet.address;
     const backButton = (jsx(IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => setDynamicWidgetView('choose-wallet-funding-method'), children: jsx(SvgArrowLeft, {}) }));
-    return (jsxs("div", { className: 'deposit-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', copykey: 'dyn_deposit.title', children: t('dyn_deposit.title') }) }), jsxs("div", { className: 'deposit-view__content', children: [jsx(QRCode, { className: 'deposit-view__content__qr-code', value: primaryWallet.address, Icon: jsx(SvgEmbeddedWalletIcon, {}), logoSize: 40, logoMargin: 64, size: 215 }), jsxs("div", { className: 'deposit-view__content__address', children: [ensName && (jsx(Typography, { className: 'deposit-view__content__address__ens', variant: 'title', children: ensName })), jsxs("div", { className: 'deposit-view__content__address__wrapper', children: [jsx(Typography, { "data-testid": 'deposit-view-address', variant: 'title', weight: 'medium', className: 'deposit-view__content__address__wrapper__text', children: shortenWalletAddress(primaryWallet.address) }), jsx(CopyButton, { variant: 'text', textToCopy: primaryWallet.address, className: 'deposit-view__content__address__wrapper__copy', children: jsx(SvgCopy, { "data-testid": 'copy-address' }) })] })] }), jsxs(Typography, { className: 'deposit-view__content__network', variant: 'body_small', color: 'secondary', copykey: 'dyn_deposit.receive_funds_on', children: [t('dyn_deposit.receive_funds_on'), chain === null || chain === void 0 ? void 0 : chain.name] })] })] }));
+    return (jsxs("div", { className: 'deposit-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', copykey: 'dyn_deposit.title', children: t('dyn_deposit.title') }) }), jsxs("div", { className: 'deposit-view__content', children: [showMidnightToggle && (jsxs("div", { className: 'deposit-view__content__toggle', children: [jsx("button", { type: 'button', "data-testid": 'deposit-toggle-unshielded', className: classNames('deposit-view__content__toggle__option', {
+                                    'deposit-view__content__toggle__option--active': midnightAddressType === 'unshielded',
+                                }), "data-copykey": 'dyn_active_wallet_info.midnight_unshielded_address', onClick: () => setMidnightAddressType('unshielded'), children: t('dyn_active_wallet_info.midnight_unshielded_address') }), jsx("button", { type: 'button', "data-testid": 'deposit-toggle-shielded', className: classNames('deposit-view__content__toggle__option', {
+                                    'deposit-view__content__toggle__option--active': midnightAddressType === 'shielded',
+                                }), "data-copykey": 'dyn_active_wallet_info.midnight_shielded_address', onClick: () => setMidnightAddressType('shielded'), children: t('dyn_active_wallet_info.midnight_shielded_address') })] })), jsx(QRCode, { className: 'deposit-view__content__qr-code', value: depositAddress, Icon: jsx(SvgEmbeddedWalletIcon, {}), logoSize: 40, logoMargin: 64, size: 215 }), jsxs("div", { className: 'deposit-view__content__address', children: [ensName && (jsx(Typography, { className: 'deposit-view__content__address__ens', variant: 'title', children: ensName })), jsxs("div", { className: 'deposit-view__content__address__wrapper', children: [jsx(Typography, { "data-testid": 'deposit-view-address', variant: 'title', weight: 'medium', className: 'deposit-view__content__address__wrapper__text', children: shortenWalletAddress(depositAddress) }), jsx(CopyButton, { variant: 'text', textToCopy: depositAddress, className: 'deposit-view__content__address__wrapper__copy', children: jsx(SvgCopy, { "data-testid": 'copy-address' }) })] })] }), jsxs(Typography, { className: 'deposit-view__content__network', variant: 'body_small', color: 'secondary', copykey: 'dyn_deposit.receive_funds_on', children: [t('dyn_deposit.receive_funds_on'), chain === null || chain === void 0 ? void 0 : chain.name] })] })] }));
 };
 
 export { DepositView };