Metamask connector (#210)

* Add metaMask connector * Fix import order * Check for window undefined for nextjs * Update wagmi to ^2.13.3
0xsequence · Dec 4, 2024 · 768ff15 · 768ff15
1 parent cea8631
commit 768ff15
Show file tree

Hide file tree

Showing 14 changed files with 700 additions and 246 deletions.
diff --git a/examples/next/package.json b/examples/next/package.json
@@ -22,7 +22,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "viem": "^2.12.0",
-    "wagmi": "^2.9.5"
+    "wagmi": "^2.13.3"
   },
   "devDependencies": {
     "@types/node": "^20.12.12",

diff --git a/examples/react/package.json b/examples/react/package.json
@@ -24,7 +24,7 @@
     "react-dom": "^18.3.1",
     "typescript": "^5.4.5",
     "viem": "^2.12.0",
-    "wagmi": "^2.9.5"
+    "wagmi": "^2.13.3"
   },
   "devDependencies": {
     "@types/node": "^20.12.12",

diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     "rimraf": "^5.0.7",
     "turbo": "2.0.1",
     "typescript": "~5.4.5",
-    "wagmi": "^2.9.5"
+    "wagmi": "^2.13.3"
   },
   "resolutions": {},
   "packageManager": "[email protected]"

diff --git a/packages/checkout/package.json b/packages/checkout/package.json
@@ -50,7 +50,7 @@
     "react": ">= 17",
     "react-dom": ">= 17",
     "viem": ">= 2.0.0",
-    "wagmi": ">= 2.0.0"
+    "wagmi": "^2.13.3"
   },
   "devDependencies": {
     "@0xsequence/design-system": "^1.7.8",
@@ -61,6 +61,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "vite": "^5.2.11",
-    "wagmi": "^2.9.5"
+    "wagmi": "^2.13.3"
   }
 }
diff --git a/packages/kit/package.json b/packages/kit/package.json
@@ -61,14 +61,14 @@
     "react-apple-signin-auth": ">= 1.1.0",
     "react-dom": ">= 17",
     "viem": ">= 2.0.0",
-    "wagmi": ">= 2.0.0"
+    "wagmi": "^2.13.3"
   },
   "devDependencies": {
     "0xsequence": "^2.1.4",
     "@tanstack/react-query": "^5.37.1",
     "@types/uuid": "^9.0.8",
     "ethers": "6.13.0",
     "viem": "^2.12.0",
-    "wagmi": "^2.9.5"
+    "wagmi": "^2.13.3"
   }
 }
diff --git a/packages/kit/src/components/Connect/Connect.tsx b/packages/kit/src/components/Connect/Connect.tsx
@@ -78,6 +78,9 @@ export const Connect = (props: ConnectWalletContentProps) => {
       if (connector.id === 'com.coinbase.wallet') {
         return !connectors.find(connector => (connector as ExtendedConnector)?._wallet?.id === 'coinbase-wallet')
       }
+      if (connector.id === 'io.metamask') {
+        return !connectors.find(connector => (connector as ExtendedConnector)?._wallet?.id === 'metamask-wallet')
+      }
 
       return true
     })

diff --git a/packages/kit/src/components/KitProvider/KitProvider.tsx b/packages/kit/src/components/KitProvider/KitProvider.tsx
@@ -21,11 +21,11 @@ import { useWaasConfirmationHandler } from '../../hooks/useWaasConfirmationHandl
 import { useEmailConflict } from '../../hooks/useWaasEmailConflict'
 import { ExtendedConnector, DisplayedAsset, EthAuthSettings, KitConfig, Theme, ModalPosition } from '../../types'
 import { getModalPositionCss } from '../../utils/styling'
+import { Connect } from '../Connect/Connect'
 import { NetworkBadge } from '../NetworkBadge'
 import { PageHeading } from '../PageHeading'
 import { PoweredBySequence } from '../SequenceLogo'
 import { TxnDetails } from '../TxnDetails'
-import { Connect } from '../Connect/Connect'
 
 export type KitConnectProviderProps = {
   children: React.ReactNode

diff --git a/packages/kit/src/config/defaultConnectors.ts b/packages/kit/src/config/defaultConnectors.ts
@@ -8,6 +8,7 @@ import { emailWaas } from '../connectors/email/emailWaas'
 import { facebook } from '../connectors/facebook'
 import { google } from '../connectors/google'
 import { googleWaas } from '../connectors/google/googleWaas'
+import { metaMask } from '../connectors/metaMask'
 import { sequence } from '../connectors/sequence'
 import { twitch } from '../connectors/twitch'
 import { walletConnect } from '../connectors/walletConnect'
@@ -39,6 +40,7 @@ export interface DefaultWaasConnectorOptions extends CommonConnectorOptions {
         redirectURI: string
       }
   coinbase?: boolean
+  metaMask?: boolean
   walletConnect?:
     | false
     | {
@@ -73,6 +75,8 @@ export interface DefaultUniversalConnectorOptions extends CommonConnectorOptions
   facebook?: boolean
   twitch?: boolean
   apple?: boolean
+  coinbase?: boolean
+  metaMask?: boolean
   walletConnect?:
     | false
     | {
@@ -146,6 +150,20 @@ export const getDefaultWaasConnectors = (options: DefaultWaasConnectorOptions):
     )
   }
 
+  if (options.metaMask !== false) {
+    if (typeof window !== 'undefined') {
+      wallets.push(
+        metaMask({
+          dappMetadata: {
+            name: appName,
+            url: window.location.origin,
+            iconUrl: `https://www.google.com/s2/favicons?domain_url=${window.location.origin}`
+          }
+        })
+      )
+    }
+  }
+
   if (options.coinbase !== false) {
     wallets.push(
       coinbaseWallet({
@@ -238,6 +256,28 @@ export const getDefaultUniversalConnectors = (options: DefaultUniversalConnector
     )
   }
 
+  if (options.metaMask !== false) {
+    if (typeof window !== 'undefined') {
+      wallets.push(
+        metaMask({
+          dappMetadata: {
+            name: appName,
+            url: window.location.origin,
+            iconUrl: `https://www.google.com/s2/favicons?domain_url=${window.location.origin}`
+          }
+        })
+      )
+    }
+  }
+
+  if (options.coinbase !== false) {
+    wallets.push(
+      coinbaseWallet({
+        appName
+      })
+    )
+  }
+
   if (options.walletConnect || options.walletConnectProjectId) {
     const projectId = (options.walletConnect && options.walletConnect?.projectId) || options.walletConnectProjectId!
 

diff --git a/packages/kit/src/connectors/coinbaseWallet/CoinbaseWalletLogo.tsx b/packages/kit/src/connectors/coinbaseWallet/CoinbaseWalletLogo.tsx
@@ -2,15 +2,15 @@ import React from 'react'
 
 import { LogoProps } from '../../types'
 
-export const CoinbaseWalletLogo: React.FunctionComponent = (props: LogoProps) => {
+export const CoinbaseWalletLogo: React.FunctionComponent<LogoProps> = props => {
   return (
-    <svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <rect width="28" height="28" fill="#2C5FF6" />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="none" {...props}>
+      <rect width="100%" height="100%" fill="#0052FF" rx="100" />
       <path
+        fill="#fff"
         fillRule="evenodd"
+        d="M152 512c0 198.823 161.177 360 360 360s360-161.177 360-360-161.177-360-360-360-360 161.177-360 360Zm268-116c-13.255 0-24 10.745-24 24v184c0 13.255 10.745 24 24 24h184c13.255 0 24-10.745 24-24V420c0-13.255-10.745-24-24-24H420Z"
         clipRule="evenodd"
-        d="M14 23.8C19.4124 23.8 23.8 19.4124 23.8 14C23.8 8.58761 19.4124 4.2 14 4.2C8.58761 4.2 4.2 8.58761 4.2 14C4.2 19.4124 8.58761 23.8 14 23.8ZM11.55 10.8C11.1358 10.8 10.8 11.1358 10.8 11.55V16.45C10.8 16.8642 11.1358 17.2 11.55 17.2H16.45C16.8642 17.2 17.2 16.8642 17.2 16.45V11.55C17.2 11.1358 16.8642 10.8 16.45 10.8H11.55Z"
-        fill="white"
       />
     </svg>
   )

diff --git a/packages/kit/src/connectors/metaMask/MetaMaskLogo.tsx b/packages/kit/src/connectors/metaMask/MetaMaskLogo.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+
+import { LogoProps } from '../../types'
+
+export const MetaMaskLogo: React.FunctionComponent<LogoProps> = props => (
+  <svg viewBox="0 0 318.6 318.6" fill="none" {...props}>
+    <path
+      d="M274.1 35.5l-99.5 73.9L193 65.8z"
+      style={{ fill: '#E2761B', stroke: '#E2761B', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+    <path
+      d="M44.4 35.5l98.7 74.6-17.5-44.3zm193.9 171.3l-26.5 40.6 56.7 15.6 16.3-55.3zm-204.4.9L50.1 263l56.7-15.6-26.5-40.6z"
+      style={{ fill: '#E4761B', stroke: '#E4761B', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+    <path
+      d="M103.6 138.2l-15.8 23.9 56.3 2.5-2-60.5zm111.3 0l-39-34.8-1.3 61.2 56.2-2.5zM106.8 247.4l33.8-16.5-29.2-22.8zm71.1-16.5l33.9 16.5-4.7-39.3z"
+      style={{ fill: '#E4761B', stroke: '#E4761B', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+    <path
+      d="M211.8 247.4l-33.9-16.5 2.7 22.1-.3 9.3zm-105 0l31.5 14.9-.2-9.3 2.5-22.1z"
+      style={{ fill: '#D7C1B3', stroke: '#D7C1B3', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+    <path
+      d="M138.8 193.5l-28.2-8.3 19.9-9.1zm40.9 0l8.3-17.4 20 9.1z"
+      style={{ fill: '#233447', stroke: '#233447', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+    <path
+      d="M106.8 247.4l4.8-40.6-31.3.9zM207 206.8l4.8 40.6 26.5-39.7zm23.8-44.7l-56.2 2.5 5.2 28.9 8.3-17.4 20 9.1zm-120.2 23.1l20-9.1 8.2 17.4 5.3-28.9-56.3-2.5z"
+      style={{ fill: '#CD6116', stroke: '#CD6116', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+    <path
+      d="M87.8 162.1l23.6 46-.8-22.9zm120.3 23.1l-1 22.9 23.7-46zm-64-20.6l-5.3 28.9 6.6 34.1 1.5-44.9zm30.5 0l-2.7 18 1.2 45 6.7-34.1z"
+      style={{ fill: '#E4751F', stroke: '#E4751F', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+    <path
+      d="M179.8 193.5l-6.7 34.1 4.8 3.3 29.2-22.8 1-22.9zm-69.2-8.3l.8 22.9 29.2 22.8 4.8-3.3-6.6-34.1z"
+      style={{ fill: '#F6851B', stroke: '#F6851B', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+    <path
+      d="M180.3 262.3l.3-9.3-2.5-2.2h-37.7l-2.3 2.2.2 9.3-31.5-14.9 11 9 22.3 15.5h38.3l22.4-15.5 11-9z"
+      style={{ fill: '#C0AD9E', stroke: '#C0AD9E', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+    <path
+      d="M177.9 230.9l-4.8-3.3h-27.7l-4.8 3.3-2.5 22.1 2.3-2.2h37.7l2.5 2.2z"
+      style={{ fill: '#161616', stroke: '#161616', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+    <path
+      d="M278.3 114.2l8.5-40.8-12.7-37.9-96.2 71.4 37 31.3 52.3 15.3 11.6-13.5-5-3.6 8-7.3-6.2-4.8 8-6.1zM31.8 73.4l8.5 40.8-5.4 4 8 6.1-6.1 4.8 8 7.3-5 3.6 11.5 13.5 52.3-15.3 37-31.3-96.2-71.4z"
+      style={{ fill: '#763D16', stroke: '#763D16', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+    <path
+      d="M267.2 153.5l-52.3-15.3 15.9 23.9-23.7 46 31.2-.4h46.5zm-163.6-15.3l-52.3 15.3-17.4 54.2h46.4l31.1.4-23.6-46zm71 26.4l3.3-57.7 15.2-41.1h-67.5l15 41.1 3.5 57.7 1.2 18.2.1 44.8h27.7l.2-44.8z"
+      style={{ fill: '#F6851B', stroke: '#F6851B', strokeLinecap: 'round', strokeLinejoin: 'round' }}
+    />
+  </svg>
+)
diff --git a/packages/kit/src/connectors/metaMask/index.ts b/packages/kit/src/connectors/metaMask/index.ts
@@ -0,0 +1 @@
+export * from './metaMask'
diff --git a/packages/kit/src/connectors/metaMask/metaMask.ts b/packages/kit/src/connectors/metaMask/metaMask.ts
@@ -0,0 +1,18 @@
+import { CreateConnectorFn } from 'wagmi'
+import { metaMask as metaMaskConnector, MetaMaskParameters } from 'wagmi/connectors'
+
+import { Wallet } from '../../types'
+
+import { MetaMaskLogo } from './MetaMaskLogo'
+
+export const metaMask = (params: MetaMaskParameters): Wallet => ({
+  id: 'metamask-wallet',
+  logoDark: MetaMaskLogo,
+  logoLight: MetaMaskLogo,
+  name: 'MetaMask',
+  type: 'wallet',
+  createConnector: (() => {
+    const connector = metaMaskConnector({ ...params })
+    return connector
+  }) as () => CreateConnectorFn
+})
diff --git a/packages/wallet/package.json b/packages/wallet/package.json
@@ -49,7 +49,7 @@
     "framer-motion": ">= 8.5.2",
     "react": ">= 17",
     "react-dom": ">= 17",
-    "wagmi": ">= 2.5.0",
+    "wagmi": "^2.13.3",
     "viem": ">= 2.0.0"
   },
   "devDependencies": {
@@ -60,6 +60,6 @@
     "framer-motion": "^8.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "wagmi": "^2.9.5"
+    "wagmi": "^2.13.3"
   }
 }