Skip to main content
The Layerswap Widget provides flexible, modular wallet management that can be configured, extended, or fully customized to match your integration needs. You can choose from three approaches depending if you want pre-built solutions or need more control over wallet connections:

Native Wallet Packages

Pre-configured wallet providers with automatic balance fetching, gas resolution, and connection management.

Partial Integration (EVM)

Seamless integration with existing Wagmi apps. External wallet connections are automatically detected and synchronized.

Custom Wallet Management

Full control over wallet connections using the WalletProvider interface. Integrate Dynamic, Reown, RainbowKit, Privy, or custom solutions.

​
Comparison

ApproachControl LevelComplexityBest For
Native Wallet PackagesPre-configuredLowQuick integration, standard wallet support
Partial Integration (EVM)MediumMediumApps with existing Wagmi setup, hybrid wallet management
Custom Wallet ManagementCompleteHighCustom wallet UX, using 3rd party wallet libraries (Dynamic, Reown, RainbowKit, etc.)

​
Quick Start Examples

​
Approach 1: Native Wallet Packages

import { LayerswapProvider, Swap } from "@layerswap/widget"
import { createEVMProvider, createStarknetProvider } from "@layerswap/wallets"
import "@layerswap/widget/index.css"
import { walletConnectConfigs } from "./configs"

export const App = () => {
  return (
    <LayerswapProvider
      config={{
        apiKey: "YOUR_API_KEY",
        version: "mainnet"
      }}
      walletProviders={[
        createEVMProvider({ walletConnectConfigs }),
        createStarknetProvider({ walletConnectConfigs })
      ]}
    >
      <Swap />
    </LayerswapProvider>
  )
}
Learn more about Native Wallet Packages →

​
Approach 2: Partial Integration (EVM)

import { useSettings, LayerswapProvider, Swap } from "@layerswap/widget"
import { useChainConfigs, createEVMProvider } from "@layerswap/wallets"
import { createConfig, WagmiProvider } from "wagmi"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"

const App = () => {
  const { settings, loading } = useSettings("YOUR_API_KEY")
  const { chains, transports } = useChainConfigs(settings.networks)

  if (loading) return <div>Loading...</div>

  const wagmiConfig = createConfig({
    chains,
    transports,
    connectors // Your connectors
  })

  const evmProvider = createEVMProvider({
    walletConnectConfigs: {
      projectId: "YOUR_PROJECT_ID",
      name: "Your App",
      description: "Your app description",
      url: "https://yourapp.com",
      icons: ["https://yourapp.com/logo.png"]
    }
  })

  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={new QueryClient()}>
        <LayerswapProvider
          config={{ settings }}
          walletProviders={[evmProvider]}
        >
          <Swap />
        </LayerswapProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}
Learn more about Partial Integration →

​
Approach 3: Custom Wallet Management

import { LayerswapProvider, Swap } from "@layerswap/widget"
import { createStarknetProvider } from "@layerswap/wallets"
import useCustomWalletConnection from "./hooks/useCustomWalletConnection"

const App = () => {
  // Override native provider with custom implementation
  const customProvider = createStarknetProvider({
    customHook: useCustomWalletConnection
  })

  return (
    <LayerswapProvider
      config={{ apiKey: "YOUR_API_KEY" }}
      walletProviders={[customProvider]}
    >
      <Swap />
    </LayerswapProvider>
  )
}
Learn more about Custom Wallet Management →

​
Supported Ecosystems

Native wallet packages are available for multiple blockchain ecosystems:
  • EVM (Ethereum) - MetaMask, WalletConnect, and all EVM-compatible wallets
  • Starknet - ArgentX, Braavos, and other Starknet wallets
  • SVM (Solana) - Phantom, Solflare, and other Solana wallets
  • Bitcoin - Unisat, Leather, and other Bitcoin wallets
  • Fuel - Fuel Network wallets
  • TON - TON Connect compatible wallets
  • Tron - TronLink and Tron wallets
  • Paradex - Paradex exchange integration
  • Immutable Passport - Immutable’s gaming wallet
  • ImmutableX - ImmutableX Layer 2 wallets

​
Choosing the Right Approach

​
Use Native Packages when:

  • You want the fastest integration path
  • Standard wallet support meets your needs
  • You don’t have existing wallet management infrastructure
  • You want Layerswap to handle all wallet complexity

​
Use Partial Integration when:

  • Your app already uses Wagmi for EVM chains
  • You want external wallet connections detected automatically
  • You need unified wallet state across your app
  • You want to minimize code duplication

​
Use Custom Wallet Management when:

  • You need a specific wallet connection UX
  • You’re using 3rd party wallet libraries (Dynamic, Reown, RainbowKit, Privy, etc.)
  • You have custom wallet management requirements
  • You need deep control over the connection lifecycle