@dynamic-labs/sdk-react-core 0.16.4 → 0.17.0-RC.1

package/src/lib/components/OverlayCard/index.d.ts

@@ -0,0 +1,2 @@
+export { OverlayCard } from './OverlayCard';
+export { OverlayCardTarget } from './OverlayCardTarget';

package/src/lib/components/Portal/Portal.cjs

@@ -8,10 +8,26 @@ var ReactFocusLock = require('react-focus-lock');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 var OpacityTransition = require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('react');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../config/ApiEndpoint.cjs');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+require('../../utils/constants/colors.cjs');
+require('../../shared/consts/index.cjs');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
 var useElementById = require('../../utils/hooks/useElementById/useElementById.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
-var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
 var useKeyboardEventListener = require('../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.cjs');
+require('../IconButton/IconButton.cjs');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/src/lib/components/Portal/Portal.js

@@ -4,10 +4,26 @@ import ReactFocusLock from 'react-focus-lock';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import { OpacityTransition } from '../Transition/OpacityTransition/OpacityTransition.js';
+import 'react';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../config/ApiEndpoint.js';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+import '../../utils/constants/colors.js';
+import '../../shared/consts/index.js';
+import '../../context/DynamicContext/DynamicContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
 import { useElementById } from '../../utils/hooks/useElementById/useElementById.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
-import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+import '../../context/ThemeContext/ThemeContext.js';
 import { useKeyboardEventListener } from '../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.js';
+import '../IconButton/IconButton.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 
 const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, whiteList, }) => {
     const { view } = useViewContext();

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../../config/ApiEndpoint.cjs');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('../../../utils/constants/colors.cjs');
+require('../../../shared/consts/index.cjs');
+require('../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../context/ErrorContext/ErrorContext.cjs');
+var useResizeObserver = require('../../../utils/hooks/useResizeObserver/useResizeObserver.cjs');
+var useTransition = require('../../../utils/hooks/useTransition/useTransition.cjs');
+require('react-dom');
+var classNames = require('../../../utils/functions/classNames/classNames.cjs');
+require('../../ShadowDOM/ShadowDOM.cjs');
+require('../../../context/ThemeContext/ThemeContext.cjs');
+require('react-focus-lock');
+require('../ZoomTransition/ZoomTransition.cjs');
+require('../SlideInUpTransition/SlideInUpTransition.cjs');
+require('../OpacityTransition/OpacityTransition.cjs');
+require('../../IconButton/IconButton.cjs');
+require('ethers');
+require('../../../context/MockContext/MockContext.cjs');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+
+const VerticalDrawerTransition = (_a) => {
+    var { style, children, className } = _a, props = _tslib.__rest(_a, ["style", "children", "className"]);
+    const containerRef = React.useRef(null);
+    const childRef = React.useRef(null);
+    const [childEntry] = useResizeObserver.useResizeObserver(childRef);
+    const containerChildHeight = React.useMemo(() => childEntry === null || childEntry === void 0 ? void 0 : childEntry.height, [childEntry]);
+    const { mount, stage, currentDuration } = useTransition.useTransition(Object.assign({ animateOnMount: false }, props));
+    const maxHeight = React.useMemo(() => {
+        if (!mount || stage === 'EXITING' || stage === 'UNMOUNT') {
+            return 0;
+        }
+        return containerChildHeight;
+    }, [stage, containerChildHeight, mount]);
+    return (jsxRuntime.jsx("div", Object.assign({ ref: containerRef, className: classNames.classNames(className, 'vertical-drawer-animation'), style: Object.assign(Object.assign({}, style), { maxHeight, transitionDuration: `${currentDuration}ms` }) }, { children: jsxRuntime.jsx("div", Object.assign({ ref: childRef }, { children: mount && children })) })));
+};
+
+exports.VerticalDrawerTransition = VerticalDrawerTransition;

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.d.ts

@@ -0,0 +1,4 @@
+import { VerticalDrawerTransitionComponent } from './VerticalDrawerTransition.types';
+export declare const IN_DURATION = 150;
+export declare const OUT_DURATION = 150;
+export declare const VerticalDrawerTransition: VerticalDrawerTransitionComponent;

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.js

@@ -0,0 +1,46 @@
+import { __rest } from '../../../../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo } from 'react';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../../config/ApiEndpoint.js';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../../context/ViewContext/ViewContext.js';
+import '../../../utils/constants/colors.js';
+import '../../../shared/consts/index.js';
+import '../../../context/DynamicContext/DynamicContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import { useResizeObserver } from '../../../utils/hooks/useResizeObserver/useResizeObserver.js';
+import { useTransition } from '../../../utils/hooks/useTransition/useTransition.js';
+import 'react-dom';
+import { classNames } from '../../../utils/functions/classNames/classNames.js';
+import '../../ShadowDOM/ShadowDOM.js';
+import '../../../context/ThemeContext/ThemeContext.js';
+import 'react-focus-lock';
+import '../ZoomTransition/ZoomTransition.js';
+import '../SlideInUpTransition/SlideInUpTransition.js';
+import '../OpacityTransition/OpacityTransition.js';
+import '../../IconButton/IconButton.js';
+import 'ethers';
+import '../../../context/MockContext/MockContext.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+
+const VerticalDrawerTransition = (_a) => {
+    var { style, children, className } = _a, props = __rest(_a, ["style", "children", "className"]);
+    const containerRef = useRef(null);
+    const childRef = useRef(null);
+    const [childEntry] = useResizeObserver(childRef);
+    const containerChildHeight = useMemo(() => childEntry === null || childEntry === void 0 ? void 0 : childEntry.height, [childEntry]);
+    const { mount, stage, currentDuration } = useTransition(Object.assign({ animateOnMount: false }, props));
+    const maxHeight = useMemo(() => {
+        if (!mount || stage === 'EXITING' || stage === 'UNMOUNT') {
+            return 0;
+        }
+        return containerChildHeight;
+    }, [stage, containerChildHeight, mount]);
+    return (jsx("div", Object.assign({ ref: containerRef, className: classNames(className, 'vertical-drawer-animation'), style: Object.assign(Object.assign({}, style), { maxHeight, transitionDuration: `${currentDuration}ms` }) }, { children: jsx("div", Object.assign({ ref: childRef }, { children: mount && children })) })));
+};
+
+export { VerticalDrawerTransition };

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.types.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties, FC } from 'react';
+import { TransitionProps } from '../transition.type';
+export type VerticalDrawerTransitionProps = {
+    style?: CSSProperties;
+} & TransitionProps;
+export type VerticalDrawerTransitionComponent = FC<VerticalDrawerTransitionProps>;

package/src/lib/components/Transition/VerticalDrawerTransition/index.d.ts

@@ -0,0 +1 @@
+export { VerticalDrawerTransition } from './VerticalDrawerTransition';

package/src/lib/components/Transition/index.d.ts

@@ -1,3 +1,4 @@
 export { ZoomTransition } from './ZoomTransition/ZoomTransition';
 export { SlideInUpTransition } from './SlideInUpTransition/SlideInUpTransition';
 export { OpacityTransition } from './OpacityTransition/OpacityTransition';
+export { VerticalDrawerTransition } from './VerticalDrawerTransition';

package/src/lib/components/Transition/transition.type.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PropsWithChildren } from 'react';
 export interface ITransitionOptions {
     className?: string;
     duration?: number;
@@ -9,6 +9,4 @@ export interface ITransitionOptions {
     outTimeout?: number;
     timeout?: number;
 }
-export type TransitionProps = ITransitionOptions & {
-    children: React.ReactNode;
-};
+export type TransitionProps = ITransitionOptions & PropsWithChildren;

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

@@ -32,3 +32,5 @@ export * from './PinField';
 export * from './IconWithStatus';
 export * from './ModalHeaderBanner';
 export * from './OTPVerificationView';
+export * from './IconListTile';
+export * from './Transition';

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

@@ -22,7 +22,6 @@ var useWalletConnectors = require('../../utils/hooks/useWalletConnectors/useWall
 var api = require('../../data/api.cjs');
 var getAuthToken = require('../../utils/functions/getAuthToken/getAuthToken.cjs');
 require('@dynamic-labs/sdk-api');
-var isSameWalletName = require('../../utils/functions/isSameWalletName/isSameWalletName.cjs');
 var ErrorContext = require('../ErrorContext/ErrorContext.cjs');
 require('react-dom');
 var useWalletUiUtils = require('../../utils/hooks/useWalletUiUtils/useWalletUiUtils.cjs');
@@ -42,6 +41,7 @@ var app = require('../../app.cjs');
 var useClearWalletConnectSessions = require('../../utils/hooks/useClearWalletConnectSessions/useClearWalletConnectSessions.cjs');
 var parseTheme = require('../../utils/functions/parseTheme/parseTheme.cjs');
 var useConnectWallet = require('../../utils/hooks/useConnectWallet/useConnectWallet.cjs');
+var isSameWalletName = require('../../utils/functions/isSameWalletName/isSameWalletName.cjs');
 var useRpcProviders = require('../../utils/hooks/useRpcProviders/useRpcProviders.cjs');
 var EmailVerificationContext = require('../EmailVerificationContext/EmailVerificationContext.cjs');
 var DynamicWidgetContext = require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
@@ -132,7 +132,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         clearOphanedWalletConnectSessions,
     ]);
     const handleLogOut = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d, _e, _f;
+        var _c, _d;
         clearAllWalletConnectSessions();
         const jwt = getAuthToken.getAuthToken();
         if (jwt && user) {
@@ -140,9 +140,9 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             api.revokeSession({ environmentId, sessionId: user.sessionId }, jwt);
         }
         for (const connector of walletConnectors) {
-            yield ((_c = connector.endSession) === null || _c === void 0 ? void 0 : _c.call(connector));
+            yield connector.endSession();
         }
-        (_e = (_d = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _d === void 0 ? void 0 : _d.endSession) === null || _e === void 0 ? void 0 : _e.call(_d);
+        (_c = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _c === void 0 ? void 0 : _c.endSession();
         setShowAuthFlow(false);
         setMultiWalletWidgetState('idle');
         removeAuthTokenAndUser();
@@ -151,7 +151,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setOnboardingOnlyJwt(undefined);
         removeConnectedInfo();
         clearWalletStates();
-        (_f = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _f === void 0 ? void 0 : _f.call(eventsCallbacks, user);
+        (_d = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _d === void 0 ? void 0 : _d.call(eventsCallbacks, user);
     }), [
         clearAllWalletConnectSessions,
         user,
@@ -210,7 +210,6 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         user,
     });
     const clearStatesOnBackClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _g;
         setDesktopUri('');
         setIsVerifying(false);
         if (!user) {
@@ -227,7 +226,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         if (selectedWalletConnector &&
             (!primaryWallet ||
                 !isSameWalletName.isSameWalletName(primaryWallet.connector.name, selectedWalletConnector.name))) {
-            yield ((_g = selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.endSession) === null || _g === void 0 ? void 0 : _g.call(selectedWalletConnector));
+            yield (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.endSession());
         }
     }), [
         user,

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

@@ -18,7 +18,6 @@ import { useWalletConnectors } from '../../utils/hooks/useWalletConnectors/useWa
 import { revokeSession } from '../../data/api.js';
 import { getAuthToken } from '../../utils/functions/getAuthToken/getAuthToken.js';
 import '@dynamic-labs/sdk-api';
-import { isSameWalletName } from '../../utils/functions/isSameWalletName/isSameWalletName.js';
 import { ErrorContextProvider } from '../ErrorContext/ErrorContext.js';
 import 'react-dom';
 import { useWalletUiUtils } from '../../utils/hooks/useWalletUiUtils/useWalletUiUtils.js';
@@ -38,6 +37,7 @@ import { DynamicAuthFlow } from '../../app.js';
 import { useClearWalletConnectSessions } from '../../utils/hooks/useClearWalletConnectSessions/useClearWalletConnectSessions.js';
 import { parseTheme } from '../../utils/functions/parseTheme/parseTheme.js';
 import { useConnectWallet } from '../../utils/hooks/useConnectWallet/useConnectWallet.js';
+import { isSameWalletName } from '../../utils/functions/isSameWalletName/isSameWalletName.js';
 import { useRpcProviders } from '../../utils/hooks/useRpcProviders/useRpcProviders.js';
 import { EmailVerificationContextProvider } from '../EmailVerificationContext/EmailVerificationContext.js';
 import { DynamicWidgetContextProvider } from '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
@@ -128,7 +128,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         clearOphanedWalletConnectSessions,
     ]);
     const handleLogOut = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d, _e, _f;
+        var _c, _d;
         clearAllWalletConnectSessions();
         const jwt = getAuthToken();
         if (jwt && user) {
@@ -136,9 +136,9 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             revokeSession({ environmentId, sessionId: user.sessionId }, jwt);
         }
         for (const connector of walletConnectors) {
-            yield ((_c = connector.endSession) === null || _c === void 0 ? void 0 : _c.call(connector));
+            yield connector.endSession();
         }
-        (_e = (_d = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _d === void 0 ? void 0 : _d.endSession) === null || _e === void 0 ? void 0 : _e.call(_d);
+        (_c = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _c === void 0 ? void 0 : _c.endSession();
         setShowAuthFlow(false);
         setMultiWalletWidgetState('idle');
         removeAuthTokenAndUser();
@@ -147,7 +147,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setOnboardingOnlyJwt(undefined);
         removeConnectedInfo();
         clearWalletStates();
-        (_f = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _f === void 0 ? void 0 : _f.call(eventsCallbacks, user);
+        (_d = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _d === void 0 ? void 0 : _d.call(eventsCallbacks, user);
     }), [
         clearAllWalletConnectSessions,
         user,
@@ -206,7 +206,6 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         user,
     });
     const clearStatesOnBackClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _g;
         setDesktopUri('');
         setIsVerifying(false);
         if (!user) {
@@ -223,7 +222,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         if (selectedWalletConnector &&
             (!primaryWallet ||
                 !isSameWalletName(primaryWallet.connector.name, selectedWalletConnector.name))) {
-            yield ((_g = selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.endSession) === null || _g === void 0 ? void 0 : _g.call(selectedWalletConnector));
+            yield (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.endSession());
         }
     }), [
         user,

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

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+var useInternalDynamicContext = require('../DynamicContext/useInternalDynamicContext.cjs');
+var ViewContext = require('../ViewContext/ViewContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../config/ApiEndpoint.cjs');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('../../utils/constants/colors.cjs');
+require('../../shared/consts/index.cjs');
+var useVerifyWallet = require('../../utils/hooks/useVerifyWallet/useVerifyWallet.cjs');
+require('react-dom');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../ThemeContext/ThemeContext.cjs');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../components/IconButton/IconButton.cjs');
+require('ethers');
+require('../MockContext/MockContext.cjs');
+require('../ErrorContext/ErrorContext.cjs');
+require('../CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+
+const SocialRedirectContext = React.createContext(undefined);
+const SocialRedirectContextProvider = ({ children, }) => {
+    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setView } = ViewContext.useViewContext();
+    const verifyWallet = useVerifyWallet.useVerifyWallet({
+        consumeNonce,
+        displayTermsOfService,
+        environmentId,
+        projectSettings,
+        setIsSingleWalletAccount,
+    });
+    const socialWalletConnector = wallets
+        .map(({ walletConnector }) => walletConnector)
+        .find(multiWallet.isSocialWalletConnector);
+    const [redirectStatus, setRedirectStatus] = React.useState('idle');
+    const [socialProvider, setSocialProvider] = React.useState();
+    React.useEffect(() => {
+        var _a;
+        if (!projectSettings) {
+            return;
+        }
+        if (!socialWalletConnector) {
+            return;
+        }
+        const params = new URLSearchParams(window.location.search);
+        if (params.has('magic_oauth_request_id')) {
+            const providerFromParams = params.get('provider');
+            setSocialProvider(providerFromParams);
+            setRedirectStatus('loading');
+            setView('social-redirect-view');
+            setShowAuthFlow(true);
+            setSelectedWalletConnector(socialWalletConnector);
+            (_a = socialWalletConnector
+                .getSession) === null || _a === void 0 ? void 0 : _a.call(socialWalletConnector).then(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                const address = yield socialWalletConnector.fetchPublicAddress();
+                if (!address) {
+                    return;
+                }
+                walletUiUtils.enableInternalSign();
+                yield verifyWallet({
+                    publicWalletAddress: address,
+                    walletConnector: socialWalletConnector,
+                });
+                setSocialProvider(undefined);
+                setRedirectStatus('success');
+            })).catch(() => {
+                setRedirectStatus('error');
+            });
+        }
+    }, [
+        projectSettings,
+        setSelectedWalletConnector,
+        setShowAuthFlow,
+        setView,
+        socialWalletConnector,
+        verifyWallet,
+        walletUiUtils,
+    ]);
+    return (jsxRuntime.jsx(SocialRedirectContext.Provider, Object.assign({ value: {
+            redirectStatus,
+            setSocialProvider,
+            socialProvider,
+            socialWalletConnector,
+        } }, { children: children })));
+};
+const useSocialRedirectContext = () => {
+    const context = React.useContext(SocialRedirectContext);
+    if (context === undefined) {
+        throw new Error('useSocialRedirectContext must be used within a SocialRedirectContextProvider');
+    }
+    return context;
+};
+
+exports.SocialRedirectContext = SocialRedirectContext;
+exports.SocialRedirectContextProvider = SocialRedirectContextProvider;
+exports.useSocialRedirectContext = useSocialRedirectContext;

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { SocialOAuthProvider } from '@dynamic-labs/multi-wallet';
+import { WalletConnector } from '../../..';
+type SocialRedirectStatus = 'idle' | 'loading' | 'success' | 'error';
+type SocialContextReturnType = {
+    redirectStatus: SocialRedirectStatus;
+    setSocialProvider: (val: SocialOAuthProvider) => void;
+    socialProvider: SocialOAuthProvider | undefined;
+    socialWalletConnector: WalletConnector | undefined;
+};
+export declare const SocialRedirectContext: import("react").Context<SocialContextReturnType | undefined>;
+export declare const SocialRedirectContextProvider: ({ children, }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useSocialRedirectContext: () => SocialContextReturnType;
+export {};

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

@@ -0,0 +1,101 @@
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect } from 'react';
+import { isSocialWalletConnector } from '@dynamic-labs/multi-wallet';
+import { useInternalDynamicContext } from '../DynamicContext/useInternalDynamicContext.js';
+import { useViewContext } from '../ViewContext/ViewContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../config/ApiEndpoint.js';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../utils/constants/colors.js';
+import '../../shared/consts/index.js';
+import { useVerifyWallet } from '../../utils/hooks/useVerifyWallet/useVerifyWallet.js';
+import 'react-dom';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../ThemeContext/ThemeContext.js';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../components/IconButton/IconButton.js';
+import 'ethers';
+import '../MockContext/MockContext.js';
+import '../ErrorContext/ErrorContext.js';
+import '../CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+
+const SocialRedirectContext = createContext(undefined);
+const SocialRedirectContextProvider = ({ children, }) => {
+    const { setShowAuthFlow, wallets, setSelectedWalletConnector, walletUiUtils, consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, } = useInternalDynamicContext();
+    const { setView } = useViewContext();
+    const verifyWallet = useVerifyWallet({
+        consumeNonce,
+        displayTermsOfService,
+        environmentId,
+        projectSettings,
+        setIsSingleWalletAccount,
+    });
+    const socialWalletConnector = wallets
+        .map(({ walletConnector }) => walletConnector)
+        .find(isSocialWalletConnector);
+    const [redirectStatus, setRedirectStatus] = useState('idle');
+    const [socialProvider, setSocialProvider] = useState();
+    useEffect(() => {
+        var _a;
+        if (!projectSettings) {
+            return;
+        }
+        if (!socialWalletConnector) {
+            return;
+        }
+        const params = new URLSearchParams(window.location.search);
+        if (params.has('magic_oauth_request_id')) {
+            const providerFromParams = params.get('provider');
+            setSocialProvider(providerFromParams);
+            setRedirectStatus('loading');
+            setView('social-redirect-view');
+            setShowAuthFlow(true);
+            setSelectedWalletConnector(socialWalletConnector);
+            (_a = socialWalletConnector
+                .getSession) === null || _a === void 0 ? void 0 : _a.call(socialWalletConnector).then(() => __awaiter(void 0, void 0, void 0, function* () {
+                const address = yield socialWalletConnector.fetchPublicAddress();
+                if (!address) {
+                    return;
+                }
+                walletUiUtils.enableInternalSign();
+                yield verifyWallet({
+                    publicWalletAddress: address,
+                    walletConnector: socialWalletConnector,
+                });
+                setSocialProvider(undefined);
+                setRedirectStatus('success');
+            })).catch(() => {
+                setRedirectStatus('error');
+            });
+        }
+    }, [
+        projectSettings,
+        setSelectedWalletConnector,
+        setShowAuthFlow,
+        setView,
+        socialWalletConnector,
+        verifyWallet,
+        walletUiUtils,
+    ]);
+    return (jsx(SocialRedirectContext.Provider, Object.assign({ value: {
+            redirectStatus,
+            setSocialProvider,
+            socialProvider,
+            socialWalletConnector,
+        } }, { children: children })));
+};
+const useSocialRedirectContext = () => {
+    const context = useContext(SocialRedirectContext);
+    if (context === undefined) {
+        throw new Error('useSocialRedirectContext must be used within a SocialRedirectContextProvider');
+    }
+    return context;
+};
+
+export { SocialRedirectContext, SocialRedirectContextProvider, useSocialRedirectContext };

package/src/lib/context/SocialRedirectContext/index.d.ts

@@ -0,0 +1 @@
+export * from './SocialRedirectContext';

package/src/lib/context/ViewContext/ViewContext.cjs

@@ -9,13 +9,16 @@ const ViewContext = React.createContext(undefined);
 const ViewContextProvider = ({ children, loginWithEmail, }) => {
     const [view, setView] = React.useState(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
     React.useEffect(() => {
+        if (view !== 'wallet-list' && view !== 'login-with-email-or-wallet') {
+            return;
+        }
         if (loginWithEmail) {
             setView('login-with-email-or-wallet');
         }
         else {
             setView('wallet-list');
         }
-    }, [loginWithEmail]);
+    }, [loginWithEmail, view]);
     const value = React.useMemo(() => ({
         setView,
         view,

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

@@ -1,5 +1,5 @@
 import { ReactNode, SetStateAction, Dispatch } from 'react';
-export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'wallet-sign' | 'wallet-used' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view';
+export type ViewType = 'captcha' | 'chainalysis-blocked-wallet' | 'collect-user-data' | 'collect-user-data-login-with-email' | 'login-with-email-or-wallet-full-wallet-list' | 'login-with-email-or-wallet' | 'login-with-email-verification' | 'network-not-supported' | 'network-not-supported-manual' | 'no-access' | 'no-qr-not-installed' | 'pending-connect' | 'pending-signature-without-back-button' | 'pending-signature' | 'qr-code' | 'update-email' | 'verify-email' | 'wallet-connect-mobile-wallets-list' | 'wallet-list' | 'wallet-sign' | 'wallet-used' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view';
 export interface ViewContextProps {
     setView: Dispatch<SetStateAction<ViewType>>;
     view: ViewType;

package/src/lib/context/ViewContext/ViewContext.js

@@ -5,13 +5,16 @@ const ViewContext = createContext(undefined);
 const ViewContextProvider = ({ children, loginWithEmail, }) => {
     const [view, setView] = useState(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
     useEffect(() => {
+        if (view !== 'wallet-list' && view !== 'login-with-email-or-wallet') {
+            return;
+        }
         if (loginWithEmail) {
             setView('login-with-email-or-wallet');
         }
         else {
             setView('wallet-list');
         }
-    }, [loginWithEmail]);
+    }, [loginWithEmail, view]);
     const value = useMemo(() => ({
         setView,
         view,