1️⃣Install the Widget

Installation

To use XY Finance widget in your project, run the following command in your terminal:

• For React 18, Vite, Next.js

npm

npm install @xyfinance/widget

pnpm

pnpm install @xyfinance/widget

bun

bun install @xyfinance/widget

We use the latest versions of popular web3 libraries such as Viem and Wagmi. If you can't install our widget due to an outdated project, please contact us or try installing our v3 version widget via npm install @xyfinance/widget@legacy-v3 instead.

import { Widget } from '@xyfinance/widget'

const config = {
  disabledChains: [],
  fromInput: '0.1',
  fromToken: {
    address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
    chainId: '1'
  },
  toToken: {
    address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
    chainId: '56'
  },
  referrer: '0xFD19727868A8197F42e7a52d024374598F62953B',
  featuredTokens: [
    {
      address: '0x666666661f9B6D8c581602AAa2f76cbead06C401',
      chainId: '56'
    }
  ]
}

const theme = {
  mode: 'light',
  fontFamily: 'proxima-nova',
  borderRadius: {
    container: '12px',
    inner: '8px',
    button: '32px'
  },
  colors: {
    primary: '#277EEC',
    gradient: ['#277EEC', '#1499E4']
  },
  components: {
    button: {
      variant: 'gradient'
    }
  }
}

export default function App() {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
        margin: '0px auto'
      }}
    >
      <div
        style={{
          width: '480px'
        }}
      >
        <Widget config={config} theme={theme} />
      </div>
    </div>
  )
}

TypeScript

For users of TypeScript, you can import both the Config and Theme type to understand what properties are available for configuration:

import { Widget, type Config, type Theme } from '@xyfinance/widget'

const config: Config = {
  ...,
  fromInput: '12.345',
}

const theme: Theme = {
  ...,
  mode: 'light'
}

function App() {
  return (
    <div>
      <Widget config={config} theme={theme} />
    </div>
  )
}

Example

Check out our examples repository.

Please refer to our Widget API Reference for a comprehensive overview of available configuration options.