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> );}
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`} /> );}
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:
