@jup-ag/react-hook

The react hook to connect integrate Jupiter.

Installation

Yarn

yarn add @jup-ag/react-hook

NPM

npm install @jup-ag/react-hook

Usage

At your App shell:

import { JupiterProvider } from '@jup-ag/react-hook';
import { Connection } from '@solana/web3.js';

const connection = new Connection('https://rpc.ankr.com/solana');

const App = ({ children }) => {
  const wallet = useWallet() // user wallet
  return (
    <JupiterProivder connection={connection} cluster="mainnet-beta" userPublicKey={wallet.publicKey}>
      {children}
    </JupiterProvider>
  )
}

import { useJupiter } from '@jup-ag/raect-hook';

const SwapForm = () => {
  const jupiter = useJupiter({
    amount, // integer amount in term of input mint
    inputMint,
    outputMint,
    slippageBps,
    debounceTime, // debounce time before refresh
  })

  const {
    allTokenMints, // all the token mints that is possible to be input
    routeMap, // routeMap, same as the one in @jup-ag/core
    exchange, // exchange 
    refresh, // function to refresh rates
    lastRefreshTimestamp: lastRefreshTimestamp.current, // timestamp when the data was last returned
    loading, // loading states
    routes, // all the routes from inputMint to outputMint
    error,
  } = jupiter
}

Example repo

https://github.com/ZhengYuTay/create-dapp-solana-nextjs