> ## 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.

# Widget Quickstart

> Interactive quick-start for the Layerswap Widget.

export const QuickstartEmbed = () => {
  const [theme, setTheme] = useState(() => {
    if (typeof document === 'undefined') return 'dark';
    const html = document.documentElement;
    const attr = html.getAttribute('data-theme');
    if (attr === 'dark') return 'dark';
    if (attr === 'light') return 'light';
    return html.classList.contains('dark') ? 'dark' : 'light';
  });
  const [packageManager, setPackageManager] = useState('npm');
  const [widgetType, setWidgetType] = useState('swap');
  const [selectedWallets, setSelectedWallets] = useState(['EVM', 'Starknet', 'Solana', 'Bitcoin', 'Fuel', 'Ton', 'Tron', 'Paradex']);
  const [copiedInstall, setCopiedInstall] = useState(false);
  const [copiedSnippet, setCopiedSnippet] = useState(false);
  useEffect(() => {
    if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return undefined;
    const html = document.documentElement;
    const resolveTheme = () => {
      const attr = html.getAttribute('data-theme');
      if (attr === 'dark') return 'dark';
      if (attr === 'light') return 'light';
      return html.classList.contains('dark') ? 'dark' : 'light';
    };
    const updateTheme = () => setTheme(resolveTheme());
    updateTheme();
    const observer = new MutationObserver(updateTheme);
    observer.observe(html, {
      attributes: true,
      attributeFilter: ['class', 'data-theme']
    });
    return () => observer.disconnect();
  }, []);
  useEffect(() => {
    if (window.Prism) return;
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css';
    document.head.appendChild(link);
    const style = document.createElement('style');
    style.textContent = `
      pre[class*="language-"] {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        font-family: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
      }
      code[class*="language-"],
      code[class*="language-"] * {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        display: inline !important;
        max-width: 100% !important;
        font-family: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
      }
      code[class*="language-"] {
        display: block !important;
      }
      .token {
        word-break: normal !important;
        white-space: pre-wrap !important;
      }
    `;
    document.head.appendChild(style);
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js';
    script.onload = () => {
      const jsxScript = document.createElement('script');
      jsxScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js';
      jsxScript.onload = () => {
        const bashScript = document.createElement('script');
        bashScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js';
        bashScript.onload = () => {
          if (window.Prism) {
            window.Prism.highlightAll();
          }
        };
        document.head.appendChild(bashScript);
      };
      document.head.appendChild(jsxScript);
    };
    document.head.appendChild(script);
  }, []);
  const palette = theme === 'dark' ? {
    containerBorder: '1px solid rgba(255,255,255,0.08)',
    containerBg: 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02))',
    textColor: '#e5e7eb',
    labelColor: '#a1a1aa',
    sectionLabelColor: '#c7c7d1',
    chipBorder: '1px solid rgba(255,255,255,0.12)',
    chipBorderActive: '1px solid rgba(255,255,255,0.18)',
    chipBg: 'transparent',
    chipBgActive: 'rgba(255,255,255,0.12)',
    chipColor: '#e5e7eb',
    chipColorActive: '#f9fafb',
    walletBorder: '1px solid rgba(255,255,255,0.12)',
    walletBorderActive: '1px solid rgba(224, 91, 138, 0.5)',
    walletBg: 'transparent',
    walletBgActive: 'rgba(224, 91, 138, 0.15)',
    walletColor: '#a1a1aa',
    walletColorActive: '#f2f2f2',
    codeBg: 'rgba(0,0,0,0.35)',
    codeColor: '#f9fafb',
    copyBorder: '1px solid rgba(255,255,255,0.14)',
    copyBg: 'rgba(255,255,255,0.06)',
    copyColor: '#e5e7eb'
  } : {
    containerBorder: '1px solid rgba(15,23,42,0.08)',
    containerBg: 'linear-gradient(180deg, rgba(148,163,184,0.08), rgba(226,232,240,0.38))',
    textColor: '#0f172a',
    labelColor: '#475569',
    sectionLabelColor: '#334155',
    chipBorder: '1px solid rgba(148,163,184,0.45)',
    chipBorderActive: '1px solid rgba(224, 91, 138, 0.45)',
    chipBg: 'rgba(241,245,249,0.6)',
    chipBgActive: 'rgba(224, 91, 138,0.12)',
    chipColor: '#475569',
    chipColorActive: '#d4497a',
    walletBorder: '1px solid rgba(148,163,184,0.45)',
    walletBorderActive: '1px solid rgba(224, 91, 138, 0.45)',
    walletBg: 'rgba(248,250,252,0.8)',
    walletBgActive: 'rgba(224, 91, 138,0.14)',
    walletColor: '#475569',
    walletColorActive: '#d4497a',
    codeBg: 'rgba(15,23,42,0.9)',
    codeColor: '#f8fafc',
    copyBorder: '1px solid rgba(255,255,255,0.3)',
    copyBg: 'rgba(255,255,255,0.15)',
    copyColor: '#f8fafc'
  };
  const PACKAGE_MANAGERS = ['npm', 'yarn', 'pnpm'];
  const WIDGET_TYPES = [{
    value: 'swap',
    label: 'Swap'
  }, {
    value: 'deposit',
    label: 'Deposit'
  }];
  const WALLET_OPTIONS = ['EVM', 'Starknet', 'Solana', 'Bitcoin', 'Fuel', 'Ton', 'Tron', 'Paradex'];
  const providerImportMap = {
    EVM: {
      factory: 'createEVMProvider',
      configNeeded: true
    },
    Starknet: {
      factory: 'createStarknetProvider',
      configNeeded: true
    },
    Solana: {
      factory: 'createSVMProvider',
      configNeeded: true
    },
    Bitcoin: {
      factory: 'createBitcoinProvider',
      configNeeded: false
    },
    Fuel: {
      factory: 'createFuelProvider',
      configNeeded: false
    },
    Ton: {
      factory: 'createTONProvider',
      configNeeded: true,
      configName: 'tonConfigs'
    },
    Tron: {
      factory: 'createTronProvider',
      configNeeded: false
    },
    Paradex: {
      factory: 'createParadexProvider',
      configNeeded: false
    }
  };
  const installPrefix = packageManager === 'yarn' ? 'yarn add ' : packageManager === 'pnpm' ? 'pnpm add ' : 'npm install ';
  const basePkgs = ['@layerswap/widget', '@layerswap/wallets', 'zustand@4.5.7'];
  const walletDependencies = {
    EVM: ['wagmi', 'viem', '@tanstack/react-query'],
    Starknet: [],
    Solana: [],
    Bitcoin: ['@bigmi/client', '@bigmi/core', '@bigmi/react'],
    Fuel: [],
    Ton: [],
    Tron: [],
    Paradex: ['wagmi', 'viem', '@tanstack/react-query']
  };
  const additionalDeps = new Set();
  selectedWallets.forEach(wallet => {
    if (walletDependencies[wallet]) {
      walletDependencies[wallet].forEach(dep => additionalDeps.add(dep));
    }
  });
  const installPkgs = [...basePkgs, ...Array.from(additionalDeps).sort()];
  const installCommand = `${installPrefix}${installPkgs.join(' ')}`;
  const allProvidersSelected = WALLET_OPTIONS.every(wallet => selectedWallets.includes(wallet));
  const isDeposit = widgetType === 'deposit';
  const importLines = isDeposit ? ["import { Deposit } from '@layerswap/widget/deposit';"] : ["import { LayerswapProvider, Swap } from '@layerswap/widget';"];
  if (allProvidersSelected) {
    importLines.push("import { getDefaultProviders } from '@layerswap/wallets';");
  } else if (selectedWallets.length > 0) {
    const factories = selectedWallets.map(wallet => providerImportMap[wallet]?.factory).filter(Boolean);
    if (factories.length > 0) {
      importLines.push(`import { ${factories.join(', ')} } from '@layerswap/wallets';`);
    }
  }
  let walletProvidersCode = '';
  if (allProvidersSelected) {
    walletProvidersCode = `  const walletProviders = getDefaultProviders({
    walletConnect: {
      projectId: "YOUR_WALLETCONNECT_PROJECT_ID",
      name: "Your App Name",
      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"
    }
  })`;
  } else if (selectedWallets.length > 0) {
    const needsWalletConnect = selectedWallets.some(w => ['EVM', 'Starknet', 'Solana'].includes(w));
    const needsTonConfig = selectedWallets.includes('Ton');
    let configLines = [];
    if (needsWalletConnect) {
      configLines.push(`  const walletConnectConfigs = {
    projectId: "YOUR_WALLETCONNECT_PROJECT_ID",
    name: "Your App Name",
    description: "Your app description",
    url: "https://yourapp.com",
    icons: ["https://yourapp.com/icon.png"]
  }`);
    }
    if (needsTonConfig) {
      configLines.push(`  const tonConfigs = {
    tonApiKey: "YOUR_TON_API_KEY",
    manifestUrl: "https://yourapp.com/tonconnect-manifest.json"
  }`);
    }
    const providerCreations = selectedWallets.map(wallet => {
      const cfg = providerImportMap[wallet];
      if (!cfg) return null;
      if (cfg.configNeeded) {
        if (wallet === 'Ton') {
          return `    ${cfg.factory}({ tonConfigs })`;
        }
        return `    ${cfg.factory}({ walletConnectConfigs })`;
      }
      return `    ${cfg.factory}()`;
    }).filter(Boolean).join(',\n');
    if (configLines.length > 0) {
      walletProvidersCode = configLines.join('\n\n') + '\n\n';
    }
    walletProvidersCode += `  const walletProviders = [\n${providerCreations}\n  ]`;
  }
  const swapJsx = ["  return (", "    <LayerswapProvider", "      config={{", "        apiKey: {YOUR_API_KEY},", "        version: 'mainnet', //'mainnet' or 'testnet'", "        initialValues: {", "           defaultTab: 'swap', //'swap' or 'cex'", "           to: 'IMMUTABLEZK_MAINNET',", "           toAsset: 'USDC'", "        }", "      }}", ...selectedWallets.length > 0 ? ["      walletProviders={walletProviders}"] : [], "    >", "      <Swap />", "    </LayerswapProvider>", "  );"];
  const depositJsx = ["  return (", "    <Deposit", "      mode=\"inline\" // or \"button\"", "      config={{", "        apiKey: {YOUR_API_KEY},", "        version: 'mainnet', //'mainnet' or 'testnet'", "      }}", ...selectedWallets.length > 0 ? ["      walletProviders={walletProviders}"] : [], "      destination={{ network: 'BASE_MAINNET', tokens: ['USDC'] }}", "      destinationAddress=\"YOUR_DESTINATION_ADDRESS\"", "    />", "  );"];
  const snippetLines = ["import '@layerswap/widget/index.css';", ...importLines, "", "export default function App() {", ...walletProvidersCode ? walletProvidersCode.split('\n') : [], ...walletProvidersCode ? [''] : [], ...isDeposit ? depositJsx : swapJsx, "}"];
  const starterSnippet = snippetLines.join('\n');
  const installCodeRef = useRef(null);
  const snippetCodeRef = useRef(null);
  useEffect(() => {
    const highlight = () => {
      if (window.Prism) {
        if (installCodeRef.current) {
          window.Prism.highlightElement(installCodeRef.current);
        }
        if (snippetCodeRef.current) {
          window.Prism.highlightElement(snippetCodeRef.current);
        }
      } else {
        setTimeout(highlight, 100);
      }
    };
    highlight();
  }, [installCommand, starterSnippet]);
  const copy = async (text, which) => {
    try {
      if (navigator?.clipboard?.writeText) {
        await navigator.clipboard.writeText(text);
        if (which === 'install') {
          setCopiedInstall(true);
          setTimeout(() => setCopiedInstall(false), 1500);
        } else {
          setCopiedSnippet(true);
          setTimeout(() => setCopiedSnippet(false), 1500);
        }
      }
    } catch (err) {
      console.error('Copy failed:', err);
    }
  };
  const toggleWallet = key => {
    const has = selectedWallets.includes(key);
    let newSelection;
    if (has) {
      newSelection = selectedWallets.filter(wallet => wallet !== key);
      if ((key === 'EVM' || key === 'Starknet') && selectedWallets.includes('Paradex')) {
        newSelection = newSelection.filter(wallet => wallet !== 'Paradex');
      }
    } else {
      newSelection = [...selectedWallets, key];
      if (key === 'Paradex') {
        const withDeps = new Set(newSelection.concat(['EVM', 'Starknet']));
        newSelection = Array.from(withDeps);
      }
    }
    setSelectedWallets(newSelection);
  };
  return <div className="max-w-full overflow-hidden rounded-2xl p-4 transition-colors duration-300" style={{
    border: palette.containerBorder,
    background: palette.containerBg,
    color: palette.textColor
  }}>
      {}
      <div className="mb-3 flex flex-wrap items-center gap-2">
        <span className="font-semibold" style={{
    color: palette.labelColor
  }}>
          Widget type:
        </span>
        {WIDGET_TYPES.map(({value, label}) => <button key={value} className="rounded-lg px-3 py-1.5 text-sm font-medium transition-all border" style={{
    border: widgetType === value ? palette.chipBorderActive : palette.chipBorder,
    background: widgetType === value ? palette.chipBgActive : palette.chipBg,
    color: widgetType === value ? palette.chipColorActive : palette.chipColor
  }} onClick={() => setWidgetType(value)}>
            {label}
          </button>)}
      </div>

      {}
      <div className="mb-3 flex flex-wrap items-center gap-2">
        <span className="font-semibold" style={{
    color: palette.labelColor
  }}>
          Package manager:
        </span>
        {PACKAGE_MANAGERS.map(pm => <button key={pm} className="rounded-lg px-3 py-1.5 text-sm font-medium transition-all border" style={{
    border: packageManager === pm ? palette.chipBorderActive : palette.chipBorder,
    background: packageManager === pm ? palette.chipBgActive : palette.chipBg,
    color: packageManager === pm ? palette.chipColorActive : palette.chipColor
  }} onClick={() => setPackageManager(pm)}>
            {pm}
          </button>)}
      </div>

      {}
      <div className="mb-2 flex flex-wrap items-center gap-2">
        <span className="font-semibold" style={{
    color: palette.labelColor
  }}>
          Wallet providers:
        </span>
        {WALLET_OPTIONS.map(wallet => {
    const isSelected = selectedWallets.includes(wallet);
    return <button key={wallet} onClick={() => toggleWallet(wallet)} className="rounded-lg px-3 py-1.5 text-sm transition-all border" style={{
      border: isSelected ? palette.walletBorderActive : palette.walletBorder,
      background: isSelected ? palette.walletBgActive : palette.walletBg,
      color: isSelected ? palette.walletColorActive : palette.walletColor,
      fontWeight: isSelected ? 600 : 400
    }}>
              {wallet}
            </button>;
  })}
      </div>

      {}
      <div className="mb-3 max-w-full overflow-hidden">
        <div className="mb-1.5 font-semibold text-sm" style={{
    color: palette.sectionLabelColor
  }}>
          Install
        </div>
        <div className="relative max-w-full overflow-hidden">
          <pre className="max-w-full overflow-hidden rounded-xl bg-opacity-90 px-3 py-3 pr-12 text-sm" style={{
    background: palette.codeBg,
    color: palette.codeColor
  }}>
            <code ref={installCodeRef} className="language-bash block max-w-full whitespace-pre-wrap break-words" style={{
    color: palette.codeColor
  }}>
              {installCommand}
            </code>
          </pre>
          <button className="absolute right-2 top-3 rounded-lg px-2 py-1 text-xs transition-all" style={{
    border: palette.copyBorder,
    background: palette.copyBg,
    color: palette.copyColor
  }} onClick={() => copy(installCommand, 'install')}>
            {copiedInstall ? 'Copied!' : 'Copy'}
          </button>
        </div>
      </div>

      {}
      <div className="max-w-full overflow-hidden">
        <div className="mb-1.5 font-semibold text-sm" style={{
    color: palette.sectionLabelColor
  }}>
          Initialize the SDK
        </div>
        <div className="relative max-w-full overflow-hidden">
          <pre className="max-w-full overflow-hidden rounded-xl bg-opacity-90 px-3 py-3 text-sm" style={{
    background: palette.codeBg,
    color: palette.codeColor
  }}>
            <code ref={snippetCodeRef} className="language-jsx block max-w-full whitespace-pre-wrap break-words" style={{
    color: palette.codeColor
  }}>
              {starterSnippet}
            </code>
          </pre>
          <button className="absolute right-2 top-3 rounded-lg px-2 py-1 text-xs transition-all" style={{
    border: palette.copyBorder,
    background: palette.copyBg,
    color: palette.copyColor
  }} onClick={() => copy(starterSnippet, 'snippet')}>
            {copiedSnippet ? 'Copied!' : 'Copy'}
          </button>
        </div>
      </div>
    </div>;
};

### Install Widget

Use the **Widget type** toggle to switch between:

* **Swap** — the full swap widget (`<Swap />`) wrapped in `LayerswapProvider`.
* **Deposit** — the standalone `<Deposit />` widget for funding a fixed address you control. See [Deposit Widget](/integration/UI/Widget/DepositWidget) for the full reference.

<QuickstartEmbed />

[**Zustand**](https://zustand.docs.pmnd.rs/getting-started/introduction) is a lightweight state management library for React applications.

<Note>ParadexProvider is dependant on EVMProvider and StarknetProvider</Note>

### Configuration

`YOUR_API_KEY` is used for accessing the widget. You can generate and input the [**API key**](/api-keys) from the Partner Dashboard.

**WalletConnect Project ID:** If you selected EVM, Starknet, or Solana providers, see [WalletConnect configuration](/integration/UI/Widget/WalletManagement/EVMProvider#configuration) to get your Project ID.

**TON Configuration:** If you selected the TON provider, see [TON configuration](/integration/UI/Widget/WalletManagement/TonProvider#configuration) to set up your API key and manifest URL.

For further adjustments, refer to the optional [configurations](/integration/UI/Configurations) list.