Skip to main content

Terminal Walkthrough

In this step by step walkthrough, we will utilize the Solana Dapp Scaffold codebase to demonstrate integrating Jupiter Swap Terminal!

You can also watch the tutorial on YouTube!

Let's Get Started​

Since we are building on top of the Solana Dapp Scaffold, we'll start by setting up the necessary codebase and dependencies.

Jupiter Terminal References

Set up​

Clone the repository to local machine or working environment.

git clone https://github.com/solana-labs/dapp-scaffold.git

Install the dependencies.

pnpm install

Load the site in your localhost.

pnpm dev

Modify files​

Change network configuration​

Next, navigate to dapp-scaffold/src/contexts/NetworkConfigurationProvider.tsx file and change your network configuration from devnet to mainnet-beta.

const [networkConfiguration, setNetworkConfiguration] = useLocalStorage("network", "mainnet-beta");

Add Jupiter Terminal script​

In the dapp-scaffold/src/pagers/_document.tsx file, include your Jupiter Terminal script.

...
<Html>
    <Head>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <script src="https://terminal.jup.ag/main-v3.js" data-preload />
    </Head>
    <body>
        <Main />
        <NextScript />
    </body>
</Html>
...

Add necessary imports​

In the dapp-scaffold/src/views/home/index.tsx file, include these imports.

...
import useUserSOLBalanceStore from '../../stores/useUserSOLBalanceStore';

import { Connection, PublicKey, Transaction } from '@solana/web3.js';
import { notify } from 'utils/notifications';

export const HomeView: FC = ({ }) => {
...

Use Jupiter Terminal Playground​

Here comes the fun part, this is where you can customize the settings and configurations that best fit your app or site in Jupiter Terminal Playground!

After playing around with what you deem fit best, at the bottom of the playground, the code snippet will be readily generated.

All you need to do is copy the code in the code snippet section and paste it directly in the dapp-scaffold/src/views/home/index.tsx file (remember to add an OnClick to be able to interact with the Terminal).

...
  return (

    <div className="md:hero mx-auto p-4">
      <div className="md:hero-content flex flex-col">
        <div className='mt-6'>
            <button OnClick={() =>
                window.Jupiter.init({
                    displayMode: "integrated",
                    integratedTargetId: "integrated-terminal",
                    endpoint: "https://api.mainnet-beta.solana.com",
                    formProps: {
                        fixedInputMint: true,
                        fixedOutputMint: true,
                        swapMode: "ExactIn",
                        fixedAmount: true,
                        initialAmount: "200000000",
                        initialSlippageBps: 1,
                    },
                })
        }> Launch Jupiter Terminal
        </button>
...
Please reach out in Discord

If you need assistance or have questions, feel free to reach out to us on Discord!