Skip to main content

React App Example

In this guide, we'll walk you through from scratch the steps to integrate Jupiter Terminal into a React application.

Prerequisites​

Before you begin, make sure you have the following installed on your system.

Node.js and npm: Download and install from nodejs.org

Step 1: Create a New React Project​

Head to your preferred directory and create a new React project using create-react-app with TypeScript template (you can use other templates or methods to start your project too):

npx create-react-app terminal-demo --template typescript
cd terminal-demo
npm start

Step 2: Add TypeScript Support​

Create a type declaration file terminal.d.ts in your project's /src/types folder:

declare global {
  interface Window {
    Jupiter: JupiterTerminal;
  }
};
export {};

Step 3: Embed the Terminal Script​

In your /public/index.html, add the Jupiter Terminal script:

<head>
  <script src="https://terminal.jup.ag/main-v4.js" data-preload defer></script>
</head>

Step 4: Initialize Terminal​

There are two ways to initialize Jupiter Terminal in a React application:

Method 1: Using Window Object​

In your /src/App.tsx, use the following code to initialize the terminal.

import React, { useEffect } from 'react';
import './App.css';
import './types/terminal.d';

export default function App() {
  useEffect(() => {
    // Initialize terminal
    window.Jupiter.init({
      displayMode: "widget",
      integratedTargetId: "jupiter-terminal",
    });
  }, []);

  return (
    <div className="App">
      <h1>Jupiter Terminal Demo</h1>
      <div id="jupiter-terminal" />
    </div>
  );
}

Method 2: Using @jup-ag/terminal Package​

warning

Do note that using this method will require you to maintain its dependencies.

  1. Install the package:
npm install @jup-ag/terminal
  1. Initialize the terminal:
import React, { useEffect } from "react";
import "@jup-ag/terminal/css";
import "./App.css";
import "./types/terminal.d";

export default function App() {
  useEffect(() => {
    import("@jup-ag/terminal").then((mod) => {
      const { init } = mod;
      init({
        displayMode: "widget",
        integratedTargetId: "jupiter-terminal",
      });
    });
  }, []);

  return (
    <div>
      <h1>Jupiter Terminal Demo</h1>
      <div id="jupiter-terminal" />
    </div>
  );
}

There you have it! You've successfully integrated Jupiter Terminal into your Next.js application.

  • Please test the swap functionality and check the transaction.
  • If you require more customizations, check out the Terminal Playground or the Customization documentation.
  • If you have any questions or issues, please refer to the FAQ or contact us on Discord.