added email login

0xsequence · Aug 3, 2023 · 80b609f · 80b609f
1 parent b03643a
commit 80b609f
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 37 deletions.
diff --git a/examples/react/public/sw-logo-black.svg b/examples/react/public/sw-logo-black.svg
diff --git a/examples/react/public/sw-logo-white.svg b/examples/react/public/sw-logo-white.svg
diff --git 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 (
       <React.Fragment>
         <svg viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g id="discord-icon-svgrepo-com 1" clip-path="url(#clip0_193_26839)">
+        <g id="discord-icon-svgrepo-com 1" clipPath="url(#clip0_193_26839)">
         <path id="Vector" d="M30.3437 10.9324C28.5312 10.0844 26.5932 9.46812 24.567 9.11719C24.3182 9.56707 24.0275 10.1722 23.8271 10.6535C21.6733 10.3296 19.5392 10.3296 17.425 10.6535C17.2246 10.1722 16.9273 9.56707 16.6763 9.11719C14.6479 9.46812 12.7077 10.0867 10.8952 10.9369C7.23942 16.4613 6.24839 21.8485 6.7439 27.1592C9.16863 28.9699 11.5185 30.0699 13.8287 30.7897C14.3991 30.0047 14.9078 29.1701 15.346 28.2907C14.5114 27.9735 13.712 27.5821 12.9566 27.1277C13.157 26.9793 13.353 26.8241 13.5424 26.6644C18.1496 28.8193 23.1554 28.8193 27.7075 26.6644C27.8991 26.8241 28.0951 26.9793 28.2933 27.1277C27.5357 27.5843 26.7341 27.9757 25.8995 28.2929C26.3377 29.1701 26.8442 30.0069 27.4168 30.7919C29.7292 30.0721 32.0813 28.9722 34.506 27.1592C35.0874 21.0028 33.5128 15.6651 30.3437 10.9324ZM15.9737 23.8932C14.5907 23.8932 13.4565 22.602 13.4565 21.0298C13.4565 19.4575 14.5665 18.1641 15.9737 18.1641C17.381 18.1641 18.5152 19.4552 18.4909 21.0298C18.4931 22.602 17.381 23.8932 15.9737 23.8932ZM25.2762 23.8932C23.8932 23.8932 22.759 22.602 22.759 21.0298C22.759 19.4575 23.8689 18.1641 25.2762 18.1641C26.6835 18.1641 27.8176 19.4552 27.7934 21.0298C27.7934 22.602 26.6835 23.8932 25.2762 23.8932Z" fill="white"/>
         </g>
         <defs>

diff --git 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
   }
 })
diff --git 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"
       >
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M25.8355 14.7613C24.5584 13.5329 22.9441 12.9032 21.1356 12.9032C17.9377 12.9032 15.2302 15.0813 14.2595 18.0232L14.2593 18.023C14.0142 18.7662 13.8712 19.5609 13.8712 20.3866C13.8712 21.2124 14.004 22.0072 14.2594 22.7504L14.2587 22.751H14.2595C15.2302 25.6929 17.9377 27.871 21.1356 27.871C22.7907 27.871 24.1904 27.4168 25.2939 26.6736V26.6732C26.5812 25.7958 27.4497 24.5055 27.746 22.9777H21.1355V18.3223H32.6808C32.8034 19.0758 32.875 19.85 32.875 20.6655C32.875 24.4332 31.5467 27.6126 29.2377 29.77L29.2378 29.7703C27.2148 31.6594 24.446 32.7742 21.1356 32.7742C16.3438 32.7742 12.2059 29.9871 10.1931 25.9407V25.94L10.193 25.9401C9.35521 24.2678 8.875 22.3891 8.875 20.3866C8.875 18.384 9.35521 16.5053 10.193 14.833H10.1934C12.2063 10.7869 16.344 8 21.1356 8C24.446 8 27.2148 9.22839 29.3298 11.231L25.8355 14.7613Z" fill={fillColor} />
+        <path fillRule="evenodd" clipRule="evenodd" d="M25.8355 14.7613C24.5584 13.5329 22.9441 12.9032 21.1356 12.9032C17.9377 12.9032 15.2302 15.0813 14.2595 18.0232L14.2593 18.023C14.0142 18.7662 13.8712 19.5609 13.8712 20.3866C13.8712 21.2124 14.004 22.0072 14.2594 22.7504L14.2587 22.751H14.2595C15.2302 25.6929 17.9377 27.871 21.1356 27.871C22.7907 27.871 24.1904 27.4168 25.2939 26.6736V26.6732C26.5812 25.7958 27.4497 24.5055 27.746 22.9777H21.1355V18.3223H32.6808C32.8034 19.0758 32.875 19.85 32.875 20.6655C32.875 24.4332 31.5467 27.6126 29.2377 29.77L29.2378 29.7703C27.2148 31.6594 24.446 32.7742 21.1356 32.7742C16.3438 32.7742 12.2059 29.9871 10.1931 25.9407V25.94L10.193 25.9401C9.35521 24.2678 8.875 22.3891 8.875 20.3866C8.875 18.384 9.35521 16.5053 10.193 14.833H10.1934C12.2063 10.7869 16.344 8 21.1356 8C24.446 8 27.2148 9.22839 29.3298 11.231L25.8355 14.7613Z" fill={fillColor} />
       </svg>
     )
   }

diff --git 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<sequence.provider.SequenceProvide
   }) {
     super({ chains, options })
 
-    const signInOptions = options?.connect?.settings?.signInOptions || ['google']
-    const id = signInOptions[0]
-    const name = `${id[0].toUpperCase()}${id.slice(1)}` 
+    const signInOptions = options?.connect?.settings?.signInOptions || []
 
-    this.id = id
-    this.name = name
+    // If there are no sign in options
+    // Then it must mean we are connecting with email
+    if (signInOptions.length > 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<sequence.provider.SequenceProvide
       this?.emit('message', { type: 'connecting' })
       // inject the signInOptions into the connect options
       const connectOptions = this.options?.connect ?? { app: 'app' }
-      connectOptions.settings = {
-        ...(connectOptions?.settings || {}),
-        signInOptions: [this.id as SignInOption]
-      }
 
       const e = await this.provider.connect(connectOptions)
       if (e.error) {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -13,6 +13,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@0xsequence/kit-connectors": "workspace:*",
     "@0xsequence/design-system": "^1.0.11",
     "@0xsequence/wagmi-connector": "^2.1.0",
     "@vanilla-extract/css": "^1.9.3",

diff --git a/packages/core/src/components/KitConnectProvider/OneTimeClickWallet/index.tsx b/packages/core/src/components/KitConnectProvider/OneTimeClickWallet/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { Box, Button, Card, ChevronRightIcon, Divider, Image, Text, TextInput } from '@0xsequence/design-system'
 import { useConnect, useAccount } from 'wagmi'
+import{ EMAIL_CONNECTOR_LOCAL_STORAGE_KEY } from '@0xsequence/kit-connectors'
 
 import { isEmailValid } from '../../../utils'
 import { KitConnectProviderProps } from '../index'
@@ -42,12 +43,18 @@ export const OneTimeClickWallet = (props: OneTimeClickWalletProps) => {
     }
   }, [isConnected, openConnectModal])
 
+  const onConnect = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    localStorage.setItem(EMAIL_CONNECTOR_LOCAL_STORAGE_KEY, email)
+    connect({ connector: emailConnector })
+  }
+
   return (
     <Box marginTop="5">
       {emailConnector && (
         <>
           <form
-            onSubmit={() => connect({ connector: emailConnector })}
+            onSubmit={onConnect}
           >
             <TextInput
               /* @ts-ignore-next-line */