Getting started
Automatic Installation
For a brand new project, we recommend running the create-orderly-app
command to create a new trading app automatically. This will set up a new Orderly app and install the required dependencies.
You will then be asked the following prompts:
- Project name?: The name of your project.
- What is your BrokerId?: Your unique broker ID.
- Would you like to add which pages?: You can add some pages to your project.
- would you like to use which wallet connector?: choose a wallet connect compoenent.
- Would you like to use which framework?: choose a React framework.
Once you’ve answered the prompts, create-orderly-app
will create a folder that is named after your project name, then install all dependencies, and creates all routes and components required for creating the app automatically.
Manual Installation
If you already created your own project, or would like to manually set the SDK up, then you can follow the steps below to install @orderly.network/react
.
Installation
Inside your React project directory, run the following:
npm install @orderly.network/react
Add styles
Reference the style file by adding the following code to your project:
import "@orderly.network/react/dist/styles.css";
If you would like to customize the theme, please refer to this link.
Adding a global configuration Provider
- The
OrderlyAppProvider
component encapsulates theOrderlyConfigProvider
from@orderly.network/hooks
. The parameters you configure on theOrderlyAppProvider
component will be passed to theOrderlyConfigProvider
. - The
brokerId
parameter is mandatory, and you can obtain it by contacting us.
import { TradingPage, OrderlyAppProvider } from "@orderly.network/react";
// Add a wallet connection provider to provide the wallet connection function for the app
import { ConnectorProvider } from "@orderly.network/web3-onboard";
export default function Trading() {
return (
<OrderlyAppProvider
networkId="testnet"
brokerId="<Your brokerId>"
brokerName="<Your name>"
shareOptions={{
pnl: {
backgroundImages: [
// your background images
],
},
}}
appIcons={...}
>
{/* page */}
</OrderlyAppProvider>
);
}
Adding a wallet connection component
You must add a web3 wallet provider, otherwise the Orderly private apis cannot be used. You can use the wallet connection library provided by the Orderly SDK or implement the component yourself. For more details, please refer to Wallet Connect.
npm install @orderly.network/web3-onboard
import { TradingPage } from "@orderly.network/react";
// Add a wallet connection provider to provide the wallet connection function for the app
import { ConnectorProvider } from "@orderly.network/web3-onboard";
export default function Trading() {
return (
<ConnectorProvider
apiKey="<Your web3-onboard's api key>"
options={`metadata`}
>
<OrderlyAppProvider
{/* config */}
>
{/* page */}
</OrderlyAppProvider>
</ConnectorProvider>
);
}
Pages
To add a new page to your project, introduce a component of the Page type, and provide the required configuration parameters as specified. Below is an example using the trading page:
import { TradingPage } from "@orderly.network/react";
export default function Trading() {
return (
<ConnectorProvider
apiKey="<Your web3-onboard's api key>"
options={`metadata`}
>
<OrderlyAppProvider
{/* config */}
>
<TradingPage
symbol={"PERP_ETH_USDC"}
tradingViewConfig={`tradingView config`}
onSymbolChange={`onSymbolChange handler`}
/>
</OrderlyAppProvider>
</ConnectorProvider>
);
}
Done
Now you can start your project and access the routes defined above. You will see a complete exchange page.