Ecosystem wallet connector (#271)

* Ecosystem wallet connector (WIP)

* Update

* Option for ecosystem wallet icon width

* Minor style updates

* Fix connect component email check

* Remove unnecessary prop

* Aux data support

* Update type

* Refactor

* Handle account mismatch error

* beta version

* Merge fixes

* Update logo in config

* WIP

* Update example

* beta version

* Update beta version

* Update initial versions

* Remove unnecessary params of ecosystem DefaultWaasConnectorOptions

* Beta version "5.0.1-ecosystem-beta.0"

* Update initial version in pre

* Remove beta version related code/config

* Move common function normalizeChainId to utils

* Remove other ecosystem beta version changes

* Replace isDev with nodesUrl option

* Add isBrowser checks

Author: tolgahan-arikan

packages/connect/src/components/Connect/Connect.tsx

@@ -220,7 +220,7 @@ export const Connect = (props: ConnectProps) => {
   const walletConnectors = [...baseWalletConnectors, ...injectedConnectors].filter(c =>
     hasConnectedSequenceUniversal ? c.name !== SEQUENCE_UNIVERSAL_CONNECTOR_NAME : true
   )
-  const emailConnector = (connectors as ExtendedConnector[]).find(c => c._wallet.id.includes('email'))
+  const emailConnector = (connectors as ExtendedConnector[]).find(c => c._wallet?.id.includes('email'))
 
   const onChangeEmail: React.ChangeEventHandler<HTMLInputElement> = ev => {
     setEmail(ev.target.value)
@@ -353,7 +353,7 @@ export const Connect = (props: ConnectProps) => {
       <div
         className="flex flex-col justify-center text-primary items-center font-medium"
         style={{
-          marginTop: '4px'
+          marginTop: '2px'
         }}
       >
         <TitleWrapper isPreview={isPreview}>
@@ -362,7 +362,7 @@ export const Connect = (props: ConnectProps) => {
               ? `Connecting...`
               : hasConnectedSocialOrSequenceUniversal
                 ? 'Wallets'
-                : `Sign in ${projectName ? `to ${projectName}` : ''}`}
+                : `Connect ${projectName ? `to ${projectName}` : ''}`}
           </Text>
         </TitleWrapper>
 

packages/connect/src/components/ConnectButton/ConnectButton.tsx

@@ -34,7 +34,7 @@ export const ConnectButton = (props: ConnectButtonProps) => {
 
   if (isDescriptive) {
     return (
-      <Tooltip message={label || walletProps.name}>
+      <Tooltip message={label || walletProps.name} side="bottom">
         <Card
           className="flex gap-1 justify-center items-center w-full"
           clickable

packages/connect/src/config/defaultConnectors.ts

@@ -3,6 +3,7 @@ import { CreateConnectorFn } from 'wagmi'
 import { apple } from '../connectors/apple'
 import { appleWaas } from '../connectors/apple/appleWaas'
 import { coinbaseWallet } from '../connectors/coinbaseWallet'
+import { ecosystemWallet, type EcosystemWalletOptions } from '../connectors/ecosystem'
 import { email } from '../connectors/email'
 import { emailWaas } from '../connectors/email/emailWaas'
 import { facebook } from '../connectors/facebook'
@@ -38,6 +39,7 @@ export interface DefaultWaasConnectorOptions extends CommonConnectorOptions {
         clientId: string
         redirectURI: string
       }
+  ecosystem?: false | Omit<EcosystemWalletOptions, 'projectAccessKey' | 'defaultNetwork'>
   coinbase?: boolean
   metaMask?: boolean
   walletConnect?:
@@ -76,6 +78,7 @@ export interface DefaultUniversalConnectorOptions extends CommonConnectorOptions
   apple?: boolean
   coinbase?: boolean
   metaMask?: boolean
+  ecosystem?: false | Omit<EcosystemWalletOptions, 'projectAccessKey' | 'defaultNetwork'>
   walletConnect?:
     | false
     | {
@@ -146,6 +149,16 @@ export const getDefaultWaasConnectors = (options: DefaultWaasConnectorOptions):
     )
   }
 
+  if (options.ecosystem) {
+    wallets.push(
+      ecosystemWallet({
+        ...options.ecosystem,
+        projectAccessKey,
+        defaultNetwork: defaultChainId ?? 1
+      })
+    )
+  }
+
   if (options.metaMask !== false) {
     if (typeof window !== 'undefined') {
       wallets.push(
@@ -253,6 +266,16 @@ export const getDefaultUniversalConnectors = (options: DefaultUniversalConnector
     )
   }
 
+  if (options.ecosystem) {
+    wallets.push(
+      ecosystemWallet({
+        ...options.ecosystem,
+        projectAccessKey,
+        defaultNetwork: defaultChainId ?? 1
+      })
+    )
+  }
+
   if (options.metaMask !== false) {
     if (typeof window !== 'undefined') {
       wallets.push(

packages/connect/src/connectors/ecosystem/ecosystemWallet.ts

@@ -0,0 +1,134 @@
+import { ethers } from 'ethers'
+import { getAddress } from 'viem'
+import { createConnector, Connector } from 'wagmi'
+
+import { normalizeChainId } from '../../utils/helpers'
+
+import { EcosystemWalletTransportProvider } from './provider'
+
+export interface EcosystemConnector extends Connector {
+  type: 'ecosystem-wallet'
+  auxData?: Record<string, unknown>
+}
+
+export interface BaseEcosystemConnectorOptions {
+  projectAccessKey: string
+  walletUrl: string
+  defaultNetwork: number
+  nodesUrl?: string
+}
+
+ecosystemWallet.type = 'ecosystem-wallet' as const
+
+export function ecosystemWallet(params: BaseEcosystemConnectorOptions) {
+  type Provider = EcosystemWalletTransportProvider
+  type Properties = {
+    ecosystemProvider: EcosystemWalletTransportProvider
+    auxData?: Record<string, unknown>
+  }
+  type StorageItem = {}
+
+  const nodesUrl = params.nodesUrl ?? 'https://nodes.sequence.app'
+
+  const ecosystemProvider = new EcosystemWalletTransportProvider(
+    params.projectAccessKey,
+    params.walletUrl,
+    params.defaultNetwork,
+    nodesUrl
+  )
+
+  return createConnector<Provider, Properties, StorageItem>(config => ({
+    id: `ecosystem-wallet`,
+    name: 'Ecosystem Wallet',
+    type: ecosystemWallet.type,
+    ecosystemProvider,
+    params,
+    auxData: undefined as Record<string, unknown> | undefined,
+
+    async setup() {
+      if (typeof window !== 'object') {
+        // (for SSR) only run in browser client
+        return
+      }
+    },
+
+    async connect(_connectInfo) {
+      const provider = await this.getProvider()
+      let walletAddress = provider.transport.getWalletAddress()
+
+      if (!walletAddress) {
+        try {
+          const res = await provider.transport.connect(this.auxData)
+          walletAddress = res.walletAddress
+        } catch (e) {
+          console.log(e)
+          await this.disconnect()
+          throw e
+        }
+      }
+
+      return {
+        accounts: [getAddress(walletAddress)],
+        chainId: await this.getChainId()
+      }
+    },
+
+    async disconnect() {
+      const provider = await this.getProvider()
+      provider.transport.disconnect()
+    },
+
+    async getAccounts() {
+      const provider = await this.getProvider()
+      const address = provider.transport.getWalletAddress()
+
+      if (address) {
+        return [getAddress(address)]
+      }
+
+      return []
+    },
+
+    async getProvider(): Promise<EcosystemWalletTransportProvider> {
+      return ecosystemProvider
+    },
+
+    async isAuthorized() {
+      const provider = await this.getProvider()
+      return provider.transport.getWalletAddress() !== undefined
+    },
+
+    async switchChain({ chainId }) {
+      const provider = await this.getProvider()
+      const chain = config.chains.find(c => c.id === chainId) || config.chains[0]
+
+      await provider.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: ethers.toQuantity(chainId) }]
+      })
+
+      config.emitter.emit('change', { chainId })
+
+      return chain
+    },
+
+    async getChainId() {
+      const provider = await this.getProvider()
+      return Number(provider.getChainId())
+    },
+
+    async onAccountsChanged(accounts) {
+      return { account: accounts[0] }
+    },
+
+    async onChainChanged(chain) {
+      config.emitter.emit('change', { chainId: normalizeChainId(chain) })
+    },
+
+    async onConnect(_connectInfo) {},
+
+    async onDisconnect() {
+      await this.disconnect()
+    }
+  }))
+}

packages/connect/src/connectors/ecosystem/index.ts

@@ -0,0 +1,17 @@
+import { Wallet, WalletProperties } from '../../types'
+
+import { ecosystemWallet as baseEcosystemWallet, BaseEcosystemConnectorOptions } from './ecosystemWallet'
+
+export type EcosystemWalletOptions = BaseEcosystemConnectorOptions &
+  Pick<WalletProperties, 'logoDark' | 'logoLight'> & {
+    name?: string
+  }
+
+export const ecosystemWallet = (options: EcosystemWalletOptions): Wallet => ({
+  id: 'ecosystem-wallet',
+  logoDark: options.logoDark,
+  logoLight: options.logoLight,
+  name: options.name || 'Ecosystem Wallet',
+  type: 'social',
+  createConnector: () => baseEcosystemWallet(options)
+})

packages/connect/src/connectors/ecosystem/provider.ts

@@ -0,0 +1,122 @@
+import { EIP1193Provider, allNetworks } from '@0xsequence/network'
+import { ethers } from 'ethers'
+import { getAddress, TransactionRejectedRpcError } from 'viem'
+
+import { normalizeChainId } from '../../utils/helpers'
+
+import { ProviderTransport } from './providerTransport'
+
+export class EcosystemWalletTransportProvider extends ethers.AbstractProvider implements EIP1193Provider {
+  jsonRpcProvider: ethers.JsonRpcProvider
+  currentNetwork: ethers.Network
+  transport: ProviderTransport
+
+  constructor(
+    public projectAccessKey: string,
+    public walletUrl: string,
+    public initialChainId: number,
+    public nodesUrl: string
+  ) {
+    super(initialChainId)
+
+    const initialChainName = allNetworks.find(n => n.chainId === initialChainId)?.name
+    const initialJsonRpcProvider = new ethers.JsonRpcProvider(`${nodesUrl}/${initialChainName}/${projectAccessKey}`)
+
+    this.transport = new ProviderTransport(walletUrl)
+    this.jsonRpcProvider = initialJsonRpcProvider
+    this.currentNetwork = ethers.Network.from(initialChainId)
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async request({ method, params }: { method: string; params?: any[] }) {
+    if (method === 'wallet_switchEthereumChain') {
+      const chainId = normalizeChainId(params?.[0].chainId)
+
+      const networkName = allNetworks.find(n => n.chainId === chainId)?.name
+      const jsonRpcProvider = new ethers.JsonRpcProvider(`${this.nodesUrl}/${networkName}/${this.projectAccessKey}`)
+
+      this.jsonRpcProvider = jsonRpcProvider
+      this.currentNetwork = ethers.Network.from(chainId)
+
+      return null
+    }
+
+    if (method === 'eth_chainId') {
+      return ethers.toQuantity(this.currentNetwork.chainId)
+    }
+
+    if (method === 'eth_accounts') {
+      const address = this.transport.getWalletAddress()
+      if (!address) {
+        return []
+      }
+      const account = getAddress(address)
+      return [account]
+    }
+
+    if (method === 'eth_sendTransaction') {
+      if (!params) {
+        throw new Error('No params')
+      }
+
+      try {
+        const response = await this.transport.sendRequest(method, params, this.getChainId())
+
+        if (response.walletAddress && response.walletAddress !== this.transport.getWalletAddress()) {
+          this.transport.disconnect()
+          throw new TransactionRejectedRpcError(new Error('Wallet address mismatch, please reconnect.'))
+        }
+
+        if (response.code === 'transactionFailed') {
+          throw new TransactionRejectedRpcError(new Error(`Unable to send transaction: ${response.data.error}`))
+        }
+
+        if (response.code === 'transactionReceipt') {
+          const { txHash } = response.data
+          return txHash
+        }
+      } catch (e) {
+        console.log('error in sendTransaction', e)
+        throw new TransactionRejectedRpcError(new Error(`Unable to send transaction: ${e}`))
+      }
+    }
+
+    if (
+      method === 'eth_sign' ||
+      method === 'eth_signTypedData' ||
+      method === 'eth_signTypedData_v4' ||
+      method === 'personal_sign'
+    ) {
+      if (!params) {
+        throw new Error('No params')
+      }
+      try {
+        const response = await this.transport.sendRequest(method, params, this.getChainId())
+
+        if (response.walletAddress && response.walletAddress !== this.transport.getWalletAddress()) {
+          this.transport.disconnect()
+          throw new TransactionRejectedRpcError(new Error('Wallet address mismatch, please reconnect.'))
+        }
+
+        return response.data.signature
+      } catch (e) {
+        console.log('error in sign', e)
+        throw new TransactionRejectedRpcError(new Error(`Unable to sign: ${e}`))
+      }
+    }
+
+    return await this.jsonRpcProvider.send(method, params ?? [])
+  }
+
+  async getTransaction(txHash: string) {
+    return await this.jsonRpcProvider.getTransaction(txHash)
+  }
+
+  detectNetwork(): Promise<ethers.Network> {
+    return Promise.resolve(this.currentNetwork)
+  }
+
+  getChainId() {
+    return Number(this.currentNetwork.chainId)
+  }
+}