Getting started

npm install @orderly.network/ui @orderly.network/react-app

import "@orderly.network/ui/dist/styles.css";

import React, { FC, ReactNode } from "react";
import { OrderlyAppProvider } from "@orderly.network/react-app";

const App: FC<{ children: ReactNode }> = (props) => {
  return (
    <OrderlyAppProvider
      brokerId="orderly"
      brokerName="Orderly"
      networkId="testnet"
      appIcons={"/logo.svg"} // Path to your app icons
    >
      {props.children}
    </OrderlyAppProvider>
  );
};

npm install @orderly.network/wallet-connector

import { WalletConnectorProvider } from "@orderly.network/wallet-connector";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";

const App: FC<{ children: ReactNode }> = (props) => {
  return (
    <WalletConnectorProvider solanaInitial={{ network: WalletAdapterNetwork.Mainnet }}>
      <OrderlyAppProvider
        brokerId="orderly"
        brokerName="Orderly"
        networkId="testnet"
        appIcons={"/logo.svg"} // Path to your app icons
      >
        {props.children}
      </OrderlyAppProvider>
    </WalletConnectorProvider>
  );
};

npm install @orderly.network/ui-scaffold

import Scaffold from "@orderly.network/ui-scaffold";

<Scaffold
  mainNavProps={
    {
      // Please refer to the example code and configure as needed.
    }
  }
  footerProps={{}}
  routerAdapter={{
    onRouteChange, //Handle user click events on the navigation menu.
    currentPath: "/"
  }}
>
  {/* page component */}
  {children}
</Scaffold>;