Orderly Broker UI Template

This template provides a quick way to set up a customized trading UI for Orderly Network brokers, built with Remix and deployable on Vercel.

🔗 Live Demo

Quick Start

1. Fork the Repository

   Fork this repository to your GitHub account to create your broker's UI.

2. Clone Your Fork

git clone https://github.com/YOUR_USERNAME/broker-template.git
cd broker-template

3. Install Dependencies

yarn install
cp .env.example .env.local

Configuration Steps

1. Environment Configuration

The repository keeps a minimal .env for compatibility with existing forks. For local customization, copy .env.example to the ignored .env.local file, then edit .env.local to configure the broker and application metadata. Variables prefixed with VITE_ are exposed to the browser by Vite, so do not put private keys, passwords, or other secrets in this file.

# Broker settings
VITE_ORDERLY_BROKER_ID=your_broker_id
VITE_ORDERLY_BROKER_NAME=Your Broker Name
VITE_DEPLOYMENT_ENV=mainnet  # use testnet for testing

# Application metadata
VITE_APP_NAME=Your App Name
VITE_APP_DESCRIPTION=Your app description for SEO

# Navigation menu configuration (optional)
VITE_ENABLED_MENUS=Trading,Portfolio,Markets,Leaderboard
VITE_CUSTOM_MENUS=Documentation,https://docs.yoursite.com;Blog,https://blog.yoursite.com;Support,https://support.yoursite.com

VITE_DEPLOYMENT_ENV controls whether the app connects to Orderly mainnet or testnet. Restart the development server after changing .env.local; production deployments must be rebuilt so the new values are included.

For deployments that use runtime configuration, values in public/config.js (window.__RUNTIME_CONFIG__) take precedence over the corresponding .env.local values. This allows configuration changes without rebuilding the application.

2. Theme Customization

1. Visit the Orderly Storybook Trading Page
2. Customize your preferred theme using the controls
3. Export the generated CSS
4. Replace the contents of app/styles/theme.css with your exported CSS

3. UI Configuration

Edit app/utils/config.tsx to customize your UI:

• Footer Links: Update footerProps with your social media links
• Logos: Replace the main and secondary logos in the appIcons section
• PnL Sharing: Customize the PnL poster backgrounds and colors in sharePnLConfig

Required assets:

• Place your logos in the public directory:
  • Main logo: public/orderly-logo.svg
  • Secondary logo: public/orderly-logo-secondary.svg
  • Favicon: public/favicon.webp
• PnL sharing backgrounds: public/pnl/poster_bg_[1-4].png

Development

Run the development server:

yarn dev

Deployment

1. Build the application:

yarn build

2. Deploy to Vercel:
   • Create an account on Vercel if you haven't already
   • Install Vercel CLI: yarn global add vercel
   • Run vercel in your project directory and follow the prompts
   • For subsequent deployments, use vercel --prod to deploy to production

For custom domain setup:

• Go to your project settings in Vercel dashboard
• Navigate to the "Domains" section
• Add and configure your custom domain

Additional Resources

• Orderly JS SDK Documentation
• Orderly Network Documentation
• Storybook Theme Editor