You can use @orderly.network/hooks
in two simple steps!
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
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
(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>
);
};
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>
);
};
If you are using an existing project and have already implemented the Orderly Key creation process, or have to modify the creation process for your own use cases, you can use your own configStore
or keyStore
via their respective property within OrderlyConfigProvider
.
import type { FC, PropsWithChildren } from "react";
import { OrderlyConfigProvider } from "@orderly.network/hooks";
import type { ConfigStore, OrderlyKeyStore } from "@orderly.network/core";
const myConfigStore: ConfigStore = new <Your ConfigStore class>;
const myKeyStore: OrderlyKeyStore = new <Your OrderlyKeyStore class>;
export const App: FC<PropsWithChildren> = ({ children }) => {
const brokerId = "<your id>";
return (
<OrderlyConfigProvider configStore={myConfigStore} keyStore={myKeyStore} networkId="mainnet">
<children />
</OrderlyProvider>
);
};
The respective interfaces the need to be implemented are:
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>
);
};