TradingPage is an App page containing full trading functionalities, and includes the following components:

  • Orderbook
  • K-line chart
  • Order form, list and management
  • Position list and management
  • Asset management, deposit and withdrawals
  • Responsive, automatically adapting to both desktop and mobile

For more features, please visit the demo page. The demo page is open source and the source code can be found here.

​
Usage

​
Dependencies

The following components must be used when using TradingPage:

  • OrderlyAppProvider- for global settings, state managements, Account instance etc.
  • Wallet connection components - for connecting and managing wallet connections. You can use your own wallet connection components, or use the ConnectorProvider compoenent within @orderly.network/web3-onboard. For more details, please see this page.
import { TradingPage, OrderlyAppProvider } from "@orderly.network/react";
import { ConnectorProvider } from "@orderly.network/web3-onboard";

export default function Trading() {
  return (
   {/* A component that provides wallet connectivity,
   but you can also use any wallet connection component that you customize
   */}
    <ConnectorProvider
      apiKey="<Your web3-onboard's api key>"
      options={`metadata`}
    >
      <OrderlyAppProvider
        networkId="testnet"
        brokerId="<Your broker id>"
        logoUrl="<Your brand logo url>"
      >
        <TradingPage
          symbol={'PERP_ETH_USDC'}
          tradingViewConfig={`tradingView config`}
          onSymbolChange={`onSymbolChange handler`}
        />
      </OrderlyAppProvider>
    </ConnectorProvider>
  );
}

​
Setting active symbol

  • Set the active symbol through the symbol property
  • Monitor user’s action to change active symbol through the onSymbolChange event. This is an optional property, but user will not be able to change the active symbol if this is not set. Please see the API for more details.
import { TradingPage } from "@orderly.network/react";

export default function Trading() {
  return (
    <TradingPage
      symbol={"PERP_ETH_USDC"}
      tradingViewConfig={`tradingView config`}
      onSymbolChange={`onSymbolChange handler`}
    />
  );
}

​
APIs

​
symbol

  • Type: string
  • Required: true

Sets the active symbol, e.g. PERP_ETH_USDC.

​
onSymbolChange

  • Type: (symbol: API.Symbol) => void
  • Required: false

This event will be triggered when user selects a new active symbol. The parameter will be the new symbol chosen.

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

export default function Trading() {
  const [symbol, setSymbol] = useState("PERP_ETH_USDC");
  return (
    <TradingPage
      symbol={symbol}
      tradingViewConfig={`tradingView config`}
      onSymbolChange={(symbol) => {
        setSymbol(symbol.symbol);
      }}
    />
  );
}

​
tradingViewConfig

  • Type: TradingViewConfig
  • Required: false

TradingView charting config. Since @orderly.network/react does not include the tradingView library, you would have to configure the path for the tradingView Advanced Charts js library. After that, the @orderly.network/react package will use the configured library to load the tradingView scripts and create a k-line chart.

  • TradingView Advanced Charts is free to use, but you need to manually apply for the license here.

  • Once you obtained access to TradingView Advanced Charts, you can configure it as below:

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

export default function Trading() {
  return (
    <TradingPage
      symbol={'PERP_ETH_USDC'}
      tradingViewConfig={{
        scriptSRC: "/assets/chart/charting_library/charting_library.js",
        library_path: "/assets/chart/charting_library/",
        customCssUrl: "/assets/chart/custom.css", // optional
      }}
      {/** other config  */}
    />
  );
}
If this is not configured, then the k-line chart will not be displayed.
Next.jsDeposit