Skip to content

Commit 0e862be

Browse files
melvincarvalhomelvincarvalho
committed
markets/: rebuild the UI to a commercial standard (round 1-2)
Three harsh design reviews of the live product scored the old UI 4/10 visual, 4/10 UX, 5/10 accessibility. The two findings that mattered were not cosmetic: A WINNING settled bet was displayed as a red loss. The position card marked to live prices regardless of lifecycle, so a user who had won 48.95 was told in red that they were down 15.22, with all three outcomes still rendered as selectable buttons on a decided event. Settled markets now show a receipt: winner ticked, losing legs struck through, risked -> returned -> net from the settlement record rather than a mark-to-market on prices that no longer mean anything. Placing a bet had NO confirmation while cashing out had one -- the irreversible action was the unguarded one, and outcome 0 was preselected, so a stray tap bet on a team the user never chose. It is now Review bet -> a slip stating stake, returns and max cost -> Confirm, with a 15s quote expiry. Also closed: the ticket would quote odds below 1.00 -- a guaranteed loss -- in neutral grey, and Max stake was one tap from it; there was no client-side balance check, so you committed and got back 'need 600.000000, have 503.945114'; a bad market link left another market's live Place bet button rendered under it; and selecting an outcome destroyed keyboard focus and re-fetched the whole market to move one highlight. Design: content sat in a 38.8%-wide column with four different left edges within 17px; Returns and Odds were the same size 8px apart and read as one number; the Draw swatch was white-on-grey at 2.68:1 (grey also reads as disabled); the chart used preserveAspectRatio=none so its stroke weight changed as the line turned, then in the rebuild letterboxed 294px of content into a 730px box; and dark mode inverted the palette without inverting the label ink, reproducing the same contrast failure. There is now a token system -- 4px spacing, a type scale, an outcome palette with no grey and no brand green in it, --on-outcome ink that flips with the theme -- plus a two-column layout with a sticky ticket rail, real status chips, an oracle chip instead of a raw WebID, and a chart that fills its box with a fitted domain and a time axis. 75 plugin tests green.
1 parent 60d086f commit 0e862be

4 files changed

Lines changed: 3133 additions & 480 deletions

File tree

‎markets/plugin.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -689,13 +689,18 @@ export async function activate(api) {
689689
});
690690
}
691691
const settlements = (state.settlements[agent] || []).slice(-25).reverse()
692-
.map((s) => ({
693-
...s,
694-
payout: s.payout / MICRO,
695-
cost: (s.cost || 0) / MICRO,
696-
net: (s.payout - (s.cost || 0)) / MICRO,
697-
at: new Date(s.at).toISOString(),
698-
}));
692+
.map((s) => {
693+
// The receipt records an outcome INDEX; a bettor needs the name.
694+
const mk = state.markets[s.market];
695+
return {
696+
...s,
697+
outcomeLabel: mk && s.outcome != null ? mk.outcomes[s.outcome] : null,
698+
payout: s.payout / MICRO,
699+
cost: (s.cost || 0) / MICRO,
700+
net: (s.payout - (s.cost || 0)) / MICRO,
701+
at: new Date(s.at).toISOString(),
702+
};
703+
});
699704
return reply.send({
700705
agent,
701706
balance: balanceOf(agent) / MICRO,

0 commit comments

Comments
 (0)