Skip to main content
You can use @orderly.network/hooks in two simple steps!
1

Installation

Inside your React project directory, run the following to install the SDK. You will also very likely need our Types SDK:
npm install @orderly.network/types @orderly.network/hooks
2

Add OrderlyConfigProvider

Add the OrderlyConfigProvider component to your project, wrapping the root components.
We recommend that you use the default config in the newly created project and provide your own brokerId. Start from the broker onboarding guide to set up your builder identity. If you are using Orderly One, continue from https://dex.orderly.network/.
import type { FC, PropsWithChildren } from "react";
import { OrderlyConfigProvider } from "@orderly.network/hooks";

const brokerId = "<your id>";

export const App: FC<PropsWithChildren> = ({ children }) => {
  return (
    <OrderlyConfigProvider brokerId={brokerId} networkId="mainnet">
      {children}
    </OrderlyConfigProvider>
  );
};
3

Setup complete!

You can now use all the provided hooks within @orderly.network/hooks!
import { useAccount } from "@orderly.network/hooks";

export const UserInfo = () => {
  const { account, state } = useAccount();

  return (
    <div>
      <div>Address: {state.address}</div>
    </div>
  );
};

​
Environments

The networkId property within OrderlyConfigProvider can be set to mainnet or testnet. The default is mainnet. It is not possible to change the network during runtime. If you want to do so anyway, you need to reload the page. 
import type { FC, PropsWithChildren } from "react";
import { OrderlyConfigProvider } from "@orderly.network/hooks";

const brokerId = "<your id>";

export const App: FC<PropsWithChildren> = ({ children }) => {
  return (
    <OrderlyConfigProvider brokerId={brokerId} networkId="testnet">
      {children}
    </OrderlyConfigProvider>
  );
};

​
Wallet Integration with Orderly Provider

The Orderly Provider enables seamless integration with different blockchain wallets. It supports both EVM-compatible chains and Solana through dedicated wallet adapters. Here’s how to set up the provider with both ecosystems: 
import type { FC, PropsWithChildren } from "react";
import { OrderlyConfigProvider } from "@orderly.network/hooks";
import { DefaultEVMWalletAdapter } from "@orderly.network/default-evm-adapter";
import { DefaultSolanaWalletAdapter } from "@orderly.network/default-solana-adapter";
import { EthersProvider } from "@orderly.network/web3-provider-ethers";

const brokerId = "<your id>";

export const App: FC<PropsWithChildren> = ({ children }) => {
  return (
    <OrderlyConfigProvider
      brokerId={brokerId}
      networkId="testnet"
      walletAdapters={[
        new DefaultEVMWalletAdapter(new EthersProvider()),
        new DefaultSolanaWalletAdapter()
      ]}
    >
      {children}
    </OrderlyConfigProvider>
  );
};