feat(mobile): implement protocol flow timeline and map widget (#317)

[iheanyiezumaukom-ai]

Closes #317

Summary

Implements the mobile protocol flow timeline and global map widget for the SwiftChain frontend.

Changes

• New Component: components/mobile/MobileFlowMap.tsx

  • Vertical numbered timeline (01, 02, 03)
  • Dynamic connecting line that scales with content height
  • Map widget card with location pins

• New Hook: hooks/useProtocolFlow.ts

  • Fetches protocol flow data from API
  • Manages loading and error states

• New Service: services/protocolFlowService.ts

  • API call to fetch protocol flow data

• New Types: types/protocolFlow.ts

  • Type definitions for ProtocolStep, MapLocation, ProtocolFlowData

• API Route: app/api/protocol-flow/route.ts

  • Mock endpoint for testing

• Test Page: app/mobile-flow/page.tsx

  • Route to preview the component

Architecture

• ✅ Component -> Hook -> Service pattern
• ✅ Data from backend API (no inline mocks)
• ✅ Responsive for mobile

Screenshots

[Screenshots to be added once the app is running]

Checklist

• Implementation matches description
• Component -> Hook -> Service pattern
• Data from backend API
• Closes Frontend: Mobile Protocol Flow & Global Map #317

[drips-wave]

@iheanyiezumaukom-ai 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! 🚀

Learn more about application limits