- Install package:
npm i @dexhunterio/swaps - Import to your code
2.1. For ReactJS:
2.2. For NextJS:
import '@dexhunterio/swaps/lib/assets/style.css' import Swap from '@dexhunterio/swaps' ...
"use client"; import '@dexhunterio/swaps/lib/assets/style.css' const Swap = dynamic(() => import("@dexhunterio/swaps"), { ssr: false, }); ...
- Use Swap Component:
function App() { return ( <div> <Swap {...settings} /> </div> ); }
- In head tag
<head> ... <script src="https://unpkg.com/react@18.2/umd/react.production.min.js" crossorigin ></script> <script src="https://unpkg.com/react-dom@18.2/umd/react-dom.production.min.js" crossorigin ></script> <script type="module" src="https://unpkg.com/@dexhunterio/swaps@0.0.95/lib/umd/swaps.umd.js" ></script> ... </head>
- In body tag:
... <div id="dexhunter"></div> <script type="module"> ReactDOM.render( React.createElement(dexhunterSwap, { orderTypes: ['SWAP', 'LIMIT', 'DCA'], theme: 'light', }), document.getElementById('dexhunter') ); </script> ...
| Prop | Required? | Type | Default | Description |
| :--------------------: | :-------: | :-------------------------------------------------------------------------------: | :---------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------- | -------------------------- |
| defaultToken | false | string | - | The default token to be selected. |
| width | false | px|% | - | The width of the component. Accepts values in pixels or percentage. |
| height | false | px|% | - | The height of the component. Accepts values in pixels or percentage. |
| theme | false | dark | light | dark | The theme of the component. Can be either 'dark' or 'light'. |
| orderTypes | false | array | ['SWAP', 'LIMIT'] | An array of order types supported by the component. Defaults to 'SWAP' and 'LIMIT'. |
| supportedTokens | false | tokenId[] | - | An array of token IDs that are supported for searching. |
| partnerName | true | string | - | The name of the partner. This is a required field. |
| partnerCode | true | string | - | The code of the partner. This is a required field. |
| colors | false | object | - | Supported colors: mainText, subText, background, containers, buttonText, accent. |
| className | false | string | - | Custom CSS class for the component. |
| style | false | object | - | Inline styles for the component. |
| onSwapSuccess | false | (data: any) => void | - | Callback function on successful swap. |
| onSwapError | false | (err: any) => void | - | Callback function on swap error. |
| selectedWallet | false | SelectedWallet | - | The wallet selected by the user. Accepts one of the specified wallet identifiers. Supported wallets: nami, eternl, flint, gerowallet, typhoncip30, nufi, lace, vespr, begin, and yoroi. |
| inputs | false | string[] | - | Input fields for the component. |
| onWalletConnect | false | (data: any) => void | - | Callback function when a wallet is connected. |
| onClickWalletConnect | false | () => void | - | Trigger when clicking the wallet connect button |
| onViewOrder | false | (data: any) => void | - | Trigger when clicking the view order button |
| displayType | false | 'BUTTON' | 'DEFAULT' | 'WIDGET' | 'DEFAULT' | display type |
| buttonText | false | string | Swap | Button text when displayType = 'BUTTON' |
| orderTypeOnButtonClick | false | 'SWAP' | 'LIMIT' | 'DCA' | 'SWAP' | Tab default when displayed |
| defaultSettings | false | { isCustomSlippage?: boolean; isAutomaticSlippage?: boolean; slippage?: number; } | - | Settings default |
| autoFocus | false | boolean | false | auto focus on sell input when page loads |