1.0.9 • Published 19 days ago
aftermath-trading-widget v1.0.9
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.
Install
npm i aftermath-trading-widget
Usage
import { AftermathTradingWidget } from "aftermath-trading-widget";
function App() {
return <AftermathTradingWidget />;
}
export default App;
Accepted Props
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;
// router
externalFeePercentage?: number; // 0.001 (0.1%)
externalFeeRecipientAddress?: string; // "0x123"
// 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.
1.0.8-test.0
19 days ago
1.0.8-test.1
19 days ago
1.0.8-test.2
19 days ago
1.0.8-test.3
19 days ago
1.0.9
19 days ago
1.0.8-test.4
19 days ago
1.0.8-test.5
19 days ago
1.0.8
2 months ago
1.0.7
2 months ago
1.0.6
2 months ago
1.0.4
2 months ago
1.0.3
5 months ago
1.0.2
7 months ago
1.0.1
7 months ago
1.0.0
8 months ago
0.1.0
8 months ago