import { TradingPage } from '@orderly.network/trading';

interface TradingPageProps {
  // Required: Trading symbol (e.g., "PERP_ETH_USDC")
  symbol: string;

  // Callback when user changes symbol
  onSymbolChange?: (symbol: API.Symbol) => void;

  // TradingView chart configuration
  tradingViewConfig: {
    scriptSRC?: string; // Path to TradingView library
    library_path: string; // Path to charting_library folder
    customCssUrl?: string; // Custom CSS for chart
    colorConfig?: {
      chartBG?: string;
      upColor?: string;
      downColor?: string;
      pnlUpColor?: string;
      pnlDownColor?: string;
    };
  };

  // PnL sharing configuration
  sharePnLConfig?: {
    backgroundImages?: string[]; // Background images for share cards
    color?: string;
    profitColor?: string;
    lossColor?: string;
    brandColor?: string;
  };

  // Disable specific features
  disableFeatures?: TradingFeatures[];

  // Override specific sections with custom components
  overrideFeatures?: Record<TradingFeatures, ReactNode>;
}

enum TradingFeatures {
  Sider = 'sider',
  TopNavBar = 'topNavBar',
  Footer = 'footer',
  Header = 'header',
  Kline = 'kline',
  OrderBook = 'orderBook',
  TradeHistory = 'tradeHistory',
  Positions = 'positions',
  Orders = 'orders',
}

import { useCallback, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { TradingPage } from '@orderly.network/trading';
import { API } from '@orderly.network/types';

export default function TradingRoute() {
  const { symbol: paramSymbol } = useParams();
  const [symbol, setSymbol] = useState(paramSymbol || 'PERP_ETH_USDC');
  const navigate = useNavigate();

  const onSymbolChange = useCallback(
    (data: API.Symbol) => {
      setSymbol(data.symbol);
      navigate(`/perp/${data.symbol}`);
    },
    [navigate]
  );

  return (
    <TradingPage
      symbol={symbol}
      onSymbolChange={onSymbolChange}
      tradingViewConfig={{
        scriptSRC: '/tradingview/charting_library/charting_library.js',
        library_path: '/tradingview/charting_library/',
      }}
      sharePnLConfig={{
        backgroundImages: ['/pnl-bg-1.png', '/pnl-bg-2.png'],
      }}
    />
  );
}

import {
  OverviewModule,
  PositionsModule,
  OrdersModule,
  AssetsModule,
  HistoryModule,
} from '@orderly.network/portfolio';

interface OverviewPageProps {
  hideAffiliateCard?: boolean; // Hide affiliate promotion card
  hideTraderCard?: boolean; // Hide trader stats card
}

// Usage
import { OverviewModule } from '@orderly.network/portfolio';

function PortfolioOverview() {
  return <OverviewModule.OverviewPage hideAffiliateCard={false} hideTraderCard={false} />;
}

import { PositionsModule } from '@orderly.network/portfolio';

function PositionsRoute() {
  return <PositionsModule.PositionsPage />;
}

interface OrdersPageProps {
  sharePnLConfig?: SharePnLConfig; // For sharing closed PnL
}

import { OrdersModule } from '@orderly.network/portfolio';

function OrdersRoute() {
  return (
    <OrdersModule.OrdersPage
      sharePnLConfig={{
        backgroundImages: ['/pnl-bg-1.png'],
      }}
    />
  );
}

import { AssetsModule } from '@orderly.network/portfolio';

function AssetsRoute() {
  return <AssetsModule.AssetsPage />;
}

import { HistoryModule } from '@orderly.network/portfolio';

function HistoryRoute() {
  return <HistoryModule.HistoryPage />;
}

import { Outlet, NavLink } from 'react-router-dom';
import {
  OverviewModule,
  PositionsModule,
  OrdersModule,
  AssetsModule,
  HistoryModule,
} from '@orderly.network/portfolio';

// Portfolio layout with navigation
function PortfolioLayout() {
  return (
    <div className="portfolio-container">
      <nav className="portfolio-nav">
        <NavLink to="/portfolio">Overview</NavLink>
        <NavLink to="/portfolio/positions">Positions</NavLink>
        <NavLink to="/portfolio/orders">Orders</NavLink>
        <NavLink to="/portfolio/assets">Assets</NavLink>
        <NavLink to="/portfolio/history">History</NavLink>
      </nav>
      <main className="portfolio-content">
        <Outlet />
      </main>
    </div>
  );
}

// Router configuration
const portfolioRoutes = [
  {
    path: 'portfolio',
    element: <PortfolioLayout />,
    children: [
      { index: true, element: <OverviewModule.OverviewPage /> },
      { path: 'positions', element: <PositionsModule.PositionsPage /> },
      { path: 'orders', element: <OrdersModule.OrdersPage /> },
      { path: 'assets', element: <AssetsModule.AssetsPage /> },
      { path: 'history', element: <HistoryModule.HistoryPage /> },
    ],
  },
];

import { MarketsHomePage } from '@orderly.network/markets';

interface MarketsHomePageProps {
  // Current symbol (for highlighting)
  symbol?: string;

  // Callback when user clicks a symbol
  onSymbolChange?: (symbol: API.Symbol) => void;

  // Funding comparison configuration
  comparisonProps?: {
    exchanges?: string[]; // Exchanges to compare funding rates
  };

  // Custom class name
  className?: string;
}

import { useNavigate } from 'react-router-dom';
import { MarketsHomePage } from '@orderly.network/markets';

function MarketsRoute() {
  const navigate = useNavigate();

  return (
    <MarketsHomePage
      onSymbolChange={(symbol) => navigate(`/perp/${symbol.symbol}`)}
      comparisonProps={{
        exchanges: ['binance', 'okx', 'bybit'],
      }}
    />
  );
}

import { LeaderboardPage } from '@orderly.network/trading-leaderboard';

import { LeaderboardPage } from '@orderly.network/trading-leaderboard';

function LeaderboardRoute() {
  return <LeaderboardPage hideCampaignsBanner={false} />;
}

import { lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import App from './App';

// Lazy load pages for better performance
const TradingPage = lazy(() => import('./pages/Trading').then((m) => ({ default: m.default })));
const PortfolioOverview = lazy(() =>
  import('@orderly.network/portfolio').then((m) => ({
    default: m.OverviewModule.OverviewPage,
  }))
);
const MarketsPage = lazy(() =>
  import('@orderly.network/markets').then((m) => ({
    default: m.MarketsHomePage,
  }))
);
const LeaderboardPage = lazy(() =>
  import('@orderly.network/trading-leaderboard').then((m) => ({
    default: m.LeaderboardPage,
  }))
);

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      { index: true, element: <Navigate to="/perp/PERP_ETH_USDC" /> },
      {
        path: 'perp/:symbol',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <TradingPage />
          </Suspense>
        ),
      },
      {
        path: 'portfolio',
        children: [{ index: true, element: <PortfolioOverview /> }],
      },
      { path: 'markets', element: <MarketsPage /> },
      { path: 'leaderboard', element: <LeaderboardPage /> },
    ],
  },
]);

import { TradingPage, TradingFeatures } from '@orderly.network/trading';

<TradingPage
  symbol="PERP_ETH_USDC"
  tradingViewConfig={config}
  disableFeatures={[TradingFeatures.Footer, TradingFeatures.SlippageSetting]}
/>;

import { TradingPage, TradingFeatures } from '@orderly.network/trading';

<TradingPage
  symbol="PERP_ETH_USDC"
  tradingViewConfig={config}
  overrideFeatures={{
    [TradingFeatures.Header]: <CustomHeader />,
    [TradingFeatures.Footer]: <CustomFooter />,
  }}
/>;

<MarketsHomePage className="custom-markets-page" />

.custom-markets-page {
  --oui-color-primary: #7b61ff;
}

import { useScreen } from '@orderly.network/ui';

function MyPage() {
  const { isMobile, isTablet, isDesktop } = useScreen();

  return isMobile ? <MobileView /> : <DesktopView />;
}

npm install @orderly.network/trading \
            @orderly.network/portfolio \
            @orderly.network/markets \
            @orderly.network/trading-leaderboard \
            @orderly.network/affiliate