@awarizon/swap-widget

A drop-in React swap and bridge widget for EVM chains and Solana, built on @awarizon/swap. See it running on the live demo.

Install

$npm install @awarizon/swap-widget @solana/web3.js

Swap.tsx

"use client"
import { SwapWidget } from "@awarizon/swap-widget"

export default function Swap() {
  return (
    <SwapWidget
      config={{ integrator: "my-app", zeroEx: { baseUrl: "/api/swap/0x" } }}
      evmProvider={window.ethereum}
      solanaWallet={phantom}
      onConnectWallet={(type) => openConnectModal(type)}  // "evm" | "svm"
      defaultFromChainId={8453}
      defaultToChainId={501000101}
      defaultFromToken="USDC"
      defaultToToken="SOL"
      theme="dark"
      accentColor="#C8F13F"
    />
  )
}

SwapWidgetProps

client / configSwapClient / SwapClientConfigShare one client across your app, or let the widget create one.

evmProviderEIP-1193 providerwindow.ethereum, WalletConnect, Privy… The connected account is tracked automatically.

evmSigner + evmAddressEvmSigner, stringAlternative to evmProvider, e.g. evmSignerFromViem(walletClient) with wagmi.

solanaWalletSolanaSignerWallet-adapter wallet or window.phantom.solana.

onConnectWallet(type) => voidCalled when a wallet of that type is needed.

defaultFromChainId / defaultToChainIdnumberStarting chains. Solana is 501000101.

defaultFromToken / defaultToTokenstringSymbol or address.

chainIdsnumber[]Restrict which chains appear.

theme'light' | 'dark' | 'auto'Default auto (follows the OS).

accentColor / borderRadiusstring / numberQuick theming. For more, pass CSS variables in style.

onSwapComplete / onErrorcallbacksFired after execution finishes or fails.

Styles are scoped under .awz-sw — no Tailwind needed and nothing leaks into your app. Override any CSS variable through style:

TSX

<SwapWidget
  style={{
    "--awz-accent": "#C8F13F",
    "--awz-accent-fg": "#000",
    "--awz-bg": "#0A0A0A",
    "--awz-surface": "#141414",
    "--awz-border": "#222",
    "--awz-radius": "4px",
  } as React.CSSProperties}
/>

Build your own UI on the same state machine the widget uses: debounced quoting, auto-refresh, route selection and execution status.

TSX

import { useSwap, SwapClient } from "@awarizon/swap-widget"

const s = useSwap({ client, signers: { evm, solana }, evmAddress, solanaAddress })

s.setAmount("25")
s.quote?.toAmount   // best quote
s.quotes?.quotes    // all routes
await s.execute()
s.status            // { stage, message, txLink }

←

@awarizon/swap

Swap Token List

→

@awarizon/swap-widget

<SwapWidget />

Theming

useSwap() — headless