@dynamic-labs/sdk-react-core 0.18.0-RC.10 → 0.18.0-RC.12

package/src/lib/components/OverlayCard/OverlayCard.js

@@ -32,6 +32,7 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../InlineWidget/InlineWidget.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/Portal/Portal.cjs

@@ -37,6 +37,7 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../InlineWidget/InlineWidget.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Portal/Portal.js

@@ -33,6 +33,7 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../InlineWidget/InlineWidget.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/Step/Step.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var Typography = require('../Typography/Typography.cjs');
 var Icon = require('../Icon/Icon.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
@@ -11,7 +12,6 @@ require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
-require('react');
 var check = require('../../shared/assets/check.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
@@ -20,6 +20,27 @@ require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 
-const Step = ({ children, className, icon, checked = false, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('step', className) }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'step__leading' }, { children: [icon ? (jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'step__icon' }, { children: icon }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'step__index' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: jsxRuntime.jsx("span", { className: 'step__index-label' }) })) }))), checked && (jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'step__check-mark' }, { children: jsxRuntime.jsx(check.ReactComponent, {}) })))] })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: children }))] })));
+const typographyOpacityMap = {
+    current: '1',
+    default: '1',
+    done: '0.4',
+    upcoming: '0.15',
+};
+const Step = ({ children, className, icon, state = 'default', }) => {
+    // Reduce opacity of icon if upcoming
+    const style = React.useMemo(() => ({ opacity: state === 'upcoming' ? 0.5 : 1 }), [state]);
+    const ComputedIcon = React.useMemo(() => {
+        // If done use checkmark icon
+        if (state === 'done')
+            return (jsxRuntime.jsx("div", Object.assign({ className: 'step__icon step__icon--done' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'step__icon__check-mark' }, { children: jsxRuntime.jsx(check.ReactComponent, { style: style }) })) })));
+        // Use provided icon if available
+        else if (icon)
+            return (jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'step__icon' }, { children: jsxRuntime.jsx("div", Object.assign({ style: style }, { children: icon })) })));
+        // Otherwise use step index as icon
+        else
+            return (jsxRuntime.jsx("div", Object.assign({ className: 'step__index' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_small', style: style }, { children: jsxRuntime.jsx("span", { className: 'step__index-label' }) })) })));
+    }, [icon, state, style]);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('step', className) }, { children: [ComputedIcon, jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_small', style: { opacity: typographyOpacityMap[state] } }, { children: children }))] })));
+};
 
 exports.Step = Step;

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

@@ -1,8 +1,7 @@
 import { FC, PropsWithChildren, ReactElement } from 'react';
-type StepProps = {
+export type StepProps = {
     icon?: ReactElement;
-    checked?: boolean;
+    state?: 'current' | 'done' | 'upcoming' | 'default';
     className?: string;
 };
 export declare const Step: FC<PropsWithChildren<StepProps>>;
-export {};

package/src/lib/components/Step/Step.js

@@ -1,4 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { Typography } from '../Typography/Typography.js';
 import { Icon } from '../Icon/Icon.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
@@ -7,7 +8,6 @@ import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
-import 'react';
 import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
@@ -16,6 +16,27 @@ import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 
-const Step = ({ children, className, icon, checked = false, }) => (jsxs("div", Object.assign({ className: classNames('step', className) }, { children: [jsxs("div", Object.assign({ className: 'step__leading' }, { children: [icon ? (jsx(Icon, Object.assign({ className: 'step__icon' }, { children: icon }))) : (jsx("div", Object.assign({ className: 'step__index' }, { children: jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: jsx("span", { className: 'step__index-label' }) })) }))), checked && (jsx(Icon, Object.assign({ className: 'step__check-mark' }, { children: jsx(SvgCheck, {}) })))] })), jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: children }))] })));
+const typographyOpacityMap = {
+    current: '1',
+    default: '1',
+    done: '0.4',
+    upcoming: '0.15',
+};
+const Step = ({ children, className, icon, state = 'default', }) => {
+    // Reduce opacity of icon if upcoming
+    const style = useMemo(() => ({ opacity: state === 'upcoming' ? 0.5 : 1 }), [state]);
+    const ComputedIcon = useMemo(() => {
+        // If done use checkmark icon
+        if (state === 'done')
+            return (jsx("div", Object.assign({ className: 'step__icon step__icon--done' }, { children: jsx(Icon, Object.assign({ className: 'step__icon__check-mark' }, { children: jsx(SvgCheck, { style: style }) })) })));
+        // Use provided icon if available
+        else if (icon)
+            return (jsx(Icon, Object.assign({ className: 'step__icon' }, { children: jsx("div", Object.assign({ style: style }, { children: icon })) })));
+        // Otherwise use step index as icon
+        else
+            return (jsx("div", Object.assign({ className: 'step__index' }, { children: jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small', style: style }, { children: jsx("span", { className: 'step__index-label' }) })) })));
+    }, [icon, state, style]);
+    return (jsxs("div", Object.assign({ className: classNames('step', className) }, { children: [ComputedIcon, jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small', style: { opacity: typographyOpacityMap[state] } }, { children: children }))] })));
+};
 
 export { Step };

package/src/lib/components/Tooltip/Tooltip.cjs

@@ -41,6 +41,7 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../InlineWidget/InlineWidget.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Tooltip/Tooltip.js

@@ -37,6 +37,7 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../InlineWidget/InlineWidget.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/TosAndPp/TosAndPp.cjs

@@ -8,9 +8,24 @@ require('@dynamic-labs/utils');
 var isConnectOnly = require('../../utils/hooks/authenticationHooks/helpers/isConnectOnly.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
-const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, }) => {
-    const { user, authMode } = useInternalDynamicContext.useInternalDynamicContext();
-    return (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", isConnectOnly.isConnectOnly(user, authMode) ? 'connecting' : 'logging in', ", you agree to", jsxRuntime.jsx("br", {}), "our\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })), "\u00A0&\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
+const TosAndPp = () => {
+    const { user, authMode, customPrivacyPolicy, customTermsOfServices, privacyPolicyUrl, termsOfServiceUrl, } = useInternalDynamicContext.useInternalDynamicContext();
+    const connectionType = isConnectOnly.isConnectOnly(user, authMode)
+        ? 'connecting'
+        : 'logging in';
+    const renderTermsOfServices = () => {
+        if (!termsOfServiceUrl) {
+            return;
+        }
+        return (jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })));
+    };
+    const renderPrivacyPolicy = () => {
+        if (!privacyPolicyUrl) {
+            return;
+        }
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [termsOfServiceUrl && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0&\u00A0" }), jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" }))] }));
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(privacyPolicyUrl || termsOfServiceUrl) && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", connectionType, ", you agree to", jsxRuntime.jsx("br", {}), "our\u00A0", renderTermsOfServices(), renderPrivacyPolicy(), "."] }))), customTermsOfServices, customPrivacyPolicy] }));
 };
 
 exports.TosAndPp = TosAndPp;

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

@@ -1,7 +1,2 @@
 /// <reference types="react" />
-type Props = {
-    privacyPolicyUrl: string;
-    termsOfServiceUrl: string;
-};
-export declare const TosAndPp: ({ privacyPolicyUrl, termsOfServiceUrl, }: Props) => JSX.Element | null;
-export {};
+export declare const TosAndPp: () => JSX.Element | null;

package/src/lib/components/TosAndPp/TosAndPp.js

@@ -1,12 +1,27 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/utils';
 import { isConnectOnly } from '../../utils/hooks/authenticationHooks/helpers/isConnectOnly.js';
 import { Typography } from '../Typography/Typography.js';
 
-const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, }) => {
-    const { user, authMode } = useInternalDynamicContext();
-    return (jsxs(Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", isConnectOnly(user, authMode) ? 'connecting' : 'logging in', ", you agree to", jsx("br", {}), "our\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })), "\u00A0&\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
+const TosAndPp = () => {
+    const { user, authMode, customPrivacyPolicy, customTermsOfServices, privacyPolicyUrl, termsOfServiceUrl, } = useInternalDynamicContext();
+    const connectionType = isConnectOnly(user, authMode)
+        ? 'connecting'
+        : 'logging in';
+    const renderTermsOfServices = () => {
+        if (!termsOfServiceUrl) {
+            return;
+        }
+        return (jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })));
+    };
+    const renderPrivacyPolicy = () => {
+        if (!privacyPolicyUrl) {
+            return;
+        }
+        return (jsxs(Fragment, { children: [termsOfServiceUrl && jsx(Fragment, { children: "\u00A0&\u00A0" }), jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" }))] }));
+    };
+    return (jsxs(Fragment, { children: [(privacyPolicyUrl || termsOfServiceUrl) && (jsxs(Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", connectionType, ", you agree to", jsx("br", {}), "our\u00A0", renderTermsOfServices(), renderPrivacyPolicy(), "."] }))), customTermsOfServices, customPrivacyPolicy] }));
 };
 
 export { TosAndPp };

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

@@ -44,6 +44,7 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../InlineWidget/InlineWidget.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

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

@@ -40,6 +40,7 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../InlineWidget/InlineWidget.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs

@@ -39,6 +39,7 @@ require('../../Popper/Popper/Popper.cjs');
 require('../../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../InlineWidget/InlineWidget.cjs');
 require('../../../context/MockContext/MockContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.js

@@ -35,6 +35,7 @@ import '../../Popper/Popper/Popper.js';
 import '../../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../InlineWidget/InlineWidget.js';
 import '../../../context/MockContext/MockContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/UserAddress/UserAddress.cjs

@@ -39,6 +39,7 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../InlineWidget/InlineWidget.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');

package/src/lib/components/UserAddress/UserAddress.js

@@ -35,6 +35,7 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../InlineWidget/InlineWidget.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import { usePromise } from '../../utils/hooks/usePromise/usePromise.js';

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

@@ -39,6 +39,7 @@ require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../../InlineWidget/InlineWidget.cjs');
 var VerifiedEmailIcon = require('./components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 
 const UserProfileField = ({ name, label, value, }) => {

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

@@ -35,6 +35,7 @@ import '../../../Popper/Popper/Popper.js';
 import '../../../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../../InlineWidget/InlineWidget.js';
 import { VerifiedEmailIcon } from './components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 
 const UserProfileField = ({ name, label, value, }) => {

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

@@ -39,6 +39,7 @@ require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../../InlineWidget/InlineWidget.cjs');
 
 const UserProfileSection = ({ title, children, }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-section' }, { children: [title && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'medium', variant: 'body_small', className: 'user-profile-section__title' }, { children: title }))), children] })));
 

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

@@ -35,6 +35,7 @@ import '../../../Popper/Popper/Popper.js';
 import '../../../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../../InlineWidget/InlineWidget.js';
 
 const UserProfileSection = ({ title, children, }) => (jsxs("div", Object.assign({ className: 'user-profile-section' }, { children: [title && (jsx(Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'medium', variant: 'body_small', className: 'user-profile-section__title' }, { children: title }))), children] })));
 

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

@@ -45,6 +45,7 @@ require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../../InlineWidget/InlineWidget.cjs');
 var helpers = require('../../../../widgets/DynamicWidget/helpers/helpers.cjs');
 var useUpdateUserProfileByJWTCallback = require('../../../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.cjs');
 var ConnectedAccountAvatar = require('./components/ConnectedAccountAvatar/ConnectedAccountAvatar.cjs');

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

@@ -41,6 +41,7 @@ import '../../../Popper/Popper/Popper.js';
 import '../../../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../../InlineWidget/InlineWidget.js';
 import { capitalize } from '../../../../widgets/DynamicWidget/helpers/helpers.js';
 import { useUpdateUserProfileByJWTCallback } from '../../../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.js';
 import { ConnectedAccountAvatar } from './components/ConnectedAccountAvatar/ConnectedAccountAvatar.js';

package/src/lib/components/WalletInformationCard/WalletInformationCard.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Typography = require('../Typography/Typography.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('@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');
+var Icon = require('../Icon/Icon.cjs');
+
+const WalletInformationCard = ({ address, ens, balance, icon, network, menu, }) => {
+    const details = React.useMemo(() => {
+        const shortenAddress = shortenWalletAddress.shortenWalletAddress(address, 4, 4);
+        if (ens) {
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_normal', truncate: true }, { children: ens })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: shortenAddress }))] }));
+        }
+        return (jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: shortenAddress })));
+    }, [ens, address]);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-information-card' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-information-card__header' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-information-card__details-container' }, { children: [icon && (jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'wallet-information-card__icon' }, { children: icon }))), jsxRuntime.jsx("div", Object.assign({ className: 'wallet-information-card__details' }, { children: details })), jsxRuntime.jsx("div", Object.assign({ className: 'wallet-information-card__menu' }, { children: menu }))] })), network] })), jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-information-card__balance-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_small' }, { children: "Balance" })), balance] }))] })));
+};
+
+exports.WalletInformationCard = WalletInformationCard;

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

@@ -0,0 +1,11 @@
+import { FC, ReactElement, ReactNode } from 'react';
+type WalletInformationCardProps = {
+    address: string;
+    ens?: string;
+    icon?: ReactElement;
+    network?: ReactNode;
+    balance?: ReactNode;
+    menu?: ReactNode;
+};
+export declare const WalletInformationCard: FC<WalletInformationCardProps>;
+export {};

package/src/lib/components/WalletInformationCard/WalletInformationCard.js

@@ -0,0 +1,29 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Typography } from '../Typography/Typography.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 '@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';
+import { Icon } from '../Icon/Icon.js';
+
+const WalletInformationCard = ({ address, ens, balance, icon, network, menu, }) => {
+    const details = useMemo(() => {
+        const shortenAddress = shortenWalletAddress(address, 4, 4);
+        if (ens) {
+            return (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ color: 'primary', variant: 'body_normal', truncate: true }, { children: ens })), jsx(Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: shortenAddress }))] }));
+        }
+        return (jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: shortenAddress })));
+    }, [ens, address]);
+    return (jsxs("div", Object.assign({ className: 'wallet-information-card' }, { children: [jsxs("div", Object.assign({ className: 'wallet-information-card__header' }, { children: [jsxs("div", Object.assign({ className: 'wallet-information-card__details-container' }, { children: [icon && (jsx(Icon, Object.assign({ className: 'wallet-information-card__icon' }, { children: icon }))), jsx("div", Object.assign({ className: 'wallet-information-card__details' }, { children: details })), jsx("div", Object.assign({ className: 'wallet-information-card__menu' }, { children: menu }))] })), network] })), jsxs("div", Object.assign({ className: 'wallet-information-card__balance-container' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_small' }, { children: "Balance" })), balance] }))] })));
+};
+
+export { WalletInformationCard };

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

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

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

@@ -43,3 +43,5 @@ export * from './Step';
 export * from './Stepper';
 export * from './Modal';
 export * from './ModalCard';
+export * from './InlineWidget';
+export * from './WalletInformationCard';

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -64,6 +64,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 var FundingContext = require('../FundingContext/FundingContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -73,7 +74,6 @@ require('../../components/UserProfile/parts/UserProfileField/components/Verified
 var FundingWidget = require('../../widgets/FundingWidget/FundingWidget.cjs');
 var DynamicBridgeWidgetContext = require('../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
-require('../../widgets/DynamicBridgeWidget/components/DynamicBridgeWidgetNav/DynamicBridgeWidgetNav.cjs');
 var SendBalanceContext = require('../SendBalanceContext/SendBalanceContext.cjs');
 var usePrimaryWalletId = require('../../utils/hooks/usePrimaryWalletId/usePrimaryWalletId.cjs');
 var WalletGroupContext = require('../WalletGroupContext/WalletGroupContext.cjs');
@@ -91,7 +91,7 @@ var useSetShowAuthFlowWithInit = require('./hooks/useSetShowAuthFlowWithInit/use
 
 const EMPTY_INITIAL_USER = undefined;
 const DynamicContext = React.createContext(undefined);
-const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', walletsByChain, cssOverrides, defaultNumberOfWalletsToShow = values.DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displayTermsOfService = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', multiWallet: deprecatedMultiWallet, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectV1Bridge, walletConnectors: walletConnectorsProp, }, children, theme, }) => {
+const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', walletsByChain, cssOverrides, defaultNumberOfWalletsToShow = values.DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displayTermsOfService = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', multiWallet: deprecatedMultiWallet, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectV1Bridge, walletConnectors: walletConnectorsProp, }, children, theme, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     if (!environmentId) {
         throw new utils.MissingEnvironmentIdError();
@@ -151,7 +151,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     });
     const [authMode, setAuthMode] = useLocalStorage.useLocalStorage(localStorage$1.AUTH_MODE, initialAuthenticationMode);
     const { clearPrimaryWalletId, primaryWalletId, setPrimaryWalletId } = usePrimaryWalletId.usePrimaryWalletId();
-    const { connectWallet, removeConnectedWalletsInfo, connectedWalletsInfo, connectedWallet, getConnectedWalletById, connectedWallets, connectWalletByAddressAndChain, unlinkConnectedWallet, setConnectedWallet, } = useConnectWallet.useConnectWallet({
+    const { connectWallet, removeConnectedWalletsInfo, connectedWalletsInfo, connectedWallet, getConnectedWalletById, connectedWallets, connectWalletByAddressAndChain, unlinkConnectedWallet, } = useConnectWallet.useConnectWallet({
         authMode,
         clearPrimaryWalletId,
         enableVisitTrackingOnConnectOnly,
@@ -222,7 +222,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         for (const connector of walletConnectors) {
             yield connector.endSession();
         }
-        (_h = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _h === void 0 ? void 0 : _h.endSession();
+        yield ((_h = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _h === void 0 ? void 0 : _h.endSession());
         setAuthMode(initialAuthenticationMode);
         setShowAuthFlow(false);
         setMultiWalletWidgetState('idle');
@@ -230,7 +230,6 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         handleRemoveLsNetworks();
         setOnboardingOnlyJwt(undefined);
         removeConnectedWalletsInfo();
-        setConnectedWallet(null);
         removeConnectedUser();
         clearPrimaryWalletId();
         removeConnectedNameService();
@@ -246,7 +245,6 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         removeAuthTokenAndUser,
         handleRemoveLsNetworks,
         removeConnectedWalletsInfo,
-        setConnectedWallet,
         removeConnectedUser,
         clearPrimaryWalletId,
         removeConnectedNameService,
@@ -277,6 +275,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         verifiedCredentials: (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || [],
     });
     const { loadingNetwork, network, setNetwork } = useWalletEventListeners.useWalletEventListeners({
+        authMode,
         computeConnectedStateForWallets,
         connectWalletByAddressAndChain,
         handleLogOut,
@@ -322,7 +321,6 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setMultiWalletWidgetState('idle');
         if (authMode !== 'connect-only') {
             removeConnectedWalletsInfo();
-            setConnectedWallet(null);
         }
         if (!localStorage.LocalStorage.getFromLS(localStorage$1.AUTH_USER)) {
             localStorage.LocalStorage.removeFromLS(localStorage$1.AUTH_TOKEN);
@@ -343,7 +341,6 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         primaryWallet,
         clearAllWalletConnectSessions,
         removeConnectedWalletsInfo,
-        setConnectedWallet,
     ]);
     const value = React.useMemo(() => {
         var _a, _b;
@@ -369,6 +366,8 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             connectedWalletsInfo,
             consumeNonce,
             cssOverrides,
+            customPrivacyPolicy,
+            customTermsOfServices,
             debugError,
             decodedAuthToken: decodeJwt.decodeJwt(getAuthToken.getAuthToken()),
             decodedOnboardingOnlyToken: decodeJwt.decodeJwt(onboardingOnlyJwt),
@@ -474,6 +473,8 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         computeConnectedStateForWallets,
         connectWallet,
         connectedWallet,
+        customPrivacyPolicy,
+        customTermsOfServices,
         primaryWallet,
         secondaryWallets,
         connectedWalletsInfo,
@@ -598,7 +599,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
                             isBridgeFlow,
                             isUserConnected,
                             loginWithEmail,
-                        }) }, { children: jsxRuntime.jsx(WalletContext.WalletContextProvider, Object.assign({ canSync: didConnectedStateLoad }, { children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(ErrorContext.ErrorContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(DynamicBridgeWidgetContext.DynamicBridgeWidgetContextProvider, { children: jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(FundingContext.FundingContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsx(SendBalanceContext.SendBalanceContextProvider, { children: jsxRuntime.jsxs(WalletGroupContext.WalletGroupContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) })) })) }) })) })) })));
+                        }) }, { children: jsxRuntime.jsx(WalletContext.WalletContextProvider, Object.assign({ canSync: didConnectedStateLoad, connectWalletByAddressAndChain: connectWalletByAddressAndChain }, { children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(ErrorContext.ErrorContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(DynamicBridgeWidgetContext.DynamicBridgeWidgetContextProvider, { children: jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(FundingContext.FundingContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsx(SendBalanceContext.SendBalanceContextProvider, { children: jsxRuntime.jsxs(WalletGroupContext.WalletGroupContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) })) })) }) })) })) })));
 };
 
 exports.DynamicContext = DynamicContext;

package/src/lib/context/DynamicContext/DynamicContext.d.ts

@@ -39,6 +39,8 @@ export interface IDynamicContext {
     connectedWalletsInfo: ConnectedWalletConnectorType[] | [];
     consumeNonce: () => string | undefined;
     cssOverrides?: string | JSX.Element;
+    customPrivacyPolicy?: ReactNode;
+    customTermsOfServices?: ReactNode;
     debugError: boolean;
     decodedAuthToken: Omit<DynamicJwt, 'jwt'> | undefined;
     decodedOnboardingOnlyToken: Omit<DynamicJwt, 'jwt'> | undefined;
@@ -163,6 +165,7 @@ export interface DynamicContextProps {
         notInTheListImageUrl?: string;
         onboardingImageUrl?: string;
         policiesConsentInnerComponent?: ReactNode | ReactNode[];
+        customPrivacyPolicy?: ReactNode;
         privacyPolicyUrl?: string;
         shadowDOMEnabled?: boolean;
         signWithEmailWalletName?: string;
@@ -170,6 +173,7 @@ export interface DynamicContextProps {
         socialMediaIconUrl?: Record<string, string> | Record<SocialNetworkIconType, string>;
         socialMediaLinkText?: string;
         socialMediaUrl?: string;
+        customTermsOfServices?: ReactNode;
         termsOfServiceUrl?: string;
         toolkitEnabled?: boolean;
         walletConnectV1Bridge?: string;
@@ -179,4 +183,4 @@ export interface DynamicContextProps {
     theme?: ThemeData | ThemeSetting;
 }
 export declare const DynamicContext: import("react").Context<IDynamicContext | undefined>;
-export declare const DynamicContextProvider: ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, appLogoUrl, appName, walletsByChain, cssOverrides, defaultNumberOfWalletsToShow, flowNetwork, initialAuthenticationMode, debugError, displayTermsOfService, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel, multiWallet: deprecatedMultiWallet, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled, walletConnectV1Bridge, walletConnectors: walletConnectorsProp, }, children, theme, }: DynamicContextProps) => JSX.Element;
+export declare const DynamicContextProvider: ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, appLogoUrl, appName, walletsByChain, cssOverrides, defaultNumberOfWalletsToShow, flowNetwork, initialAuthenticationMode, debugError, displayTermsOfService, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel, multiWallet: deprecatedMultiWallet, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled, walletConnectV1Bridge, walletConnectors: walletConnectorsProp, }, children, theme, }: DynamicContextProps) => JSX.Element;