Skip to content

[email protected]

200OK

Centralised exchange interface prototype

A full exchange front end on mocked services: trading, markets, funding and accounts, ready to bind to a real exchange API.

Kind
Front end for a centralised exchange
Our part
An interface prototype on mocked services, not a live exchange.

404 Not Found

What was missing

An operator planning a centralised exchange needed the front end first: every surface a trader expects from a major exchange, ready to bind to whichever backend it licenses. What was missing was an interface that could be built, reviewed and changed before any exchange API existed, then switched to the real one without rewriting a screen. This is an interface prototype on mocked services, not a live exchange.

Constraints

What the system had to hold to, before a line was written.

Scope
Front end only. Accounts, orders and custody would come from a licensed exchange API.
Precision
Prices to 1e-8, with decimal-safe arithmetic throughout.
Languages
Four locales: English, Simplified Chinese, Traditional Chinese and Japanese.
Phones
Phone parity, checked at 1440 pixels and at 430, 375 and 320.

The system

Pages for spot and futures trading, markets, coin detail, P2P, earn, loans, launchpad, convert, deposit, withdraw, proof of reserves, portfolio and account settings sit on 50 components. Each data domain (order book, orders, futures, markets, P2P, reserves) has one composable, and that composable is the only file that imports its service. Today those services are 17 mocks whose method signatures match the intended real ones. Charts come from established charting libraries. Wallet connection appears on the deposit screen and nowhere else; sign-in is email and password. Going live is an import change at each swap point, with no component edits.

Figure 1Drawn from the build
stringsdepositcomposedrawuseimporttodayonce licensed01Localesfour languages02Pages36 routes03Wallet connectordeposit screen only04Componentsterminal, wallet, account05Chartscharting libraries06Composablesone per data domain07Swap pointone import08Mock services17, in use today09laterExchange APIREST and WebSocket

Pages → components → composables → swap point → mock service today, exchange REST and WebSocket once an API is licensed.

  • Built by us
  • Data held
  • Third party
  • Offline or out of band
Read the drawing as text

Parts

  1. 01Locales: four languages
  2. 02Pages: 36 routes
  3. 03Wallet connector: deposit screen only
  4. 04Components: terminal, wallet, account
  5. 05Charts: charting libraries
  6. 06Composables: one per data domain
  7. 07Swap point: one import
  8. 08Mock services: 17, in use today
  9. 09Exchange API: REST and WebSocket

Flows

  • Locales to Pages: strings
  • Pages to Wallet connector: deposit
  • Pages to Components: compose
  • Components to Charts: draw
  • Components to Composables: use
  • Composables to Swap point: import
  • Swap point to Mock services: today
  • Swap point to Exchange API: once licensed (alternate or out of band)

The screen

Most of this system sits behind a login, so its key screen is redrawn here as a schematic. Bars stand in for every name and figure.

BuySell
The spot trading screen as a schematic: chart, order book and order form.Schematic, no real data

Decisions

The engineering calls that shaped the build, and why each one was made.

  1. One swap point per data source.

    Each composable holds the only import of its service, so moving to a real API changes one line per domain and no components. The pattern came from a production app this prototype grew out of.

  2. Tick sizes from the symbol's own finest tick.

    Order-book grouping steps at 1×, 2×, 5×, 10× and 20× that tick, so it stays meaningful at any price scale.

  3. Exchange sign-in, not wallet first.

    Wallet connection lives on the deposit screen only. A known leak, where a browser extension announced itself on the wrong chain, is closed with explicit exclusions.

  4. Data owns the colour.

    Layered near-black surfaces, an accent kept for brand moments, green and red reserved for data, and tabular numerals in a mono face.

200OK

Shipped

A complete exchange-shaped interface running on mock data: 36 routes covering trading, markets, funding, earning and account security, in four languages, checked down to a 320-pixel phone. It has no backend and no automated tests yet. It is the interface an exchange API plugs into.

Counts of the build, taken from its code. Counted on 3 November 2026. No figure here is a business result.
FigureWhat it counts
36routes
50components
30composables, one per data domain or screen concern
17mock services, each swappable for a real one
4locales

Built with

  • Nuxt 4
  • Vue 3
  • Tailwind CSS
  • DaisyUI
  • Nuxt i18n
  • decimal.js
  • KlineCharts
  • Reown AppKit (deposit only)