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

package/dist/esm/components/Connect/Connect.js

@@ -1,13 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ArrowRightIcon, Divider, IconButton, Image, ModalPrimitive, Spinner, Text, TextInput } from '@0xsequence/design-system';
+import { ArrowRightIcon, Button, Card, Divider, IconButton, Image, ModalPrimitive, Spinner, Text, TextInput, useTheme } from '@0xsequence/design-system';
 import { useGetWaasStatus } from '@0xsequence/hooks';
 import { SequenceWaaS } from '@0xsequence/waas';
 import { genUserId } from '@databeat/tracker';
 import { clsx } from 'clsx';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { appleAuthHelpers, useScript } from 'react-apple-signin-auth';
-import { useConnect, useConnections, useSignMessage } from 'wagmi';
+import { useConnect, useConnections, useConnectors, useSignMessage } from 'wagmi';
 import { EVENT_SOURCE } from '../../constants/analytics.js';
 import { LocalStorageKey } from '../../constants/localStorage.js';
 import { CHAIN_ID_FOR_SIGNATURE } from '../../constants/walletLinking.js';
@@ -17,42 +17,98 @@ import { useEmailAuth } from '../../hooks/useWaasEmailAuth.js';
 import { useWaasLinkWallet } from '../../hooks/useWaasLinkWallet.js';
 import { useWallets } from '../../hooks/useWallets.js';
 import { useWalletSettings } from '../../hooks/useWalletSettings.js';
-import { isEmailValid } from '../../utils/helpers.js';
-import { GuestWaasConnectButton, XWaasConnectButton } from '../ConnectButton/ConnectButton.js';
-import { AppleWaasConnectButton, ConnectButton, EpicWaasConnectButton, GoogleWaasConnectButton, ShowAllWalletsButton } from '../ConnectButton/index.js';
+import { formatAddress, isEmailValid } from '../../utils/helpers.js';
+import { AppleWaasConnectButton, ConnectButton, EpicWaasConnectButton, getLogo, GoogleWaasConnectButton, GuestWaasConnectButton, ShowAllWalletsButton, XWaasConnectButton } from '../ConnectButton/index.js';
 import { PoweredBySequence } from '../SequenceLogo/index.js';
 import { Banner } from './Banner.js';
 import { ConnectedWallets } from './ConnectedWallets.js';
 import { EmailWaasVerify } from './EmailWaasVerify.js';
 import { ExtendedWalletList } from './ExtendedWalletList.js';
 const MAX_ITEM_PER_ROW = 4;
-export const 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;
+};
 export const Connect = (props) => {
     useScript(appleAuthHelpers.APPLE_SCRIPT_SRC);
+    const { theme } = useTheme();
     const { analytics } = useAnalyticsContext();
     const { hideExternalConnectOptions, hideConnectedWallets, hideSocialConnectOptions } = 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 = useStorage();
     const descriptiveSocials = !!config?.signIn?.descriptiveSocials;
-    const [isLoading, setIsLoading] = useState(false);
-    const projectName = config?.signIn?.projectName;
     const showWalletAuthOptionsFirst = config?.signIn?.showWalletAuthOptionsFirst ?? false;
+    const [isLoading, setIsLoading] = useState(false);
+    const projectName = baseSignIn?.projectName;
+    const ecosystemProjectName = walletConfigurationSignIn?.projectName ?? baseSignIn?.projectName;
+    const ecosystemLogoUrl = walletConfigurationSignIn?.logoUrl ?? baseSignIn?.logoUrl;
     const [email, setEmail] = useState('');
     const [showEmailWaasPinInput, setShowEmailWaasPinInput] = useState(false);
     const [showExtendedList, setShowExtendedList] = useState(null);
-    const { status, connectors, connect } = useConnect();
-    const connections = useConnections();
+    const connect = useConnect();
+    const { status } = connect;
+    const connectors = useConnectors();
     const { signMessageAsync } = useSignMessage();
-    const { wallets, linkedWallets, disconnectWallet, refetchLinkedWallets } = useWallets();
+    const enabledProviderSet = useMemo(() => {
+        if (!props.enabledProviders) {
+            return undefined;
+        }
+        return new Set(props.enabledProviders.map(provider => provider.toUpperCase()));
+    }, [props.enabledProviders]);
+    const allowedChainIds = useMemo(() => {
+        if (!config?.chainIds || config.chainIds.length === 0) {
+            return undefined;
+        }
+        return new Set(config.chainIds);
+    }, [config?.chainIds]);
+    const filteredConnectors = 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 = useConnections();
     const { data: waasStatusData } = useGetWaasStatus();
-    const hasConnectedSequenceUniversal = connections.some(c => c.connector.name === 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 } = useWallets();
+    const waasConnection = useMemo(() => connections.find(c => c.connector?.type === 'sequence-waas'), [connections]);
     const { linkWallet, removeLinkedWallet } = useWaasLinkWallet(waasConnection?.connector);
     const [lastConnectedWallet, setLastConnectedWallet] = useState(undefined);
     const [isSigningLinkMessage, setIsSigningLinkMessage] = useState(false);
+    const [isRestoringSession, setIsRestoringSession] = useState(false);
+    const [restorableSessionDismissed, setRestorableSessionDismissed] = useState(false);
+    const [restorableSession, setRestorableSession] = useState(null);
     const handleUnlinkWallet = async (address) => {
         try {
             await removeLinkedWallet(address);
@@ -83,7 +139,7 @@ export 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) {
@@ -137,21 +193,129 @@ export 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 = 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 = useMemo(() => extendedConnectors.filter((connector) => connector.type === SEQUENCE_V3_CONNECTOR_TYPE), [extendedConnectors]);
+    const findSequenceConnectorByLoginMethod = 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]);
+    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;
         }
@@ -161,18 +325,19 @@ export 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;
         }
@@ -196,17 +361,127 @@ export 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 = useMemo(() => sequenceConnectors.filter(c => c._wallet?.type === 'social' && !c._wallet?.id.includes('email')), [sequenceConnectors]);
+    const regularV3Connectors = 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 = 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 !== 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) => (_jsx(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 _jsx(ConnectButton, { ...commonProps, connector: displayConnector });
+        }
+        switch (connector._wallet?.id) {
+            case 'guest-waas':
+                return _jsx(GuestWaasConnectButton, { ...commonProps, setIsLoading: setIsLoading });
+            case 'google-waas':
+                return _jsx(GoogleWaasConnectButton, { ...commonProps });
+            case 'apple-waas':
+                return _jsx(AppleWaasConnectButton, { ...commonProps });
+            case 'epic-waas':
+                return _jsx(EpicWaasConnectButton, { ...commonProps });
+            case 'X-waas':
+                return _jsx(XWaasConnectButton, { ...commonProps });
+            default:
+                return _jsx(ConnectButton, { ...commonProps });
+        }
+    };
+    const shouldShowRestorableSessionView = !!restorableSession && !restorableSessionDismissed;
     const onChangeEmail = ev => {
         setEmail(ev.target.value);
     };
     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 SequenceWaaS({
@@ -215,7 +490,7 @@ export 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]);
@@ -226,11 +501,46 @@ export 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) {
@@ -292,22 +602,42 @@ export 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 (_jsxs("div", { className: clsx('flex gap-2 flex-row justify-center items-center', hasConnectedSequenceUniversal ? 'mt-4' : 'mt-6'), children: [walletConnectors.slice(0, walletConnectorsPerRow).map(connector => {
-                    return _jsx(ConnectButton, { connector: connector, onConnect: onConnect }, connector.uid);
-                }), showMoreWalletOptions && _jsx(ShowAllWalletsButton, { onClick: () => setShowExtendedList('wallet') })] }));
+        return (_jsxs("div", { className: clsx('flex gap-2 flex-row justify-center items-center', hasPrimarySequenceConnection ? 'mt-4' : 'mt-6'), children: [walletConnectors.slice(0, walletConnectorsPerRow).map(connector => {
+                    return (_jsx("div", { className: "flex-1 min-w-0", children: renderConnectorButton(connector, {
+                            isDescriptive: false,
+                            disableTooltip: false
+                        }) }, connector.uid));
+                }), showMoreWalletOptions && (_jsx("div", { className: "flex-1 min-w-0", children: _jsx(ShowAllWalletsButton, { onClick: () => setShowExtendedList('wallet') }) }))] }));
     };
+    if (shouldShowRestorableSessionView && restorableSession) {
+        const walletProps = restorableSession.connector._wallet;
+        const Logo = walletProps ? getLogo(theme, walletProps) : undefined;
+        const continueTarget = walletProps?.isEcosystemWallet && walletProps?.name
+            ? walletProps.name
+            : restorableSession.walletAddress
+                ? formatAddress(restorableSession.walletAddress)
+                : walletProps?.name || 'your wallet';
+        const continueLabel = `Continue with ${continueTarget}`;
+        return (_jsxs("div", { className: isInline ? 'p-0' : 'p-4', children: [_jsx("div", { className: "flex flex-col justify-center text-primary items-center font-medium", style: {
+                        marginTop: isInline ? '0' : '2px'
+                    }, children: _jsx(TitleWrapper, { isInline: isInline, children: _jsx(Text, { color: "secondary", children: isRestoringSession ? 'Connecting...' : 'Continue your session' }) }) }), _jsxs("div", { className: "flex flex-col gap-4 mt-6", children: [_jsxs(Card, { className: 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 && _jsx(Logo, { className: "w-6 h-6" }), _jsxs("div", { className: "flex flex-col", children: [_jsx(Text, { variant: "small", color: "muted", children: "Previous session" }), _jsx(Text, { variant: "normal", fontWeight: "bold", color: "primary", children: continueLabel })] })] }), _jsx(Button, { label: "Cancel", variant: "glass", onClick: onDismissRestorableSession, disabled: isRestoringSession })] }), _jsx("div", { className: "mt-6", children: _jsx(PoweredBySequence, {}) })] }));
+    }
     if (showExtendedList) {
         const SEARCHABLE_TRESHOLD = 8;
-        const connectors = showExtendedList === 'social' ? socialAuthConnectors : walletConnectors;
-        const searchable = connectors.length > SEARCHABLE_TRESHOLD;
-        return (_jsx(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 (_jsx(ExtendedWalletList, { searchable: searchable, onGoBack: () => setShowExtendedList(null), onConnect: onConnect, connectors: connectorsForModal, isInline: isInline, title: title }));
     }
     if (waasStatusData?.errorResponse) {
         const errorMessage = waasStatusData.errorResponse.status === 451
@@ -317,7 +647,7 @@ export const Connect = (props) => {
                     marginTop: isInline ? '0' : '2px'
                 }, children: [_jsx(TitleWrapper, { isInline: isInline, children: _jsx(Text, { color: "secondary", children: isLoading
                                 ? `Connecting...`
-                                : hasConnectedSocialOrSequenceUniversal
+                                : hasPrimarySequenceConnection
                                     ? 'Wallets'
                                     : `Connect ${projectName ? `to ${projectName}` : ''}` }) }), _jsx("div", { className: "relative flex flex-col items-center justify-center p-8", children: _jsx("div", { className: "flex flex-col items-center gap-4 mt-2 mb-2", children: _jsx(Text, { color: "secondary", className: "text-center text-lg font-medium text-negative", children: errorMessage }) }) })] }) }));
     }
@@ -325,11 +655,17 @@ export const Connect = (props) => {
                     marginTop: isInline ? '0' : '2px'
                 }, children: [_jsx(TitleWrapper, { isInline: isInline, children: _jsx(Text, { color: "secondary", children: isLoading
                                 ? `Connecting...`
-                                : hasConnectedSocialOrSequenceUniversal
+                                : hasPrimarySequenceConnection
                                     ? 'Wallets'
-                                    : `Connect ${projectName ? `to ${projectName}` : ''}` }) }), isSigningLinkMessage && (_jsx("div", { className: "mt-4", children: _jsx(Text, { variant: "small", color: "muted", children: "Confirm the signature request to link your account" }) }))] }), isLoading ? (_jsx("div", { className: "flex justify-center items-center pt-4", children: _jsx(Spinner, {}) })) : (_jsxs(_Fragment, { children: [!hideConnectedWallets && wallets.length > 0 && !showEmailWaasPinInput && (_jsxs(_Fragment, { children: [_jsx(ConnectedWallets, { wallets: wallets, linkedWallets: linkedWallets, disconnectWallet: disconnectWallet, unlinkWallet: handleUnlinkWallet, connectWallet: handleConnect, connectors: walletConnectors, embeddedWalletTitle: config.embeddedWalletTitle }), _jsx(_Fragment, { children: !hideExternalConnectOptions && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: "text-background-raised w-full" }), _jsx("div", { className: "flex justify-center", children: _jsx(Text, { variant: "small", color: "muted", children: !hasConnectedSocialOrSequenceUniversal ? 'Connect with a social account' : 'Connect another wallet' }) })] })) })] })), showEmailWaasPinInput ? (_jsx(EmailWaasVerify, { sendEmailCode: sendEmailCode, error: emailAuthError, isLoading: emailAuthLoading, onConfirm: sendChallengeAnswer, resetError: resetError })) : (_jsxs(_Fragment, { children: [!hasConnectedSocialOrSequenceUniversal && (_jsxs(_Fragment, { children: [_jsx(Banner, { config: config }), showWalletAuthOptionsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && (_jsx(WalletConnectorsSection, {})), _jsx("div", { className: "flex mt-6 gap-6 flex-col", children: _jsxs(_Fragment, { children: [!hideSocialConnectOptions && showSocialConnectorSection && (_jsxs("div", { className: `flex gap-2 justify-center items-center ${descriptiveSocials ? 'flex-col' : 'flex-row'}`, children: [socialAuthConnectors.slice(0, socialConnectorsPerRow).map(connector => {
-                                                            return (_jsx("div", { className: "w-full", children: connector._wallet.id === 'guest-waas' ? (_jsx(GuestWaasConnectButton, { isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect, setIsLoading: setIsLoading })) : connector._wallet.id === 'google-waas' ? (_jsx(GoogleWaasConnectButton, { isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect })) : connector._wallet.id === 'apple-waas' ? (_jsx(AppleWaasConnectButton, { isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect })) : connector._wallet.id === 'epic-waas' ? (_jsx(EpicWaasConnectButton, { isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect })) : connector._wallet.id === 'X-waas' ? (_jsx(XWaasConnectButton, { isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect })) : (_jsx(ConnectButton, { disableTooltip: config?.signIn?.disableTooltipForDescriptiveSocials, isDescriptive: descriptiveSocials, connector: connector, onConnect: onConnect })) }, connector.uid));
-                                                        }), showMoreSocialOptions && (_jsx("div", { className: "w-full", children: _jsx(ShowAllWalletsButton, { onClick: () => setShowExtendedList('social') }) }))] })), !hideSocialConnectOptions && showSocialConnectorSection && showEmailInputSection && (_jsxs("div", { className: "flex gap-4 flex-row justify-center items-center", children: [_jsx(Divider, { className: "mx-0 my-0 text-background-secondary grow" }), _jsx(Text, { className: "leading-4 h-4 text-sm", variant: "normal", fontWeight: "medium", color: "muted", children: "or" }), _jsx(Divider, { className: "mx-0 my-0 text-background-secondary grow" })] })), showEmailInputSection && (_jsx(_Fragment, { children: _jsx("form", { onSubmit: onConnectInlineEmail, children: _jsx(TextInput, { autoFocus: true, onChange: onChangeEmail, value: email, name: "email", placeholder: "Email address", controls: _jsx(_Fragment, { children: emailAuthInProgress ? (_jsx(Spinner, {})) : (_jsx(IconButton, { type: "submit", size: "xs", icon: ArrowRightIcon, disabled: !isEmailValid(email) })) }), "data-1p-ignore": true }) }) }))] }) })] })), !showWalletAuthOptionsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && (_jsx(WalletConnectorsSection, {})), _jsx("div", { className: "mt-6", children: _jsx(PoweredBySequence, {}) })] }))] }))] }));
+                                    : `Connect ${projectName ? `to ${projectName}` : ''}` }) }), isSigningLinkMessage && (_jsx("div", { className: "mt-4", children: _jsx(Text, { variant: "small", color: "muted", children: "Confirm the signature request to link your account" }) }))] }), isLoading ? (_jsx("div", { className: "flex justify-center items-center pt-4", children: _jsx(Spinner, {}) })) : (_jsxs(_Fragment, { children: [!hideConnectedWallets && wallets.length > 0 && !showEmailWaasPinInput && (_jsxs(_Fragment, { children: [_jsx(ConnectedWallets, { wallets: wallets, linkedWallets: linkedWallets, disconnectWallet: disconnectWallet, unlinkWallet: handleUnlinkWallet, connectWallet: handleConnect, connectors: walletConnectors, embeddedWalletTitle: config.embeddedWalletTitle }), _jsx(_Fragment, { children: !hideExternalConnectOptions && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: "text-background-raised w-full" }), _jsx("div", { className: "flex justify-center", children: _jsx(Text, { variant: "small", color: "muted", children: !hasPrimarySequenceConnection ? 'Connect with a social account' : 'Connect another wallet' }) })] })) })] })), _jsx(_Fragment, { children: showEmailWaasPinInput ? (_jsx(EmailWaasVerify, { sendEmailCode: sendEmailCode, error: emailAuthError, isLoading: emailAuthLoading, onConfirm: sendChallengeAnswer, resetError: resetError })) : (_jsxs(_Fragment, { children: [!hasAnyConnection && _jsx(Banner, { config: baseConfig }), showWalletAuthOptionsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && (_jsx(WalletConnectorsSection, {})), !hasPrimarySequenceConnection && (_jsx("div", { className: "flex mt-4 gap-6 flex-col", children: _jsxs(_Fragment, { children: [showEcosystemConnectorSection && ecosystemConnector && (_jsx("div", { className: `flex gap-2 ${descriptiveSocials ? 'flex-col items-start justify-start' : 'flex-row items-center justify-center'}`, children: _jsx("div", { className: "w-full", children: renderConnectorButton(ecosystemConnector, {
+                                                        isDescriptive: descriptiveSocials,
+                                                        disableTooltip: config?.signIn?.disableTooltipForDescriptiveSocials
+                                                    }) }) })), !hideSocialConnectOptions && showSocialConnectorSection && (_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 (_jsx("div", { className: "w-full", children: renderConnectorButton(connector, {
+                                                                isDescriptive: descriptiveSocials,
+                                                                disableTooltip: config?.signIn?.disableTooltipForDescriptiveSocials
+                                                            }) }, connector.uid));
+                                                    }), showMoreSocialOptions && (_jsx("div", { className: "w-full", children: _jsx(ShowAllWalletsButton, { onClick: () => setShowExtendedList('social') }) }))] })), !hideSocialConnectOptions && showSocialConnectorSection && showEmailInputSection && (_jsxs("div", { className: "flex gap-4 flex-row justify-center items-center", children: [_jsx(Divider, { className: "mx-0 my-0 text-background-secondary grow" }), _jsx(Text, { className: "leading-4 h-4 text-sm", variant: "normal", fontWeight: "medium", color: "muted", children: "or" }), _jsx(Divider, { className: "mx-0 my-0 text-background-secondary grow" })] })), showEmailInputSection && (_jsx(_Fragment, { children: _jsx("form", { onSubmit: onConnectInlineEmail, children: _jsx(TextInput, { autoFocus: true, onChange: onChangeEmail, value: email, name: "email", placeholder: "Email address", controls: _jsx(_Fragment, { children: emailAuthInProgress ? (_jsx(Spinner, {})) : (_jsx(IconButton, { type: "submit", size: "xs", icon: ArrowRightIcon, disabled: !isEmailValid(email) })) }), "data-1p-ignore": true }) }) }))] }) })), !showWalletAuthOptionsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && (_jsx(WalletConnectorsSection, {})), _jsx("div", { className: "mt-6", children: _jsx(PoweredBySequence, {}) })] })) })] }))] }));
 };
 const TitleWrapper = ({ children, isInline }) => {
     if (isInline) {