Explore your Aptos blockchain adventure through detailed wallet analytics and insights
Note: This application is currently in beta and undergoing public testing. Features are being actively developed and refined. Feedback and bug reports are welcome!
- Real-time Balance Tracking: View liquid and staked APT balances with precise decimal formatting
- Portfolio Value Tracking: See total USD value across all tokens
- 24h Change Metrics: Track portfolio changes with dollar amount and percentage
- Wallet Activity Metrics: Track total transactions and NFT collections
- Wallet Timeline: See wallet start date (first transaction) and most recent activity
- Sentiment Analysis: AI-powered wallet sentiment indicator based on activity patterns, staking behavior, and portfolio diversity
- Historical Chart: Track portfolio value over time with interactive chart
- Time Range Selection: View portfolio history by day, week, month, or year
- Value Snapshots: Automated tracking of portfolio value at regular intervals
- Performance Insights: Visualize your wallet's growth trajectory
- Top Holdings Display: View your top 10 fungible token assets
- Multi-Asset Support: Track APT and all fungible assets in your wallet
- USD Value Tracking: Real-time USD pricing for all supported tokens
- Individual Token Metrics: Balance, price, and total value per token
- Formatted Balances: Human-readable number formatting with proper decimal precision
- Real-time Data: Direct integration with Aptos blockchain for accurate balances
- Comprehensive NFT Gallery: Browse all NFTs in your collection with high-quality images
- Price Discovery: Automatic NFT purchase price detection from transaction history
- Premium NFTs Showcase: Featured display of your most expensive NFTs
- Collection Analytics: Total NFT count and collection diversity metrics
- Multi-Source Image Resolution: Supports CDN URIs, IPFS, and Arweave for NFT images
- Detailed NFT Info: View collection name, purchase price, and transaction hash
- Activity Heatmap: Visualize transaction activity patterns over time
- Transaction Type Breakdown: Pie chart showing distribution of transaction types
- Gas Analytics: Track gas spending over time
- Top Contracts: See which smart contracts you interact with most
- Recent Activity Feed: Latest 5 transactions with success status and timestamps
- Full Transaction History: Access complete transaction count
- Swap History: View all token swap transactions with protocol details
- Protocol Analytics: See trading volume and transaction count per DeFi protocol
- Staking Activities: Track staking actions across different protocols
- Total DeFi Volume: Aggregate USD volume across all DeFi interactions
- Unique Protocols: Count of distinct DeFi protocols used
- Active Days Counter: Track how many days your wallet has been active
- Gas Expenditure: Total gas spent across all transactions
- Achievement Badges: Earn badges based on wallet activity and milestones
- Wallet Age: Display since when the wallet has been active
- Comparative Rankings: See how your wallet ranks against others in key metrics
- Shareable Cards: Generate beautiful shareable images of your wallet stats
- Custom Background: Cards feature unique Pepe-themed design
- Key Metrics Display: Shows portfolio value, transactions, and 24h change
- Comparative Rankings: Display percentile rankings for various metrics
- Achievement Badges: Feature your earned badges on the card
- Download & Share: Export as PNG for social media sharing
- Wallet Storage: Save multiple wallet addresses for quick access
- Quick Switch: Easily switch between saved wallets via dropdown
- Add New Wallets: Simple interface to add and track additional addresses
- Auto-Save: Automatically saves analyzed wallets for future use
- Mainnet Integration: Full support for Aptos mainnet
- Testnet Support: Test features on Aptos testnet
- Network Switching: Easy toggle between networks
- Network-Specific Data: Accurate data retrieval per network
- React 18 - Modern UI library with hooks
- TypeScript - Type-safe development
- Vite - Lightning-fast build tool and dev server
- TailwindCSS - Utility-first CSS framework
- Shadcn/ui - High-quality component library
- Radix UI - Accessible component primitives
- Lucide React - Beautiful icon library
- React Router - Client-side routing
- Sonner - Toast notifications
- Recharts - Interactive charts and data visualization
- html2canvas - Generate shareable images from DOM elements
- jsPDF - PDF generation for export functionality
- date-fns - Date formatting and manipulation
- TanStack Query - Server state management
- Supabase - Backend-as-a-Service platform
- Edge Functions - Serverless Deno functions for API integration
- PostgreSQL - Production-grade database
- Aptos Indexer GraphQL API - Query blockchain data efficiently
- Aptos Fullnode REST API - Access precise account balances and transactions
- Multiple Fallback Endpoints - Ensure high availability
- ESLint - Code quality and consistency
- PostCSS - CSS processing
- TypeScript - Static type checking
- Node.js 18+ or Bun
- npm, yarn, or bun package manager
- Clone the repository:
git clone <YOUR_GIT_URL>
cd tracktos- Install dependencies:
npm install
# or
bun install- Set up environment variables:
# .env file is auto-configured with Lovable Cloud
# No manual configuration needed for Supabase- Start the development server:
npm run dev
# or
bun dev- Open http://localhost:5173 in your browser
tracktos/
├── src/
│ ├── assets/ # Static assets (logos, images)
│ │ ├── aptos-logo.png
│ │ ├── aptos-logo-white.png
│ │ └── pepe-card-bg.png # Custom background for shareable cards
│ ├── components/
│ │ ├── dashboard/ # Dashboard-specific components
│ │ │ ├── AccountCard.tsx # Account overview & sentiment
│ │ │ ├── TokensCard.tsx # Token holdings display
│ │ │ ├── NFTsCard.tsx # NFT gallery (paginated)
│ │ │ ├── PremiumNFTsCard.tsx # Featured expensive NFTs
│ │ │ ├── ActivityCard.tsx # Recent transactions
│ │ │ ├── PortfolioChartCard.tsx # Historical portfolio value chart
│ │ │ ├── WalletIdentityCard.tsx # Wallet age, gas, badges, rankings
│ │ │ ├── TransactionAnalyticsCard.tsx # Heatmap, charts, top contracts
│ │ │ ├── DeFiActivityCard.tsx # Swap history, protocol analytics
│ │ │ └── ShareExportCard.tsx # Generate shareable images
│ │ └── ui/ # Reusable UI components (Shadcn)
│ ├── hooks/ # Custom React hooks
│ │ └── use-toast.ts # Toast notification hook
│ ├── lib/
│ │ ├── utils.ts # Utility functions
│ │ ├── formatters.ts # Number and currency formatters
│ │ └── walletStorage.ts # Local storage for saved wallets
│ ├── integrations/
│ │ └── supabase/ # Supabase client & types
│ ├── pages/
│ │ ├── Index.tsx # Main dashboard page
│ │ └── NotFound.tsx # 404 page
│ ├── App.tsx # Root component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles & design system
├── supabase/
│ ├── functions/
│ │ ├── aptos/ # Main Aptos data fetching
│ │ │ └── index.ts
│ │ ├── portfolio-history/ # Portfolio value tracking
│ │ │ └── index.ts
│ │ └── generate-wallet-background/ # Custom card background generation
│ │ └── index.ts
│ └── config.toml # Supabase configuration
├── public/ # Static public assets
└── package.json # Project dependencies
- User Input: User enters Aptos wallet address and selects network
- Edge Function Call: Frontend invokes Supabase edge function with address
- Blockchain Query: Edge function queries Aptos Indexer GraphQL and Fullnode APIs
- Data Processing:
- Aggregates fungible assets and calculates balances with USD values
- Fetches NFT metadata from CDN/IPFS/Arweave with price discovery
- Parses transaction history for activity, analytics, and DeFi tracking
- Calculates wallet sentiment score and achievement badges
- Generates transaction analytics (heatmap, type breakdown, gas tracking)
- Analyzes DeFi activity (swaps, protocols, staking)
- Portfolio History: Separate edge function tracks portfolio value over time
- Response: Formatted data returned to frontend with comprehensive analytics
- UI Rendering: Tabbed dashboard displays all analytics with loading states
- Sharing: Generate custom shareable images with wallet stats and background
- Component Composition: Modular dashboard cards for maintainability
- Tabbed Navigation: Organized view of different wallet aspects (Overview, Tokens, NFTs, Activity, DeFi, Identity)
- Skeleton Loading: Smooth loading experience with skeleton screens
- Error Handling: Graceful error messages and fallback states
- Responsive Design: Mobile-first approach with Tailwind breakpoints
- Type Safety: Full TypeScript coverage for runtime safety
- Local Storage: Persistent wallet addresses for quick access
- Chart Visualization: Interactive charts for portfolio and transaction data
- Image Generation: HTML-to-canvas conversion for shareable cards
The wallet sentiment score (0-100) is calculated based on:
- Transaction Volume: Higher activity = more bullish (up to +15 points)
- NFT Holdings: Collection size indicates engagement (up to +10 points)
- Token Diversity: Multiple tokens show active trading (up to +10 points)
- Staking Behavior: Staked APT indicates long-term holding (up to +15 points)
- Portfolio Value: Higher value suggests commitment (up to +20 points)
- DeFi Activity: Active DeFi usage indicates engagement (up to +15 points)
Score ranges:
- 75-100: Very Bullish 🚀
- 60-74: Bullish 📈
- 40-59: Neutral 😐
- 25-39: Bearish 📉
- 0-24: Very Bearish 🐻
The project uses a semantic color system defined in index.css:
- Primary, secondary, accent colors
- Background and foreground variants
- Border and muted colors
- Dark mode support via CSS variables
Managed automatically by Lovable Cloud:
VITE_SUPABASE_URL- Supabase project URLVITE_SUPABASE_PUBLISHABLE_KEY- Supabase anon keyVITE_SUPABASE_PROJECT_ID- Project identifier
Endpoint: POST /functions/v1/aptos
Request Body:
{
"address": "0x...",
"network": "mainnet" | "testnet"
}Response:
{
"account": {
"address": "0x...",
"aptBalance": "100.5",
"stakedApt": "50.25",
"firstTransactionTimestamp": "2023-10-01T12:00:00.000Z",
"lastTransactionTimestamp": "2024-01-15T14:30:00.000Z",
"usdChange24h": 125.50,
"percentChange24h": 5.2
},
"tokens": [
{
"name": "Token Name",
"symbol": "TKN",
"balance": "1000.50",
"usdPrice": 1.25,
"usdValue": 1250.625,
"logoUrl": "https://..."
}
],
"nfts": [
{
"name": "NFT Name",
"collection": "Collection Name",
"image": "https://...",
"price": "5.5 APT",
"purchaseHash": "0x...",
"tokenDataId": "0x..."
}
],
"activity": [
{
"hash": "0x...",
"type": "user_transaction",
"success": true,
"timestamp": "2024-01-15T14:30:00.000Z"
}
],
"transactionAnalytics": {
"activityHeatmap": [
{ "date": "2024-01-01", "count": 15 }
],
"typeBreakdown": [
{ "type": "Token Transfer", "count": 50, "percentage": 45.5 }
],
"gasOverTime": [
{ "date": "2024-01-01", "gas": "0.005" }
],
"topContracts": [
{ "address": "0x...", "name": "DeFi Protocol", "count": 25, "type": "swap" }
]
},
"defiActivity": {
"swapHistory": [
{
"timestamp": "2024-01-15T14:30:00.000Z",
"protocol": "PancakeSwap",
"fromToken": "APT",
"toToken": "USDC",
"fromAmount": "10.5",
"toAmount": "105.0",
"volumeUsd": 105.0
}
],
"protocolVolumes": [
{
"protocol": "PancakeSwap",
"type": "swap",
"volumeUsd": 5000.0,
"txCount": 25
}
],
"stakingActivities": [
{
"protocol": "Aptos Staking",
"action": "stake",
"amount": "100 APT",
"timestamp": "2024-01-10T12:00:00.000Z"
}
],
"totalDefiVolumeUsd": 15000.0,
"uniqueProtocols": 5
},
"walletIdentity": {
"activeDays": 245,
"totalGasSpent": "2.5 APT",
"badges": [
{
"name": "Early Adopter",
"description": "Wallet created in first 6 months",
"icon": "🌟"
}
]
},
"totalNftCount": 150,
"totalTransactionCount": 2380,
"totalUsdValue": 12500.75,
"sentimentScore": 85,
"sentimentReasons": [
"High transaction volume",
"Active DeFi participation",
"Significant staking"
]
}Endpoint: POST /functions/v1/portfolio-history
Request Body:
{
"address": "0x...",
"currentValue": 12500.75
}Response:
{
"history": [
{
"timestamp": "2024-01-01T00:00:00.000Z",
"value": 10000.0
},
{
"timestamp": "2024-01-15T00:00:00.000Z",
"value": 12500.75
}
]
}- Glassmorphism Effects: Modern backdrop blur and transparency
- Gradient Accents: Subtle gradients for visual hierarchy
- Hover Animations: Smooth transitions and scale effects
- Responsive Grid Layouts: Adapts to all screen sizes
- Dark Mode Ready: Full dark mode support via CSS variables
- Loading States: Skeleton screens for better UX
- Click "Publish" in the top right of the Lovable editor
- Your app is automatically deployed to a Lovable subdomain
- Navigate to Project > Settings > Domains
- Add your custom domain
- Configure DNS records as instructed
- Learn more about custom domains
The project can be deployed to any static hosting platform:
- Vercel
- Netlify
- Cloudflare Pages
- GitHub Pages
Build command: npm run build or bun build
Output directory: dist
Simply visit your Lovable Project and start prompting. Changes made via Lovable will be committed automatically to this repo.
If you want to work locally using your own IDE:
# Clone the repository
git clone <YOUR_GIT_URL>
# Navigate to the project directory
cd tracktos
# Install dependencies
npm i
# Start the development server
npm run dev- Navigate to the main page of your repository
- Click on the "Code" button (green button) near the top right
- Select the "Codespaces" tab
- Click on "New codespace" to launch a new Codespace environment
- Edit files directly within the Codespace and commit your changes
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m "Add some AmazingFeature") - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Aptos Labs - For the Aptos blockchain and APIs
- Shadcn/ui - For the beautiful component library
- Supabase - For the backend infrastructure
For questions and support, please open an issue in the GitHub repository.