@dynamic-labs/sdk-react-core 0.19.0-alpha.8 → 0.19.0-alpha.9

package/src/lib/components/SignMessagePreview/SignMessagePreview.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+type SignMessagePreviewProps = {
+    message: string;
+};
+export declare const SignMessagePreview: FC<SignMessagePreviewProps>;
+export {};

package/src/lib/components/SignMessagePreview/SignMessagePreview.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Typography } from '../Typography/Typography.js';
+import { isSignTypedData } from './utils/isSignTypedData/isSignTypedData.js';
+import { SignTypedDataPreview } from './components/SignTypedDataPreview/SignTypedDataPreview.js';
+
+const SignMessagePreview = ({ message, }) => {
+    const signTypedData = useMemo(() => {
+        try {
+            const json = JSON.parse(message);
+            return isSignTypedData(json) ? json : undefined;
+        }
+        catch (e) {
+            return undefined;
+        }
+    }, [message]);
+    if (signTypedData) {
+        return (jsx(SignTypedDataPreview, { currentType: signTypedData.primaryType, types: signTypedData.types, showTypeName: true, data: signTypedData.message }));
+    }
+    return (jsx(Typography, Object.assign({ color: 'primary', variant: 'body_normal' }, { children: jsx("span", { style: { whiteSpace: 'pre-line' }, dangerouslySetInnerHTML: { __html: message } }) })));
+};
+
+export { SignMessagePreview };

package/src/lib/components/SignMessagePreview/SignMessagePreview.types.d.ts

@@ -0,0 +1,8 @@
+type Types = Record<string, any>;
+type Message = Record<string, any>;
+export type SignTypedData = {
+    types: Types;
+    message: Message;
+    primaryType: string;
+};
+export {};

package/src/lib/components/SignMessagePreview/components/SignTypedDataPreview/SignTypedDataPreview.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../../../Typography/Typography.cjs');
+var capitalize = require('../../../../shared/utils/functions/capitalize/capitalize.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('react');
+require('@dynamic-labs/wallet-book');
+var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../../shared/consts/index.cjs');
+
+const TypeTitle = ({ children }) => (jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', weight: 'medium' }, { children: children })));
+const AttributeName = TypeTitle;
+const AttributeValue = ({ children, title, }) => (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'regular', color: 'primary', title: title }, { children: children })));
+const SignTypedDataPreview = ({ currentType, types, showTypeName = false, data }) => {
+    const fields = types[currentType].map((field) => {
+        const { type } = field;
+        const isKnownType = type in types;
+        if (isKnownType) {
+            return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(TypeTitle, { children: capitalize.capitalize(field.name) }), jsxRuntime.jsx("div", Object.assign({ className: 'sign-typed-data-preview--type-container' }, { children: jsxRuntime.jsx(SignTypedDataPreview, { currentType: type, types: types, data: data === null || data === void 0 ? void 0 : data[field.name] }) }))] }, field.name));
+        }
+        const fieldData = data === null || data === void 0 ? void 0 : data[field.name];
+        const fieldType = field.type;
+        return (jsxRuntime.jsxs("div", Object.assign({ className: 'sign-typed-data-preview--attribute-row' }, { children: [jsxRuntime.jsxs(AttributeName, { children: [capitalize.capitalize(field.name), ": "] }), jsxRuntime.jsx(AttributeValue, Object.assign({ title: fieldData }, { children: fieldType === 'address'
+                        ? shortenWalletAddress.shortenWalletAddress(fieldData, 4, 4)
+                        : fieldData }))] }), field.name));
+    });
+    if (showTypeName) {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TypeTitle, { children: currentType }), jsxRuntime.jsx("div", Object.assign({ className: 'sign-typed-data-preview--type-container' }, { children: fields }))] }));
+    }
+    return jsxRuntime.jsx("div", Object.assign({ className: 'sign-typed-data-preview--fields-list' }, { children: fields }));
+};
+
+exports.SignTypedDataPreview = SignTypedDataPreview;

package/src/lib/components/SignMessagePreview/components/SignTypedDataPreview/SignTypedDataPreview.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { SignTypedData } from '../../SignMessagePreview.types';
+export declare const SignTypedDataPreview: FC<{
+    types: SignTypedData['types'];
+    currentType: string;
+    data: SignTypedData['message'];
+    showTypeName?: boolean;
+}>;

package/src/lib/components/SignMessagePreview/components/SignTypedDataPreview/SignTypedDataPreview.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Typography } from '../../../Typography/Typography.js';
+import { capitalize } from '../../../../shared/utils/functions/capitalize/capitalize.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../context/ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../../shared/consts/index.js';
+
+const TypeTitle = ({ children }) => (jsx(Typography, Object.assign({ color: 'secondary', weight: 'medium' }, { children: children })));
+const AttributeName = TypeTitle;
+const AttributeValue = ({ children, title, }) => (jsx(Typography, Object.assign({ as: 'span', weight: 'regular', color: 'primary', title: title }, { children: children })));
+const SignTypedDataPreview = ({ currentType, types, showTypeName = false, data }) => {
+    const fields = types[currentType].map((field) => {
+        const { type } = field;
+        const isKnownType = type in types;
+        if (isKnownType) {
+            return (jsxs("div", { children: [jsx(TypeTitle, { children: capitalize(field.name) }), jsx("div", Object.assign({ className: 'sign-typed-data-preview--type-container' }, { children: jsx(SignTypedDataPreview, { currentType: type, types: types, data: data === null || data === void 0 ? void 0 : data[field.name] }) }))] }, field.name));
+        }
+        const fieldData = data === null || data === void 0 ? void 0 : data[field.name];
+        const fieldType = field.type;
+        return (jsxs("div", Object.assign({ className: 'sign-typed-data-preview--attribute-row' }, { children: [jsxs(AttributeName, { children: [capitalize(field.name), ": "] }), jsx(AttributeValue, Object.assign({ title: fieldData }, { children: fieldType === 'address'
+                        ? shortenWalletAddress(fieldData, 4, 4)
+                        : fieldData }))] }), field.name));
+    });
+    if (showTypeName) {
+        return (jsxs(Fragment, { children: [jsx(TypeTitle, { children: currentType }), jsx("div", Object.assign({ className: 'sign-typed-data-preview--type-container' }, { children: fields }))] }));
+    }
+    return jsx("div", Object.assign({ className: 'sign-typed-data-preview--fields-list' }, { children: fields }));
+};
+
+export { SignTypedDataPreview };

package/src/lib/components/SignMessagePreview/components/SignTypedDataPreview/index.d.ts

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

package/src/lib/components/SignMessagePreview/components/index.d.ts

@@ -0,0 +1 @@
+export * from './SignTypedDataPreview';

package/src/lib/components/SignMessagePreview/index.d.ts

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

package/src/lib/components/SignMessagePreview/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './isSignTypedData';

package/src/lib/components/SignMessagePreview/utils/isSignTypedData/index.d.ts

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

package/src/lib/components/SignMessagePreview/utils/isSignTypedData/isSignTypedData.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isSignTypedData = (data) => {
+    if (typeof data !== 'object' || data === null) {
+        return false;
+    }
+    const { types, message, primaryType } = data;
+    return (typeof types === 'object' &&
+        types !== null &&
+        typeof message === 'object' &&
+        message !== null &&
+        typeof primaryType === 'string');
+};
+
+exports.isSignTypedData = isSignTypedData;

package/src/lib/components/SignMessagePreview/utils/isSignTypedData/isSignTypedData.d.ts

@@ -0,0 +1,2 @@
+import { SignTypedData } from '../../SignMessagePreview.types';
+export declare const isSignTypedData: (data: SignTypedData | unknown) => data is SignTypedData;

package/src/lib/components/SignMessagePreview/utils/isSignTypedData/isSignTypedData.js

@@ -0,0 +1,13 @@
+const isSignTypedData = (data) => {
+    if (typeof data !== 'object' || data === null) {
+        return false;
+    }
+    const { types, message, primaryType } = data;
+    return (typeof types === 'object' &&
+        types !== null &&
+        typeof message === 'object' &&
+        message !== null &&
+        typeof primaryType === 'string');
+};
+
+export { isSignTypedData };

package/src/lib/components/Toolkit/Toolkit.cjs

@@ -19,6 +19,7 @@ var index = require('../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 var isEmailProviderEnabled = require('../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.cjs');
+require('../../config/ApiEndpoint.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
 var ThemeSwitch = require('./components/ThemeSwitch.cjs');
 var PrimaryColorInput = require('./components/PrimaryColorInput.cjs');
@@ -37,7 +38,7 @@ const Toolkit = () => {
     }, [showAuthFlow, showDynamicUserProfile, toolkitEnabled]);
     if (!isToolkitVisible)
         return null;
-    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: index.toolkitZIndex }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsxRuntime.jsx(ThemeSwitch.ThemeSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsxRuntime.jsx(TemplateSelect.TemplateSelect, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsxRuntime.jsx(PrimaryColorInput.PrimaryColorInput, {})] })), !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsxRuntime.jsx(AuthModeSwitch.AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Multi Wallet" })), jsxRuntime.jsx(MultiWalletSwitch.MultiWalletSwitch, { multiWallet: multiWallet && authMode === 'connect-and-sign', disabled: authMode === 'connect-only', setMultiWallet: setMultiWallet })] }))] })), isEmailProviderEnabled.isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsxRuntime.jsx(LoginWithEmailSwitch.LoginWithEmailSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsxRuntime.jsx(LoginWithEmailViewDisplayPriorityOrderSwitch.LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
+    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: index.toolkitZIndex }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsxRuntime.jsx(ThemeSwitch.ThemeSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsxRuntime.jsx(TemplateSelect.TemplateSelect, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsxRuntime.jsx(PrimaryColorInput.PrimaryColorInput, {})] })), !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsxRuntime.jsx(AuthModeSwitch.AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Multi Wallet" })), jsxRuntime.jsx(MultiWalletSwitch.MultiWalletSwitch, { multiWallet: multiWallet, setMultiWallet: setMultiWallet })] }))] })), isEmailProviderEnabled.isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsxRuntime.jsx(LoginWithEmailSwitch.LoginWithEmailSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsxRuntime.jsx(LoginWithEmailViewDisplayPriorityOrderSwitch.LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
 };
 
 exports.Toolkit = Toolkit;

package/src/lib/components/Toolkit/Toolkit.js

@@ -15,6 +15,7 @@ import { toolkitZIndex } from '../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import { isEmailProviderEnabled } from '../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.js';
+import '../../config/ApiEndpoint.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
 import { ThemeSwitch } from './components/ThemeSwitch.js';
 import { PrimaryColorInput } from './components/PrimaryColorInput.js';
@@ -33,7 +34,7 @@ const Toolkit = () => {
     }, [showAuthFlow, showDynamicUserProfile, toolkitEnabled]);
     if (!isToolkitVisible)
         return null;
-    return (jsx(ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: toolkitZIndex }, { children: jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsx(ThemeSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsx(TemplateSelect, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsx(PrimaryColorInput, {})] })), !user && (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsx(AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Multi Wallet" })), jsx(MultiWalletSwitch, { multiWallet: multiWallet && authMode === 'connect-and-sign', disabled: authMode === 'connect-only', setMultiWallet: setMultiWallet })] }))] })), isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsx(LoginWithEmailSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsx(LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
+    return (jsx(ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: toolkitZIndex }, { children: jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsx(ThemeSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsx(TemplateSelect, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsx(PrimaryColorInput, {})] })), !user && (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsx(AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Multi Wallet" })), jsx(MultiWalletSwitch, { multiWallet: multiWallet, setMultiWallet: setMultiWallet })] }))] })), isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsx(LoginWithEmailSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsx(LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
 };
 
 export { Toolkit };

package/src/lib/components/Toolkit/components/MultiWalletSwitch.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var Switch = require('../../Switch/Switch.cjs');
 
-const MultiWalletSwitch = ({ multiWallet, setMultiWallet, disabled, }) => (jsxRuntime.jsx(Switch.Switch, { disabled: disabled, firstButton: {
+const MultiWalletSwitch = ({ multiWallet, setMultiWallet, }) => (jsxRuntime.jsx(Switch.Switch, { firstButton: {
         active: multiWallet,
         handleButtonClick: () => setMultiWallet(true),
         name: 'True',

package/src/lib/components/Toolkit/components/MultiWalletSwitch.d.ts

@@ -1,7 +1,6 @@
 type Props = {
     multiWallet: boolean;
     setMultiWallet: (multiWallet: boolean) => void;
-    disabled: boolean;
 };
-export declare const MultiWalletSwitch: ({ multiWallet, setMultiWallet, disabled, }: Props) => JSX.Element;
+export declare const MultiWalletSwitch: ({ multiWallet, setMultiWallet, }: Props) => JSX.Element;
 export {};

package/src/lib/components/Toolkit/components/MultiWalletSwitch.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { Switch } from '../../Switch/Switch.js';
 
-const MultiWalletSwitch = ({ multiWallet, setMultiWallet, disabled, }) => (jsx(Switch, { disabled: disabled, firstButton: {
+const MultiWalletSwitch = ({ multiWallet, setMultiWallet, }) => (jsx(Switch, { firstButton: {
         active: multiWallet,
         handleButtonClick: () => setMultiWallet(true),
         name: 'True',

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs

@@ -26,8 +26,8 @@ var Typography = require('../Typography/Typography.cjs');
 var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 var Button = require('../Button/Button.cjs');
 require('@dynamic-labs/multi-wallet');
-require('../../context/ThemeContext/ThemeContext.cjs');
 require('../../config/ApiEndpoint.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.js

@@ -22,8 +22,8 @@ import { Typography } from '../Typography/Typography.js';
 import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 import { Button } from '../Button/Button.js';
 import '@dynamic-labs/multi-wallet';
-import '../../context/ThemeContext/ThemeContext.js';
 import '../../config/ApiEndpoint.js';
+import '../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/DynamicContext/DynamicContext.js';

package/src/lib/components/UserAvatar/UserAvatar.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var iconic = require('@dynamic-labs/iconic');
+var Image = require('../Image/Image.cjs');
+
+const UserAvatar = ({ user }) => {
+    const getConnectedSocialAccountAvatarUrl = () => {
+        var _a, _b, _c;
+        const avatarUrl = (_c = (_b = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find((credential) => {
+            var _a;
+            return user.lastVerifiedCredentialId === credential.id &&
+                ((_a = credential.oauthAccountPhotos) === null || _a === void 0 ? void 0 : _a.length);
+        })) === null || _b === void 0 ? void 0 : _b.oauthAccountPhotos) === null || _c === void 0 ? void 0 : _c[0];
+        return avatarUrl;
+    };
+    return (jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__connected-avatar' }, { children: jsxRuntime.jsx(Image.Image, { src: getConnectedSocialAccountAvatarUrl(), alt: 'User avatar', dataTestId: 'user-avatar', fallback: jsxRuntime.jsx(iconic.UserProfileIcon, {}) }) })));
+};
+
+exports.UserAvatar = UserAvatar;

package/src/lib/components/UserAvatar/UserAvatar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { UserProfile } from '../../shared';
+type UserAvatarProps = {
+    user: UserProfile | undefined;
+};
+export declare const UserAvatar: ({ user }: UserAvatarProps) => JSX.Element;
+export {};

package/src/lib/components/UserAvatar/UserAvatar.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { UserProfileIcon } from '@dynamic-labs/iconic';
+import { Image } from '../Image/Image.js';
+
+const UserAvatar = ({ user }) => {
+    const getConnectedSocialAccountAvatarUrl = () => {
+        var _a, _b, _c;
+        const avatarUrl = (_c = (_b = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find((credential) => {
+            var _a;
+            return user.lastVerifiedCredentialId === credential.id &&
+                ((_a = credential.oauthAccountPhotos) === null || _a === void 0 ? void 0 : _a.length);
+        })) === null || _b === void 0 ? void 0 : _b.oauthAccountPhotos) === null || _c === void 0 ? void 0 : _c[0];
+        return avatarUrl;
+    };
+    return (jsx("div", Object.assign({ className: 'user-profile-social-account__connected-avatar' }, { children: jsx(Image, { src: getConnectedSocialAccountAvatarUrl(), alt: 'User avatar', dataTestId: 'user-avatar', fallback: jsx(UserProfileIcon, {}) }) })));
+};
+
+export { UserAvatar };

package/src/lib/components/UserProfile/UserProfile.cjs

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var fieldsConfig = require('../../views/CollectUserDataView/fieldsConfig.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
-require('react');
 require('@dynamic-labs/wallet-book');
 var index$1 = require('../../shared/utils/functions/getValueByKey/index.cjs');
 require('@dynamic-labs/utils');
@@ -23,6 +23,7 @@ require('@dynamic-labs/multi-wallet');
 var index = require('../../utils/functions/getEnabledOAuthProviders/index.cjs');
 var isSocialKycEnabled = require('../../utils/functions/isSocialKycEnabled/isSocialKycEnabled.cjs');
 var getUserProfileFields = require('../../utils/functions/getUserProfileFields/getUserProfileFields.cjs');
+require('../../config/ApiEndpoint.cjs');
 var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
 var ErrorContainer = require('../ErrorContainer/ErrorContainer.cjs');
 var UserProfileField = require('./parts/UserProfileField/UserProfileField.cjs');
@@ -32,6 +33,12 @@ var UserProfileSocialAccount = require('./parts/UserProfileSocialAccount/UserPro
 const UserProfile = ({ rootClassName }) => {
     const { projectSettings, user } = useInternalDynamicContext.useInternalDynamicContext();
     const { error } = ErrorContext.useErrorContext();
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
+        if (error && containerRef.current) {
+            containerRef.current.scrollTop = 0;
+        }
+    }, [error]);
     const allUserFields = getUserProfileFields.getUserProfileFields({
         projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
         user,
@@ -42,7 +49,7 @@ const UserProfile = ({ rootClassName }) => {
     const mapFieldKeyToValue = (fieldKey) => user === null || user === void 0 ? void 0 : user[fieldKey];
     if (!user)
         return null;
-    return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": 'userProfile', className: classNames.classNames('user-profile', rootClassName) }, { children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, Object.assign({ title: 'My information' }, { children: jsxRuntime.jsx("div", Object.assign({ className: 'user-profile__fields' }, { children: allUserFields.map(({ name }) => {
+    return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": 'userProfile', className: classNames.classNames('user-profile', rootClassName), ref: containerRef }, { children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, Object.assign({ title: 'My information' }, { children: jsxRuntime.jsx("div", Object.assign({ className: 'user-profile__fields' }, { children: allUserFields.map(({ name }) => {
                         const { label } = index$1.getValueByKey(fieldsConfig.fieldsConfig, name);
                         const value = mapFieldKeyToValue(name);
                         return (jsxRuntime.jsx(UserProfileField.UserProfileField, { name: name, label: label, value: value }, name));

package/src/lib/components/UserProfile/UserProfile.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
 import { fieldsConfig } from '../../views/CollectUserDataView/fieldsConfig.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
-import 'react';
 import '@dynamic-labs/wallet-book';
 import { getValueByKey } from '../../shared/utils/functions/getValueByKey/index.js';
 import '@dynamic-labs/utils';
@@ -19,6 +19,7 @@ import '@dynamic-labs/multi-wallet';
 import { getEnabledOAuthProviders } from '../../utils/functions/getEnabledOAuthProviders/index.js';
 import { isSocialKycEnabled } from '../../utils/functions/isSocialKycEnabled/isSocialKycEnabled.js';
 import { getUserProfileFields } from '../../utils/functions/getUserProfileFields/getUserProfileFields.js';
+import '../../config/ApiEndpoint.js';
 import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
 import { ErrorContainer } from '../ErrorContainer/ErrorContainer.js';
 import { UserProfileField } from './parts/UserProfileField/UserProfileField.js';
@@ -28,6 +29,12 @@ import { UserProfileSocialAccount } from './parts/UserProfileSocialAccount/UserP
 const UserProfile = ({ rootClassName }) => {
     const { projectSettings, user } = useInternalDynamicContext();
     const { error } = useErrorContext();
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (error && containerRef.current) {
+            containerRef.current.scrollTop = 0;
+        }
+    }, [error]);
     const allUserFields = getUserProfileFields({
         projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
         user,
@@ -38,7 +45,7 @@ const UserProfile = ({ rootClassName }) => {
     const mapFieldKeyToValue = (fieldKey) => user === null || user === void 0 ? void 0 : user[fieldKey];
     if (!user)
         return null;
-    return (jsxs("div", Object.assign({ "data-testid": 'userProfile', className: classNames('user-profile', rootClassName) }, { children: [error && jsx(ErrorContainer, { children: error }), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsx(UserProfileSection, Object.assign({ title: 'My information' }, { children: jsx("div", Object.assign({ className: 'user-profile__fields' }, { children: allUserFields.map(({ name }) => {
+    return (jsxs("div", Object.assign({ "data-testid": 'userProfile', className: classNames('user-profile', rootClassName), ref: containerRef }, { children: [error && jsx(ErrorContainer, { children: error }), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsx(UserProfileSection, Object.assign({ title: 'My information' }, { children: jsx("div", Object.assign({ className: 'user-profile__fields' }, { children: allUserFields.map(({ name }) => {
                         const { label } = getValueByKey(fieldsConfig, name);
                         const value = mapFieldKeyToValue(name);
                         return (jsx(UserProfileField, { name: name, label: label, value: value }, name));

package/src/lib/components/UserProfile/parts/UserProfileField/UserProfileField.cjs

@@ -18,6 +18,7 @@ require('ethers');
 require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
+require('../../../../config/ApiEndpoint.cjs');
 require('../../../ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -25,7 +26,6 @@ require('react-focus-lock');
 require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');

package/src/lib/components/UserProfile/parts/UserProfileField/UserProfileField.js

@@ -14,6 +14,7 @@ import 'ethers';
 import '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
+import '../../../../config/ApiEndpoint.js';
 import '../../../ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -21,7 +22,6 @@ import 'react-focus-lock';
 import '../../../Transition/ZoomTransition/ZoomTransition.js';
 import '../../../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../Transition/OpacityTransition/OpacityTransition.js';
-import '../../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../../context/ErrorContext/ErrorContext.js';

package/src/lib/components/UserProfile/parts/UserProfileSection/UserProfileSection.cjs

@@ -18,6 +18,7 @@ require('ethers');
 require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
+require('../../../../config/ApiEndpoint.cjs');
 require('../../../ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -25,7 +26,6 @@ require('react-focus-lock');
 require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');

package/src/lib/components/UserProfile/parts/UserProfileSection/UserProfileSection.js

@@ -14,6 +14,7 @@ import 'ethers';
 import '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
+import '../../../../config/ApiEndpoint.js';
 import '../../../ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -21,7 +22,6 @@ import 'react-focus-lock';
 import '../../../Transition/ZoomTransition/ZoomTransition.js';
 import '../../../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../Transition/OpacityTransition/OpacityTransition.js';
-import '../../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../../context/ErrorContext/ErrorContext.js';

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs

@@ -20,6 +20,7 @@ require('ethers');
 require('../../../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
+require('../../../../config/ApiEndpoint.cjs');
 require('../../../ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 var Icon = require('../../../Icon/Icon.cjs');
@@ -28,7 +29,6 @@ require('react-focus-lock');
 require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.js

@@ -16,6 +16,7 @@ import 'ethers';
 import '../../../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/multi-wallet';
+import '../../../../config/ApiEndpoint.js';
 import '../../../ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import { Icon } from '../../../Icon/Icon.js';
@@ -24,7 +25,6 @@ import 'react-focus-lock';
 import '../../../Transition/ZoomTransition/ZoomTransition.js';
 import '../../../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../Transition/OpacityTransition/OpacityTransition.js';
-import '../../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../../context/ErrorContext/ErrorContext.js';

package/src/lib/components/UserProfileForm/UserProfileForm.cjs

@@ -20,6 +20,7 @@ require('ethers');
 require('../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var getUserProfileFields = require('../../utils/functions/getUserProfileFields/getUserProfileFields.cjs');
+require('../../config/ApiEndpoint.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var index = require('../../views/CollectUserDataView/UserDataFields/index.cjs');

package/src/lib/components/UserProfileForm/UserProfileForm.js

@@ -16,6 +16,7 @@ import 'ethers';
 import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { getUserProfileFields } from '../../utils/functions/getUserProfileFields/getUserProfileFields.js';
+import '../../config/ApiEndpoint.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { UserDataFields } from '../../views/CollectUserDataView/UserDataFields/index.js';

package/src/lib/components/index.d.ts

@@ -47,3 +47,4 @@ export * from './InlineWidget';
 export * from './WalletInformationCard';
 export * from './MenuList';
 export * from './SocialSignIn';
+export * from './SignMessagePreview';