@dynamic-labs/sdk-react-core 0.19.0-alpha.4 → 0.19.0-alpha.5

package/CHANGELOG.md

@@ -1,4 +1,11 @@
 
+## [0.19.0-alpha.5](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.4...v0.19.0-alpha.5) (2023-08-24)
+
+
+### Bug Fixes
+
+* send wagmi settings only once when DynamicWagmiConnector loads ([#3103](https://github.com/dynamic-labs/DynamicAuth/issues/3103)) ([8bba505](https://github.com/dynamic-labs/DynamicAuth/commit/8bba505f84f6f3567743397a3f1274a3840a7700))
+
 ## [0.19.0-alpha.4](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.3...v0.19.0-alpha.4) (2023-08-23)
 
 

package/package.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.19.0-alpha.4";
+var version = "0.19.0-alpha.5";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.27",
-	"@dynamic-labs/sdk-api": "0.0.263",
+	"@dynamic-labs/sdk-api": "0.0.267",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	yup: "0.32.11",

package/package.js

@@ -1,8 +1,8 @@
-var version = "0.19.0-alpha.4";
+var version = "0.19.0-alpha.5";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.27",
-	"@dynamic-labs/sdk-api": "0.0.263",
+	"@dynamic-labs/sdk-api": "0.0.267",
 	"@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.19.0-alpha.4",
+  "version": "0.19.0-alpha.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -9,20 +9,20 @@
   "dependencies": {
     "react-focus-lock": "2.9.2",
     "@dynamic-labs/iconic": "0.1.27",
-    "@dynamic-labs/sdk-api": "0.0.263",
+    "@dynamic-labs/sdk-api": "0.0.267",
     "@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.19.0-alpha.4",
-    "@dynamic-labs/multi-wallet": "0.19.0-alpha.4",
-    "@dynamic-labs/rpc-providers": "0.19.0-alpha.4",
-    "@dynamic-labs/types": "0.19.0-alpha.4",
-    "@dynamic-labs/utils": "0.19.0-alpha.4",
-    "@dynamic-labs/wallet-book": "0.19.0-alpha.4",
-    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.4",
+    "@dynamic-labs/logger": "0.19.0-alpha.5",
+    "@dynamic-labs/multi-wallet": "0.19.0-alpha.5",
+    "@dynamic-labs/rpc-providers": "0.19.0-alpha.5",
+    "@dynamic-labs/types": "0.19.0-alpha.5",
+    "@dynamic-labs/utils": "0.19.0-alpha.5",
+    "@dynamic-labs/wallet-book": "0.19.0-alpha.5",
+    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.5",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/components/DynamicConnectButton/DynamicConnectButton.cjs

@@ -10,28 +10,16 @@ var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var ConnectButton = require('./components/ConnectButton.cjs');
 
 const DynamicConnectButton = ({ buttonContainerClassName = '', buttonClassName = '', children, }) => {
-    const { isProjectSettingsLoading, setShowAuthFlow, setSelectedWalletConnector, loginWithEmail, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { isProjectSettingsLoading, setShowAuthFlow, setSelectedWalletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const [didUserClick, setUserClicked] = React.useState(false);
     const handleOnClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (!didUserClick) {
             setUserClicked(true);
         }
-        if (loginWithEmail) {
-            setView('login-with-email-or-wallet');
-        }
-        else {
-            setView('wallet-list');
-        }
         setSelectedWalletConnector(null);
         setShowAuthFlow(true);
-    }), [
-        didUserClick,
-        loginWithEmail,
-        setSelectedWalletConnector,
-        setShowAuthFlow,
-        setView,
-    ]);
+    }), [didUserClick, setSelectedWalletConnector, setShowAuthFlow, setView]);
     return (jsxRuntime.jsx(ConnectButton.ConnectButton, Object.assign({ isLoading: isProjectSettingsLoading, isActive: didUserClick, onClick: handleOnClick, buttonContainerClassName: buttonContainerClassName, buttonClassName: buttonClassName }, { children: children })));
 };
 

package/src/lib/components/DynamicConnectButton/DynamicConnectButton.js

@@ -6,28 +6,16 @@ import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { ConnectButton } from './components/ConnectButton.js';
 
 const DynamicConnectButton = ({ buttonContainerClassName = '', buttonClassName = '', children, }) => {
-    const { isProjectSettingsLoading, setShowAuthFlow, setSelectedWalletConnector, loginWithEmail, } = useInternalDynamicContext();
+    const { isProjectSettingsLoading, setShowAuthFlow, setSelectedWalletConnector, } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const [didUserClick, setUserClicked] = useState(false);
     const handleOnClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (!didUserClick) {
             setUserClicked(true);
         }
-        if (loginWithEmail) {
-            setView('login-with-email-or-wallet');
-        }
-        else {
-            setView('wallet-list');
-        }
         setSelectedWalletConnector(null);
         setShowAuthFlow(true);
-    }), [
-        didUserClick,
-        loginWithEmail,
-        setSelectedWalletConnector,
-        setShowAuthFlow,
-        setView,
-    ]);
+    }), [didUserClick, setSelectedWalletConnector, setShowAuthFlow, setView]);
     return (jsx(ConnectButton, Object.assign({ isLoading: isProjectSettingsLoading, isActive: didUserClick, onClick: handleOnClick, buttonContainerClassName: buttonContainerClassName, buttonClassName: buttonClassName }, { children: children })));
 };
 

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

@@ -691,9 +691,9 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
     return (jsxRuntime.jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsxRuntime.jsx(walletBook.WalletBookContextProvider, Object.assign({ walletBook: walletBook$1 }, { children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, Object.assign({ customerTheme: parseTheme.parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.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: helpers.getInitialView({
                             connectedWallets,
+                            isAuthenticated,
                             isBridgeFlow,
                             isFullyConnected,
-                            loginWithEmail,
                         }) }, { children: jsxRuntime.jsx(AccountExistsContext.AccountExistsContextProvider, { children: jsxRuntime.jsx(WalletContext.WalletContextProvider, Object.assign({ canSync: didConnectedStateLoad }, { children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(ErrorContext.ErrorContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(DynamicBridgeWidgetContext.DynamicBridgeWidgetContextProvider, { children: jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(FundingContext.FundingContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsx(SendBalanceContext.SendBalanceContextProvider, { children: jsxRuntime.jsx(WalletGroupContext.WalletGroupContextProvider, { children: jsxRuntime.jsxs(UserFieldEditorContext.UserFieldEditorContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), jsxRuntime.jsx(OAuthIFrameContainer.OAuthIFrameContainer, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) })) }) })) }) })) })) })));
 };
 

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

@@ -687,9 +687,9 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
     return (jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsx(WalletBookContextProvider, Object.assign({ walletBook: walletBook }, { children: jsx(ThemeContextProvider, Object.assign({ customerTheme: parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design }, { children: jsx(LoadingContextProvider, { children: jsx(ViewContextProvider, Object.assign({ initialView: getInitialView({
                             connectedWallets,
+                            isAuthenticated,
                             isBridgeFlow,
                             isFullyConnected,
-                            loginWithEmail,
                         }) }, { children: jsx(AccountExistsContextProvider, { children: jsx(WalletContextProvider, Object.assign({ canSync: didConnectedStateLoad }, { children: jsx(QrCodeContextProvider, { children: jsx(EmailVerificationContextProvider, { children: jsx(ErrorContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsx(DynamicBridgeWidgetContextProvider, { children: jsx(CaptchaContextProvider, { children: jsx(FundingContextProvider, { children: jsx(AccessDeniedContextProvider, { children: jsx(SendBalanceContextProvider, { children: jsx(WalletGroupContextProvider, { children: jsxs(UserFieldEditorContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(Toolkit, {}), jsx(FundingWidget, {}), jsx(OAuthIFrameContainer, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) })) }) })) }) })) })) })));
 };
 

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

@@ -54,17 +54,16 @@ const initExpirationTime = (logout) => {
     const expiryTimeout = Math.min(expirationTimeInMs, 2147483647);
     logoutTimer = setTimeout(logout, expiryTimeout);
 };
-const getInitialView = ({ connectedWallets, loginWithEmail, isBridgeFlow, isFullyConnected, }) => {
-    if (loginWithEmail) {
-        return 'login-with-email-or-wallet';
-    }
-    if (isFullyConnected) {
+const getInitialView = ({ connectedWallets, isBridgeFlow, isFullyConnected, isAuthenticated, }) => {
+    // when multiwallet enabled, and user wants to link wallet
+    // show wallet-list view
+    if (isFullyConnected || isAuthenticated) {
         return 'wallet-list';
     }
     if (isBridgeFlow && !connectedWallets.length) {
         return 'bridge-welcome';
     }
-    return 'wallet-list';
+    return 'login-with-email-or-wallet';
 };
 
 exports.getInitialView = getInitialView;

package/src/lib/context/DynamicContext/helpers.d.ts

@@ -2,9 +2,9 @@ import { Wallet } from '../../shared';
 import { ViewType } from '../ViewContext';
 export declare const isAuthTokenExpired: (token: string) => boolean;
 export declare const initExpirationTime: (logout: VoidFunction) => void;
-export declare const getInitialView: ({ connectedWallets, loginWithEmail, isBridgeFlow, isFullyConnected, }: {
+export declare const getInitialView: ({ connectedWallets, isBridgeFlow, isFullyConnected, isAuthenticated, }: {
     connectedWallets: Wallet[];
-    loginWithEmail: boolean;
     isBridgeFlow: boolean;
+    isAuthenticated: boolean;
     isFullyConnected: boolean;
 }) => ViewType;

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

@@ -50,17 +50,16 @@ const initExpirationTime = (logout) => {
     const expiryTimeout = Math.min(expirationTimeInMs, 2147483647);
     logoutTimer = setTimeout(logout, expiryTimeout);
 };
-const getInitialView = ({ connectedWallets, loginWithEmail, isBridgeFlow, isFullyConnected, }) => {
-    if (loginWithEmail) {
-        return 'login-with-email-or-wallet';
-    }
-    if (isFullyConnected) {
+const getInitialView = ({ connectedWallets, isBridgeFlow, isFullyConnected, isAuthenticated, }) => {
+    // when multiwallet enabled, and user wants to link wallet
+    // show wallet-list view
+    if (isFullyConnected || isAuthenticated) {
         return 'wallet-list';
     }
     if (isBridgeFlow && !connectedWallets.length) {
         return 'bridge-welcome';
     }
-    return 'wallet-list';
+    return 'login-with-email-or-wallet';
 };
 
 export { getInitialView, initExpirationTime, isAuthTokenExpired };

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

@@ -1,5 +1,5 @@
 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' | 'wallet-group' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view' | 'wallet-locked-view' | 'social-wrong-account' | 'gate-blocked-wallet' | 'bridge-welcome' | 'bridge-summary' | 'bridge-next-wallet-connection' | 'account-exists' | 'merge-user-accounts' | 'wallet-cannot-be-transferred';
+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-wallet-only' | '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' | 'wallet-group' | 'wait-for-email-confirmation-view' | 'email-wallet-otp-verification-view' | 'social-redirect-view' | 'wallet-locked-view' | 'social-wrong-account' | 'gate-blocked-wallet' | 'bridge-welcome' | 'bridge-summary' | 'bridge-next-wallet-connection' | 'account-exists' | 'merge-user-accounts' | 'wallet-cannot-be-transferred';
 export type ViewContextProps = {
     setView: Dispatch<SetStateAction<ViewType>>;
     view: ViewType;

package/src/lib/layout/DynamicAuthLayout/HelpContent/HelpContent.cjs

@@ -17,7 +17,8 @@ const HelpContentSwitch = () => {
     const { projectSettings, newToWeb3WalletChainMap, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const isWalletListTypeView = React.useMemo(() => view === 'wallet-connect-mobile-wallets-list' ||
         view === 'wallet-list' ||
-        view === 'login-with-email-or-wallet-full-wallet-list', [view]);
+        view === 'login-with-email-or-wallet-full-wallet-list' ||
+        view === 'login-with-wallet-only', [view]);
     const isPendingSignatureTypeView = React.useMemo(() => view === 'pending-signature-without-back-button' ||
         view === 'pending-signature', [view]);
     const isPendingConnectTypeView = React.useMemo(() => view === 'pending-connect' || view === 'qr-code', [view]);

package/src/lib/layout/DynamicAuthLayout/HelpContent/HelpContent.js

@@ -13,7 +13,8 @@ const HelpContentSwitch = () => {
     const { projectSettings, newToWeb3WalletChainMap, selectedWalletConnector } = useInternalDynamicContext();
     const isWalletListTypeView = useMemo(() => view === 'wallet-connect-mobile-wallets-list' ||
         view === 'wallet-list' ||
-        view === 'login-with-email-or-wallet-full-wallet-list', [view]);
+        view === 'login-with-email-or-wallet-full-wallet-list' ||
+        view === 'login-with-wallet-only', [view]);
     const isPendingSignatureTypeView = useMemo(() => view === 'pending-signature-without-back-button' ||
         view === 'pending-signature', [view]);
     const isPendingConnectTypeView = useMemo(() => view === 'pending-connect' || view === 'qr-code', [view]);

package/src/lib/utils/functions/getDynamicLayoutData/getDynamicLayoutData.cjs

@@ -16,6 +16,9 @@ const getDynamicLayoutData = ({ view }) => {
         'login-with-email-or-wallet-full-wallet-list': {
             heading: 'Get your first wallet',
         },
+        'login-with-wallet-only': {
+            heading: 'Get your first wallet',
+        },
         'pending-connect': {
             heading: 'Connecting a wallet',
         },
@@ -44,6 +47,9 @@ const getDynamicLayoutData = ({ view }) => {
         'login-with-email-or-wallet-full-wallet-list': {
             heading: 'Select your wallet',
         },
+        'login-with-wallet-only': {
+            heading: 'Select your wallet',
+        },
         'wallet-connect-mobile-wallets-list': {
             heading: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(iconic.WalletConnectIcon, { style: { height: '1.5rem', width: '1.5rem' } }), ' ', "WalletConnect wallets"] })),
         },

package/src/lib/utils/functions/getDynamicLayoutData/getDynamicLayoutData.js

@@ -12,6 +12,9 @@ const getDynamicLayoutData = ({ view }) => {
         'login-with-email-or-wallet-full-wallet-list': {
             heading: 'Get your first wallet',
         },
+        'login-with-wallet-only': {
+            heading: 'Get your first wallet',
+        },
         'pending-connect': {
             heading: 'Connecting a wallet',
         },
@@ -40,6 +43,9 @@ const getDynamicLayoutData = ({ view }) => {
         'login-with-email-or-wallet-full-wallet-list': {
             heading: 'Select your wallet',
         },
+        'login-with-wallet-only': {
+            heading: 'Select your wallet',
+        },
         'wallet-connect-mobile-wallets-list': {
             heading: (jsxs(Fragment, { children: [jsx(WalletConnectIcon, { style: { height: '1.5rem', width: '1.5rem' } }), ' ', "WalletConnect wallets"] })),
         },

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

@@ -17,7 +17,8 @@ const useAuthLayoutChecks = (walletConnector) => {
     const { helpHeaderData } = getDynamicLayoutData.getDynamicLayoutData({ view });
     const isWalletListTypeView = view === 'wallet-connect-mobile-wallets-list' ||
         view === 'wallet-list' ||
-        view === 'login-with-email-or-wallet-full-wallet-list';
+        view === 'login-with-email-or-wallet-full-wallet-list' ||
+        view === 'login-with-wallet-only';
     const showHelpContent = Boolean(helpHeaderData &&
         // Notice the negation here
         !((view === 'qr-code' && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaQrCode)) ||
@@ -51,13 +52,14 @@ const useAuthLayoutChecks = (walletConnector) => {
     const showToSFooter = Boolean(!isUserLinkingWallet.isUserLinkingWallet(user, view, mockedSDK) &&
         (view === 'wallet-list' ||
             view === 'wallet-connect-mobile-wallets-list' ||
-            // Don't show empty footer on login-with-email-or-wallet-full-wallet-list
-            (view === 'login-with-email-or-wallet' &&
+            // Don't show empty footer during the login
+            ((view === 'login-with-email-or-wallet' ||
+                view === 'login-with-email-or-wallet-full-wallet-list' ||
+                view === 'login-with-wallet-only') &&
                 (termsOfServiceUrl ||
                     privacyPolicyUrl ||
                     customPrivacyPolicy ||
-                    customTermsOfServices)) ||
-            view === 'login-with-email-or-wallet-full-wallet-list'));
+                    customTermsOfServices))));
     const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
         view !== 'login-with-email-verification';
     const showBackButton = view === 'qr-code' ||

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

@@ -13,7 +13,8 @@ const useAuthLayoutChecks = (walletConnector) => {
     const { helpHeaderData } = getDynamicLayoutData({ view });
     const isWalletListTypeView = view === 'wallet-connect-mobile-wallets-list' ||
         view === 'wallet-list' ||
-        view === 'login-with-email-or-wallet-full-wallet-list';
+        view === 'login-with-email-or-wallet-full-wallet-list' ||
+        view === 'login-with-wallet-only';
     const showHelpContent = Boolean(helpHeaderData &&
         // Notice the negation here
         !((view === 'qr-code' && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaQrCode)) ||
@@ -47,13 +48,14 @@ const useAuthLayoutChecks = (walletConnector) => {
     const showToSFooter = Boolean(!isUserLinkingWallet(user, view, mockedSDK) &&
         (view === 'wallet-list' ||
             view === 'wallet-connect-mobile-wallets-list' ||
-            // Don't show empty footer on login-with-email-or-wallet-full-wallet-list
-            (view === 'login-with-email-or-wallet' &&
+            // Don't show empty footer during the login
+            ((view === 'login-with-email-or-wallet' ||
+                view === 'login-with-email-or-wallet-full-wallet-list' ||
+                view === 'login-with-wallet-only') &&
                 (termsOfServiceUrl ||
                     privacyPolicyUrl ||
                     customPrivacyPolicy ||
-                    customTermsOfServices)) ||
-            view === 'login-with-email-or-wallet-full-wallet-list'));
+                    customTermsOfServices))));
     const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
         view !== 'login-with-email-verification';
     const showBackButton = view === 'qr-code' ||

package/src/lib/views/AccountExistsView/AccountExistsView.cjs

@@ -53,7 +53,7 @@ require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var capitalize = require('../../shared/utils/functions/capitalize/capitalize.cjs');
 var SocialRedirectContext = require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
-var LoginWithEmailForm = require('../LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.cjs');
+var LoginEmailForm = require('../LoginView/components/EmailSignIn/LoginEmailForm.cjs');
 
 const AccountExistsView = () => {
     const { existentAccountData } = AccountExistsContext.useAccountExistsContext();
@@ -71,7 +71,7 @@ const AccountExistsView = () => {
             : '. Please log in with your email.';
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["It looks like an account already exists using ", jsxRuntime.jsx("strong", { children: email }), '', messageTrail] }));
     };
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'account-exists__image' }), jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize.capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsxRuntime.jsx(LoginWithEmailForm.LoginWithEmailForm, { currentEmail: email }))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'account-exists__image' }), jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize.capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { isLoading: false, currentEmail: email }))] }))] })));
 };
 
 exports.AccountExistsView = AccountExistsView;

package/src/lib/views/AccountExistsView/AccountExistsView.js

@@ -49,7 +49,7 @@ import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import { capitalize } from '../../shared/utils/functions/capitalize/capitalize.js';
 import { useSocialRedirectContext } from '../../context/SocialRedirectContext/SocialRedirectContext.js';
-import { LoginWithEmailForm } from '../LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.js';
+import { LoginEmailForm } from '../LoginView/components/EmailSignIn/LoginEmailForm.js';
 
 const AccountExistsView = () => {
     const { existentAccountData } = useAccountExistsContext();
@@ -67,7 +67,7 @@ const AccountExistsView = () => {
             : '. Please log in with your email.';
         return (jsxs(Fragment, { children: ["It looks like an account already exists using ", jsx("strong", { children: email }), '', messageTrail] }));
     };
-    return (jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsx(UserProfileIcon, { className: 'account-exists__image' }), jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxs(IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsx(IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsx(LoginWithEmailForm, { currentEmail: email }))] }))] })));
+    return (jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsx(UserProfileIcon, { className: 'account-exists__image' }), jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxs(IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsx(IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsx(LoginEmailForm, { isLoading: false, currentEmail: email }))] }))] })));
 };
 
 export { AccountExistsView };

package/src/lib/views/LoginView/LoginView.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Divider = require('../../components/Divider/Divider.cjs');
+var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
+var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
+var LoadingContext = require('../../context/LoadingContext/LoadingContext.cjs');
+var useAuthLayoutChecks = require('../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+var WalletList = require('../WalletList/WalletList.cjs');
+var SocialSignIn = require('./components/SocialSignIn/SocialSignIn.cjs');
+var WalletSignIn = require('./components/WalletSignIn/WalletSignIn.cjs');
+var LoginEmailForm = require('./components/EmailSignIn/LoginEmailForm.cjs');
+var useLoginView = require('./useLoginView.cjs');
+
+const LoginView = () => {
+    const { error } = ErrorContext.useErrorContext();
+    const { loading } = LoadingContext.useLoadingContext();
+    const { showToSFooter } = useAuthLayoutChecks.useAuthLayoutChecks();
+    const { view, setView } = ViewContext.useViewContext();
+    const { isWalletOnly, logingViewSections } = useLoginView.useLoginView();
+    const [showWalletList, setShowWalletList] = React.useState(isWalletOnly);
+    const [isLoading, setIsLoading] = React.useState(loading);
+    React.useEffect(() => {
+        // toolkit log in with email was set to false
+        if (isWalletOnly) {
+            setView('login-with-wallet-only');
+            setShowWalletList(true);
+        }
+        // returning from 'View all wallets' button
+        if (!isWalletOnly && view === 'login-with-email-or-wallet') {
+            setShowWalletList(false);
+        }
+        // toolkit log in with email was set back to true
+        if (!isWalletOnly &&
+            (!showWalletList || view === 'login-with-wallet-only')) {
+            setView('login-with-email-or-wallet');
+            setShowWalletList(false);
+        }
+    }, [isWalletOnly, view]);
+    const renderViewSections = React.useMemo(() => logingViewSections.map((viewSection, index) => {
+        switch (viewSection.type) {
+            case 'separator':
+                return (jsxRuntime.jsx(Divider.Divider, { text: viewSection.label }, `${viewSection.type}_${index}`));
+            case 'email':
+                return (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
+            case 'wallet':
+                return (jsxRuntime.jsx(WalletSignIn.WalletSignIn, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
+                        setView('login-with-email-or-wallet-full-wallet-list'); // this view is just to show the back button
+                        setShowWalletList(true);
+                    }, isLoading: isLoading }, `${viewSection.type}_${index}`));
+            case 'social':
+                return jsxRuntime.jsx(SocialSignIn.SocialSignIn, {}, `${viewSection.type}_${index}`);
+            default:
+                return;
+        }
+    }), [logingViewSections, isLoading, setView]);
+    if (showWalletList) {
+        return jsxRuntime.jsx(WalletList.WalletList, {});
+    }
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'login-with-email__container' }, { children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('login-with-email__scroll', {
+                    'login-with-email__scroll--with-footer': showToSFooter,
+                }), "data-testid": 'login-with-email-scroll' }, { children: renderViewSections }))] })));
+};
+
+exports.LoginView = LoginView;

package/src/lib/views/LoginView/LoginView.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LoginView: () => JSX.Element;

package/src/lib/views/LoginView/LoginView.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { Divider } from '../../components/Divider/Divider.js';
+import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
+import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
+import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.js';
+import { useAuthLayoutChecks } from '../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+import { WalletList } from '../WalletList/WalletList.js';
+import { SocialSignIn } from './components/SocialSignIn/SocialSignIn.js';
+import { WalletSignIn } from './components/WalletSignIn/WalletSignIn.js';
+import { LoginEmailForm } from './components/EmailSignIn/LoginEmailForm.js';
+import { useLoginView } from './useLoginView.js';
+
+const LoginView = () => {
+    const { error } = useErrorContext();
+    const { loading } = useLoadingContext();
+    const { showToSFooter } = useAuthLayoutChecks();
+    const { view, setView } = useViewContext();
+    const { isWalletOnly, logingViewSections } = useLoginView();
+    const [showWalletList, setShowWalletList] = useState(isWalletOnly);
+    const [isLoading, setIsLoading] = useState(loading);
+    useEffect(() => {
+        // toolkit log in with email was set to false
+        if (isWalletOnly) {
+            setView('login-with-wallet-only');
+            setShowWalletList(true);
+        }
+        // returning from 'View all wallets' button
+        if (!isWalletOnly && view === 'login-with-email-or-wallet') {
+            setShowWalletList(false);
+        }
+        // toolkit log in with email was set back to true
+        if (!isWalletOnly &&
+            (!showWalletList || view === 'login-with-wallet-only')) {
+            setView('login-with-email-or-wallet');
+            setShowWalletList(false);
+        }
+    }, [isWalletOnly, view]);
+    const renderViewSections = useMemo(() => logingViewSections.map((viewSection, index) => {
+        switch (viewSection.type) {
+            case 'separator':
+                return (jsx(Divider, { text: viewSection.label }, `${viewSection.type}_${index}`));
+            case 'email':
+                return (jsx(LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
+            case 'wallet':
+                return (jsx(WalletSignIn, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
+                        setView('login-with-email-or-wallet-full-wallet-list'); // this view is just to show the back button
+                        setShowWalletList(true);
+                    }, isLoading: isLoading }, `${viewSection.type}_${index}`));
+            case 'social':
+                return jsx(SocialSignIn, {}, `${viewSection.type}_${index}`);
+            default:
+                return;
+        }
+    }), [logingViewSections, isLoading, setView]);
+    if (showWalletList) {
+        return jsx(WalletList, {});
+    }
+    return (jsxs("div", Object.assign({ className: 'login-with-email__container' }, { children: [error && jsx(ErrorContainer, { children: error }), jsx("div", Object.assign({ className: classNames('login-with-email__scroll', {
+                    'login-with-email__scroll--with-footer': showToSFooter,
+                }), "data-testid": 'login-with-email-scroll' }, { children: renderViewSections }))] })));
+};
+
+export { LoginView };

package/src/lib/views/{LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.cjs → LoginView/components/EmailSignIn/LoginEmailForm.cjs}

@@ -48,14 +48,12 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
-var LoadingContext = require('../../../../context/LoadingContext/LoadingContext.cjs');
 var useEmailProvider = require('../../../../utils/hooks/useEmailProvider/useEmailProvider.cjs');
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
-const LoginWithEmailForm = ({ currentEmail }) => {
+const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, }) => {
     var _a;
     const { environmentId, wallets, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
-    const { loading, setLoading } = LoadingContext.useLoadingContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
     const [emailInput, setEmailInput] = React.useState(currentEmail !== null && currentEmail !== void 0 ? currentEmail : '');
     const [emailError, setEmailError] = React.useState(false);
@@ -65,13 +63,12 @@ const LoginWithEmailForm = ({ currentEmail }) => {
     const { handleEmailOnlyLoginSubmit, submitEmail, isEmailProviderLoading } = useEmailProvider.useEmailProvider({
         emailWalletConnector,
     });
-    const isLoading = React.useMemo(() => isEmailProviderLoading || loading, [isEmailProviderLoading, loading]);
+    const isLoading = React.useMemo(() => isEmailProviderLoading || isExternalLoading, [isEmailProviderLoading, isExternalLoading]);
     const handleEmailOnChangeEvent = (event) => {
         const { value } = event.currentTarget;
         setEmailInput(value);
     };
     const isInjectedWalletProviderEnabled = emailWalletConnector !== undefined;
-    const onChangeHandler = handleEmailOnChangeEvent;
     const emailInputSuffixIcon = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ "data-testid": 'email_submit_button', type: 'submit', className: `icon-button${((_a = emailInput === null || emailInput === void 0 ? void 0 : emailInput.trim()) === null || _a === void 0 ? void 0 : _a.length) ? '--visible' : ''}`, disabled: isLoading }, { children: jsxRuntime.jsx(arrowRight.ReactComponent, {}) })));
     const handleSubmit = (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         e.preventDefault();
@@ -80,7 +77,7 @@ const LoginWithEmailForm = ({ currentEmail }) => {
             return;
         }
         try {
-            setLoading(true);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
             if (isInjectedWalletProviderEnabled &&
                 (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.confirmEmailProviderForVerify)) {
                 // see: https://linear.app/dynamic-labs/issue/DYN-2517
@@ -103,14 +100,12 @@ const LoginWithEmailForm = ({ currentEmail }) => {
         catch (error) {
             logger.logger.debug(error);
             setErrorMessage(error.code);
-        }
-        finally {
-            setLoading(false);
+            onSubmitError === null || onSubmitError === void 0 ? void 0 : onSubmitError();
         }
     });
     // social sign in currently coupled to email... might be better to decouple
-    return (jsxRuntime.jsx("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailInput, onChange: onChangeHandler, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address', suffix: emailInputSuffixIcon }) })));
+    return (jsxRuntime.jsx("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address', suffix: emailInputSuffixIcon, disabled: isLoading }) })));
 };
 
 exports.EMAIL_REGEX = EMAIL_REGEX;
-exports.LoginWithEmailForm = LoginWithEmailForm;
+exports.LoginEmailForm = LoginEmailForm;