Create Simple Revenue Dashboard #1239
Description
Context
The ShapeShift affiliate revenue API provides data about revenue earned from various swap providers. Currently, the only way to view this data is via raw API calls. A dashboard would make this data accessible to stakeholders without technical knowledge.
API Endpoint: GET https://api.proxy.shapeshift.com/api/v1/affiliate/revenue?startTimestamp={unix}&endTimestamp={unix}
Response Format:
{
"totalUsd": 12345.67,
"byService": {
"zrx": 1234.56,
"bebop": 2345.67,
"thorchain": 3456.78,
"mayachain": 456.78,
"chainflip": 567.89,
"portals": 678.90
},
"failedProviders": []
}Requirements
- Simple React application
- Well-structured and expandable for future enhancements
- Host on Vercel or Railway (whichever is simpler)
- Public access (no authentication required)
- Cheap to host (static/serverless)
Features
- Total Revenue Display - Large, prominent number showing total USD revenue
- Revenue by Service - Pie chart or bar chart breakdown
- Revenue Over Time - Line chart showing trends (requires multiple API calls for different date ranges)
- Date Range Picker - Allow custom date range queries
- Auto-refresh - Optionally refresh data periodically
Acceptance Criteria
- Create new React app (Vite)
- Set up project structure for expandability
- Implement API client for affiliate revenue endpoint
- Display total revenue prominently
- Show breakdown by service (table + chart)
- Add date range picker (default: last 30 days)
- Add at least one chart visualization (pie or bar chart)
- Deploy to Vercel or Railway
- Document deployment process in README
Tech Stack
- Framework: React with TypeScript
- Build Tool: Vite
- Charts: Recharts or Chart.js
- Styling: Tailwind CSS or simple CSS modules
- Hosting: Vercel (simplest for React) or Railway
Project Structure
rfox-dashboard/
├── src/
│ ├── components/
│ │ ├── TotalRevenue.tsx
│ │ ├── ServiceBreakdown.tsx
│ │ ├── RevenueChart.tsx
│ │ └── DateRangePicker.tsx
│ ├── hooks/
│ │ └── useAffiliateRevenue.ts
│ ├── api/
│ │ └── affiliateRevenue.ts
│ ├── App.tsx
│ └── main.tsx
├── package.json
├── vite.config.ts
└── README.md
Deployment
- Vercel: Connect GitHub repo, auto-deploys on push
- Railway: Similar, may have more free tier resources
- Environment: Set
VITE_API_BASE_URLfor the affiliate revenue API
Repository Location
Create as new repository: shapeshift/rfox-dashboard OR add to unchained repo under node/proxy/dashboard/