@boson-so/react-jup NPM

Jupiter Solana React widget

Github Repo

Getting Started

Install the react package and Jupiter deps

yarn add @boson-so/react-jup @jup-ag/react-hook

Wrap your app with JupiterProvider like so:

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

const connection = new Connection('https://solana-api.projectserum.com');

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

Import React Jupiter and use it on your app:

import JupiterForm from '@boson-so/react-jup';

const connection = new Connection('https://solana-api.projectserum.com');

const SwapScreen = ({ children }) => {
  return (
    <JupiterForm />
  )
}

Customizing styles:

You can customize whole form colors by replacing the styles prop, the default props are:

const defaultProps = {
  styles: {
    primaryBackground: "#0E0D11",
    secondaryBackground: "#131318",
    stroke: "#51576B",
    primaryText: "#fff",
    accent: "#3f52ff",
  },
};