@dynamic-labs/sdk-react-core 0.16.0

package/src/lib/widgets/DynamicWidget/components/EmailOTPConnectorPendingSignModalContent/EmailOTPConnectorPendingSignModalContent.es.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import { useMutation } from '../../../../utils/hooks/useMutation/useMutation.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../../components/IconButton/IconButton.es.js';
+import { OTPVerificationView } from '../../../../components/OTPVerificationView/OTPVerificationView.es.js';
+
+const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
+    const [error, setError] = useState();
+    const { email } = walletConnector;
+    if (!email) {
+        throw new Error('EmailOTPConnectorPendingSignModalContent requires a email');
+    }
+    const { data: isValid, isLoading, mutate: onSubmit, } = useMutation((otp) => walletConnector.verifyOneTimePassword(otp), {
+        onFailure: (error) => setError(error),
+    });
+    return (jsx(OTPVerificationView, { email: email, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined) }));
+};
+
+export { EmailOTPConnectorPendingSignModalContent };

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

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

package/src/lib/widgets/DynamicWidget/components/EmptyWallets/EmptyWallets.cjs.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var Typography = require('../../../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+var addWallet = require('../../../../shared/assets/add-wallet.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+var Icon = require('../../../../components/Icon/Icon.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../../components/IconButton/IconButton.cjs.js');
+
+const EmptyWallets = () => (jsxRuntime.jsxs("div", Object.assign({ className: 'empty-wallet__container' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'empty-wallet__icon-container' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary', size: 'medium' }, { children: jsxRuntime.jsx(addWallet.ReactComponent, {}) })) })), jsxRuntime.jsx("div", Object.assign({ className: 'empty-wallet__text-container' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: "Link additional wallets to see them here." })) }))] })));
+
+exports.EmptyWallets = EmptyWallets;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EmptyWallets: () => JSX.Element;

package/src/lib/widgets/DynamicWidget/components/EmptyWallets/EmptyWallets.es.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Typography } from '../../../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import { ReactComponent as SvgAddWallet } from '../../../../shared/assets/add-wallet.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import { Icon } from '../../../../components/Icon/Icon.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../../components/IconButton/IconButton.es.js';
+
+const EmptyWallets = () => (jsxs("div", Object.assign({ className: 'empty-wallet__container' }, { children: [jsx("div", Object.assign({ className: 'empty-wallet__icon-container' }, { children: jsx(Icon, Object.assign({ color: 'text-primary', size: 'medium' }, { children: jsx(SvgAddWallet, {}) })) })), jsx("div", Object.assign({ className: 'empty-wallet__text-container' }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: "Link additional wallets to see them here." })) }))] })));
+
+export { EmptyWallets };

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

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

package/src/lib/widgets/DynamicWidget/components/SingleWalletButtons/SingleWalletButtons.cjs.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+var checkCircle = require('../../../../shared/assets/check-circle.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+var Button = require('../../../../components/Button/Button.cjs.js');
+require('../../../../components/IconButton/IconButton.cjs.js');
+var helpers = require('../../helpers/helpers.cjs.js');
+
+const SingleWalletButtons = () => {
+    const { primaryWallet, handleLogOut, user } = useInternalDynamicContext.useInternalDynamicContext();
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'single-wallet-buttons' }, { children: [jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'Copy address', expanded: true, buttonRounded: 'small', buttonPadding: 'medium', typographyProps: {
+                    className: 'single-wallet-buttons--center',
+                    variant: 'button_primary',
+                }, onClick: () => helpers.copyToClipboard((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) || (user === null || user === void 0 ? void 0 : user.email) || ''), feedback: 
+                // eslint-disable-next-line react/jsx-wrap-multilines
+                jsxRuntime.jsxs("div", Object.assign({ className: 'single-wallet-buttons__copied' }, { children: [jsxRuntime.jsx(checkCircle.ReactComponent, {}), " Copied!"] })) }, { children: "Copy address" })), jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'Disconnect', expanded: true, buttonRounded: 'small', buttonPadding: 'medium', typographyProps: {
+                    className: 'single-wallet-buttons--center',
+                    variant: 'button_primary',
+                }, onClick: handleLogOut }, { children: "Disconnect" }))] })));
+};
+
+exports.SingleWalletButtons = SingleWalletButtons;

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

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const SingleWalletButtons: FC;

package/src/lib/widgets/DynamicWidget/components/SingleWalletButtons/SingleWalletButtons.es.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import { ReactComponent as SvgCheckCircle } from '../../../../shared/assets/check-circle.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.es.js';
+import '../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import { Button } from '../../../../components/Button/Button.es.js';
+import '../../../../components/IconButton/IconButton.es.js';
+import { copyToClipboard } from '../../helpers/helpers.es.js';
+
+const SingleWalletButtons = () => {
+    const { primaryWallet, handleLogOut, user } = useInternalDynamicContext();
+    return (jsxs("div", Object.assign({ className: 'single-wallet-buttons' }, { children: [jsx(Button, Object.assign({ dataTestId: 'Copy address', expanded: true, buttonRounded: 'small', buttonPadding: 'medium', typographyProps: {
+                    className: 'single-wallet-buttons--center',
+                    variant: 'button_primary',
+                }, onClick: () => copyToClipboard((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) || (user === null || user === void 0 ? void 0 : user.email) || ''), feedback: 
+                // eslint-disable-next-line react/jsx-wrap-multilines
+                jsxs("div", Object.assign({ className: 'single-wallet-buttons__copied' }, { children: [jsx(SvgCheckCircle, {}), " Copied!"] })) }, { children: "Copy address" })), jsx(Button, Object.assign({ dataTestId: 'Disconnect', expanded: true, buttonRounded: 'small', buttonPadding: 'medium', typographyProps: {
+                    className: 'single-wallet-buttons--center',
+                    variant: 'button_primary',
+                }, onClick: handleLogOut }, { children: "Disconnect" }))] })));
+};
+
+export { SingleWalletButtons };

package/src/lib/widgets/DynamicWidget/components/Wallet/Wallet.cjs.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+require('react');
+var copy = require('../../../../shared/assets/copy.cjs.js');
+var unlink = require('../../../../shared/assets/unlink.cjs.js');
+var switchHorizontal = require('../../../../shared/assets/switch-horizontal.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/multi-wallet');
+var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+var Typography = require('../../../../components/Typography/Typography.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../../components/IconButton/IconButton.cjs.js');
+var DotsMenu = require('../DotsMenu/DotsMenu.cjs.js');
+var helpers = require('../../helpers/helpers.cjs.js');
+var WalletIconWithStatus = require('../WalletIconWithStatus/WalletIconWithStatus.cjs.js');
+var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs.js');
+
+const Wallet = ({ setNewWalletId, wallet, ens }) => {
+    const walletPublicKey = wallet.address;
+    const walletId = wallet.id;
+    const { connector } = wallet;
+    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setWalletIdToUnlink } = DynamicWidgetContext.useWidgetContext();
+    const iconSize = 20;
+    const options = [
+        {
+            Icon: jsxRuntime.jsx(switchHorizontal.ReactComponent, {}),
+            callback: () => onSelectWalletClick(),
+            text: 'Select wallet',
+        },
+    ];
+    if (ens === null || ens === void 0 ? void 0 : ens.name) {
+        options.push({
+            Icon: jsxRuntime.jsx(copy.ReactComponent, {}),
+            callback: () => helpers.copyToClipboard(ens.name),
+            text: 'Copy ENS',
+        });
+    }
+    options.push({
+        Icon: jsxRuntime.jsx(copy.ReactComponent, {}),
+        callback: () => helpers.copyToClipboard(walletPublicKey || ''),
+        text: 'Copy address',
+    }, {
+        Icon: jsxRuntime.jsx(unlink.ReactComponent, {}),
+        callback: () => setWalletIdToUnlink(walletId),
+        text: 'Unlink from my account',
+    });
+    const onSelectWalletClick = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (wallet.connector.connectedChain === 'FLOW') {
+            (_b = (_a = wallet.connector).endSession) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        setNewWalletId === null || setNewWalletId === void 0 ? void 0 : setNewWalletId(walletId);
+        setPrimaryWallet(walletId);
+        computeConnectedStateForWallets();
+        setSelectedWalletConnector(wallet.connector);
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'wallet__container', "data-testid": 'wallet' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'wallet__row' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'wallet__icon-container' }, { children: jsxRuntime.jsx(WalletIconWithStatus.WalletIconWithStatus, { iconSize: iconSize, walletName: connector.name, connected: wallet.connected, variant: 'secondary' }) })), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true }, { children: ens === null || ens === void 0 ? void 0 : ens.name })), jsxRuntime.jsx("div", { className: 'wallet__row__seperator' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: shortenWalletAddress.shortenWalletAddress(walletPublicKey, 3, 3) }))] })) : (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(walletPublicKey, 4, 4) })))] })), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'wallet__menu' })] })));
+};
+
+exports.Wallet = Wallet;

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

@@ -0,0 +1,13 @@
+import { Dispatch, SetStateAction } from 'react';
+import { NameServiceData } from '@dynamic-labs/sdk-api';
+import { Wallet as WalletType } from '../../../../shared/types';
+type Props = {
+    ens?: NameServiceData;
+    expanded?: boolean;
+    expandedWallet?: string;
+    setExpandedWallet?: (str?: string) => void;
+    setNewWalletId?: Dispatch<SetStateAction<string>>;
+    wallet: WalletType;
+};
+export declare const Wallet: ({ setNewWalletId, wallet, ens }: Props) => JSX.Element;
+export {};

package/src/lib/widgets/DynamicWidget/components/Wallet/Wallet.es.js

@@ -0,0 +1,79 @@
+import { __awaiter } from '../../../../../../_virtual/_tslib.es.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import 'react';
+import { ReactComponent as SvgCopy } from '../../../../shared/assets/copy.es.js';
+import { ReactComponent as SvgUnlink } from '../../../../shared/assets/unlink.es.js';
+import { ReactComponent as SvgSwitchHorizontal } from '../../../../shared/assets/switch-horizontal.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/multi-wallet';
+import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.es.js';
+import '../../../../utils/constants/colors.es.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.es.js';
+import { Typography } from '../../../../components/Typography/Typography.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../../components/IconButton/IconButton.es.js';
+import { DotsMenu } from '../DotsMenu/DotsMenu.es.js';
+import { copyToClipboard } from '../../helpers/helpers.es.js';
+import { WalletIconWithStatus } from '../WalletIconWithStatus/WalletIconWithStatus.es.js';
+import { useWidgetContext } from '../../context/DynamicWidgetContext.es.js';
+
+const Wallet = ({ setNewWalletId, wallet, ens }) => {
+    const walletPublicKey = wallet.address;
+    const walletId = wallet.id;
+    const { connector } = wallet;
+    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnector, } = useInternalDynamicContext();
+    const { setWalletIdToUnlink } = useWidgetContext();
+    const iconSize = 20;
+    const options = [
+        {
+            Icon: jsx(SvgSwitchHorizontal, {}),
+            callback: () => onSelectWalletClick(),
+            text: 'Select wallet',
+        },
+    ];
+    if (ens === null || ens === void 0 ? void 0 : ens.name) {
+        options.push({
+            Icon: jsx(SvgCopy, {}),
+            callback: () => copyToClipboard(ens.name),
+            text: 'Copy ENS',
+        });
+    }
+    options.push({
+        Icon: jsx(SvgCopy, {}),
+        callback: () => copyToClipboard(walletPublicKey || ''),
+        text: 'Copy address',
+    }, {
+        Icon: jsx(SvgUnlink, {}),
+        callback: () => setWalletIdToUnlink(walletId),
+        text: 'Unlink from my account',
+    });
+    const onSelectWalletClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (wallet.connector.connectedChain === 'FLOW') {
+            (_b = (_a = wallet.connector).endSession) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        setNewWalletId === null || setNewWalletId === void 0 ? void 0 : setNewWalletId(walletId);
+        setPrimaryWallet(walletId);
+        computeConnectedStateForWallets();
+        setSelectedWalletConnector(wallet.connector);
+    });
+    return (jsxs("div", Object.assign({ className: 'wallet__container', "data-testid": 'wallet' }, { children: [jsxs("div", Object.assign({ className: 'wallet__row' }, { children: [jsx("div", Object.assign({ className: 'wallet__icon-container' }, { children: jsx(WalletIconWithStatus, { iconSize: iconSize, walletName: connector.name, connected: wallet.connected, variant: 'secondary' }) })), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true }, { children: ens === null || ens === void 0 ? void 0 : ens.name })), jsx("div", { className: 'wallet__row__seperator' }), jsx(Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: shortenWalletAddress(walletPublicKey, 3, 3) }))] })) : (jsx(Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: shortenWalletAddress(walletPublicKey, 4, 4) })))] })), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'wallet__menu' })] })));
+};
+
+export { Wallet };

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

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

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Props = {
+    connected?: boolean;
+    iconSize?: number;
+    variant?: 'primary' | 'secondary';
+    walletName: string;
+};
+export declare const WalletIconWithStatus: ({ iconSize, walletName, connected, variant, }: Props) => JSX.Element;
+export {};

package/src/lib/widgets/DynamicWidget/components/WalletIconWithStatus/WalletIconWithStatus.es.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.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import 'react';
+import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.es.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.es.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/WalletIconWithStatus/index.d.ts

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

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

@@ -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.js');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs.js');
+
+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.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+    disablePadding?: boolean;
+    onBackdropClick?: VoidFunction;
+};
+export declare const WidgetPortal: ({ children, onBackdropClick, disablePadding, }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.es.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.es.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/components/WidgetPortal/index.d.ts

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

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

@@ -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.js');
+require('../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('../../../context/ViewContext/ViewContext.cjs.js');
+require('../../../utils/constants/colors.cjs.js');
+require('../../../shared/consts/index.cjs.js');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+require('../../../context/ErrorContext/ErrorContext.cjs.js');
+require('react-dom');
+require('../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-focus-lock');
+require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../components/IconButton/IconButton.cjs.js');
+require('ethers');
+var useKYCFlag = require('../../../utils/hooks/useKYCFlag/useKYCFlag.cjs.js');
+var useMultiWalletFlag = require('../../../utils/hooks/useMultiWalletFlag/useMultiWalletFlag.cjs.js');
+require('../../../context/MockContext/MockContext.cjs.js');
+require('../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+
+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;