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

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

@@ -71,6 +71,7 @@ require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
 var Icon = require('../../../../components/Icon/Icon.cjs');
+var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../utils/hooks/useGetMfaToken/useGetMfaToken.cjs');
@@ -113,11 +114,30 @@ require('../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
+const MIDNIGHT_ADDRESS_ROWS = [
+    {
+        field: 'unshielded',
+        key: 'dyn_active_wallet_info.midnight_unshielded_address',
+    },
+    {
+        field: 'shielded',
+        key: 'dyn_active_wallet_info.midnight_shielded_address',
+    },
+    {
+        field: 'dust',
+        key: 'dyn_active_wallet_info.midnight_dust_address',
+    },
+];
 /** Component for wallet detail overlays */
-const WalletDetailsCard = ({ address, open, onClose, }) => {
+const WalletDetailsCard = ({ address, open, onClose, midnightAddresses, }) => {
     const { t } = reactI18next.useTranslation();
     const copyIcon = (jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(copy.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs(OverlayCard.OverlayCard, { isOpen: open, onClose: onClose, children: [jsxRuntime.jsx(OverlayCard.OverlayCard.Header, { children: t('dyn_wallet_details_card.header') }), jsxRuntime.jsxs(OverlayCard.OverlayCard.Content, { className: 'wallet-details-card__body', children: [jsxRuntime.jsx(Typography.Typography, { className: 'wallet-details-card__text', color: 'primary', weight: 'bold', variant: 'body_small', copykey: 'dyn_wallet_details_card.address', children: t('dyn_wallet_details_card.address') }), jsxRuntime.jsx(Typography.Typography, { className: 'wallet-details-card__text', color: 'secondary', weight: 'regular', variant: 'body_small', children: address }), jsxRuntime.jsx(CopyButton.CopyButton, { textToCopy: address, variant: 'button', startSlot: copyIcon, children: t('dyn_wallet_details_card.copy') })] })] }));
+    return (jsxRuntime.jsxs(OverlayCard.OverlayCard, { isOpen: open, onClose: onClose, children: [jsxRuntime.jsx(OverlayCard.OverlayCard.Header, { children: t('dyn_wallet_details_card.header') }), jsxRuntime.jsx(OverlayCard.OverlayCard.Content, { className: 'wallet-details-card__body', children: midnightAddresses ? (MIDNIGHT_ADDRESS_ROWS.map(({ key, field }) => {
+                    const addr = midnightAddresses[field];
+                    if (!addr)
+                        return null;
+                    return (jsxRuntime.jsxs("div", { className: 'wallet-details-card__address-block', children: [jsxRuntime.jsx(Typography.Typography, { className: 'wallet-details-card__text', color: 'primary', weight: 'bold', variant: 'body_small', copykey: key, children: t(key) }), jsxRuntime.jsxs("div", { className: 'wallet-details-card__address-row', children: [jsxRuntime.jsx(Typography.Typography, { className: 'wallet-details-card__text', color: 'secondary', weight: 'regular', variant: 'body_small', children: shortenWalletAddress.shortenWalletAddress(addr) }), jsxRuntime.jsx(CopyButton.CopyButton, { textToCopy: addr, children: copyIcon })] })] }, field));
+                })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { className: 'wallet-details-card__text', color: 'primary', weight: 'bold', variant: 'body_small', copykey: 'dyn_wallet_details_card.address', children: t('dyn_wallet_details_card.address') }), jsxRuntime.jsx(Typography.Typography, { className: 'wallet-details-card__text', color: 'secondary', weight: 'regular', variant: 'body_small', children: address }), jsxRuntime.jsx(CopyButton.CopyButton, { textToCopy: address, variant: 'button', startSlot: copyIcon, children: t('dyn_wallet_details_card.copy') })] })) })] }));
 };
 
 exports.WalletDetailsCard = WalletDetailsCard;

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

@@ -1,4 +1,9 @@
 /// <reference types="react" />
+type MidnightAddresses = {
+    unshielded?: string;
+    shielded?: string;
+    dust?: string;
+};
 type WalletDetailsCardProps = {
     /** String representation of a wallet address */
     address: string;
@@ -6,7 +11,9 @@ type WalletDetailsCardProps = {
     open: boolean;
     /** Callback when the overlay is closed */
     onClose: VoidFunction;
+    /** When provided, renders separate Midnight address rows instead of a single address */
+    midnightAddresses?: MidnightAddresses;
 };
 /** Component for wallet detail overlays */
-export declare const WalletDetailsCard: ({ address, open, onClose, }: WalletDetailsCardProps) => JSX.Element;
+export declare const WalletDetailsCard: ({ address, open, onClose, midnightAddresses, }: WalletDetailsCardProps) => JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 'use client'
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import 'react';
@@ -67,6 +67,7 @@ import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import { Icon } from '../../../../components/Icon/Icon.js';
+import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../utils/hooks/useGetMfaToken/useGetMfaToken.js';
@@ -109,11 +110,30 @@ import '../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 
+const MIDNIGHT_ADDRESS_ROWS = [
+    {
+        field: 'unshielded',
+        key: 'dyn_active_wallet_info.midnight_unshielded_address',
+    },
+    {
+        field: 'shielded',
+        key: 'dyn_active_wallet_info.midnight_shielded_address',
+    },
+    {
+        field: 'dust',
+        key: 'dyn_active_wallet_info.midnight_dust_address',
+    },
+];
 /** Component for wallet detail overlays */
-const WalletDetailsCard = ({ address, open, onClose, }) => {
+const WalletDetailsCard = ({ address, open, onClose, midnightAddresses, }) => {
     const { t } = useTranslation();
     const copyIcon = (jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgCopy, {}) }));
-    return (jsxs(OverlayCard, { isOpen: open, onClose: onClose, children: [jsx(OverlayCard.Header, { children: t('dyn_wallet_details_card.header') }), jsxs(OverlayCard.Content, { className: 'wallet-details-card__body', children: [jsx(Typography, { className: 'wallet-details-card__text', color: 'primary', weight: 'bold', variant: 'body_small', copykey: 'dyn_wallet_details_card.address', children: t('dyn_wallet_details_card.address') }), jsx(Typography, { className: 'wallet-details-card__text', color: 'secondary', weight: 'regular', variant: 'body_small', children: address }), jsx(CopyButton, { textToCopy: address, variant: 'button', startSlot: copyIcon, children: t('dyn_wallet_details_card.copy') })] })] }));
+    return (jsxs(OverlayCard, { isOpen: open, onClose: onClose, children: [jsx(OverlayCard.Header, { children: t('dyn_wallet_details_card.header') }), jsx(OverlayCard.Content, { className: 'wallet-details-card__body', children: midnightAddresses ? (MIDNIGHT_ADDRESS_ROWS.map(({ key, field }) => {
+                    const addr = midnightAddresses[field];
+                    if (!addr)
+                        return null;
+                    return (jsxs("div", { className: 'wallet-details-card__address-block', children: [jsx(Typography, { className: 'wallet-details-card__text', color: 'primary', weight: 'bold', variant: 'body_small', copykey: key, children: t(key) }), jsxs("div", { className: 'wallet-details-card__address-row', children: [jsx(Typography, { className: 'wallet-details-card__text', color: 'secondary', weight: 'regular', variant: 'body_small', children: shortenWalletAddress(addr) }), jsx(CopyButton, { textToCopy: addr, children: copyIcon })] })] }, field));
+                })) : (jsxs(Fragment, { children: [jsx(Typography, { className: 'wallet-details-card__text', color: 'primary', weight: 'bold', variant: 'body_small', copykey: 'dyn_wallet_details_card.address', children: t('dyn_wallet_details_card.address') }), jsx(Typography, { className: 'wallet-details-card__text', color: 'secondary', weight: 'regular', variant: 'body_small', children: address }), jsx(CopyButton, { textToCopy: address, variant: 'button', startSlot: copyIcon, children: t('dyn_wallet_details_card.copy') })] })) })] }));
 };
 
 export { WalletDetailsCard };