@0xsequence/connect 0.0.0-20250314205219 → 5.0.0-ecosystem-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/connect",
-  "version": "0.0.0-20250314205219",
+  "version": "5.0.0-ecosystem-beta",
   "description": "Connect package for Sequence Web SDK",
   "keywords": [
     "sequence",
@@ -53,7 +53,7 @@
     "react-dom": ">= 17",
     "viem": ">= 2.0.0",
     "wagmi": ">= 2.14.13",
-    "@0xsequence/react-hooks": "0.0.0-20250314205219"
+    "@0xsequence/react-hooks": "5.0.0-ecosystem-beta"
   },
   "devDependencies": {
     "0xsequence": "^2.2.13",
@@ -64,7 +64,7 @@
     "react-dom": "^19.0.0",
     "viem": "^2.23.10",
     "wagmi": "^2.14.13",
-    "@0xsequence/react-hooks": "0.0.0-20250314205219"
+    "@0xsequence/react-hooks": "5.0.0-ecosystem-beta"
   },
   "scripts": {
     "build": "pnpm run writeVersion && pnpm build:clean && pnpm build:css && pnpm build:types && pnpm build:esm && pnpm build:cjs",

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

package/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
@@ -51,7 +51,7 @@ export const ConnectButton = (props: ConnectButtonProps) => {
   }
 
   return (
-    <Tooltip message={label || walletProps.name}>
+    <Tooltip message={label || walletProps.name} side="bottom">
       <Card
         className="flex justify-center items-center w-full"
         clickable
@@ -125,7 +125,7 @@ export const GoogleWaasConnectButton = (props: ConnectButtonProps) => {
   const buttonHeight = isDescriptive ? BUTTON_HEIGHT_DESCRIPTIVE : BUTTON_HEIGHT
 
   return (
-    <Tooltip message="Google" disabled={!enableGoogleTooltip}>
+    <Tooltip message="Google" disabled={!enableGoogleTooltip} side="bottom">
       <Card
         className="bg-transparent p-0 w-full relative"
         clickable

package/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 | EcosystemWalletOptions
   coinbase?: boolean
   metaMask?: boolean
   walletConnect?:
@@ -76,6 +78,7 @@ export interface DefaultUniversalConnectorOptions extends CommonConnectorOptions
   apple?: boolean
   coinbase?: boolean
   metaMask?: boolean
+  ecosystem?: false | EcosystemWalletOptions
   walletConnect?:
     | false
     | {
@@ -146,6 +149,17 @@ export const getDefaultWaasConnectors = (options: DefaultWaasConnectorOptions):
     )
   }
 
+  if (options.ecosystem) {
+    wallets.push(
+      ecosystemWallet({
+        ...options.ecosystem,
+        projectAccessKey,
+        defaultNetwork: defaultChainId ?? 1,
+        isDev: false
+      })
+    )
+  }
+
   if (options.metaMask !== false) {
     if (typeof window !== 'undefined') {
       wallets.push(
@@ -253,6 +267,17 @@ export const getDefaultUniversalConnectors = (options: DefaultUniversalConnector
     )
   }
 
+  if (options.ecosystem) {
+    wallets.push(
+      ecosystemWallet({
+        ...options.ecosystem,
+        projectAccessKey,
+        defaultNetwork: defaultChainId ?? 1,
+        isDev: false
+      })
+    )
+  }
+
   if (options.metaMask !== false) {
     if (typeof window !== 'undefined') {
       wallets.push(

package/src/connectors/ecosystem/ecosystemWallet.ts

@@ -0,0 +1,140 @@
+import { ethers } from 'ethers'
+import { getAddress } from 'viem'
+import { createConnector, Connector } from 'wagmi'
+
+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
+  isDev?: boolean
+}
+
+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 isDev = !!params?.isDev
+  const nodesUrl = isDev ? 'https://dev-nodes.sequence.app' : '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()
+    }
+  }))
+}
+
+function normalizeChainId(chainId: string | number | bigint | { chainId: string }) {
+  if (typeof chainId === 'object') return normalizeChainId(chainId.chainId)
+  if (typeof chainId === 'string') return Number.parseInt(chainId, chainId.trim().substring(0, 2) === '0x' ? 16 : 10)
+  if (typeof chainId === 'bigint') return Number(chainId)
+  return chainId
+}

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

package/src/connectors/ecosystem/provider.ts

@@ -0,0 +1,127 @@
+import { EIP1193Provider, allNetworks } from '@0xsequence/network'
+import { ethers } from 'ethers'
+import { getAddress, TransactionRejectedRpcError } from 'viem'
+
+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)
+  }
+}
+
+function normalizeChainId(chainId: string | number | bigint | { chainId: string }) {
+  if (typeof chainId === 'object') return normalizeChainId(chainId.chainId)
+  if (typeof chainId === 'string') return Number.parseInt(chainId, chainId.trim().substring(0, 2) === '0x' ? 16 : 10)
+  if (typeof chainId === 'bigint') return Number(chainId)
+  return chainId
+}

package/src/connectors/ecosystem/providerTransport.ts

@@ -0,0 +1,225 @@
+type ConnectionState = 'disconnected' | 'connecting' | 'connected'
+
+interface SessionData {
+  walletAddress: string
+  lastConnected: number
+}
+
+export class ProviderTransport {
+  private walletOrigin: string
+  private walletWindow: Window | null = null
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private callbacks: Map<string, (response: any) => void> = new Map()
+  private connectionState: ConnectionState = 'disconnected'
+  private session: SessionData | undefined
+  private walletCheckInterval: number | undefined
+
+  constructor(walletUrl: string) {
+    const url = new URL(walletUrl)
+    this.walletOrigin = url.origin
+    window.addEventListener('message', this.handleMessage)
+    this.loadSession()
+    this.observeCallbacks()
+  }
+
+  private observeCallbacks() {
+    const originalSet = this.callbacks.set.bind(this.callbacks)
+    const originalDelete = this.callbacks.delete.bind(this.callbacks)
+
+    this.callbacks.set = (key, value) => {
+      const result = originalSet(key, value)
+      this.updateWalletCheck()
+      return result
+    }
+
+    this.callbacks.delete = key => {
+      const result = originalDelete(key)
+      this.updateWalletCheck()
+      return result
+    }
+  }
+
+  private updateWalletCheck() {
+    if (this.callbacks.size > 0) {
+      this.ensureWalletCheckActive()
+    } else {
+      this.ensureWalletCheckInactive()
+    }
+  }
+
+  private ensureWalletCheckActive() {
+    if (this.walletCheckInterval === undefined) {
+      this.walletCheckInterval = window.setInterval(() => {
+        if (!this.isWalletOpen()) {
+          this.handleWalletClosed()
+        }
+      }, 500) // Check every half second
+    }
+  }
+
+  private ensureWalletCheckInactive() {
+    if (this.walletCheckInterval !== undefined) {
+      clearInterval(this.walletCheckInterval)
+      this.walletCheckInterval = undefined
+    }
+  }
+
+  private loadSession() {
+    const sessionData = localStorage.getItem('walletSession')
+    if (sessionData) {
+      this.session = JSON.parse(sessionData)
+      this.connectionState = 'connected'
+    }
+  }
+
+  private saveSession(walletAddress: string) {
+    this.session = { walletAddress, lastConnected: Date.now() }
+    localStorage.setItem('walletSession', JSON.stringify(this.session))
+  }
+
+  async connect(auxData?: Record<string, unknown>): Promise<{ walletAddress: string }> {
+    if (this.connectionState === 'connected' && this.session) {
+      return { walletAddress: this.session.walletAddress }
+    }
+
+    this.connectionState = 'connecting'
+    const connectionId = crypto.randomUUID()
+    const connectionRequest = {
+      type: 'connection',
+      id: connectionId,
+      ...(auxData ? { auxData } : {})
+    }
+
+    return new Promise((resolve, reject) => {
+      this.callbacks.set(connectionId, response => {
+        if (response.type === 'connection' && response.status === 'accepted') {
+          this.connectionState = 'connected'
+          this.saveSession(response.walletAddress)
+          resolve({ walletAddress: response.walletAddress })
+          this.walletWindow?.close()
+        } else {
+          this.connectionState = 'disconnected'
+          reject(new Error('Connection rejected'))
+          this.walletWindow?.close()
+        }
+      })
+
+      this.openWalletAndPostMessage(connectionRequest)
+    })
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async sendRequest(method: string, params: any[], chainId: number): Promise<any> {
+    if (this.connectionState !== 'connected') {
+      throw new Error('Not connected to wallet. Call connect() first.')
+    }
+
+    const id = crypto.randomUUID()
+    const request = { type: 'request', id, method, params, chainId }
+
+    return new Promise((resolve, reject) => {
+      const sendMessage = async () => {
+        if (!this.isWalletOpen()) {
+          try {
+            await this.openWalletAndPostMessage(request)
+          } catch (error) {
+            this.callbacks.delete(id)
+            reject(error)
+            return
+          }
+        } else {
+          this.postMessageToWallet(request)
+        }
+      }
+
+      this.callbacks.set(id, response => {
+        if (response.error) {
+          reject(new Error(response.error.message))
+        } else {
+          resolve(response.result)
+        }
+
+        // Close the wallet window after receiving the response
+        if (this.isWalletOpen()) {
+          this.walletWindow!.close()
+          this.walletWindow = null
+        }
+      })
+
+      sendMessage().catch(reject)
+    })
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private openWalletAndPostMessage(message: any): Promise<void> {
+    return new Promise((resolve, reject) => {
+      console.log('Opening wallet and posting message:', message)
+      if (!this.isWalletOpen()) {
+        this.walletWindow = window.open(this.walletOrigin, 'Wallet', 'width=375,height=667')
+        if (!this.walletWindow) {
+          reject(new Error('Failed to open wallet window. Please check your pop-up blocker settings.'))
+          return
+        }
+
+        const waitForReady = (event: MessageEvent) => {
+          if (event.origin === this.walletOrigin && event.data === 'ready') {
+            console.log('Received ready message from wallet')
+            window.removeEventListener('message', waitForReady)
+            this.postMessageToWallet(message)
+            resolve()
+          }
+        }
+        window.addEventListener('message', waitForReady)
+      } else {
+        this.postMessageToWallet(message)
+        resolve()
+      }
+    })
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private postMessageToWallet(message: any) {
+    console.log('Posting message to wallet:', message)
+    this.walletWindow!.postMessage(message, {
+      targetOrigin: this.walletOrigin
+    })
+  }
+
+  private isWalletOpen(): boolean {
+    return this.walletWindow !== null && !this.walletWindow?.closed
+  }
+
+  private handleWalletClosed() {
+    this.walletWindow = null
+    this.callbacks.forEach(callback => {
+      callback({ error: { message: 'Wallet window was closed' } })
+    })
+    this.callbacks.clear()
+  }
+
+  private handleMessage = (event: MessageEvent) => {
+    if (event.origin !== this.walletOrigin) return
+
+    const response = event.data
+    const callback = this.callbacks.get(response.id)
+    if (callback) {
+      callback(response)
+      this.callbacks.delete(response.id)
+    }
+  }
+
+  disconnect() {
+    this.connectionState = 'disconnected'
+    this.session = undefined
+    localStorage.removeItem('walletSession')
+    if (this.isWalletOpen()) {
+      this.walletWindow!.close()
+    }
+    this.walletWindow = null
+    this.handleWalletClosed()
+  }
+
+  getWalletAddress(): string | undefined {
+    return this.session?.walletAddress
+  }
+}

package/src/constants/version.ts

@@ -1 +1 @@
-export const WEB_SDK_VERSION = '0.0.0-20250314205219'
+export const WEB_SDK_VERSION = '4.6.5'

package/src/hooks/useDirectEcosystemConnect.ts

@@ -0,0 +1,25 @@
+import { useConnect } from 'wagmi'
+
+import { EcosystemConnector } from '../connectors/ecosystem/ecosystemWallet'
+
+export const useDirectEcosystemConnect = () => {
+  const { connectors, connect } = useConnect()
+
+  const triggerConnect = async (auxData?: Record<string, unknown>) => {
+    const ecosystemConnector = connectors.find(
+      (connector): connector is EcosystemConnector => connector.type === 'ecosystem-wallet'
+    )
+
+    if (!ecosystemConnector) {
+      throw new Error('Ecosystem wallet connector not found')
+    }
+
+    if (auxData) {
+      ecosystemConnector.auxData = auxData
+    }
+
+    return connect({ connector: ecosystemConnector })
+  }
+
+  return triggerConnect
+}

package/src/index.ts

@@ -72,6 +72,7 @@ export { mock } from './connectors/mock'
 export { sequence, type SequenceOptions } from './connectors/sequence'
 export { twitch, type TwitchOptions } from './connectors/twitch'
 export { walletConnect } from './connectors/walletConnect'
+export { ecosystemWallet, type EcosystemWalletOptions } from './connectors/ecosystem'
 export {
   sequenceWallet,
   sequenceWaasWallet,
@@ -94,6 +95,8 @@ export { useWallets } from './hooks/useWallets'
 export type { ConnectedWallet } from './hooks/useWallets'
 export type { LinkedWallet } from '@0xsequence/api'
 
+export { useDirectEcosystemConnect } from './hooks/useDirectEcosystemConnect'
+
 // Components
 export { NetworkBadge } from './components/NetworkBadge'
 export { CollectibleTileImage } from './components/CollectibleTileImage'