@dynamic-labs/sdk-react-core 0.16.1 → 0.16.3

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

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { StatusDot } from '../../../../components/StatusDot/StatusDot.js';
+import '../../../../utils/constants/colors.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import 'react';
+import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+
+const WalletIconWithStatus = ({ iconSize = 24, walletName, connected, variant = 'primary', }) => (jsxs("div", Object.assign({ className: 'wallet-icon-with-status__container' }, { children: [jsx(WalletIcon, { walletName: walletName, style: {
+                height: pixelToRem(iconSize),
+                width: pixelToRem(iconSize),
+            } }), jsx("div", Object.assign({ "data-testid": 'status-dot-container', className: classNames('wallet-icon-with-status__dot-container', variant === 'secondary'
+                ? 'wallet-icon-with-status__dot-container--secondary'
+                : '') }, { children: jsx(StatusDot, { variant: connected ? 'green' : 'red' }) }))] })));
+
+export { WalletIconWithStatus };

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+
+const WidgetPortal = ({ children, onBackdropClick, disablePadding, }) => {
+    const { setMultiWalletWidgetState, accountSwitchState } = useInternalDynamicContext.useInternalDynamicContext();
+    const handleBackdropClick = (e) => {
+        e.stopPropagation();
+        if (accountSwitchState === 'primary_not_connected')
+            return;
+        setMultiWalletWidgetState('idle');
+        if (!onBackdropClick)
+            return;
+        onBackdropClick();
+    };
+    return (jsxRuntime.jsx("div", Object.assign({ className: 'widget-portal', onClick: (e) => handleBackdropClick(e), "data-testid": 'backdrop' }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('widget-portal__container', {
+                'widget-portal__container--no-padding': disablePadding,
+            }), onClick: (e) => e.stopPropagation() }, { children: children })) })));
+};
+
+exports.WidgetPortal = WidgetPortal;

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

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+
+const WidgetPortal = ({ children, onBackdropClick, disablePadding, }) => {
+    const { setMultiWalletWidgetState, accountSwitchState } = useInternalDynamicContext();
+    const handleBackdropClick = (e) => {
+        e.stopPropagation();
+        if (accountSwitchState === 'primary_not_connected')
+            return;
+        setMultiWalletWidgetState('idle');
+        if (!onBackdropClick)
+            return;
+        onBackdropClick();
+    };
+    return (jsx("div", Object.assign({ className: 'widget-portal', onClick: (e) => handleBackdropClick(e), "data-testid": 'backdrop' }, { children: jsx("div", Object.assign({ className: classNames('widget-portal__container', {
+                'widget-portal__container--no-padding': disablePadding,
+            }), onClick: (e) => e.stopPropagation() }, { children: children })) })));
+};
+
+export { WidgetPortal };

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../../config/ApiEndpoint.cjs');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('../../../utils/constants/colors.cjs');
+require('../../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('../../../context/ErrorContext/ErrorContext.cjs');
+require('react-dom');
+require('../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../context/ThemeContext/ThemeContext.cjs');
+require('react-focus-lock');
+require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../components/IconButton/IconButton.cjs');
+require('ethers');
+var useKYCFlag = require('../../../utils/hooks/useKYCFlag/useKYCFlag.cjs');
+var useMultiWalletFlag = require('../../../utils/hooks/useMultiWalletFlag/useMultiWalletFlag.cjs');
+require('../../../context/MockContext/MockContext.cjs');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+
+const DynamicWidgetContext = React.createContext(undefined);
+const DynamicWidgetContextProvider = ({ children, }) => {
+    const widgetRef = React.useRef(null);
+    const inlineControlsRef = React.useRef(null);
+    const availableWalletsContainerRef = React.useRef(null);
+    const { setShowDynamicUserProfile, showDynamicUserProfile } = useInternalDynamicContext.useInternalDynamicContext();
+    const [newWalletId, setNewWalletId] = React.useState('');
+    const [walletIdToUnlink, setWalletIdToUnlink] = React.useState(undefined);
+    const isKYCEnabled = useKYCFlag.useKYCFlag();
+    const isMultiWalletEnabled = useMultiWalletFlag.useMultiWalletFlag();
+    const initialView = React.useMemo(() => (isKYCEnabled && !isMultiWalletEnabled ? 'profile' : 'index'), [isKYCEnabled, isMultiWalletEnabled]);
+    const [dynamicWidgetView, setDynamicWidgetView] = React.useState(initialView);
+    const goToProfileView = React.useCallback(() => {
+        if (isKYCEnabled)
+            return setDynamicWidgetView('profile');
+        setDynamicWidgetView('index');
+    }, [isKYCEnabled, isMultiWalletEnabled]);
+    // set default view on close
+    React.useEffect(() => {
+        if (!showDynamicUserProfile) {
+            // wait for exit animation to finish
+            setTimeout(() => {
+                setDynamicWidgetView(initialView);
+            }, 200);
+        }
+    }, [showDynamicUserProfile]);
+    // set correct initial view once isKYCEnabled and isMultiWalletEnabled values are correctly set
+    // *isKYCEnabled is always false when the context initializes, so the initial view is set to index
+    React.useEffect(() => {
+        setDynamicWidgetView(initialView);
+    }, [isKYCEnabled, isMultiWalletEnabled]);
+    const value = React.useMemo(() => ({
+        availableWalletsContainerRef,
+        dynamicWidgetView,
+        goToProfileView,
+        inlineControlsRef,
+        isOpen: showDynamicUserProfile,
+        newWalletId,
+        setDynamicWidgetView,
+        setIsOpen: setShowDynamicUserProfile,
+        setNewWalletId,
+        setWalletIdToUnlink,
+        walletIdToUnlink,
+        widgetRef,
+    }), [
+        dynamicWidgetView,
+        goToProfileView,
+        newWalletId,
+        setShowDynamicUserProfile,
+        showDynamicUserProfile,
+        walletIdToUnlink,
+    ]);
+    return (jsxRuntime.jsx(DynamicWidgetContext.Provider, Object.assign({ value: value }, { children: children })));
+};
+const useWidgetContext = () => {
+    const context = React.useContext(DynamicWidgetContext);
+    if (context === undefined) {
+        throw new Error('usage of useWidgetContext not wrapped in `DynamicWidgetContextProvider`.');
+    }
+    return context;
+};
+
+exports.DynamicWidgetContext = DynamicWidgetContext;
+exports.DynamicWidgetContextProvider = DynamicWidgetContextProvider;
+exports.useWidgetContext = useWidgetContext;

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.js

@@ -0,0 +1,90 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useRef, useState, useMemo, useCallback, useEffect, useContext } from 'react';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../../config/ApiEndpoint.js';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../../context/ViewContext/ViewContext.js';
+import '../../../utils/constants/colors.js';
+import '../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import 'react-dom';
+import '../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../context/ThemeContext/ThemeContext.js';
+import 'react-focus-lock';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../components/IconButton/IconButton.js';
+import 'ethers';
+import { useKYCFlag } from '../../../utils/hooks/useKYCFlag/useKYCFlag.js';
+import { useMultiWalletFlag } from '../../../utils/hooks/useMultiWalletFlag/useMultiWalletFlag.js';
+import '../../../context/MockContext/MockContext.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+
+const DynamicWidgetContext = createContext(undefined);
+const DynamicWidgetContextProvider = ({ children, }) => {
+    const widgetRef = useRef(null);
+    const inlineControlsRef = useRef(null);
+    const availableWalletsContainerRef = useRef(null);
+    const { setShowDynamicUserProfile, showDynamicUserProfile } = useInternalDynamicContext();
+    const [newWalletId, setNewWalletId] = useState('');
+    const [walletIdToUnlink, setWalletIdToUnlink] = useState(undefined);
+    const isKYCEnabled = useKYCFlag();
+    const isMultiWalletEnabled = useMultiWalletFlag();
+    const initialView = useMemo(() => (isKYCEnabled && !isMultiWalletEnabled ? 'profile' : 'index'), [isKYCEnabled, isMultiWalletEnabled]);
+    const [dynamicWidgetView, setDynamicWidgetView] = useState(initialView);
+    const goToProfileView = useCallback(() => {
+        if (isKYCEnabled)
+            return setDynamicWidgetView('profile');
+        setDynamicWidgetView('index');
+    }, [isKYCEnabled, isMultiWalletEnabled]);
+    // set default view on close
+    useEffect(() => {
+        if (!showDynamicUserProfile) {
+            // wait for exit animation to finish
+            setTimeout(() => {
+                setDynamicWidgetView(initialView);
+            }, 200);
+        }
+    }, [showDynamicUserProfile]);
+    // set correct initial view once isKYCEnabled and isMultiWalletEnabled values are correctly set
+    // *isKYCEnabled is always false when the context initializes, so the initial view is set to index
+    useEffect(() => {
+        setDynamicWidgetView(initialView);
+    }, [isKYCEnabled, isMultiWalletEnabled]);
+    const value = useMemo(() => ({
+        availableWalletsContainerRef,
+        dynamicWidgetView,
+        goToProfileView,
+        inlineControlsRef,
+        isOpen: showDynamicUserProfile,
+        newWalletId,
+        setDynamicWidgetView,
+        setIsOpen: setShowDynamicUserProfile,
+        setNewWalletId,
+        setWalletIdToUnlink,
+        walletIdToUnlink,
+        widgetRef,
+    }), [
+        dynamicWidgetView,
+        goToProfileView,
+        newWalletId,
+        setShowDynamicUserProfile,
+        showDynamicUserProfile,
+        walletIdToUnlink,
+    ]);
+    return (jsx(DynamicWidgetContext.Provider, Object.assign({ value: value }, { children: children })));
+};
+const useWidgetContext = () => {
+    const context = useContext(DynamicWidgetContext);
+    if (context === undefined) {
+        throw new Error('usage of useWidgetContext not wrapped in `DynamicWidgetContextProvider`.');
+    }
+    return context;
+};
+
+export { DynamicWidgetContext, DynamicWidgetContextProvider, useWidgetContext };

package/src/lib/widgets/DynamicWidget/hooks/useFetchBalance/useFetchBalance.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+require('../../../../utils/constants/colors.cjs');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var isWalletConnected = require('../../../../utils/functions/isWalletConnected/isWalletConnected.cjs');
+
+const useFetchBalance = ({ connector, chain, address, network, }) => {
+    const [balance, setBalance] = React.useState('0.0');
+    React.useEffect(() => {
+        const fetchBalance = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            if (!chain ||
+                !address ||
+                (connector.supportsNetworkSwitching() && !network))
+                return;
+            const isConnected = yield isWalletConnected.isWalletConnected({
+                address,
+                chain,
+                connector,
+            });
+            /* istanbul ignore else */
+            if (isConnected) {
+                const value = yield connector.getBalance();
+                setBalance(value);
+            }
+        });
+        fetchBalance();
+    }, [address, chain, connector, network]);
+    return [balance];
+};
+
+exports.useFetchBalance = useFetchBalance;

package/src/lib/widgets/DynamicWidget/hooks/useFetchBalance/useFetchBalance.js

@@ -0,0 +1,36 @@
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { useState, useEffect } from 'react';
+import '../../../../utils/constants/colors.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import '../../../../context/ViewContext/ViewContext.js';
+import { isWalletConnected } from '../../../../utils/functions/isWalletConnected/isWalletConnected.js';
+
+const useFetchBalance = ({ connector, chain, address, network, }) => {
+    const [balance, setBalance] = useState('0.0');
+    useEffect(() => {
+        const fetchBalance = () => __awaiter(void 0, void 0, void 0, function* () {
+            if (!chain ||
+                !address ||
+                (connector.supportsNetworkSwitching() && !network))
+                return;
+            const isConnected = yield isWalletConnected({
+                address,
+                chain,
+                connector,
+            });
+            /* istanbul ignore else */
+            if (isConnected) {
+                const value = yield connector.getBalance();
+                setBalance(value);
+            }
+        });
+        fetchBalance();
+    }, [address, chain, connector, network]);
+    return [balance];
+};
+
+export { useFetchBalance };

package/src/lib/widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+
+const useFetchChain = (connector) => {
+    const [chain, setChain] = React.useState({
+        name: '',
+    });
+    React.useEffect(() => {
+        const fetchChain = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            const chainId = yield connector.getNetwork();
+            const { connectedChain } = connector;
+            const chainInfo = multiWallet.getChainInfo(connectedChain || '');
+            const chainWithIcon = {
+                name: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
+            };
+            /* istanbul ignore else */
+            if (chainId) {
+                const result = connector.evmNetworks.find((element) => element.chainId === chainId);
+                chainWithIcon.name = (_a = result === null || result === void 0 ? void 0 : result.vanityName) !== null && _a !== void 0 ? _a : chainWithIcon.name;
+                chainWithIcon.icon = result === null || result === void 0 ? void 0 : result.iconUrls[0];
+            }
+            setChain(chainWithIcon);
+        });
+        fetchChain();
+    }, [connector]);
+    return [chain];
+};
+
+exports.useFetchChain = useFetchChain;

package/src/lib/widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.js

@@ -0,0 +1,31 @@
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { useState, useEffect } from 'react';
+import { getChainInfo } from '@dynamic-labs/multi-wallet';
+
+const useFetchChain = (connector) => {
+    const [chain, setChain] = useState({
+        name: '',
+    });
+    useEffect(() => {
+        const fetchChain = () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            const chainId = yield connector.getNetwork();
+            const { connectedChain } = connector;
+            const chainInfo = getChainInfo(connectedChain || '');
+            const chainWithIcon = {
+                name: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
+            };
+            /* istanbul ignore else */
+            if (chainId) {
+                const result = connector.evmNetworks.find((element) => element.chainId === chainId);
+                chainWithIcon.name = (_a = result === null || result === void 0 ? void 0 : result.vanityName) !== null && _a !== void 0 ? _a : chainWithIcon.name;
+                chainWithIcon.icon = result === null || result === void 0 ? void 0 : result.iconUrls[0];
+            }
+            setChain(chainWithIcon);
+        });
+        fetchChain();
+    }, [connector]);
+    return [chain];
+};
+
+export { useFetchChain };

package/src/lib/widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+
+const useFetchCurrency = (connector, network) => {
+    const [currency, setCurrency] = React.useState('');
+    React.useEffect(() => {
+        const fetchChainCurrency = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const chainId = yield connector.getNetwork();
+            const chainInfo = multiWallet.getChainInfo((_a = connector.connectedChain) !== null && _a !== void 0 ? _a : '');
+            /* istanbul ignore else */
+            if (!chainId) {
+                setCurrency(chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol);
+                return;
+            }
+            const result = connector.evmNetworks.find((element) => element.chainId === chainId);
+            setCurrency((_c = (_b = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _b === void 0 ? void 0 : _b.symbol) !== null && _c !== void 0 ? _c : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol);
+            return [currency];
+        });
+        fetchChainCurrency();
+    }, [network]);
+    return [currency];
+};
+
+exports.useFetchCurrency = useFetchCurrency;

package/src/lib/widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.js

@@ -0,0 +1,26 @@
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { useState, useEffect } from 'react';
+import { getChainInfo } from '@dynamic-labs/multi-wallet';
+
+const useFetchCurrency = (connector, network) => {
+    const [currency, setCurrency] = useState('');
+    useEffect(() => {
+        const fetchChainCurrency = () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const chainId = yield connector.getNetwork();
+            const chainInfo = getChainInfo((_a = connector.connectedChain) !== null && _a !== void 0 ? _a : '');
+            /* istanbul ignore else */
+            if (!chainId) {
+                setCurrency(chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol);
+                return;
+            }
+            const result = connector.evmNetworks.find((element) => element.chainId === chainId);
+            setCurrency((_c = (_b = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _b === void 0 ? void 0 : _b.symbol) !== null && _c !== void 0 ? _c : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol);
+            return [currency];
+        });
+        fetchChainCurrency();
+    }, [network]);
+    return [currency];
+};
+
+export { useFetchCurrency };

package/src/lib/widgets/DynamicWidget/prompts/DetectedKnownSecondaryWalletModal/DetectedKnownSecondaryWalletModal.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('react');
+var promptAccountSwitch = require('../../../../shared/assets/prompt-account-switch.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var Button = require('../../../../components/Button/Button.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+
+const DetectedKnownSecondaryWalletModal = ({ setNewWalletId, }) => {
+    const { setMultiWalletWidgetState, primaryWallet, secondaryWallets, setPrimaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const handleButtonClick = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const publicAddress = yield (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.fetchPublicAddress());
+        if (!publicAddress) {
+            return;
+        }
+        const wallet = secondaryWallets.find((wallet) => multiWallet.isSameAddress(wallet.address, publicAddress, wallet.chain));
+        if (!wallet) {
+            return;
+        }
+        setMultiWalletWidgetState('idle');
+        setNewWalletId(wallet.id);
+        setPrimaryWallet(wallet.id);
+    });
+    return (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ onBackdropClick: handleButtonClick }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'detected-known-secondary-wallet-modal__content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_normal' }, { children: "Account Change Detected" })), jsxRuntime.jsx(promptAccountSwitch.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: `Your active account in ${primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name} has changed. We’re updating the primary account here to match your wallet status.` })), jsxRuntime.jsx(Button.Button, Object.assign({ onClick: handleButtonClick, buttonVariant: 'primary', expanded: true, buttonRounded: 'default', typographyProps: {
+                        variant: 'button_secondary',
+                    } }, { children: "Sounds good!" }))] })) })));
+};
+
+exports.DetectedKnownSecondaryWalletModal = DetectedKnownSecondaryWalletModal;

package/src/lib/widgets/DynamicWidget/prompts/DetectedKnownSecondaryWalletModal/DetectedKnownSecondaryWalletModal.js

@@ -0,0 +1,51 @@
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { isSameAddress } from '@dynamic-labs/multi-wallet';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import 'react';
+import { ReactComponent as SvgPromptAccountSwitch } from '../../../../shared/assets/prompt-account-switch.js';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/consts/index.js';
+import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { Button } from '../../../../components/Button/Button.js';
+import '../../../../components/IconButton/IconButton.js';
+
+const DetectedKnownSecondaryWalletModal = ({ setNewWalletId, }) => {
+    const { setMultiWalletWidgetState, primaryWallet, secondaryWallets, setPrimaryWallet, } = useInternalDynamicContext();
+    const handleButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        const publicAddress = yield (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.fetchPublicAddress());
+        if (!publicAddress) {
+            return;
+        }
+        const wallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, publicAddress, wallet.chain));
+        if (!wallet) {
+            return;
+        }
+        setMultiWalletWidgetState('idle');
+        setNewWalletId(wallet.id);
+        setPrimaryWallet(wallet.id);
+    });
+    return (jsx(WidgetPortal, Object.assign({ onBackdropClick: handleButtonClick }, { children: jsxs("div", Object.assign({ className: 'detected-known-secondary-wallet-modal__content' }, { children: [jsx(Typography, Object.assign({ color: 'primary', variant: 'body_normal' }, { children: "Account Change Detected" })), jsx(SvgPromptAccountSwitch, {}), jsx(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: `Your active account in ${primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name} has changed. We’re updating the primary account here to match your wallet status.` })), jsx(Button, Object.assign({ onClick: handleButtonClick, buttonVariant: 'primary', expanded: true, buttonRounded: 'default', typographyProps: {
+                        variant: 'button_secondary',
+                    } }, { children: "Sounds good!" }))] })) })));
+};
+
+export { DetectedKnownSecondaryWalletModal };

package/src/lib/widgets/DynamicWidget/prompts/DetectedNewWalletModal/DetectedNewWalletModal.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('react');
+var promptAccountSwitch = require('../../../../shared/assets/prompt-account-switch.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var Button = require('../../../../components/Button/Button.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+
+const DetectedNewWalletModal = () => {
+    const { setMultiWalletWidgetState, primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const handleClick = () => {
+        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+    };
+    return (jsxRuntime.jsx(WidgetPortal.WidgetPortal, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'detected-new-wallet-modal__content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: "Account Change Detected" })), jsxRuntime.jsx(promptAccountSwitch.ReactComponent, {}), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Your active account in ", primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name, " has changed. This account is not currently linked to this app. Do you want to add it?"] })), jsxRuntime.jsx(Button.Button, Object.assign({ expanded: true, buttonRounded: 'default', onClick: handleClick, typographyProps: {
+                        variant: 'button_secondary',
+                    } }, { children: "Yes, link this wallet" }))] })) }));
+};
+
+exports.DetectedNewWalletModal = DetectedNewWalletModal;