Components
The pieces our templates are built from. Every card below is the real component running in your browser on live Mithril data, not a picture of one. Copy the import and it works the same way in your build.
1MarketsModule
Live crypto markets, keyless, with an action on every row. Price, 24h volume and the change since yesterday, and Details opens funding, oracle and open interest inline.
2MarketsModule
Commodities and equity perps are the same component, not a second one. One /api/public/pacifica call returns gold and silver alongside NVDA, TSLA, SKHYNIX and MU, so the only difference is the assetClass you pass.
3StocksModule
715 tokenised stocks from /api/public/stocks, searchable by ticker or company. Details shows what each one tracks and the networks it trades on. Ticker chip first, the issuer's own logo revealed only once it has actually loaded.
4FxCandleChart
Candles, moving averages and Bollinger bands, drawn from 300 real one-minute EUR candles with no key. CandleChart does the drawing and always could; what it never had was a source it could reach on its own.
5PieChart
Share of a whole. It prints how many values it dropped rather than discarding them silently, and “no data” and “every value is zero” are different states rather than both being a blank circle. Past six slices becomes Other. Shown here on real 24h volume.
6QuickActions
One-tap actions that answer on the same screen. Each button runs a real lookup against our own feed and prints the result underneath. The last one is not built yet and says so, which is the sanctioned way to ship an unfinished action.
Quick actions · BTC
7StrategyPanel
A recovery ladder, and what it actually costs. Change the first stake, the multiplier or the money available and every row recomputes, including the step where the run ends. It leads with the bill rather than the promise.
Recovery ladder
Every number below is computed from these settings.
A doubling ladder does not lower risk. It trades many small losses for one rare large one, and the run ends at the first step you cannot fund, which here is step 7. Placing these orders is not wired up in this build. It needs an app key, which is not available here.
8WalletConnectPanel
Connect a browser wallet with no dependencies at all, and read the address, chain and balance. Nothing is signed and nothing moves. For builds that already use wagmi, EvmWalletConnect gives you RainbowKit's modal and chain switching instead.
Wallet
Creating your agent wallet and funding it from this wallet or by card is the next step, and it is what removes the last deposit link. It needs a credential that is not provisioned yet, so it is not shown here as a button that cannot work.
9CryptoIcon
Token logo by symbol, with a lettered chip when no art exists.
10SignalGauge
A signed score from -1 to 1 as a needle, with the verdict and the vote breakdown under it.
11YieldModule
50 real staking and lending opportunities from /api/public/yield, sorted by rate, with an action on every row. A pool you cannot enter is marked Closed rather than quietly listed, and Details says the rate moves rather than implying it is fixed.
12StatTile
Label, value, and an honest empty. A missing value renders as a dash, never as 0, because “we could not load this” and “this is zero” are different facts and printing the first as the second is how a dashboard lies quietly.
13EmptyState
Says why it is empty. The reason is a required prop, so there is no way to render this without saying why there is nothing to show, and if there is something the reader can do it sits right here.
14ErrorPanel
What went wrong and what to do about it. The fix is a required prop and the raw code is folded away, because INSUFFICIENT_MARGIN tells a person nothing and an error with no fix is a dead end.
15LoadingSkeleton
Shaped like the thing that is coming, so the layout does not jump when data lands. A spinner says wait; this says wait, and here is what for.
16TrendBadge
A direction and how sure we are, with no fake precision. The same percentage from three points and three thousand look identical and mean different things, so confidence is part of the badge. Nothing to compare against reads “no basis”, never 0%.
17NumberCell
A number that lines up and never invents precision. Tabular figures so a live column stops jittering as digits change, and a missing value is a dash rather than a zero, because a zero is a claim.
18Sparkline
A series small enough to live in a table cell. No axes and no labels, because it answers one question and anything else steals the room it needs. Under two points it shows a dash rather than a flat line that reads as no movement.
19UsdSizeInput
USD is what you type and the asset amount is derived underneath, never a second field to edit. This is where the money mistakes happen: people think in dollars and order books think in coins. With no price the derived line says so rather than printing 0, because a zero here becomes a real order.
20VenuePicker
The venues, and an honest word about the two that cannot do the agent flow. Paradex and Extended stay listed and selectable, and the reason prints the moment they are chosen rather than two screens later. Hiding them would be a different kind of lie.
21TimeRangePicker
Only the intervals our feeds actually serve. Offering 1s because it looks complete produces an empty chart and a user who thinks the product is broken; anything unsupported is disabled with the reason on hover rather than quietly missing.
22CopyField
One tap to copy a key or an address, masked until asked. It has one hard rule that must survive every future edit: it never logs, sends or stores the value. A key in a console is a key in a screen recording.
mt_app…00000xEXAM…dEaD23WhereToNext
Where a person goes when there is nothing left to wait for. It renders nothing at all when there is nothing worth offering, because a titled empty box takes up the space where an answer would go.
24OrderTicket
Prices a real order end to end, size, fee, total, and disables the confirm with the reason in plain words on screen rather than in a tooltip. It is UsdSizeInput, VenuePicker, NumberCell and ErrorPanel assembled, which is why the primitives were built first. Nothing here sends anything.
HYPE
Mark $80.28Placing orders is not wired up in this build. It needs an app key, which is not available here.
25ConnectPanel
The three ways in, each honest about what it can do today. The agent option is shown and explained with its button disabled and the reason on screen, because a dead option is worse than a named absence, and it names the venues that have no agent flow at all rather than letting someone pick one and find out later. It never collects a key.
How do you want to connect
All three are listed, including the one that is not ready. A dead option is worse than a named absence.
Connect a browser wallet. You keep the keys and approve every action yourself. Nothing is signed by us.
We create a wallet the app can trade from within limits you set, so you are not approving every order by hand.
Creating an agent wallet needs a credential that is not available yet. The other two work today.
Paradex and Extended have no agent flow at all, so they would need your own keys either way.
Use an account you already have. The build asks for it in its own settings, never here.
26HedgePanel
Two legs sized as one thing, because a hedge only means anything as a pair. It leads with what the pair leaves you exposed to rather than showing two green ticks and letting you do the subtraction, and it says plainly that neutral on price is not neutral on funding, counterparty or liquidation.
Hedge HYPE
Mark $80.28Opening both legs is not wired up in this build. It needs an app key, which is not available here.
Even when the legs match, this is not risk-free. Funding still accrues on both sides, each venue holds your money separately, and either leg can be closed out on its own, which leaves the other one exposed.
27SwapPanel
A quote, the route it would take, and a line drawn on screen marking where our estimate ends and your wallet's signature begins. The figure at that line is the minimum received rather than the quote, because that is the number a person is actually agreeing to. An unknown route says so instead of drawing a confident straight line.
Swap USDC for ETH
Everything above is our estimate and changes nothing. Pressing the button asks your wallet to sign a real transfer, which we cannot reverse.
Signing is not wired up in this build. It needs a connected wallet, which is not available here.
28PositionsTable
What is open, what it is worth now, and a way out on every row rather than a trip to the venue. Unrealised is computed from entry, mark and size rather than trusted from a feed field, because venues disagree about what theirs includes. A position with no mark shows a dash and says the price is missing, since rendering 0 would claim it had not moved.
Open positions
3 openNo current price for MON, so we cannot say what this is worth. It has not necessarily stayed flat.
Closing is not wired up in this build. It needs an app key, which is not available here.
29FundingTable
The rate, what it is per year, and which side pays in words rather than a plus sign, because sign conventions differ between venues. A raw 0.0125% means nothing until you know it is charged hourly; the annualised figure is what decides whether a carry is worth holding.
30SpreadScanner
Where the traded price has drifted from the index, ranked by basis points. Honest about what it is: we have one public venue, so this is mark against oracle on Pacifica rather than the cross-venue scan the brief asked for. Labelled as what it is instead of dressed up as arbitrage.
31AssetSearch
One box across perps and tokenised stocks at once, because a person hunting TSLA in the markets-only search concludes we do not have it. No results names which feeds it asked, so you can tell “we do not list it” from “we could not check”.
32VenueHealth
Is the data actually arriving, and how old is it. Unknown is a real state and it is not green: before the first response we do not know the venue is up, and a green tick by default is the failure this exists to remove. Re-probes every 30 seconds.
33LeverageSlider
Leverage, and how far the price can move before you are gone. The distance leads and the multiplier follows, because 50x tells you what you can buy and 2% tells you what it costs, and 2% is a move most assets on our own feed have made this week.
34FeeBreakdown
What a trade actually costs, itemised, with the total being the sum of exactly what is shown so a reader can check it by hand. A fee we know is zero prints 0; one we cannot compute prints a dash and says the real cost is higher.
1 line could not be priced, so the real cost is higher than this total.
35TimeAgo
How old a number is, in words, and loud once it is stale. A price from four minutes ago rendered identically to one from four seconds ago is how a person trades on a figure that has already moved. Staleness is not styling here, it is the point.
36FundingCountdown
How long until the next funding charge. Funding lands at a moment rather than continuously, so “in 4 minutes” changes whether a position is worth opening now. A timestamp we cannot read prints unknown, never 00:00, because a zeroed clock reads as charging now.
37OrderBook
Bids, asks, the spread in both absolute and basis points, and depth bars, now on a real book. Each level shows how many orders sit behind it, because nine BTC from one account is a wall that vanishes in one cancel and nine BTC from forty is a floor, and every book renderer draws them identically.
38DepthChart
Cumulative size either side of the mid, on a live book. Cumulative is the right shape precisely because it answers what a fill would cost rather than where the best price sits.
39TopMovers
What actually moved, both directions, with the window named. A movers list showing only gainers is a marketing surface; the fall is the half that matters when you hold it. Against yesterday's close, and it says so, because “up 6%” over an unstated period is not a fact.
40OpenInterestTable
Volume is what changed hands; open interest is what is still held. A market heavy on one and thin on the other is being traded through rather than owned, and only the pair tells you which. Sortable, built on DataTable rather than a fourth hand-rolled table.
41CompareMarkets
Two markets on the same rows at the same moment, because comparing by scrolling between cards is how people talk themselves into a trade. Where either side is missing, both show a dash: half a comparison is worse than none, since the eye completes it.
42PositionSizer
Starts from what you are prepared to lose rather than from a size, and derives the position from your stop. A stop of zero is refused rather than divided by, because the implied position is infinite and rendering that as a big number tells someone to bet everything.
43RiskSummary
How much room is left before liquidation, in words. Any missing input makes it unknown rather than zero and rather than green, and no bar is drawn at all: a health bar that reads full because a field was absent is the most dangerous thing on a trading screen.
We are missing at least one of equity, used collateral or the maintenance minimum, so we cannot say how much room is left. This is not the same as having plenty.
44OrderHistory
Everything, not only the fills. Cancelled and rejected rows are the ones a person is actually hunting for, so they carry their reason, and where the venue gave none it says that rather than leaving the cell blank, because a rejection without a reason is a bug report we never receive.
Order history
Everything, not only the fills. A missing order is usually a cancelled one.
| Order | Price | What happened | When↓ |
|---|---|---|---|
| BTC buy 0.01 | n/a | rejectedthe venue gave no reason | 22:53 |
| ZEC sell 0.4 | 812.40 | cancelledyou cancelled it | 21:53 |
| HYPE buy 6.2 | 80.10 | filled | 20:53 |
45AlertRule
Reads the rule back as a sentence and says where the alert would arrive, including when the answer is nowhere yet. Delivery is part of the rule rather than a setting elsewhere: an alert with no destination is a note to yourself, and it should say so before it is saved.
HYPE is 80.28 now. This fires if it goes above 80.28, a move of 0.0%.
We have nowhere to send this yet. Email alerts need an account, which is not connected in this build.
46ConfirmAction
A second press for anything that cannot be undone, naming the consequence rather than asking “are you sure”. The armed state resets after five seconds, so a stale armed button can never be pressed by accident minutes later.
Closing needs an app key, which is not available in this build.
47Notice
One line of feedback that does not vanish before it is read. Toasts auto-dismiss, which is right for “copied” and wrong for anything needing action, so nothing dismisses itself unless a caller asks. The word carries the meaning, since colour alone fails for some readers.
48DataTable
Sortable rows with an honest empty and no invented cells. Missing values sort last in both directions, because ascending should not reward a row for having no data, which is exactly what treating null as zero does.
| Market | Open interest↓ |
|---|---|
| BTC | 812,000,000 |
| ETH | 402,000,000 |
| MON | n/a |
49SymbolPicker
Pick a market from the live list, searchable, so what is pickable is exactly what is tradable and the two cannot drift. If the feed fails it says so and keeps your existing choice, because clearing a selection on a network blip is worse than a stale list.
50PercentInput
A percentage that cannot be typed into nonsense. Out-of-range values are clamped and it SAYS SO, because a field that quietly turns 500 into 100 has changed your intent without telling you and you will believe the number you typed.
Try typing 500 to see what it does with an out-of-range value.
51ToggleGroup
A segmented control where an unavailable option is disabled with its reason rather than hidden. Hiding it is how a person concludes we do not support something we simply cannot offer today, and the reason goes under the group rather than in a tooltip nobody on a phone can reach.
52BalanceList
What is held, with a total that admits what it skipped. A token we cannot price silently vanishes from most portfolio totals, the person's money did not disappear, our number did, so unpriced holdings stay listed and the total says how many it left out.
Balances
$7915.30BTC0.042$3373.90ETH1.8$4541.40
MON120n/a1 holding is missing from that total because we have no price for it. You hold it either way.
53RefreshControl
Refresh, and the time of the last SUCCESS rather than the last attempt. A failed refresh does not move the clock, because the data on screen is still from the earlier success and that is the age the reader needs. Wired here to the real pacifica feed.
54KeyValueList
Labelled facts where absence is a dash and never a blank, since a blank reads as a design choice and a dash reads as missing. A row can carry why it is missing, which beats merely knowing that it is.
55FilterChips
Filters that carry their counts, so an empty result is never a mystery about whether the filter broke. A zero-count chip is shown and disabled rather than hidden: hiding it makes the category look unsupported, disabling it says we have this and there is nothing in it right now.
56Pagination
Pages, and honest about a total it does not know. Feeds often return a page without saying how many exist, so total is nullable: unknown reads “of at least” and keeps Next live. A confident wrong total is worse than an admitted unknown because it stops people looking.
57AddressField
An address, readable and copyable, with no explorer link on purpose. Every build reaches for “view on Etherscan” and that is a hard fail: the action happens in our interface. The middle is elided rather than the tail, because the last four characters are the only part anyone actually verifies.
0xEXAM…00dEaD58InfoHint
An explanation you can reach without a mouse. We ban tooltip-only reasons across this library because a hover target does not exist on a phone, so this is a press that expands in the flow and pushes the layout. Less elegant than a floating tooltip and considerably more likely to be read.
59FillCostPanel
What your order actually costs, walked through the real book. Top of book is the price of the first coin, not the price of a two million dollar order, and a quote taken from the best bid looks identical in a screenshot while teaching the reader nothing. It also says when the book ran out, which is the thing most worth knowing before sending.
What BTC really costs at size
loading60BookCompare
Which venue is cheaper for YOUR size, stated in dollars. Comparing best prices is close to meaningless when two venues show the same top of book and differ by real money once an order walks the levels. It refuses to name a winner when only one venue answered, because a comparison missing a side is not a comparison.
61LiveBookAnalysis
One book fetch, five readings of it. Dropping the pure readers on a page separately would mean five fetches, five clocks and five chances to show numbers from different moments: two panels disagreeing because they polled a second apart is a bug a reader cannot diagnose. Hosts LevelStrength, LiquidityGauge, BookImbalance, SizeLadder and SlippageCurve.
59TransactionStatus
Pending, confirmed, failed, and a fourth state most builds never write: we have lost track of it. That is not pending. Pending means we know it is in flight, and rendering unknown as pending is how someone watches a spinner for an hour after their transaction already failed.
The network has it. This usually takes seconds but can take longer when the chain is busy.
0xEXAMPLE00000000000000000000000000000000000000000000000000000dEaDWe stopped hearing back about it, so we cannot tell you whether it settled. Check your wallet before sending it again.
The pool moved past the price you accepted, so nothing was swapped and nothing was spent.
60ApprovalStep
The permission a swap needs, and what it actually grants. Every wallet offers unlimited as the convenient default and almost no interface says in words what it means: that contract may move that token, in any amount, until you revoke it. Exact is the default here and unlimited carries its sentence.
You will be asked to approve again next time. That is one extra signature per trade and no standing permission.
Signing is not wired up in this build. It needs a connected wallet.
61MarketHours
The token trades all day, the company does not. Out of hours there is no underlying price forming, so a tokenised stock is priced by its book rather than tracking anything and can drift from the last close. That is the most surprising fact about the asset and no interface I have seen states it.
62ActivityFeed
What happened, newest first, with the gaps admitted. A feed starting an hour ago looks complete and a reader assumes nothing happened before it, so this says how far back it can speak for. A silently shorter list is the dangerous failure: an error banner gets noticed, a missing ten entries looks like a quiet hour.
Activity
covers back to 26h agoOne page of history failed to load. Entries may be missing from this list, so treat a quiet stretch as unknown rather than as nothing happening.
63NetworkPicker
The chains, with unsupported ones disabled rather than hidden, and testnets marked in one word. A person who thinks they are on mainnet and is not will send real intent to a chain where nothing is real, and the reverse mistake costs actual money.
64QuotaMeter
What is left, and no bar at all when the limit is unknown, because a full bar drawn from a missing field is the same lie as a health bar. It leads with what remains rather than what was used: “80% used” and “200 left” are the same fact and only one answers the question being asked.
We do not know the limit, so we cannot say how much is left. This is not the same as having plenty.
65ExportButton
Take the data away, and be told what did not come with it. A CSV of what is on screen is the page you are looking at after filters, not the dataset, so the real row count is shown before the click. Values containing a comma are quoted properly, because a shifted column is a corrupt file that opens fine.
66ShareState
A link that reopens what you are looking at, and names what it carries before you copy it. A share button that silently encodes filters is a small surprise; one that silently encodes an account or an amount is a leak, so private keys are excluded rather than trusted to be harmless.
67HealthBanner
Says a feed is down before the user works it out from five broken cards. It starts silent rather than green: before the first probe answers we know nothing, and a green banner on load is the same lie as a health bar drawn from a missing field. It reports only what it measured.
68CommandPalette
Everything reachable from the keyboard, including the things that are not ready. An unavailable action is listed and disabled with its reason rather than filtered out, because a palette that hides what it cannot do teaches the user the app cannot do it. Press cmd K.