TradingPage

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.

Preview

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() {
  // A component that provides wallet connectivity,
  // but you can also use any wallet connection component that you customize
  return (
    <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
      }}
    />
  );
}

If this is not configured, then the k-line chart will not be displayed.

Software development kits

[evm] react components SDK

[evm] react hooks SDK

[evm] core SDK

[evm] perp SDK

Autogenerated technical reference

Preview

Usage

Dependencies

Setting active symbol

APIs

symbol

onSymbolChange

tradingViewConfig

​Preview

​Usage

​Dependencies

​Setting active symbol

​APIs

​symbol

​onSymbolChange

​tradingViewConfig

Preview

Usage

Dependencies

Setting active symbol

APIs

symbol

onSymbolChange

tradingViewConfig