XY Finance
Search
K

XY Finance Widget (iframe)

XY Finance Widget is easy to embed into your apps and sites alike, helping engage and retain your users.
XY Finance team has been wracking our brains just to come up with a powerful engagement tool to help strengthen your user retention, making them want to come back more for a satisfying user experience that this widget provides for your website and reducing friction by letting them fast-forward into your app's/site's key functionality. Note that this Widget will be constantly renewed as we're also gathering more resources and collecting feedback from users along the way.

Get Started

Place the <iframe> tag where you want the widget to appear, and you’re all set!
export default function App() {
// You can change the iframe size. Recommended settings: width 480, height 700.
return (
<>
<iframe width={480} height={700} src="https://widget.xy.finance" />
</>
)
}
For more detailed examples, please refer to our example repository where you can find additional information.

Configuring Default Settings for the Widget

If you’d like to set default values for the widget, simply add search parameters to the URL.
For example:
https://widget.xy.finance/?amount=1&fromTokenAddress=0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE&lockmode=none&referrer&slippage=1&sourceChainId=1&targetChainId=1&theme=light&toTokenAddress=0x77777777772cf0455fB38eE0e75f38034dFa50DE
We also recommend using query-string for creating the query string.
import queryString from 'query-string'
export default function App() {
const config = {
// The address '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' stands for the native token.
fromTokenAddress: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
sourceChainId: '1',
toTokenAddress: '0x77777777772cf0455fB38eE0e75f38034dFa50DE',
targetChainId: '1',
amount: 1,
slippage: '1',
theme: 'dark',
lockmode: 'none',
referrer: null
}
const searchParams = queryString.stringify(config)
// amount=1&fromTokenAddress=0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE&lockmode=none&referrer&slippage=1&sourceChainId=1&targetChainId=1&theme=dark&toTokenAddress=0x77777777772cf0455fB38eE0e75f38034dFa50DE
return (
<div>
<iframe
width={480}
height={700}
src={`https://widget.xy.finance/?${searchParams}`}
/>
</div>
)
}

Configuration

Key
Type
Default
Note
fromTokenAddress
String
'0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE'
sourceChainId
String
'1'
toTokenAddress
String
'0x77777777772cf0455fB38eE0e75f38034dFa50DE'
targetChainId
String
'1'
amount
Number
1
slippage
String
'1'
If the difference between the estimated quote and execution price exceeds the rate (default rate 1%), the tx will be revoked.
theme
dark | light
dark
lockmode
none or both or fromToken or toToken
none
Disable user select Token
referrer
String or null
null
Address of the referrer, this address will be used uniformly for any future partner incentive programs
Theme: Dark
Theme: Light