From aae73088e2d766509482372d6bd1bfff7c8fcbd2 Mon Sep 17 00:00:00 2001 From: samuelea Date: Wed, 29 Nov 2023 10:20:56 -0500 Subject: [PATCH] small connectors --- .../src/connectors/apple/AppleLogo.tsx | 6 +- .../connectors/src/connectors/apple/apple.ts | 6 +- .../src/connectors/discord/discord.ts | 4 +- .../src/connectors/facebook/FacebookLogo.tsx | 10 +- .../src/connectors/facebook/facebook.ts | 6 +- .../src/connectors/google/GoogleLogo.tsx | 10 +- .../src/connectors/google/google.ts | 6 +- .../src/connectors/twitch/twitch.ts | 4 +- packages/connectors/src/defaultConnectors.tsx | 11 +- .../ConnectWalletContent/index.tsx | 133 +++++++----------- .../kit/src/constants/defaultSignInOptions.ts | 2 +- .../kit/src/utils/getKitConnectWallets.ts | 4 +- 12 files changed, 86 insertions(+), 116 deletions(-) diff --git a/packages/connectors/src/connectors/apple/AppleLogo.tsx b/packages/connectors/src/connectors/apple/AppleLogo.tsx index d9af3d85..e4ae8f34 100644 --- a/packages/connectors/src/connectors/apple/AppleLogo.tsx +++ b/packages/connectors/src/connectors/apple/AppleLogo.tsx @@ -24,13 +24,13 @@ export const getAppleLogo = ({ isDarkMode }: GetAppleLogo) => { return AppleLogo } -interface GetAppleMiniLogo { +interface GetAppleMonochromeLogo { isDarkMode: boolean } -export const getAppleMiniLogo = ({ +export const getAppleMonochromeLogo = ({ isDarkMode -}: GetAppleMiniLogo) => { +}: GetAppleMonochromeLogo) => { const fillColor = isDarkMode ? '#FFFFFF' : '#000000' const AppleOtcLogo: React.FunctionComponent = ({...props}) => { diff --git a/packages/connectors/src/connectors/apple/apple.ts b/packages/connectors/src/connectors/apple/apple.ts index e14d81a2..fc151751 100644 --- a/packages/connectors/src/connectors/apple/apple.ts +++ b/packages/connectors/src/connectors/apple/apple.ts @@ -1,7 +1,7 @@ import { Chain } from 'wagmi' import { BaseSequenceConnector, BaseSequenceConnectorOptions } from '../wagmiConnectors'; -import { getAppleLogo, getAppleMiniLogo } from './AppleLogo' +import { getAppleLogo, getAppleMonochromeLogo } from './AppleLogo' export interface AppleOptions { chains: Chain[]; @@ -13,8 +13,8 @@ export const apple = ({ chains, options = {} }: AppleOptions) => ({ isSequenceBased: true, logoDark: getAppleLogo({ isDarkMode: true }), logoLight: getAppleLogo({ isDarkMode: false }), - miniLogoDark: getAppleMiniLogo({ isDarkMode: true }), - miniLogoLight: getAppleMiniLogo({ isDarkMode: false }), + monochromeLogoDark: getAppleMonochromeLogo({ isDarkMode: true }), + monochromeLogoLight: getAppleMonochromeLogo({ isDarkMode: false }), // iconBackground: '#fff', name: 'Apple', createConnector: () => { diff --git a/packages/connectors/src/connectors/discord/discord.ts b/packages/connectors/src/connectors/discord/discord.ts index 94994677..ce234cb1 100644 --- a/packages/connectors/src/connectors/discord/discord.ts +++ b/packages/connectors/src/connectors/discord/discord.ts @@ -13,8 +13,8 @@ export const discord = ({ chains, options = {} }: DiscordOptions) => ({ isSequenceBased: true, logoDark: getDiscordLogo({ isDarkMode: true }), logoLight: getDiscordLogo({ isDarkMode: false }), - miniLogoDark: getDiscordLogo({ isDarkMode: true }), - miniLogoLight: getDiscordLogo({ isDarkMode: false }), + monochromeLogoDark: getDiscordLogo({ isDarkMode: true }), + monochromeLogoLight: getDiscordLogo({ isDarkMode: false }), // iconBackground: '#fff', name: 'Discord', createConnector: () => { diff --git a/packages/connectors/src/connectors/facebook/FacebookLogo.tsx b/packages/connectors/src/connectors/facebook/FacebookLogo.tsx index dc11964f..8f6d5ef7 100644 --- a/packages/connectors/src/connectors/facebook/FacebookLogo.tsx +++ b/packages/connectors/src/connectors/facebook/FacebookLogo.tsx @@ -23,16 +23,16 @@ export const FacebookLogo: React.FunctionComponent = ({...props}) => { } -interface GetFacebookMiniLogo { +interface GetFacebookMonochromeLogo { isDarkMode: boolean } -export const getFacebookMiniLogo = ({ +export const getFacebookMonochromeLogo = ({ isDarkMode -}: GetFacebookMiniLogo) => { +}: GetFacebookMonochromeLogo) => { const fillColor = isDarkMode ? '#FFFFFF' : '#000000' - const FacebookMiniLogo: React.FunctionComponent = ({...props}) => { + const FacebookMonochromeLogo: React.FunctionComponent = ({...props}) => { return ( ({ isSequenceBased: true, logoDark: FacebookLogo, logoLight: FacebookLogo, - miniLogoDark: getFacebookMiniLogo({ isDarkMode: true }), - miniLogoLight: getFacebookMiniLogo({ isDarkMode: false }), + monochromeLogoDark: getFacebookMonochromeLogo({ isDarkMode: true }), + monochromeLogoLight: getFacebookMonochromeLogo({ isDarkMode: false }), // iconBackground: '#fff', name: 'Facebook', createConnector: () => { diff --git a/packages/connectors/src/connectors/google/GoogleLogo.tsx b/packages/connectors/src/connectors/google/GoogleLogo.tsx index b4a0767d..29d14583 100644 --- a/packages/connectors/src/connectors/google/GoogleLogo.tsx +++ b/packages/connectors/src/connectors/google/GoogleLogo.tsx @@ -22,16 +22,16 @@ export const GoogleLogo: React.FunctionComponent = ({...props}) => { ) } -interface GetGoogleMiniLogo { +interface GetGoogleMonochromeLogo { isDarkMode: boolean } -export const getMiniGoogleLogo = ({ +export const getMonochromeGoogleLogo = ({ isDarkMode -}: GetGoogleMiniLogo) => { +}: GetGoogleMonochromeLogo) => { const fillColor = isDarkMode ? 'white' : 'black' - const GoogleMiniLogo: React.FunctionComponent = ({...props}) => { + const GoogleMonochromeLogo: React.FunctionComponent = ({...props}) => { return ( ({ isSequenceBased: true, logoDark: GoogleLogo, logoLight: GoogleLogo, - miniLogoDark: getMiniGoogleLogo({ isDarkMode: true }), - miniLogoLight: getMiniGoogleLogo({ isDarkMode: false }), + monochromeLogoDark: getMonochromeGoogleLogo({ isDarkMode: true }), + monochromeLogoLight: getMonochromeGoogleLogo({ isDarkMode: false }), // iconBackground: '#fff', name: 'Google', createConnector: () => { diff --git a/packages/connectors/src/connectors/twitch/twitch.ts b/packages/connectors/src/connectors/twitch/twitch.ts index ea136c62..42773b39 100644 --- a/packages/connectors/src/connectors/twitch/twitch.ts +++ b/packages/connectors/src/connectors/twitch/twitch.ts @@ -13,8 +13,8 @@ export const twitch = ({ chains, options = {} }: TwitchOptions) => ({ isSequenceBased: true, logoDark: getTwitchLogo({}), logoLight: getTwitchLogo({}), - miniLogoDark: getTwitchLogo({ isDarkMode: true }), - miniLogoLight: getTwitchLogo({ isDarkMode: false }), + monochromeLogoDark: getTwitchLogo({ isDarkMode: true }), + monochromeLogoLight: getTwitchLogo({ isDarkMode: false }), // iconBackground: '#fff', name: 'Twitch', createConnector: () => { diff --git a/packages/connectors/src/defaultConnectors.tsx b/packages/connectors/src/defaultConnectors.tsx index 3d160788..1d832e08 100644 --- a/packages/connectors/src/defaultConnectors.tsx +++ b/packages/connectors/src/defaultConnectors.tsx @@ -3,13 +3,14 @@ import { Connector } from 'wagmi' import { getKitConnectWallets } from '@0xsequence/kit' import { + apple, email, facebook, google, metamask, + sequence, + twitch, walletConnect, - apple, - twitch } from './connectors' interface GetDefaultConnectors { @@ -72,6 +73,12 @@ export const getDefaultConnectors = ({ projectId: walletConnectProjectId }, }), + sequence({ + chains, + options: { + defaultNetwork: defaultChain + } + }) ]) return connectors diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx index 76cd8cfd..8a332ce8 100644 --- a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx +++ b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx @@ -149,44 +149,36 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { )} - {socialAuthConnectors.slice(0, 6).map(connector => { + {socialAuthConnectors.map(connector => { const Logo = theme === 'dark' - ? connector._wallet.logoDark as React.FunctionComponent - : connector._wallet.logoLight as React.FunctionComponent + ? connector._wallet.monochromeLogoDark as React.FunctionComponent + : connector._wallet.monochromeLogoLight as React.FunctionComponent return ( - onConnect(connector)} - style={{ - height: '110px', - width: `calc(50% - ${vars.space[2]})` - }} - > + onConnect(connector)} + aspectRatio='1/1' + style={{ + width: `calc(25% - ${vars.space[2]})` + }} + > - - {connector._wallet.name} - ) @@ -210,7 +202,7 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { marginTop="3" gap="2" flexDirection="row" - justifyContent="center" + justifyContent="flex-start" alignItems="center" > {walletConnectors.map(connector => { @@ -225,71 +217,42 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { justifyContent="center" alignItems="center" onClick={() => onConnect(connector)} + aspectRatio='1/1' style={{ - height: '110px', - width: `calc(50% - ${vars.space[2]})` + width: `calc(25% - ${vars.space[2]})` }} > - - - - {connector._wallet.name} - - - - // mini auth options - // onConnect(connector)} - // aspectRatio='1/1' - // style={{ - // width: `calc(25% - ${vars.space[2]})` - // }} - // > - // - // - // - // - ) - })} - - {displayExtendedListButton && ( - setShowExtendedList(true)} - > - More options - + + + + ) + })} - )} - + {/* {displayExtendedListButton && ( + setShowExtendedList(true)} + > + More options + + + )} */} + )} diff --git a/packages/kit/src/constants/defaultSignInOptions.ts b/packages/kit/src/constants/defaultSignInOptions.ts index c8b2ef9a..e823ab03 100644 --- a/packages/kit/src/constants/defaultSignInOptions.ts +++ b/packages/kit/src/constants/defaultSignInOptions.ts @@ -1,5 +1,5 @@ export const defaultSignInOptions = { showEmailInput: true, - walletAuthOptions: ['metamask', 'wallet-connect'], + walletAuthOptions: ['sequence', 'metamask', 'wallet-connect'], socialAuthOptions: ['google', 'facebook', 'twitch', 'apple'] } \ No newline at end of file diff --git a/packages/kit/src/utils/getKitConnectWallets.ts b/packages/kit/src/utils/getKitConnectWallets.ts index f36d83cf..6b0d2a58 100644 --- a/packages/kit/src/utils/getKitConnectWallets.ts +++ b/packages/kit/src/utils/getKitConnectWallets.ts @@ -5,8 +5,8 @@ export interface WalletProperties { id: string, logoDark: React.FunctionComponent, logoLight: React.FunctionComponent, - miniLogoDark?: React.FunctionComponent, - miniLogoLight?: React.FunctionComponent, + monochromeLogoDark?: React.FunctionComponent, + monochromeLogoLight?: React.FunctionComponent, name: string, iconBackground?: string, hideConnectorId?: string | null,