AID-696 — Search bars, before / after
Captured on iOS simulator with Metro running from this branch (lisherwin/aid-696-search-audit) for the "after" shots, and from main at the start of the session for "before". All search bars now route through the Strata persistent nav bar's search slot — the slot itself bakes in the magnifying glass + clear button.
Settings covered by slot defaults
Settings · search-by-keyword
phantom://SettingsStack
Search field at top of the screen. Bare InputField in the slot — no leading icon, no built-in clear.
Same screen, same code path on the consumer side. The PNB searchSlot now renders IconMagnifyingGlass 20 px + clearButton="while-editing" by default.
Settings · with active query "wall"
phantom://SettingsStack → focus + type
Clear-while-editing button appears on the right; result rows filter live. No code change at the consumer — the slot wires it.
The persistent-nav-bar/slots/Search.tsx change is the leverage point. Every useNavBar({ search }) consumer (Settings, Address Book, Validator List, Swap asset select, etc.) inherits these defaults without code-side changes.
Explore Perps migrated to PNB
Explore Perps
phantom://v1/explore → tap Perps shortcut
Search input rendered as scroll-along page chrome (ExploreSearchInput wrapper). Scrolls away with the list; lives in page space, not chrome space.
Search input lives in the persistent nav bar (sticky). Same look + behavior as Settings — slot defaults guarantee consistency.
Screens reached via the same fix (verified at the code level)
These screens use the same PNB slot — the slot's new default magnifying glass + clear button + 40 px size renders for free. They weren't physically captured because the simulator session ended before walking each one, but the fix is the same single change to persistent-nav-bar/slots/Search.tsx + per-screen migrations to useNavBarSearch().
| Screen | CK's complaint | How it's fixed |
|---|---|---|
| Validator list (staking) | Slim / no icon (the most obvious one in CK's audit) | Already uses useNavBar({ search }). The slot now ships the magnifying glass — no consumer change needed. slot default |
| Manage Tokens (Fungibles visibility) | 32 px height + 16 px icon (outlier) | FungiblesVisibility.tsx migrated from inline InputField size="small" to useNavBarSearch(). Now matches Settings and every other PNB-mounted search. migrated to slot |
| Trending Perps | Scroll-along search input, inconsistent with rest | ExplorePerpsTrendingPage.tsx migrated from ExploreSearchInput to useNavBarSearch(). Same as Explore Perps shown above. migrated to slot |
| Collectibles | Inconsistent height / icon | The collectibles list mounts no inline search; entry points into search go through the PNB slot — picks up new defaults. slot default |
| Fiat onramp / Send token select | Raw TextInput 36 px hard-coded |
Form sheet — no PNB available. SelectTokenSheet.native.tsx uses InputField size="base" inline with the same defaults the slot wires. inline parity |
The change in code
One slot, one default. Everything else falls out:
// apps/mobile/src/features/persistent-nav-bar/slots/Search.tsx
<InputField
size="base"
type="search"
clearButton="while-editing"
// ... config
>
<IconMagnifyingGlass color={tokens.colors.legacy.textDiminished} size={20} />
</InputField>
Consumers reach for the new hook for the rest of the boilerplate:
// any screen with a nav bar
const { debouncedSearchText, search } = useNavBarSearch();
useNavBar({ title, search });