Skip to main content
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.