@dynamic-labs/sdk-react-core 0.17.0-RC.9 → 0.17.0

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

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ModalHeader } from '../ModalHeader/ModalHeader.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '../../config/LSSuffix.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import 'react';
+import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
+import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
+import { ReactComponent as SvgSignCircle } from '../../shared/assets/sign-circle.js';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '@dynamic-labs/utils';
+import '../../utils/constants/colors.js';
+import 'ethers';
+import '../../shared/consts/index.js';
+import { IconWithStatus } from '../IconWithStatus/IconWithStatus.js';
+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 '@dynamic-labs/rpc-providers';
+import '../../context/DynamicContext/DynamicContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import 'react-dom';
+import '../ShadowDOM/ShadowDOM.js';
+import 'react-focus-lock';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import '../Alert/Alert.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
+import '@dynamic-labs/wallet-book';
+import 'formik';
+import 'yup';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { TransactionRow } from '../TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.js';
+
+const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
+    const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close' }, { children: jsx(SvgClose, {}) })));
+    const networkIcon = (jsx("div", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
+    return (jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) })), jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsx(TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress(destinationAddress, 3, 3) })), jsxs(TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxs(TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsx(Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'transaction-status-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] })));
+};
+
+export { TransactionStatusLayout };

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

@@ -9,6 +9,7 @@ require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../../config/ApiEndpoint.cjs');
 require('../../../shared/logger.cjs');
+require('../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../context/ViewContext/ViewContext.cjs');
@@ -19,6 +20,7 @@ require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
 require('../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var useResizeObserver = require('../../../utils/hooks/useResizeObserver/useResizeObserver.cjs');
 var useTransition = require('../../../utils/hooks/useTransition/useTransition.cjs');
 require('react-dom');
@@ -31,6 +33,11 @@ require('../SlideInUpTransition/SlideInUpTransition.cjs');
 require('../OpacityTransition/OpacityTransition.cjs');
 require('../../IconButton/IconButton.cjs');
 require('../../Alert/Alert.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../Popper/Popper/Popper.cjs');
+require('../../Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 require('../../../context/MockContext/MockContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

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

@@ -5,6 +5,7 @@ import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../../config/ApiEndpoint.js';
 import '../../../shared/logger.js';
+import '../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../context/ViewContext/ViewContext.js';
@@ -15,6 +16,7 @@ import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useResizeObserver } from '../../../utils/hooks/useResizeObserver/useResizeObserver.js';
 import { useTransition } from '../../../utils/hooks/useTransition/useTransition.js';
 import 'react-dom';
@@ -27,6 +29,11 @@ import '../SlideInUpTransition/SlideInUpTransition.js';
 import '../OpacityTransition/OpacityTransition.js';
 import '../../IconButton/IconButton.js';
 import '../../Alert/Alert.js';
+import '@dynamic-labs/wallet-book';
+import '../../Popper/Popper/Popper.js';
+import '../../Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 import '../../../context/MockContext/MockContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
+require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
+import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';

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

@@ -7,6 +7,7 @@ var React = require('react');
 var fieldsConfig = require('../../views/CollectUserDataView/fieldsConfig.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
+require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
@@ -19,14 +20,14 @@ var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 var index = require('../../utils/functions/getEnabledOAuthProviders/index.cjs');
-var getEnabledUserProfileFields = require('../../utils/functions/getEnabledUserProfileFields/getEnabledUserProfileFields.cjs');
+var getUserProfileFields = require('../../utils/functions/getUserProfileFields/getUserProfileFields.cjs');
 var UserProfileField = require('./parts/UserProfileField/UserProfileField.cjs');
 var UserProfileSection = require('./parts/UserProfileSection/UserProfileSection.cjs');
 var UserProfileSocialAccount = require('./parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs');
 
 const UserProfile = ({ rootClassName }) => {
     const { projectSettings, user } = useInternalDynamicContext.useInternalDynamicContext();
-    const allUserFields = getEnabledUserProfileFields.getUserProfileFields({
+    const allUserFields = getUserProfileFields.getUserProfileFields({
         projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
         user,
     });

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

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { fieldsConfig } from '../../views/CollectUserDataView/fieldsConfig.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
+import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
@@ -15,7 +16,7 @@ import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import { getEnabledOAuthProviders } from '../../utils/functions/getEnabledOAuthProviders/index.js';
-import { getUserProfileFields } from '../../utils/functions/getEnabledUserProfileFields/getEnabledUserProfileFields.js';
+import { getUserProfileFields } from '../../utils/functions/getUserProfileFields/getUserProfileFields.js';
 import { UserProfileField } from './parts/UserProfileField/UserProfileField.js';
 import { UserProfileSection } from './parts/UserProfileSection/UserProfileSection.js';
 import { UserProfileSocialAccount } from './parts/UserProfileSocialAccount/UserProfileSocialAccount.js';

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

@@ -7,6 +7,7 @@ require('react');
 var Typography = require('../../../Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
@@ -26,17 +27,23 @@ require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../IconButton/IconButton.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../Alert/Alert.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-require('../../../IconButton/IconButton.cjs');
-require('../../../Alert/Alert.cjs');
+require('../../../Popper/Popper/Popper.cjs');
+require('../../../Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 var VerifiedEmailIcon = require('./components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 
 const UserProfileField = ({ name, label, value, }) => {
     const isEmpty = value === '';
     const isEmailField = name === 'email';
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'span', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsxRuntime.jsx(VerifiedEmailIcon.VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon' }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-field__value' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'p', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsxRuntime.jsx(VerifiedEmailIcon.VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon', overwriteTooltipProps: { as: 'div' } }))] }))] })));
 };
 
 exports.UserProfileField = UserProfileField;

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

@@ -3,6 +3,7 @@ import 'react';
 import { Typography } from '../../../Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
+import '../../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
@@ -22,17 +23,23 @@ import '../../../Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../IconButton/IconButton.js';
+import '@dynamic-labs/wallet-book';
+import '../../../Alert/Alert.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import '../../../IconButton/IconButton.js';
-import '../../../Alert/Alert.js';
+import '../../../Popper/Popper/Popper.js';
+import '../../../Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 import { VerifiedEmailIcon } from './components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 
 const UserProfileField = ({ name, label, value, }) => {
     const isEmpty = value === '';
     const isEmailField = name === 'email';
-    return (jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsx(Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsx(Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'span', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsx(VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon' }))] })));
+    return (jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsx(Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsxs("div", Object.assign({ className: 'user-profile-field__value' }, { children: [jsx(Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'p', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsx(VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon', overwriteTooltipProps: { as: 'div' } }))] }))] })));
 };
 
 export { UserProfileField };

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

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var useInternalDynamicContext = require('../../../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../../../shared/logger.cjs');
+require('../../../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../../../context/ViewContext/ViewContext.cjs');
@@ -20,14 +21,14 @@ var Tooltip = require('../../../../../Tooltip/Tooltip.cjs');
 var Typography = require('../../../../../Typography/Typography.cjs');
 
 const VerifiedEmailTooltip = (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_small', color: 'tooltip' }, { children: "This email is verified" })));
-const VerifiedEmailIcon = ({ className, }) => {
+const VerifiedEmailIcon = ({ className, overwriteTooltipProps, }) => {
     const { user } = useInternalDynamicContext.useInternalDynamicContext();
     if (!(user === null || user === void 0 ? void 0 : user.email))
         return null;
     const isVerified = user === null || user === void 0 ? void 0 : user.verifiedCredentials.some(({ email }) => email === user.email);
     if (!isVerified)
         return null;
-    return (jsxRuntime.jsx(Tooltip.Tooltip, Object.assign({ content: VerifiedEmailTooltip }, { children: jsxRuntime.jsx(checkCircle.ReactComponent, { className: classNames.classNames('dynamic-verified-email-icon', className) }) })));
+    return (jsxRuntime.jsx(Tooltip.Tooltip, Object.assign({ content: VerifiedEmailTooltip }, overwriteTooltipProps, { children: jsxRuntime.jsx(checkCircle.ReactComponent, { className: classNames.classNames('dynamic-verified-email-icon', className) }) })));
 };
 
 exports.VerifiedEmailIcon = VerifiedEmailIcon;

package/src/lib/components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.d.ts

@@ -1,5 +1,7 @@
 import { FC } from 'react';
+import { TooltipProps } from '../../../../../Tooltip/Tooltip';
 export type VerifiedEmailIconProps = {
     className?: string;
+    overwriteTooltipProps?: Partial<TooltipProps>;
 };
 export declare const VerifiedEmailIcon: FC<VerifiedEmailIconProps>;

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

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useInternalDynamicContext } from '../../../../../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../../../shared/logger.js';
+import '../../../../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../../../context/ViewContext/ViewContext.js';
@@ -16,14 +17,14 @@ import { Tooltip } from '../../../../../Tooltip/Tooltip.js';
 import { Typography } from '../../../../../Typography/Typography.js';
 
 const VerifiedEmailTooltip = (jsx(Typography, Object.assign({ variant: 'numbers_small', color: 'tooltip' }, { children: "This email is verified" })));
-const VerifiedEmailIcon = ({ className, }) => {
+const VerifiedEmailIcon = ({ className, overwriteTooltipProps, }) => {
     const { user } = useInternalDynamicContext();
     if (!(user === null || user === void 0 ? void 0 : user.email))
         return null;
     const isVerified = user === null || user === void 0 ? void 0 : user.verifiedCredentials.some(({ email }) => email === user.email);
     if (!isVerified)
         return null;
-    return (jsx(Tooltip, Object.assign({ content: VerifiedEmailTooltip }, { children: jsx(SvgCheckCircle, { className: classNames('dynamic-verified-email-icon', className) }) })));
+    return (jsx(Tooltip, Object.assign({ content: VerifiedEmailTooltip }, overwriteTooltipProps, { children: jsx(SvgCheckCircle, { className: classNames('dynamic-verified-email-icon', className) }) })));
 };
 
 export { VerifiedEmailIcon };

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

@@ -7,6 +7,7 @@ require('react');
 var Typography = require('../../../Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
@@ -26,12 +27,18 @@ require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../IconButton/IconButton.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../Alert/Alert.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-require('../../../IconButton/IconButton.cjs');
-require('../../../Alert/Alert.cjs');
+require('../../../Popper/Popper/Popper.cjs');
+require('../../../Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 
-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: 'regular', variant: 'body_small', className: 'user-profile-section__title' }, { children: title }))), children] })));
+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] })));
 
 exports.UserProfileSection = UserProfileSection;

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

@@ -3,6 +3,7 @@ import 'react';
 import { Typography } from '../../../Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
+import '../../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
@@ -22,12 +23,18 @@ import '../../../Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../IconButton/IconButton.js';
+import '@dynamic-labs/wallet-book';
+import '../../../Alert/Alert.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import '../../../IconButton/IconButton.js';
-import '../../../Alert/Alert.js';
+import '../../../Popper/Popper/Popper.js';
+import '../../../Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 
-const UserProfileSection = ({ title, children, }) => (jsxs("div", Object.assign({ className: 'user-profile-section' }, { children: [title && (jsx(Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small', className: 'user-profile-section__title' }, { children: title }))), children] })));
+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] })));
 
 export { UserProfileSection };

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

@@ -8,7 +8,8 @@ var React = require('react');
 var iconic = require('@dynamic-labs/iconic');
 var Typography = require('../../../Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
-require('../../../../shared/logger.cjs');
+var logger = require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
 var add = require('../../../../shared/assets/add.cjs');
@@ -30,12 +31,19 @@ require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
 var api = require('../../../../data/api.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../IconButton/IconButton.cjs');
+require('@dynamic-labs/wallet-book');
+var Button = require('../../../Button/Button.cjs');
+require('../../../Alert/Alert.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var Button = require('../../../Button/Button.cjs');
-require('../../../IconButton/IconButton.cjs');
-require('../../../Alert/Alert.cjs');
+var useIconThemeVariant = require('../../../../utils/hooks/useIconThemeVariant/useIconThemeVariant.cjs');
+require('../../../Popper/Popper/Popper.cjs');
+require('../../../Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 var helpers = require('../../../../widgets/DynamicWidget/helpers/helpers.cjs');
 var useUpdateUserProfileByJWTCallback = require('../../../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.cjs');
 var ConnectedAccountAvatar = require('./components/ConnectedAccountAvatar/ConnectedAccountAvatar.cjs');
@@ -75,19 +83,29 @@ const UserProfileSocialAccount = ({ provider, authorizationUrl, verifiedCredenti
     };
     const disconnectAccount = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _c;
-        const jwt = yield api.unlinkOAuth({
-            environmentId,
-            verifiedCrentialId: (_c = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
-        }, String(authToken || onboardingOnlyJwt));
-        if (!jwt) {
-            return;
+        try {
+            setLoading(true);
+            const jwt = yield api.unlinkOAuth({
+                environmentId,
+                verifiedCrentialId: (_c = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
+            }, String(authToken || onboardingOnlyJwt));
+            if (!jwt) {
+                return;
+            }
+            updateUserProfileByJWT(jwt);
+        }
+        catch (err) {
+            logger.logger.error(err);
+        }
+        finally {
+            setLoading(false);
         }
-        updateUserProfileByJWT(jwt);
     });
+    const iconThemeVariant = useIconThemeVariant.useIconThemeVariant();
     if (!verifiedCredential && !authorizationUrl) {
         return null;
     }
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-social-account', "data-testid": `social-account-${provider}` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__icon' }, { children: verifiedCredential ? (jsxRuntime.jsx(ConnectedAccountAvatar.ConnectedAccountAvatar, { provider: provider, avatarUrl: (_a = verifiedCredential.oauthAccountPhotos) === null || _a === void 0 ? void 0 : _a[0] })) : (jsxRuntime.jsx(iconic.SocialIcon, { name: provider })) })), jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__label' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: (_b = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.publicIdentifier) !== null && _b !== void 0 ? _b : helpers.capitalize(provider) })) })), verifiedCredential ? (jsxRuntime.jsx(Button.Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonRounded: 'small', buttonPadding: 'none', onClick: disconnectAccount, loading: loading, dataTestId: 'social-account-disconnect-button', typographyProps: {
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-social-account', "data-testid": `social-account-${provider}` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__icon' }, { children: verifiedCredential ? (jsxRuntime.jsx(ConnectedAccountAvatar.ConnectedAccountAvatar, { provider: provider, avatarUrl: (_a = verifiedCredential.oauthAccountPhotos) === null || _a === void 0 ? void 0 : _a[0], iconThemeVariant: iconThemeVariant })) : (jsxRuntime.jsx(iconic.SocialIcon, { name: provider, variant: iconThemeVariant })) })), jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__label' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: (_b = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.publicIdentifier) !== null && _b !== void 0 ? _b : helpers.capitalize(provider) })) })), verifiedCredential ? (jsxRuntime.jsx(Button.Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonRounded: 'small', buttonPadding: 'none', onClick: disconnectAccount, loading: loading, dataTestId: 'social-account-disconnect-button', typographyProps: {
                     color: 'secondary',
                     variant: 'button_tertiary',
                 }, startSlot: 
@@ -98,7 +116,7 @@ const UserProfileSocialAccount = ({ provider, authorizationUrl, verifiedCredenti
                     weight: 'medium',
                 }, startSlot: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
-                jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'xsmall' }, { children: jsxRuntime.jsx(add.ReactComponent, {}) })) }, { children: "Connect" })))] })));
+                jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsxRuntime.jsx(add.ReactComponent, {}) })) }, { children: "Connect" })))] })));
 };
 
 exports.UserProfileSocialAccount = UserProfileSocialAccount;

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

@@ -4,7 +4,8 @@ import { useState } from 'react';
 import { SocialIcon } from '@dynamic-labs/iconic';
 import { Typography } from '../../../Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
-import '../../../../shared/logger.js';
+import { logger } from '../../../../shared/logger.js';
+import '../../../../config/LSSuffix.js';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgAdd } from '../../../../shared/assets/add.js';
@@ -26,12 +27,19 @@ import '../../../Transition/OpacityTransition/OpacityTransition.js';
 import { unlinkOAuth, verifyOAuth } from '../../../../data/api.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../IconButton/IconButton.js';
+import '@dynamic-labs/wallet-book';
+import { Button } from '../../../Button/Button.js';
+import '../../../Alert/Alert.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { Button } from '../../../Button/Button.js';
-import '../../../IconButton/IconButton.js';
-import '../../../Alert/Alert.js';
+import { useIconThemeVariant } from '../../../../utils/hooks/useIconThemeVariant/useIconThemeVariant.js';
+import '../../../Popper/Popper/Popper.js';
+import '../../../Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 import { capitalize } from '../../../../widgets/DynamicWidget/helpers/helpers.js';
 import { useUpdateUserProfileByJWTCallback } from '../../../../utils/hooks/useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.js';
 import { ConnectedAccountAvatar } from './components/ConnectedAccountAvatar/ConnectedAccountAvatar.js';
@@ -71,19 +79,29 @@ const UserProfileSocialAccount = ({ provider, authorizationUrl, verifiedCredenti
     };
     const disconnectAccount = () => __awaiter(void 0, void 0, void 0, function* () {
         var _c;
-        const jwt = yield unlinkOAuth({
-            environmentId,
-            verifiedCrentialId: (_c = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
-        }, String(authToken || onboardingOnlyJwt));
-        if (!jwt) {
-            return;
+        try {
+            setLoading(true);
+            const jwt = yield unlinkOAuth({
+                environmentId,
+                verifiedCrentialId: (_c = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
+            }, String(authToken || onboardingOnlyJwt));
+            if (!jwt) {
+                return;
+            }
+            updateUserProfileByJWT(jwt);
+        }
+        catch (err) {
+            logger.error(err);
+        }
+        finally {
+            setLoading(false);
         }
-        updateUserProfileByJWT(jwt);
     });
+    const iconThemeVariant = useIconThemeVariant();
     if (!verifiedCredential && !authorizationUrl) {
         return null;
     }
-    return (jsxs("div", Object.assign({ className: 'user-profile-social-account', "data-testid": `social-account-${provider}` }, { children: [jsx("div", Object.assign({ className: 'user-profile-social-account__icon' }, { children: verifiedCredential ? (jsx(ConnectedAccountAvatar, { provider: provider, avatarUrl: (_a = verifiedCredential.oauthAccountPhotos) === null || _a === void 0 ? void 0 : _a[0] })) : (jsx(SocialIcon, { name: provider })) })), jsx("div", Object.assign({ className: 'user-profile-social-account__label' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: (_b = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.publicIdentifier) !== null && _b !== void 0 ? _b : capitalize(provider) })) })), verifiedCredential ? (jsx(Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonRounded: 'small', buttonPadding: 'none', onClick: disconnectAccount, loading: loading, dataTestId: 'social-account-disconnect-button', typographyProps: {
+    return (jsxs("div", Object.assign({ className: 'user-profile-social-account', "data-testid": `social-account-${provider}` }, { children: [jsx("div", Object.assign({ className: 'user-profile-social-account__icon' }, { children: verifiedCredential ? (jsx(ConnectedAccountAvatar, { provider: provider, avatarUrl: (_a = verifiedCredential.oauthAccountPhotos) === null || _a === void 0 ? void 0 : _a[0], iconThemeVariant: iconThemeVariant })) : (jsx(SocialIcon, { name: provider, variant: iconThemeVariant })) })), jsx("div", Object.assign({ className: 'user-profile-social-account__label' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: (_b = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.publicIdentifier) !== null && _b !== void 0 ? _b : capitalize(provider) })) })), verifiedCredential ? (jsx(Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonRounded: 'small', buttonPadding: 'none', onClick: disconnectAccount, loading: loading, dataTestId: 'social-account-disconnect-button', typographyProps: {
                     color: 'secondary',
                     variant: 'button_tertiary',
                 }, startSlot: 
@@ -94,7 +112,7 @@ const UserProfileSocialAccount = ({ provider, authorizationUrl, verifiedCredenti
                     weight: 'medium',
                 }, startSlot: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
-                jsx(Icon, Object.assign({ color: 'text-tertiary', size: 'xsmall' }, { children: jsx(SvgAdd, {}) })) }, { children: "Connect" })))] })));
+                jsx(Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsx(SvgAdd, {}) })) }, { children: "Connect" })))] })));
 };
 
 export { UserProfileSocialAccount };

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

@@ -6,6 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var iconic = require('@dynamic-labs/iconic');
 var Image = require('../../../../../Image/Image.cjs');
 
-const ConnectedAccountAvatar = ({ provider, avatarUrl, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__connected-avatar' }, { children: jsxRuntime.jsx(Image.Image, { src: avatarUrl, alt: 'User avatar', dataTestId: 'user-avatar', fallback: jsxRuntime.jsx(iconic.UserProfileIcon, {}) }) })), jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__connected-provider-icon' }, { children: jsxRuntime.jsx(iconic.SocialIcon, { name: provider }) }))] }));
+const ConnectedAccountAvatar = ({ provider, avatarUrl, iconThemeVariant, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__connected-avatar' }, { children: jsxRuntime.jsx(Image.Image, { src: avatarUrl, alt: 'User avatar', dataTestId: 'user-avatar', fallback: jsxRuntime.jsx(iconic.UserProfileIcon, {}) }) })), jsxRuntime.jsx("div", Object.assign({ className: 'user-profile-social-account__connected-provider-icon' }, { children: jsxRuntime.jsx(iconic.SocialIcon, { name: provider, variant: iconThemeVariant }) }))] }));
 
 exports.ConnectedAccountAvatar = ConnectedAccountAvatar;

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/components/ConnectedAccountAvatar/ConnectedAccountAvatar.d.ts

@@ -1,7 +1,9 @@
 import { FC } from 'react';
 import { ProviderEnum } from '@dynamic-labs/sdk-api';
+import { IconThemeVariant } from '../../../../../../utils/hooks';
 export type ConnectedAccountAvatarProps = {
     avatarUrl?: string;
     provider: ProviderEnum;
+    iconThemeVariant?: IconThemeVariant;
 };
 export declare const ConnectedAccountAvatar: FC<ConnectedAccountAvatarProps>;

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

@@ -2,6 +2,6 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { UserProfileIcon, SocialIcon } from '@dynamic-labs/iconic';
 import { Image } from '../../../../../Image/Image.js';
 
-const ConnectedAccountAvatar = ({ provider, avatarUrl, }) => (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: 'user-profile-social-account__connected-avatar' }, { children: jsx(Image, { src: avatarUrl, alt: 'User avatar', dataTestId: 'user-avatar', fallback: jsx(UserProfileIcon, {}) }) })), jsx("div", Object.assign({ className: 'user-profile-social-account__connected-provider-icon' }, { children: jsx(SocialIcon, { name: provider }) }))] }));
+const ConnectedAccountAvatar = ({ provider, avatarUrl, iconThemeVariant, }) => (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: 'user-profile-social-account__connected-avatar' }, { children: jsx(Image, { src: avatarUrl, alt: 'User avatar', dataTestId: 'user-avatar', fallback: jsx(UserProfileIcon, {}) }) })), jsx("div", Object.assign({ className: 'user-profile-social-account__connected-provider-icon' }, { children: jsx(SocialIcon, { name: provider, variant: iconThemeVariant }) }))] }));
 
 export { ConnectedAccountAvatar };

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

@@ -34,3 +34,12 @@ export * from './ModalHeaderBanner';
 export * from './OTPVerificationView';
 export * from './IconListTile';
 export * from './Transition';
+export * from './Popper';
+export * from './TransactionConfirmationPageLayout';
+export * from './SendBalancePageLayout';
+export * from './Chip';
+export * from './FormFieldLabel';
+export * from './Step';
+export * from './Stepper';
+export * from './Modal';
+export * from './ModalCard';