In your document, link, and embed main-v1.js.
<script src="https://lite.lp.finance/main-v1.js" />
Assign the attribute data-preload to the script tag, the full application will be preloaded on your browser's (document.readyState === "complete")
event.
<script src="https://lite.lp.finance/main-v1.js" data-preload />
Then,
// Use your own private RPC endpoint for production.
const RPC_ENDPOINT = "https://api.mainnet-beta.solana.com"
window.Twamm.init({ endpoint: RPC_ENDPOINT });
Mode 1: Wallet passthrough
If your user has connected their wallet via your dApp, you may pass through the wallet instance via the init({ passThroughWallet: wallet })
.
const App = () => {
const { wallet } = useWallet();
const initJupiter = () => {
if (wallet) {
window.Twamm.init({
endpoint,
passThroughWallet: wallet,
});
}
};
};
Mode 2: Built-in wallet
If your user is not connected, TWAMM Lite has several built-in wallets that users can connect to and place orders directly.
There are currently 3 modes to integrate TWAMM Lite into your dApp.
Modal
: By default, TWAMM renders as a modal and takes up the whole screen.Integrated
: Renders TWAMM as a part of your dApp.Widget
: Renders Twamm as a widget that can be placed in different positions.
window.Twamm.init({ displayMode: 'modal' });
window.Twamm.init({ displayMode: 'integrated' });
window.Twamm.init({
displayMode: 'widget',
widgetStyle: {
position: 'bottom-right', // 'bottom-left', 'top-left', 'top-right'
size: 'default', // 'sm'
},
});
Configure TWAMM Lite's behavior and allowed actions for your user.
- feeAccount?: string
- Account that receives Jupiter Swap fees.
- Set to empty string if the frontend should not charge fees.
- feeBps?: string
- Fees charged for Jupiter swaps in BPS.
- Set to 0 if the frontend should not charge fees.
- useJupiter?: boolean
- Default to true, determines if Jupiter swaps should be displayed in TWAMM Lite.
- If set to false, instant swap is not supported
- platformFeeAccount?: string
- Default to empty string, provided account receives fees generated when order complete / cancelled
- Provided account requires to have ATA for all tokens supported on TWAMM. Else, withdraw/cancel order would fail.
- supportedToken?: [key: string]: string[]
- Default to using LP Finance Supported Tokens API.
- Provide supported tokens object to customize.
Resuming / Closing activity
- Every time
init()
is called, it will create a new activity. - If you want to resume the previous activity, you can use
resume()
. close()
function only hides the widget.
if (window.Twamm._instance) {
window.Twamm.resume();
}
window.Twamm.close();
Fees support
By integrating TWAMM Lite, integrators can earn 100% of the fees generated for orders "cancelled/withdrawn" from the frontend.
Note that the accounts used to collect fees "should" have an ATA for tokens that are supported on TWAMM.
window.Twamm.init({
// ...
feeAccount: "your address",
feeBps: "50" // 0.5% fee for Jupiter Swap
platformFeeAccount: "your address",
});
Customizing styles: CSSProperties
Any CSS-in-JS can be injected into the outer-most container via containerStyles API.
Examples:
- Custom zIndex
window.init({
// ...
containerStyles: { zIndex: 100 },
});
- Custom height
window.Twamm.init({
// ...
containerStyles: { maxHeight: '90vh', },
});
Customizing className: Tailwind className
Tailwind classes can be injected into the outer-most container via containerClassName API.
Example:
- Custom breakpoints
window.Twamm.init({
// ...
containerClassName: 'max-h-[90vh] lg:max-h-[600px]'
});