@leapswap/widget

Embeddable cross-chain Swap / Bridge React widget (white-label): theme, Powered by, wallet entry, chains, and same-chain quote data sources are all configurable.

Install

npm install @leapswap/widget
# or
pnpm add @leapswap/widget

Same-chain data must be implemented and injected by you (or use the reference package):

npm install @leapswap/business-integrator   # OpenOcean reference (optional)

Quick start

import { useMemo } from 'react'
import { LeapSwapWidget } from '@leapswap/widget'
import {
  createOpenOceanDataProvider,
  createOpenOceanChainsProvider,
} from '@leapswap/business-integrator'

export function App() {
  const swapDataProvider = useMemo(() => createOpenOceanDataProvider(), [])
  const chainsProvider = useMemo(() => createOpenOceanChainsProvider(), [])

  return (
    <LeapSwapWidget
      integrator="your-app-id"
      swapDataProvider={swapDataProvider}
      chainsProvider={chainsProvider}
    />
  )
}

Required: integrator, swapDataProvider, chainsProvider.
Map vendor API fields inside your integrator — do not teach the Widget about a specific DEX API.

Related packages

| Package | Role | |---------|------| | @leapswap/widget-sdk | Routing and transaction execution | | @leapswap/wallet-management | Default multi-chain wallet config | | @leapswap/widget-types | Shared types | | @leapswap/business-integrator | OpenOcean → generic contracts (optional) |

Examples

• examples/openocean
• examples/kyberswap — custom integrator, no business-integrator dependency

Docs

• Repository: leap-fi/LeapSwap
• Overview: README
• Publish: docs/PUBLISH.md

License

MIT