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

package/CHANGELOG.md

@@ -1,4 +1,36 @@
 
+### [0.18.1](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0...v0.18.1) (2023-08-15)
+
+
+### Bug Fixes
+
+* captcha: complete sign in with magic and blocto ([#2967](https://github.com/dynamic-labs/DynamicAuth/issues/2967)) ([#2983](https://github.com/dynamic-labs/DynamicAuth/issues/2983)) ([495b9ad](https://github.com/dynamic-labs/DynamicAuth/commit/495b9adfed3bf131cceed3f8788caaa1443d8a1a))
+* sync wagmi correctly in connect-only mode ([#2990](https://github.com/dynamic-labs/DynamicAuth/issues/2990)) ([#2994](https://github.com/dynamic-labs/DynamicAuth/issues/2994)) ([d4d6450](https://github.com/dynamic-labs/DynamicAuth/commit/d4d6450247246b81702fa8bed3cc0abdd51846f3))
+
+## [0.18.0](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.32...v0.18.0) (2023-08-13)
+
+
+### Features
+
+* add in OKX wallet integration ([#2871](https://github.com/dynamic-labs/DynamicAuth/issues/2871)) ([#2927](https://github.com/dynamic-labs/DynamicAuth/issues/2927)) ([f6d06bc](https://github.com/dynamic-labs/DynamicAuth/commit/f6d06bc75ee0e53c9d972f5fab1f4de11818bd82))
+* update wallet locked view ([#2923](https://github.com/dynamic-labs/DynamicAuth/issues/2923)) ([3cc03ee](https://github.com/dynamic-labs/DynamicAuth/commit/3cc03ee5913434d99386fc89d4d26d5d3fb3ca19))
+
+
+### Bug Fixes
+
+* fix issues with mergeUserAccountsView  ([#2945](https://github.com/dynamic-labs/DynamicAuth/issues/2945)) ([2c6265e](https://github.com/dynamic-labs/DynamicAuth/commit/2c6265e3e709edb9ff1af6e6c139b85418e46d76))
+* fix connecting with cool wallet ([#2949](https://github.com/dynamic-labs/DynamicAuth/issues/2949)) ([ab22303](https://github.com/dynamic-labs/DynamicAuth/commit/ab22303294123c2a914a65f0d2c15481740647bb))
+* fix email update when user is authenticated ([#2932](https://github.com/dynamic-labs/DynamicAuth/issues/2932)) ([db33ba1](https://github.com/dynamic-labs/DynamicAuth/commit/db33ba14c317469958ce314a3822b706e20b07d0))
+* fix gas estimate in transaction confirmation ([#2938](https://github.com/dynamic-labs/DynamicAuth/issues/2938)) ([02d0f46](https://github.com/dynamic-labs/DynamicAuth/commit/02d0f46127e94e83b4decbaaf6a45dbae135c89d))
+* fix gas estimate for transactions ([#2947](https://github.com/dynamic-labs/DynamicAuth/issues/2947)) ([ad35a72](https://github.com/dynamic-labs/DynamicAuth/commit/ad35a722df6abd54b98ea491661ff4ec3e602621))
+* fix key to distinguish wallet and wallet group ([#2922](https://github.com/dynamic-labs/DynamicAuth/issues/2922)) ([f40c07c](https://github.com/dynamic-labs/DynamicAuth/commit/f40c07c65915775e99a1dbb8d07bb23824a92915)), closes [#2909](https://github.com/dynamic-labs/DynamicAuth/issues/2909)
+* automatically display account already exist message ([#2896](https://github.com/dynamic-labs/DynamicAuth/issues/2896)) ([#2906](https://github.com/dynamic-labs/DynamicAuth/issues/2906)) ([5e7478a](https://github.com/dynamic-labs/DynamicAuth/commit/5e7478acd864451a7cf7e8e62845cca7ef5439c6))
+* don't let user update email if it's tied to an embedded wallet ([#2903](https://github.com/dynamic-labs/DynamicAuth/issues/2903)) ([33c52b5](https://github.com/dynamic-labs/DynamicAuth/commit/33c52b50a880a34b4161a700b8b1805c9b01527d)), closes [#2883](https://github.com/dynamic-labs/DynamicAuth/issues/2883)
+* fix isVerificationInProgress flag ([#2926](https://github.com/dynamic-labs/DynamicAuth/issues/2926)) ([98f54fd](https://github.com/dynamic-labs/DynamicAuth/commit/98f54fd1345713dfaf0ef837502dfaca3709d633))
+* de-duplicate onBeforeConnectSuccessConfirmation callback invocations ([#2965](https://github.com/dynamic-labs/DynamicAuth/issues/2965)) ([a276968](https://github.com/dynamic-labs/DynamicAuth/commit/a2769689bc82350dfb8123e1fe8a4e92a60b262c))
+* reformat social sign-in text ([#2956](https://github.com/dynamic-labs/DynamicAuth/issues/2956)) ([#2961](https://github.com/dynamic-labs/DynamicAuth/issues/2961)) ([f8d2222](https://github.com/dynamic-labs/DynamicAuth/commit/f8d2222d102f5335f95ec917cbb63bf9b55eff0b))
+* stop overriding views ([#2921](https://github.com/dynamic-labs/DynamicAuth/issues/2921)) ([aa8c369](https://github.com/dynamic-labs/DynamicAuth/commit/aa8c369d2a713eb57ecc99b16a6b62d465789370))
+
 ## [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)
 
 

package/package.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.18.0-beta.32";
+var version = "0.18.1";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.255",
+	"@dynamic-labs/sdk-api": "0.0.256",
 	"@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.32";
+var version = "0.18.1";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",
-	"@dynamic-labs/sdk-api": "0.0.255",
+	"@dynamic-labs/sdk-api": "0.0.256",
 	"@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.32",
+  "version": "0.18.1",
   "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.255",
+    "@dynamic-labs/sdk-api": "0.0.256",
     "@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.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",
+    "@dynamic-labs/logger": "0.18.1",
+    "@dynamic-labs/multi-wallet": "0.18.1",
+    "@dynamic-labs/rpc-providers": "0.18.1",
+    "@dynamic-labs/types": "0.18.1",
+    "@dynamic-labs/utils": "0.18.1",
+    "@dynamic-labs/wallet-book": "0.18.1",
+    "@dynamic-labs/wallet-connector-core": "0.18.1",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

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", Object.assign({ 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", Object.assign({ className: 'button__end-slot' }, { children: endSlot }))] }));
-    return (jsxRuntime.jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", Object.assign({ className: 'button__spinner-container' }, { children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
+    return (jsxRuntime.jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", Object.assign({ 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", Object.assign({ 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", Object.assign({ className: 'button__end-slot' }, { children: endSlot }))] }));
-    return (jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsx("div", Object.assign({ className: 'button__spinner-container' }, { children: jsx(Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
+    return (jsxs("button", Object.assign({ type: type, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, "data-testid": dataTestId }, { children: [(internalButtonLoading || loading) && (jsx("div", Object.assign({ className: 'button__spinner-container', "data-testid": 'button__spinner' }, { children: jsx(Spinner, { className: 'button__spinner' }) }))), buttonContent] })));
 };
 
 export { Button };

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/ModalHeaderBanner/ModalHeaderBanner.cjs

@@ -13,9 +13,11 @@ var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/V
 
 const typographyColor = {
     error: 'error-1',
+    success: 'green-1',
 };
-const ModalHeaderBanner = ({ message, type = 'error', }) => (jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('modal-header-banner', {
+const ModalHeaderBanner = ({ message, type = 'error', disableTruncate = false, }) => (jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('modal-header-banner', {
             'modal-header-banner__error': type === 'error',
-        }) }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: typographyColor[type], truncate: true }, { children: message })) }))) })));
+            'modal-header-banner__success': type === 'success',
+        }) }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ 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';
 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,11 @@ import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition
 
 const typographyColor = {
     error: 'error-1',
+    success: 'green-1',
 };
-const ModalHeaderBanner = ({ message, type = 'error', }) => (jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsx("div", Object.assign({ className: classNames('modal-header-banner', {
+const ModalHeaderBanner = ({ message, type = 'error', disableTruncate = false, }) => (jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, { style: { width: '100%' } }) }, { children: Boolean(message) && (jsx("div", Object.assign({ className: classNames('modal-header-banner', {
             'modal-header-banner__error': type === 'error',
-        }) }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: typographyColor[type], truncate: true }, { children: message })) }))) })));
+            'modal-header-banner__success': type === 'success',
+        }) }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: typographyColor[type], truncate: disableTruncate === false }, { children: message })) }))) })));
 
 export { ModalHeaderBanner };

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

@@ -55,10 +55,10 @@ require('yup');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, }) => {
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, successBannerText, }) => {
     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, {}) }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [successBannerText && (jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'success', message: successBannerText, disableTruncate: true })), 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

@@ -10,6 +10,7 @@ type OtpVerificationLayoutProps = {
     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

@@ -51,10 +51,10 @@ import 'yup';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, }) => {
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, successBannerText, }) => {
     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, {}) }))] })));
+    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [successBannerText && (jsx(ModalHeaderBanner, { type: 'success', message: successBannerText, disableTruncate: true })), 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/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, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'brand-primary' }, { children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: warningMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsxRuntime.jsx(Button.Button, Object.assign({ 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, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'brand-primary' }, { children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: warningMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsxRuntime.jsx(Button.Button, Object.assign({ 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;

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

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

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

@@ -54,8 +54,8 @@ var TransactionRow = require('../TransactionConfirmationPageLayout/components/Tr
 
 const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
-    const networkIcon = (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] }))] })));
+    const networkIcon = (jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone, loading: false }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] }))] })));
 };
 
 exports.TransactionStatusLayout = TransactionStatusLayout;

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

@@ -50,8 +50,8 @@ import { TransactionRow } from '../TransactionConfirmationPageLayout/components/
 
 const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
     const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close' }, { children: jsx(SvgClose, {}) })));
-    const networkIcon = (jsx("div", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
-    return (jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) })), jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsx(TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress(destinationAddress, 3, 3) })), jsxs(TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxs(TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsx(Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] }))] })));
+    const networkIcon = (jsx("span", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
+    return (jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) })), jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsx(TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress(destinationAddress, 3, 3) })), jsxs(TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxs(TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsx(Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone, loading: false }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] }))] })));
 };
 
 export { TransactionStatusLayout };

package/src/lib/components/Typography/Typography.cjs

@@ -29,6 +29,7 @@ const Typography = (_a) => {
         'brand-primary': 'typography--brand-primary',
         'error-1': 'typography--dynamic-error-1',
         'error-2': 'typography--dynamic-error-2',
+        'green-1': 'typography--connection-green-1',
         link: 'typography--link',
         primary: 'typography--primary',
         secondary: 'typography--secondary',

package/src/lib/components/Typography/Typography.js

@@ -25,6 +25,7 @@ const Typography = (_a) => {
         'brand-primary': 'typography--brand-primary',
         'error-1': 'typography--dynamic-error-1',
         'error-2': 'typography--dynamic-error-2',
+        'green-1': 'typography--connection-green-1',
         link: 'typography--link',
         primary: 'typography--primary',
         secondary: 'typography--secondary',

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

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ElementType, ReactElement } from 'react';
 export type TypographyTag = ElementType;
 export type TypographyVariant = 'title' | 'body_normal' | 'body_small' | 'body_mini' | 'button_primary' | 'button_secondary' | 'button_tertiary' | 'numbers_big' | 'numbers_medium' | 'numbers_small';
-export type TypographyColor = 'primary' | 'secondary' | 'brand-primary' | 'tertiary' | 'link' | 'error-1' | 'error-2' | 'tooltip';
+export type TypographyColor = 'primary' | 'secondary' | 'brand-primary' | 'tertiary' | 'link' | 'error-1' | 'error-2' | 'tooltip' | 'green-1';
 export type TypographyWeight = 'regular' | 'medium' | 'bold';
 export type TypographyTransform = 'uppercase';
 export type TypographyProps<TAG extends ElementType = 'p'> = {

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

@@ -250,6 +250,9 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         setWalletsToConnectByChain(walletsByChain);
         setShowBridgeWidget(false);
         localStorage.LocalStorage.removeFromLS(localStorage$1.WALLET_PICKER_SEARCH_KEY);
+        if (!toolkitEnabled) {
+            localStorage.LocalStorage.removeFromLS(localStorage$1.IS_MULTI_WALLET_ENABLED);
+        }
         const jwt = getAuthToken.getAuthToken();
         if (jwt && user) {
             // do not await this async call - just fire and forget
@@ -261,7 +264,8 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         yield ((_j = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _j === void 0 ? void 0 : _j.endSession());
         // Necessary when user logs out in user data collection view
         // Dont require flag to be set though
-        setIsVerificationInProgress(false, false);
+        if (isVerificationInProgress)
+            setIsVerificationInProgress(false);
         setLegacyIsVerifying(false);
         setAuthMode(initialAuthenticationMode);
         setShowAuthFlow(false);
@@ -367,7 +371,8 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
     const clearStatesOnBackClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setDesktopUri('');
         // Clear verification flag but dont require it to be set
-        setIsVerificationInProgress(false, false);
+        if (isVerificationInProgress)
+            setIsVerificationInProgress(false);
         setLegacyIsVerifying(false);
         if (!user) {
             clearAllWalletConnectSessions();

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -10,7 +10,7 @@ import { Toolkit } from '../../components/Toolkit/Toolkit.js';
 import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.js';
 import { ViewContextProvider } from '../ViewContext/ViewContext.js';
 import { logger } from '../../shared/logger.js';
-import { IS_FULLY_CONNECTED, AUTH_TOKEN, AUTH_USER, AUTH_MODE, WALLET_PICKER_SEARCH_KEY } from '../../utils/constants/localStorage.js';
+import { IS_FULLY_CONNECTED, AUTH_TOKEN, AUTH_USER, AUTH_MODE, WALLET_PICKER_SEARCH_KEY, IS_MULTI_WALLET_ENABLED } from '../../utils/constants/localStorage.js';
 import '../../utils/constants/colors.js';
 import { DEFAULT_NUMBER_OF_WALLETS_TO_SHOW } from '../../utils/constants/values.js';
 import { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js';
@@ -246,6 +246,9 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         setWalletsToConnectByChain(walletsByChain);
         setShowBridgeWidget(false);
         LocalStorage.removeFromLS(WALLET_PICKER_SEARCH_KEY);
+        if (!toolkitEnabled) {
+            LocalStorage.removeFromLS(IS_MULTI_WALLET_ENABLED);
+        }
         const jwt = getAuthToken();
         if (jwt && user) {
             // do not await this async call - just fire and forget
@@ -257,7 +260,8 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         yield ((_j = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _j === void 0 ? void 0 : _j.endSession());
         // Necessary when user logs out in user data collection view
         // Dont require flag to be set though
-        setIsVerificationInProgress(false, false);
+        if (isVerificationInProgress)
+            setIsVerificationInProgress(false);
         setLegacyIsVerifying(false);
         setAuthMode(initialAuthenticationMode);
         setShowAuthFlow(false);
@@ -363,7 +367,8 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
     const clearStatesOnBackClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         setDesktopUri('');
         // Clear verification flag but dont require it to be set
-        setIsVerificationInProgress(false, false);
+        if (isVerificationInProgress)
+            setIsVerificationInProgress(false);
         setLegacyIsVerifying(false);
         if (!user) {
             clearAllWalletConnectSessions();

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

@@ -22,10 +22,20 @@ const useVerificationInProgress = () => {
     // because when modal is closed manually, the flag will be false at the moment of onAuthModalClose.
     // If it was closed due to a verification process, it will be true.
     const [isVerificationInProgress, _setIsVerificationInProgress] = React.useState(false);
-    const setIsVerificationInProgress = (newValue, checkWasSetOnDisable = true) => {
-        if (checkWasSetOnDisable && !newValue && !isVerificationInProgress)
+    // Detects whether the flag is being set to false when it was already false
+    const detectRedundantDisable = (newValue, oldValue) => {
+        if (!newValue && !oldValue)
             logger.logger.debug('The "isVerificationInProgress" flag had not been previously enabled at the time of being disabled. Please ensure to set it to true whenever any kind of verification process is started');
-        _setIsVerificationInProgress(newValue);
+    };
+    // eslint-disable-next-line multiline-comment-style
+    /** Setter for isVerificationInProgress that also logs a debug message if
+     * it is set to false without having been set to true before */
+    const setIsVerificationInProgress = (newValue) => {
+        // Calls original setter with a callback. This prevents accessing an outdated value of isVerificationInProgress
+        _setIsVerificationInProgress((oldValue) => {
+            detectRedundantDisable(newValue, oldValue);
+            return newValue;
+        });
     };
     return [isVerificationInProgress, setIsVerificationInProgress];
 };

package/src/lib/context/DynamicContext/hooks/useVerificationInProgress/useVerificationInProgress.js

@@ -18,10 +18,20 @@ const useVerificationInProgress = () => {
     // because when modal is closed manually, the flag will be false at the moment of onAuthModalClose.
     // If it was closed due to a verification process, it will be true.
     const [isVerificationInProgress, _setIsVerificationInProgress] = useState(false);
-    const setIsVerificationInProgress = (newValue, checkWasSetOnDisable = true) => {
-        if (checkWasSetOnDisable && !newValue && !isVerificationInProgress)
+    // Detects whether the flag is being set to false when it was already false
+    const detectRedundantDisable = (newValue, oldValue) => {
+        if (!newValue && !oldValue)
             logger.debug('The "isVerificationInProgress" flag had not been previously enabled at the time of being disabled. Please ensure to set it to true whenever any kind of verification process is started');
-        _setIsVerificationInProgress(newValue);
+    };
+    // eslint-disable-next-line multiline-comment-style
+    /** Setter for isVerificationInProgress that also logs a debug message if
+     * it is set to false without having been set to true before */
+    const setIsVerificationInProgress = (newValue) => {
+        // Calls original setter with a callback. This prevents accessing an outdated value of isVerificationInProgress
+        _setIsVerificationInProgress((oldValue) => {
+            detectRedundantDisable(newValue, oldValue);
+            return newValue;
+        });
     };
     return [isVerificationInProgress, setIsVerificationInProgress];
 };

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

@@ -29,7 +29,7 @@ export interface IDynamicContext {
     setBridgeChainToConnect: Dispatch<SetStateAction<Chain | undefined>>;
     clearStatesOnBackClick: () => void;
     computeConnectedStateForWallets: () => Promise<void>;
-    connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts) => Promise<string | undefined>;
+    connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts, shouldCallCallback?: boolean) => Promise<string | undefined>;
     connectedWallet: Wallet | null;
     connectedWallets: Wallet[];
     linkedWallets: Wallet[];
@@ -126,7 +126,7 @@ export interface IDynamicContext {
     user: UserProfile | undefined;
     unlinkConnectedWallet: (walletId: string) => void;
     walletConnector: WalletConnector | null;
-    walletUiUtils: WalletUiUtils;
+    walletUiUtils: WalletUiUtils<WalletConnector>;
     wallets: WalletOption[];
     walletsFilter?: (options: WalletOption[]) => WalletOption[];
     removeConnectedWalletsInfo: () => void;

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs

@@ -18,6 +18,7 @@ var usePreventPageScroll = require('../../shared/utils/hooks/usePreventPageScrol
 var index = require('../../shared/consts/index.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
+var isMagicConnector = require('../../utils/functions/isMagicConnector/isMagicConnector.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 var Portal = require('../../components/Portal/Portal.cjs');
@@ -37,6 +38,7 @@ require('../../components/Alert/Alert.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var useTransactionWithGasPrice = require('../../utils/hooks/useTransactionWithGasPrice/useTransactionWithGasPrice.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
@@ -46,11 +48,17 @@ var ModalCard = require('../../components/ModalCard/ModalCard.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
-const TransactionConfirmationModal = ({ title, handler, onReject, onTransactionResponseSuccess, transaction, provider, }) => {
+const TransactionConfirmationModal = ({ title, handler, onReject, onTransactionResponseSuccess, transaction, provider, walletConnector, }) => {
     usePreventPageScroll.usePreventPageScroll(true);
     const [show, setShow] = React.useState(true);
     const errorRef = React.useRef(null);
     const transactionResponseRef = React.useRef(null);
+    const transactionWithGasPrice = useTransactionWithGasPrice.useTransactionWithGasPrice({
+        enabled: isMagicConnector.isMagicConnector(walletConnector),
+        increasePercentage: 5,
+        provider,
+        transaction,
+    });
     const closeModal = React.useCallback(() => {
         setShow(false);
     }, [setShow]);
@@ -62,7 +70,7 @@ const TransactionConfirmationModal = ({ title, handler, onReject, onTransactionR
     }, [onTransactionResponseSuccess, onReject]);
     return (jsxRuntime.jsx(Portal.Portal, Object.assign({ handleClose: closeModal, isShown: show, zIndex: index.authModalZIndex, withBackdrop: true, elementId: 'dynamic-send-transaction', transitionEvents: {
             onUnmount: handleOnModalUnmount,
-        } }, { children: jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsx(ModalCard.ModalCard, { children: jsxRuntime.jsx(TransactionConfirmationView.TransactionConfirmationView, { provider: provider, transaction: transaction, title: title, mutation: () => handler(transaction), onClickClose: closeModal, onError: (error) => (errorRef.current = error), displayPoweredByDynamicFooter: true, onSuccess: (transactionResponse) => {
+        } }, { children: jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsx(ModalCard.ModalCard, { children: jsxRuntime.jsx(TransactionConfirmationView.TransactionConfirmationView, { provider: provider, transaction: transactionWithGasPrice, title: title, mutation: () => handler(transactionWithGasPrice), onClickClose: closeModal, onError: (error) => (errorRef.current = error), displayPoweredByDynamicFooter: true, onSuccess: (transactionResponse) => {
                         errorRef.current = null;
                         transactionResponseRef.current = transactionResponse;
                         closeModal();