aftermath-trading-widget

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