Downloading FlowX Widget script

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>

FlowX CDN

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>

Vanilla Javascript Usage

<div id="flowx-widget"></div>
<script type="text/javascript">
	const root = FlowXInitial(document.getElementById('flowx-widget'));
	
	//unmount
	root.unmount();
</script>

React Usage

const FlowXWidget = () => {
	const ref = useRef();
	useEffect(() => {
		const root = window.FlowXInitial(ref.current);
		
		return () => {
			root.unmount()
		}
	}, [])	

	return <div ref={ref} />
}

Customization

WARNING: DO NOT MODIFY CSS FILE

Customize default token

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);

Token List customize