The FlowX Widget library is a single JavaScript file, and you reference it with the HTML <script>
tag (notice that the <script>
tag should be inside the <head>
section):
<head>
<script defer="defer" src="/main.js"></script>
<link href="/main.css" rel="stylesheet" />
</head>
If you don't want to download and host FlowX Widget yourself, you can include it from a CDN (Content Delivery Network).
<head>
<script defer="defer" src="<https://cdn.flowx.finance/swap-widget/0.0.15/main.js>"></script>
<link href="<https://cdn.flowx.finance/swap-widget/0.0.15/main.css>" rel="stylesheet"/>
</head>
<div id="flowx-widget"></div>
<script type="text/javascript">
const root = FlowXInitial(document.getElementById('flowx-widget'));
//unmount
root.unmount();
</script>
const FlowXWidget = () => {
const ref = useRef();
useEffect(() => {
const root = window.FlowXInitial(ref.current);
return () => {
root.unmount()
}
}, [])
return <div ref={ref} />
}
WARNING: DO NOT MODIFY CSS FILE
const config = {
defaultSwapPair: {
dataPay: {
type: '0x6dae8ca14311574fdfe555524ea48558e3d1360d1607d1c7f98af867e3b7976c::flx::FLX',
symbol: 'FLX',
iconUrl: '<https://ipfs.io/ipfs/bafkreig53olo3ewrkph3hfrhjuwvuj53pmbntl2cwxd4zlyfnj5eznoxcu>',
decimals: 8,
name: 'FlowX Token',
},
dataReceive: {
decimals: 9,
iconUrl: '<https://assets.coingecko.com/coins/images/26375/small/sui_asset.jpeg>',
name: 'Sui',
symbol: 'SUI',
type: '0x2::sui::SUI',
},
},
}
FlowXInitial(document.getElementById('flowx-widget'), config);