Mercury Dashboard: Migration to Next.js Stack

Moving from Telegram-based analysis to a proper dashboard will significantly improve our ability to analyze and interact with Mercury's data. Here's why Next.js + tRPC + Tailwind + shadcn/ui is our chosen stack and how we'll implement it.

Why This Stack?

Our current analysis workflow through Telegram and Gists is becoming a bottleneck. We need more control, better interactivity, and deeper integration with our backend systems. The proposed stack solves these issues with:

• Type-safety: End-to-end TypeScript with tRPC
• Ready-to-use Components: shadcn/ui for rapid development
• Familiar Tech: Alignment with existing TWA stack (React + Tailwind)
• Easy Backend Integration: Built-in API routes and tRPC integration

Implementation Plan

1. Initial Setup

# Create new Next.js project
pnpm create next-app mercury-dashboard --typescript --tailwind

# Add core dependencies
pnpm add @trpc/client @trpc/server @trpc/react-query @tanstack/react-query
pnpm add -D shadcn-ui @types/node @types/react @types/react-dom

# Initialize shadcn/ui
npx shadcn-ui@latest init

2. Core Features Priority

1. Tournament Analysis Dashboard

   // pages/tournaments/index.tsx
   import { trpc } from '@/utils/trpc'
   import { DataTable } from '@/components/ui/data-table'
   
   export default function TournamentDashboard() {
     const { data } = trpc.tournaments.getLatest.useQuery()
   
     return (
       <div className="container mx-auto py-10">
         <DataTable
           columns={tournamentColumns}
           data={data || []}
         />
       </div>
     )
   }

2. Market Comparison Visualization

   // components/MarketComparisonChart.tsx
   import { LineChart } from '@/components/ui/line-chart'
   
   export function MarketComparisonChart({ marketId }: { marketId: string }) {
     const { data, isLoading } = trpc.markets.getComparisons.useQuery({ marketId })
   
     if (isLoading) return <LoadingSpinner />
   
     return (
       <Card>
         <LineChart
           data={data}
           xAxis="timestamp"
           series={['price', 'volume']}
         />
       </Card>
     )
   }

3. Real-time Monitoring

   // hooks/useMetrics.ts
   export function useMetrics() {
     return trpc.metrics.subscribe.useSubscription(undefined, {
       onData: (data) => {
         // Update charts in real-time
       },
     });
   }

3. Integration with Existing Systems

The dashboard will integrate with our current infrastructure:

1. Prometheus Integration

   // server/routers/metrics.ts
   export const metricsRouter = createTRPCRouter({
     getSystemMetrics: publicProcedure
       .input(
         z.object({
           timeframe: z.string(),
         }),
       )
       .query(({ input }) => {
         return prometheusClient.queryRange({
           query: 'tournament_success_rate',
           start: input.timeframe,
         });
       }),
   });

2. MAAT Validation Display

   // components/MaatValidation.tsx
   export function MaatValidation() {
     const { data } = trpc.maat.getLatestValidations.useQuery()
   
     return (
       <Card>
         <CardHeader>
           <CardTitle>MAAT Validation Results</CardTitle>
         </CardHeader>
         <CardContent>
           <ValidationList items={data} />
         </CardContent>
       </Card>
     )
   }

Benefits Over Current Approach

1. Better Data Visualization

   • Interactive charts
   • Custom time ranges
   • Multiple data views

2. Improved Analysis Tools

   • Cross-reference different metrics
   • Historical data comparison
   • Custom filters and sorting

3. Development Efficiency

   • Type-safe API calls
   • Reusable components
   • Easy to extend

Next Steps

1. Set up basic project structure
2. Create core components library
3. Implement basic metrics dashboard
4. Add real-time updates
5. Integrate with MAAT validation
6. Add advanced analysis features

The migration will be gradual, starting with basic metrics display and progressively adding more complex features. This approach allows us to validate the solution while maintaining our current analysis capabilities through Telegram and Gists.

---

Would you like to contribute to this implementation? Check out the project repository and our development guidelines for more information.