feat: add mobile optimizations including PWA support and responsive c…

[Dozie2001]

1. Enhanced PWA Manifest

• File: public/manifest.json
• Changes: Added app shortcuts, screenshots, enhanced descriptions
• Result: Better "Add to Home Screen" experience with native app shortcuts

• "shortcuts": [Protocols, Chains, Yields, Stablecoins]
• "screenshots": [Mobile & desktop app previews]
• "description": "Track DeFi protocols, TVL, yields, and comprehensive blockchain analytics"

2. Mobile-Responsive Components

• Files: src/components/Table/MobileCard.tsx, ResponsiveTable.tsx
• Changes: Auto-switching table/card layouts based on screen size
• Result: Tables become readable cards on mobile (<768px)

3. Touch-Optimized Interactions

• File: src/styles/mobile-optimizations.css
• Changes: Added mobile CSS utilities with mobile- prefix
• Result: 44px touch targets, scale feedback, iOS optimizations

4. Pull-to-Refresh Feature

• Files: src/hooks/usePullToRefresh.tsx, src/components/PullToRefresh.tsx
• Changes: Native-like pull-to-refresh with touch gestures
• Result: Mobile users can swipe down to refresh data

5. Enhanced Mobile Search

• File: src/components/Search/Base/Mobile.tsx
• Changes: Added mobile CSS classes for better touch experience
• Result: No iOS zoom, better animations

[mintdart]

can you breakdown the PR into all those 5 features/bug fixes ?

looks like MobileCard or ResponsiveTable is not used anywhere , can you update a page of your choice so we can test ?

[Dozie2001]

can you breakdown the PR into all those 5 features/bug fixes ?

looks like MobileCard or ResponsiveTable is not used anywhere , can you update a page of your choice so we can test ?

yes I can will get to it now

[Dozie2001]

Before (Desktop-only Experience)

• Tables: Horizontal scrolling required on mobile, difficult to read
• Protocol data: Cramped columns, tiny text, poor touch targets
• Navigation: Desktop-optimised interface, not mobile-friendly
• Performance: Heavy table rendering on mobile devices
• User Experience: Frustrating mobile browsing, users are likely to leave
  Before:

Screen.Recording.2025-07-15.at.00.11.40.mov

After (Responsive Mobile-First Experience)

🎯 Dashboard Improvements

• Responsive Tables: Automatic card layout on mobile (< 768px)
• Protocol Cards: Clean, touch-friendly cards with protocol logos
• Smart Data Display: Primary metrics (TVL, changes) prominently shown
• Expandable Sections: "Show more" for additional data without clutter
• Native Feel: Smooth animations and mobile-optimised interactions

Screen.Recording.2025-07-15.at.00.04.16.mov

@mintdart