How ngwash-zabe/smartraderspro works
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: index.tsx Layout · root-store.ts Stores · App.tsx App · bot-builder.tsx Bot builder
Components 21
App Shell
Entry point, auth gating, and shared layout wrappers.
- main.tsx · Client entry that mounts the app and initializes the front-end runtime.
src/main.tsx - App · Top-level application composition and route/application wiring.
src/app/App.tsx - Auth wrapper · Handles authentication and session-dependent rendering.
src/app/AuthWrapper.tsx - Core stores · Provides the root store context to the React tree.
src/app/CoreStoreProvider.tsx - 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 · Primary visual strategy-building workspace and surrounding controls.
src/pages/bot-builder/bot-builder.tsx - Dashboard · Saved bots, announcements, and run/stop operations.
src/pages/dashboard/dashboard.tsx - Chart · Chart-centric trading views and modal interactions.
src/pages/chart/chart.tsx - Tutorials · Onboarding, guides, FAQs, and tour content.
src/pages/tutorials/tutorials.tsx - Callback · OAuth or session callback handling page.
src/pages/callback/callback-page.tsx - Endpoint · 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 · Embedded Blockly and trade-engine domain model for executable strategies.
src/external/bot-skeleton/index.js - XML templates · Strategy templates and example workspace definitions.
src/xml/martingale.xml
Shared Platform
Reusable UI, stores, hooks, utils, and services used across the app.
- Stores · Centralized application and domain state for UI and trading flows.
src/stores/root-store.ts - Shared UI · Reusable dialogs, inputs, sliders, tabs, loaders, and mobile wrappers.
src/components/shared_ui - Utilities · Storage, auth, responsive, routing, localization, and download helpers.
src/utils/index.ts - Hooks · Cross-cutting hooks for auth, network, modal, theme, and visibility behavior.
src/hooks/useStore.tsx - Services · 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 · RudderStack event tracking for feature areas and common events.
src/analytics/rudderstack-common-events.ts - External config · Feature flags, remote config, support chat, and observability integrations.
src/utils/remote_config.json - Deployment · Build, deploy, translation sync, and staging notifications workflows.
.github/workflows/build-and-deploy-production.yml
Connections 29
- 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.