The following parameters need to be configured when using @orderly.network/react:

​
OrderlyAppProvider

All components within @orderly.network/react needs to be used within OrderlyAppProvider. This component provides global configuration for the App, and provides real-time state, data, and Account management through @orderly.network/hooks.

import { Deposit, OrderlyAppProvider } from "@orderly.network/react";

export default function Trading() {
  return (
    <OrderlyAppProvider
      networkId="testnet"
      brokerId="<Your broker id>"
      brokerName="<Your name>"
      appIcons={...}
    >
      <Deposit />
    </OrderlyAppProvider>
  );
}

OrderlyAppProvider has the following parameters:

​
appIcons

  • Type: AppLogos
  • Required: false

Customize your app’s icons, The AppLogos type is defined as follows:

// AppLogos type

type Logo = {
  // the logo image url
  img?: string;
  // also can use react component
  component?: ReactNode;
  className?: string;
};

type AppLogos = Partial<{
  // logo for top navigation bar
  main: Logo;
  // logo for popover/dialog header
  secondary: Logo;
}>;

​
toastLimitCount

  • Type: number
  • Required: false

The maximum number of toast notifications that are displayed concurrently.

​
includeTestnet

  • Type: boolean
  • Required: false

Whether Testnet chains are included.

​
onChainChanged

  • Type: (chainId: string) => void
  • Required: false

The callback function when the user switches between the mainnet and testnet will be invoked upon successful network switch. The function takes the switched network ID as a parameter.

If your app switches between testnet and mainnet, then you will have to do a full page reload for the Orderly SDK to work properly:

const networkId = (localStorage.getItem("orderly-networkId") ?? "mainnet") as NetworkId;

const onChainChanged = useCallback(
  (chainId, isTestnet) => {
    localStorage.setItem("orderly-networkId", isTestnet ? "testnet" : "mainnet");
    setTimeout(() => {
      window.location.reload();
    }, 100);
  },
  [props.symbol]
);
// ...

return (
  <OrderlyAppProvider
    networkId={networkId}
    onChainChanged={onChainChanged}
    // ...
  >
    {/* ... */}
  </OrderlyAppProvider>
);

The following properties will be passed through to the OrderlyConfigProvider component. For more information about the configuration of OrderlyConfigProvider, please refer to the technical documentation.

​
brokerId

  • Type: string
  • Required: true

broker id

​
networkId

  • Type: string
  • Required: false
  • Default: mainnet

The network ID, possible values are mainnet and testnet.

​
configStore

  • Type: ConfigStore - API
  • Required: false
  • Default: new DefaultConfigStore() - API

​
keyStore

  • Type: OrderlyKeyStore - API
  • Required: false
  • Default: new BaseOrderlyKeyPair() - API

​
chainFilter

  • Type: filteredChains | filterChainsFunc - API
  • Required: false
  • Default: all supported chains by Orderly Network

It is recommended to provide your own list of supported chains:

import { Arbitrum, Base, Ethereum } from "@orderly.network/types";

// ...

return (
  <OrderlyAppProvider chainFilter={{ mainnet: [Arbitrum, Base, Ethereum] }}>
    {/* ... */}
  </OrderlyAppProvider>
);

​
shareOptions

  • Type: DrawOptions - API
  • Required: `true

The shareOptions need to be set so that users can share their PnL as an image. A preset of images can be found [in our example DEX]9https://github.com/OrderlyNetwork/js-sdk-demo/tree/main/public/images).

If custom images are provided, it might be necessary to change the placement of various text elements. Please check following example:

export type layoutInfo = {
  width?: number;
  height?: number;
  fontSize?: number;

  color?: string;
  textAlign?: CanvasTextAlign;
  textBaseline?: CanvasTextBaseline;
  position: Partial<{
    left: number;
    right: number;
    top: number;
    bottom: number;
  }>;
};

// ...

return (
  <OrderlyAppProvider
    shareOptions={{
      pnl: {
        backgroundImages: [
          "/images/poster_bg_1.png",
          "/images/poster_bg_2.png",
          "/images/poster_bg_3.png"
        ],
        layout: {
          message: {
            width: 100,
            height: 25,
            fontSize: 16,
            position: {
              left: 300,
              top: 150
            }
          }
          // other text placements are: `domain`, `information`, `position`, `unrealizedPnl`, `updateTime`
        }
      }
    }}
  >
    {/* ... */}
  </OrderlyAppProvider>
);

​
WalletConnectorContext

WalletConnectorContext is a React Context used to provide wallet connection methods or data for the currently connected wallet in the app. It can be used as follows:

import { WalletConnectorContext } from "@orderly.network/hooks";

export const App: FC = (props) => {
  return (
    <WalletConnectorContext.Provider value={{ connect, wallet, connectedChain, disconnect }}>
      {/* children component */}
    </WalletConnectorContext.Provider>
  );
};

In the example code above, each property or method of the value object must be implemented; otherwise, the entire app will be unable to connect to the wallet. If you find this process cumbersome or are starting a new project, it is recommended to use the @orderly.network/web3-onboard library provided by Orderly. Please refer to this link for more information. import ts from “typescript”

Getting startedTheming