@dicksonp/terminal
Advanced tools
Jupiter Terminal is an open-sourced, lite version of Jupiter that provides end-to-end swap flow by linking it in your HTML.
Jupiter Terminal is an open-sourced, lite version of Jupiter that provides end-to-end swap flow by linking it in your HTML.
Visit our Demo / Playground over at https://terminal.jup.ag
With several templates to get you started, and auto generated code snippets.
main-v3.js bundle (~70Kb gzipped)
init() is calleddata-preload attributesAgnostic
Integrated or as a standalone Widget, or ModalForm customisation
Built-in Wallets
Lite, but powerful
Fees Support
Terminal is designed to work anywhere the web runs, including React, Plain HTML/JS, and many other frameworks.
<!-- Attach the loading script in your <head /> -->
<script src="https://terminal.jup.ag/main-v3.js" />
<!-- Optionally, preload for better experience, or integrated mode -->
<script src="https://terminal.jup.ag/main-v3.js" data-preload />
Your dApp already has a <WalletProvider />.
window.Jupiter.init({ enableWalletPassthrough: true });
Then, syncronise wallet state between your dApp and Jupiter Terminal with syncProps()
import { useWallet } from '@solana/wallet-adapter-react'; // Or @jup-ag/wallet-adapter;
const passthroughWalletContextState = useWallet();
useEffect(() => {
if (!window.Jupiter.syncProps) return;
window.Jupiter.syncProps({ passthroughWalletContextState });
}, [passthroughWalletContextState.connected, props]);
Your dApp does not have a <WalletProvider />, or is a plain HTML/JS website.
window.Jupiter.init({});
window.Jupiter.init({
/** Required
* Solana RPC endpoint
* We do not recommend using the public RPC endpoint for production dApp, you will get severely rate-limited
*/
endpoint: 'https://api.mainnet-beta.solana.com',
// ...other props
});
Terminal are light, but full of features, such as customising form behaviour, fees, styling and much more.
Go to our Demo to explore all these features, with automagically generated integration code.
Or, check out our fully typed API reference for more details.
Since Jupiter Terminal is not published on npm, and are only importable via CDN, to get proper typing, you can create a typing decalarion jupiter-terminal.d.ts file in your project, and copy the contents in src/types/index.d.ts
declare global {
interface Window {
Jupiter: JupiterTerminal;
}
}
// ...
// ...
// ...
Similar to Jupiter, Jupiter Terminal supports fee for integrators.
There are no protocol fees on Jupiter, but integrators can introduce a platform fee on swaps. The platform fee is provided in basis points, e.g. 20 bps for 0.2% of the token output.
Refer to Adding your own fees docs for more details.
Note: You will need to create the Token fee accounts to collect the platform fee.
referralAccount (easiest)const TEST_PLATFORM_FEE_AND_ACCOUNTS = {
referralAccount: '2XEYFwLBkLUxkQx5ZpFAAMzWhQxS4A9QzjhcPhUwhfwy',
feeBps: 100,
};
window.Jupiter.init({
// ...
platformFeeAndAccounts: TEST_PLATFORM_FEE_AND_ACCOUNTS,
});
Alternatively, you can derive yourself the fee accounts via Set your fee token account and declare them like so:
const TEST_PLATFORM_FEE_AND_ACCOUNTS = {
feeBps: 100,
feeAccounts,
};
window.Jupiter.init({
// ...
platformFeeAndAccounts: TEST_PLATFORM_FEE_AND_ACCOUNTS,
});
Everytime init() is called, it will create a new activity.
If you want to resume the previous activity, you can use resume().
close() function only hide the widget.
if (window.Jupiter._instance) {
window.Jupiter.resume();
}
window.Jupiter.close();
strictTokenList?: boolean;trueThe Jupiter Token List API is an open, collaborative, and dynamic token list to make trading on Solana more transparent and safer for users and developers. It is true by default to ensure that only validated tokens are shown.
Learn more at: https://station.jup.ag/docs/token-list/token-list-api
defaultExplorer?: 'Solana Explorer' | 'Solscan' | 'Solana Beach' | 'SolanaFM';Solana ExplorerThe default explorer is set to Solana Explorer;
You can change the default explorer by passing in the explorer name to the defaultExplorer prop.
Callbacks that may be useful for your dApp, from form updates, to swap success/error.
window.Jupiter.init({
/** Callbacks */
/** When an error has occured during swap */
onSwapError ({ error, quoteResponseMeta }: { error TransactionError; quoteResponseMeta: QuoteResponseMeta | null }) {}
/** When a swap has been successful */
onSuccess ({ txid, swapResult, quoteResponseMeta }: { txid: string; swapResult: SwapResult; quoteResponseMeta: QuoteResponseMeta | null }) {}
/** Callback when there's changes to the form */
onFormUpdate (form: IForm) {}
/** Callback when there's changes to the screen */
onScreenUpdate (screen: IScreen) {}
/** Advanced usage */
/** onRequestIxCallback(), refer to dedicated section below */
});
Any CSS-in-JS can be injected to the outer-most container via containerStyles api.
Examples:
window.Jupiter.init({
// ...
containerStyles: { zIndex: 100 },
});
window.Jupiter.init({
// ...
containerStyles: { maxHeight: '90vh' },
});
Tailwind classes can be injected to the outer-most container via containerClassName api.
Example:
window.Jupiter.init({
// ...
containerClassName: 'max-h-[90vh] lg:max-h-[600px]',
});
Request Terminal to return instructions instead of transaction, so you can compose using the instructions returned.
Be sure to return SwapResult back to Terminal, so Terminal can handle screen/state transitioning.
const onRequestIxCallback: IInit['onRequestIxCallback'] = async (ixAndCb) => {};
Limit the number of accounts to be used by the Swap Instructions.
"@solana/spl-token": "^0.1.8",
"@solana/web3.js": "^1.87.6",
As of Terminal@3.0.5, Terminal is now available as an NPM package, however, some peer dependencies are required to be installed.
import { init, syncProps } from '@jup-ag/terminal';
import '@jup-ag/terminal/css';
import { useWallet } from '@solana/wallet-adapter-react'; // Or @jup-ag/wallet-adapter;
const walletContextState = useWallet();
useEffect(() => {
init({
displayMode: 'integrated',
integratedTargetId: 'integrated-terminal',
endpoint: 'https://api.mainnet-beta.solana.com',
});
}, []);
// Optional: To make sure passthrough wallet are synced
useEffect(() => {
syncProps({ passthroughWalletContextState: walletContextState });
}, [walletContextState]);
FAQs
Jupiter Terminal is an open-sourced, lite version of Jupiter that provides end-to-end swap flow by linking it in your HTML.
We found that @dicksonp/terminal demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.