Follow the steps below to integrate the Orderly SDK into your project:

​
Add Basic Dependencies

​
Install the Base Component Libraries

npm install @orderly.network/ui @orderly.network/react-app

​
Add Styles to Your Project

Reference the style file by adding the following code to your project: 
import "@orderly.network/ui/dist/styles.css";

​
Add a Global Configuration Provider

Wrap your application with the OrderlyAppProvider component to set global configurations: 
import React, { FC, ReactNode } from "react";
import { OrderlyAppProvider } from "@orderly.network/react-app";

const App: FC<{ children: ReactNode }> = (props) => {
  return (
    <OrderlyAppProvider brokerId="orderly" brokerName="Orderly" networkId="testnet" appIcons={""}>
      {props.children}
    </OrderlyAppProvider>
  );
};

​
Add Wallet Connection

Orderly SDK provides a built-in wallet connection component supporting both EVM and Solana. Here’s how to integrate it:

​
Install Wallet Connector Dependencies

npm install @orderly.network/wallet-connector

​
Add the WalletConnectorProvider Component

Wrap your application with the WalletConnectorProvider for wallet connection functionality: 
import { WalletConnectorProvider } from "@orderly.network/wallet-connector";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";

const App: FC<{ children: ReactNode }> = (props) => {
  return (
    <WalletConnectorProvider solanaInitial={{network: WalletAdapterNetwork.Mainnet }}>
      <OrderlyAppProvider brokerId="orderly" brokerName="Orderly" networkId="testnet" appIcons={""}>
        {props.children}
      </OrderlyAppProvider>
    </WalletConnectorProvider>
  );
};
Alternatively, you can integrate third-party wallet libraries by implementing the WalletConnectorContextState interface from @orderly.network/hooks.

​
Add Pages

​
Page Layout

If you want to use the SDK’s built-in top navigation, side navigation, and other layout features, install the layout library: 
npm install @orderly.network/ui-scaffold

​
Add the Scaffold component to your application:

import Scaffold from "@orderly.network/ui-scaffold";

<Scaffold
  mainNavProps={
    {
      // Please refer to the example code and configure as needed.
    }
  }
  footerProps={{}}
  routerAdapter={{
    onRouteChange, //Handle user click events on the navigation menu.
    currentPath: "/"
  }}
>
  {/* page component */}
  {children}
</Scaffold>;
For certain page components, the SDK also provides ready-made layout components. For example, you can directly import the layout for @orderly.network/portfolio.

​
Page Components

The SDK includes the following page components: Trading - @orderly.network/trading Portfolio - @orderly.network/portfolio Referral - @orderly.network/referral Markets - @orderly.network/markets Trading Rewards - @orderly.network/trading-rewards Affiliate - @orderly.network/affiliate You can integrate these with your preferred React routing framework. Here are examples for popular frameworks: For detailed usage, refer to the Orderly Storybook.