> For the complete documentation index, see [llms.txt](https://whitepaper.after-bell.uk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://whitepaper.after-bell.uk/technical-architecture/frontend.md).

# Frontend

Explains the user-facing layer for market discovery, order signing, and positions.

### Role in the protocol

The frontend is AFTERBELL’s user-facing control surface. It is where users select a market, choose Yes or No, and sign trading intent. It is part of the architecture, not a disconnected website.

The identified frontend stack is React, viem, and wagmi. React provides the interface. viem and wagmi support interaction with the EVM-compatible Robinhood Chain.

### Market interaction

The frontend supports the source-defined user flow:

```
Market discovery → Yes / No selection → order signing → off-chain CLOB
```

It prepares the order and obtains the user’s signature. The source identifies EIP-712 signed orders, but does not define wallet providers, exact signature prompts, typed-data fields, or specific interface controls.

### Relationship to the CLOB

The frontend sends signed order intent to the off-chain CLOB. It does not write every order directly to chain.

```
Frontend → signed order → Node.js / WebSocket CLOB → matching
```

This separation lets the matching layer manage order discovery while the chain remains the settlement boundary. The frontend does not itself match orders, settle USDG, or resolve market outcomes.

### Relationship to protocol state

On-chain interaction matters when settlement, outcome positions, and redemption occur. The frontend can represent a user’s Yes or No position, market state, and resolution state. Those views depend on the underlying settlement and resolution architecture.

ConditionalTokens represents ERC-1155 outcome positions. CTFExchange settles CLOB activity. OracleResolver uses Chainlink as a primary source and the Robinhood REST API as a cross-check during resolution. The frontend sits above these components as the interaction layer.

### Technical boundary

| Component       | Architectural responsibility                  |
| --------------- | --------------------------------------------- |
| Frontend        | User interaction and signed order preparation |
| CLOB            | Off-chain order matching                      |
| Smart contracts | Settlement and protocol state                 |
| Oracle system   | Resolution data and verification              |

The frontend is off-chain. It should not be confused with on-chain execution or an oracle. Its chain interaction uses the EVM-compatible network, but the source does not specify RPC infrastructure or deployment architecture.

### Status

AFTERBELL is under development. The frontend architecture is planned rather than production-proven. Smart contracts are not yet audited, and an audit is planned before mainnet.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://whitepaper.after-bell.uk/technical-architecture/frontend.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.