@0xsequence/connect 5.4.7 → 6.0.0-beta.0

package/dist/cjs/components/Connect/Connect.js

@@ -1,7 +1,7 @@
 "use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Connect = exports.SEQUENCE_UNIVERSAL_CONNECTOR_NAME = void 0;
+exports.Connect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const design_system_1 = require("@0xsequence/design-system");
 const hooks_1 = require("@0xsequence/hooks");
@@ -21,7 +21,6 @@ const useWaasLinkWallet_js_1 = require("../../hooks/useWaasLinkWallet.js");
 const useWallets_js_1 = require("../../hooks/useWallets.js");
 const useWalletSettings_js_1 = require("../../hooks/useWalletSettings.js");
 const helpers_js_1 = require("../../utils/helpers.js");
-const ConnectButton_js_1 = require("../ConnectButton/ConnectButton.js");
 const index_js_1 = require("../ConnectButton/index.js");
 const index_js_2 = require("../SequenceLogo/index.js");
 const Banner_js_1 = require("./Banner.js");
@@ -29,33 +28,90 @@ const ConnectedWallets_js_1 = require("./ConnectedWallets.js");
 const EmailWaasVerify_js_1 = require("./EmailWaasVerify.js");
 const ExtendedWalletList_js_1 = require("./ExtendedWalletList.js");
 const MAX_ITEM_PER_ROW = 4;
-exports.SEQUENCE_UNIVERSAL_CONNECTOR_NAME = 'Sequence';
+const SEQUENCE_V3_CONNECTOR_TYPE = 'sequence-v3-wallet';
+const getConnectorProvider = (connector) => {
+    const walletId = connector._wallet?.id?.toLowerCase() || '';
+    if (walletId.includes('email')) {
+        return 'EMAIL';
+    }
+    if (walletId.includes('google')) {
+        return 'GOOGLE';
+    }
+    if (walletId.includes('apple')) {
+        return 'APPLE';
+    }
+    if (walletId.includes('passkey')) {
+        return 'PASSKEY';
+    }
+    return null;
+};
 const Connect = (props) => {
     (0, react_apple_signin_auth_1.useScript)(react_apple_signin_auth_1.appleAuthHelpers.APPLE_SCRIPT_SRC);
+    const { theme } = (0, design_system_1.useTheme)();
     const { analytics } = (0, Analytics_js_1.useAnalyticsContext)();
     const { hideExternalConnectOptions, hideConnectedWallets, hideSocialConnectOptions } = (0, useWalletSettings_js_1.useWalletSettings)();
-    const { onClose, emailConflictInfo, config = {}, isInline = false } = props;
+    const { onClose, emailConflictInfo, config: baseConfig = {}, isInline = false } = props;
+    const config = props.resolvedConfig ?? baseConfig;
+    const isV3WalletSignedIn = props.isV3WalletSignedIn ?? null;
+    const isAuthStatusLoading = props.isAuthStatusLoading ?? false;
+    const walletConfigurationSignIn = props.walletConfigurationSignIn;
     const { signIn = {} } = config;
+    const baseSignIn = baseConfig.signIn ?? {};
     const storage = (0, useStorage_js_1.useStorage)();
     const descriptiveSocials = !!config?.signIn?.descriptiveSocials;
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const projectName = config?.signIn?.projectName;
     const showWalletAuthOptionsFirst = config?.signIn?.showWalletAuthOptionsFirst ?? false;
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const projectName = baseSignIn?.projectName;
+    const ecosystemProjectName = walletConfigurationSignIn?.projectName ?? baseSignIn?.projectName;
+    const ecosystemLogoUrl = walletConfigurationSignIn?.logoUrl ?? baseSignIn?.logoUrl;
     const [email, setEmail] = (0, react_1.useState)('');
     const [showEmailWaasPinInput, setShowEmailWaasPinInput] = (0, react_1.useState)(false);
     const [showExtendedList, setShowExtendedList] = (0, react_1.useState)(null);
-    const { status, connectors, connect } = (0, wagmi_1.useConnect)();
-    const connections = (0, wagmi_1.useConnections)();
+    const connect = (0, wagmi_1.useConnect)();
+    const { status } = connect;
+    const connectors = (0, wagmi_1.useConnectors)();
     const { signMessageAsync } = (0, wagmi_1.useSignMessage)();
-    const { wallets, linkedWallets, disconnectWallet, refetchLinkedWallets } = (0, useWallets_js_1.useWallets)();
+    const enabledProviderSet = (0, react_1.useMemo)(() => {
+        if (!props.enabledProviders) {
+            return undefined;
+        }
+        return new Set(props.enabledProviders.map(provider => provider.toUpperCase()));
+    }, [props.enabledProviders]);
+    const allowedChainIds = (0, react_1.useMemo)(() => {
+        if (!config?.chainIds || config.chainIds.length === 0) {
+            return undefined;
+        }
+        return new Set(config.chainIds);
+    }, [config?.chainIds]);
+    const filteredConnectors = (0, react_1.useMemo)(() => connectors.filter(connector => {
+        const connectorChains = Array.isArray(connector.chains)
+            ? connector.chains
+            : undefined;
+        if (allowedChainIds && connectorChains?.length) {
+            const connectorSupportsAllowedChain = connectorChains.some(chain => allowedChainIds.has(chain.id));
+            if (!connectorSupportsAllowedChain) {
+                return false;
+            }
+        }
+        if (!enabledProviderSet) {
+            return true;
+        }
+        const provider = getConnectorProvider(connector);
+        if (!provider) {
+            return true;
+        }
+        return enabledProviderSet.has(provider);
+    }), [connectors, enabledProviderSet, allowedChainIds]);
+    const connections = (0, wagmi_1.useConnections)();
     const { data: waasStatusData } = (0, hooks_1.useGetWaasStatus)();
-    const hasConnectedSequenceUniversal = connections.some(c => c.connector.name === exports.SEQUENCE_UNIVERSAL_CONNECTOR_NAME);
-    const hasConnectedSocialOrSequenceUniversal = connections.some(c => c.connector?._wallet?.type === 'social') || hasConnectedSequenceUniversal;
-    const waasConnection = connections.find(c => c.connector?.type === 'sequence-waas');
-    // Setup wallet linking
+    const { wallets, linkedWallets, disconnectWallet, refetchLinkedWallets } = (0, useWallets_js_1.useWallets)();
+    const waasConnection = (0, react_1.useMemo)(() => connections.find(c => c.connector?.type === 'sequence-waas'), [connections]);
     const { linkWallet, removeLinkedWallet } = (0, useWaasLinkWallet_js_1.useWaasLinkWallet)(waasConnection?.connector);
     const [lastConnectedWallet, setLastConnectedWallet] = (0, react_1.useState)(undefined);
     const [isSigningLinkMessage, setIsSigningLinkMessage] = (0, react_1.useState)(false);
+    const [isRestoringSession, setIsRestoringSession] = (0, react_1.useState)(false);
+    const [restorableSessionDismissed, setRestorableSessionDismissed] = (0, react_1.useState)(false);
+    const [restorableSession, setRestorableSession] = (0, react_1.useState)(null);
     const handleUnlinkWallet = async (address) => {
         try {
             await removeLinkedWallet(address);
@@ -86,7 +142,7 @@ const Connect = (props) => {
         }
         const tryLinkWallet = async () => {
             const nonWaasWallets = connections.filter(c => c.connector?.type !== 'sequence-waas');
-            const nonLinkedWallets = nonWaasWallets.filter(c => !linkedWallets?.find(lw => lw.linkedWalletAddress === c.accounts[0].toLowerCase()));
+            const nonLinkedWallets = nonWaasWallets.filter(c => !linkedWallets?.find(lw => lw.linkedWalletAddress.toLowerCase() === c.accounts[0].toLowerCase()));
             if (nonLinkedWallets.map(w => w.accounts[0]).includes(lastConnectedWallet)) {
                 const waasWalletAddress = waasConnection?.accounts[0];
                 if (!waasWalletAddress) {
@@ -140,21 +196,129 @@ const Connect = (props) => {
             onClose();
         }
     }, [connections, lastConnectedWallet]);
-    const baseWalletConnectors = connectors
+    const hasV3Wallet = wallets.some(w => w.id.includes('-v3'));
+    const hasWaasWallet = !!waasConnection;
+    const hasSequenceWalletConnection = hasV3Wallet || hasWaasWallet;
+    const hasSocialConnection = connections.some(c => c.connector?._wallet?.type === 'social');
+    const hasPrimarySequenceConnection = hasSequenceWalletConnection || hasSocialConnection;
+    const hasAnyConnection = connections.length > 0;
+    const extendedConnectors = filteredConnectors;
+    const isSequenceV3Connector = (connector) => {
+        return connector.type === SEQUENCE_V3_CONNECTOR_TYPE;
+    };
+    // Safari aggressively blocks popups if window.open is not triggered directly from the click handler.
+    // Pre-open the Sequence popup in the same gesture before we kick off the async wagmi connect flow.
+    const preopenSequenceV3Popup = (0, react_1.useCallback)((connector) => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        try {
+            const client = connector.client;
+            const transport = typeof client?.ensureTransport === 'function' ? client.ensureTransport() : client?.transport;
+            const isPopupMode = (transport?.mode ?? client?.transportMode) === 'popup';
+            if (isPopupMode && typeof transport?.openWallet === 'function') {
+                // Use the same path used by connect requests so the opened window is reused.
+                transport.openWallet('/request/connect').catch(() => {
+                    /* Ignore preopen failures; the main connect flow will try again */
+                });
+            }
+        }
+        catch (error) {
+            console.warn('Failed to pre-open Sequence popup', error);
+        }
+    }, []);
+    const sequenceConnectors = (0, react_1.useMemo)(() => extendedConnectors.filter((connector) => connector.type === SEQUENCE_V3_CONNECTOR_TYPE), [extendedConnectors]);
+    const findSequenceConnectorByLoginMethod = (0, react_1.useCallback)((loginMethod) => {
+        if (!loginMethod) {
+            return undefined;
+        }
+        const normalizedMethod = loginMethod.trim().toLowerCase();
+        if (!normalizedMethod) {
+            return undefined;
+        }
+        return sequenceConnectors.find(connector => {
+            const loginStorageKey = connector.loginOptions?.loginStorageKey?.toLowerCase();
+            const loginType = connector.loginOptions?.loginType?.toLowerCase();
+            const walletId = connector._wallet?.id?.toLowerCase();
+            if (loginStorageKey && loginStorageKey === normalizedMethod) {
+                return true;
+            }
+            if (loginType && loginType === normalizedMethod) {
+                return true;
+            }
+            if (walletId && (walletId === normalizedMethod || walletId.startsWith(`${normalizedMethod}-`))) {
+                return true;
+            }
+            return false;
+        });
+    }, [sequenceConnectors]);
+    (0, react_1.useEffect)(() => {
+        if (restorableSessionDismissed) {
+            return;
+        }
+        let cancelled = false;
+        const checkRestorableSession = async () => {
+            // disabled for now
+            return;
+            for (const connector of sequenceConnectors) {
+                const client = connector.client;
+                if (!client?.hasRestorableSessionlessConnection) {
+                    continue;
+                }
+                try {
+                    const hasSession = await client.hasRestorableSessionlessConnection();
+                    if (!hasSession) {
+                        continue;
+                    }
+                    const info = await client.getSessionlessConnectionInfo();
+                    const resolvedConnector = findSequenceConnectorByLoginMethod(info?.loginMethod) || connector;
+                    if (resolvedConnector !== connector) {
+                        const resolvedClient = resolvedConnector.client;
+                        if (!resolvedClient?.hasRestorableSessionlessConnection) {
+                            continue;
+                        }
+                        const resolvedHasSession = await resolvedClient.hasRestorableSessionlessConnection();
+                        if (!resolvedHasSession) {
+                            continue;
+                        }
+                    }
+                    if (!cancelled) {
+                        setRestorableSession({
+                            connector: resolvedConnector,
+                            walletAddress: info?.walletAddress,
+                            loginMethod: info?.loginMethod
+                        });
+                    }
+                    return;
+                }
+                catch (error) {
+                    console.warn('Failed to check restorable Sequence session', error);
+                }
+            }
+            if (!cancelled) {
+                setRestorableSession(null);
+            }
+        };
+        if (sequenceConnectors.length > 0) {
+            checkRestorableSession();
+        }
+        else {
+            setRestorableSession(null);
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [sequenceConnectors, restorableSessionDismissed, findSequenceConnectorByLoginMethod]);
+    const baseWalletConnectors = extendedConnectors
         .filter(c => {
         return c._wallet && (c._wallet.type === 'wallet' || c._wallet.type === undefined);
     })
-        // Remove metamask if metamask is detected
         .filter(c => {
-        const isMetamaskInjected = window.ethereum?.isMetaMask;
+        const isMetamaskInjected = typeof window !== 'undefined' && window?.ethereum?.isMetaMask;
         if (c._wallet?.id === 'metamask-wallet' && isMetamaskInjected) {
             return false;
         }
-        return true;
-    })
-        // Remove coinbase if coinbase is detected
-        .filter(c => {
-        const isCoinbaseInjected = window.ethereum?.isCoinbaseWallet;
+        const isCoinbaseInjected = typeof window !== 'undefined' && window?.ethereum?.isCoinbaseWallet;
         if (c._wallet?.id === 'coinbase-wallet' && isCoinbaseInjected) {
             return false;
         }
@@ -164,18 +328,19 @@ const Connect = (props) => {
         return connector._wallet.id === 'mock';
     });
     // EIP-6963 connectors will not have the _wallet property
-    const injectedConnectors = connectors
+    const injectedConnectors = filteredConnectors
         .filter(connector => {
         // Keep the connector when it is an EIP-6963 connector
         if (connector.type === 'injected') {
             return true;
         }
         // We check if SDK-generated connectors is actually an injected connector
-        const isMetamaskInjected = window.ethereum?.isMetaMask;
+        const injectedProvider = typeof window !== 'undefined' ? window.ethereum : undefined;
+        const isMetamaskInjected = injectedProvider?.isMetaMask;
         if (connector._wallet?.id === 'metamask-wallet' && isMetamaskInjected) {
             return true;
         }
-        const isCoinbaseInjected = window.ethereum?.isCoinbaseWallet;
+        const isCoinbaseInjected = injectedProvider?.isCoinbaseWallet;
         if (connector._wallet?.id === 'coinbase-wallet' && isCoinbaseInjected) {
             return true;
         }
@@ -199,17 +364,127 @@ const Connect = (props) => {
             }
         };
     });
-    const socialAuthConnectors = connectors
+    const ecosystemConnector = extendedConnectors.find(c => c._wallet?.isEcosystemWallet);
+    // Filter v3 connectors based on login status from status.js endpoint
+    // If logged in: only show ecosystem connector
+    // If not logged in: show regular v3 connectors (apple, passkey, google, etc.) but NOT ecosystem
+    // This logic only applies to v3 connectors (type === SEQUENCE_V3_CONNECTOR_TYPE)
+    const v3SocialConnectors = (0, react_1.useMemo)(() => sequenceConnectors.filter(c => c._wallet?.type === 'social' && !c._wallet?.id.includes('email')), [sequenceConnectors]);
+    const regularV3Connectors = (0, react_1.useMemo)(() => v3SocialConnectors.filter(c => !c._wallet?.isEcosystemWallet), [v3SocialConnectors]);
+    // For v3 connectors: show ecosystem if logged in (from status.js check), otherwise show regular v3 connectors
+    // Only apply this filtering if we have v3 connectors and auth status has been checked
+    const visibleV3ConnectorIds = (0, react_1.useMemo)(() => {
+        // While loading, show regular v3 socials to keep layout stable
+        if (isAuthStatusLoading || isV3WalletSignedIn === null) {
+            return new Set(regularV3Connectors.map(c => c.uid));
+        }
+        // Only apply auth-based filtering if we have v3 connectors
+        if (sequenceConnectors.length === 0) {
+            // No v3 connectors, return empty set (will be filtered out anyway)
+            return new Set();
+        }
+        if (isV3WalletSignedIn === true) {
+            // Logged in (status.js returned authState === 'signed-in'): only show ecosystem connector
+            return ecosystemConnector ? new Set([ecosystemConnector.uid]) : new Set();
+        }
+        else if (isV3WalletSignedIn === false) {
+            // Not logged in (status.js returned authState !== 'signed-in'): show regular v3 connectors (not ecosystem)
+            return new Set(regularV3Connectors.map(c => c.uid));
+        }
+        // Fallback: default to showing standard v3 socials to avoid empty space
+        return new Set(regularV3Connectors.map(c => c.uid));
+    }, [isAuthStatusLoading, isV3WalletSignedIn, ecosystemConnector, regularV3Connectors, sequenceConnectors.length]);
+    const socialAuthConnectors = extendedConnectors
         .filter(c => c._wallet?.type === 'social')
-        .filter(c => !c._wallet.id.includes('email'));
-    const walletConnectors = [...injectedConnectors, ...baseWalletConnectors].filter(c => hasConnectedSequenceUniversal ? c.name !== exports.SEQUENCE_UNIVERSAL_CONNECTOR_NAME : true);
-    const emailConnector = connectors.find(c => c._wallet?.id.includes('email'));
+        .filter(c => !c._wallet?.id.includes('email'))
+        .filter(c => {
+        // For v3 connectors, use the filtered list based on login status
+        const isV3Connector = c.type === SEQUENCE_V3_CONNECTOR_TYPE;
+        if (isV3Connector) {
+            return visibleV3ConnectorIds.has(c.uid);
+        }
+        // For non-v3 connectors, exclude ecosystem wallets
+        return !c._wallet?.isEcosystemWallet;
+    })
+        .sort((a, b) => {
+        const isPasskey = (wallet) => wallet?.id === 'passkey-v3';
+        if (isPasskey(a._wallet) && !isPasskey(b._wallet)) {
+            return -1;
+        }
+        if (!isPasskey(a._wallet) && isPasskey(b._wallet)) {
+            return 1;
+        }
+        return 0;
+    });
+    const walletConnectors = [...injectedConnectors, ...baseWalletConnectors].filter(connector => {
+        // Avoid duplicating ecosystem wallets in the main wallet list until the user already has a primary connection
+        return hasPrimarySequenceConnection ? true : !connector._wallet?.isEcosystemWallet;
+    });
+    // For v3: hide standard social only if logged in and ecosystem connector exists
+    // For non-v3: hide standard social if ecosystem connector exists
+    const shouldHideStandardSocial = isV3WalletSignedIn === true ? !!ecosystemConnector : false;
+    const emailConnector = !hideSocialConnectOptions && !shouldHideStandardSocial
+        ? extendedConnectors.find(c => c._wallet?.id.includes('email'))
+        : undefined;
+    const renderConnectorButton = (connector, options) => {
+        const commonProps = {
+            connector,
+            onConnect,
+            isDescriptive: options?.isDescriptive,
+            disableTooltip: options?.disableTooltip
+        };
+        // Special handling for ecosystem connector - use config data for display
+        if (connector._wallet?.isEcosystemWallet) {
+            const projectName = ecosystemProjectName || connector._wallet.name;
+            const logoUrl = ecosystemLogoUrl;
+            const renderEcosystemLogo = (logoProps) => ((0, jsx_runtime_1.jsx)(design_system_1.Image, { src: logoUrl || '', alt: projectName, disableAnimation: true, ...logoProps, style: {
+                    objectFit: 'contain',
+                    width: 'auto',
+                    minWidth: '30px',
+                    height: '100%',
+                    minHeight: '30px',
+                    maxWidth: '60px',
+                    maxHeight: '100%',
+                    ...logoProps.style
+                } }));
+            // Create a modified connector with config-based display properties
+            const displayConnector = {
+                ...connector,
+                _wallet: {
+                    ...connector._wallet,
+                    name: projectName,
+                    ctaText: ecosystemProjectName ? `Connect with ${ecosystemProjectName}` : connector._wallet.ctaText,
+                    // Override logos if logoUrl is available
+                    ...(logoUrl && {
+                        logoDark: renderEcosystemLogo,
+                        logoLight: renderEcosystemLogo
+                    })
+                }
+            };
+            return (0, jsx_runtime_1.jsx)(index_js_1.ConnectButton, { ...commonProps, connector: displayConnector });
+        }
+        switch (connector._wallet?.id) {
+            case 'guest-waas':
+                return (0, jsx_runtime_1.jsx)(index_js_1.GuestWaasConnectButton, { ...commonProps, setIsLoading: setIsLoading });
+            case 'google-waas':
+                return (0, jsx_runtime_1.jsx)(index_js_1.GoogleWaasConnectButton, { ...commonProps });
+            case 'apple-waas':
+                return (0, jsx_runtime_1.jsx)(index_js_1.AppleWaasConnectButton, { ...commonProps });
+            case 'epic-waas':
+                return (0, jsx_runtime_1.jsx)(index_js_1.EpicWaasConnectButton, { ...commonProps });
+            case 'X-waas':
+                return (0, jsx_runtime_1.jsx)(index_js_1.XWaasConnectButton, { ...commonProps });
+            default:
+                return (0, jsx_runtime_1.jsx)(index_js_1.ConnectButton, { ...commonProps });
+        }
+    };
+    const shouldShowRestorableSessionView = !!restorableSession && !restorableSessionDismissed;
     const onChangeEmail = ev => {
         setEmail(ev.target.value);
     };
     (0, react_1.useEffect)(() => {
-        setIsLoading(status === 'pending' || status === 'success');
-    }, [status]);
+        setIsLoading(status === 'pending' || status === 'success' || isRestoringSession);
+    }, [status, isRestoringSession]);
     const handleConnect = async (connector) => {
         if (connector._wallet.id === 'guest-waas') {
             const sequenceWaaS = new waas_1.SequenceWaaS({
@@ -218,7 +493,7 @@ const Connect = (props) => {
             });
             await sequenceWaaS.signIn({ guest: true }, 'Guest');
         }
-        connect({ connector }, {
+        return connect.mutate({ connector }, {
             onSuccess: result => {
                 if (result?.accounts[0]) {
                     config.onConnectSuccess?.(result.accounts[0]);
@@ -229,11 +504,46 @@ const Connect = (props) => {
             }
         });
     };
+    const onDismissRestorableSession = () => {
+        setRestorableSession(null);
+        setRestorableSessionDismissed(true);
+    };
+    const onRestoreSession = async () => {
+        if (!restorableSession) {
+            return;
+        }
+        const connector = restorableSession.connector;
+        const client = connector.client;
+        if (!client?.restoreSessionlessConnection) {
+            onDismissRestorableSession();
+            return;
+        }
+        setIsRestoringSession(true);
+        try {
+            const restored = await client.restoreSessionlessConnection();
+            if (!restored) {
+                onDismissRestorableSession();
+                return;
+            }
+            onDismissRestorableSession();
+            handleConnect(connector);
+        }
+        catch (error) {
+            console.warn('Failed to restore Sequence session', error);
+            onDismissRestorableSession();
+        }
+        finally {
+            setIsRestoringSession(false);
+        }
+    };
     const onConnect = (connector) => {
         if (signIn.useMock && mockConnector) {
             handleConnect(mockConnector);
             return;
         }
+        if (isSequenceV3Connector(connector)) {
+            preopenSequenceV3Popup(connector);
+        }
         if (connector._wallet.id === 'email') {
             const email = prompt('Auto-email login, please specify the email address:');
             if ('setEmail' in connector) {
@@ -295,22 +605,42 @@ const Connect = (props) => {
             setShowEmailWaasPinInput(false);
         }
     }, [emailConflictInfo]);
-    const showSocialConnectorSection = socialAuthConnectors.length > 0;
-    const showEmailInputSection = !!emailConnector;
+    // For v3: only show ecosystem connector section if logged in
+    // For non-v3: show ecosystem connector section if it exists
+    const showEcosystemConnectorSection = !hideSocialConnectOptions && !!ecosystemConnector && isV3WalletSignedIn === true;
+    const showSocialConnectorSection = !hideSocialConnectOptions && !shouldHideStandardSocial && socialAuthConnectors.length > 0;
+    const showEmailInputSection = !hideSocialConnectOptions && !shouldHideStandardSocial && !!emailConnector;
     const showMoreSocialOptions = socialAuthConnectors.length > MAX_ITEM_PER_ROW;
     const showMoreWalletOptions = walletConnectors.length > MAX_ITEM_PER_ROW;
     const socialConnectorsPerRow = showMoreSocialOptions && !descriptiveSocials ? MAX_ITEM_PER_ROW - 1 : socialAuthConnectors.length;
     const walletConnectorsPerRow = showMoreWalletOptions ? MAX_ITEM_PER_ROW - 1 : walletConnectors.length;
     const WalletConnectorsSection = () => {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.clsx)('flex gap-2 flex-row justify-center items-center', hasConnectedSequenceUniversal ? 'mt-4' : 'mt-6'), children: [walletConnectors.slice(0, walletConnectorsPerRow).map(connector => {
-                    return (0, jsx_runtime_1.jsx)(index_js_1.ConnectButton, { connector: connector, onConnect: onConnect }, connector.uid);
-                }), showMoreWalletOptions && (0, jsx_runtime_1.jsx)(index_js_1.ShowAllWalletsButton, { onClick: () => setShowExtendedList('wallet') })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.clsx)('flex gap-2 flex-row justify-center items-center', hasPrimarySequenceConnection ? 'mt-4' : 'mt-6'), children: [walletConnectors.slice(0, walletConnectorsPerRow).map(connector => {
+                    return ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-w-0", children: renderConnectorButton(connector, {
+                            isDescriptive: false,
+                            disableTooltip: false
+                        }) }, connector.uid));
+                }), showMoreWalletOptions && ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-w-0", children: (0, jsx_runtime_1.jsx)(index_js_1.ShowAllWalletsButton, { onClick: () => setShowExtendedList('wallet') }) }))] }));
     };
+    if (shouldShowRestorableSessionView && restorableSession) {
+        const walletProps = restorableSession.connector._wallet;
+        const Logo = walletProps ? (0, index_js_1.getLogo)(theme, walletProps) : undefined;
+        const continueTarget = walletProps?.isEcosystemWallet && walletProps?.name
+            ? walletProps.name
+            : restorableSession.walletAddress
+                ? (0, helpers_js_1.formatAddress)(restorableSession.walletAddress)
+                : walletProps?.name || 'your wallet';
+        const continueLabel = `Continue with ${continueTarget}`;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: isInline ? 'p-0' : 'p-4', children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-col justify-center text-primary items-center font-medium", style: {
+                        marginTop: isInline ? '0' : '2px'
+                    }, children: (0, jsx_runtime_1.jsx)(TitleWrapper, { isInline: isInline, children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "secondary", children: isRestoringSession ? 'Connecting...' : 'Continue your session' }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 mt-6", children: [(0, jsx_runtime_1.jsxs)(design_system_1.Card, { className: (0, clsx_1.clsx)('flex gap-3 items-center justify-start w-full h-14 px-4', isRestoringSession && 'opacity-50'), clickable: !isRestoringSession, onClick: onRestoreSession, "aria-disabled": isRestoringSession, children: [Logo && (0, jsx_runtime_1.jsx)(Logo, { className: "w-6 h-6" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", color: "muted", children: "Previous session" }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "normal", fontWeight: "bold", color: "primary", children: continueLabel })] })] }), (0, jsx_runtime_1.jsx)(design_system_1.Button, { label: "Cancel", variant: "glass", onClick: onDismissRestorableSession, disabled: isRestoringSession })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6", children: (0, jsx_runtime_1.jsx)(index_js_2.PoweredBySequence, {}) })] }));
+    }
     if (showExtendedList) {
         const SEARCHABLE_TRESHOLD = 8;
-        const connectors = showExtendedList === 'social' ? socialAuthConnectors : walletConnectors;
-        const searchable = connectors.length > SEARCHABLE_TRESHOLD;
-        return ((0, jsx_runtime_1.jsx)(ExtendedWalletList_js_1.ExtendedWalletList, { searchable: searchable, onGoBack: () => setShowExtendedList(null), onConnect: onConnect, connectors: connectors, title: showExtendedList === 'social' ? 'Continue with a social account' : 'Choose a wallet' }));
+        const connectorsForModal = showExtendedList === 'social' ? socialAuthConnectors : walletConnectors;
+        const searchable = connectorsForModal.length > SEARCHABLE_TRESHOLD;
+        const title = showExtendedList === 'social' ? 'Continue with a social account' : 'Choose a wallet';
+        return ((0, jsx_runtime_1.jsx)(ExtendedWalletList_js_1.ExtendedWalletList, { searchable: searchable, onGoBack: () => setShowExtendedList(null), onConnect: onConnect, connectors: connectorsForModal, isInline: isInline, title: title }));
     }
     if (waasStatusData?.errorResponse) {
         const errorMessage = waasStatusData.errorResponse.status === 451
@@ -320,7 +650,7 @@ const Connect = (props) => {
                     marginTop: isInline ? '0' : '2px'
                 }, children: [(0, jsx_runtime_1.jsx)(TitleWrapper, { isInline: isInline, children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "secondary", children: isLoading
                                 ? `Connecting...`
-                                : hasConnectedSocialOrSequenceUniversal
+                                : hasPrimarySequenceConnection
                                     ? 'Wallets'
                                     : `Connect ${projectName ? `to ${projectName}` : ''}` }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col items-center justify-center p-8", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center gap-4 mt-2 mb-2", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "secondary", className: "text-center text-lg font-medium text-negative", children: errorMessage }) }) })] }) }));
     }
@@ -328,11 +658,17 @@ const Connect = (props) => {
                     marginTop: isInline ? '0' : '2px'
                 }, children: [(0, jsx_runtime_1.jsx)(TitleWrapper, { isInline: isInline, children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "secondary", children: isLoading
                                 ? `Connecting...`
-                                : hasConnectedSocialOrSequenceUniversal
+                                : hasPrimarySequenceConnection
                                     ? 'Wallets'
-                                    : `Connect ${projectName ? `to ${projectName}` : ''}` }) }), isSigningLinkMessage && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", color: "muted", children: "Confirm the signature request to link your account" }) }))] }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center items-center pt-4", children: (0, jsx_runtime_1.jsx)(design_system_1.Spinner, {}) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideConnectedWallets && wallets.length > 0 && !showEmailWaasPinInput && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ConnectedWallets_js_1.ConnectedWallets, { wallets: wallets, linkedWallets: linkedWallets, disconnectWallet: disconnectWallet, unlinkWallet: handleUnlinkWallet, connectWallet: handleConnect, connectors: walletConnectors, embeddedWalletTitle: config.embeddedWalletTitle }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !hideExternalConnectOptions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(design_system_1.Divider, { className: "text-background-raised w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", color: "muted", children: !hasConnectedSocialOrSequenceUniversal ? 'Connect with a social account' : 'Connect another wallet' }) })] })) })] })), showEmailWaasPinInput ? ((0, jsx_runtime_1.jsx)(EmailWaasVerify_js_1.EmailWaasVerify, { sendEmailCode: sendEmailCode, error: emailAuthError, isLoading: emailAuthLoading, onConfirm: sendChallengeAnswer, resetError: resetError })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hasConnectedSocialOrSequenceUniversal && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Banner_js_1.Banner, { config: config }), showWalletAuthOptionsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ((0, jsx_runtime_1.jsx)(WalletConnectorsSection, {})), (0, jsx_runtime_1.jsx)("div", { className: "flex mt-6 gap-6 flex-col", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideSocialConnectOptions && showSocialConnectorSection && ((0, jsx_runtime_1.jsxs)("div", { className: `flex gap-2 justify-center items-center ${descriptiveSocials ? 'flex-col' : 'flex-row'}`, children: [socialAuthConnectors.slice(0, socialConnectorsPerRow).map(connector => {
-                                                            return ((0, jsx_runtime_1.jsx)("div", { className: "w-full", children: connector._wallet.id === 'guest-waas' ? ((0, jsx_runtime_1.jsx)(ConnectButton_js_1.GuestWaasConnectButton, { isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect, setIsLoading: setIsLoading })) : connector._wallet.id === 'google-waas' ? ((0, jsx_runtime_1.jsx)(index_js_1.GoogleWaasConnectButton, { isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect })) : connector._wallet.id === 'apple-waas' ? ((0, jsx_runtime_1.jsx)(index_js_1.AppleWaasConnectButton, { isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect })) : connector._wallet.id === 'epic-waas' ? ((0, jsx_runtime_1.jsx)(index_js_1.EpicWaasConnectButton, { isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect })) : connector._wallet.id === 'X-waas' ? ((0, jsx_runtime_1.jsx)(ConnectButton_js_1.XWaasConnectButton, { isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect })) : ((0, jsx_runtime_1.jsx)(index_js_1.ConnectButton, { disableTooltip: config?.signIn?.disableTooltipForDescriptiveSocials, isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect })) }, connector.uid));
-                                                        }), showMoreSocialOptions && ((0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(index_js_1.ShowAllWalletsButton, { onClick: () => setShowExtendedList('social') }) }))] })), !hideSocialConnectOptions && showSocialConnectorSection && showEmailInputSection && ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-row justify-center items-center", children: [(0, jsx_runtime_1.jsx)(design_system_1.Divider, { className: "mx-0 my-0 text-background-secondary grow" }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { className: "leading-4 h-4 text-sm", variant: "normal", fontWeight: "medium", color: "muted", children: "or" }), (0, jsx_runtime_1.jsx)(design_system_1.Divider, { className: "mx-0 my-0 text-background-secondary grow" })] })), showEmailInputSection && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("form", { onSubmit: onConnectInlineEmail, children: (0, jsx_runtime_1.jsx)(design_system_1.TextInput, { autoFocus: true, onChange: onChangeEmail, value: email, name: "email", placeholder: "Email address", controls: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emailAuthInProgress ? ((0, jsx_runtime_1.jsx)(design_system_1.Spinner, {})) : ((0, jsx_runtime_1.jsx)(design_system_1.IconButton, { type: "submit", size: "xs", icon: design_system_1.ArrowRightIcon, disabled: !(0, helpers_js_1.isEmailValid)(email) })) }), "data-1p-ignore": true }) }) }))] }) })] })), !showWalletAuthOptionsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ((0, jsx_runtime_1.jsx)(WalletConnectorsSection, {})), (0, jsx_runtime_1.jsx)("div", { className: "mt-6", children: (0, jsx_runtime_1.jsx)(index_js_2.PoweredBySequence, {}) })] }))] }))] }));
+                                    : `Connect ${projectName ? `to ${projectName}` : ''}` }) }), isSigningLinkMessage && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", color: "muted", children: "Confirm the signature request to link your account" }) }))] }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center items-center pt-4", children: (0, jsx_runtime_1.jsx)(design_system_1.Spinner, {}) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideConnectedWallets && wallets.length > 0 && !showEmailWaasPinInput && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ConnectedWallets_js_1.ConnectedWallets, { wallets: wallets, linkedWallets: linkedWallets, disconnectWallet: disconnectWallet, unlinkWallet: handleUnlinkWallet, connectWallet: handleConnect, connectors: walletConnectors, embeddedWalletTitle: config.embeddedWalletTitle }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !hideExternalConnectOptions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(design_system_1.Divider, { className: "text-background-raised w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", color: "muted", children: !hasPrimarySequenceConnection ? 'Connect with a social account' : 'Connect another wallet' }) })] })) })] })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showEmailWaasPinInput ? ((0, jsx_runtime_1.jsx)(EmailWaasVerify_js_1.EmailWaasVerify, { sendEmailCode: sendEmailCode, error: emailAuthError, isLoading: emailAuthLoading, onConfirm: sendChallengeAnswer, resetError: resetError })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hasAnyConnection && (0, jsx_runtime_1.jsx)(Banner_js_1.Banner, { config: baseConfig }), showWalletAuthOptionsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ((0, jsx_runtime_1.jsx)(WalletConnectorsSection, {})), !hasPrimarySequenceConnection && ((0, jsx_runtime_1.jsx)("div", { className: "flex mt-4 gap-6 flex-col", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showEcosystemConnectorSection && ecosystemConnector && ((0, jsx_runtime_1.jsx)("div", { className: `flex gap-2 ${descriptiveSocials ? 'flex-col items-start justify-start' : 'flex-row items-center justify-center'}`, children: (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: renderConnectorButton(ecosystemConnector, {
+                                                        isDescriptive: descriptiveSocials,
+                                                        disableTooltip: config?.signIn?.disableTooltipForDescriptiveSocials
+                                                    }) }) })), !hideSocialConnectOptions && showSocialConnectorSection && ((0, jsx_runtime_1.jsxs)("div", { className: `flex gap-2 ${descriptiveSocials ? 'flex-col items-start justify-start' : 'flex-row items-center justify-center'}`, children: [socialAuthConnectors.slice(0, socialConnectorsPerRow).map(connector => {
+                                                        return ((0, jsx_runtime_1.jsx)("div", { className: "w-full", children: renderConnectorButton(connector, {
+                                                                isDescriptive: descriptiveSocials,
+                                                                disableTooltip: config?.signIn?.disableTooltipForDescriptiveSocials
+                                                            }) }, connector.uid));
+                                                    }), showMoreSocialOptions && ((0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(index_js_1.ShowAllWalletsButton, { onClick: () => setShowExtendedList('social') }) }))] })), !hideSocialConnectOptions && showSocialConnectorSection && showEmailInputSection && ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 flex-row justify-center items-center", children: [(0, jsx_runtime_1.jsx)(design_system_1.Divider, { className: "mx-0 my-0 text-background-secondary grow" }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { className: "leading-4 h-4 text-sm", variant: "normal", fontWeight: "medium", color: "muted", children: "or" }), (0, jsx_runtime_1.jsx)(design_system_1.Divider, { className: "mx-0 my-0 text-background-secondary grow" })] })), showEmailInputSection && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("form", { onSubmit: onConnectInlineEmail, children: (0, jsx_runtime_1.jsx)(design_system_1.TextInput, { autoFocus: true, onChange: onChangeEmail, value: email, name: "email", placeholder: "Email address", controls: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emailAuthInProgress ? ((0, jsx_runtime_1.jsx)(design_system_1.Spinner, {})) : ((0, jsx_runtime_1.jsx)(design_system_1.IconButton, { type: "submit", size: "xs", icon: design_system_1.ArrowRightIcon, disabled: !(0, helpers_js_1.isEmailValid)(email) })) }), "data-1p-ignore": true }) }) }))] }) })), !showWalletAuthOptionsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ((0, jsx_runtime_1.jsx)(WalletConnectorsSection, {})), (0, jsx_runtime_1.jsx)("div", { className: "mt-6", children: (0, jsx_runtime_1.jsx)(index_js_2.PoweredBySequence, {}) })] })) })] }))] }));
 };
 exports.Connect = Connect;
 const TitleWrapper = ({ children, isInline }) => {