small connectors

0xsequence · Nov 29, 2023 · aae7308 · aae7308
1 parent d453e7d
commit aae7308
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 116 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
       <React.Fragment>
         <svg
@@ -47,5 +47,5 @@ export const getFacebookMiniLogo = ({
     )
   }
 
-  return FacebookMiniLogo
+  return FacebookMonochromeLogo
 }
diff --git a/packages/connectors/src/connectors/facebook/facebook.ts b/packages/connectors/src/connectors/facebook/facebook.ts
@@ -1,7 +1,7 @@
 import { Chain } from 'wagmi'
 import { BaseSequenceConnector, BaseSequenceConnectorOptions } from '../wagmiConnectors';
 
-import { FacebookLogo, getFacebookMiniLogo } from './FacebookLogo'
+import { FacebookLogo, getFacebookMonochromeLogo } from './FacebookLogo'
 
 export interface FacebookOptions {
   chains: Chain[];
@@ -13,8 +13,8 @@ export const facebook = ({ chains, options = {} }: FacebookOptions) => ({
   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
@@ -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 (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -44,5 +44,5 @@ export const getMiniGoogleLogo = ({
     )
   }
 
-  return GoogleMiniLogo
+  return GoogleMonochromeLogo
 }
diff --git a/packages/connectors/src/connectors/google/google.ts b/packages/connectors/src/connectors/google/google.ts
@@ -1,7 +1,7 @@
 import { Chain } from 'wagmi'
 import { BaseSequenceConnector, BaseSequenceConnectorOptions } from '../wagmiConnectors';
 
-import { GoogleLogo, getMiniGoogleLogo } from './GoogleLogo'
+import { GoogleLogo, getMonochromeGoogleLogo } from './GoogleLogo'
 
 export interface GoogleOptions {
   chains: Chain[];
@@ -13,8 +13,8 @@ export const google = ({ chains, options = {} }: GoogleOptions) => ({
   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
@@ -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
@@ -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
@@ -149,44 +149,36 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
             )}
             <Box
               marginTop="3"
-              gap="3"
+              gap="2"
               flexDirection="row"
-              justifyContent="space-between"
+              justifyContent="flex-start"
               alignItems="center"
               flexWrap="wrap"
             >
-              {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 (
-                    <Card
-                      key={connector._wallet.id}
-                      className={styles.clickable}
-                      justifyContent="center"
-                      alignItems="center"
-                      onClick={() => onConnect(connector)}
-                      style={{
-                        height: '110px',
-                        width: `calc(50% - ${vars.space[2]})`
-                      }}
-                    >
+                  <Card
+                    key={connector._wallet.id}
+                    className={styles.clickable}
+                    justifyContent="center"
+                    alignItems="center"
+                    onClick={() => onConnect(connector)}
+                    aspectRatio='1/1'
+                    style={{
+                      width: `calc(25% - ${vars.space[2]})`
+                    }}
+                  >
                     <Box
                       className={styles.walletLogoContainer}
                       flexDirection="column"
-                      gap="4"
                       alignItems="center"
                       justifyContent="center"
                     >
                       <Logo />
-                      <Text
-                        fontSize="normal"
-                        fontWeight="bold"
-                        color="text100"
-                      >
-                        {connector._wallet.name}
-                      </Text>
                     </Box>
                   </Card>
                 )
@@ -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]})`
                     }}
                   >
-                  <Box
-                    className={styles.walletLogoContainer}
-                    flexDirection="column"
-                    gap="4"
-                    alignItems="center"
-                    justifyContent="center"
-                  >
-                    <Logo />
-                    <Text
-                      fontSize="normal"
-                      fontWeight="bold"
-                      color="text100"
+                    <Box
+                      className={styles.walletLogoContainer}
+                      flexDirection="column"
+                      alignItems="center"
+                      justifyContent="center"
                     >
-                      {connector._wallet.name}
-                    </Text>
-                  </Box>
-                </Card>
-                  //   mini auth options
-                  //   <Card
-                  //     key={connector._wallet.id}
-                  //     className={styles.clickable}
-                  //     justifyContent="center"
-                  //     alignItems="center"
-                  //     onClick={() => onConnect(connector)}
-                  //     aspectRatio='1/1'
-                  //     style={{
-                  //       width: `calc(25% - ${vars.space[2]})`
-                  //     }}
-                  //   >
-                  //   <Box
-                  //     className={styles.walletLogoContainer}
-                  //     flexDirection="column"
-                  //     alignItems="center"
-                  //     justifyContent="center"
-                  //   >
-                  //     <Logo />
-                  //   </Box>
-                  // </Card>
-                )
-              })}
-            </Box>
-            {displayExtendedListButton && (
-              <Box
-                padding="4"
-                marginTop="3"
-                background="backgroundSecondary"
-                width="full"
-                justifyContent="space-between"
-                alignItems="center"
-                borderRadius="md"
-                color="text100"
-                as="button"
-                className={styles.clickable}
-                onClick={() => setShowExtendedList(true)}
-              >
-                <Text variant="medium">More options</Text>
-                <ChevronRightIcon />
+                      <Logo />
+                    </Box>
+                  </Card>
+                  )
+                })}
               </Box>
-            )}
-          </>
+              {/* {displayExtendedListButton && (
+                <Box
+                  padding="4"
+                  marginTop="3"
+                  background="backgroundSecondary"
+                  width="full"
+                  justifyContent="space-between"
+                  alignItems="center"
+                  borderRadius="md"
+                  color="text100"
+                  as="button"
+                  className={styles.clickable}
+                  onClick={() => setShowExtendedList(true)}
+                >
+                  <Text variant="medium">More options</Text>
+                  <ChevronRightIcon />
+                </Box>
+              )} */}
+            </>
         )}
       </Box>
     </>

diff --git 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']
 }
diff --git 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,