From 259d6a554725de80e65b182930ef6df9c2766bd0 Mon Sep 17 00:00:00 2001
From: SamueleA <batonenbois@gmail.com>
Date: Mon, 31 Jul 2023 13:51:50 -0400
Subject: [PATCH] logo option

---
 examples/react/public/sw-logo-white.svg       | 26 ++++++++++++++++
 examples/react/src/App.tsx                    |  9 +++++-
 .../SequenceConnectCheckoutProvider.tsx       | 11 ++++++-
 .../SequenceConnectProvider/WalletList.tsx    | 18 +++++++++--
 .../SequenceConnectProvider/index.tsx         | 31 +++++++++++++------
 5 files changed, 80 insertions(+), 15 deletions(-)
 create mode 100644 examples/react/public/sw-logo-white.svg

diff --git a/examples/react/public/sw-logo-white.svg b/examples/react/public/sw-logo-white.svg
new file mode 100644
index 00000000..4f2b69cb
--- /dev/null
+++ b/examples/react/public/sw-logo-white.svg
@@ -0,0 +1,26 @@
+<svg width="328" height="114" viewBox="0 0 328 114" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_573_4345)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.5746 16.0001L54.1683 30.7088L57.5366 34.1036L63.1493 39.762V73.7037L39.5746 97.4656L24.9809 82.757L21.6112 79.3607L16 73.7037V39.762L39.5746 16.0001ZM36.2049 64.6535L31.7159 60.1276L28.3477 56.7329L39.5746 45.4175L50.9928 33.9078L39.5746 22.3997L20.489 41.6357V71.83L24.7882 76.1617L36.2049 64.6535ZM58.6588 71.83V41.6357L54.3611 37.3041L42.9429 48.8122L47.4334 53.3381L50.8001 56.7329L39.5746 68.0483L28.155 79.5579L39.5746 91.0661L58.6588 71.83Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.1967 71.1362C80.6786 69.5748 79.9196 67.5337 79.9196 65.01V63.734C79.9196 63.4187 80.0767 63.2604 80.3895 63.2604H83.863C84.1744 63.2604 84.3315 63.4187 84.3315 63.734V64.774C84.3315 66.2248 84.6918 67.3828 85.4108 68.2509C86.1313 69.1175 87.0534 69.5509 88.1815 69.5509C89.3068 69.5509 90.2378 69.134 90.9731 68.2987C91.7084 67.4635 92.0761 66.3668 92.0761 65.01C92.0761 64.0956 91.8804 63.2917 91.4905 62.5984C91.0976 61.9037 90.5817 61.2806 89.9413 60.7292C89.2994 60.1779 88.2586 59.365 86.8191 58.2922C85.224 57.0954 83.9713 56.0704 83.064 55.2187C82.1567 54.367 81.3902 53.3435 80.7646 52.1437C80.139 50.9454 79.8262 49.5423 79.8262 47.9346C79.8262 45.3795 80.5778 43.3534 82.0796 41.8548C83.5814 40.3576 85.5353 39.6075 87.9458 39.6075C90.4483 39.6075 92.4586 40.4129 93.9766 42.0206C95.4947 43.6299 96.2537 45.7426 96.2537 48.3604V49.5423C96.2537 49.8576 96.0966 50.0145 95.7838 50.0145H92.3103C91.9975 50.0145 91.8418 49.8576 91.8418 49.5423V48.2648C91.8418 46.8453 91.4816 45.7038 90.7626 44.8342C90.0421 43.9676 89.1037 43.5342 87.9458 43.5342C86.8503 43.5342 85.9667 43.9212 85.2936 44.6937C84.6206 45.4662 84.2855 46.5465 84.2855 47.9346C84.2855 49.1942 84.6295 50.2595 85.3174 51.1262C86.0052 51.9943 87.3202 53.1538 89.2608 54.6046C91.1688 56.0226 92.5994 57.1731 93.5541 58.0561C94.5088 58.9407 95.2442 59.9089 95.7601 60.9653C96.2775 62.0217 96.5354 63.2768 96.5354 64.7262C96.5354 67.3753 95.7601 69.4971 94.2109 71.0899C92.6631 72.6812 90.6529 73.4775 88.1815 73.4775C85.7087 73.4775 83.7133 72.6976 82.1967 71.1362Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M105.779 72.626V40.4609C105.779 40.1456 105.935 39.9857 106.248 39.9857H109.816C110.129 39.9857 110.286 40.1456 110.286 40.4609V54.6511C110.286 54.7452 110.316 54.8005 110.379 54.8169C110.442 54.8334 110.488 54.7915 110.52 54.6989L118.499 40.3174C118.655 40.0963 118.843 39.9857 119.061 39.9857H122.911C123.098 39.9857 123.222 40.041 123.286 40.1531C123.348 40.2636 123.332 40.3966 123.239 40.5535L116.011 53.7053C115.979 53.7994 115.979 53.8935 116.011 53.9877L123.849 72.5319L123.895 72.7201C123.895 72.9727 123.755 73.0997 123.474 73.0997H119.578C119.328 73.0997 119.156 72.9727 119.061 72.7201L112.961 57.9622C112.929 57.8053 112.851 57.7888 112.726 57.9143L110.332 61.7469C110.301 61.7783 110.286 61.8575 110.286 61.983V72.626C110.286 72.9428 110.129 73.0997 109.816 73.0997H106.248C105.935 73.0997 105.779 72.9428 105.779 72.626Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.553 72.5794V59.0497L137.507 58.8136L130.983 40.5069L130.936 40.3172C130.936 40.0975 131.076 39.9869 131.358 39.9869H135.113C135.395 39.9869 135.582 40.1124 135.677 40.365L139.666 53.4211C139.697 53.4853 139.745 53.5152 139.807 53.5152C139.869 53.5152 139.917 53.4853 139.948 53.4211L143.937 40.365C144.03 40.1124 144.219 39.9869 144.5 39.9869H148.254C148.6 39.9869 148.724 40.1603 148.631 40.5069L142.106 58.8136L142.06 59.0497V72.5794C142.06 72.8947 141.903 73.0516 141.59 73.0516H138.023C137.709 73.0516 137.553 72.8947 137.553 72.5794Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.335 72.6742L156.092 40.5076V40.4119C156.092 40.1295 156.233 39.9861 156.514 39.9861H160.222C160.535 39.9861 160.707 40.1295 160.738 40.4119L164.541 62.599C164.572 62.6617 164.603 62.6916 164.634 62.6916C164.665 62.6916 164.696 62.6617 164.729 62.599L168.107 40.4119C168.139 40.1295 168.296 39.9861 168.576 39.9861H171.722C172.002 39.9861 172.159 40.1295 172.19 40.4119L175.805 62.599C175.836 62.6617 175.867 62.6916 175.898 62.6916C175.929 62.6916 175.96 62.6617 175.993 62.599L179.466 40.4119C179.529 40.1295 179.684 39.9861 179.935 39.9861H183.595C183.752 39.9861 183.869 40.0339 183.948 40.1295C184.025 40.2222 184.049 40.3492 184.018 40.5076L178.104 72.6742C178.073 72.9566 177.901 73.1 177.588 73.1H174.257C174.005 73.1 173.849 72.9566 173.787 72.6742L170.22 50.2989C170.187 50.2361 170.149 50.2048 170.103 50.2048C170.055 50.2048 170.032 50.2361 170.032 50.2989L166.653 72.6742C166.62 72.9566 166.465 73.1 166.183 73.1H162.851C162.569 73.1 162.397 72.9566 162.335 72.6742Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M208.05 43.9128H197.489C197.364 43.9128 197.302 43.977 197.302 44.1025V54.3675C197.302 54.493 197.364 54.5558 197.489 54.5558H203.967C204.278 54.5558 204.436 54.7142 204.436 55.0295V58.0103C204.436 58.3256 204.278 58.4825 203.967 58.4825H197.489C197.364 58.4825 197.302 58.5467 197.302 58.6723V68.9836C197.302 69.1106 197.364 69.1733 197.489 69.1733H208.05C208.361 69.1733 208.518 69.3317 208.518 69.647V72.6264C208.518 72.9431 208.361 73.1 208.05 73.1H193.265C192.952 73.1 192.795 72.9431 192.795 72.6264V40.4597C192.795 40.146 192.952 39.9861 193.265 39.9861H208.05C208.361 39.9861 208.518 40.146 208.518 40.4597V43.4406C208.518 43.7559 208.361 43.9128 208.05 43.9128Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M223.816 63.4494H230.012C230.105 63.4494 230.153 63.3866 230.153 63.2596L227.056 47.0822C227.023 46.9865 226.992 46.9402 226.961 46.9402C226.93 46.9402 226.899 46.9865 226.867 47.0822L223.676 63.2596C223.676 63.3866 223.723 63.4494 223.816 63.4494ZM231.936 72.6744L230.904 67.2341C230.904 67.1714 230.881 67.1236 230.833 67.0922C230.787 67.0608 230.732 67.0444 230.67 67.0444H223.112C223.05 67.0444 222.995 67.0608 222.949 67.0922C222.902 67.1236 222.878 67.1714 222.878 67.2341L221.799 72.6744C221.768 72.9568 221.594 73.1003 221.283 73.1003H217.714C217.557 73.1003 217.44 73.0525 217.363 72.9568C217.285 72.8627 217.261 72.7372 217.293 72.5788L224.286 40.4122C224.349 40.1298 224.521 39.9863 224.802 39.9863H228.933C229.245 39.9863 229.417 40.1298 229.448 40.4122L236.536 72.5788V72.6744C236.536 72.9568 236.395 73.1003 236.114 73.1003H232.452C232.17 73.1003 231.998 72.9568 231.936 72.6744Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M247.849 72.6742L241.09 40.5076V40.4119C241.09 40.1295 241.231 39.9861 241.512 39.9861H245.408C245.72 39.9861 245.893 40.1295 245.924 40.4119L250.382 64.9642C250.413 65.027 250.444 65.0569 250.477 65.0569C250.507 65.0569 250.539 65.027 250.57 64.9642L254.935 40.4119C254.999 40.1295 255.169 39.9861 255.452 39.9861H259.207C259.551 39.9861 259.691 40.1594 259.629 40.5076L252.87 72.6742C252.839 72.9566 252.667 73.1 252.354 73.1H248.364C248.083 73.1 247.911 72.9566 247.849 72.6742Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M283.94 43.9128H273.38C273.254 43.9128 273.192 43.977 273.192 44.1025V54.3675C273.192 54.493 273.254 54.5558 273.38 54.5558H279.857C280.17 54.5558 280.326 54.7142 280.326 55.0295V58.0103C280.326 58.3256 280.17 58.4825 279.857 58.4825H273.38C273.254 58.4825 273.192 58.5467 273.192 58.6723V68.9836C273.192 69.1106 273.254 69.1733 273.38 69.1733H283.94C284.253 69.1733 284.41 69.3317 284.41 69.647V72.6264C284.41 72.9431 284.253 73.1 283.94 73.1H269.155C268.842 73.1 268.688 72.9431 268.688 72.6264V40.4597C268.688 40.146 268.842 39.9861 269.155 39.9861H283.94C284.253 39.9861 284.41 40.146 284.41 40.4597V43.4406C284.41 43.7559 284.253 43.9128 283.94 43.9128Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M298.16 44.0542V54.6509C298.16 54.7779 298.222 54.8406 298.348 54.8406H301.821C303.104 54.8406 304.136 54.3431 304.918 53.3509C305.7 52.3573 306.092 51.0409 306.092 49.4003C306.092 47.697 305.7 46.3492 304.918 45.3556C304.136 44.362 303.104 43.8659 301.821 43.8659H298.348C298.222 43.8659 298.16 43.9287 298.16 44.0542ZM306.138 72.7214L301.774 58.5298C301.743 58.4356 301.681 58.3878 301.587 58.3878H298.348C298.222 58.3878 298.16 58.4521 298.16 58.5776V72.6258C298.16 72.9426 298.004 73.0995 297.691 73.0995H294.124C293.81 73.0995 293.654 72.9426 293.654 72.6258V40.4114C293.654 40.0976 293.81 39.9392 294.124 39.9392H302.524C304.121 39.9392 305.529 40.3337 306.749 41.1211C307.969 41.91 308.915 43.0232 309.588 44.4576C310.261 45.892 310.598 47.5237 310.598 49.3525C310.598 51.3398 310.183 53.0656 309.354 54.5328C308.525 55.9986 307.406 57.0475 305.998 57.6781C305.904 57.7737 305.873 57.8678 305.904 57.962L310.739 72.5795L310.786 72.7693C310.786 72.9889 310.644 73.0995 310.362 73.0995H306.702C306.42 73.0995 306.233 72.9725 306.138 72.7214Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_573_4345" x="-4" y="0" width="336" height="122" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_573_4345"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_573_4345" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
index 737cc0e4..3460fd05 100644
--- 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
index 952cc39f..d81d6a31 100644
--- 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
index a4ed5281..96d97f3d 100644
--- 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
index 1c20cb4a..2be1a61f 100644
--- 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>