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

package/CHANGELOG.md

@@ -1,4 +1,18 @@
 
+## [0.17.0-RC.25](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.24...v0.17.0-RC.25) (2023-06-05)
+
+
+### Bug Fixes
+
+* **EmailOTPMagicWalletConnector:** allow user to reconnect with email wallet ([#2230](https://github.com/dynamic-labs/DynamicAuth/issues/2230)) ([6059886](https://github.com/dynamic-labs/DynamicAuth/commit/605988650a783ae824bb8c45edc5533fecf8726a))
+* only set wagmi connector if connected chain is evm ([#2237](https://github.com/dynamic-labs/DynamicAuth/issues/2237)) ([a7be7d3](https://github.com/dynamic-labs/DynamicAuth/commit/a7be7d302d1e74088b0aa2b6848c879079e6f963))
+* Revert "fix(ViewContext): only set view when on wallet list" ([#2235](https://github.com/dynamic-labs/DynamicAuth/issues/2235)) ([e790315](https://github.com/dynamic-labs/DynamicAuth/commit/e79031577f640161cc5f0b9b2e695e22d9a98901)), closes [#2226](https://github.com/dynamic-labs/DynamicAuth/issues/2226)
+* set view to social-redirect-view while waiting to process magic redirect ([#2229](https://github.com/dynamic-labs/DynamicAuth/issues/2229)) ([f50a29c](https://github.com/dynamic-labs/DynamicAuth/commit/f50a29c0b9623c703f1577c7a41fcc5aee58abb8))
+* user profile does not extend on mobile ([#2236](https://github.com/dynamic-labs/DynamicAuth/issues/2236)) ([5bb7912](https://github.com/dynamic-labs/DynamicAuth/commit/5bb7912a865338fdf6eca1a19ff4b74a3fb18eeb))
+* **ViewContext:** only set view when on wallet list ([#2226](https://github.com/dynamic-labs/DynamicAuth/issues/2226)) ([85e8fc1](https://github.com/dynamic-labs/DynamicAuth/commit/85e8fc140069cabff41f4067ac93ea0c5cfaa161))
+
+## [0.17.0-RC.24](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.23...v0.17.0-RC.24) (2023-06-02)
+
 ## [0.17.0-RC.23](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.22...v0.17.0-RC.23) (2023-06-02)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.17.0-RC.23";
+var version = "0.17.0-RC.25";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.19",

package/package.js

@@ -1,4 +1,4 @@
-var version = "0.17.0-RC.23";
+var version = "0.17.0-RC.25";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.19",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.17.0-RC.23",
+  "version": "0.17.0-RC.25",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -17,12 +17,12 @@
     "formik": "2.2.9",
     "qrcode": "1.5.1",
     "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.17.0-RC.23",
-    "@dynamic-labs/multi-wallet": "0.17.0-RC.23",
-    "@dynamic-labs/rpc-providers": "0.17.0-RC.23",
-    "@dynamic-labs/types": "0.17.0-RC.23",
-    "@dynamic-labs/utils": "0.17.0-RC.23",
-    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.23"
+    "@dynamic-labs/logger": "0.17.0-RC.25",
+    "@dynamic-labs/multi-wallet": "0.17.0-RC.25",
+    "@dynamic-labs/rpc-providers": "0.17.0-RC.25",
+    "@dynamic-labs/types": "0.17.0-RC.25",
+    "@dynamic-labs/utils": "0.17.0-RC.25",
+    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.25"
   },
   "devDependencies": {
     "semver": "7.3.8"

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

@@ -43,6 +43,7 @@ require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 var TosAndPp = require('../TosAndPp/TosAndPp.cjs');
 var PinField = require('../PinField/PinField.cjs');
 var ModalHeaderBanner = require('../ModalHeaderBanner/ModalHeaderBanner.cjs');
+var shortenEmail = require('../../shared/utils/functions/shortenEmail/shortenEmail.cjs');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('@dynamic-labs/wallet-book');
@@ -50,7 +51,7 @@ require('../SendBalanceForm/SendBalanceForm.cjs');
 
 const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, termsOfServiceUrl, privacyPolicyUrl, onPinChange, displayPoweredByDynamic = false, }) => {
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: 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.jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] }))] })));
 };
 
 exports.OTPVerificationView = OTPVerificationView;

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

@@ -39,6 +39,7 @@ import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { TosAndPp } from '../TosAndPp/TosAndPp.js';
 import { PinField } from '../PinField/PinField.js';
 import { ModalHeaderBanner } from '../ModalHeaderBanner/ModalHeaderBanner.js';
+import { shortenEmail } from '../../shared/utils/functions/shortenEmail/shortenEmail.js';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import '@dynamic-labs/wallet-book';
@@ -46,7 +47,7 @@ import '../SendBalanceForm/SendBalanceForm.js';
 
 const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, termsOfServiceUrl, privacyPolicyUrl, onPinChange, displayPoweredByDynamic = false, }) => {
     const backButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
-    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: 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 }), jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsx(TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsx(PoweredByDynamic, {})] }))] })));
+    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsx(TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsx(PoweredByDynamic, {})] }))] })));
 };
 
 export { OTPVerificationView };

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

@@ -41,7 +41,7 @@ var VerifiedEmailIcon = require('./components/VerifiedEmailIcon/VerifiedEmailIco
 const UserProfileField = ({ name, label, value, }) => {
     const isEmpty = value === '';
     const isEmailField = name === 'email';
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'span', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsxRuntime.jsx(VerifiedEmailIcon.VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon' }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsxRuntime.jsxs("div", Object.assign({ className: 'user-profile-field__value' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'p', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsxRuntime.jsx(VerifiedEmailIcon.VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon', overwriteTooltipProps: { as: 'div' } }))] }))] })));
 };
 
 exports.UserProfileField = UserProfileField;

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

@@ -37,7 +37,7 @@ import { VerifiedEmailIcon } from './components/VerifiedEmailIcon/VerifiedEmailI
 const UserProfileField = ({ name, label, value, }) => {
     const isEmpty = value === '';
     const isEmailField = name === 'email';
-    return (jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsx(Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsx(Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'span', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsx(VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon' }))] })));
+    return (jsxs("div", Object.assign({ className: 'user-profile-field' }, { children: [label && (jsx(Typography, Object.assign({ as: 'h6', color: 'secondary', weight: 'regular', variant: 'body_small' }, { children: label }))), jsxs("div", Object.assign({ className: 'user-profile-field__value' }, { children: [jsx(Typography, Object.assign({ color: isEmpty ? 'tertiary' : 'primary', as: 'p', weight: 'regular', variant: 'body_normal' }, { children: value || 'Empty' })), isEmailField && (jsx(VerifiedEmailIcon, { className: 'user-profile-field__verify-email-icon', overwriteTooltipProps: { as: 'div' } }))] }))] })));
 };
 
 export { UserProfileField };

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

@@ -20,14 +20,14 @@ var Tooltip = require('../../../../../Tooltip/Tooltip.cjs');
 var Typography = require('../../../../../Typography/Typography.cjs');
 
 const VerifiedEmailTooltip = (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_small', color: 'tooltip' }, { children: "This email is verified" })));
-const VerifiedEmailIcon = ({ className, }) => {
+const VerifiedEmailIcon = ({ className, overwriteTooltipProps, }) => {
     const { user } = useInternalDynamicContext.useInternalDynamicContext();
     if (!(user === null || user === void 0 ? void 0 : user.email))
         return null;
     const isVerified = user === null || user === void 0 ? void 0 : user.verifiedCredentials.some(({ email }) => email === user.email);
     if (!isVerified)
         return null;
-    return (jsxRuntime.jsx(Tooltip.Tooltip, Object.assign({ content: VerifiedEmailTooltip }, { children: jsxRuntime.jsx(checkCircle.ReactComponent, { className: classNames.classNames('dynamic-verified-email-icon', className) }) })));
+    return (jsxRuntime.jsx(Tooltip.Tooltip, Object.assign({ content: VerifiedEmailTooltip }, overwriteTooltipProps, { children: jsxRuntime.jsx(checkCircle.ReactComponent, { className: classNames.classNames('dynamic-verified-email-icon', className) }) })));
 };
 
 exports.VerifiedEmailIcon = VerifiedEmailIcon;

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

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

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

@@ -16,14 +16,14 @@ import { Tooltip } from '../../../../../Tooltip/Tooltip.js';
 import { Typography } from '../../../../../Typography/Typography.js';
 
 const VerifiedEmailTooltip = (jsx(Typography, Object.assign({ variant: 'numbers_small', color: 'tooltip' }, { children: "This email is verified" })));
-const VerifiedEmailIcon = ({ className, }) => {
+const VerifiedEmailIcon = ({ className, overwriteTooltipProps, }) => {
     const { user } = useInternalDynamicContext();
     if (!(user === null || user === void 0 ? void 0 : user.email))
         return null;
     const isVerified = user === null || user === void 0 ? void 0 : user.verifiedCredentials.some(({ email }) => email === user.email);
     if (!isVerified)
         return null;
-    return (jsx(Tooltip, Object.assign({ content: VerifiedEmailTooltip }, { children: jsx(SvgCheckCircle, { className: classNames('dynamic-verified-email-icon', className) }) })));
+    return (jsx(Tooltip, Object.assign({ content: VerifiedEmailTooltip }, overwriteTooltipProps, { children: jsx(SvgCheckCircle, { className: classNames('dynamic-verified-email-icon', className) }) })));
 };
 
 export { VerifiedEmailIcon };

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

@@ -103,7 +103,7 @@ const UserProfileSocialAccount = ({ provider, authorizationUrl, verifiedCredenti
                     weight: 'medium',
                 }, startSlot: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
-                jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'xsmall' }, { children: jsxRuntime.jsx(add.ReactComponent, {}) })) }, { children: "Connect" })))] })));
+                jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsxRuntime.jsx(add.ReactComponent, {}) })) }, { children: "Connect" })))] })));
 };
 
 exports.UserProfileSocialAccount = UserProfileSocialAccount;

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

@@ -99,7 +99,7 @@ const UserProfileSocialAccount = ({ provider, authorizationUrl, verifiedCredenti
                     weight: 'medium',
                 }, startSlot: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
-                jsx(Icon, Object.assign({ color: 'text-tertiary', size: 'xsmall' }, { children: jsx(SvgAdd, {}) })) }, { children: "Connect" })))] })));
+                jsx(Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsx(SvgAdd, {}) })) }, { children: "Connect" })))] })));
 };
 
 export { UserProfileSocialAccount };

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.cjs

@@ -83,6 +83,13 @@ const SocialRedirectContextProvider = ({ children, }) => {
     React.useEffect(() => {
         var _a, _b;
         if (!projectSettings || !socialWalletConnector || !sdkHasLoaded) {
+            // todo: we are competing with the useEffect in ViewContext.
+            // once that is cleaned up, we can remove this code
+            const params = new URLSearchParams(window.location.search);
+            if (params.has('magic_oauth_request_id')) {
+                setView('social-redirect-view');
+                setShowAuthFlow(true);
+            }
             return;
         }
         const params = new URLSearchParams(window.location.search);

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.js

@@ -79,6 +79,13 @@ const SocialRedirectContextProvider = ({ children, }) => {
     useEffect(() => {
         var _a, _b;
         if (!projectSettings || !socialWalletConnector || !sdkHasLoaded) {
+            // todo: we are competing with the useEffect in ViewContext.
+            // once that is cleaned up, we can remove this code
+            const params = new URLSearchParams(window.location.search);
+            if (params.has('magic_oauth_request_id')) {
+                setView('social-redirect-view');
+                setShowAuthFlow(true);
+            }
             return;
         }
         const params = new URLSearchParams(window.location.search);

package/src/lib/shared/assets/add.cjs

@@ -34,21 +34,20 @@ var SvgAdd = function SvgAdd(_ref) {
     titleId = _ref.titleId,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    width: 10,
-    height: 10,
-    viewBox: "0 0 10 10",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
   }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M5 1v4m0 0v4m0-4h4M5 5H1",
-    stroke: "currentColor",
-    strokeOpacity: 0.65,
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 2c.368 0 .667.298.667.667v4.666h4.666a.667.667 0 1 1 0 1.334H8.667v4.666a.667.667 0 1 1-1.334 0V8.667H2.667a.667.667 0 0 1 0-1.334h4.666V2.667C7.333 2.298 7.632 2 8 2Z",
+    fill: "currentColor",
+    fillOpacity: 0.4
   })));
 };
 

package/src/lib/shared/assets/add.js

@@ -10,21 +10,20 @@ var SvgAdd = function SvgAdd(_ref) {
     titleId = _ref.titleId,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 10,
-    height: 10,
-    viewBox: "0 0 10 10",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-labelledby": titleId
   }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
-    d: "M5 1v4m0 0v4m0-4h4M5 5H1",
-    stroke: "currentColor",
-    strokeOpacity: 0.65,
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 2c.368 0 .667.298.667.667v4.666h4.666a.667.667 0 1 1 0 1.334H8.667v4.666a.667.667 0 1 1-1.334 0V8.667H2.667a.667.667 0 0 1 0-1.334h4.666V2.667C7.333 2.298 7.632 2 8 2Z",
+    fill: "currentColor",
+    fillOpacity: 0.4
   })));
 };
 

package/src/lib/shared/utils/functions/shortenEmail/shortenEmail.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DEFAULT_BREAKPOINT = 12;
+const DEFAULT_CUT_END = 4;
+const DEFAULT_CUT_START = 4;
+const shortenString = (str, start, end) => str.replace(str.substring(start, end), '...');
+const shortenEmail = (email, options) => {
+    if (!email)
+        return '';
+    const breakpoint = (options === null || options === void 0 ? void 0 : options.breakpoint) || DEFAULT_BREAKPOINT;
+    const cutStart = (options === null || options === void 0 ? void 0 : options.cutStart) || DEFAULT_CUT_START;
+    const cutEnd = (options === null || options === void 0 ? void 0 : options.cutEnd) || DEFAULT_CUT_END;
+    let [username, domain] = email.split('@');
+    const shouldShortenUsername = (username === null || username === void 0 ? void 0 : username.length) > breakpoint;
+    if (shouldShortenUsername) {
+        username = shortenString(username, cutStart, username.length - cutEnd);
+    }
+    const shouldShortenDomain = (domain === null || domain === void 0 ? void 0 : domain.length) > breakpoint;
+    if (shouldShortenDomain) {
+        domain = shortenString(domain, cutStart, domain.length - cutEnd);
+    }
+    return `${username}@${domain}`;
+};
+
+exports.shortenEmail = shortenEmail;

package/src/lib/shared/utils/functions/shortenEmail/shortenEmail.d.ts

@@ -0,0 +1,6 @@
+export type ShortenEmailOptions = {
+    breakpoint?: number;
+    cutEnd?: number;
+    cutStart?: number;
+};
+export declare const shortenEmail: (email?: string, options?: ShortenEmailOptions) => string;

package/src/lib/shared/utils/functions/shortenEmail/shortenEmail.js

@@ -0,0 +1,23 @@
+const DEFAULT_BREAKPOINT = 12;
+const DEFAULT_CUT_END = 4;
+const DEFAULT_CUT_START = 4;
+const shortenString = (str, start, end) => str.replace(str.substring(start, end), '...');
+const shortenEmail = (email, options) => {
+    if (!email)
+        return '';
+    const breakpoint = (options === null || options === void 0 ? void 0 : options.breakpoint) || DEFAULT_BREAKPOINT;
+    const cutStart = (options === null || options === void 0 ? void 0 : options.cutStart) || DEFAULT_CUT_START;
+    const cutEnd = (options === null || options === void 0 ? void 0 : options.cutEnd) || DEFAULT_CUT_END;
+    let [username, domain] = email.split('@');
+    const shouldShortenUsername = (username === null || username === void 0 ? void 0 : username.length) > breakpoint;
+    if (shouldShortenUsername) {
+        username = shortenString(username, cutStart, username.length - cutEnd);
+    }
+    const shouldShortenDomain = (domain === null || domain === void 0 ? void 0 : domain.length) > breakpoint;
+    if (shouldShortenDomain) {
+        domain = shortenString(domain, cutStart, domain.length - cutEnd);
+    }
+    return `${username}@${domain}`;
+};
+
+export { shortenEmail };