logo option

0xsequence · Jul 31, 2023 · 259d6a5 · 259d6a5
1 parent c3189a2
commit 259d6a5
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 15 deletions.
diff --git a/examples/react/public/sw-logo-white.svg b/examples/react/public/sw-logo-white.svg
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -47,9 +47,16 @@ function App() {
     connectors
   })
 
+  const kitConfig = {
+    theme: isDarkMode ? THEMES.dark : THEMES.light,
+    signIn: {
+      logoUrl: '/sw-logo-white.svg'
+    }
+  }
+
   return (
     <WagmiConfig config={config}>
-      <SequenceConnectProvider theme={isDarkMode ? THEMES.dark : THEMES.light}>
+      <SequenceConnectProvider config={kitConfig} >
         <SequenceConnectWalletProvider theme={isDarkMode ? THEMES.dark : THEMES.light}>
           <SequenceConnectCheckoutProvider theme={isDarkMode ? THEMES.dark : THEMES.light}>
             <ModalThemeContext.Provider value={{ setIsDarkMode, isDarkMode }}>

diff --git a/packages/checkout/src/components/SequenceConnectCheckoutProvider.tsx b/packages/checkout/src/components/SequenceConnectCheckoutProvider.tsx
@@ -75,7 +75,16 @@ export const SequenceConnectCheckoutProvider = ({ children, theme }: SequenceCon
           <ThemeProvider theme={theme}>
             <AnimatePresence>
               {openCheckoutModal && (
-                <Modal contentProps={{ style: { maxWidth: '400px' } }} scroll={true} backdropColor="transparent" onClose={() => setOpenCheckoutModal(false)}>
+                <Modal
+                  contentProps={{
+                    style: {
+                      maxWidth: '400px'
+                    }
+                  }}
+                  scroll={true}
+                  backdropColor="transparent"
+                  onClose={() => setOpenCheckoutModal(false)}
+                >
                   <Box id="sequence-kit-checkout-content">
                     {getContent()}
                   </Box>

diff --git a/packages/core/src/components/SequenceConnectProvider/WalletList.tsx b/packages/core/src/components/SequenceConnectProvider/WalletList.tsx
@@ -1,19 +1,31 @@
 import React from 'react'
 
-import { Box, Text, vars } from '@0xsequence/design-system'
+import { Box, Image, Text, vars } from '@0xsequence/design-system'
 import { useConnect } from 'wagmi'
 
 import { ExtendedConnector } from '../../utils/getSequenceConnectWallets'
 
 import * as styles from '../styles.css'
 
-export const WalletList = () => {
+interface WalletListProps {
+  logoUrl?: string
+}
+
+export const WalletList = ({
+  logoUrl
+}: WalletListProps) => {
   const { connectors: baseConnectors, connect, isLoading } = useConnect()
   const connectors = baseConnectors as ExtendedConnector[]
 
   return (
     <>
-      <Text>TODO: logo here as config... + create empty connector for social</Text>
+      {logoUrl && (
+        <Image
+          src={logoUrl}
+          alt="logo"
+          marginTop="4"
+        />
+      )}
       <Box
         gap="4"
         justifyContent="flex-start"

diff --git a/packages/core/src/components/SequenceConnectProvider/index.tsx b/packages/core/src/components/SequenceConnectProvider/index.tsx
@@ -26,15 +26,23 @@ export const THEMES = {
   light: 'light' as Theme
 };
 
-export type SequenceConnectProvider = {
+export type SequenceConnectProviderProps = {
   children: React.ReactNode,
-  theme?: Theme
+  config?: {
+    theme?: Theme,
+    signIn?: {
+      logoUrl?: string
+    }
+  },
 }
 
-export const SequenceConnectProvider = ({ children, theme }: SequenceConnectProvider) => {
+export const SequenceConnectProvider = ({ children, config = {}}: SequenceConnectProviderProps) => {
+  const { theme = 'dark', signIn = {} } = config
+  const { logoUrl } = signIn
+
   const [openConnectModal, setOpenConnectModal] = useState<boolean>(false)
   const [clickedGoBack, setClickedGoBack] = useState(false)
-  const { connectors: baseConnectors, pendingConnector, isError, connect, isLoading } = useConnect()
+  const { pendingConnector, isError, connect } = useConnect()
   const { isConnected } = useAccount()
 
   useEffect(() => {
@@ -72,7 +80,9 @@ export const SequenceConnectProvider = ({ children, theme }: SequenceConnectProv
     }
 
     return (
-      <WalletList />
+      <WalletList
+        logoUrl={logoUrl}
+      />
     )
   }
 
@@ -82,11 +92,12 @@ export const SequenceConnectProvider = ({ children, theme }: SequenceConnectProv
         <AnimatePresence>
           {openConnectModal && (
             <Modal
-              scroll={false}
+              scroll={true}
               backdropColor="transparent"
               size="sm"
-              contentProps={{ style: {
-                  width: '364px',
+              contentProps={{
+                style: {
+                  maxWidth: '364px',
                 }
               }}
               onClose={() => setOpenConnectModal(false)}
@@ -101,8 +112,8 @@ export const SequenceConnectProvider = ({ children, theme }: SequenceConnectProv
                     marginTop: '4px'
                   }}
                 >
-                    <Text>Sign in</Text>
-                  </Box>
+                  <Text>Sign in</Text>
+                </Box>
                 {getModalContent()}
               </Box>
             </Modal>