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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,4 +1,16 @@
1
1
 
2
+ ## [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)
3
+
4
+
5
+ ### Features
6
+
7
+ * 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))
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * 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))
13
+
2
14
  ## [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)
3
15
 
4
16
 
package/package.cjs CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var version = "0.18.0-beta.31";
5
+ var version = "0.18.0-beta.32";
6
6
  var dependencies = {
7
7
  "react-focus-lock": "2.9.2",
8
8
  "@dynamic-labs/iconic": "0.1.23",
package/package.js CHANGED
@@ -1,4 +1,4 @@
1
- var version = "0.18.0-beta.31";
1
+ var version = "0.18.0-beta.32";
2
2
  var dependencies = {
3
3
  "react-focus-lock": "2.9.2",
4
4
  "@dynamic-labs/iconic": "0.1.23",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dynamic-labs/sdk-react-core",
3
- "version": "0.18.0-beta.31",
3
+ "version": "0.18.0-beta.32",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -16,13 +16,13 @@
16
16
  "formik": "2.2.9",
17
17
  "qrcode": "1.5.1",
18
18
  "ethers": "5.7.2",
19
- "@dynamic-labs/logger": "0.18.0-beta.31",
20
- "@dynamic-labs/multi-wallet": "0.18.0-beta.31",
21
- "@dynamic-labs/rpc-providers": "0.18.0-beta.31",
22
- "@dynamic-labs/types": "0.18.0-beta.31",
23
- "@dynamic-labs/utils": "0.18.0-beta.31",
24
- "@dynamic-labs/wallet-book": "0.18.0-beta.31",
25
- "@dynamic-labs/wallet-connector-core": "0.18.0-beta.31",
19
+ "@dynamic-labs/logger": "0.18.0-beta.32",
20
+ "@dynamic-labs/multi-wallet": "0.18.0-beta.32",
21
+ "@dynamic-labs/rpc-providers": "0.18.0-beta.32",
22
+ "@dynamic-labs/types": "0.18.0-beta.32",
23
+ "@dynamic-labs/utils": "0.18.0-beta.32",
24
+ "@dynamic-labs/wallet-book": "0.18.0-beta.32",
25
+ "@dynamic-labs/wallet-connector-core": "0.18.0-beta.32",
26
26
  "eventemitter3": "5.0.1"
27
27
  },
28
28
  "devDependencies": {
package/src/lib/Main.cjs CHANGED
@@ -54,6 +54,9 @@ var isSelectedWalletAlreadyConnected = require('./utils/functions/isSelectedWall
54
54
  var viewToComponentMap = require('./views/viewToComponentMap.cjs');
55
55
  require('./main.global.cjs');
56
56
 
57
+ const viewsToDisableCloseOnOverlayClick = [
58
+ 'email-wallet-otp-verification-view',
59
+ ];
57
60
  const Main = () => {
58
61
  const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
59
62
  const { view, goToInitialView } = ViewContext.useViewContext();
@@ -61,6 +64,8 @@ const Main = () => {
61
64
  const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
62
65
  usePreventPageScroll.usePreventPageScroll(showAuthFlow);
63
66
  const handleClose = () => {
67
+ if (viewsToDisableCloseOnOverlayClick.includes(view))
68
+ return;
64
69
  setShowAuthFlow(false);
65
70
  setDeniedAddress('');
66
71
  setDeniedOauthProvider(undefined);
package/src/lib/Main.js CHANGED
@@ -50,6 +50,9 @@ import { isSelectedWalletAlreadyConnected } from './utils/functions/isSelectedWa
50
50
  import { viewToComponentMap } from './views/viewToComponentMap.js';
51
51
  import './main.global.js';
52
52
 
53
+ const viewsToDisableCloseOnOverlayClick = [
54
+ 'email-wallet-otp-verification-view',
55
+ ];
53
56
  const Main = () => {
54
57
  const { selectedWalletConnector, linkedWallets, isProjectSettingsLoading, projectSettings, setShowAuthFlow, showAuthFlow, wallets, clearStatesOnBackClick, user, unlinkConnectedWallet, authMode, connectedWallets, } = useInternalDynamicContext();
55
58
  const { view, goToInitialView } = useViewContext();
@@ -57,6 +60,8 @@ const Main = () => {
57
60
  const { setExistentAccountData } = useAccountExistsContext();
58
61
  usePreventPageScroll(showAuthFlow);
59
62
  const handleClose = () => {
63
+ if (viewsToDisableCloseOnOverlayClick.includes(view))
64
+ return;
60
65
  setShowAuthFlow(false);
61
66
  setDeniedAddress('');
62
67
  setDeniedOauthProvider(undefined);
@@ -6,6 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var Button = require('../../Button/Button.cjs');
7
7
  var classNames = require('../../../utils/functions/classNames/classNames.cjs');
8
8
 
9
- 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 })) })));
9
+ 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 })) })));
10
10
 
11
11
  exports.ConnectButton = ConnectButton;
@@ -2,6 +2,6 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { Button } from '../../Button/Button.js';
3
3
  import { classNames } from '../../../utils/functions/classNames/classNames.js';
4
4
 
5
- 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 })) })));
5
+ 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 })) })));
6
6
 
7
7
  export { ConnectButton };
@@ -6,6 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var classNames = require('../../utils/functions/classNames/classNames.cjs');
7
7
  var Typography = require('../Typography/Typography.cjs');
8
8
 
9
- 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] })));
9
+ 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] })));
10
10
 
11
11
  exports.ListTile = ListTile;
@@ -2,6 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { classNames } from '../../utils/functions/classNames/classNames.js';
3
3
  import { Typography } from '../Typography/Typography.js';
4
4
 
5
- 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] })));
5
+ 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] })));
6
6
 
7
7
  export { ListTile };
@@ -4,6 +4,7 @@ export type ListTileProps = {
4
4
  dataTestId?: string;
5
5
  leading?: ReactNode;
6
6
  onClick?: MouseEventHandler<HTMLButtonElement>;
7
+ disabled?: boolean;
7
8
  style?: CSSProperties;
8
9
  trailing?: ReactNode;
9
10
  };
@@ -10,6 +10,7 @@ require('@dynamic-labs/sdk-api');
10
10
  require('../../shared/logger.cjs');
11
11
  require('@dynamic-labs/wallet-connector-core');
12
12
  require('../../context/ViewContext/ViewContext.cjs');
13
+ var close = require('../../shared/assets/close.cjs');
13
14
  var chevronLeft = require('../../shared/assets/chevron-left.cjs');
14
15
  var check = require('../../shared/assets/check.cjs');
15
16
  var pencilAltIcon = require('../../shared/assets/pencil-alt-icon.cjs');
@@ -54,9 +55,10 @@ require('yup');
54
55
  require('../InlineWidget/InlineWidget.cjs');
55
56
  require('../MenuList/Dropdown/Dropdown.cjs');
56
57
 
57
- const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, displayPoweredByDynamic = false, }) => {
58
- const backButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
59
- 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, {}) }))] })));
58
+ const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, }) => {
59
+ const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
60
+ const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickClose, type: 'button', "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
61
+ 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, {}) }))] })));
60
62
  };
61
63
 
62
64
  exports.OTPVerificationView = OTPVerificationView;
@@ -6,6 +6,7 @@ type OtpVerificationLayoutProps = {
6
6
  isLoading: boolean;
7
7
  isValid: boolean;
8
8
  onClickBack?: MouseEventHandler<HTMLButtonElement>;
9
+ onClickClose?: MouseEventHandler<HTMLButtonElement>;
9
10
  onClickEditEmail?: MouseEventHandler<HTMLButtonElement>;
10
11
  onPinChange?: (value: string) => void;
11
12
  onPinComplete: (value: string) => void;
@@ -6,6 +6,7 @@ import '@dynamic-labs/sdk-api';
6
6
  import '../../shared/logger.js';
7
7
  import '@dynamic-labs/wallet-connector-core';
8
8
  import '../../context/ViewContext/ViewContext.js';
9
+ import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
9
10
  import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
10
11
  import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
11
12
  import { ReactComponent as SvgPencilAltIcon } from '../../shared/assets/pencil-alt-icon.js';
@@ -50,9 +51,10 @@ import 'yup';
50
51
  import '../InlineWidget/InlineWidget.js';
51
52
  import '../MenuList/Dropdown/Dropdown.js';
52
53
 
53
- const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, displayPoweredByDynamic = false, }) => {
54
- const backButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
55
- 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, {}) }))] })));
54
+ const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, }) => {
55
+ const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
56
+ const closeButton = (jsx(IconButton, Object.assign({ onClick: onClickClose, type: 'button', "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
57
+ 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, {}) }))] })));
56
58
  };
57
59
 
58
60
  export { OTPVerificationView };