EIP6963 discovered wallets (#19)

0xsequence · Apr 17, 2024 · 8e0a590 · 8e0a590
1 parent 60f52b9
commit 8e0a590
Show file tree

Hide file tree

Showing 10 changed files with 189 additions and 242 deletions.
diff --git a/packages/checkout/src/shared/styles.css.ts b/packages/checkout/src/shared/styles.css.ts
@@ -2,12 +2,12 @@ import { style, globalStyle } from '@vanilla-extract/css'
 
 export const walletContent = style({})
 
-// Will affect the close button in the modal
-globalStyle(`${walletContent} + button`, {
-  backgroundColor: 'transparent'
-})
+// // Will affect the close button in the modal
+// globalStyle(`${walletContent} + button`, {
+//   backgroundColor: 'transparent'
+// })
 
-globalStyle(`${walletContent} + button > svg`, {
-  width: '20px',
-  height: '20px'
-})
+// globalStyle(`${walletContent} + button > svg`, {
+//   width: '20px',
+//   height: '20px'
+// })
diff --git a/packages/connectors/src/defaultConnectors.tsx b/packages/connectors/src/defaultConnectors.tsx
@@ -20,9 +20,6 @@ export const getDefaultConnectors = ({
   appName
 }: GetDefaultConnectors): CreateConnectorFn[] => {
   const connectors = getKitConnectWallets(projectAccessKey, [
-    coinbaseWallet({
-      appName
-    }),
     email({
       defaultNetwork: defaultChainId,
       connect: {
@@ -56,16 +53,19 @@ export const getDefaultConnectors = ({
         app: appName
       }
     }),
-    metamask(),
-    walletConnect({
-      projectId: walletConnectProjectId
-    }),
     sequence({
       defaultNetwork: defaultChainId,
       connect: {
         app: appName,
         projectAccessKey
       }
+    }),
+    walletConnect({
+      projectId: walletConnectProjectId
+    }),
+    metamask(),
+    coinbaseWallet({
+      appName
     })
   ])
 

diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/ExtendedWalletList.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/ExtendedWalletList.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { Box, Text, useTheme } from '@0xsequence/design-system'
+import { Box, Button, Text, TokenImage, useTheme } from '@0xsequence/design-system'
 import { useConnect } from 'wagmi'
 
 import { ExtendedConnector } from '../../../utils/getKitConnectWallets'
@@ -19,44 +19,36 @@ export const ExtendedWalletList = ({ onConnect, connectors }: ExtendedWalletList
   return (
     <Box flexDirection="column" gap="2" marginTop="5">
       {connectors.map(connector => {
-        const Logo =
-          theme === 'dark'
-            ? (connector._wallet.logoDark as React.FunctionComponent)
-            : (connector._wallet.logoLight as React.FunctionComponent)
+        const Logo = theme === 'dark' ? connector._wallet.logoDark : connector._wallet.logoLight
         const walletName = connector._wallet.name
         const connectorId = connector._wallet.id
 
         return (
-          <Box
+          <Button
             key={connectorId}
-            as="button"
-            flexDirection="row"
-            alignItems="center"
-            justifyContent="space-between"
-            background="backgroundSecondary"
-            color="text100"
-            borderRadius="md"
-            padding="4"
-            style={{
-              height: '60px'
-            }}
-            className={styles.networkButton}
+            width="full"
+            shape="square"
+            leftIcon={() => (
+              <Box
+                justifyContent="center"
+                alignItems="center"
+                style={{ backgroundColor: connector._wallet.iconBackground }}
+                className={styles.walletLogoContainerExtended}
+                width="8"
+                height="8"
+                overflow="hidden"
+              >
+                <Logo />
+              </Box>
+            )}
             onClick={() => onConnect(connector)}
-          >
-            <Text variant="medium" color="text100">
-              {walletName}
-              {isPending}
-            </Text>
-            <Box
-              justifyContent="center"
-              alignItems="center"
-              style={{ backgroundColor: connector._wallet.iconBackground }}
-              borderRadius="md"
-              className={styles.walletLogoContainerExtended}
-            >
-              <Logo />
-            </Box>
-          </Box>
+            label={
+              <Text>
+                {walletName}
+                {isPending}
+              </Text>
+            }
+          />
         )
       })}
     </Box>