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

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.