Skip to main content

Integrate Jupiter into your React App

Use the React-Hook if you'd like to embed Jupiter into your own React UI.

Pre-requisites​

Setup your Wallet Adapter for your frontend application.

Installation​

Open your terminal, navigate to your project directory, and run the command below.

npm i @jup-ag/core @jup-ag/react-hook jsbi

Meanwhile, our published package can be found here NPM.

Usage​

import { TOKEN_LIST_URL } from "@jup-ag/core";
import { JupiterProvider, useJupiter } from "@jup-ag/react-hook";

Create a React component​

React​

import React, { useEffect, useState } from "react";

const JupiterApp = () => {
  return (
    <>
      <div style={{ fontWeight: '600', fontSize: 16, marginTop: 24 }}>
        Hook example
      </div>
      <div>Number of tokens:</Text>
      <div>Number of input tokens</Text>
      <div>Possible number of routes:</Text>
      <div>
        Best quote:
      </div>
    </>
  )
}

export default JupiterApp;

React Native​

import React, { useEffect, useState } from "react";
import { Text } from "react-native";

const JupiterApp = () => {
  return (
    <>
      <Text style={{ fontWeight: '600', fontSize: 16, marginTop: 24 }}>
        Hook example
      </Text>
      <Text>Number of tokens:</Text>
      <Text>Number of input tokens</Text>
      <Text>Possible number of routes:</Text>
      <Text>
        Best quote:
      </Text>
    </>
  )
}
export default JupiterApp;

Fetch the list of tokens​

  1. Declare the interface.
export interface Token {
  chainId: number; // 101,
  address: string; // 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
  symbol: string; // 'USDC',
  name: string; // 'Wrapped USDC',
  decimals: number; // 6,
  logoURI: string; // 'https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/BXXkv6z8ykpG1yuvUDPgh732wzVHB69RnB9YgSYh3itW/logo.png',
  tags: string[]; // [ 'stablecoin' ]
}
  1. Fetch token list from Jupiter API.
import { TOKEN_LIST_URL } from "@jup-ag/core";

const JupiterApp = () => {
  const [tokens, setTokens] = useState<Token[]>([])
  useEffect(() => {
    // Fetch token list from Jupiter API
    fetch(TOKEN_LIST_URL[ENV])
      .then(response => response.json())
      .then(result => setTokens(result))
  }, [])
  // ...
}

export default JupiterApp;
  1. Then, it's time to look for which token you would like to swap, from the tokens array. In this case, we will swap from USDC to USDT.
import { TOKEN_LIST_URL } from "@jup-ag/core";

const JupiterApp = () => {
  const [tokens, setTokens] = useState<Token[]>([])
  console.log(tokens) // Look for tokens

  const [inputMint] = useState<PublicKey>(new PublicKey("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"))
  const [outputMint] = useState<PublicKey>(new PublicKey("Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB"))
  // ...
}

Attach useJupiter hooks​

import { TOKEN_LIST_URL } from "@jup-ag/core";

const JupiterApp = () => {
  const [tokens, setTokens] = useState<Token[]>([])
  const [inputMint] = useState<PublicKey>(new PublicKey("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"))
  const [outputMint] = useState<PublicKey>(new PublicKey("Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB"))

  useEffect(() => {
      // Fetch token list from Jupiter API
      fetch(TOKEN_LIST_URL[ENV])
        .then(response => response.json())
        .then(result => setTokens(result))
    }, [])

  // Attach Jupiter hook
  const jupiter = useJupiter({
    amount: JSBI.BigInt(1 * (10 ** 6)), // raw input amount of tokens
    inputMint,
    outputMint,
    slippage: 1, // 1% slippage
    debounceTime: 250, // debounce ms time before refresh
  })

  // ...
}

export default JupiterApp;
How do you calculate the amount to pass in?

Every token have their own decimals place, in our example, both USDC and USDT pairs have their decimals place at 6. Assuming in the UI, user entered a value of 1 USDC, we can derive the amount to pass into Jupiter to be 1 multiplied by (10 exponent of 6)

const inputAmount = 1; // UI input
const inputTokenInfo = tokens.find(item => item.address === "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v") // Token info
const amount = JSBI.BigInt(inputAmount * (10 ** inputTokenInfo.decimals)) // Amount to send to Jupiter

Display the result​

Tab

Performing a swap​

Once you have acquired all the meaningful information from the Jupiter instance, it is time we perform a swap with the exchange() function.

caution

You would need a wallet and connection instance to perform a swap, the easiest way to interface with your wallet (Phantom, Sollet, Solflare...) would be the use of @solana/wallet-adapter-react library, visit the documentation for more info.

Tab

For advanced developers, custom wallet instance can be used as long as it fulfils the interface requirement of:
SignerWalletAdapter from '@solana/wallet-adapter-base/lib/signer.d.ts'

Alternatively,

interface CustomWallet {
    publicKey: PublicKey
    sendTransaction(transaction: Transaction, connection: Connection, options?: SendTransactionOptions): Promise<TransactionSignature>;
    signTransaction(transaction: Transaction): Promise<Transaction>;
    signAllTransactions(transaction: Transaction[]): Promise<Transaction[]>;
}

Example​

If you need more help, pay a visit to Example (React, Next.js) or, just fork and start there.