Trails in wallet widget

examples/components/package.json

@@ -10,7 +10,7 @@
   "peerDependencies": {
     "@0xsequence/design-system": "2.1.11",
     "@0xsequence/network": "*",
-    "wagmi": "^2.15.0"
+    "wagmi": "^2.18.0"
   },
   "private": true
 }

examples/next/package.json

@@ -25,8 +25,8 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tailwindcss": "^4.1.11",
-    "viem": "^2.28.1",
-    "wagmi": "^2.15.1"
+    "viem": "^2.41.2",
+    "wagmi": "^2.18.0"
   },
   "devDependencies": {
     "@types/node": "^20.17.32",

examples/react/package.json

@@ -31,8 +31,8 @@
     "react-router-dom": "^7.5.3",
     "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",
-    "viem": "^2.28.1",
-    "wagmi": "^2.15.1"
+    "viem": "^2.41.2",
+    "wagmi": "^2.18.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.4",

examples/react/tsconfig.json

@@ -11,6 +11,7 @@
     "noFallthroughCasesInSwitch": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
+    "baseUrl": ".",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

package.json

@@ -53,9 +53,15 @@
     "turbo": "2.0.1",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.31.1",
-    "viem": "^2.28.1",
-    "wagmi": "^2.15.1"
+    "viem": "^2.41.2",
+    "wagmi": "^2.18.0"
   },
   "resolutions": {},
+  "pnpm": {
+    "overrides": {
+      "viem": "2.41.2",
+      "wagmi": "2.18.0"
+    }
+  },
   "packageManager": "pnpm@10.24.0"
 }

packages/checkout/package.json

@@ -51,8 +51,8 @@
     "ethers": ">= 6.13.0",
     "react": ">= 17",
     "react-dom": ">= 17",
-    "viem": ">= 2.28.0",
-    "wagmi": ">= 2.15.0"
+    "viem": ">= 2.41.2",
+    "wagmi": ">= 2.18.0"
   },
   "devDependencies": {
     "@0xsequence/connect": "workspace:*",
@@ -61,8 +61,8 @@
     "ethers": "^6.13.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "viem": "^2.28.1",
+    "viem": "^2.41.2",
     "vite": "^5.4.19",
-    "wagmi": "^2.15.1"
+    "wagmi": "^2.18.0"
   }
 }

packages/connect/README.md

@@ -43,6 +43,7 @@ interface CreateConfigOptions {
   defaultTheme?: Theme
   position?: ModalPosition
   customCSS?: string // Injected into shadow dom
+  trailsCustomCSS?: string | { light?: string; dark?: string }
   signIn?: {
     logoUrl?: string
     projectName?: string

packages/connect/package.json

@@ -67,8 +67,8 @@
     "react": ">= 17",
     "react-apple-signin-auth": "^1.1.0",
     "react-dom": ">= 17",
-    "viem": ">= 2.28.0",
-    "wagmi": ">= 2.15.0"
+    "viem": ">= 2.41.2",
+    "wagmi": ">= 2.18.0"
   },
   "devDependencies": {
     "0xsequence": "^2.3.38",
@@ -79,7 +79,7 @@
     "ethers": "^6.13.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "viem": "^2.28.1",
-    "wagmi": "^2.15.1"
+    "viem": "^2.41.2",
+    "wagmi": "^2.18.0"
   }
 }

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

@@ -1,5 +1,5 @@
 import { ethers } from 'ethers'
-import { getAddress } from 'viem'
+import { getAddress, type Address } from 'viem'
 import { createConnector, type Connector } from 'wagmi'
 
 import { normalizeChainId } from '../../utils/helpers.js'
@@ -20,6 +20,26 @@ export interface BaseEcosystemConnectorOptions {
 
 ecosystemWallet.type = 'ecosystem-wallet' as const
 
+type AccountWithCapabilities = {
+  address: Address
+  capabilities: Record<string, unknown>
+}
+
+type ConnectAccounts<withCapabilities extends boolean> = withCapabilities extends true
+  ? readonly AccountWithCapabilities[]
+  : readonly Address[]
+
+const formatConnectAccounts = <withCapabilities extends boolean>(
+  accounts: readonly Address[],
+  withCapabilities?: withCapabilities | boolean
+): ConnectAccounts<withCapabilities> => {
+  if (withCapabilities) {
+    return accounts.map(address => ({ address, capabilities: {} })) as unknown as ConnectAccounts<withCapabilities>
+  }
+
+  return accounts as ConnectAccounts<withCapabilities>
+}
+
 export function ecosystemWallet(params: BaseEcosystemConnectorOptions) {
   type Provider = EcosystemWalletTransportProvider
   type Properties = {
@@ -37,98 +57,112 @@ export function ecosystemWallet(params: BaseEcosystemConnectorOptions) {
     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 createConnector<Provider, Properties, StorageItem>(config => {
+    const getProvider = async (_parameters?: { chainId?: number | undefined }) => ecosystemProvider
 
-      return {
-        accounts: [getAddress(walletAddress)],
-        chainId: await this.getChainId()
-      }
-    },
-
-    async disconnect() {
-      const provider = await this.getProvider()
+    const disconnect = async () => {
+      const provider = await getProvider()
       provider.transport.disconnect()
-    },
+    }
 
-    async getAccounts() {
-      const provider = await this.getProvider()
+    const getAccounts = async () => {
+      const provider = await getProvider()
       const address = provider.transport.getWalletAddress()
 
       if (address) {
         return [getAddress(address)]
       }
 
       return []
-    },
+    }
 
-    async getProvider(): Promise<EcosystemWalletTransportProvider> {
-      return ecosystemProvider
-    },
+    const getChainId = async () => {
+      const provider = await getProvider()
+      return Number(provider.getChainId())
+    }
 
-    async isAuthorized() {
-      const provider = await this.getProvider()
-      return provider.transport.getWalletAddress() !== undefined
-    },
+    return {
+      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<withCapabilities extends boolean = false>(parameters?: {
+        chainId?: number | undefined
+        isReconnecting?: boolean | undefined
+        withCapabilities?: withCapabilities | boolean | undefined
+      }) {
+        const provider = await getProvider()
+        let walletAddress = provider.transport.getWalletAddress()
+
+        if (!walletAddress) {
+          try {
+            const res = await provider.transport.connect(this.auxData as Record<string, unknown> | undefined)
+            walletAddress = res.walletAddress
+          } catch (e) {
+            console.log(e)
+            await disconnect()
+            throw e
+          }
+        }
 
-    async switchChain({ chainId }) {
-      const provider = await this.getProvider()
-      const chain = config.chains.find(c => c.id === chainId) || config.chains[0]
+        const accounts = [getAddress(walletAddress)]
 
-      await provider.request({
-        method: 'wallet_switchEthereumChain',
-        params: [{ chainId: ethers.toQuantity(chainId) }]
-      })
+        return {
+          accounts: formatConnectAccounts(accounts, parameters?.withCapabilities),
+          chainId: await getChainId()
+        }
+      },
 
-      config.emitter.emit('change', { chainId })
+      disconnect,
 
-      return chain
-    },
+      getAccounts,
 
-    async getChainId() {
-      const provider = await this.getProvider()
-      return Number(provider.getChainId())
-    },
+      getProvider,
+
+      async isAuthorized() {
+        const provider = await getProvider()
+        return provider.transport.getWalletAddress() !== undefined
+      },
 
-    async onAccountsChanged(accounts) {
-      return { account: accounts[0] }
-    },
+      async switchChain({ chainId }) {
+        const provider = await getProvider()
+        const chain = config.chains.find(c => c.id === chainId) || config.chains[0]
 
-    async onChainChanged(chain) {
-      config.emitter.emit('change', { chainId: normalizeChainId(chain) })
-    },
+        await provider.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: ethers.toQuantity(chainId) }]
+        })
 
-    async onConnect(_connectInfo) {},
+        config.emitter.emit('change', { chainId })
 
-    async onDisconnect() {
-      await this.disconnect()
+        return chain
+      },
+
+      getChainId,
+
+      async onAccountsChanged(accounts) {
+        return { account: accounts[0] }
+      },
+
+      async onChainChanged(chain) {
+        config.emitter.emit('change', { chainId: normalizeChainId(chain) })
+      },
+
+      async onConnect(_connectInfo) {},
+
+      async onDisconnect() {
+        await disconnect()
+      }
     }
-  }))
+  })
 }