Sign Up
Skip to content

Cross-App Ecosystem Wallets

Sequence's cross-app solution enables your users to leverage your ecosystem embedded wallets in any app with the same wallet address - regardless of whether they are external to your ecosystem or integrated with Sequence using common wallet connectors like wagmi. This includes:

  • External Marketplaces
  • External DEX's
  • External Applications

Cross App Architecture

The cross-app embedded wallet implements a communication flow between the external application and the wallet application:

  • The external app communicates with the wallet through the cross-app embedded wallet connector for Wagmi
  • The connector uses a ProviderTransport to handle communication
  • Messages are sent between the ProviderTransport and WalletTransport
  • The Wallet component handles three main functionalities:
    • User Authentication
    • Transaction Signing
    • Message Signing

The wallet can be opened and send messages back to the external application through the transport layer, enabling secure cross-application communication. Notably, for a cross-app integration, users will have to confirm all interactions.

Clone our Cross App Embedded Wallet App & connector

git clone https://github.com/0xsequence/cross-app-embedded-wallet/tree/master && cd cross-app-embedded-Wallet/wallet
cp .env.example .env

Update Wallet Transport with your configuration

Pass in your ecosystem embedded wallet variables to the .env file. Then simply build the wallet application with pnpm build and deploy to your preferred such as Cloudflare Pages with a publicly accessible URL.

Example External Application Configuration

Now, we'll configure an example external application where we pass in the wallet connector URL to wagmi.

Navigate to the example application and install dependencies, specifically the sequence cross-app connector package @sequence-wallet/cross-app-connector:

cd ../dapp && pnpm install

Then update the environment variables with our project access key and the hosted wallet URL you deployed previously:

cp .env.example .env

Update Wagmi Connector

Lastly, you can edit the wagmi connector configuration located in src/wagmiConfig.ts for your specific wallet. Here's an example configuration that can be provided to the external application:

import { sequenceCrossAppEmbeddedWallet } from '@0xsequence/cross-app-embedded-wallet-connector'
import { createConfig, http } from 'wagmi'
import { arbitrumNova, arbitrumSepolia } from 'wagmi/chains'
 
const urlParams = new URLSearchParams(window.location.search)
const walletAppUrl = urlParams.get('walletAppUrl') ?? import.meta.env.VITE_WALLET_URL
 
const connector = sequenceCrossAppEmbeddedWallet(
  {
    id: "sequenceDemo",
    name: "Sequence Cross App Connector",
    icon: "https://iconic.dynamic-static-assets.com/icons/sprite.svg#edenonline",
  },
  {
    projectAccessKey: import.meta.env.VITE_PROJECT_ACCESS_KEY,
    walletUrl: walletAppUrl,
    initialChainId: arbitrumNova.id, // Change this to your desired chain
  }
);
 
export const config = createConfig({
  chains: [arbitrumNova, arbitrumSepolia],
  connectors: [connector],
  transports: {
    [arbitrumNova.id]: http(), // add Chain ID Transport
    [arbitrumSepolia.id]: http()
  }
})

Now, you can share the wallet connector configuration with any app to allow them to leverage your ecosystem wallet in their application so your using can use their same wallet address.