# ngwash-zabe/smartraderspro architecture

> Architecture diagram of the GitHub repository ngwash-zabe/smartraderspro, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-22). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ngwash-zabe/smartraderspro
- Repository: https://github.com/ngwash-zabe/smartraderspro

## Overview

1. This is a client-side React application for Deriv’s bot-building and trading experience. It is built with TypeScript, JSX/TSX, SCSS, and an rsbuild-based toolchain, and it ships as a static front-end rather than a server-rendered app.

2. The top-level app shell is assembled in `src/main.tsx`, `src/app`, and `src/components/layout`. That shell handles auth gating, global loading states, error boundaries, responsive layout, and the shared header/footer/navigation that surrounds the feature pages.

3. The main feature areas are page-driven:
   - `src/pages/bot-builder` for visual bot creation
   - `src/pages/dashboard` for saved bots, announcements, and run/stop actions
   - `src/pages/chart` for chart-centric trading views
   - `src/pages/tutorials` for onboarding and help content
   - `src/pages/callback` and `src/pages/endpoint` for auth/config flows
   These pages are the primary route-level boundaries for the architecture.

4. State management is centralized in `src/stores`, with a `root-store` and many domain stores such as `blockly-store`, `dashboard-store`, `chart-store`, `run-panel-store`, `transactions-store`, `quick-strategy-store`, `load-modal-store`, and `ui-store`. The stores are the bridge between API/network events and the React component tree.

5. The most specialized subsystem is the bot builder. `src/pages/bot-builder`, `src/components/flyout`, `src/components/shared_ui/contract-card`, `src/components/run-panel`, `src/components/trade-animation`, and `src/external/bot-skeleton` work together to provide a Blockly-like visual editor, toolbox/toolbar, workspace, and execution controls. XML bot templates in `src/xml` and examples under `src/external/bot-skeleton/examples` show that strategy definitions are a first-class asset in the product.

6. The bot engine is not just UI; it has a substantial embedded domain model in `src/external/bot-skeleton/services` and `src/external/bot-skeleton/scratch`. This includes API adapters, trade-engine logic, Blockly block definitions, hooks, and utility code for turning the visual workspace into executable strategy behavior.

7. Live trading and market interaction flow through external Deriv services, especially WebSocket/API helpers in `src/components/shared/services`, `src/external/bot-skeleton/services/api`, and related store/action layers. The app consumes market data, contract state, balances, ticks, and server time, then renders them in the chart, run panel, summary cards, transactions, and contract overlays.

8. The dashboard subsystem provides bot management and operational UX. It includes saved workspace lists, recent workspaces, save/delete dialogs, announcement flows, stop-bot modals, and quick access to bot execution. This area connects persisted workspace data, local storage, and user session state.

9. There is a substantial shared component and utility layer. `src/components/shared_ui` is a reusable design system for dialogs, inputs, sliders, tabs, dropdowns, toasts, loaders, and mobile wrappers. `src/components/shared/utils`, `src/utils`, and `src/hooks` host cross-cutting concerns like storage, auth, responsive behavior, modal management, network status, localization, and download/export helpers.

10. The app integrates with several external product services, but only where they affect UX: analytics/telemetry via RudderStack, GTM, Hotjar, Datadog, and TrackJS; feature/config delivery via GrowthBook and remote config; support via Intercom/live chat; and auth/account flows via OAuth and Deriv account-related hooks. These are non-core services that sit alongside the main trading/bot domain.

11. Tutorials and onboarding are treated as a separate content subsystem. `src/pages/tutorials`, `src/utils/help-content`, and the DBot tour components provide guided walkthroughs, block help text, and strategy documentation that map directly to the bot-builder and quick-strategy features.

12. Static assets are important to the product experience: `public/assets/media` contains audio cues and videos, while `public/assets/images` and icons support the editor and notifications. This repository also includes workflow automation for production/staging deployment to Cloudflare Pages via GitHub Actions, plus translation synchronization and Slack notifications for staging builds.

Main entry points: [`src/components/layout/index.tsx`](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/components/layout/index.tsx) (Layout), [`src/stores/root-store.ts`](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/stores/root-store.ts) (Stores), [`src/app/App.tsx`](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/app/App.tsx) (App), [`src/pages/bot-builder/bot-builder.tsx`](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/bot-builder/bot-builder.tsx) (Bot builder)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App Shell"]
  node_main(("main.tsx<br/>entry bootstrap<br/>[main.tsx]"))
  node_app["App<br/>[App.tsx]"]
  node_auth["Auth wrapper<br/>gating wrapper<br/>[AuthWrapper.tsx]"]
  node_corestore["Core stores<br/>store provider"]
  node_layout["Layout<br/>[index.tsx]"]
end

subgraph group_features["Feature Pages"]
  node_botbuilder["Bot builder<br/>visual editor page<br/>[bot-builder.tsx]"]
  node_dashboard["Dashboard<br/>management page<br/>[dashboard.tsx]"]
  node_chart["Chart<br/>trading page<br/>[chart.tsx]"]
  node_tutorials["Tutorials<br/>help page<br/>[tutorials.tsx]"]
  node_callback(("Callback<br/>auth flow<br/>[callback-page.tsx]"))
  node_endpoint(("Endpoint<br/>config flow<br/>[index.tsx]"))
end

subgraph group_engine["Bot Engine"]
  node_skeleton["Bot skeleton<br/>embedded engine<br/>[index.js]"]
  node_xml["XML templates<br/>strategy assets<br/>[martingale.xml]"]
end

subgraph group_shared["Shared Platform"]
  node_stores[("Stores<br/>state layer<br/>[root-store.ts]")]
  node_uiui["Shared UI<br/>design system"]
  node_sharedutils["Utilities<br/>cross-cutting helpers<br/>[index.ts]"]
  node_hooks["Hooks<br/>[useStore.tsx]"]
  node_services["Services<br/>ws/api helpers<br/>[index.ts]"]
end

subgraph group_ops["External Services"]
  node_analytics["Analytics<br/>telemetry"]
  node_externalcfg["External config<br/>product integrations<br/>[remote_config.json]"]
  node_deploy["Deployment<br/>ci/cd"]
end

node_main -->|"mounts"| node_app
node_app -->|"wraps"| node_auth
node_app -->|"provides"| node_corestore
node_app -->|"renders"| node_layout
node_layout -->|"hosts"| node_botbuilder
node_layout -->|"hosts"| node_dashboard
node_layout -->|"hosts"| node_chart
node_layout -->|"hosts"| node_tutorials
node_layout -->|"routes"| node_callback
node_layout -->|"routes"| node_endpoint
node_botbuilder -->|"binds"| node_stores
node_dashboard -->|"binds"| node_stores
node_chart -->|"binds"| node_stores
node_tutorials -->|"binds"| node_stores
node_stores -->|"uses"| node_services
node_stores -->|"uses"| node_sharedutils
node_hooks -->|"reads"| node_stores
node_botbuilder -->|"drives"| node_skeleton
node_skeleton -->|"loads"| node_xml
node_skeleton -->|"trades via"| node_services
node_botbuilder -->|"uses"| node_uiui
node_dashboard -->|"uses"| node_uiui
node_chart -->|"uses"| node_uiui
node_tutorials -->|"uses"| node_uiui
node_analytics -->|"tracks"| node_botbuilder
node_analytics -->|"tracks"| node_dashboard
node_analytics -->|"tracks"| node_tutorials
node_externalcfg -->|"configures"| node_app
node_deploy -.->|"ships"| node_main

click node_main "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/main.tsx"
click node_app "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/app/App.tsx"
click node_auth "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/app/AuthWrapper.tsx"
click node_corestore "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/app/CoreStoreProvider.tsx"
click node_layout "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/components/layout/index.tsx"
click node_botbuilder "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/bot-builder/bot-builder.tsx"
click node_dashboard "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/dashboard/dashboard.tsx"
click node_chart "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/chart/chart.tsx"
click node_tutorials "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/tutorials/tutorials.tsx"
click node_callback "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/callback/callback-page.tsx"
click node_endpoint "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/endpoint/index.tsx"
click node_stores "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/stores/root-store.ts"
click node_uiui "https://github.com/ngwash-zabe/smartraderspro/tree/main/src/components/shared_ui"
click node_sharedutils "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/utils/index.ts"
click node_hooks "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/hooks/useStore.tsx"
click node_services "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/components/shared/services/index.ts"
click node_skeleton "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/external/bot-skeleton/index.js"
click node_xml "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/xml/martingale.xml"
click node_analytics "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/analytics/rudderstack-common-events.ts"
click node_externalcfg "https://github.com/ngwash-zabe/smartraderspro/blob/main/src/utils/remote_config.json"
click node_deploy "https://github.com/ngwash-zabe/smartraderspro/blob/main/.github/workflows/build-and-deploy-production.yml"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_app,node_auth,node_corestore,node_layout toneBlue
class node_botbuilder,node_dashboard,node_chart,node_tutorials,node_callback,node_endpoint toneAmber
class node_skeleton,node_xml toneMint
class node_stores,node_uiui,node_sharedutils,node_hooks,node_services toneRose
class node_analytics,node_externalcfg,node_deploy toneIndigo
```

## Components

### App Shell

Entry point, auth gating, and shared layout wrappers.

- [main.tsx](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/main.tsx): entry bootstrap · Client entry that mounts the app and initializes the front-end runtime. · `src/main.tsx`
- [App](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/app/App.tsx): app composition · Top-level application composition and route/application wiring. · `src/app/App.tsx`
- [Auth wrapper](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/app/AuthWrapper.tsx): gating wrapper · Handles authentication and session-dependent rendering. · `src/app/AuthWrapper.tsx`
- [Core stores](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/app/CoreStoreProvider.tsx): store provider · Provides the root store context to the React tree. · `src/app/CoreStoreProvider.tsx`
- [Layout](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/components/layout/index.tsx): shell layout · Shared header, footer, body, and responsive navigation frame. · `src/components/layout/index.tsx`

### Feature Pages

Route-level product areas for bot building, trading, dashboards, tutorials, and auth callbacks.

- [Bot builder](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/bot-builder/bot-builder.tsx): visual editor page · Primary visual strategy-building workspace and surrounding controls. · `src/pages/bot-builder/bot-builder.tsx`
- [Dashboard](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/dashboard/dashboard.tsx): management page · Saved bots, announcements, and run/stop operations. · `src/pages/dashboard/dashboard.tsx`
- [Chart](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/chart/chart.tsx): trading page · Chart-centric trading views and modal interactions. · `src/pages/chart/chart.tsx`
- [Tutorials](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/tutorials/tutorials.tsx): help page · Onboarding, guides, FAQs, and tour content. · `src/pages/tutorials/tutorials.tsx`
- [Callback](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/callback/callback-page.tsx): auth flow · OAuth or session callback handling page. · `src/pages/callback/callback-page.tsx`
- [Endpoint](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/pages/endpoint/index.tsx): config flow · Endpoint and environment configuration page. · `src/pages/endpoint/index.tsx`

### Bot Engine

Embedded bot-builder domain model, Blockly workspace, templates, and execution services.

- [Bot skeleton](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/external/bot-skeleton/index.js): embedded engine · Embedded Blockly and trade-engine domain model for executable strategies. · `src/external/bot-skeleton/index.js`
- [XML templates](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/xml/martingale.xml): strategy assets · Strategy templates and example workspace definitions. · `src/xml/martingale.xml`

### Shared Platform

Reusable UI, stores, hooks, utils, and services used across the app.

- [Stores](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/stores/root-store.ts): state layer · Centralized application and domain state for UI and trading flows. · `src/stores/root-store.ts`
- [Shared UI](https://github.com/ngwash-zabe/smartraderspro/tree/main/src/components/shared_ui): design system · Reusable dialogs, inputs, sliders, tabs, loaders, and mobile wrappers. · `src/components/shared_ui`
- [Utilities](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/utils/index.ts): cross-cutting helpers · Storage, auth, responsive, routing, localization, and download helpers. · `src/utils/index.ts`
- [Hooks](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/hooks/useStore.tsx): react hooks · Cross-cutting hooks for auth, network, modal, theme, and visibility behavior. · `src/hooks/useStore.tsx`
- [Services](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/components/shared/services/index.ts): ws/api helpers · Shared network helpers for websocket methods, trading times, and metrics. · `src/components/shared/services/index.ts`

### External Services

Analytics, config, support, and deployment integrations.

- [Analytics](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/analytics/rudderstack-common-events.ts): telemetry · RudderStack event tracking for feature areas and common events. · `src/analytics/rudderstack-common-events.ts`
- [External config](https://github.com/ngwash-zabe/smartraderspro/blob/main/src/utils/remote_config.json): product integrations · Feature flags, remote config, support chat, and observability integrations. · `src/utils/remote_config.json`
- [Deployment](https://github.com/ngwash-zabe/smartraderspro/blob/main/.github/workflows/build-and-deploy-production.yml): ci/cd · Build, deploy, translation sync, and staging notifications workflows. · `.github/workflows/build-and-deploy-production.yml`

## Connections

- main.tsx → App: mounts · Bootstraps the application shell.
- App → Auth wrapper: wraps · Applies auth/session gating around the app.
- App → Core stores: provides · Injects global stores into the React tree.
- App → Layout: renders · Composes the shared shell around route content.
- Layout → Bot builder: hosts · Shell renders the main editor page.
- Layout → Dashboard: hosts · Shell renders bot management UX.
- Layout → Chart: hosts · Shell renders trading chart views.
- Layout → Tutorials: hosts · Shell renders help and onboarding content.
- Layout → Callback: routes · Shell includes auth callback flow.
- Layout → Endpoint: routes · Shell includes endpoint/config flow.
- Bot builder → Stores: binds · Editor state is coordinated through domain stores.
- Dashboard → Stores: binds · Dashboard state is coordinated through domain stores.
- Chart → Stores: binds · Chart state is coordinated through domain stores.
- Tutorials → Stores: binds · Tutorial flows consume shared store state.
- Stores → Services: uses · Stores bridge UI events to API and websocket helpers.
- Stores → Utilities: uses · Stores rely on shared persistence and helper logic.
- Hooks → Stores: reads · Hooks connect components to store state.
- Bot builder → Bot skeleton: drives · Visual editor is backed by the embedded bot engine.
- Bot skeleton → XML templates: loads · Engine consumes strategy templates and examples.
- Bot skeleton → Services: trades via · Embedded engine talks to API/websocket helpers.
- Bot builder → Shared UI: uses · Editor uses shared dialogs, controls, and wrappers.
- Dashboard → Shared UI: uses · Dashboard uses shared UI primitives.
- Chart → Shared UI: uses · Chart views use shared UI primitives.
- Tutorials → Shared UI: uses · Tutorial pages use shared UI primitives.
- Analytics → Bot builder: tracks · Feature telemetry covers bot-builder interactions.
- Analytics → Dashboard: tracks · Feature telemetry covers dashboard interactions.
- Analytics → Tutorials: tracks · Feature telemetry covers onboarding and help flows.
- External config → App: configures · Remote config and support integrations affect shell behavior.
- Deployment → main.tsx: ships · CI/CD builds and deploys the static front-end.