Aftermath Trading Widget
A one line React trading widget for Sui that utilizes Aftermath's routing technology for optimal price execution across more than 8 DEXs.
``bash`
npm i aftermath-trading-widget
`ts
import { AftermathTradingWidget } from "aftermath-trading-widget";
function App() {
return
}
export default App;
`
#### Accepted Props
`ts
interface AftermathTradingWidgetProps {
// display
theme?: "dark" | "light";
transparentBackground?: boolean;
border?: boolean;
rounded?: boolean;
width?: string | number; // "26.4rem"
height?: string | number; // "30.8rem"
// general
referrer?: string; // "0x123"
network?: "MAINNET" | "TESTNET" | "DEVNET" | "LOCAL" | string;
suiExplorer?: "Suiscan" | "SuiVision";
// router
externalFeePercentage?: number; // 0.001 (0.1%)
externalFeeRecipientAddress?: string; // "0x123"
protocolBlacklist?: (
| "Aftermath"
| "BlueMove"
| "Cetus"
| "DeepBook"
| "DeepBookV3"
| "DoubleUpPump"
| "FlowX"
| "FlowXClmm"
| "HopFun"
| "Kriya"
| "KriyaClmm"
| "MovePump"
| "SuiSwap"
| "Turbos"
| "SpringSui"
| "AftermathLsd"
| "Bluefin"
| "TurbosFun"
)[];
protocolWhitelist?: (
| "Aftermath"
| "BlueMove"
| "Cetus"
| "DeepBook"
| "DeepBookV3"
| "DoubleUpPump"
| "FlowX"
| "FlowXClmm"
| "HopFun"
| "Kriya"
| "KriyaClmm"
| "MovePump"
| "SuiSwap"
| "Turbos"
| "SpringSui"
| "AftermathLsd"
| "Bluefin"
| "TurbosFun"
)[];
// default coins
fromCoin?: string; // "0x0000000000000000000000000000000000000000000000000000000000000002::sui::SUI"
toCoin?: string; // "0x5d4b302506645c37ff133b98c4b50a5ae14841659738d6d733d59d0d217a93bf::coin::COIN"
// CSS styling
// colors
// primary
"primary-light"?: string; // "rgb(161 235 235)"
"primary-default"?: string; // "rgb(139 218 218)"
"primary-dark"?: string; // "rgb(111 196 196)"
"primary-darker"?: string; // "rgb(83 173 173)"
"primary-darkest"?: string; // "rgb(66 143 143)"
// dark
"dark-lightest"?: string; // "rgb(60 76 103)"
"dark-lighter"?: string; // "rgb(46 62 87)"
"dark-light"?: string; // "rgb(33 45 63)"
"dark-default"?: string; // "rgb(16 26 39)"
"dark-dark"?: string; // "rgb(6 11 19)"
"dark-darker"?: string; // "rgb(2 6 13)"
// light
"light-light"?: string; // "rgb(244 249 249)"
"light-default"?: string; // "rgb(219 225 225)"
"light-dark"?: string; // "rgb(189 195 195)"
"light-darker"?: string; // "rgb(163 169 169)"
"light-darkest"?: string; // "rgb(147 153 153)"
// font
font?: string; // "Rubik"
"font-size-xs"?: string; // "0.8125rem" (13px)
"font-size-sm"?: string; // "0.875rem" (14px)
"font-size-base"?: string; // "1rem" (16px)
"font-size-lg"?: string; // "1.125rem" (18px)
"font-size-xl"?: string; // "1.25rem" (20px)
// other
customCss?: string;
/*
@import url('https://fonts.googleapis.com/css2?family=Jacquard+24+Charted&display=swap');
html,
body {
font-size: 110% !important;
}
*/
}
Find the complete documentation for using our Typescript SDK in our GitBook.