From c3d8229d0101e7494f1f5e8b5b3d837a5c728033 Mon Sep 17 00:00:00 2001 From: samuelea Date: Thu, 27 Nov 2025 17:47:48 -0500 Subject: [PATCH 1/4] change injected connector logic so that it shows before the others --- .../src/components/Connect/Connect.tsx | 49 ++++++++++++++----- 1 file changed, 37 insertions(+), 12 deletions(-) diff --git a/packages/connect/src/components/Connect/Connect.tsx b/packages/connect/src/components/Connect/Connect.tsx index e11448c1e..efa1dce27 100644 --- a/packages/connect/src/components/Connect/Connect.tsx +++ b/packages/connect/src/components/Connect/Connect.tsx @@ -70,8 +70,6 @@ export const Connect = (props: ConnectProps) => { const { wallets, linkedWallets, disconnectWallet, refetchLinkedWallets } = useWallets() const { data: waasStatusData } = useGetWaasStatus() - const hasInjectedSequenceConnector = connectors.some(c => c.id === 'app.sequence') - const hasConnectedSequenceUniversal = connections.some(c => c.connector.name === SEQUENCE_UNIVERSAL_CONNECTOR_NAME) const hasConnectedSocialOrSequenceUniversal = connections.some(c => (c.connector as ExtendedConnector)?._wallet?.type === 'social') || hasConnectedSequenceUniversal @@ -184,33 +182,59 @@ export const Connect = (props: ConnectProps) => { .filter(c => { return c._wallet && (c._wallet.type === 'wallet' || c._wallet.type === undefined) }) - // Remove sequence if wallet extension detected + // Remove metamask if metamask is detected + .filter(c => { + const isMetamaskInjected = window.ethereum?.isMetaMask + + if (c._wallet?.id === 'metamask-wallet' && isMetamaskInjected) { + return false + } + + return true + }) + // Remove coinbase if coinbase is detected .filter(c => { - if (c._wallet?.id === 'sequence' && hasInjectedSequenceConnector) { + const isCoinbaseInjected = window.ethereum?.isCoinbaseWallet + + if (c._wallet?.id === 'coinbase-wallet' && isCoinbaseInjected) { return false } return true }) + const mockConnector = baseWalletConnectors.find(connector => { return connector._wallet.id === 'mock' }) // EIP-6963 connectors will not have the _wallet property const injectedConnectors: ExtendedConnector[] = connectors - .filter(c => c.type === 'injected') - // Remove the injected connectors when another connector is already in the base connectors .filter(connector => { - if (connector.id === 'com.coinbase.wallet') { - return !connectors.find(connector => (connector as ExtendedConnector)?._wallet?.id === 'coinbase-wallet') + // Keep the connector when it is an EIP-6963 connector + if (connector.type === 'injected') { + return true } - if (connector.id === 'io.metamask') { - return !connectors.find(connector => (connector as ExtendedConnector)?._wallet?.id === 'metamask-wallet') + + // We check if SDK-generated connectors is actually an injected connector + const isMetamaskInjected = window.ethereum?.isMetaMask + + if ((connector as ExtendedConnector)._wallet?.id === 'metamask-wallet' && isMetamaskInjected) { + return true } - return true + const isCoinbaseInjected = window.ethereum?.isCoinbaseWallet + + if ((connector as ExtendedConnector)._wallet?.id === 'coinbase-wallet' && isCoinbaseInjected) { + return true + } + + return false }) .map(connector => { + if (connector?._wallet) { + return connector as ExtendedConnector + } + const Logo = (props: LogoProps) => { return {connector.name} } @@ -230,9 +254,10 @@ export const Connect = (props: ConnectProps) => { const socialAuthConnectors = (connectors as ExtendedConnector[]) .filter(c => c._wallet?.type === 'social') .filter(c => !c._wallet.id.includes('email')) - const walletConnectors = [...baseWalletConnectors, ...injectedConnectors].filter(c => + const walletConnectors = [...injectedConnectors, ...baseWalletConnectors].filter(c => hasConnectedSequenceUniversal ? c.name !== SEQUENCE_UNIVERSAL_CONNECTOR_NAME : true ) + const emailConnector = (connectors as ExtendedConnector[]).find(c => c._wallet?.id.includes('email')) const onChangeEmail: ChangeEventHandler = ev => { From 8594c002638381d2e9a414e655915b9494b043e7 Mon Sep 17 00:00:00 2001 From: samuelea Date: Thu, 27 Nov 2025 18:16:16 -0500 Subject: [PATCH 2/4] added ability to show universal wallets first --- examples/react/src/config.ts | 3 +- .../src/components/Connect/Connect.tsx | 36 +++++++++++-------- packages/connect/src/types.ts | 1 + 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/examples/react/src/config.ts b/examples/react/src/config.ts index 6ea37e618..c9f25e385 100644 --- a/examples/react/src/config.ts +++ b/examples/react/src/config.ts @@ -27,7 +27,8 @@ export const connectConfig: ConnectConfig = { defaultTheme: 'dark', signIn: { projectName: 'Sequence Web SDK Demo', - useMock: isDebugMode + useMock: isDebugMode, + showUniversalWalletsFirst: false }, // Custom css injected into shadow dom // customCSS: ` diff --git a/packages/connect/src/components/Connect/Connect.tsx b/packages/connect/src/components/Connect/Connect.tsx index efa1dce27..46ec7d61b 100644 --- a/packages/connect/src/components/Connect/Connect.tsx +++ b/packages/connect/src/components/Connect/Connect.tsx @@ -59,6 +59,7 @@ export const Connect = (props: ConnectProps) => { const descriptiveSocials = !!config?.signIn?.descriptiveSocials const [isLoading, setIsLoading] = useState(false) const projectName = config?.signIn?.projectName + const showUniversalWalletsFirst = config?.signIn?.showUniversalWalletsFirst ?? false const [email, setEmail] = useState('') const [showEmailWaasPinInput, setShowEmailWaasPinInput] = useState(false) @@ -384,6 +385,18 @@ export const Connect = (props: ConnectProps) => { const socialConnectorsPerRow = showMoreSocialOptions && !descriptiveSocials ? MAX_ITEM_PER_ROW - 1 : socialAuthConnectors.length const walletConnectorsPerRow = showMoreWalletOptions ? MAX_ITEM_PER_ROW - 1 : walletConnectors.length + const WalletConnectorsSection = () => { + return ( + <> +
+ {walletConnectors.slice(0, walletConnectorsPerRow).map(connector => { + return + })} +
+ + ) + } + if (showExtendedList) { const SEARCHABLE_TRESHOLD = 8 const connectors = showExtendedList === 'social' ? socialAuthConnectors : walletConnectors @@ -507,6 +520,11 @@ export const Connect = (props: ConnectProps) => { <> + {showUniversalWalletsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ( +
+ +
+ )}
<> {!hideSocialConnectOptions && showSocialConnectorSection && ( @@ -599,20 +617,10 @@ export const Connect = (props: ConnectProps) => {
)} - {!hideExternalConnectOptions && walletConnectors.length > 0 && ( - <> -
- {walletConnectors.slice(0, walletConnectorsPerRow).map(connector => { - return - })} - {showMoreWalletOptions && setShowExtendedList('wallet')} />} -
- + {!showUniversalWalletsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ( +
+ +
)}
diff --git a/packages/connect/src/types.ts b/packages/connect/src/types.ts index 0c39cd171..b30ee7cfd 100644 --- a/packages/connect/src/types.ts +++ b/packages/connect/src/types.ts @@ -71,6 +71,7 @@ export interface ConnectConfig { position?: ModalPosition signIn?: { logoUrl?: string + showUniversalWalletsFirst?: boolean descriptiveSocials?: boolean disableTooltipForDescriptiveSocials?: boolean projectName?: string From b6f95f556d216d36b6a4310e199173b4c004df7f Mon Sep 17 00:00:00 2001 From: samuelea Date: Thu, 27 Nov 2025 18:21:06 -0500 Subject: [PATCH 3/4] updated walletconnectorssection div --- .../src/components/Connect/Connect.tsx | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/packages/connect/src/components/Connect/Connect.tsx b/packages/connect/src/components/Connect/Connect.tsx index 46ec7d61b..d8f7d0af8 100644 --- a/packages/connect/src/components/Connect/Connect.tsx +++ b/packages/connect/src/components/Connect/Connect.tsx @@ -387,13 +387,12 @@ export const Connect = (props: ConnectProps) => { const WalletConnectorsSection = () => { return ( - <> -
- {walletConnectors.slice(0, walletConnectorsPerRow).map(connector => { - return - })} -
- +
+ {walletConnectors.slice(0, walletConnectorsPerRow).map(connector => { + return + })} + {showMoreWalletOptions && setShowExtendedList('wallet')} />} +
) } @@ -521,9 +520,7 @@ export const Connect = (props: ConnectProps) => { {showUniversalWalletsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ( -
- -
+ )}
<> @@ -618,9 +615,7 @@ export const Connect = (props: ConnectProps) => { )} {!showUniversalWalletsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ( -
- -
+ )}
From 1c4cf1911afd3037e66c6e8c5ba8167fa64932a5 Mon Sep 17 00:00:00 2001 From: Taylan Pince Date: Fri, 28 Nov 2025 12:50:45 +0100 Subject: [PATCH 4/4] Rename showUniversalWalletsFirst to showWalletAuthOptionsFirst --- examples/react/src/config.ts | 2 +- packages/connect/src/components/Connect/Connect.tsx | 6 +++--- packages/connect/src/types.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/react/src/config.ts b/examples/react/src/config.ts index c9f25e385..f7b9be30a 100644 --- a/examples/react/src/config.ts +++ b/examples/react/src/config.ts @@ -28,7 +28,7 @@ export const connectConfig: ConnectConfig = { signIn: { projectName: 'Sequence Web SDK Demo', useMock: isDebugMode, - showUniversalWalletsFirst: false + showWalletAuthOptionsFirst: false }, // Custom css injected into shadow dom // customCSS: ` diff --git a/packages/connect/src/components/Connect/Connect.tsx b/packages/connect/src/components/Connect/Connect.tsx index d8f7d0af8..91a63cbd8 100644 --- a/packages/connect/src/components/Connect/Connect.tsx +++ b/packages/connect/src/components/Connect/Connect.tsx @@ -59,7 +59,7 @@ export const Connect = (props: ConnectProps) => { const descriptiveSocials = !!config?.signIn?.descriptiveSocials const [isLoading, setIsLoading] = useState(false) const projectName = config?.signIn?.projectName - const showUniversalWalletsFirst = config?.signIn?.showUniversalWalletsFirst ?? false + const showWalletAuthOptionsFirst = config?.signIn?.showWalletAuthOptionsFirst ?? false const [email, setEmail] = useState('') const [showEmailWaasPinInput, setShowEmailWaasPinInput] = useState(false) @@ -519,7 +519,7 @@ export const Connect = (props: ConnectProps) => { <> - {showUniversalWalletsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ( + {showWalletAuthOptionsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ( )}
@@ -614,7 +614,7 @@ export const Connect = (props: ConnectProps) => {
)} - {!showUniversalWalletsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ( + {!showWalletAuthOptionsFirst && !hideExternalConnectOptions && walletConnectors.length > 0 && ( )}
diff --git a/packages/connect/src/types.ts b/packages/connect/src/types.ts index b30ee7cfd..a70b7c6cb 100644 --- a/packages/connect/src/types.ts +++ b/packages/connect/src/types.ts @@ -71,7 +71,7 @@ export interface ConnectConfig { position?: ModalPosition signIn?: { logoUrl?: string - showUniversalWalletsFirst?: boolean + showWalletAuthOptionsFirst?: boolean descriptiveSocials?: boolean disableTooltipForDescriptiveSocials?: boolean projectName?: string