TAP

Project Name 

TAP - One App. Full Journey

Description 

TAP makes crypto as easy as your favorite fintech app. Simple for beginners, powerful for pros. Deposit, trade, earn, borrow, spend, withdraw. No jargon. No friction. 

Vision

TAP aims to be the all-in-one digital finance super app that unites first-time crypto users and seasoned traders under one powerful, intuitive roof, removing complexity while unlocking the full on-chain economy. 

Differentiators

• Deep liquidity across assets
• Rich product suite 
• Jargon-free, fintech-quality UI 
• Pro-grade web terminal for power users 
• Social feed and groups for trades, predictions, and alpha sharing
• Direct friend onboarding with magic link or QR code

Key Features

• Spot (Core & EVM)
• Perps 
• Native Staking 
• Earn: Vaults, Lending, Cashback (Vaults, Lending, Cashback) 
• Web Terminal 
• Borrow 
• Debit & Credit Card 
• Social Layer 
• Magic Link onboarding
• HIP-3 

Architecture

• React + TypeScript: Modern functional components with full type safety 
• NodeJS + Express + MongoDB: Backend API endpoints with persistent storage 
• Tailwind CSS: For responsive, utility-first design with custom dark theme
• Custom Hooks: Specialized hooks for data fetching and state management 

Data Integration

• Hyperliquid API: Real-time asset data via custom hooks (useHyperliquidAllData, useHyperEvmSpotBalances) 
• Fallback Mechanisms: Mock data implementation when APIs fail
• Price Data Handling: Standardized formatting and graceful error handling

Ecosystem Integrations

• Hyperliquid Perps: Flagship perpetual futures with deep liquidity 

• Hyperliquid Spot (Core & EVM): Native and EVM-compatible spot trading 

• BrahmaFi: Borrow against crypto positions, portfolio-backed credit line

• Reap.Global: Spend crypto directly with a Hyperliquid-linked debit card 

• Hyperfolio:  Portfolio tracker aggregating balances, PnL, yields, and staking 

• LiquidSwap: Smart order routing across liquidity pools for best execution

• Hyperbeat: Native DeFi protocol boosting liquidity and yield 

Will be refined + additions post-hackathon. 

Component Architecture

• Modular Design: Dashboard, SpotBalances, and CryptoAssetItem components 
• Consistent Data Display: Standardized formatters for currency, percentages, token balances
• Conditional Rendering: Smart switching based on data and use preferences 

Performance Considerations

• Optimized Rendering: Efficient state management to reduce re-renders 
• Interval Refreshing: Configurable updates for real-time accuracy 
• Lazy Loading: Components load only when required to cut initial load time 

Security Features

• Privy Integration: Secure authentication with wallet connections
• Balance Hiding: Toggle to mask sensitive financial info

Future Extensibility

• Reusable Components: Built for multi-section deployment
• Pluggable Data Sources: Easy integration of new providers
• Sorting/Filtering Framework: Extensible system for adding new data manipulation options

Due to hackathon's time-constraint, we'll keep building, including full UIUX revamp to fintech-level polish. 

Demo

http://bit.ly/41lkpFm 

Project Links

Include links to anything relevant:

• Github: https://github.com/othnielvtf/TAP-Frontend 
• Live demo URL: https://tap.mito.lol/ 

Team

• Othniel - Full Stack
• Pew - Full Stack
• Josh - Product 
• Jo Lim - Product