@0xsequence/connect 0.0.0-20250314205219

package/src/connectors/coinbaseWallet/CoinbaseWalletLogo.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { LogoProps } from '../../types'
+
+export const CoinbaseWalletLogo: React.FunctionComponent<LogoProps> = props => {
+  return (
+    <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"
+      />
+    </svg>
+  )
+}

package/src/connectors/coinbaseWallet/coinbaseWallet.ts

@@ -0,0 +1,18 @@
+import { CreateConnectorFn } from 'wagmi'
+import { coinbaseWallet as coinbaseWalletBase, CoinbaseWalletParameters } from 'wagmi/connectors'
+
+import { Wallet } from '../../types'
+
+import { CoinbaseWalletLogo } from './CoinbaseWalletLogo'
+
+export const coinbaseWallet = (params: CoinbaseWalletParameters): Wallet => ({
+  id: 'coinbase-wallet',
+  logoDark: CoinbaseWalletLogo,
+  logoLight: CoinbaseWalletLogo,
+  name: 'Coinbase Wallet',
+  type: 'wallet',
+  createConnector: (() => {
+    const connector = coinbaseWalletBase({ ...params })
+    return connector
+  }) as () => CreateConnectorFn
+})

package/src/connectors/coinbaseWallet/index.ts

@@ -0,0 +1 @@
+export * from './coinbaseWallet'

package/src/connectors/discord/DiscordLogo.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { LogoProps } from '../../types'
+
+interface GetDiscordLogo {
+  isDarkMode: boolean
+}
+
+export const getDiscordLogo = ({ isDarkMode }: GetDiscordLogo) => {
+  const fillColor = isDarkMode ? 'white' : 'black'
+
+  const DiscordLogo: React.FunctionComponent = (props: LogoProps) => {
+    return (
+      <svg viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g id="discord-icon-svgrepo-com 1" clipPath="url(#clip0_193_26839)">
+          <path
+            id="Vector"
+            d="M30.3437 10.9324C28.5312 10.0844 26.5932 9.46812 24.567 9.11719C24.3182 9.56707 24.0275 10.1722 23.8271 10.6535C21.6733 10.3296 19.5392 10.3296 17.425 10.6535C17.2246 10.1722 16.9273 9.56707 16.6763 9.11719C14.6479 9.46812 12.7077 10.0867 10.8952 10.9369C7.23942 16.4613 6.24839 21.8485 6.7439 27.1592C9.16863 28.9699 11.5185 30.0699 13.8287 30.7897C14.3991 30.0047 14.9078 29.1701 15.346 28.2907C14.5114 27.9735 13.712 27.5821 12.9566 27.1277C13.157 26.9793 13.353 26.8241 13.5424 26.6644C18.1496 28.8193 23.1554 28.8193 27.7075 26.6644C27.8991 26.8241 28.0951 26.9793 28.2933 27.1277C27.5357 27.5843 26.7341 27.9757 25.8995 28.2929C26.3377 29.1701 26.8442 30.0069 27.4168 30.7919C29.7292 30.0721 32.0813 28.9722 34.506 27.1592C35.0874 21.0028 33.5128 15.6651 30.3437 10.9324ZM15.9737 23.8932C14.5907 23.8932 13.4565 22.602 13.4565 21.0298C13.4565 19.4575 14.5665 18.1641 15.9737 18.1641C17.381 18.1641 18.5152 19.4552 18.4909 21.0298C18.4931 22.602 17.381 23.8932 15.9737 23.8932ZM25.2762 23.8932C23.8932 23.8932 22.759 22.602 22.759 21.0298C22.759 19.4575 23.8689 18.1641 25.2762 18.1641C26.6835 18.1641 27.8176 19.4552 27.7934 21.0298C27.7934 22.602 26.6835 23.8932 25.2762 23.8932Z"
+            fill={fillColor}
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_193_26839">
+            <rect width="28" height="28" fill={fillColor} transform="translate(6.625 6)" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+  return DiscordLogo
+}

package/src/connectors/discord/discord.ts

@@ -0,0 +1,32 @@
+import { Wallet } from '../../types'
+import { sequenceWallet, BaseSequenceConnectorOptions } from '../wagmiConnectors'
+
+import { getDiscordLogo } from './DiscordLogo'
+
+export interface DiscordOptions extends BaseSequenceConnectorOptions {}
+
+export const discord = (options: DiscordOptions): Wallet => ({
+  id: 'discord',
+  isSequenceBased: true,
+  logoDark: getDiscordLogo({ isDarkMode: true }),
+  logoLight: getDiscordLogo({ isDarkMode: false }),
+  monochromeLogoDark: getDiscordLogo({ isDarkMode: true }),
+  monochromeLogoLight: getDiscordLogo({ isDarkMode: false }),
+  // iconBackground: '#fff',
+  name: 'Discord',
+  type: 'social',
+  createConnector: projectAccessKey => {
+    const connector = sequenceWallet({
+      ...options,
+      connect: {
+        projectAccessKey,
+        ...options?.connect,
+        settings: {
+          ...options?.connect?.settings,
+          signInWith: 'discord'
+        }
+      }
+    })
+    return connector
+  }
+})

package/src/connectors/discord/index.ts

@@ -0,0 +1 @@
+export * from './discord'

package/src/connectors/email/EmailLogo.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { LogoProps } from '../../types'
+
+interface GetEmailLogo {
+  isDarkMode: boolean
+}
+
+export const getEmailLogo = ({ isDarkMode }: GetEmailLogo) => {
+  const fillColor = isDarkMode ? 'white' : 'black'
+
+  const EmailLogo: React.FunctionComponent = (props: LogoProps) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 34" fill="none" {...props}>
+        <path
+          d="M17.0826 16.3805C17.1802 16.4598 17.32 16.4598 17.4176 16.3805L30.1401 6.04341C30.5283 5.72801 30.3053 5.09985 29.8051 5.09985H4.69499C4.19482 5.09985 3.9718 5.72801 4.35998 6.04341L17.0826 16.3805Z"
+          fill={fillColor}
+        />
+        <path
+          d="M19.7626 19.2667L33.3838 8.19943C33.731 7.91735 34.2501 8.16441 34.2501 8.61174V24.2249C34.2501 26.5721 32.3473 28.4749 30.0001 28.4749H4.50006C2.15285 28.4749 0.250061 26.5721 0.250061 24.2249V8.61174C0.250061 8.16441 0.769134 7.91735 1.11631 8.19943L14.7375 19.2667C16.2014 20.4561 18.2987 20.4561 19.7626 19.2667Z"
+          fill={fillColor}
+        />
+      </svg>
+    )
+  }
+
+  return EmailLogo
+}

package/src/connectors/email/email.ts

@@ -0,0 +1,31 @@
+import { Wallet } from '../../types'
+import { sequenceWallet, BaseSequenceConnectorOptions } from '../wagmiConnectors'
+
+import { getEmailLogo } from './EmailLogo'
+
+export interface EmailOptions extends BaseSequenceConnectorOptions {}
+
+export const email = (options: EmailOptions): Wallet => ({
+  id: 'email',
+  isSequenceBased: true,
+  logoDark: getEmailLogo({ isDarkMode: true }),
+  logoLight: getEmailLogo({ isDarkMode: false }),
+  // iconBackground: '#fff',
+  name: 'Email',
+  type: 'social',
+  createConnector: projectAccessKey => {
+    const connector = sequenceWallet({
+      ...options,
+      connect: {
+        projectAccessKey,
+        ...options?.connect,
+        settings: {
+          ...options?.connect?.settings,
+          signInOptions: ['email']
+        }
+      }
+    })
+
+    return connector
+  }
+})

package/src/connectors/email/emailWaas.ts

@@ -0,0 +1,21 @@
+import { Wallet } from '../../types'
+import { sequenceWaasWallet, BaseSequenceWaasConnectorOptions } from '../wagmiConnectors/sequenceWaasConnector'
+
+import { getEmailLogo } from './EmailLogo'
+
+export type EmailWaasOptions = Omit<BaseSequenceWaasConnectorOptions, 'loginType'>
+
+export const emailWaas = (options: EmailWaasOptions): Wallet => ({
+  id: 'email-waas',
+  logoDark: getEmailLogo({ isDarkMode: true }),
+  logoLight: getEmailLogo({ isDarkMode: false }),
+  name: 'Email',
+  type: 'social',
+  createConnector: () => {
+    const connector = sequenceWaasWallet({
+      ...options,
+      loginType: 'email'
+    })
+    return connector
+  }
+})

package/src/connectors/email/index.ts

@@ -0,0 +1 @@
+export * from './email'

package/src/connectors/facebook/FacebookLogo.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { LogoProps } from '../../types'
+
+export const FacebookLogo: React.FunctionComponent = (props: LogoProps) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 40" fill="none" {...props}>
+      <path
+        d="M17.4214 36.9716C9.27855 35.5145 3.10712 28.4859 3.10712 20.0001C3.10712 10.5715 10.8214 2.85718 20.25 2.85718C29.6785 2.85718 37.3928 10.5715 37.3928 20.0001C37.3928 28.4859 31.2214 35.5145 23.0785 36.9716L22.1357 36.2002H18.3643L17.4214 36.9716Z"
+        fill="url(#paint0_linear_193_14528)"
+      />
+      <path
+        d="M26.9357 24.7999L27.7072 19.9999H23.1643V16.657C23.1643 15.2856 23.6786 14.257 25.7357 14.257H27.9643V9.88558C26.7643 9.71415 25.3929 9.54272 24.1929 9.54272C20.25 9.54272 17.5071 11.9427 17.5071 16.2285V19.9999H13.2214V24.7999H17.5071V36.8857C18.45 37.0571 19.3929 37.1429 20.3357 37.1429C21.2786 37.1429 22.2214 37.0571 23.1643 36.8857V24.7999H26.9357Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_193_14528"
+          x1="20.2508"
+          y1="35.9507"
+          x2="20.2508"
+          y2="2.85086"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#0062E0" />
+          <stop offset="1" stopColor="#19AFFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+interface GetFacebookMonochromeLogo {
+  isDarkMode: boolean
+}
+
+export const getFacebookMonochromeLogo = ({ isDarkMode }: GetFacebookMonochromeLogo) => {
+  const fillColor = isDarkMode ? '#FFFFFF' : '#000000'
+
+  const FacebookMonochromeLogo: React.FunctionComponent = (props: LogoProps) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 40" fill="none" {...props}>
+        <path
+          d="M25.8582 10.4398C24.1222 10.4398 23.6288 11.2098 23.6288 12.9073V15.709H28.246L27.791 20.2476H23.6279V34H18.1024V20.2468H14.375V15.7081H18.1042V12.9851C18.1042 8.40625 19.9399 6 25.0891 6C26.1942 6 27.5163 6.0875 28.3055 6.19775V10.459"
+          fill={fillColor}
+        />
+      </svg>
+    )
+  }
+
+  return FacebookMonochromeLogo
+}

package/src/connectors/facebook/facebook.ts

@@ -0,0 +1,32 @@
+import { Wallet } from '../../types'
+import { sequenceWallet, BaseSequenceConnectorOptions } from '../wagmiConnectors'
+
+import { FacebookLogo, getFacebookMonochromeLogo } from './FacebookLogo'
+
+export interface FacebookOptions extends BaseSequenceConnectorOptions {}
+
+export const facebook = (options: FacebookOptions): Wallet => ({
+  id: 'facebook',
+  isSequenceBased: true,
+  logoDark: FacebookLogo,
+  logoLight: FacebookLogo,
+  monochromeLogoDark: getFacebookMonochromeLogo({ isDarkMode: true }),
+  monochromeLogoLight: getFacebookMonochromeLogo({ isDarkMode: false }),
+  // iconBackground: '#fff',
+  name: 'Facebook',
+  type: 'social',
+  createConnector: projectAccessKey => {
+    const connector = sequenceWallet({
+      ...options,
+      connect: {
+        projectAccessKey,
+        ...options?.connect,
+        settings: {
+          ...options?.connect?.settings,
+          signInWith: 'facebook'
+        }
+      }
+    })
+    return connector
+  }
+})

package/src/connectors/facebook/index.ts

@@ -0,0 +1 @@
+export * from './facebook'

package/src/connectors/google/GoogleLogo.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+import { LogoProps } from '../../types'
+
+export const GoogleLogo: React.FunctionComponent = (props: LogoProps) => {
+  return (
+    <svg viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g id="Frame 2114">
+        <g id="Group">
+          <path
+            id="Vector"
+            d="M20.7497 16.8828V23.5218H29.9756C29.5705 25.6568 28.3548 27.4647 26.5314 28.6803L32.095 32.9972C35.3366 30.0051 37.2068 25.6102 37.2068 20.3895C37.2068 19.1739 37.0977 18.005 36.895 16.883L20.7497 16.8828Z"
+            fill="#4285F4"
+          />
+          <path
+            id="Vector_2"
+            d="M11.1424 23.2627L9.88756 24.2232L5.44592 27.6829C8.2667 33.2777 14.0481 37.1427 20.7493 37.1427C25.3778 37.1427 29.2583 35.6154 32.0947 32.9973L26.5311 28.6803C25.0038 29.7089 23.0557 30.3324 20.7493 30.3324C16.2922 30.3324 12.5053 27.3246 11.1494 23.2726L11.1424 23.2627Z"
+            fill="#34A853"
+          />
+          <path
+            id="Vector_3"
+            d="M5.44594 12.3169C4.27718 14.6233 3.60712 17.2259 3.60712 19.9999C3.60712 22.7739 4.27718 25.3765 5.44594 27.6829C5.44594 27.6984 11.1499 23.2569 11.1499 23.2569C10.8071 22.2284 10.6044 21.1375 10.6044 19.9997C10.6044 18.8619 10.8071 17.7711 11.1499 16.7425L5.44594 12.3169Z"
+            fill="#FBBC05"
+          />
+          <path
+            id="Vector_4"
+            d="M20.7497 9.6829C23.2744 9.6829 25.5185 10.5556 27.3107 12.2387L32.2198 7.32972C29.2431 4.55574 25.3783 2.85693 20.7497 2.85693C14.0484 2.85693 8.2667 6.70628 5.44592 12.3167L11.1497 16.7427C12.5055 12.6907 16.2926 9.6829 20.7497 9.6829Z"
+            fill="#EA4335"
+          />
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+interface GetGoogleMonochromeLogo {
+  isDarkMode: boolean
+}
+
+export const getMonochromeGoogleLogo = ({ isDarkMode }: GetGoogleMonochromeLogo) => {
+  const fillColor = isDarkMode ? 'white' : 'black'
+
+  const GoogleMonochromeLogo: React.FunctionComponent = (props: LogoProps) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 40" fill="none" {...props}>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M25.8355 14.7613C24.5584 13.5329 22.9441 12.9032 21.1356 12.9032C17.9377 12.9032 15.2302 15.0813 14.2595 18.0232L14.2593 18.023C14.0142 18.7662 13.8712 19.5609 13.8712 20.3866C13.8712 21.2124 14.004 22.0072 14.2594 22.7504L14.2587 22.751H14.2595C15.2302 25.6929 17.9377 27.871 21.1356 27.871C22.7907 27.871 24.1904 27.4168 25.2939 26.6736V26.6732C26.5812 25.7958 27.4497 24.5055 27.746 22.9777H21.1355V18.3223H32.6808C32.8034 19.0758 32.875 19.85 32.875 20.6655C32.875 24.4332 31.5467 27.6126 29.2377 29.77L29.2378 29.7703C27.2148 31.6594 24.446 32.7742 21.1356 32.7742C16.3438 32.7742 12.2059 29.9871 10.1931 25.9407V25.94L10.193 25.9401C9.35521 24.2678 8.875 22.3891 8.875 20.3866C8.875 18.384 9.35521 16.5053 10.193 14.833H10.1934C12.2063 10.7869 16.344 8 21.1356 8C24.446 8 27.2148 9.22839 29.3298 11.231L25.8355 14.7613Z"
+          fill={fillColor}
+        />
+      </svg>
+    )
+  }
+
+  return GoogleMonochromeLogo
+}

package/src/connectors/google/google.ts

@@ -0,0 +1,31 @@
+import { Wallet } from '../../types'
+import { sequenceWallet, BaseSequenceConnectorOptions } from '../wagmiConnectors'
+
+import { GoogleLogo, getMonochromeGoogleLogo } from './GoogleLogo'
+
+export type GoogleOptions = BaseSequenceConnectorOptions
+
+export const google = (options: GoogleOptions): Wallet => ({
+  id: 'google',
+  isSequenceBased: true,
+  logoDark: GoogleLogo,
+  logoLight: GoogleLogo,
+  monochromeLogoDark: getMonochromeGoogleLogo({ isDarkMode: true }),
+  monochromeLogoLight: getMonochromeGoogleLogo({ isDarkMode: false }),
+  name: 'Google',
+  type: 'social',
+  createConnector: projectAccessKey => {
+    const connector = sequenceWallet({
+      ...options,
+      connect: {
+        projectAccessKey,
+        ...options?.connect,
+        settings: {
+          ...options?.connect?.settings,
+          signInWith: 'google'
+        }
+      }
+    })
+    return connector
+  }
+})

package/src/connectors/google/googleWaas.ts

@@ -0,0 +1,23 @@
+import { Wallet } from '../../types'
+import { sequenceWaasWallet, BaseSequenceWaasConnectorOptions } from '../wagmiConnectors/sequenceWaasConnector'
+
+import { GoogleLogo, getMonochromeGoogleLogo } from './GoogleLogo'
+
+export type GoogleWaasOptions = Omit<BaseSequenceWaasConnectorOptions, 'loginType'>
+
+export const googleWaas = (options: GoogleWaasOptions): Wallet => ({
+  id: 'google-waas',
+  logoDark: GoogleLogo,
+  logoLight: GoogleLogo,
+  monochromeLogoDark: getMonochromeGoogleLogo({ isDarkMode: true }),
+  monochromeLogoLight: getMonochromeGoogleLogo({ isDarkMode: false }),
+  name: 'Google',
+  type: 'social',
+  createConnector: () => {
+    const connector = sequenceWaasWallet({
+      ...options,
+      loginType: 'google'
+    })
+    return connector
+  }
+})

package/src/connectors/google/index.ts

@@ -0,0 +1 @@
+export * from './google'

package/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>
+)

package/src/connectors/metaMask/index.ts

@@ -0,0 +1 @@
+export * from './metaMask'

package/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
+})

package/src/connectors/mock/index.ts

@@ -0,0 +1 @@
+export * from './mock'

package/src/connectors/mock/mock.ts

@@ -0,0 +1,18 @@
+import { mock as mockBase, MockParameters } from 'wagmi/connectors'
+
+import { Wallet } from '../../types'
+import { SequenceLogo } from '../sequence/SequenceLogo'
+
+export const mock = (options: MockParameters): Wallet => ({
+  id: 'mock',
+  isSequenceBased: true,
+  logoDark: SequenceLogo,
+  logoLight: SequenceLogo,
+  // iconBackground: '#777',
+  name: 'Mock',
+  type: 'wallet',
+  createConnector: () => {
+    const connector = mockBase(options)
+    return connector
+  }
+})

package/src/connectors/sequence/SequenceLogo.tsx

@@ -0,0 +1,138 @@
+import React from 'react'
+
+import { LogoProps } from '../../types'
+
+export const SequenceLogo: React.FunctionComponent = (props: LogoProps) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" style={{ fill: 'none' }} id="svg1316" version="1.1" viewBox="0 0 396 396" {...props}>
+      <g transform="translate(0,38)" id="g1256" clipPath="url(#clip0_5_131)">
+        <g id="g1254" clipPath="url(#clip1_5_131)">
+          <path
+            style={{ fill: '#111111' }}
+            id="path1232"
+            d="M 0,67.5049 V 250.165 c 0,37.282 30.1402,67.505 67.32,67.505 h 261.36 c 37.18,0 67.32,-30.223 67.32,-67.505 V 67.5049 C 396,30.223 365.86,0 328.68,0 H 67.32 C 30.1402,0 0,30.223 0,67.5049 Z"
+          />
+          <path
+            style={{ fill: 'url(#paint0_linear_5_131' }}
+            id="path1234"
+            d="M 0,67.5049 V 250.165 c 0,37.282 30.1402,67.505 67.32,67.505 h 261.36 c 37.18,0 67.32,-30.223 67.32,-67.505 V 67.5049 C 396,30.223 365.86,0 328.68,0 H 67.32 C 30.1402,0 0,30.223 0,67.5049 Z"
+          />
+          <path
+            style={{ fill: 'url(#paint1_linear_5_131' }}
+            id="path1236"
+            d="m 98.9999,79.4176 c 0,-10.9653 -8.8648,-19.8544 -19.8,-19.8544 -10.9352,0 -19.8,8.8891 -19.8,19.8544 0,10.9652 8.8648,19.8544 19.8,19.8544 10.9352,0 19.8,-8.8892 19.8,-19.8544 z"
+          />
+          <path
+            style={{ fill: 'url(#paint2_linear_5_131)' }}
+            id="path1238"
+            d="m 98.9999,79.4176 c 0,-10.9653 -8.8648,-19.8544 -19.8,-19.8544 -10.9352,0 -19.8,8.8891 -19.8,19.8544 0,10.9652 8.8648,19.8544 19.8,19.8544 10.9352,0 19.8,-8.8892 19.8,-19.8544 z"
+          />
+          <path
+            style={{ fill: 'url(#paint3_linear_5_131)' }}
+            id="path1240"
+            d="m 98.9999,79.4176 c 0,-10.9653 -8.8648,-19.8544 -19.8,-19.8544 -10.9352,0 -19.8,8.8891 -19.8,19.8544 0,10.9652 8.8648,19.8544 19.8,19.8544 10.9352,0 19.8,-8.8892 19.8,-19.8544 z"
+          />
+          <path
+            style={{ fill: 'url(#paint4_linear_5_131)' }}
+            id="path1242"
+            d="m 98.9999,238.126 c 0,-10.965 -8.8648,-19.854 -19.8,-19.854 -10.9352,0 -19.8,8.889 -19.8,19.854 0,10.966 8.8648,19.855 19.8,19.855 10.9352,0 19.8,-8.889 19.8,-19.855 z"
+          />
+          <path
+            style={{ fill: 'url(#paint5_linear_5_131)' }}
+            id="path1244"
+            d="m 336.6,158.835 c 0,-10.965 -8.865,-19.854 -19.8,-19.854 -10.935,0 -19.8,8.889 -19.8,19.854 0,10.965 8.865,19.855 19.8,19.855 10.935,0 19.8,-8.89 19.8,-19.855 z"
+          />
+          <path
+            style={{ fill: 'url(#paint6_linear_5_131)' }}
+            id="path1246"
+            d="m 336.6,158.835 c 0,-10.965 -8.865,-19.854 -19.8,-19.854 -10.935,0 -19.8,8.889 -19.8,19.854 0,10.965 8.865,19.855 19.8,19.855 10.935,0 19.8,-8.89 19.8,-19.855 z"
+          />
+          <path
+            style={{ fill: 'url(#paint7_linear_5_131)' }}
+            id="path1248"
+            d="M 316.8,59.5632 H 158.4 c -10.935,0 -19.8,8.8891 -19.8,19.8544 0,10.9652 8.865,19.8544 19.8,19.8544 h 158.4 c 10.935,0 19.8,-8.8892 19.8,-19.8544 0,-10.9653 -8.865,-19.8544 -19.8,-19.8544 z"
+          />
+          <path
+            style={{ fill: 'url(#paint8_linear_5_131)' }}
+            id="path1250"
+            d="M 316.8,218.272 H 158.4 c -10.935,0 -19.8,8.889 -19.8,19.854 0,10.966 8.865,19.855 19.8,19.855 h 158.4 c 10.935,0 19.8,-8.889 19.8,-19.855 0,-10.965 -8.865,-19.854 -19.8,-19.854 z"
+          />
+          <path
+            style={{ fill: 'url(#paint9_linear_5_131)' }}
+            id="path1252"
+            d="M 237.6,138.981 H 79.2 c -10.9352,0 -19.8,8.889 -19.8,19.854 0,10.965 8.8648,19.855 19.8,19.855 h 158.4 c 10.935,0 19.8,-8.89 19.8,-19.855 0,-10.965 -8.865,-19.854 -19.8,-19.854 z"
+          />
+        </g>
+      </g>
+      <defs id="defs1314">
+        <linearGradient gradientUnits="userSpaceOnUse" y2="318" x2="198" y1="4.0585401e-05" x1="198" id="paint0_linear_5_131">
+          <stop id="stop1258" stopColor="#1D273D" />
+          <stop id="stop1260" stopColor="#0D0F13" offset="1" />
+        </linearGradient>
+        <linearGradient gradientUnits="userSpaceOnUse" y2="63" x2="92.5" y1="99" x1="65.5" id="paint1_linear_5_131">
+          <stop id="stop1263" stopColor="#4462FE" />
+          <stop id="stop1265" stopColor="#7D69FA" offset="1" />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          y2="97.591103"
+          x2="96.137703"
+          y1="99.291199"
+          x1="62.879902"
+          id="paint2_linear_5_131"
+        >
+          <stop id="stop1268" stopColor="#3757FD" />
+          <stop id="stop1270" stopColor="#6980FA" offset="1" />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          y2="97.591103"
+          x2="96.137703"
+          y1="99.291199"
+          x1="62.879902"
+          id="paint3_linear_5_131"
+        >
+          <stop id="stop1273" stopColor="#2447FF" />
+          <stop id="stop1275" stopColor="#6980FA" offset="1" />
+        </linearGradient>
+        <linearGradient gradientUnits="userSpaceOnUse" y2="223.5" x2="91.5" y1="251.5" x1="65" id="paint4_linear_5_131">
+          <stop id="stop1278" stopColor="#BC3EE6" />
+          <stop id="stop1280" stopColor="#D972F1" offset="1" />
+        </linearGradient>
+        <linearGradient gradientUnits="userSpaceOnUse" y2="146" x2="329.5" y1="172" x1="305" id="paint5_linear_5_131">
+          <stop id="stop1283" stopColor="#29BDFF" />
+          <stop id="stop1285" stopColor="#96E7FB" offset="1" />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          y2="176.772"
+          x2="334.56699"
+          y1="178.418"
+          x1="300.17999"
+          id="paint6_linear_5_131"
+        >
+          <stop id="stop1288" stopColor="#23BBFF" />
+          <stop id="stop1290" stopColor="#85E7FF" offset="1" />
+        </linearGradient>
+        <linearGradient gradientUnits="userSpaceOnUse" y2="60" x2="317.5" y1="99" x1="154.5" id="paint7_linear_5_131">
+          <stop id="stop1293" stopColor="#23BBFF" />
+          <stop id="stop1295" stopColor="#85E7FF" offset="1" />
+        </linearGradient>
+        <linearGradient gradientUnits="userSpaceOnUse" y2="218" x2="312.5" y1="258" x1="156" id="paint8_linear_5_131">
+          <stop id="stop1298" stopColor="#2447FF" />
+          <stop id="stop1300" stopColor="#6980FA" offset="1" />
+        </linearGradient>
+        <linearGradient gradientUnits="userSpaceOnUse" y2="139" x2="235.5" y1="179" x1="86.000099" id="paint9_linear_5_131">
+          <stop id="stop1303" stopColor="#6634FF" />
+          <stop id="stop1305" stopColor="#9C6DFF" offset="1" />
+        </linearGradient>
+        <clipPath id="clip0_5_131">
+          <rect height="317.67001" width="396" style={{ fill: '#ffffff' }} y="0" x="0" id="rect1308" />
+        </clipPath>
+        <clipPath id="clip1_5_131">
+          <rect height="317.67001" width="396" style={{ fill: '#ffffff' }} y="0" x="0" id="rect1311" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/connectors/sequence/index.ts

@@ -0,0 +1 @@
+export * from './sequence'