​
Automatic Installation

For a brand new project, we recommend running the create-orderly-app command to create a new trading app automatically. This will set up a new Orderly app and install the required dependencies.

You will then be asked the following prompts:

  • Project name?: The name of your project.
  • What is your BrokerId?: Your unique broker ID.
  • Would you like to add which pages?: You can add some pages to your project.
  • would you like to use which wallet connector?: choose a wallet connect compoenent.
  • Would you like to use which framework?: choose a React framework.

Once you’ve answered the prompts, create-orderly-app will create a folder that is named after your project name, then install all dependencies, and creates all routes and components required for creating the app automatically.

​
Manual Installation

If you already created your own project, or would like to manually set the SDK up, then you can follow the steps below to install @orderly.network/react.

1

Installation

Inside your React project directory, run the following:

npm install @orderly.network/react
2

Add styles

Reference the style file by adding the following code to your project:

import "@orderly.network/react/dist/styles.css";

If you would like to customize the theme, please refer to this link.

3

Adding a global configuration Provider

  • The OrderlyAppProvider component encapsulates the OrderlyConfigProvider from @orderly.network/hooks. The parameters you configure on the OrderlyAppProvider component will be passed to the OrderlyConfigProvider.
  • The brokerId parameter is mandatory, and you can obtain it by contacting us.
trading.tsx
import { TradingPage, OrderlyAppProvider } from "@orderly.network/react";
// Add a wallet connection provider to provide the wallet connection function for the app
import { ConnectorProvider } from "@orderly.network/web3-onboard";

export default function Trading() {
  return (
    <OrderlyAppProvider
        networkId="testnet"
        brokerId="<Your brokerId>"
        brokerName="<Your name>"
				shareOptions={{
          pnl: {
            backgroundImages: [
              // your background images
            ],
          },
        }}
        appIcons={...}
      >
        {/* page */}
    </OrderlyAppProvider>
  );
}
4

Adding a wallet connection component

You must add a web3 wallet provider, otherwise the Orderly private apis cannot be used. You can use the wallet connection library provided by the Orderly SDK or implement the component yourself. For more details, please refer to Wallet Connect.

npm install @orderly.network/web3-onboard
trading.tsx
import { TradingPage } from "@orderly.network/react";
// Add a wallet connection provider to provide the wallet connection function for the app
import { ConnectorProvider } from "@orderly.network/web3-onboard";

export default function Trading() {
  return (
    <ConnectorProvider
      apiKey="<Your web3-onboard's api key>"
      options={`metadata`}
    >
      <OrderlyAppProvider
        {/* config */}
      >
        {/* page */}
      </OrderlyAppProvider>
    </ConnectorProvider>
  );
}
5

Pages

To add a new page to your project, introduce a component of the Page type, and provide the required configuration parameters as specified. Below is an example using the trading page:

trading.tsx
import { TradingPage } from "@orderly.network/react";

export default function Trading() {
  return (
    <ConnectorProvider
      apiKey="<Your web3-onboard's api key>"
      options={`metadata`}
    >
      <OrderlyAppProvider
        {/* config */}
      >
        <TradingPage
          symbol={"PERP_ETH_USDC"}
          tradingViewConfig={`tradingView config`}
          onSymbolChange={`onSymbolChange handler`}
        />
      </OrderlyAppProvider>
    </ConnectorProvider>
  );
}
  • Different frameworks often have different ways of configuring routes. You can view examples here.
  • For configuration parameters of the Trading Page component, please refer to this link.
6

Done

Now you can start your project and access the routes defined above. You will see a complete exchange page.

OverviewConfiguration