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

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

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useEffect } from 'react';
+import { useState, useCallback, useEffect, useMemo } from 'react';
 import { getWalletConnectorByName, isSameAddress } from '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
@@ -17,25 +17,24 @@ import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManually
 const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingOnConnectOnly) => {
     const [connectedInfo, setConnectedInfo, removeConnectedInfo] = useLocalStorage(CONNECTED_WALLET_CONNECTOR_DATA, null);
     const [connectedWallet, setConnectedWallet] = useState(null);
-    useEffect(() => {
-        const fetchBasicInfo = (connectedWallet) => __awaiter(void 0, void 0, void 0, function* () {
-            const provider = getWalletProvider(connectedWallet.connector);
-            setConnectedInfo({
-                chain: connectedWallet.chain,
-                name: connectedWallet.connector.name,
-                provider,
-                walletPublicKey: connectedWallet.address,
-            });
+    const setConnectedStates = useCallback((walletConnector, address, chain) => {
+        setConnectedWallet({
+            address,
+            chain,
+            connected: true,
+            connector: walletConnector,
+            id: 'connect-only-wallet',
         });
-        if (connectedWallet) {
-            fetchBasicInfo(connectedWallet);
-        }
-    }, [connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address]);
-    const connectWalletByAddressAndChain = (name, address, chain) => __awaiter(void 0, void 0, void 0, function* () {
+        setConnectedInfo({
+            chain,
+            name: walletConnector.name,
+            provider: getWalletProvider(walletConnector),
+            walletPublicKey: address,
+        });
+    }, [setConnectedInfo]);
+    const connectWalletByAddressAndChain = useCallback((name, address, chain) => __awaiter(void 0, void 0, void 0, function* () {
         const walletConnector = getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), name);
         if (walletConnector) {
-            // this is here because phantom fires a disconnect event on page load,
-            // and other wallets and chains have similar issues
             if (shouldManuallyReconnectOnRefresh(walletConnector)) {
                 yield walletConnector.connect();
             }
@@ -43,13 +42,7 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
             const result = connectedAccounts.filter((account) => isSameAddress(account, address, chain));
             if (result.length > 0) {
                 walletConnector.connect();
-                setConnectedWallet({
-                    address,
-                    chain,
-                    connected: true,
-                    connector: walletConnector,
-                    id: 'connect-only-wallet',
-                });
+                setConnectedStates(walletConnector, address, chain);
             }
             else {
                 setConnectedWallet(null);
@@ -58,9 +51,9 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         else {
             setConnectedWallet(null);
         }
-    });
+    }), [setConnectedStates, wallets]);
     useEffect(() => {
-        if (authMode === 'connect-only' && connectedInfo) {
+        if (authMode === 'connect-only' && connectedInfo && !connectedWallet) {
             if (connectedInfo.walletPublicKey &&
                 connectedInfo.name &&
                 connectedInfo.chain) {
@@ -68,7 +61,14 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
                 connectWalletByAddressAndChain(name, walletPublicKey, chain);
             }
         }
-    }, [connectedInfo, wallets.length]);
+    }, [
+        authMode,
+        connectWalletByAddressAndChain,
+        connectedInfo,
+        connectedWallet,
+    ]);
+    const shouldSkipCreatingVisit = useMemo(() => (authMode === 'connect-only' && !enableVisitTrackingOnConnectOnly) ||
+        connectedWallet, [authMode, connectedWallet, enableVisitTrackingOnConnectOnly]);
     const connectWallet = (walletConnector, fetchPublicAddressOpts) => __awaiter(void 0, void 0, void 0, function* () {
         const publicWalletAddress = yield walletConnector.fetchPublicAddress(fetchPublicAddressOpts);
         if (!publicWalletAddress) {
@@ -77,14 +77,8 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
             throw error;
         }
         const chain = walletConnector.connectedChain || '';
-        setConnectedWallet({
-            address: publicWalletAddress,
-            chain,
-            connected: true,
-            connector: walletConnector,
-            id: 'connect-only-wallet',
-        });
-        if (authMode === 'connect-only' && !enableVisitTrackingOnConnectOnly) {
+        setConnectedStates(walletConnector, publicWalletAddress, chain);
+        if (shouldSkipCreatingVisit) {
             return publicWalletAddress;
         }
         // send information to backend to kick off background jobs

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

@@ -23,7 +23,6 @@ const useConnectWithEmail = ({ emailWalletConnector, handleConnect, }) => {
             return;
         setLoading(true);
         emailWalletConnector.setEmail(email);
-        emailWalletConnector.cancelPreviousEmail();
         try {
             yield handleConnect(emailWalletConnector);
         }

package/src/lib/utils/hooks/useConnectWithEmail/useConnectWithEmail.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { EmailWalletConnector, WalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { IEmailWalletConnector, WalletConnector } from '@dynamic-labs/wallet-connector-core';
 type ConnectWithEmailProps = {
-    emailWalletConnector: EmailWalletConnector | undefined;
+    emailWalletConnector: IEmailWalletConnector | undefined;
     handleConnect: (walletConnector: WalletConnector) => Promise<void>;
 };
 export declare const useConnectWithEmail: ({ emailWalletConnector, handleConnect, }: ConnectWithEmailProps) => {

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

@@ -19,7 +19,6 @@ const useConnectWithEmail = ({ emailWalletConnector, handleConnect, }) => {
             return;
         setLoading(true);
         emailWalletConnector.setEmail(email);
-        emailWalletConnector.cancelPreviousEmail();
         try {
             yield handleConnect(emailWalletConnector);
         }

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

@@ -9,7 +9,6 @@ var isSameWalletName = require('../../functions/isSameWalletName/isSameWalletNam
 
 const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWalletId, secondaryWallets, setUser, }) => {
     const callback = React.useCallback((walletId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
         if (walletId === primaryWalletId)
             return;
         const newUser = yield handleUnlinkHelper.handleUnlinkHelper({
@@ -25,7 +24,7 @@ const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWall
             isSameWalletName.isSameWalletName(account.walletName, (wallet === null || wallet === void 0 ? void 0 : wallet.connector.name) || '')).length;
         // If there's only 1, it's the one being removed and we can kill the session
         if (numberOfLinkedWallets === 1) {
-            yield ((_b = wallet === null || wallet === void 0 ? void 0 : (_a = wallet.connector).endSession) === null || _b === void 0 ? void 0 : _b.call(_a));
+            yield (wallet === null || wallet === void 0 ? void 0 : wallet.connector.endSession());
         }
     }), [
         primaryWalletId,

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

@@ -5,7 +5,6 @@ import { isSameWalletName } from '../../functions/isSameWalletName/isSameWalletN
 
 const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWalletId, secondaryWallets, setUser, }) => {
     const callback = useCallback((walletId) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
         if (walletId === primaryWalletId)
             return;
         const newUser = yield handleUnlinkHelper({
@@ -21,7 +20,7 @@ const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWall
             isSameWalletName(account.walletName, (wallet === null || wallet === void 0 ? void 0 : wallet.connector.name) || '')).length;
         // If there's only 1, it's the one being removed and we can kill the session
         if (numberOfLinkedWallets === 1) {
-            yield ((_b = wallet === null || wallet === void 0 ? void 0 : (_a = wallet.connector).endSession) === null || _b === void 0 ? void 0 : _b.call(_a));
+            yield (wallet === null || wallet === void 0 ? void 0 : wallet.connector.endSession());
         }
     }), [
         primaryWalletId,

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

@@ -84,7 +84,6 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
         }
     };
     const handleError = (e, walletConnector) => {
-        var _a;
         // This is a special case where the user is trying to link a wallet
         // and the wallet is already linked and we don't want to kill the session.
         if (e.name === 'WalletUsedError') {
@@ -96,7 +95,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
             }
             return;
         }
-        (_a = walletConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(walletConnector);
+        walletConnector.endSession();
         if (e.name === 'ChainalysisError') {
             setView('chainalysis-blocked-wallet');
             return;
@@ -159,6 +158,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
                 setCallback('authSuccess');
             }
             else {
+                setView('wallet-list');
                 setCallback('linkSuccess');
             }
         }

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

@@ -80,7 +80,6 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
         }
     };
     const handleError = (e, walletConnector) => {
-        var _a;
         // This is a special case where the user is trying to link a wallet
         // and the wallet is already linked and we don't want to kill the session.
         if (e.name === 'WalletUsedError') {
@@ -92,7 +91,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
             }
             return;
         }
-        (_a = walletConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(walletConnector);
+        walletConnector.endSession();
         if (e.name === 'ChainalysisError') {
             setView('chainalysis-blocked-wallet');
             return;
@@ -155,6 +154,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
                 setCallback('authSuccess');
             }
             else {
+                setView('wallet-list');
                 setCallback('linkSuccess');
             }
         }

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

@@ -54,8 +54,6 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
             /* istanbul ignore next */
             if (!wallet)
                 return null;
-            // this is here because phantom fires a disconnect event on page load,
-            // and other wallets and chains have similar issues
             if (account.id === primaryWalletId &&
                 shouldManuallyReconnectOnRefresh.shouldManuallyReconnectOnRefresh(wallet.walletConnector)) {
                 yield wallet.walletConnector.connect();

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

@@ -50,8 +50,6 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
             /* istanbul ignore next */
             if (!wallet)
                 return null;
-            // this is here because phantom fires a disconnect event on page load,
-            // and other wallets and chains have similar issues
             if (account.id === primaryWalletId &&
                 shouldManuallyReconnectOnRefresh(wallet.walletConnector)) {
                 yield wallet.walletConnector.connect();

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

@@ -75,7 +75,14 @@ const useWalletItemActions = () => {
         setError(undefined);
     });
     const handleAlreadyConnectedWallet = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setMultiWalletWidgetState('awaiting_account_switch', 'linking_new_wallet');
+        const connectedAccounts = yield walletConnector.getConnectedAccounts();
+        const activeAccountAlreadyLinked = connectedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
+        if (activeAccountAlreadyLinked) {
+            setMultiWalletWidgetState('awaiting_account_switch', 'linking_new_wallet');
+        }
+        else {
+            setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+        }
         setShowAuthFlow(false);
         setWalletConnectorAndWalletColor(walletConnector);
     });
@@ -95,12 +102,11 @@ const useWalletItemActions = () => {
         }
     };
     const handleWalletItemClick = (wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a;
         const { walletConnector, isInstalledOnBrowser } = wallet;
         if (mockedSDK)
             return;
         if (walletConnector.connectedChain === 'FLOW') {
-            yield ((_a = walletConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(walletConnector));
+            yield walletConnector.endSession();
         }
         if (isSelectedWalletAlreadyConnected.isSelectedWalletAlreadyConnected(connectedWallets, walletConnector, user) &&
             walletConnector.connectedChain !== 'FLOW') {

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

@@ -71,7 +71,14 @@ const useWalletItemActions = () => {
         setError(undefined);
     });
     const handleAlreadyConnectedWallet = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
-        setMultiWalletWidgetState('awaiting_account_switch', 'linking_new_wallet');
+        const connectedAccounts = yield walletConnector.getConnectedAccounts();
+        const activeAccountAlreadyLinked = connectedWallets.find((wallet) => { var _a; return wallet.address.toLowerCase() === ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
+        if (activeAccountAlreadyLinked) {
+            setMultiWalletWidgetState('awaiting_account_switch', 'linking_new_wallet');
+        }
+        else {
+            setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+        }
         setShowAuthFlow(false);
         setWalletConnectorAndWalletColor(walletConnector);
     });
@@ -91,12 +98,11 @@ const useWalletItemActions = () => {
         }
     };
     const handleWalletItemClick = (wallet) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
         const { walletConnector, isInstalledOnBrowser } = wallet;
         if (mockedSDK)
             return;
         if (walletConnector.connectedChain === 'FLOW') {
-            yield ((_a = walletConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(walletConnector));
+            yield walletConnector.endSession();
         }
         if (isSelectedWalletAlreadyConnected(connectedWallets, walletConnector, user) &&
             walletConnector.connectedChain !== 'FLOW') {

package/src/lib/views/CollectUserDataView/CollectUserDataView.cjs

@@ -24,13 +24,13 @@ require('react-focus-lock');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-var TextButton = require('../../components/TextButton/TextButton.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('ethers');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var TextButton = require('../../components/TextButton/TextButton.cjs');
 require('../../components/IconButton/IconButton.cjs');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
 var NetworkPicker = require('../../components/NetworkPicker/NetworkPicker.cjs');

package/src/lib/views/CollectUserDataView/CollectUserDataView.js

@@ -20,13 +20,13 @@ import 'react-focus-lock';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
-import { TextButton } from '../../components/TextButton/TextButton.js';
 import '../../config/ApiEndpoint.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import 'ethers';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { TextButton } from '../../components/TextButton/TextButton.js';
 import '../../components/IconButton/IconButton.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
 import { NetworkPicker } from '../../components/NetworkPicker/NetworkPicker.js';

package/src/lib/views/CollectUserDataViewLoginWithEmail/CollectUserDataViewLoginWithEmail.cjs

@@ -21,13 +21,13 @@ require('react-focus-lock');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-var TextButton = require('../../components/TextButton/TextButton.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('ethers');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var TextButton = require('../../components/TextButton/TextButton.cjs');
 require('../../components/IconButton/IconButton.cjs');
 var UserDataForm = require('../CollectUserDataView/UserDataForm/UserDataForm.cjs');
 

package/src/lib/views/CollectUserDataViewLoginWithEmail/CollectUserDataViewLoginWithEmail.js

@@ -17,13 +17,13 @@ import 'react-focus-lock';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
-import { TextButton } from '../../components/TextButton/TextButton.js';
 import '../../config/ApiEndpoint.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import 'ethers';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { TextButton } from '../../components/TextButton/TextButton.js';
 import '../../components/IconButton/IconButton.js';
 import { UserDataForm } from '../CollectUserDataView/UserDataForm/UserDataForm.js';
 

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.cjs

@@ -42,8 +42,7 @@ const EmailConfirmationWaitingView = () => {
     }
     const emailConnector = walletConnector;
     const onClickResetEmail = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        yield ((_a = emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(emailConnector));
+        yield (emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.endSession());
         setView('login-with-email-or-wallet');
         clearStatesOnBackClick();
     }), [setView, emailConnector, clearStatesOnBackClick]);

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.js

@@ -38,8 +38,7 @@ const EmailConfirmationWaitingView = () => {
     }
     const emailConnector = walletConnector;
     const onClickResetEmail = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        yield ((_a = emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(emailConnector));
+        yield (emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.endSession());
         setView('login-with-email-or-wallet');
         clearStatesOnBackClick();
     }), [setView, emailConnector, clearStatesOnBackClick]);

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

@@ -25,13 +25,13 @@ require('react-focus-lock');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-var TextButton = require('../../components/TextButton/TextButton.cjs');
 var api = require('../../data/api.cjs');
 var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
 require('ethers');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var TextButton = require('../../components/TextButton/TextButton.cjs');
 require('../../components/IconButton/IconButton.cjs');
 var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
 var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs');

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

@@ -21,13 +21,13 @@ import 'react-focus-lock';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
-import { TextButton } from '../../components/TextButton/TextButton.js';
 import { signInWithEmailVerification, retryEmailVerification } from '../../data/api.js';
 import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
 import 'ethers';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { TextButton } from '../../components/TextButton/TextButton.js';
 import '../../components/IconButton/IconButton.js';
 import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
 import { IconWithSpinner } from '../../components/IconWithSpinner/IconWithSpinner.js';

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.cjs

@@ -42,7 +42,7 @@ const EmailWalletOTPVerificationView = () => {
         throw new Error('EmailWalletOtpVerificationView requires a email');
     }
     const handleBackClick = () => {
-        emailWalletConnector.cancelPreviousEmail();
+        emailWalletConnector.clearEmail();
         clearStatesOnBackClick();
         setView('login-with-email-or-wallet');
     };

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.js

@@ -38,7 +38,7 @@ const EmailWalletOTPVerificationView = () => {
         throw new Error('EmailWalletOtpVerificationView requires a email');
     }
     const handleBackClick = () => {
-        emailWalletConnector.cancelPreviousEmail();
+        emailWalletConnector.clearEmail();
         clearStatesOnBackClick();
         setView('login-with-email-or-wallet');
     };

package/src/lib/views/LoginWithEmailView/LoginWithEmailView.cjs

@@ -19,7 +19,7 @@ var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs
 var Divider = require('../../components/Divider/Divider.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
-var index = require('../../utils/functions/walletListBuilder/index.cjs');
+var walletListBuilder = require('../../utils/functions/walletListBuilder/walletListBuilder.cjs');
 var LoginWithEmailForm = require('./components/LoginWithEmailForm/LoginWithEmailForm.cjs');
 var LoginWithEmailWalletList = require('./components/LoginWithEmailWalletList/LoginWithEmailWalletList.cjs');
 
@@ -28,7 +28,7 @@ const LoginWithEmailView = () => {
     const { error } = ErrorContext.useErrorContext();
     const { authorizationViewDisplayOrder, wallets, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const { walletsFilter, signWithEmailWalletName, loginWithEmail } = useInternalDynamicContext.useInternalDynamicContext();
-    const { numberOfWallets, walletsList } = index.walletListBuilder({
+    const { numberOfWallets, walletsList } = walletListBuilder.walletListBuilder({
         inputList: wallets,
         isWalletConnectList: false,
         lastUsedWalletName: getFromLS.getFromLS(localStorage.LAST_USED_WALLET),

package/src/lib/views/LoginWithEmailView/LoginWithEmailView.js

@@ -15,7 +15,7 @@ import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.j
 import { Divider } from '../../components/Divider/Divider.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
-import { walletListBuilder } from '../../utils/functions/walletListBuilder/index.js';
+import { walletListBuilder } from '../../utils/functions/walletListBuilder/walletListBuilder.js';
 import { LoginWithEmailForm } from './components/LoginWithEmailForm/LoginWithEmailForm.js';
 import { NUMBER_OF_WALLETS, LoginWithEmailWalletList } from './components/LoginWithEmailWalletList/LoginWithEmailWalletList.js';
 

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.cjs

@@ -31,6 +31,7 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 var useConnectWithEmail = require('../../../../utils/hooks/useConnectWithEmail/useConnectWithEmail.cjs');
 var EmailVerificationContext = require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 var LoadingContext = require('../../../../context/LoadingContext/LoadingContext.cjs');
+var SocialSignIn = require('../SocialSignIn/SocialSignIn.cjs');
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 const LoginWithEmailForm = () => {
@@ -95,7 +96,13 @@ const LoginWithEmailForm = () => {
             setLoading(false);
         }
     });
-    return (jsxRuntime.jsxs("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: [jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailValue, onChange: onChangeHandler, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address' }), jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'medium', expanded: true }, { children: "Continue" }))] })));
+    let socialSignInEnabled = false;
+    const params = new URLSearchParams(window.location.search);
+    if (params.has('socialSignIn')) {
+        socialSignInEnabled = true;
+    }
+    // social sign in currently coupled to email... might be better to decouple
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [socialSignInEnabled && jsxRuntime.jsx(SocialSignIn.SocialSignIn, {}), jsxRuntime.jsxs("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: [jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailValue, onChange: onChangeHandler, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address' }), jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'medium', expanded: true }, { children: "Continue" }))] }))] }));
 };
 
 exports.EMAIL_REGEX = EMAIL_REGEX;

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.js

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { isEmailWalletConnector } from '@dynamic-labs/multi-wallet';
 import { createEmailVerification } from '../../../../data/api.js';
@@ -27,6 +27,7 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { useConnectWithEmail } from '../../../../utils/hooks/useConnectWithEmail/useConnectWithEmail.js';
 import { useEmailVerificationContext } from '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
 import { useLoadingContext } from '../../../../context/LoadingContext/LoadingContext.js';
+import { SocialSignIn } from '../SocialSignIn/SocialSignIn.js';
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 const LoginWithEmailForm = () => {
@@ -91,7 +92,13 @@ const LoginWithEmailForm = () => {
             setLoading(false);
         }
     });
-    return (jsxs("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: [jsx(Input, { id: 'email_field', value: emailValue, onChange: onChangeHandler, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address' }), jsx(Button, Object.assign({ buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'medium', expanded: true }, { children: "Continue" }))] })));
+    let socialSignInEnabled = false;
+    const params = new URLSearchParams(window.location.search);
+    if (params.has('socialSignIn')) {
+        socialSignInEnabled = true;
+    }
+    // social sign in currently coupled to email... might be better to decouple
+    return (jsxs(Fragment, { children: [socialSignInEnabled && jsx(SocialSignIn, {}), jsxs("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: [jsx(Input, { id: 'email_field', value: emailValue, onChange: onChangeHandler, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address' }), jsx(Button, Object.assign({ buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading, buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'medium', expanded: true }, { children: "Continue" }))] }))] }));
 };
 
 export { EMAIL_REGEX, LoginWithEmailForm };

package/src/lib/views/LoginWithEmailView/components/SocialSignIn/SocialSignIn.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var close = require('../../../../shared/assets/close.cjs');
+var dotsHorizontal = require('../../../../shared/assets/dots-horizontal.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+var useMutation = require('../../../../utils/hooks/useMutation/useMutation.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
+var IconListTile = require('../../../../components/IconListTile/IconListTile.cjs');
+var SocialRedirectContext = require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+var getSocialIcon = require('../../../../utils/functions/getSocialIcon/getSocialIcon.cjs');
+var OverlayCard = require('../../../../components/OverlayCard/OverlayCard.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
+
+const SocialSignIn = () => {
+    const { socialProvider, setSocialProvider, socialWalletConnector } = SocialRedirectContext.useSocialRedirectContext();
+    const [showCard, setShowCard] = React.useState(false);
+    const closeCard = () => !isLoading && setShowCard(false);
+    const showCardButton = walletConnectorCore.socialProviders.length > 5;
+    const socialProvidersToDisplayInline = showCardButton
+        ? walletConnectorCore.socialProviders.slice(0, 4)
+        : walletConnectorCore.socialProviders.slice(0, 5);
+    const numberOfSocialGridItems = socialProvidersToDisplayInline.length + (showCardButton ? 1 : 0);
+    const { mutate: onClickProvider, isLoading } = useMutation.useMutation((provider) => {
+        setSocialProvider(provider);
+        return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(provider);
+    });
+    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: closeCard, type: 'button', id: 'close-button', disabled: isLoading, "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'social-sign-in', style: {
+                    '--number-of-social-grid-items': numberOfSocialGridItems,
+                } }, { children: [socialProvidersToDisplayInline.map((provider) => (jsxRuntime.jsx(IconListTile.IconListTile, Object.assign({ dataTestId: `inline-${provider}`, onClick: () => onClickProvider(provider) }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: getSocialIcon.getSocialIcon(provider), isSpinning: socialProvider === provider, iconSize: 32 }) }), provider))), showCardButton && (jsxRuntime.jsx(IconListTile.IconListTile, Object.assign({ dataTestId: 'show-more-options', onClick: () => setShowCard(true) }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary' }, { children: jsxRuntime.jsx(dotsHorizontal.ReactComponent, {}) })) }), 'show-more-options'))] })), jsxRuntime.jsx(OverlayCard.OverlayCard, Object.assign({ isOpen: showCard, onClickOverlay: closeCard }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'social-sign-in--card' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton }, { children: "Choose a social account" })), jsxRuntime.jsx("div", Object.assign({ className: 'social-sign-in--card--body' }, { children: walletConnectorCore.socialProviders.map((provider) => (jsxRuntime.jsx(IconListTile.IconListTile, Object.assign({ dataTestId: `card-${provider}`, onClick: () => onClickProvider(provider) }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: getSocialIcon.getSocialIcon(provider), isSpinning: socialProvider === provider, iconSize: 32 }) }), provider))) }))] })) }))] }));
+};
+
+exports.SocialSignIn = SocialSignIn;

package/src/lib/views/LoginWithEmailView/components/SocialSignIn/SocialSignIn.d.ts

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