1⃣
Install the Widget
To use X Swap widget in your project, run the following command in your terminal:
- For React 18, Vite, Next.js
npm install @xyfinance/widget
import { XSwapWidget } 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'
}}
>
<XSwapWidget config={config} theme={theme} />
</div>
</div>
)
}
For users of TypeScript, you can import both the
Config and Theme type to understand what properties are available for configuration:import { XSwapWidget, Config, Theme } from '@xyfinance/widget'
const config: Config = {
...,
fromInput: '12.345',
}
const theme: Theme = {
...,
mode: 'light'
}
function App() {
return (
<div>
<XSwapWidget config={config} theme={theme} />
</div>
)
}
Please refer to our Widget API Reference for a comprehensive overview of available configuration options.
Last modified 30d ago