Add metaMask connector

0xsequence · Dec 4, 2024 · 23ddc84 · 23ddc84
1 parent cea8631
commit 23ddc84
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 5 deletions.
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/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,18 @@ export const getDefaultWaasConnectors = (options: DefaultWaasConnectorOptions):
     )
   }
 
+  if (options.metaMask !== false) {
+    wallets.push(
+      metaMask({
+        dappMetadata: {
+          name: appName,
+          url: window.location.origin,
+          iconUrl: window.location.origin + '/favicon.ico'
+        }
+      })
+    )
+  }
+
   if (options.coinbase !== false) {
     wallets.push(
       coinbaseWallet({
@@ -238,6 +254,26 @@ export const getDefaultUniversalConnectors = (options: DefaultUniversalConnector
     )
   }
 
+  if (options.metaMask !== false) {
+    wallets.push(
+      metaMask({
+        dappMetadata: {
+          name: appName,
+          url: window.location.origin,
+          iconUrl: window.location.origin + '/favicon.ico'
+        }
+      })
+    )
+  }
+
+  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
+})