Create Simple Revenue Dashboard

[premiumjibles]

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
  }
}

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

1. Total Revenue Display - Large, prominent number showing total USD revenue
2. Revenue by Service - Pie chart or bar chart breakdown
3. Revenue Over Time - Line chart showing trends (requires multiple API calls for different date ranges)
4. Date Range Picker - Allow custom date range queries
5. Auto-refresh - Optionally refresh data periodically

Acceptance Criteria

• Create new React app (Vite or Create React App)
• 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 (fast, modern)
• Charts: Recharts (React-native, good defaults) 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_URL for the affiliate revenue API

Repository Location

Create as new repository: shapeshift/rfox-dashboard OR add to unchained repo under node/proxy/dashboard/

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

_{You can configure auto-planning by selecting labels in the issue_enrichment configuration.}

🔗 Related PRs

#1228 - feat: affiliate revenue tracker and endpoint [closed]

👤 Suggested Assignees

• kaladinlight

---

🧪 Issue enrichment is currently in open beta.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Possible Duplicates

• https://github.com/shapeshift/web/issues/11440

Related Issues

• https://github.com/shapeshift/web/issues/11466
• Create Simple Revenue Dashboard #1239

🔗 Related PRs

#1228 - feat: affiliate revenue tracker and endpoint [merged]

👤 Suggested Assignees

• premiumjibles
• kaladinlight

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!