0xKit Application
Interface Library
Every component in the application, live. Surfaces, radii and type sizes are transcribed from the reference renders rather than approximated — the page background is #141414, panels #1A1A1A and cards #212121 because that is what the pixels measure.
Transfer UI Construction
The case study dimensions this card directly, so the build reads from those numbers rather than from a designer’s eye. The rules below are not typed in either — every band and column is measured off the drawing’s own boxes at layout time, so a line cannot end up somewhere the component isn’t.
Type & Spacing
Roboto throughout; display sizes carry -3% tracking, UI text -1%.
Every gap in the construction module lands on this set.
Panel 24, card 20, control 16/12/8, pills fully round.
Source & Destination Selection
One panel does the work that used to take several dropdowns: filter by chain, scan balances, search. Availability is carried on the row itself, so a dead end is visible before it is chosen.
Wallet-balance toggle, chain tiles, balances, search.
New and Under-maintenance states.
Chains that cannot receive the selected asset render dimmed and inert.
The collapsed counterpart of a leg.
Marks a token as checked by the team.
Transaction Tracker
Your transfer has been initiated and is waiting for confirmation.
The transfer is being finalized on the destination chain.
Your transfer has been successfully completed.
Something went wrong — please review and try again.
With CCTP user need to claim funds on the destination chain.
Your transfer may be stuck. Click “Resolve” to continue.
You can remove it from the tracker.
Transaction is completed. You can remove it from the tracker.
Status Glyphs
Est. time 24s
Modals
This token has not been verified by our team. While it is expected to function correctly, there is a possibility it may not behave as intended.
Proceed only if you trust the source and understand the risks. Learn More
The amount you entered for WETH indicates low liquidity and could result in a significant loss on execution. This means you may receive considerably less than expected.
Routes
One recommendation, the rest ranked. Selecting swaps the border and tint to the accent.
Wallet
Connected wallets stack as tiles; expanding lists each with its ecosystem tag.
Pending & Hero States
Ticked dial, counting for real.
Red for loss risk, amber for caution.
Indeterminate, and stepped for multi-call flows.
My Wallets
Assets and Transactions over a filtered list.
Active destination carries its label on a green pill.
Same chain both legs, so the pair overlaps instead of chaining.
Mobile
On a phone the tracker moves out of the header and sits under it — there is no room for both, and the transfer is what the screen is for.
998.98
Full app chrome at 390.
Sits above the home indicator.
You can remove it from the tracker.
Attached to info affordances and to the tracker's remove state.
Charts
Transfer volume · 30d
$65.4B
Computed from a series; the stroke stays crisp as the box stretches.
Protocol fees · 14d
$1.28M
Bars stagger in on scroll.
Pool depth · USDC
$128.4M
Area fill fades from the accent.
Controls
Inputs & Forms
The case study only draws the three fields the product needs — the amount, the custom address and the two search rows. Everything else here is derived from them, on the same rules: a 44px control, the 12px card radius, the well surface for the body, and red / amber / green for the three validation tones already in the token set.
Address is incomplete
Not an EVM address
Valid address
Resting, filled, and the three tones
Lifted out of the transfer leg so every deposit form renders the identical block
Funds are sent to this EVM address, not your connected wallet.
Validates as you type — amber is a wrong ecosystem, not a wrong address
Native range underneath, so drag, arrows and touch all work
Advanced Settings
The popover behind the gear. Held to the transfer card’s 404 so it reads as the card’s own drawer rather than a floating panel. Slippage warns in both directions: too tight reverts, too loose invites a bad fill.
The most the received amount may fall before the transfer reverts.
Routes
A descriptor is a claim about a trade-off, not a label. Fastest and Economy are the two ends of one axis, Claim Required warns that the transfer will not finish unattended, and a route with nothing to say shows an em dash so the column keeps its rhythm.
Tracker Construction — 01.A
The tracker has its own annotated module. Same discipline as the transfer card: the numbers live in lib/spec.ts, the drawing is flat primitives, and the annotations are measured off the real boxes at layout time. The tracker is horizontal, so most of what it dimensions is columns.
Transaction Details
What the tracker pill opens into. The step rail always shows both legs — a cross-chain transfer has two separate confirmations, and the failure modes live between them.
- Source confirmedAvalanche · 12 blocks
- In flightLayerZero message relayed
- DeliveredAwaiting Solana
- Source confirmedBNB Chain · 15 blocks
- RevertedSlippage exceeded tolerance
- RefundedReturned to source wallet