diff --git a/packages/checkout/src/shared/styles.css.ts b/packages/checkout/src/shared/styles.css.ts index 2c9d9a2d..265c4554 100644 --- a/packages/checkout/src/shared/styles.css.ts +++ b/packages/checkout/src/shared/styles.css.ts @@ -2,12 +2,12 @@ import { style, globalStyle } from '@vanilla-extract/css' export const walletContent = style({}) -// Will affect the close button in the modal -globalStyle(`${walletContent} + button`, { - backgroundColor: 'transparent' -}) +// // Will affect the close button in the modal +// globalStyle(`${walletContent} + button`, { +// backgroundColor: 'transparent' +// }) -globalStyle(`${walletContent} + button > svg`, { - width: '20px', - height: '20px' -}) +// globalStyle(`${walletContent} + button > svg`, { +// width: '20px', +// height: '20px' +// }) diff --git a/packages/connectors/src/defaultConnectors.tsx b/packages/connectors/src/defaultConnectors.tsx index 2c6eec10..069a46ef 100644 --- a/packages/connectors/src/defaultConnectors.tsx +++ b/packages/connectors/src/defaultConnectors.tsx @@ -20,9 +20,6 @@ export const getDefaultConnectors = ({ appName }: GetDefaultConnectors): CreateConnectorFn[] => { const connectors = getKitConnectWallets(projectAccessKey, [ - coinbaseWallet({ - appName - }), email({ defaultNetwork: defaultChainId, connect: { @@ -56,16 +53,19 @@ export const getDefaultConnectors = ({ app: appName } }), - metamask(), - walletConnect({ - projectId: walletConnectProjectId - }), sequence({ defaultNetwork: defaultChainId, connect: { app: appName, projectAccessKey } + }), + walletConnect({ + projectId: walletConnectProjectId + }), + metamask(), + coinbaseWallet({ + appName }) ]) diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/ExtendedWalletList.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/ExtendedWalletList.tsx index 93ab7ba5..23252de2 100644 --- a/packages/kit/src/components/KitProvider/ConnectWalletContent/ExtendedWalletList.tsx +++ b/packages/kit/src/components/KitProvider/ConnectWalletContent/ExtendedWalletList.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' -import { Box, Text, useTheme } from '@0xsequence/design-system' +import { Box, Button, Text, TokenImage, useTheme } from '@0xsequence/design-system' import { useConnect } from 'wagmi' import { ExtendedConnector } from '../../../utils/getKitConnectWallets' @@ -19,44 +19,36 @@ export const ExtendedWalletList = ({ onConnect, connectors }: ExtendedWalletList return ( {connectors.map(connector => { - const Logo = - theme === 'dark' - ? (connector._wallet.logoDark as React.FunctionComponent) - : (connector._wallet.logoLight as React.FunctionComponent) + const Logo = theme === 'dark' ? connector._wallet.logoDark : connector._wallet.logoLight const walletName = connector._wallet.name const connectorId = connector._wallet.id return ( - ( + + + + )} onClick={() => onConnect(connector)} - > - - {walletName} - {isPending} - - - - - + label={ + + {walletName} + {isPending} + + } + /> ) })} diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx index 75db33ec..ef052491 100644 --- a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx +++ b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx @@ -10,9 +10,12 @@ import { TextInput, vars, useTheme, - Spinner + Spinner, + Image, + IconButton, + Tooltip } from '@0xsequence/design-system' -import { useConnect, useAccount } from 'wagmi' +import { useConnect, useAccount, Connector } from 'wagmi' import { EMAIL_CONNECTOR_LOCAL_STORAGE_KEY } from '@0xsequence/kit-connectors' import { GoogleLogin } from '@react-oauth/google' import { appleAuthHelpers, useScript } from 'react-apple-signin-auth' @@ -39,7 +42,6 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { useScript(appleAuthHelpers.APPLE_SCRIPT_SRC) const { isConnected } = useAccount() - const { theme } = useTheme() const { config = {} } = props const { signIn = {} } = config as KitConfig const { @@ -54,6 +56,26 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { const [showEmailWaasPinInput, setShowEmailWaasPinInput] = useState(false) const [waasEmailPinCode, setWaasEmailPinCode] = useState([]) const { connectors: baseConnectors, connect } = useConnect() + + // EIP-6963 connectors will not have the _wallet property + const injectedConnectors: ExtendedConnector[] = baseConnectors + .filter(c => c.type === 'injected' && !c.hasOwnProperty('_wallet')) + .map(connector => { + const Logo = () => { + return {connector.name} + } + + return { + ...connector, + _wallet: { + id: connector.id, + name: connector.name, + logoLight: Logo, + logoDark: Logo + } + } + }) + /* @ts-ignore-next-line */ const connectors = baseConnectors.filter(c => !!c?._wallet) as ExtendedConnector[] const [showExtendedList, setShowExtendedList] = useState(false) @@ -62,14 +84,19 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { }) const emailConnector = connectors.find(c => c._wallet.id.includes('email')) - const walletConnectors = connectors - .filter(connector => { - const foundOption = walletAuthOptions.find(authOption => authOption === connector._wallet.id) - return !!foundOption - }) - .sort((a, b) => { - return walletAuthOptions.indexOf(a._wallet.id) - walletAuthOptions.indexOf(b._wallet.id) - }) + const walletConnectors = [ + ...connectors + .filter(connector => { + const foundOption = + walletAuthOptions.find(authOption => authOption === connector._wallet.id) && + !injectedConnectors.some(injected => injected.name === connector.name) + return !!foundOption + }) + .sort((a, b) => { + return walletAuthOptions.indexOf(a._wallet.id) - walletAuthOptions.indexOf(b._wallet.id) + }), + ...injectedConnectors + ] const socialAuthConnectors = connectors .filter(connector => { @@ -80,10 +107,9 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { return socialAuthOptions.indexOf(a._wallet.id) - socialAuthOptions.indexOf(b._wallet.id) }) - const displayExtendedListButton = walletConnectors.length > 4 + const displayExtendedListButton = walletConnectors.length > 7 - const onChangeEmail = (ev: React.ChangeEventHandler) => { - /* @ts-ignore-next-line */ + const onChangeEmail: React.ChangeEventHandler = ev => { setEmail(ev.target.value) } @@ -119,8 +145,10 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { localStorage.setItem(EMAIL_CONNECTOR_LOCAL_STORAGE_KEY, email || '') } + // Open Metamask download page if Metamask window.ethereum is not found if (connector._wallet.id === 'metamask' && typeof window !== 'undefined') { const isMetamaskFound = !!window?.ethereum?._metamask + if (!isMetamaskFound) { window.open('https://metamask.io/download/') return @@ -184,14 +212,8 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { if (showExtendedList) { return ( <> - setShowExtendedList(false)} - className={styles.clickable} - > - + + setShowExtendedList(false)} size="xs" /> @@ -201,41 +223,31 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { return ( <> - + + {emailConnector && showEmailInput && ( - <> -
- - - {!emailAuthInProgress && ( -