@dynamic-labs/sdk-react-core 0.18.0-beta.30 → 0.18.0-beta.32

package/CHANGELOG.md

@@ -1,4 +1,28 @@
 
+## [0.18.0-beta.32](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.31...v0.18.0-beta.32) (2023-08-09)
+
+
+### Features
+
+* disable social buttons after provider is selected ([#2875](https://github.com/dynamic-labs/DynamicAuth/issues/2875)) ([#2881](https://github.com/dynamic-labs/DynamicAuth/issues/2881)) ([8a20409](https://github.com/dynamic-labs/DynamicAuth/commit/8a204095a322872caf6255db40bc10d29047e9a4))
+
+
+### Bug Fixes
+
+* css variables are being ignored for ConnectButton component ([#2884](https://github.com/dynamic-labs/DynamicAuth/issues/2884)) ([979557e](https://github.com/dynamic-labs/DynamicAuth/commit/979557edf2da81c2681c57e8431a5bf0ed235433))
+
+## [0.18.0-beta.31](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.30...v0.18.0-beta.31) (2023-08-08)
+
+
+### Features
+
+* **GVTY-65:** allow merging accounts when duplicated email in KYC step ([#2868](https://github.com/dynamic-labs/DynamicAuth/issues/2868)) ([041d0a8](https://github.com/dynamic-labs/DynamicAuth/commit/041d0a809e06a7b1407a46b04722c9ebc4802304))
+
+
+### Bug Fixes
+
+* **GVTY-150:** blocto pop up to sign after disconnect ([#2870](https://github.com/dynamic-labs/DynamicAuth/issues/2870)) ([14ccfa0](https://github.com/dynamic-labs/DynamicAuth/commit/14ccfa030dbe8989b9404e2e57ba3f5b50ca88ff))
+
 ## [0.18.0-beta.30](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.29...v0.18.0-beta.30) (2023-08-04)
 
 ### Bug Fixes

package/package.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.18.0-beta.30";
+var version = "0.18.0-beta.32";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.248",
+	"@dynamic-labs/sdk-api": "0.0.255",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	yup: "0.32.11",

package/package.js

@@ -1,8 +1,8 @@
-var version = "0.18.0-beta.30";
+var version = "0.18.0-beta.32";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.248",
+	"@dynamic-labs/sdk-api": "0.0.255",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	yup: "0.32.11",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.18.0-beta.30",
+  "version": "0.18.0-beta.32",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -9,20 +9,20 @@
   "dependencies": {
     "react-focus-lock": "2.9.2",
     "@dynamic-labs/iconic": "0.1.23",
-    "@dynamic-labs/sdk-api": "0.0.248",
+    "@dynamic-labs/sdk-api": "0.0.255",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "country-list": "2.3.0",
     "yup": "0.32.11",
     "formik": "2.2.9",
     "qrcode": "1.5.1",
     "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.18.0-beta.30",
-    "@dynamic-labs/multi-wallet": "0.18.0-beta.30",
-    "@dynamic-labs/rpc-providers": "0.18.0-beta.30",
-    "@dynamic-labs/types": "0.18.0-beta.30",
-    "@dynamic-labs/utils": "0.18.0-beta.30",
-    "@dynamic-labs/wallet-book": "0.18.0-beta.30",
-    "@dynamic-labs/wallet-connector-core": "0.18.0-beta.30",
+    "@dynamic-labs/logger": "0.18.0-beta.32",
+    "@dynamic-labs/multi-wallet": "0.18.0-beta.32",
+    "@dynamic-labs/rpc-providers": "0.18.0-beta.32",
+    "@dynamic-labs/types": "0.18.0-beta.32",
+    "@dynamic-labs/utils": "0.18.0-beta.32",
+    "@dynamic-labs/wallet-book": "0.18.0-beta.32",
+    "@dynamic-labs/wallet-connector-core": "0.18.0-beta.32",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -77,6 +77,7 @@ var switchHorizontal = require('./lib/shared/assets/switch-horizontal.cjs');
 var dotsHorizontal = require('./lib/shared/assets/dots-horizontal.cjs');
 var send = require('./lib/shared/assets/send.cjs');
 var questionMark = require('./lib/shared/assets/question-mark.cjs');
+var doubleArrowRight = require('./lib/shared/assets/double-arrow-right.cjs');
 var index$2 = require('./lib/shared/consts/index.cjs');
 var logger = require('./lib/shared/logger.cjs');
 require('./lib/utils/constants/colors.cjs');
@@ -207,6 +208,7 @@ exports.SwitchHorizontalIcon = switchHorizontal.ReactComponent;
 exports.DotsHorizontalIcon = dotsHorizontal.ReactComponent;
 exports.SendIcon = send.ReactComponent;
 exports.QuestionMarkIcon = questionMark.ReactComponent;
+exports.DoubleArrowRightIcon = doubleArrowRight.ReactComponent;
 exports.authModalZIndex = index$2.authModalZIndex;
 exports.countryCodes = index$2.countryCodes;
 exports.defaultWalletsForChains = index$2.defaultWalletsForChains;

package/src/index.js

@@ -73,6 +73,7 @@ export { ReactComponent as SwitchHorizontalIcon } from './lib/shared/assets/swit
 export { ReactComponent as DotsHorizontalIcon } from './lib/shared/assets/dots-horizontal.js';
 export { ReactComponent as SendIcon } from './lib/shared/assets/send.js';
 export { ReactComponent as QuestionMarkIcon } from './lib/shared/assets/question-mark.js';
+export { ReactComponent as DoubleArrowRightIcon } from './lib/shared/assets/double-arrow-right.js';
 export { authModalZIndex, countryCodes, defaultWalletsForChains, tShirtSizes, teamNames, toolkitZIndex, tooltipZIndex, widgetModalZIndex } from './lib/shared/consts/index.js';
 export { logger } from './lib/shared/logger.js';
 import './lib/utils/constants/colors.js';

package/src/lib/Main.cjs

@@ -54,6 +54,9 @@ var isSelectedWalletAlreadyConnected = require('./utils/functions/isSelectedWall
 var viewToComponentMap = require('./views/viewToComponentMap.cjs');
 require('./main.global.cjs');
 
+const viewsToDisableCloseOnOverlayClick = [
+    'email-wallet-otp-verification-view',
+];
 const Main = () => {
     const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
     const { view, goToInitialView } = ViewContext.useViewContext();
@@ -61,6 +64,8 @@ const Main = () => {
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
     usePreventPageScroll.usePreventPageScroll(showAuthFlow);
     const handleClose = () => {
+        if (viewsToDisableCloseOnOverlayClick.includes(view))
+            return;
         setShowAuthFlow(false);
         setDeniedAddress('');
         setDeniedOauthProvider(undefined);

package/src/lib/Main.js

@@ -50,6 +50,9 @@ import { isSelectedWalletAlreadyConnected } from './utils/functions/isSelectedWa
 import { viewToComponentMap } from './views/viewToComponentMap.js';
 import './main.global.js';
 
+const viewsToDisableCloseOnOverlayClick = [
+    'email-wallet-otp-verification-view',
+];
 const Main = () => {
     const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext();
     const { view, goToInitialView } = useViewContext();
@@ -57,6 +60,8 @@ const Main = () => {
     const { setExistentAccountData } = useAccountExistsContext();
     usePreventPageScroll(showAuthFlow);
     const handleClose = () => {
+        if (viewsToDisableCloseOnOverlayClick.includes(view))
+            return;
         setShowAuthFlow(false);
         setDeniedAddress('');
         setDeniedOauthProvider(undefined);

package/src/lib/components/DynamicConnectButton/components/ConnectButton.cjs

@@ -6,6 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var Button = require('../../Button/Button.cjs');
 var classNames = require('../../../utils/functions/classNames/classNames.cjs');
 
-const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsxRuntime.jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames.classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: children })) })));
+const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsxRuntime.jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames.classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large' }, { children: children })) })));
 
 exports.ConnectButton = ConnectButton;

package/src/lib/components/DynamicConnectButton/components/ConnectButton.js

@@ -2,6 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import { Button } from '../../Button/Button.js';
 import { classNames } from '../../../utils/functions/classNames/classNames.js';
 
-const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsx(Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default' }, { children: children })) })));
+const ConnectButton = ({ buttonClassName, buttonContainerClassName, onClick, isActive, isLoading, children, }) => (jsx("div", Object.assign({ className: buttonContainerClassName }, { children: jsx(Button, Object.assign({ dataTestId: 'ConnectButton', onClick: onClick, buttonClassName: classNames('connect-button', buttonClassName), loading: isLoading && isActive, disabled: isLoading && isActive, buttonVariant: 'primary', buttonPadding: 'large' }, { children: children })) })));
 
 export { ConnectButton };

package/src/lib/components/ListTile/ListTile.cjs

@@ -6,6 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
-const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxRuntime.jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsxRuntime.jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
+const ListTile = ({ children, onClick, leading, disabled = false, trailing, style, className = '', dataTestId, }) => (jsxRuntime.jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style, disabled: disabled }, { children: [leading, jsxRuntime.jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
 
 exports.ListTile = ListTile;

package/src/lib/components/ListTile/ListTile.js

@@ -2,6 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Typography } from '../Typography/Typography.js';
 
-const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
+const ListTile = ({ children, onClick, leading, disabled = false, trailing, style, className = '', dataTestId, }) => (jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style, disabled: disabled }, { children: [leading, jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: children })) })), trailing] })));
 
 export { ListTile };

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

@@ -4,6 +4,7 @@ export type ListTileProps = {
     dataTestId?: string;
     leading?: ReactNode;
     onClick?: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
     style?: CSSProperties;
     trailing?: ReactNode;
 };

package/src/lib/components/OTPVerificationView/OTPVerificationView.cjs

@@ -10,6 +10,7 @@ require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
+var close = require('../../shared/assets/close.cjs');
 var chevronLeft = require('../../shared/assets/chevron-left.cjs');
 var check = require('../../shared/assets/check.cjs');
 var pencilAltIcon = require('../../shared/assets/pencil-alt-icon.cjs');
@@ -54,9 +55,10 @@ require('yup');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, displayPoweredByDynamic = false, }) => {
-    const backButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) }))] })));
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, }) => {
+    const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
+    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickClose, type: 'button', "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton, trailing: onClickClose && closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) }))] })));
 };
 
 exports.OTPVerificationView = OTPVerificationView;

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

@@ -6,6 +6,7 @@ type OtpVerificationLayoutProps = {
     isLoading: boolean;
     isValid: boolean;
     onClickBack?: MouseEventHandler<HTMLButtonElement>;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onClickEditEmail?: MouseEventHandler<HTMLButtonElement>;
     onPinChange?: (value: string) => void;
     onPinComplete: (value: string) => void;

package/src/lib/components/OTPVerificationView/OTPVerificationView.js

@@ -6,6 +6,7 @@ import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
 import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import { ReactComponent as SvgPencilAltIcon } from '../../shared/assets/pencil-alt-icon.js';
@@ -50,9 +51,10 @@ import 'yup';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, displayPoweredByDynamic = false, }) => {
-    const backButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
-    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsx(PoweredByDynamic, {}) }))] })));
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, }) => {
+    const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
+    const closeButton = (jsx(IconButton, Object.assign({ onClick: onClickClose, type: 'button', "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
+    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton, trailing: onClickClose && closeButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsx(PoweredByDynamic, {}) }))] })));
 };
 
 export { OTPVerificationView };

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

@@ -1,5 +1,5 @@
 import { SetStateAction, Dispatch, PropsWithChildren, FC } from 'react';
-export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'wallet-sign' | 'wallet-used' | 'wallet-group' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view' | 'wallet-locked-view' | 'social-wrong-account' | 'gate-blocked-wallet' | 'bridge-welcome' | 'bridge-summary' | 'bridge-next-wallet-connection' | 'account-exists';
+export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'wallet-sign' | 'wallet-used' | 'wallet-group' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view' | 'wallet-locked-view' | 'social-wrong-account' | 'gate-blocked-wallet' | 'bridge-welcome' | 'bridge-summary' | 'bridge-next-wallet-connection' | 'account-exists' | 'merge-user-accounts';
 export type ViewContextProps = {
     setView: Dispatch<SetStateAction<ViewType>>;
     view: ViewType;

package/src/lib/data/api.cjs

@@ -128,6 +128,9 @@ const verifyEmail = ({ verificationToken, verificationUUID, environmentId, }, us
     catch (e) {
         const data = yield e.json();
         logger.logger.error(data.error);
+        if (data.code === sdkApi$1.UnprocessableEntityErrorCode.UserHasAlreadyAccountWithEmail) {
+            throw new utils.UserHasAccountWithEmailError(data.error);
+        }
         throw new utils.EmailVerificationError(data.code);
     }
 });
@@ -396,6 +399,18 @@ const sendDynamicProps = (environmentId, settingsToSend) => _tslib.__awaiter(voi
     catch (e) {
         logger.logger.error(e);
     }
+});
+const mergeUserAccounts = (userJwt, environmentId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const { jwt } = yield sdkApi(userJwt).mergeUsers({
+            environmentId,
+        });
+        return jwt;
+    }
+    catch (e) {
+        logger.logger.error(e);
+        throw e;
+    }
 });
 
 exports.createEmailVerification = createEmailVerification;
@@ -409,6 +424,7 @@ exports.linkWallet = linkWallet;
 exports.mapAuthModeTypeToEnum = mapAuthModeTypeToEnum;
 exports.mapChainToChainEnum = mapChainToChainEnum;
 exports.mapProviderToProviderEnum = mapProviderToProviderEnum;
+exports.mergeUserAccounts = mergeUserAccounts;
 exports.retryEmailVerification = retryEmailVerification;
 exports.revokeSession = revokeSession;
 exports.sendDynamicProps = sendDynamicProps;

package/src/lib/data/api.d.ts

@@ -66,3 +66,4 @@ export declare const sendDynamicProps: (environmentId: string, settingsToSend: {
     dynamicContextProps?: object;
     dynamicWagmiSettings?: object;
 }) => Promise<void>;
+export declare const mergeUserAccounts: (userJwt: string, environmentId: string) => Promise<string | undefined>;

package/src/lib/data/api.js

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../_virtual/_tslib.js';
-import { NoAccessError, AccountExistsError, EmailVerificationError, DynamicError, EmailAlreadyExistsError, UsernameAlreadyExistsError, EmailProviderError, WalletUsedError, WalletNotDeployedError, ChainalysisError, GateBlockedError } from '@dynamic-labs/utils';
-import { SDKApi, Configuration, VerifyRequestFromJSON, ChainEnum, WalletProviderEnum, AuthModeEnum } from '@dynamic-labs/sdk-api';
+import { NoAccessError, AccountExistsError, EmailVerificationError, UserHasAccountWithEmailError, DynamicError, EmailAlreadyExistsError, UsernameAlreadyExistsError, EmailProviderError, WalletUsedError, WalletNotDeployedError, ChainalysisError, GateBlockedError } from '@dynamic-labs/utils';
+import { UnprocessableEntityErrorCode, SDKApi, Configuration, VerifyRequestFromJSON, ChainEnum, WalletProviderEnum, AuthModeEnum } from '@dynamic-labs/sdk-api';
 import { VERSION, API_VERSION } from '../../version.js';
 import ApiEndpoint from '../config/ApiEndpoint.js';
 import { logger } from '../shared/logger.js';
@@ -124,6 +124,9 @@ const verifyEmail = ({ verificationToken, verificationUUID, environmentId, }, us
     catch (e) {
         const data = yield e.json();
         logger.error(data.error);
+        if (data.code === UnprocessableEntityErrorCode.UserHasAlreadyAccountWithEmail) {
+            throw new UserHasAccountWithEmailError(data.error);
+        }
         throw new EmailVerificationError(data.code);
     }
 });
@@ -392,6 +395,18 @@ const sendDynamicProps = (environmentId, settingsToSend) => __awaiter(void 0, vo
     catch (e) {
         logger.error(e);
     }
+});
+const mergeUserAccounts = (userJwt, environmentId) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const { jwt } = yield sdkApi(userJwt).mergeUsers({
+            environmentId,
+        });
+        return jwt;
+    }
+    catch (e) {
+        logger.error(e);
+        throw e;
+    }
 });
 
-export { createEmailVerification, createVisit, fetchNetworkSettings, fetchNonce, fetchProjectSettings, getEmailProvider, getOnrampProviders, linkWallet, mapAuthModeTypeToEnum, mapChainToChainEnum, mapProviderToProviderEnum, retryEmailVerification, revokeSession, sendDynamicProps, signInWithEmailVerification, transferWallet, unlinkOAuth, unlinkWallet, updateUserProfileFields, verifyEmail, verifyOAuth, verifyWallet };
+export { createEmailVerification, createVisit, fetchNetworkSettings, fetchNonce, fetchProjectSettings, getEmailProvider, getOnrampProviders, linkWallet, mapAuthModeTypeToEnum, mapChainToChainEnum, mapProviderToProviderEnum, mergeUserAccounts, retryEmailVerification, revokeSession, sendDynamicProps, signInWithEmailVerification, transferWallet, unlinkOAuth, unlinkWallet, updateUserProfileFields, verifyEmail, verifyOAuth, verifyWallet };

package/src/lib/layout/DynamicAuthLayout/Header/header.cjs

@@ -32,7 +32,7 @@ require('../../../components/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');
+var ErrorContext = require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var AccountExistsContext = require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 var ModalHeader = require('../../../components/ModalHeader/ModalHeader.cjs');
@@ -55,6 +55,7 @@ var index = require('../../../context/FooterAnimationContext/index.cjs');
 
 const Header = ({ onClose: handleClose, heading, projectSettings, walletConnector, }) => {
     const { clearStatesOnBackClick, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setError } = ErrorContext.useErrorContext();
     const { setShowQrCodeImage } = QrCodeContext.useQrCodeContext();
     const { isFooterExpanded, setIsFooterExpanded } = index.useFooterAnimationContext();
     const { view, goToInitialView } = ViewContext.useViewContext();
@@ -63,11 +64,18 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
     const handleBackClick = React.useCallback(() => {
         goToInitialView();
         setExistentAccountData(undefined);
+        setError(undefined);
         // on back button click in Coinbase wallet clearing state would kill connection and refresh the page
         if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name) !== 'Coinbase') {
             clearStatesOnBackClick();
         }
-    }, [clearStatesOnBackClick, selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, goToInitialView]);
+    }, [
+        goToInitialView,
+        setExistentAccountData,
+        setError,
+        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        clearStatesOnBackClick,
+    ]);
     const leadingButtons = React.useMemo(() => {
         let buttons = [];
         if (showBackButton) {

package/src/lib/layout/DynamicAuthLayout/Header/header.js

@@ -28,7 +28,7 @@ import '../../../components/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';
+import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useAccountExistsContext } from '../../../context/AccountExistsContext/AccountExistsContext.js';
 import { ModalHeader } from '../../../components/ModalHeader/ModalHeader.js';
@@ -51,6 +51,7 @@ import { useFooterAnimationContext } from '../../../context/FooterAnimationConte
 
 const Header = ({ onClose: handleClose, heading, projectSettings, walletConnector, }) => {
     const { clearStatesOnBackClick, selectedWalletConnector } = useInternalDynamicContext();
+    const { setError } = useErrorContext();
     const { setShowQrCodeImage } = useQrCodeContext();
     const { isFooterExpanded, setIsFooterExpanded } = useFooterAnimationContext();
     const { view, goToInitialView } = useViewContext();
@@ -59,11 +60,18 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
     const handleBackClick = useCallback(() => {
         goToInitialView();
         setExistentAccountData(undefined);
+        setError(undefined);
         // on back button click in Coinbase wallet clearing state would kill connection and refresh the page
         if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name) !== 'Coinbase') {
             clearStatesOnBackClick();
         }
-    }, [clearStatesOnBackClick, selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, goToInitialView]);
+    }, [
+        goToInitialView,
+        setExistentAccountData,
+        setError,
+        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        clearStatesOnBackClick,
+    ]);
     const leadingButtons = useMemo(() => {
         let buttons = [];
         if (showBackButton) {

package/src/lib/shared/assets/double-arrow-right.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _path;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgDoubleArrowRight = function SvgDoubleArrowRight(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.862 2.862c.26-.26.682-.26.943 0L8.47 7.529a.667.667 0 0 1 0 .942l-4.666 4.667a.667.667 0 0 1-.943-.943L7.057 8 2.862 3.805a.667.667 0 0 1 0-.943Zm5.333 0c.26-.26.683-.26.943 0l4.667 4.667c.26.26.26.682 0 .942l-4.667 4.667a.667.667 0 0 1-.943-.943L12.39 8 8.195 3.805a.667.667 0 0 1 0-.943Z",
+    fill: "currentColor"
+  })));
+};
+
+exports.ReactComponent = SvgDoubleArrowRight;

package/src/lib/shared/assets/double-arrow-right.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+var _path;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgDoubleArrowRight = function SvgDoubleArrowRight(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.862 2.862c.26-.26.682-.26.943 0L8.47 7.529a.667.667 0 0 1 0 .942l-4.666 4.667a.667.667 0 0 1-.943-.943L7.057 8 2.862 3.805a.667.667 0 0 1 0-.943Zm5.333 0c.26-.26.683-.26.943 0l4.667 4.667c.26.26.26.682 0 .942l-4.667 4.667a.667.667 0 0 1-.943-.943L12.39 8 8.195 3.805a.667.667 0 0 1 0-.943Z",
+    fill: "currentColor"
+  })));
+};
+
+export { SvgDoubleArrowRight as ReactComponent };

package/src/lib/shared/assets/index.d.ts

@@ -34,3 +34,4 @@ export { ReactComponent as SwitchHorizontalIcon } from './switch-horizontal.svg'
 export { ReactComponent as DotsHorizontalIcon } from './dots-horizontal.svg';
 export { ReactComponent as SendIcon } from './send.svg';
 export { ReactComponent as QuestionMarkIcon } from './question-mark.svg';
+export { ReactComponent as DoubleArrowRightIcon } from './double-arrow-right.svg';