setup deployment and readme

Author: Tarnadas

.env

@@ -0,0 +1,3 @@
+VITE_ORDERLY_BROKER_ID=demo
+VITE_ORDERLY_BROKER_NAME=Demo
+VITE_ORDERLY_NETWORK_ID=testnet

.gitignore

@@ -2,5 +2,5 @@ node_modules
 
 /.cache
 /build
-.env
 .npmrc
+.specstory

Dockerfile

@@ -1,52 +1,109 @@
-# Template for Orderly SDK v2 based on Remix
+# Orderly Broker UI Template
 
-## Getting started
+This template provides a quick way to set up a customized trading UI for Orderly Network brokers, built with Remix and deployable on GitHub Pages.
 
-1. Clone the code:
+## Quick Start
+
+1. **Fork the Repository**
+   
+   Fork this repository to your GitHub account to create your broker's UI.
+
+2. **Clone Your Fork**
 
 ```sh
-git clone https://github.com/OrderlyNetwork/orderly-js-sdk-remix-template.git
-cd orderly-js-sdk-remix-template
+git clone https://github.com/YOUR_USERNAME/broker-template.git
+cd broker-template
 ```
 
-2. Install the dependencies
+3. **Install Dependencies**
 
 ```sh
-npm install
+yarn install
 ```
 
-3. Development
+## Configuration Steps
+
+### 1. Broker Configuration
 
-Run the dev server:
+Edit the `.env` file to set up your broker details:
 
-```shellscript
-npm run dev
+```env
+VITE_ORDERLY_BROKER_ID=your_broker_id
+VITE_ORDERLY_BROKER_NAME=Your Broker Name
+VITE_ORDERLY_NETWORK_ID=mainnet  # or testnet for testing
 ```
 
-4. Deployment
+### 2. Theme Customization
 
-First, build your app for production:
+1. Visit the [Orderly Storybook Trading Page](https://storybook.orderly.network/?path=/story/package-trading-tradingpage--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
 
-```sh
-npm run build
-```
+### 3. UI Configuration
 
-Then run the app in production mode:
+Edit `app/utils/config.tsx` to customize your UI:
 
-```sh
-npm start
-```
+- **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.png`
+- PnL sharing backgrounds: `public/pnl/poster_bg_[1-4].png`
+
+## Development
 
-5. Create docker image
+Run the development server:
 
 ```sh
-docker build -t orderly-js-sdk-remix-template .
+yarn dev
 ```
 
-## Docs
+## Deployment
 
-For more information, please visit the following link:
+1. Build the application:
+
+```sh
+yarn build
+```
 
-- [Orderly JS SDK](https://github.com/OrderlyNetwork/js-sdk)
-- [SDK documentation](https://orderly.network/docs/sdks)
+2. Base URL Configuration:
+
+The base URL configuration depends on your deployment method:
+
+- **For GitHub Pages subdirectory deployment** (`https://your-username.github.io/broker-template/`):
+  Keep the basename configuration in `vite.config.ts`:
+  ```typescript
+  // vite.config.ts
+  remix({
+    basename: "/your-repo-name",  // Change this to match your repository name
+    // ... other options
+  })
+  ```
+
+- **For custom domain deployment** (`https://your-domain.com`):
+  Remove the basename configuration in `vite.config.ts`:
+  ```typescript
+  // vite.config.ts
+  remix({
+    // basename: "/your-repo-name",  // Remove or comment out this line
+    // ... other options
+  })
+  ```
+
+3. Deploy to GitHub Pages:
+   - Enable GitHub Pages in your repository settings
+   - Set the build and deployment source to branch (not GitHub Actions)
+   - Select the branch you want to deploy (typically `gh-pages` or `main`)
+   - For custom domain setup, follow the [GitHub Pages custom domain configuration guide](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site)
+
+## Additional Resources
+
+- [Orderly JS SDK Documentation](https://github.com/OrderlyNetwork/js-sdk)
+- [Orderly Network Documentation](https://orderly.network/docs/sdks)
+- [Storybook Theme Editor](https://storybook.orderly.network/?path=/story/package-trading-tradingpage--page)
 

README.md

@@ -7,9 +7,9 @@ const OrderlyProvider: FC<{ children: ReactNode }> = (props) => {
   return (
     <WalletConnectorProvider>
       <OrderlyAppProvider
-        brokerId="orderly"
-        brokerName="Orderly"
-        networkId="testnet"
+        brokerId={import.meta.env.VITE_ORDERLY_BROKER_ID}
+        brokerName={import.meta.env.VITE_ORDERLY_BROKER_NAME}
+        networkId={import.meta.env.VITE_ORDERLY_NETWORK_ID}
         appIcons={config.orderlyAppProvider.appIcons}
       >
         {props.children}

app/components/orderlyProvider/index.tsx

@@ -36,12 +36,15 @@ const config: OrderlyConfig = {
             description: "Trade with Orderly to earn ORDER",
             icon: <OrderlyIcon size={14} />,
             activeIcon: <OrderlyActiveIcon size={14} />,
+            target: "_blank",
           },
 
           {
             name: "Staking",
             href: "https://app.orderly.network/staking",
             description: "Stake ORDER/esORDER to acquire VALOR",
+            icon: <OrderlyIcon size={14} />,
+            activeIcon: <OrderlyActiveIcon size={14} />,
             target: "_blank",
           },
         ],

app/utils/config.tsx

@@ -17,6 +17,7 @@ export default defineConfig(() => {
     },
     plugins: [
       remix({
+        basename: "/broker-template",
         ssr: false,
         future: {
           v3_fetcherPersist: true,