Docs
Hooks
Quick Start

Quick Start

You can use @orderly.network/hooks in two simple steps!

Installation

Inside your React project directory, run the following:

npm install @orderly.network/types @orderly.network/hooks

Add OrderlyProvider

Add the OrderlyProvider 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 (Please get in touch with the Orderly team to get your own unique brokerId)

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

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.

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>
  );
};
OverviewAPI request