Skip to main content
Trails works with virtually all wallets through wagmi connectors, including embedded wallets like Privy, smart contract wallets like Sequence, or injected EOAs like MetaMask. This enables complex transaction orchestration cross-chain in 1-click without requiring wallets to natively support ERC-7702.

How It Works

Trails automatically detects and uses any wagmi connectors configured in your application. Simply wrap your app with a wagmi provider and include the desired wallet connectors in your config.

Basic Wagmi Setup

import { createConfig, http, WagmiProvider } from 'wagmi'
import { mainnet, base, arbitrum } from 'wagmi/chains'
import { injected, walletConnect } from 'wagmi/connectors'

const config = createConfig({
  chains: [mainnet, base, arbitrum],
  connectors: [
    injected(),
    walletConnect({ projectId: 'your-walletconnect-project-id' })
  ],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
    [arbitrum.id]: http(),
  },
})

export function App() {
  return (
    <WagmiProvider config={config}>
      {/* Your app with TrailsWidget */}
      <TrailsWidget
        mode="pay"
        toAddress="0x..." 
        toAmount="1000"
        toChainId={42161}
        toToken="USDC"
      />
    </WagmiProvider>
  )
}

Sequence Wallet Integration

Integrate Sequence smart contract wallets for enhanced security and user experience:
import { createConfig, http, WagmiProvider } from 'wagmi'
import { mainnet, base, arbitrum } from 'wagmi/chains'
import { sequenceWallet } from '@0xsequence/wagmi-connector'

// Create Sequence connector
const sequenceConnector = sequenceWallet({
  connectOptions: {
    app: "Your App Name",
    projectAccessKey: "your-sequence-project-key",
  },
  defaultNetwork: 1, // Mainnet
  walletAppURL: "https://sequence.app",
})

const config = createConfig({
  chains: [mainnet, base, arbitrum],
  connectors: [sequenceConnector],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
    [arbitrum.id]: http(),
  },
})

export function AppWithSequence() {
  return (
    <WagmiProvider config={config}>
      <TrailsWidget
        mode="pay"
        toAddress="0x..."
        toAmount="1000"
        toChainId={42161}
        toToken="USDC"
      />
    </WagmiProvider>
  )
}

Privy Embedded Wallets

Integrate Privy for seamless embedded wallet experiences:
import { createConfig, http, WagmiProvider } from 'wagmi'
import { mainnet, base, arbitrum } from 'wagmi/chains'
import { PrivyProvider } from '@privy-io/react-auth'
import { createPrivyWalletConnector } from '@privy-io/wagmi-connector'

// Create Privy connector
const privyConnector = createPrivyWalletConnector({
  appId: "your-privy-app-id",
  name: "Privy Wallet",
})

const config = createConfig({
  chains: [mainnet, base, arbitrum],
  connectors: [privyConnector],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
    [arbitrum.id]: http(),
  },
})

export function AppWithPrivy() {
  return (
    <PrivyProvider
      appId="your-privy-app-id"
      config={{
        loginMethods: ["email", "google"],
        embeddedWallets: { createOnLogin: "all-users" },
      }}
    >
      <WagmiProvider config={config}>
        <TrailsWidget
          mode="pay"
          toAddress="0x..."
          toAmount="1000"
          toChainId={42161}
          toToken="USDC"
        />
      </WagmiProvider>
    </PrivyProvider>
  )
}

Multiple Wallet Support

Combine multiple wallet connectors to give users choice:
import { createConfig, http, WagmiProvider } from 'wagmi'
import { mainnet, base, arbitrum } from 'wagmi/chains'
import { injected, walletConnect } from 'wagmi/connectors'
import { sequenceWallet } from '@0xsequence/wagmi-connector'
import { createPrivyWalletConnector } from '@privy-io/wagmi-connector'
import { PrivyProvider } from '@privy-io/react-auth'

// Create all connectors
const sequenceConnector = sequenceWallet({
  connectOptions: {
    app: "Your App",
    projectAccessKey: "your-sequence-key",
  },
  defaultNetwork: 1,
})

const privyConnector = createPrivyWalletConnector({
  appId: "your-privy-app-id",
  name: "Privy",
})

const config = createConfig({
  chains: [mainnet, base, arbitrum],
  connectors: [
    injected(),
    walletConnect({ projectId: 'your-walletconnect-project-id' }),
    sequenceConnector,
    privyConnector,
  ],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
    [arbitrum.id]: http(),
  },
})

export function MultiWalletApp() {
  return (
    <PrivyProvider
      appId="your-privy-app-id"
      config={{
        loginMethods: ["email", "google"],
        embeddedWallets: { createOnLogin: "all-users" },
      }}
    >
      <WagmiProvider config={config}>
        {/* Users can connect with any of the configured wallets */}
        <TrailsWidget
          mode="pay"
          toAddress="0x..."
          toAmount="1000"
          toChainId={42161}
          toToken="USDC"
        />
      </WagmiProvider>
    </PrivyProvider>
  )
}

Supported Wallet Types

Trails works with all wagmi-compatible wallets including:
  • Injected Wallets: MetaMask, Coinbase Wallet, Brave Wallet
  • WalletConnect: Any wallet supporting WalletConnect protocol
  • Smart Contract Wallets: Sequence, Safe, Biconomy
  • Embedded Wallets: Privy, Dynamic, Magic
  • Mobile Wallets: Rainbow, Trust Wallet, Phantom
  • Hardware Wallets: Ledger, Trezor (via connectors)

Key Benefits

  • Universal Compatibility: Works with any wagmi connector
  • No Wallet Modifications: Wallets don’t need ERC-7702, 4337, or other external dependencies
  • Cross-Chain Transactions: Complex multi-chain operations in 1-click
  • Flexible Integration: Use existing wallet infrastructure
  • Future-Proof: Automatically supports new wagmi connectors
For more configuration options, see our Configuration Guide.