User Story
As a Noblocks user, I want recipient names and payment screens to read clearly on mobile, a clear way to go back while my on-ramp payment is being checked, and refund-account flows that do not break the viewport on iPhone, so I can complete crypto-to-fiat flows with less confusion and without manual zoom fixes.
Acceptance Criteria
-
GIVEN I am on an off-ramp transaction in a processing state and the status UI shows a compact recipient pill next to the amount
WHEN The recipient’s name is stored or shown in mixed or lowercase form
THEN The first word in the pill uses normal capitalization (e.g. leading letter uppercase) so it matches the fuller name wording in the status message.
-
GIVEN I am on the on-ramp Make payment screen while the app is polling for my bank transfer
WHEN I want to leave that screen
THEN I can use a Back control that returns me to the main payment form (home step), with a layout consistent with other primary/back patterns (e.g. review step).
-
GIVEN I am on the Make payment screen on a narrow viewport
WHEN I read the automatic polling status
THEN The status copy fits without severe clipping (shortened message acceptable).
-
GIVEN I open Add or Edit refund account on an iPhone and I open the bank list (search field may autofocus) or focus the account number field
WHEN I interact with those inputs
THEN Safari does not apply unwanted auto-zoom that forces me to pinch-zoom back to a normal view (addressed via at least 16px effective input font size or equivalent).
-
GIVEN I use bank search elsewhere that reuses the same search input component
WHEN I focus the search field on iOS
THEN The same zoom behavior does not regress visibly.
Tech Details
- Add or reuse a shared helper (e.g.
formatRecipientFirstWordForStatusPill in app/utils.ts) and wire TransactionStatus pills to it for off-ramp.
- MakePayment: Back button wired to existing back-to-form handler; status strip styling aligned with secondary CTA pattern; concise status string; optional
role="status" / aria-live for the polling state.
- iOS: Refund modal account input and shared SearchInput use
text-base (16px) (or equivalent) so focused inputs meet Safari’s common threshold and avoid input zoom.
Notes/Assumptions
- Off-ramp status message already title-cases the full name; the pill was the inconsistent piece.
- On-ramp status pills may show a truncated wallet address, not a bank name; behavior should remain correct for that case.
- Prefer fixing font size over
maximum-scale=1 viewport tricks for accessibility.
User Story
As a Noblocks user, I want recipient names and payment screens to read clearly on mobile, a clear way to go back while my on-ramp payment is being checked, and refund-account flows that do not break the viewport on iPhone, so I can complete crypto-to-fiat flows with less confusion and without manual zoom fixes.
Acceptance Criteria
GIVEN I am on an off-ramp transaction in a processing state and the status UI shows a compact recipient pill next to the amount
WHEN The recipient’s name is stored or shown in mixed or lowercase form
THEN The first word in the pill uses normal capitalization (e.g. leading letter uppercase) so it matches the fuller name wording in the status message.
GIVEN I am on the on-ramp Make payment screen while the app is polling for my bank transfer
WHEN I want to leave that screen
THEN I can use a Back control that returns me to the main payment form (home step), with a layout consistent with other primary/back patterns (e.g. review step).
GIVEN I am on the Make payment screen on a narrow viewport
WHEN I read the automatic polling status
THEN The status copy fits without severe clipping (shortened message acceptable).
GIVEN I open Add or Edit refund account on an iPhone and I open the bank list (search field may autofocus) or focus the account number field
WHEN I interact with those inputs
THEN Safari does not apply unwanted auto-zoom that forces me to pinch-zoom back to a normal view (addressed via at least 16px effective input font size or equivalent).
GIVEN I use bank search elsewhere that reuses the same search input component
WHEN I focus the search field on iOS
THEN The same zoom behavior does not regress visibly.
Tech Details
formatRecipientFirstWordForStatusPillinapp/utils.ts) and wire TransactionStatus pills to it for off-ramp.role="status"/aria-livefor the polling state.text-base(16px) (or equivalent) so focused inputs meet Safari’s common threshold and avoid input zoom.Notes/Assumptions
maximum-scale=1viewport tricks for accessibility.