Skip to main content

​
Install EVM wallet package

To get started, install the latest version of EVM package. 
yarn add @layerswap/wallet-evm wagmi viem @tanstack/react-query
Wagmi is a React Hooks library for Ethereum. Viem is a low-level TypeScript Interface for Ethereum that enables developers to interact with the blockchain. TanStack Query is an async state manager that handles fetching, caching, synchronizing and more.

​
Basic example

The example below shows how to preconfigure a basic wallet management with native widget package. 
import { LayerswapProvider, Swap } from "@layerswap/widget";
import { EVMProvider } from "@layerswap/wallet-evm"

export const WidgetPage = () => {

  const walletConnect = {
    projectId: {YOUR_PROJECT_ID},
    name: {YOUR_APP_NAME},
    description: {YOUR_APP_DESCRIPTION},
    url: {YOUR_APP_URL},
    icons: [{YOUR_LOGO_URL}],
  }

  return (
    <LayerswapProvider 
      config={{
        walletConnect
      }}
      walletProviders={[EVMProvider]}
    >
      <Swap/>
    </LayerswapProvider>
  );
};

​
WalletConnect config

walletConnect: {
  projectId: string
  name: string
  description: string
  url: string
  icons: string[]
}

​
Wagmi Configuration

If your application already uses wagmi, you need to integrate Layerswap’s network configurations with your existing wagmi setup. Use the useSettings hook to fetch Layerswap settings and the useChainConfigs hook to get chain configurations, then pass them to your wagmi config. 
import { useSettings, LayerswapProvider, Swap, WidgetLoading } from "@layerswap/widget"
import { useChainConfigs, EVMProvider } from "@layerswap/wallet-evm"
import { createConfig, WagmiProvider } from "wagmi"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"

const queryClient = new QueryClient()

const App = () => {
  const apiKey = 'YOUR_API_KEY'
  const { settings, loading } = useSettings(apiKey) // or you can use getSettings(apiKey) for server-side rendering
  const { chains, transports } = useChainConfigs(settings.networks)

  if (loading) return <WidgetLoading />

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

  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <LayerswapProvider
          config={{
            settings
          }}
          walletProviders={[EVMProvider]}
        >
          <Swap/>
        </LayerswapProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}
This approach ensures that Layerswap’s supported networks are properly configured in your wagmi instance, enabling seamless wallet connections and transactions.