Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.layerswap.io/llms.txt

Use this file to discover all available pages before exploring further.

The Layerswap Widget is compatible with modern React frameworks. Each framework requires specific configurations to handle Node.js polyfills and package transpilation.

​
Framework Configurations

​
Next.js (App Router & Page Router)

Next.js requires package transpilation and webpack configuration.
next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  webpack: (config) => {
    config.resolve.fallback = { fs: false, net: false, tls: false }
    config.externals.push('pino-pretty', 'lokijs', 'encoding')
    return config
  },
  transpilePackages: [
    '@layerswap/widget',
    '@layerswap/wallet-evm',
    '@layerswap/wallet-bitcoin',
    '@layerswap/wallet-fuel',
    '@layerswap/wallet-paradex',
    '@layerswap/wallet-starknet',
    '@layerswap/wallet-svm',
    '@layerswap/wallet-ton',
    '@layerswap/wallet-tron',
    '@layerswap/wallet-imtbl-x',
    '@layerswap/wallet-imtbl-passport',
    '@layerswap/wallet-module-zksync',
    '@layerswap/wallet-module-loopring',
    '@layerswap/wallets'
  ],
};

export default nextConfig;

View Example

Next.js App Router Example

​
Vite

Vite requires Node.js polyfills for browser compatibility. Install polyfill plugin: 
npm install -D vite-plugin-node-polyfills
Configuration:
vite.config.ts
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
  plugins: [react(), nodePolyfills()],
  esbuild: {
    target: 'esnext',
  },
})

View Example

Vite Example

​
React Router 7

React Router 7 requires global polyfills, SSR configuration, and dependency optimization. Install dependencies: 
npm install buffer process stream-browserify
npm install -D vite-tsconfig-paths
Global polyfills in root:
app/root.tsx
import {Buffer} from 'buffer'
import process from 'process';
import stream from 'stream-browserify';

globalThis.Buffer = Buffer;
globalThis.process = process;
if (typeof globalThis.stream === 'undefined') {
  (globalThis as any).stream = stream;
}

// ... rest of your root component
Vite configuration:
vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [reactRouter(), tsconfigPaths()],
  resolve: {
    alias: {
      "react-router-dom": "react-router",
      "stream": "stream-browserify",
    },
  },
  define: {
    global: "globalThis",
  },
  ssr: {
    noExternal: [
      "@layerswap/widget",
      "@layerswap/wallet-evm",
      "@layerswap/wallet-svm",
      "@layerswap/wallet-bitcoin",
      "@layerswap/wallet-starknet",
      "@layerswap/wallets",
      "@layerswap/wallet-fuel",
      "@layerswap/wallet-ton",
      "@layerswap/wallet-paradex",
      "@layerswap/wallet-imtbl-x",
      "@layerswap/wallet-imtbl-passport",
      "@layerswap/wallet-module-zksync",
      "@layerswap/wallet-module-loopring",
      "@layerswap/wallet-tron",
      "js-sha3"
    ],
  },
  optimizeDeps: {
    include: [
      "@layerswap/widget",
      "@layerswap/wallet-evm",
      "@layerswap/wallet-svm",
      "@layerswap/wallet-bitcoin",
      "@layerswap/wallet-starknet",
      "@layerswap/wallets",
      "@layerswap/wallet-fuel",
      "@layerswap/wallet-ton",
      "@layerswap/wallet-paradex",
      "@layerswap/wallet-imtbl-x",
      "@layerswap/wallet-imtbl-passport",
      "@layerswap/wallet-module-zksync",
      "@layerswap/wallet-module-loopring",
      "@layerswap/wallet-tron",
      "js-sha3"
    ],
  },
});

View Example

React Router 7 Example

​
Wallet Library Integrations

The widget is compatible with popular wallet connection libraries:
LibraryExampleNotes
Default ProvidersViewBuilt-in support for all networks via @layerswap/wallets
RainbowKitViewPopular wallet UI library with wagmi
Reown AppKitViewWalletConnect’s official React integration
DynamicViewEnterprise wallet connection solution

​
All Examples

FrameworkExampleKey Configuration
Next.js App RouterViewtranspilePackages + webpack fallbacks
Next.js Page RouterViewtranspilePackages + webpack fallbacks
ViteViewvite-plugin-node-polyfills
React Router 7ViewGlobal polyfills + SSR config
Next.js + RainbowKitViewNext.js config + wagmi setup
Next.js + ReownViewNext.js config + Reown AppKit
Next.js + DynamicViewNext.js config + Dynamic SDK
All examples include working implementations with proper TypeScript configurations.