Configuration
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
keyStore
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”