@dynamic-labs/sdk-react-core 0.17.0-RC.29 → 0.17.0-RC.30

package/CHANGELOG.md

@@ -1,4 +1,12 @@
 
+## [0.17.0-RC.30](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.29...v0.17.0-RC.30) (2023-06-08)
+
+
+### Bug Fixes
+
+* **view-context:** refactor view context to have initial view ([#2268](https://github.com/dynamic-labs/DynamicAuth/issues/2268)) ([0afe6ae](https://github.com/dynamic-labs/DynamicAuth/commit/0afe6ae469f62fd16fd8471322f9295957f607f6))
+* **wcv2:** upgrade universal provider and refactor wcv2 ([#2163](https://github.com/dynamic-labs/DynamicAuth/issues/2163)) ([e69c67c](https://github.com/dynamic-labs/DynamicAuth/commit/e69c67c95dca0f694c4a554702be96c3f7d3d77e))
+
 ## [0.17.0-RC.29](https://github.com/dynamic-labs/DynamicAuth/compare/v0.17.0-RC.28...v0.17.0-RC.29) (2023-06-07)
 
 

package/package.cjs

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.17.0-RC.29";
+var version = "0.17.0-RC.30";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.19",
 	"@dynamic-labs/sdk-api": "0.0.198",
-	"@dynamic-labs/wallet-book": "0.0.18",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	yup: "0.32.11",

package/package.js

@@ -1,9 +1,8 @@
-var version = "0.17.0-RC.29";
+var version = "0.17.0-RC.30";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.19",
 	"@dynamic-labs/sdk-api": "0.0.198",
-	"@dynamic-labs/wallet-book": "0.0.18",
 	"@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.17.0-RC.29",
+  "version": "0.17.0-RC.30",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -10,19 +10,19 @@
     "react-focus-lock": "2.9.2",
     "@dynamic-labs/iconic": "0.1.19",
     "@dynamic-labs/sdk-api": "0.0.198",
-    "@dynamic-labs/wallet-book": "0.0.18",
     "@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.17.0-RC.29",
-    "@dynamic-labs/multi-wallet": "0.17.0-RC.29",
-    "@dynamic-labs/rpc-providers": "0.17.0-RC.29",
-    "@dynamic-labs/types": "0.17.0-RC.29",
-    "@dynamic-labs/utils": "0.17.0-RC.29",
-    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.29"
+    "@dynamic-labs/logger": "0.17.0-RC.30",
+    "@dynamic-labs/multi-wallet": "0.17.0-RC.30",
+    "@dynamic-labs/rpc-providers": "0.17.0-RC.30",
+    "@dynamic-labs/types": "0.17.0-RC.30",
+    "@dynamic-labs/utils": "0.17.0-RC.30",
+    "@dynamic-labs/wallet-book": "0.17.0-RC.30",
+    "@dynamic-labs/wallet-connector-core": "0.17.0-RC.30"
   },
   "devDependencies": {
     "semver": "7.3.8"

package/src/lib/Main.cjs

@@ -49,8 +49,8 @@ var viewToComponentMap = require('./views/viewToComponentMap.cjs');
 require('./main.global.cjs');
 
 const Main = () => {
-    const { selectedWalletConnector, appName, connectedWallets, isProjectSettingsLoading, projectSettings, privacyPolicyUrl, setShowAuthFlow, showAuthFlow, termsOfServiceUrl, newToWeb3WalletChainMap, wallets, clearStatesOnBackClick, user, loginWithEmail, } = useInternalDynamicContext.useInternalDynamicContext();
-    const { view, setView } = ViewContext.useViewContext();
+    const { selectedWalletConnector, appName, connectedWallets, isProjectSettingsLoading, projectSettings, privacyPolicyUrl, setShowAuthFlow, showAuthFlow, termsOfServiceUrl, newToWeb3WalletChainMap, wallets, clearStatesOnBackClick, user, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { view, goToInitialView } = ViewContext.useViewContext();
     const { setDeniedAddress, setDeniedOauthProvider } = AccessDeniedContext.useAccessDeniedContext();
     usePreventPageScroll.usePreventPageScroll(showAuthFlow);
     const handleClose = () => {
@@ -63,8 +63,8 @@ const Main = () => {
     // IMPORTANT: we need to reset the view because we reset state that the view depends on
     // so if the previous view renders when the user reopens the widget, it will crash
     () => {
-        setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
-    }, [setView, loginWithEmail]);
+        goToInitialView();
+    }, [goToInitialView]);
     useVerifyOnAwaitingSignature.useVerifyOnAwaitingSignature();
     const { handleAlreadyConnectedWallet, handleCustodialWalletClick, handleInstalledExtensionClick, handleMobileWalletClick, handleUninstalledClick, } = useWalletItemActions.useWalletItemActions();
     /* istanbul ignore next */

package/src/lib/Main.js

@@ -45,8 +45,8 @@ import { viewToComponentMap } from './views/viewToComponentMap.js';
 import './main.global.js';
 
 const Main = () => {
-    const { selectedWalletConnector, appName, connectedWallets, isProjectSettingsLoading, projectSettings, privacyPolicyUrl, setShowAuthFlow, showAuthFlow, termsOfServiceUrl, newToWeb3WalletChainMap, wallets, clearStatesOnBackClick, user, loginWithEmail, } = useInternalDynamicContext();
-    const { view, setView } = useViewContext();
+    const { selectedWalletConnector, appName, connectedWallets, isProjectSettingsLoading, projectSettings, privacyPolicyUrl, setShowAuthFlow, showAuthFlow, termsOfServiceUrl, newToWeb3WalletChainMap, wallets, clearStatesOnBackClick, user, } = useInternalDynamicContext();
+    const { view, goToInitialView } = useViewContext();
     const { setDeniedAddress, setDeniedOauthProvider } = useAccessDeniedContext();
     usePreventPageScroll(showAuthFlow);
     const handleClose = () => {
@@ -59,8 +59,8 @@ const Main = () => {
     // IMPORTANT: we need to reset the view because we reset state that the view depends on
     // so if the previous view renders when the user reopens the widget, it will crash
     () => {
-        setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
-    }, [setView, loginWithEmail]);
+        goToInitialView();
+    }, [goToInitialView]);
     useVerifyOnAwaitingSignature();
     const { handleAlreadyConnectedWallet, handleCustodialWalletClick, handleInstalledExtensionClick, handleMobileWalletClick, handleUninstalledClick, } = useWalletItemActions();
     /* istanbul ignore next */

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

@@ -78,6 +78,7 @@ var useCustomerAuthFlowCallbacks = require('./useCustomerCallbacks/useCustomerAu
 var useEmailLoginState = require('./hooks/useEmailLoginState/useEmailLoginState.cjs');
 var useDisplayOrderState = require('./hooks/useDisplayOrderState/useDisplayOrderState.cjs');
 var useNameService = require('./hooks/useNameService/useNameService.cjs');
+var useSetShowAuthFlowWithInit = require('./hooks/useSetShowAuthFlowWithInit/useSetShowAuthFlowWithInit.cjs');
 
 const EMPTY_INITIAL_USER = undefined;
 const DynamicContext = React.createContext(undefined);
@@ -151,6 +152,10 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         projectSettings,
         user,
     });
+    const setShowAuthFlowWithInit = useSetShowAuthFlowWithInit.useSetShowAuthFlowWithInit({
+        setShowAuthFlow,
+        wallets,
+    });
     const { getNameService, removeConnectedNameService } = useNameService.useNameService({
         authToken: (_d = getAuthToken.getAuthToken()) !== null && _d !== void 0 ? _d : onboardingOnlyJwt,
         currentWallet: primaryWallet !== null && primaryWallet !== void 0 ? primaryWallet : connectedWallet,
@@ -358,7 +363,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setSdkHasLoaded,
             setSelectedWalletConnector,
             setSelectedWalletWithAction,
-            setShowAuthFlow,
+            setShowAuthFlow: setShowAuthFlowWithInit,
             setShowDynamicUserProfile,
             setShowQrcodeModal,
             setShowWidgetStatePopup,
@@ -443,7 +448,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setPrimaryWallet,
         setPrimaryWalletId,
         setSdkHasLoaded,
-        setSelectedWalletWithAction,
+        setShowAuthFlowWithInit,
         setShowQrcodeModal,
         setUser,
         shadowDOMEnabled,
@@ -492,7 +497,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setShowDynamicUserProfile(true);
         }
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
-    return (jsxRuntime.jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, Object.assign({ customerTheme: parseTheme.parseTheme(theme, ((_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _e === void 0 ? void 0 : _e.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design }, { children: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsx(ViewContext.ViewContextProvider, Object.assign({ loginWithEmail: loginWithEmail }, { children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(ErrorContext.ErrorContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(FundingContext.FundingContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsxs(SendBalanceContext.SendBalanceContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), confirmationModal, children] }) }) }) }) }) }) }) }) })) }) })) })));
+    return (jsxRuntime.jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, Object.assign({ customerTheme: parseTheme.parseTheme(theme, ((_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _e === void 0 ? void 0 : _e.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design }, { children: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsx(ViewContext.ViewContextProvider, Object.assign({ initialView: loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list' }, { children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(ErrorContext.ErrorContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(FundingContext.FundingContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsxs(SendBalanceContext.SendBalanceContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), confirmationModal, children] }) }) }) }) }) }) }) }) })) }) })) })));
 };
 
 exports.DynamicContext = DynamicContext;

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

@@ -74,6 +74,7 @@ import { useCustomerAuthFlowCallbacks } from './useCustomerCallbacks/useCustomer
 import { useEmailLoginState } from './hooks/useEmailLoginState/useEmailLoginState.js';
 import { useDisplayOrderState } from './hooks/useDisplayOrderState/useDisplayOrderState.js';
 import { useNameService } from './hooks/useNameService/useNameService.js';
+import { useSetShowAuthFlowWithInit } from './hooks/useSetShowAuthFlowWithInit/useSetShowAuthFlowWithInit.js';
 
 const EMPTY_INITIAL_USER = undefined;
 const DynamicContext = createContext(undefined);
@@ -147,6 +148,10 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         projectSettings,
         user,
     });
+    const setShowAuthFlowWithInit = useSetShowAuthFlowWithInit({
+        setShowAuthFlow,
+        wallets,
+    });
     const { getNameService, removeConnectedNameService } = useNameService({
         authToken: (_d = getAuthToken()) !== null && _d !== void 0 ? _d : onboardingOnlyJwt,
         currentWallet: primaryWallet !== null && primaryWallet !== void 0 ? primaryWallet : connectedWallet,
@@ -354,7 +359,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setSdkHasLoaded,
             setSelectedWalletConnector,
             setSelectedWalletWithAction,
-            setShowAuthFlow,
+            setShowAuthFlow: setShowAuthFlowWithInit,
             setShowDynamicUserProfile,
             setShowQrcodeModal,
             setShowWidgetStatePopup,
@@ -439,7 +444,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setPrimaryWallet,
         setPrimaryWalletId,
         setSdkHasLoaded,
-        setSelectedWalletWithAction,
+        setShowAuthFlowWithInit,
         setShowQrcodeModal,
         setUser,
         shadowDOMEnabled,
@@ -488,7 +493,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setShowDynamicUserProfile(true);
         }
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
-    return (jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsx(ThemeContextProvider, Object.assign({ customerTheme: parseTheme(theme, ((_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _e === void 0 ? void 0 : _e.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design }, { children: jsx(LoadingContextProvider, { children: jsx(ViewContextProvider, Object.assign({ loginWithEmail: loginWithEmail }, { children: jsx(QrCodeContextProvider, { children: jsx(EmailVerificationContextProvider, { children: jsx(ErrorContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsx(CaptchaContextProvider, { children: jsx(FundingContextProvider, { children: jsx(AccessDeniedContextProvider, { children: jsxs(SendBalanceContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(Toolkit, {}), jsx(FundingWidget, {}), confirmationModal, children] }) }) }) }) }) }) }) }) })) }) })) })));
+    return (jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsx(ThemeContextProvider, Object.assign({ customerTheme: parseTheme(theme, ((_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _e === void 0 ? void 0 : _e.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design }, { children: jsx(LoadingContextProvider, { children: jsx(ViewContextProvider, Object.assign({ initialView: loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list' }, { children: jsx(QrCodeContextProvider, { children: jsx(EmailVerificationContextProvider, { children: jsx(ErrorContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsx(CaptchaContextProvider, { children: jsx(FundingContextProvider, { children: jsx(AccessDeniedContextProvider, { children: jsxs(SendBalanceContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(Toolkit, {}), jsx(FundingWidget, {}), confirmationModal, children] }) }) }) }) }) }) }) }) })) }) })) })));
 };
 
 export { DynamicContext, DynamicContextProvider };

package/src/lib/context/DynamicContext/hooks/useSetShowAuthFlowWithInit/index.d.ts

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

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * this hook wraps `setShowAuthFlow`. WalletConnect requires initialization
+ * before we can connect a wallet. The goal here is that when a user clicks
+ * on the "Connect your wallet" button, the SDK starts initializing WalletConnect
+ * and will prime it for connection. This way, when the user clicks on the
+ * "Connect" button in the WalletConnect modal, there is a uri ready to go
+ * to immediately trigger the deep link on mobile
+ */
+const useSetShowAuthFlowWithInit = ({ setShowAuthFlow, wallets, }) => {
+    const setShowAuthFlowWithInit = React.useCallback((value) => {
+        var _a;
+        if (value) {
+            (_a = wallets
+                .find((wallet) => wallet.walletConnector.key === 'walletconnect')) === null || _a === void 0 ? void 0 : _a.walletConnector.init();
+        }
+        setShowAuthFlow(value);
+    }, [setShowAuthFlow, wallets]);
+    return setShowAuthFlowWithInit;
+};
+
+exports.useSetShowAuthFlowWithInit = useSetShowAuthFlowWithInit;

package/src/lib/context/DynamicContext/hooks/useSetShowAuthFlowWithInit/useSetShowAuthFlowWithInit.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { WalletOption } from '../../../../shared';
+/**
+ * this hook wraps `setShowAuthFlow`. WalletConnect requires initialization
+ * before we can connect a wallet. The goal here is that when a user clicks
+ * on the "Connect your wallet" button, the SDK starts initializing WalletConnect
+ * and will prime it for connection. This way, when the user clicks on the
+ * "Connect" button in the WalletConnect modal, there is a uri ready to go
+ * to immediately trigger the deep link on mobile
+ */
+export declare const useSetShowAuthFlowWithInit: ({ setShowAuthFlow, wallets, }: {
+    setShowAuthFlow: Dispatch<SetStateAction<boolean>>;
+    wallets: WalletOption[];
+}) => Dispatch<SetStateAction<boolean>>;

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

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+
+/**
+ * this hook wraps `setShowAuthFlow`. WalletConnect requires initialization
+ * before we can connect a wallet. The goal here is that when a user clicks
+ * on the "Connect your wallet" button, the SDK starts initializing WalletConnect
+ * and will prime it for connection. This way, when the user clicks on the
+ * "Connect" button in the WalletConnect modal, there is a uri ready to go
+ * to immediately trigger the deep link on mobile
+ */
+const useSetShowAuthFlowWithInit = ({ setShowAuthFlow, wallets, }) => {
+    const setShowAuthFlowWithInit = useCallback((value) => {
+        var _a;
+        if (value) {
+            (_a = wallets
+                .find((wallet) => wallet.walletConnector.key === 'walletconnect')) === null || _a === void 0 ? void 0 : _a.walletConnector.init();
+        }
+        setShowAuthFlow(value);
+    }, [setShowAuthFlow, wallets]);
+    return setShowAuthFlowWithInit;
+};
+
+export { useSetShowAuthFlowWithInit };

package/src/lib/context/MockContext/MockContext.cjs

@@ -22,6 +22,7 @@ var index$1 = require('../../shared/consts/index.cjs');
 const MockContext = React.createContext(undefined);
 const MockContextProvider = ({ children, walletName, view, mockedWalletConnector, customerTheme, dynamicLayoutClassName, }) => {
     const viewContextValue = {
+        goToInitialView: () => { },
         /* istanbul ignore next */
         setView: () => { },
         view,

package/src/lib/context/MockContext/MockContext.js

@@ -18,6 +18,7 @@ import { defaultWalletsForChains } from '../../shared/consts/index.js';
 const MockContext = createContext(undefined);
 const MockContextProvider = ({ children, walletName, view, mockedWalletConnector, customerTheme, dynamicLayoutClassName, }) => {
     const viewContextValue = {
+        goToInitialView: () => { },
         /* istanbul ignore next */
         setView: () => { },
         view,

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

@@ -4,25 +4,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var usePrevious = require('../../utils/hooks/usePrevious/usePrevious.cjs');
 
 const ViewContext = React.createContext(undefined);
-const ViewContextProvider = ({ children, loginWithEmail, }) => {
-    const [view, setView] = React.useState(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
+const ViewContextProvider = ({ children, initialView = 'wallet-list' }) => {
+    const [view, setView] = React.useState(initialView);
+    const previousInitialView = usePrevious.usePrevious(initialView);
+    const goToInitialView = React.useCallback(() => {
+        setView(initialView);
+    }, [initialView]);
     React.useEffect(() => {
-        if (view !== 'wallet-list' && view !== 'login-with-email-or-wallet') {
+        if (!initialView)
             return;
-        }
-        if (loginWithEmail) {
-            setView('login-with-email-or-wallet');
-        }
-        else {
-            setView('wallet-list');
-        }
-    }, [loginWithEmail, view]);
+        const isInInitialView = view === previousInitialView || !previousInitialView;
+        if (!isInInitialView)
+            return;
+        setView((currentView) => {
+            const wasViewSetDuringRender = currentView !== previousInitialView;
+            if (wasViewSetDuringRender) {
+                return currentView;
+            }
+            return initialView;
+        });
+    }, [initialView, view]);
     const value = React.useMemo(() => ({
+        goToInitialView,
         setView,
         view,
-    }), [view]);
+    }), [view, goToInitialView]);
     return jsxRuntime.jsx(ViewContext.Provider, Object.assign({ value: value }, { children: children }));
 };
 const useViewContext = () => {

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

@@ -1,12 +1,14 @@
-import { ReactNode, SetStateAction, Dispatch } from 'react';
+import { SetStateAction, Dispatch, PropsWithChildren, FC } 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' | 'social-redirect-view' | 'social-wrong-account';
-export interface ViewContextProps {
+export type ViewContextProps = {
     setView: Dispatch<SetStateAction<ViewType>>;
     view: ViewType;
-}
+    goToInitialView: () => void;
+};
+type ViewContextProviderProps = {
+    initialView?: ViewType;
+};
 export declare const ViewContext: import("react").Context<ViewContextProps | undefined>;
-export declare const ViewContextProvider: ({ children, loginWithEmail, }: {
-    children: ReactNode;
-    loginWithEmail: boolean;
-}) => JSX.Element;
+export declare const ViewContextProvider: FC<PropsWithChildren<ViewContextProviderProps>>;
 export declare const useViewContext: () => ViewContextProps;
+export {};

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

@@ -1,24 +1,33 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useMemo, useContext } from 'react';
+import { createContext, useState, useCallback, useEffect, useMemo, useContext } from 'react';
+import { usePrevious } from '../../utils/hooks/usePrevious/usePrevious.js';
 
 const ViewContext = createContext(undefined);
-const ViewContextProvider = ({ children, loginWithEmail, }) => {
-    const [view, setView] = useState(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
+const ViewContextProvider = ({ children, initialView = 'wallet-list' }) => {
+    const [view, setView] = useState(initialView);
+    const previousInitialView = usePrevious(initialView);
+    const goToInitialView = useCallback(() => {
+        setView(initialView);
+    }, [initialView]);
     useEffect(() => {
-        if (view !== 'wallet-list' && view !== 'login-with-email-or-wallet') {
+        if (!initialView)
             return;
-        }
-        if (loginWithEmail) {
-            setView('login-with-email-or-wallet');
-        }
-        else {
-            setView('wallet-list');
-        }
-    }, [loginWithEmail, view]);
+        const isInInitialView = view === previousInitialView || !previousInitialView;
+        if (!isInInitialView)
+            return;
+        setView((currentView) => {
+            const wasViewSetDuringRender = currentView !== previousInitialView;
+            if (wasViewSetDuringRender) {
+                return currentView;
+            }
+            return initialView;
+        });
+    }, [initialView, view]);
     const value = useMemo(() => ({
+        goToInitialView,
         setView,
         view,
-    }), [view]);
+    }), [view, goToInitialView]);
     return jsx(ViewContext.Provider, Object.assign({ value: value }, { children: children }));
 };
 const useViewContext = () => {

package/src/lib/layout/DynamicAuthLayout/Header/header.cjs

@@ -44,21 +44,16 @@ require('yup');
 var QrCodeContext = require('../../../context/QrCodeContext/QrCodeContext.cjs');
 
 const Header = ({ onClose: handleClose, heading, projectSettings, }) => {
-    const { clearStatesOnBackClick, loginWithEmail, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
+    const { clearStatesOnBackClick, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { showQrCodeMessage, setShowQrCodeImage, showQrCodeImage } = QrCodeContext.useQrCodeContext();
-    const { view, setView } = ViewContext.useViewContext();
+    const { view, goToInitialView } = ViewContext.useViewContext();
     const handleBackClick = React.useCallback(() => {
-        setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
+        goToInitialView();
         // on back button click in Coinbase wallet clearing state would kill connection and refresh the page
         if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name) !== 'Coinbase') {
             clearStatesOnBackClick();
         }
-    }, [
-        clearStatesOnBackClick,
-        loginWithEmail,
-        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
-        setView,
-    ]);
+    }, [clearStatesOnBackClick, selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, goToInitialView]);
     const positionAbsolute = view === 'login-with-email-verification';
     const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
         view !== 'login-with-email-verification';

package/src/lib/layout/DynamicAuthLayout/Header/header.js

@@ -40,21 +40,16 @@ import 'yup';
 import { useQrCodeContext } from '../../../context/QrCodeContext/QrCodeContext.js';
 
 const Header = ({ onClose: handleClose, heading, projectSettings, }) => {
-    const { clearStatesOnBackClick, loginWithEmail, selectedWalletConnector } = useInternalDynamicContext();
+    const { clearStatesOnBackClick, selectedWalletConnector } = useInternalDynamicContext();
     const { showQrCodeMessage, setShowQrCodeImage, showQrCodeImage } = useQrCodeContext();
-    const { view, setView } = useViewContext();
+    const { view, goToInitialView } = useViewContext();
     const handleBackClick = useCallback(() => {
-        setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
+        goToInitialView();
         // on back button click in Coinbase wallet clearing state would kill connection and refresh the page
         if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name) !== 'Coinbase') {
             clearStatesOnBackClick();
         }
-    }, [
-        clearStatesOnBackClick,
-        loginWithEmail,
-        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
-        setView,
-    ]);
+    }, [clearStatesOnBackClick, selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, goToInitialView]);
     const positionAbsolute = view === 'login-with-email-verification';
     const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
         view !== 'login-with-email-verification';

package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.cjs

@@ -35,9 +35,9 @@ var AccessDeniedContext = require('../../../context/AccessDeniedContext/AccessDe
 // This logic is the best place to determine whether we should verify or verify and link.
 const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, }) => {
     const { setDeniedAddress, setDeniedOauthProvider } = AccessDeniedContext.useAccessDeniedContext();
-    const { setView } = ViewContext.useViewContext();
+    const { setView, goToInitialView } = ViewContext.useViewContext();
     const { setErrorMessage, setError } = ErrorContext.useErrorContext();
-    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, loginWithEmail, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, } = useInternalDynamicContext.useInternalDynamicContext();
     // If the user is not already logged it means that we only need to verify
     // We need this boolean for the part of the logic where we already persisted a new authToken,
     // and need to distinguish between logic for verify or linking.
@@ -118,7 +118,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
         if (connectedWallet && authMode === 'connect-only') {
             throw new utils.DynamicError(e.message);
         }
-        setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
+        goToInitialView();
         logger.logger.error(e);
         if (debugError) {
             setError(`${e.message}\n ${e.stack}`);

package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.js

@@ -31,9 +31,9 @@ import { useAccessDeniedContext } from '../../../context/AccessDeniedContext/Acc
 // This logic is the best place to determine whether we should verify or verify and link.
 const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, }) => {
     const { setDeniedAddress, setDeniedOauthProvider } = useAccessDeniedContext();
-    const { setView } = useViewContext();
+    const { setView, goToInitialView } = useViewContext();
     const { setErrorMessage, setError } = useErrorContext();
-    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, loginWithEmail, } = useInternalDynamicContext();
+    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, } = useInternalDynamicContext();
     // If the user is not already logged it means that we only need to verify
     // We need this boolean for the part of the logic where we already persisted a new authToken,
     // and need to distinguish between logic for verify or linking.
@@ -114,7 +114,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
         if (connectedWallet && authMode === 'connect-only') {
             throw new DynamicError(e.message);
         }
-        setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
+        goToInitialView();
         logger.error(e);
         if (debugError) {
             setError(`${e.message}\n ${e.stack}`);

package/src/lib/views/EmailVerification/EmailVerification.cjs

@@ -62,7 +62,7 @@ const EmailVerification = () => {
     const [retried, setRetried] = React.useState(false);
     const [isValidated, setIsValidated] = React.useState(false);
     const [showTransferMessage, setShowTransferMessage] = React.useState(false);
-    const { view, setView } = ViewContext.useViewContext();
+    const { view, setView, goToInitialView } = ViewContext.useViewContext();
     const { error, setError, setErrorMessage } = ErrorContext.useErrorContext();
     const { environmentId, onboardingOnlyJwt, handleLogOut, termsOfServiceUrl, privacyPolicyUrl, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
     const { email, verificationUUID, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
@@ -188,7 +188,7 @@ const EmailVerification = () => {
                 setHideRetryButton(true);
             }
             if (error.code === 'invalid_email_verification') {
-                setView(isLoginView ? 'login-with-email-or-wallet' : 'wallet-list');
+                goToInitialView();
             }
         }
         finally {

package/src/lib/views/EmailVerification/EmailVerification.js

@@ -58,7 +58,7 @@ const EmailVerification = () => {
     const [retried, setRetried] = useState(false);
     const [isValidated, setIsValidated] = useState(false);
     const [showTransferMessage, setShowTransferMessage] = useState(false);
-    const { view, setView } = useViewContext();
+    const { view, setView, goToInitialView } = useViewContext();
     const { error, setError, setErrorMessage } = useErrorContext();
     const { environmentId, onboardingOnlyJwt, handleLogOut, termsOfServiceUrl, privacyPolicyUrl, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext();
     const { email, verificationUUID, setVerificationUUID } = useEmailVerificationContext();
@@ -184,7 +184,7 @@ const EmailVerification = () => {
                 setHideRetryButton(true);
             }
             if (error.code === 'invalid_email_verification') {
-                setView(isLoginView ? 'login-with-email-or-wallet' : 'wallet-list');
+                goToInitialView();
             }
         }
         finally {

package/src/lib/views/NoAccess/NoAccess.cjs

@@ -48,9 +48,9 @@ var AuthProviderIcon = require('../../components/AuthProviderIcon/AuthProviderIc
 
 const NoAccess = () => {
     const { deniedAddress, setDeniedAddress, setDeniedOauthProvider } = AccessDeniedContext.useAccessDeniedContext();
-    const { loginWithEmail, selectedWalletConnector: walletConnector, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, notInTheListImageUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, onboardingOnlyJwt, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { selectedWalletConnector: walletConnector, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, notInTheListImageUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, onboardingOnlyJwt, } = useInternalDynamicContext.useInternalDynamicContext();
     const { email } = EmailVerificationContext.useEmailVerificationContext();
-    const { setView, view } = ViewContext.useViewContext();
+    const { goToInitialView, view } = ViewContext.useViewContext();
     const isChainalysisView = view === 'chainalysis-blocked-wallet';
     const _socialMediaLinkText = !isChainalysisView
         ? socialMediaLinkText
@@ -59,7 +59,7 @@ const NoAccess = () => {
         ? socialMediaUrl
         : 'https://docs.dynamic.xyz/docs';
     const handleChangeWallet = () => {
-        setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
+        goToInitialView();
         setDeniedAddress('');
         setDeniedOauthProvider(undefined);
         walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.endSession();

package/src/lib/views/NoAccess/NoAccess.js

@@ -44,9 +44,9 @@ import { AuthProviderIcon } from '../../components/AuthProviderIcon/AuthProvider
 
 const NoAccess = () => {
     const { deniedAddress, setDeniedAddress, setDeniedOauthProvider } = useAccessDeniedContext();
-    const { loginWithEmail, selectedWalletConnector: walletConnector, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, notInTheListImageUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, onboardingOnlyJwt, } = useInternalDynamicContext();
+    const { selectedWalletConnector: walletConnector, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, notInTheListImageUrl, accessDeniedMessagePrimary, accessDeniedMessageSecondary, onboardingOnlyJwt, } = useInternalDynamicContext();
     const { email } = useEmailVerificationContext();
-    const { setView, view } = useViewContext();
+    const { goToInitialView, view } = useViewContext();
     const isChainalysisView = view === 'chainalysis-blocked-wallet';
     const _socialMediaLinkText = !isChainalysisView
         ? socialMediaLinkText
@@ -55,7 +55,7 @@ const NoAccess = () => {
         ? socialMediaUrl
         : 'https://docs.dynamic.xyz/docs';
     const handleChangeWallet = () => {
-        setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
+        goToInitialView();
         setDeniedAddress('');
         setDeniedOauthProvider(undefined);
         walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.endSession();