Layerswap Docs

The Widget supports wallets for its available networks by default. Configure wallet props only when you need to:

Limit which chain wallets are available — via walletProvidersConfig
Provide credentials for WalletConnect, TON, or Immutable Passport — via walletDefaults

If your app already runs wagmi, you can additionally share your wagmi config so the widget reuses your users’ EVM wallet connection.

Coming from the self-bundled Widget? The walletProviders prop and createEVMProvider()-style factories do not exist in @layerswap/widget-react. See Self-bundled Widget or the migration guide.

Filtering chains

Use walletProvidersConfig to limit which chain wallets users can connect:

// Only EVM and Solana wallets
<LayerswapWidget
  config={widgetConfig}
  walletProvidersConfig={{ include: ['evm', 'solana'] }}
/>

// Everything except Tron and Fuel
<LayerswapWidget
  config={widgetConfig}
  walletProvidersConfig={{ exclude: ['tron', 'fuel'] }}
/>

include keeps only the listed wallet types; exclude removes the listed wallet types.

The available provider ids (WalletProviderId):

Id	Chain family
`evm`	EVM chains (Ethereum, Base, Arbitrum, …)
`starknet`	Starknet
`solana`	Solana
`bitcoin`	Bitcoin
`ton`	TON
`tron`	Tron
`fuel`	Fuel
`paradex`	Paradex
`imtblPassport`	Immutable Passport

Supplying credentials

Some wallet services need your own credentials or metadata. Pass them via walletDefaults:

// Module scope, so the object stays referentially stable
const walletDefaults = {
  walletConnect: {
    projectId: 'YOUR_WALLETCONNECT_PROJECT_ID', // required for WalletConnect
    name: 'Your App',
    description: 'Your app description',
    url: 'https://yourapp.com',
    icons: ['https://yourapp.com/icon.png'],
  },
  ton: {
    tonApiKey: 'YOUR_TON_API_KEY',
    manifestUrl: 'https://yourapp.com/tonconnect-manifest.json',
  },
  immutablePassport: {
    publishableKey: 'YOUR_PUBLISHABLE_KEY',
    clientId: 'YOUR_CLIENT_ID',
    redirectUri: 'https://yourapp.com/passport/callback',
    logoutRedirectUri: 'https://yourapp.com/',
  },
};

<LayerswapWidget config={widgetConfig} walletDefaults={walletDefaults} />

object

Your WalletConnect Cloud projectId (required for WalletConnect connections) plus optional app metadata (name, description, url, icons) shown in the wallet’s connection prompt.

object

TON wallet support configuration. Both tonApiKey and the manifestUrl of your TON Connect manifest are required. TON wallets appear only when this object is supplied.

object

Immutable Passport client configuration. publishableKey, clientId, redirectUri, and logoutRedirectUri are all required. Immutable Passport appears only when this object is supplied.

If your app already uses wagmi for EVM wallets, pass your Config as the wagmiConfig prop and the widget adopts it — same connected account, same chain, no second connect flow. This replaces the old “Partial Integration (EVM)” setup and has its own page:

Sharing your wagmi config

Reuse your app’s EVM wallet connection inside the widget

Start here

Configuration

Production

Guides & tools

Self-bundled Widget

Wallets

Filtering chains

Supplying credentials

Sharing your wagmi config

​Filtering chains

​Supplying credentials

​Sharing your wagmi config

Sharing your wagmi config

Filtering chains

Supplying credentials

Sharing your wagmi config