Next.js

Setting up Orderly SDK in a Next.js project.

Create your project

Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App.

npx create-next-app@latest my-exchange --app --typescript --eslint
cd my-exchange

Add Orderly SDK

npm install @orderly.network/react

Add new route

Next.js has two routing modes: Page Router and App Router. Here we take App mode as an example. For more information about App Router, please refer to Next.js documentation.Create a new trade/[symbol] directory under the /app directory, create a page.tsx file, and add the following code:

page.tsx

import { TradingPage, OrderlyAppProvider } from "@orderly.network/react";
import { ConnectorProvider } from "@orderly.network/web3-onboard";

export default function Trading({ params }: { params: { symbol: string } }) {
  return (
    <ConnectorProvider apiKey="<Your web3-onboard's api key>" options={`<options>`}>
      <OrderlyAppProvider
        networkId="testnet"
        brokerId="<Your broker id>"
        brokerName="<Your name>"
        appIcons={"/logo.svg"} // Path to your app icons
      >
        <TradingPage
          symbol={params.symbol}
          tradingViewConfig={`tradingView config`}
          onSymbolChange={`onSymbolChange handler`}
        />
      </OrderlyAppProvider>
    </ConnectorProvider>
  );
}

Import style

page.tsx

import { TradingPage, OrderlyAppProvider } from "@orderly.network/react";
import { ConnectorProvider } from "@orderly.network/web3-onboard";
import "@orderly.network/react/dist/styles.css";

export default function Trading() {
  return {
    /* ... */
  };
}

Done

Now you can start your project and access the /trade/PERP_ETH_USDC route, you will see a complete exchange page.

npm run dev

Wallet connect TradingPage

Software development kits

[evm] react components SDK

[evm] react hooks SDK

[evm] core SDK

[evm] perp SDK

Autogenerated technical reference