Mobile escrow widget, hero/nav, feature stack, and landing pathways cards - #443
Merged
johdanike merged 4 commits intoAug 2, 2026
Merged
Conversation
Adds MobileEscrowWidget, the compact mobile version of the escrow status widget. Renders the ESCROW LOCKED status pill and the locked amount (42,500 USDC), with supporting metrics (signature count, network, release ETA) stacked as individual blocks below the main widget so it reads cleanly on narrow viewports with no horizontal scrolling. Follows the Component -> Hook -> Service layered pattern used elsewhere in the codebase (see useKineticExplorer/kineticExplorerService for the established shape): the component only calls useMobileEscrowSummary, which calls mobileEscrowService, which fetches from a new /api/mobile/escrow-summary Next.js route rather than using inline mock data in the component.
Adds MobileHero: touch-optimized top navigation with a hamburger menu and the mobile hero section. The hamburger opens a full-screen overlay (useMobileNavOverlay) that traps Tab/Shift+Tab focus inside itself, disables body scroll while open, restores focus to the trigger button on close, and closes on Escape. Renders the MAINNET V4.0 ACTIVE badge and the primary headline/CTAs fetched via useMobileHeroContent. Every interactive control (menu toggle, nav links, both CTAs) uses a 44px minimum touch target. Follows the Component -> Hook -> Service pattern (types/mobileHero.ts, app/api/mobile/hero-content/route.ts, mobileHeroService, useMobileHeroContent) — no inline mock data in the component. Nav link labels stay static config, matching the same convention the existing desktop HeroSection uses for its NAV_LINKS.
Adds MobileFeatures: the vertically stacked Spatial Anchoring / Smart Contracts / Immutable Audit cards for mobile. Card padding (p-5) is kept tight for narrow screens, and body text uses text-gray-300 against the #0b0f19 card background — a 13:1 contrast ratio, comfortably clearing the WCAG AA 4.5:1 threshold for normal text. Follows the Component -> Hook -> Service pattern (types/mobileFeatures.ts, app/api/mobile/features/route.ts, mobileFeaturesService, useMobileFeatures) — no inline mock data in the component.
Adds NetworkPathways, the "Architected for Scale" split card layout for the landing page: a Logistics Enterprises card and an Independent Carriers card, each with a custom thin-stroke SVG icon (a warehouse glyph for enterprises, a truck-on-a-route glyph for carriers — hand-drawn line icons rather than an icon-library import, since each represents a distinct concept). Cards use CSS Grid (grid-cols-1 md:grid-cols-2), so they stack vertically below the 768px md breakpoint and sit side by side above it. Hover state lifts the card, brightens its border, and shifts the icon/CTA to a lighter blue. Follows the Component -> Hook -> Service pattern (types/networkPathways.ts, app/api/landing/network-pathways/route.ts, networkPathwaysService, useNetworkPathways) — no inline mock data in the component.
|
@pre-cious-Igwealor Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements four assigned UI issues: a compact mobile Trustless Escrow Widget, a touch-optimized mobile top navigation and hero, a vertically stacked mobile features section, and the landing page's Network Pathways split card layout. All four follow the repo's Component -> Hook -> Service layered pattern, with data served from new local Next.js API routes rather than inline mock objects in the components.
closes #320
closes #319
closes #316
closes #315
Changes
components/mobile/MobileEscrowWidget.tsx): renders theESCROW LOCKEDstatus pill and the42,500 USDClocked amount, with signature/network/release-ETA metrics stacked as individual blocks below the main widget. Text stays >=14px and the card has no horizontal scroll on narrow viewports. Data flows throughuseMobileEscrowSummary->mobileEscrowService->GET /api/mobile/escrow-summary.components/mobile/MobileHero.tsx): hamburger button opens a full-screen nav overlay built with a newuseMobileNavOverlayhook that traps Tab/Shift+Tab focus inside the overlay, setsdocument.body.style.overflow = 'hidden'while open, restores focus to the trigger on close, and closes on Escape. Renders theMAINNET V4.0 ACTIVEbadge and hero headline/CTAs fromuseMobileHeroContent->mobileHeroService->GET /api/mobile/hero-content. Menu toggle, nav links, and both CTAs all use a 44px minimum touch target (min-h-[44px]/h-11 w-11).components/mobile/MobileFeatures.tsx): Spatial Anchoring / Smart Contracts / Immutable Audit cards stacked vertically withp-5padding tuned for narrow screens. Body copy usestext-gray-300on the#0b0f19card background — measured at a 13:1 contrast ratio, well clear of WCAG AA's 4.5:1 minimum for normal text. Data viauseMobileFeatures->mobileFeaturesService->GET /api/mobile/features.components/landing/NetworkPathways.tsx): "Architected for Scale" split cards for Logistics Enterprises and Independent Carriers, each with a hand-drawn thin-stroke SVG icon (warehouse glyph / truck-and-route glyph — not an icon-library import, since the issue asked for custom icons). Usesgrid-cols-1 md:grid-cols-2, so cards stack below the 768px breakpoint and sit side by side above it. Hover state lifts the card, brightens the border, and shifts the icon/CTA color. Data viauseNetworkPathways->networkPathwaysService->GET /api/landing/network-pathways.All four components match the existing layered pattern already established in this codebase (see
useKineticExplorer/kineticExplorerService/KineticExplorer.tsxanduseValueProps/valuePropsService/ValueProps.tsxfor the precedent this PR follows) — components only call their hook, hooks only call their service, services only talk to the API route.Test plan
__tests__/MobileEscrowWidget.test.tsx,MobileHero.test.tsx,MobileFeatures.test.tsx,NetworkPathways.test.tsx), 20 tests total, covering: loaded-state rendering, loading skeleton, error state, and component-specific behavior (metric stacking, hover class presence, 44px touch targets, focus-trap/body-scroll-lock open+close, contrast-relevant class assertions).npx jest— 94 suites / 822 tests pass, including all 20 new tests. 19 suites / 67 tests fail, but that failure set is byte-for-byte identical before and after this branch (confirmed viagit stash+ suite-name diff against a cleanupstream/maincheckout) — all pre-existing and unrelated to this change.npx eslinton every new file — zero errors.npx tsc --noEmit— one pre-existing error incomponents/mobile/MobileFooter.tsx(a file with literally missing quote characters throughout, from an already-merged PR — reproducible on cleanmain, nothing this PR touches or introduces).npx next build— fails at the same pre-existingMobileFooter.tsxsyntax error (also reproduced on cleanmainbefore this branch existed), so the full production build currently cannot succeed independent of this PR; flagging in case a maintainer wants that tracked separately.Caveats, disclosed honestly per this repo's own review requirements:
pnpm devlocally and confirms the components render as described, or if there's a preferred way to capture one here.figma_designs.txtonly contains the one repeated design-file link, no exportable node data), so exact spacing/colors are inferred from the closest existing components in this repo (HeroSection.tsx,KineticExplorer.tsx,ValueProps.tsx,MobileFlowMap.tsx) rather than pulled directly from the design file. Please treat visual details as a starting point for review, not a pixel-exact match.