diff --git a/examples/react/public/sw-logo-black.svg b/examples/react/public/sw-logo-black.svg index 5a679f69..c41ea97f 100644 --- a/examples/react/public/sw-logo-black.svg +++ b/examples/react/public/sw-logo-black.svg @@ -1,12 +1,12 @@ - - - - - - - - - - + + + + + + + + + + diff --git a/examples/react/public/sw-logo-white.svg b/examples/react/public/sw-logo-white.svg index 4f2b69cb..3fe3eb88 100644 --- a/examples/react/public/sw-logo-white.svg +++ b/examples/react/public/sw-logo-white.svg @@ -1,15 +1,15 @@ - - - - - - - - - - + + + + + + + + + + diff --git a/packages/connectors/src/connectors/discord/DiscordLogo.tsx b/packages/connectors/src/connectors/discord/DiscordLogo.tsx index 3afa45ab..2a644896 100644 --- a/packages/connectors/src/connectors/discord/DiscordLogo.tsx +++ b/packages/connectors/src/connectors/discord/DiscordLogo.tsx @@ -11,7 +11,7 @@ export const getDiscordLogo = ({ isDarkMode }: GetDiscordLogo) => { return ( - + diff --git a/packages/connectors/src/connectors/email/email.ts b/packages/connectors/src/connectors/email/email.ts index 39d7064f..4b9ec283 100644 --- a/packages/connectors/src/connectors/email/email.ts +++ b/packages/connectors/src/connectors/email/email.ts @@ -1,27 +1,45 @@ import { Chain } from 'wagmi' -import { MetaMaskConnector } from 'wagmi/connectors/metaMask' +import { SocialConnector, SocialConnectorOptions } from '../wagmiConnectors'; import { getEmailLogo } from './EmailLogo' +export const EMAIL_CONNECTOR_LOCAL_STORAGE_KEY = '@sequence.kit.connector.email' + window.Buffer = window.Buffer || require("buffer").Buffer; export interface EmailOptions { chains: Chain[]; + options?: SocialConnectorOptions; } -export const email = ({ chains }: EmailOptions) => ({ +export const email = ({ chains, options = {} }: EmailOptions) => ({ id: 'email', logoDark: getEmailLogo({ isDarkMode: true }), logoLight: getEmailLogo({ isDarkMode: false }), // iconBackground: '#fff', name: 'Email', createConnector: () => { - const connector = new MetaMaskConnector({ + const email = localStorage.getItem(EMAIL_CONNECTOR_LOCAL_STORAGE_KEY) + + if (!email) { + console.error('Email not found in local storage') + } + + const connector = new SocialConnector({ chains, options: { - shimDisconnect: true, - }, + ...options, + // @ts-ignore + connect: { + ...options?.connect, + settings: { + ...options?.connect?.settings, + signInWithEmail: email || '' + } + } + } }); + return connector } }) \ No newline at end of file diff --git a/packages/connectors/src/connectors/google/GoogleLogo.tsx b/packages/connectors/src/connectors/google/GoogleLogo.tsx index 86a68a4c..0f751290 100644 --- a/packages/connectors/src/connectors/google/GoogleLogo.tsx +++ b/packages/connectors/src/connectors/google/GoogleLogo.tsx @@ -38,7 +38,7 @@ export const getOtcGoogleLogo = ({ viewBox="0 0 41 40" fill="none" > - + ) } diff --git a/packages/connectors/src/connectors/wagmiConnectors/socialConnector.ts b/packages/connectors/src/connectors/wagmiConnectors/socialConnector.ts index 7f4fd4a4..493bb8f8 100644 --- a/packages/connectors/src/connectors/wagmiConnectors/socialConnector.ts +++ b/packages/connectors/src/connectors/wagmiConnectors/socialConnector.ts @@ -32,12 +32,20 @@ export class SocialConnector extends Connector 0) { + const id = signInOptions[0] + const name = `${id[0].toUpperCase()}${id.slice(1)}` + + this.id = id + this.name = name + } else { + this.id = 'email' + this.name = 'Email' + } this.provider = sequence.initWallet({ defaultNetwork: options?.defaultNetwork, @@ -67,10 +75,6 @@ export class SocialConnector extends Connector { } }, [isConnected, openConnectModal]) + const onConnect = (e: React.FormEvent) => { + e.preventDefault() + localStorage.setItem(EMAIL_CONNECTOR_LOCAL_STORAGE_KEY, email) + connect({ connector: emailConnector }) + } + return ( {emailConnector && ( <>
connect({ connector: emailConnector })} + onSubmit={onConnect} >