> ## Documentation Index
> Fetch the complete documentation index at: https://staging-docs.orderly.network/llms.txt
> Use this file to discover all available pages before exploring further.

# TradingPage

> Full-featured TradingPage component with orderbook, chart, order form, positions, and responsive layout.

<img src="https://mintcdn.com/orderly-network-staging/eQ3a3CD-iQx6FVnc/images/sdks/react/trading-page.webp?fit=max&auto=format&n=eQ3a3CD-iQx6FVnc&q=85&s=666e4a8ad4d502c29aa1860a21e6020f" alt="" width="1701" height="1039" data-path="images/sdks/react/trading-page.webp" />

`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

<Info>
  For more features, please visit the [demo page](https://demo.orderly.network/). The demo page is
  open source and the source code can be found
  [here](https://github.com/OrderlyNetwork/js-sdk-demo).
</Info>

## Preview

<iframe className="preview" src="https://storybook.orderly.network/iframe.html?globals=theme%3Acustom&id=package-trading-tradingpage--page&viewMode=story" title="Trading Page" frameBorder="0" allowFullScreen />

## 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](/sdks/react/wallet).

```tsx theme={null}
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](#onsymbolchange) for more details.

```tsx theme={null}
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.

```tsx theme={null}
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](https://www.tradingview.com/advanced-charts/).

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

```tsx theme={null}
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
      }}
    />
  );
}
```

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