TradingPage

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>
  );
}

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

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

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

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