@dynamic-labs/sdk-react-core 0.18.100-viem.0 → 0.18.100-viem.10

package/CHANGELOG.md

@@ -1,5 +1,115 @@
 
-## [0.18.100-viem.0](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.29...v0.18.100-viem.0) (2023-08-04)
+### [0.18.100-viem.10](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.9...v0.18.100-viem.10) (2023-08-25)
+
+
+### Bug Fixes
+
+* stop calling handleLogOut prematurely ([#3137](https://github.com/dynamic-labs/DynamicAuth/issues/3137)) ([3d029ba](https://github.com/dynamic-labs/DynamicAuth/commit/3d029ba3e34e3cb8a2b976dc5d3fb9ee1356d76c)), closes [#3135](https://github.com/dynamic-labs/DynamicAuth/issues/3135)
+
+### [0.18.100-viem.9](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.8...v0.18.100-viem.9) (2023-08-25)
+
+
+### Features
+
+* register connection of second wallet in bridge ([3e12cde](https://github.com/dynamic-labs/DynamicAuth/commit/3e12cdece4abd717280aeed442999aef4653e059)), closes [#3113](https://github.com/dynamic-labs/DynamicAuth/issues/3113)
+
+
+### Bug Fixes
+
+* fix github social linking icon on dark mode ([#3130](https://github.com/dynamic-labs/DynamicAuth/issues/3130)) ([8db8aa7](https://github.com/dynamic-labs/DynamicAuth/commit/8db8aa7b9892f93f6fb6aa7772f99b747fe8f86b)), closes [#3126](https://github.com/dynamic-labs/DynamicAuth/issues/3126)
+* fix issue with detecting oauth window closed before finishing linking ([#3128](https://github.com/dynamic-labs/DynamicAuth/issues/3128)) ([b108bf9](https://github.com/dynamic-labs/DynamicAuth/commit/b108bf9d9b3ca47202ca4a1993f155639fd032a8)), closes [#3124](https://github.com/dynamic-labs/DynamicAuth/issues/3124)
+
+### [0.18.100-viem.8](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.7...v0.18.100-viem.8) (2023-08-24)
+
+
+### Bug Fixes
+
+* allow overriding contracts on wagmi chains ([#3105](https://github.com/dynamic-labs/DynamicAuth/issues/3105)) ([acee314](https://github.com/dynamic-labs/DynamicAuth/commit/acee3147156c30957bdb690c56cfd10af13dc57f))
+* send wagmi settings only once when DynamicWagmiConnector loads (v18-viem) ([#3109](https://github.com/dynamic-labs/DynamicAuth/issues/3109)) ([a6e2675](https://github.com/dynamic-labs/DynamicAuth/commit/a6e2675c49eab3c40dc9365b20ac2dd9eaf8e4ae)), closes [#3103](https://github.com/dynamic-labs/DynamicAuth/issues/3103)
+
+### [0.18.100-viem.7](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.6...v0.18.100-viem.7) (2023-08-23)
+
+
+### Bug Fixes
+
+* fix jumping when entering OTP code on IOS ([#3036](https://github.com/dynamic-labs/DynamicAuth/issues/3036)) ([#3094](https://github.com/dynamic-labs/DynamicAuth/issues/3094)) ([093ab9a](https://github.com/dynamic-labs/DynamicAuth/commit/093ab9aae2f8bba99622e1146d1dc54c077ae3cb))
+* log user out when magic session expires ([#3085](https://github.com/dynamic-labs/DynamicAuth/issues/3085)) ([#3088](https://github.com/dynamic-labs/DynamicAuth/issues/3088)) ([d7d125c](https://github.com/dynamic-labs/DynamicAuth/commit/d7d125c93a652f26deeedce534f1e0472ad3377c))
+* improvements to network switching in bridge flow ([#3080](https://github.com/dynamic-labs/DynamicAuth/issues/3080)) ([4137c05](https://github.com/dynamic-labs/DynamicAuth/commit/4137c0599a760d2ec8a6b9a6a5de7cce9987033b))
+* fix could not replace transaction error ([#3058](https://github.com/dynamic-labs/DynamicAuth/issues/3058)) ([b36184e](https://github.com/dynamic-labs/DynamicAuth/commit/b36184e17a268d49bed100e81477df9f5e4b3731)), closes [#3049](https://github.com/dynamic-labs/DynamicAuth/issues/3049)
+* update embedded wallet notice design ([529f90f](https://github.com/dynamic-labs/DynamicAuth/commit/529f90f323f712240dfd964d908b6ea59cacbd19)), closes [#2987](https://github.com/dynamic-labs/DynamicAuth/issues/2987) [#3082](https://github.com/dynamic-labs/DynamicAuth/issues/3082)
+
+### [0.18.100-viem.6](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.5...v0.18.100-viem.6) (2023-08-21)
+
+
+### Bug Fixes
+
+* detect when user closes oauth window when linking social account ([#3066](https://github.com/dynamic-labs/DynamicAuth/issues/3066)) ([428e9e8](https://github.com/dynamic-labs/DynamicAuth/commit/428e9e81d5473b2de03560f118c61baf3ee9e692))
+* sync connected wallets with wagmi client ([#3073](https://github.com/dynamic-labs/DynamicAuth/issues/3073)) ([bce960d](https://github.com/dynamic-labs/DynamicAuth/commit/bce960d341ff55d3d660a8c34121c4348ca2908b))
+
+### [0.18.100-viem.5](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.4...v0.18.100-viem.5) (2023-08-19)
+
+
+### Bug Fixes
+
+* ensure social sign in embedded wallets sync correctly with wagmi ([5fdf11d](https://github.com/dynamic-labs/DynamicAuth/commit/5fdf11df19759b6e32b461802c0a32686365d890))
+
+### [0.18.100-viem.4](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.3...v0.18.100-viem.4) (2023-08-17)
+
+
+### Bug Fixes
+
+* always enable magic connectors when enabled ([#3014](https://github.com/dynamic-labs/DynamicAuth/issues/3014)) ([#3039](https://github.com/dynamic-labs/DynamicAuth/issues/3039)) ([6d4c473](https://github.com/dynamic-labs/DynamicAuth/commit/6d4c4738b92b40c903488c435fdd1bf69dc6c96e))
+* guard against null or undefined provider value when logging in w… ([#3028](https://github.com/dynamic-labs/DynamicAuth/issues/3028)) ([050b62c](https://github.com/dynamic-labs/DynamicAuth/commit/050b62c7c91b6430eb350f7b49fa57260a08a756)), closes [#3021](https://github.com/dynamic-labs/DynamicAuth/issues/3021)
+* issue where walletconnectors are instantiated without walletbook ([#3020](https://github.com/dynamic-labs/DynamicAuth/issues/3020)) ([#3033](https://github.com/dynamic-labs/DynamicAuth/issues/3033)) ([92394aa](https://github.com/dynamic-labs/DynamicAuth/commit/92394aa83cad497d805ac4d4ce8eb35d2b10690c))
+* only use the production api environment of magicLink ([#3024](https://github.com/dynamic-labs/DynamicAuth/issues/3024)) ([25eea74](https://github.com/dynamic-labs/DynamicAuth/commit/25eea7438b0c2cb0279fb70d0be3c16f73b24573))
+* switching network in connected state should update wallets to connect list ([#3038](https://github.com/dynamic-labs/DynamicAuth/issues/3038)) ([22837cb](https://github.com/dynamic-labs/DynamicAuth/commit/22837cb0af3a2dbdd7345b5cf92c23455bdd3cc4))
+
+### [0.18.100-viem.3](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.2...v0.18.100-viem.3) (2023-08-16)
+
+
+### Bug Fixes
+
+* fix twitter linking ([#2918](https://github.com/dynamic-labs/DynamicAuth/issues/2918)) ([#3003](https://github.com/dynamic-labs/DynamicAuth/issues/3003)) ([8f028dc](https://github.com/dynamic-labs/DynamicAuth/commit/8f028dc91434a44b4f2bcae82ad5f16a27c9e5b1))
+* use ETH currency symbol for STARK chains ([#3005](https://github.com/dynamic-labs/DynamicAuth/issues/3005)) ([#3008](https://github.com/dynamic-labs/DynamicAuth/issues/3008)) ([6f0c66f](https://github.com/dynamic-labs/DynamicAuth/commit/6f0c66f63bbfdbb08d0c504d52565acd90070528))
+
+### [0.18.100-viem.2](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.100-viem.1...v0.18.100-viem.2) (2023-08-15)
+
+
+### Features
+
+* re-enable bloctoevm ([#2992](https://github.com/dynamic-labs/DynamicAuth/issues/2992)) ([d027f39](https://github.com/dynamic-labs/DynamicAuth/commit/d027f39c8fb5bf477ce0da0c62d86cd812f0fda5))
+
+
+### Bug Fixes
+
+* **captcha:** complete sign in with magic and blocto ([#2967](https://github.com/dynamic-labs/DynamicAuth/issues/2967)) ([#2985](https://github.com/dynamic-labs/DynamicAuth/issues/2985)) ([e7585f5](https://github.com/dynamic-labs/DynamicAuth/commit/e7585f525da29e7933871831fa6fd374f09618b7))
+* sync wagmi correctly in connect-only mode ([#2990](https://github.com/dynamic-labs/DynamicAuth/issues/2990)) ([#2993](https://github.com/dynamic-labs/DynamicAuth/issues/2993)) ([74a4e62](https://github.com/dynamic-labs/DynamicAuth/commit/74a4e6216f3f9fb30e5312789fb18f77277e15ba))
+
+## [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.100-viem.0";
+var version = "0.18.100-viem.10";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
-	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.248",
+	"@dynamic-labs/iconic": "0.1.27",
+	"@dynamic-labs/sdk-api": "0.0.270",
 	"@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.100-viem.0";
+var version = "0.18.100-viem.10";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
-	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.248",
+	"@dynamic-labs/iconic": "0.1.27",
+	"@dynamic-labs/sdk-api": "0.0.270",
 	"@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.100-viem.0",
+  "version": "0.18.100-viem.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -8,20 +8,20 @@
   },
   "dependencies": {
     "react-focus-lock": "2.9.2",
-    "@dynamic-labs/iconic": "0.1.23",
-    "@dynamic-labs/sdk-api": "0.0.248",
+    "@dynamic-labs/iconic": "0.1.27",
+    "@dynamic-labs/sdk-api": "0.0.270",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "country-list": "2.3.0",
     "yup": "0.32.11",
     "formik": "2.2.9",
     "qrcode": "1.5.1",
-    "@dynamic-labs/logger": "0.18.100-viem.0",
-    "@dynamic-labs/multi-wallet": "0.18.100-viem.0",
-    "@dynamic-labs/rpc-providers": "0.18.100-viem.0",
-    "@dynamic-labs/types": "0.18.100-viem.0",
-    "@dynamic-labs/utils": "0.18.100-viem.0",
-    "@dynamic-labs/wallet-book": "0.18.100-viem.0",
-    "@dynamic-labs/wallet-connector-core": "0.18.100-viem.0",
+    "@dynamic-labs/logger": "0.18.100-viem.10",
+    "@dynamic-labs/multi-wallet": "0.18.100-viem.10",
+    "@dynamic-labs/rpc-providers": "0.18.100-viem.10",
+    "@dynamic-labs/types": "0.18.100-viem.10",
+    "@dynamic-labs/utils": "0.18.100-viem.10",
+    "@dynamic-labs/wallet-book": "0.18.100-viem.10",
+    "@dynamic-labs/wallet-connector-core": "0.18.100-viem.10",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -14,6 +14,7 @@ var DynamicNav = require('./lib/widgets/DynamicWidget/components/DynamicNav/Dyna
 var DynamicUserProfile = require('./lib/widgets/DynamicWidget/components/DynamicUserProfile/DynamicUserProfile.cjs');
 var FundingWidget = require('./lib/widgets/FundingWidget/FundingWidget.cjs');
 var DynamicBridgeWidget = require('./lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.cjs');
+var OAuthIFrameContainer = require('./lib/widgets/OAuthIFrameContainer/OAuthIFrameContainer.cjs');
 require('react/jsx-runtime');
 require('react');
 var classNames = require('./lib/utils/functions/classNames/classNames.cjs');
@@ -77,6 +78,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');
@@ -146,6 +148,7 @@ exports.DynamicNav = DynamicNav.ShadowedDynamicNav;
 exports.DynamicUserProfile = DynamicUserProfile.ShadowedDynamicUserProfile;
 exports.FundingWidget = FundingWidget.FundingWidget;
 exports.DynamicBridgeWidget = DynamicBridgeWidget.DynamicBridgeWidget;
+exports.OAuthIFrameContainer = OAuthIFrameContainer.OAuthIFrameContainer;
 exports.classNames = classNames.classNames;
 exports.decodeJwt = decodeJwt.decodeJwt;
 exports.validateType = validateType.validateType;
@@ -207,6 +210,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

@@ -10,6 +10,7 @@ export { ShadowedDynamicNav as DynamicNav } from './lib/widgets/DynamicWidget/co
 export { ShadowedDynamicUserProfile as DynamicUserProfile } from './lib/widgets/DynamicWidget/components/DynamicUserProfile/DynamicUserProfile.js';
 export { FundingWidget } from './lib/widgets/FundingWidget/FundingWidget.js';
 export { DynamicBridgeWidget } from './lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.js';
+export { OAuthIFrameContainer } from './lib/widgets/OAuthIFrameContainer/OAuthIFrameContainer.js';
 import 'react/jsx-runtime';
 import 'react';
 export { classNames } from './lib/utils/functions/classNames/classNames.js';
@@ -73,6 +74,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/Button/Button.cjs

@@ -36,12 +36,15 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
     }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonRounded ? buttonRoundedClassNameMap[buttonRounded] : '', buttonClassName);
     const handleClick = (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (onClick) {
-            setInternalButtonLoading(true);
-            try {
-                yield onClick(e);
-            }
-            finally {
-                setInternalButtonLoading(false);
+            const onClickResult = onClick(e);
+            if (onClickResult instanceof Promise) {
+                setInternalButtonLoading(true);
+                try {
+                    yield onClickResult;
+                }
+                finally {
+                    setInternalButtonLoading(false);
+                }
             }
         }
         if (feedback) {
@@ -52,7 +55,7 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
         }
     });
     const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [startSlot && jsxRuntime.jsx("div", { className: 'button__start-slot', children: startSlot }), (feedback || children) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'button_primary', color: 'primary', as: 'span' }, typographyProps, { children: isFeedbackVisible && feedback ? feedback : children }))), endSlot && jsxRuntime.jsx("div", { className: 'button__end-slot', children: endSlot })] }));
-    return (jsxRuntime.jsxs("button", { type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", { className: 'button__spinner-container', children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) })), buttonContent] }));
+    return (jsxRuntime.jsxs("button", { type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", { className: 'button__spinner-container', "data-testid": 'button__spinner', children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) })), buttonContent] }));
 };
 
 exports.Button = Button;

package/src/lib/components/Button/Button.js

@@ -32,12 +32,15 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
     }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonRounded ? buttonRoundedClassNameMap[buttonRounded] : '', buttonClassName);
     const handleClick = (e) => __awaiter(void 0, void 0, void 0, function* () {
         if (onClick) {
-            setInternalButtonLoading(true);
-            try {
-                yield onClick(e);
-            }
-            finally {
-                setInternalButtonLoading(false);
+            const onClickResult = onClick(e);
+            if (onClickResult instanceof Promise) {
+                setInternalButtonLoading(true);
+                try {
+                    yield onClickResult;
+                }
+                finally {
+                    setInternalButtonLoading(false);
+                }
             }
         }
         if (feedback) {
@@ -48,7 +51,7 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
         }
     });
     const buttonContent = (jsxs(Fragment, { children: [startSlot && jsx("div", { className: 'button__start-slot', children: startSlot }), (feedback || children) && (jsx(Typography, Object.assign({ variant: 'button_primary', color: 'primary', as: 'span' }, typographyProps, { children: isFeedbackVisible && feedback ? feedback : children }))), endSlot && jsx("div", { className: 'button__end-slot', children: endSlot })] }));
-    return (jsxs("button", { type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsx("div", { className: 'button__spinner-container', children: jsx(Spinner, { className: 'button__spinner' }) })), buttonContent] }));
+    return (jsxs("button", { type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId, children: [(internalButtonLoading || loading) && (jsx("div", { className: 'button__spinner-container', "data-testid": 'button__spinner', children: jsx(Spinner, { className: 'button__spinner' }) })), buttonContent] }));
 };
 
 export { Button };

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", { className: buttonContainerClassName, children: jsxRuntime.jsx(Button.Button, { 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", { className: buttonContainerClassName, children: jsxRuntime.jsx(Button.Button, { 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", { className: buttonContainerClassName, children: jsx(Button, { 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", { className: buttonContainerClassName, children: jsx(Button, { 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/ErrorContainer/ErrorContainer.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-type Variant = 'error' | 'info';
+type Variant = 'error' | 'info' | 'success';
 type Props = {
     children: ReactNode;
     className?: string;

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", { "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style, children: [leading, jsxRuntime.jsx("div", { className: 'list-tile__children', children: jsxRuntime.jsx(Typography.Typography, { 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", { "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style, disabled: disabled, children: [leading, jsxRuntime.jsx("div", { className: 'list-tile__children', children: jsxRuntime.jsx(Typography.Typography, { 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", { "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style, children: [leading, jsx("div", { className: 'list-tile__children', children: jsx(Typography, { 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", { "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style, disabled: disabled, children: [leading, jsx("div", { className: 'list-tile__children', children: jsx(Typography, { 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/MenuList/Dropdown/Dropdown.cjs

@@ -12,13 +12,13 @@ var watchToScrollInHierarchy = require('../utils/watchToScrollInHierarchy/watchT
 require('../../../shared/logger.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 var index = require('../../../shared/utils/hooks/useOnClickOutside/index.cjs');
+require('@dynamic-labs/utils');
 var useForwardedRef = require('../../../shared/utils/hooks/useForwardedRef/useForwardedRef.cjs');
 require('@dynamic-labs/sdk-api');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../../utils/constants/colors.cjs');
 require('viem');
 require('../../../shared/consts/index.cjs');

package/src/lib/components/MenuList/Dropdown/Dropdown.js

@@ -8,13 +8,13 @@ import { watchToScrollInHierarchy } from '../utils/watchToScrollInHierarchy/watc
 import '../../../shared/logger.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import { useOnClickOutside } from '../../../shared/utils/hooks/useOnClickOutside/index.js';
+import '@dynamic-labs/utils';
 import { useForwardedRef } from '../../../shared/utils/hooks/useForwardedRef/useForwardedRef.js';
 import '@dynamic-labs/sdk-api';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../../utils/constants/colors.js';
 import 'viem';
 import '../../../shared/consts/index.js';

package/src/lib/components/ModalHeaderBanner/ModalHeaderBanner.cjs

@@ -13,9 +13,13 @@ var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/V
 
 const typographyColor = {
     error: 'error-1',
+    notice: 'brand-primary',
+    success: 'green-1',
 };
-const ModalHeaderBanner = ({ message, type = 'error', }) => (jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, { style: { width: '100%' } }), children: Boolean(message) && (jsxRuntime.jsx("div", { className: classNames.classNames('modal-header-banner', {
+const ModalHeaderBanner = ({ message, type = 'error', disableTruncate = false, }) => (jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, { style: { width: '100%' } }), children: Boolean(message) && (jsxRuntime.jsx("div", { className: classNames.classNames('modal-header-banner', {
             'modal-header-banner__error': type === 'error',
-        }), children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: typographyColor[type], truncate: true, children: message }) })) }));
+            'modal-header-banner__notice': type === 'notice',
+            'modal-header-banner__success': type === 'success',
+        }), children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: typographyColor[type], truncate: disableTruncate === false, children: message }) })) }));
 
 exports.ModalHeaderBanner = ModalHeaderBanner;

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

@@ -1,8 +1,9 @@
 import { FC } from 'react';
-type ModalHeaderBannerType = 'error';
+type ModalHeaderBannerType = 'error' | 'success' | 'notice';
 export type ModalHeaderBannerProps = {
     message?: string;
     type?: ModalHeaderBannerType;
+    disableTruncate?: boolean;
 };
 export declare const ModalHeaderBanner: FC<ModalHeaderBannerProps>;
 export {};

package/src/lib/components/ModalHeaderBanner/ModalHeaderBanner.js

@@ -9,9 +9,13 @@ import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition
 
 const typographyColor = {
     error: 'error-1',
+    notice: 'brand-primary',
+    success: 'green-1',
 };
-const ModalHeaderBanner = ({ message, type = 'error', }) => (jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, { style: { width: '100%' } }), children: Boolean(message) && (jsx("div", { className: classNames('modal-header-banner', {
+const ModalHeaderBanner = ({ message, type = 'error', disableTruncate = false, }) => (jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, { style: { width: '100%' } }), children: Boolean(message) && (jsx("div", { className: classNames('modal-header-banner', {
             'modal-header-banner__error': type === 'error',
-        }), children: jsx(Typography, { variant: 'body_small', color: typographyColor[type], truncate: true, children: message }) })) }));
+            'modal-header-banner__notice': type === 'notice',
+            'modal-header-banner__success': type === 'success',
+        }), children: jsx(Typography, { variant: 'body_small', color: typographyColor[type], truncate: disableTruncate === false, children: message }) })) }));
 
 export { ModalHeaderBanner };

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, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { 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, { alignContent: 'bottom', leading: onClickBack && backButton, children: jsxRuntime.jsxs("div", { 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, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid ? 'Verification code confirmed' : 'Confirm verification code' }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsxRuntime.jsx(Typography.Typography, { 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, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail.shortenEmail(email) }), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsxRuntime.jsx(Icon.Icon, { 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", { className: 'otp-verification-view__footer', children: displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })] }));
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, successBannerText, }) => {
+    const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickClose, type: 'button', "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
+    return (jsxRuntime.jsxs("div", { className: 'otp-verification-view', children: [successBannerText && (jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'notice', message: successBannerText, disableTruncate: true })), jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, trailing: onClickClose && closeButton, children: jsxRuntime.jsxs("div", { 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, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid ? 'Verification code confirmed' : 'Confirm verification code' }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsxRuntime.jsx(Typography.Typography, { 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, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail.shortenEmail(email) }), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsxRuntime.jsx(Icon.Icon, { 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", { className: 'otp-verification-view__footer', children: displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })] }));
 };
 
 exports.OTPVerificationView = OTPVerificationView;

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

@@ -6,9 +6,11 @@ type OtpVerificationLayoutProps = {
     isLoading: boolean;
     isValid: boolean;
     onClickBack?: MouseEventHandler<HTMLButtonElement>;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onClickEditEmail?: MouseEventHandler<HTMLButtonElement>;
     onPinChange?: (value: string) => void;
     onPinComplete: (value: string) => void;
+    successBannerText?: string;
 };
 export declare const OTPVerificationView: FC<OtpVerificationLayoutProps>;
 export {};

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, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs("div", { className: 'otp-verification-view', children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, children: jsxs("div", { 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, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid ? 'Verification code confirmed' : 'Confirm verification code' }), jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Hang tight while we get things ready for you" })), !isValid && (jsxs(Fragment, { children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxs("div", { className: 'otp-verification-view__email-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail(email) }), onClickEditEmail && (jsx(IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsx(Icon, { 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", { className: 'otp-verification-view__footer', children: displayPoweredByDynamic && jsx(PoweredByDynamic, {}) })] }));
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, successBannerText, }) => {
+    const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
+    const closeButton = (jsx(IconButton, { onClick: onClickClose, type: 'button', "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
+    return (jsxs("div", { className: 'otp-verification-view', children: [successBannerText && (jsx(ModalHeaderBanner, { type: 'notice', message: successBannerText, disableTruncate: true })), jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, trailing: onClickClose && closeButton, children: jsxs("div", { 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, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid ? 'Verification code confirmed' : 'Confirm verification code' }), jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Hang tight while we get things ready for you" })), !isValid && (jsxs(Fragment, { children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxs("div", { className: 'otp-verification-view__email-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail(email) }), onClickEditEmail && (jsx(IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsx(Icon, { 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", { className: 'otp-verification-view__footer', children: displayPoweredByDynamic && jsx(PoweredByDynamic, {}) })] }));
 };
 
 export { OTPVerificationView };

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs

@@ -36,7 +36,9 @@ var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading, children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [jsxRuntime.jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsxRuntime.jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: warningMessage && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', children: warningMessage }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsxRuntime.jsx(Button.Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading, children: "Cancel" })), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton, children: "Send" })] }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, leading: backButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'transaction-confirmation__title', children: title }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__content', children: [jsxRuntime.jsx("div", { className: 'transaction-confirmation__app-origin-tile', children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) }), jsxRuntime.jsx("div", { className: 'transaction-confirmation__rows', children: children })] }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: warningMessage && (jsxRuntime.jsx("div", { className: 'transaction-confirmation__warning', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'warning', contentDataTestId: 'warning_content', children: warningMessage }) })) }), jsxRuntime.jsxs("div", { className: 'transaction-confirmation__actions', children: [onClickClose && (jsxRuntime.jsx(Button.Button, { buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading, children: "Cancel" })), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: (event) => {
+                                    onClickSend === null || onClickSend === void 0 ? void 0 : onClickSend(event);
+                                }, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton, children: "Send" })] }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] })] }));
 };
 
 exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;