website refactor

apps/website/templates/LeagueWalletTemplate.tsx

@@ -1,155 +1,90 @@
-import { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
+'use client';
+
+import React from 'react';
 import { Card } from '@/ui/Card';
-import { Section } from '@/ui/Section';
-import { Wallet, TrendingUp, TrendingDown, DollarSign, Calendar, ArrowUpRight, ArrowDownRight } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+import { Wallet, Calendar } from 'lucide-react';
+import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
+import { TransactionRow } from '@/components/leagues/TransactionRow';
 
 interface LeagueWalletTemplateProps {
   viewData: LeagueWalletViewData;
 }
 
 export function LeagueWalletTemplate({ viewData }: LeagueWalletTemplateProps) {
-  const formatCurrency = (amount: number) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: viewData.currency,
-    }).format(Math.abs(amount));
-  };
-
-  const getTransactionIcon = (type: string) => {
-    switch (type) {
-      case 'deposit':
-        return <ArrowUpRight className="w-4 h-4 text-performance-green" />;
-      case 'withdrawal':
-        return <ArrowDownRight className="w-4 h-4 text-red-400" />;
-      case 'sponsorship':
-        return <DollarSign className="w-4 h-4 text-primary-blue" />;
-      case 'prize':
-        return <TrendingUp className="w-4 h-4 text-warning-amber" />;
-      default:
-        return <DollarSign className="w-4 h-4 text-gray-400" />;
-    }
-  };
-
-  const getTransactionColor = (type: string) => {
-    switch (type) {
-      case 'deposit':
-        return 'text-performance-green';
-      case 'withdrawal':
-        return 'text-red-400';
-      case 'sponsorship':
-        return 'text-primary-blue';
-      case 'prize':
-        return 'text-warning-amber';
-      default:
-        return 'text-gray-400';
-    }
-  };
-
   return (
-    <Section>
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="text-xl font-semibold text-white">League Wallet</h2>
-          <p className="text-sm text-gray-400 mt-1">
-            Financial overview and transaction history
-          </p>
-        </div>
-      </div>
+    <Stack gap={6}>
+      <Box>
+        <Heading level={2}>League Wallet</Heading>
+        <Text size="sm" color="text-gray-400" block mt={1}>
+          Financial overview and transaction history
+        </Text>
+      </Box>
 
-      <div className="space-y-6">
+      <Stack gap={6}>
         {/* Balance Card */}
         <Card>
-          <div className="flex items-center gap-4">
-            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
-              <Wallet className="w-6 h-6 text-primary-blue" />
-            </div>
-            <div>
-              <p className="text-sm text-gray-400">Current Balance</p>
-              <p className="text-3xl font-bold text-white">
-                {formatCurrency(viewData.balance)}
-              </p>
-            </div>
-          </div>
+          <Stack direction="row" align="center" gap={4}>
+            <Surface variant="muted" rounded="xl" padding={3} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
+              <Icon icon={Wallet} size={6} color="#3b82f6" />
+            </Surface>
+            <Box>
+              <Text size="sm" color="text-gray-400" block>Current Balance</Text>
+              <Text size="3xl" weight="bold" color="text-white">
+                {viewData.formattedBalance}
+              </Text>
+            </Box>
+          </Stack>
         </Card>
 
         {/* Transaction History */}
         <Card>
-          <div className="flex items-center gap-3 mb-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10">
-              <Calendar className="w-5 h-5 text-performance-green" />
-            </div>
-            <div>
-              <h3 className="text-lg font-semibold text-white">Transaction History</h3>
-              <p className="text-sm text-gray-400">Recent financial activity</p>
-            </div>
-          </div>
+          <Stack gap={4}>
+            <Stack direction="row" align="center" gap={3}>
+              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
+                <Icon icon={Calendar} size={5} color="#10b981" />
+              </Surface>
+              <Box>
+                <Heading level={3}>Transaction History</Heading>
+                <Text size="sm" color="text-gray-400">Recent financial activity</Text>
+              </Box>
+            </Stack>
 
-          {viewData.transactions.length === 0 ? (
-            <div className="text-center py-8">
-              <Wallet className="w-12 h-12 mx-auto mb-4 text-gray-400" />
-              <p className="text-gray-400">No transactions yet</p>
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {viewData.transactions.map((transaction) => (
-                <div
-                  key={transaction.id}
-                  className="flex items-center justify-between p-4 rounded-lg border border-charcoal-outline bg-iron-gray/30"
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="flex-shrink-0">
-                      {getTransactionIcon(transaction.type)}
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <p className="text-sm font-medium text-white truncate">
-                        {transaction.description}
-                      </p>
-                      <div className="flex items-center gap-2 text-xs text-gray-400">
-                        <span>{new Date(transaction.createdAt).toLocaleDateString()}</span>
-                        <span>•</span>
-                        <span className={`capitalize ${getTransactionColor(transaction.type)}`}>
-                          {transaction.type}
-                        </span>
-                        <span>•</span>
-                        <span className={`capitalize ${
-                          transaction.status === 'completed'
-                            ? 'text-performance-green'
-                            : transaction.status === 'pending'
-                            ? 'text-warning-amber'
-                            : 'text-red-400'
-                        }`}>
-                          {transaction.status}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="text-right">
-                    <p className={`text-lg font-semibold ${
-                      transaction.amount >= 0 ? 'text-performance-green' : 'text-red-400'
-                    }`}>
-                      {transaction.amount >= 0 ? '+' : '-'}{formatCurrency(transaction.amount)}
-                    </p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
+            {viewData.transactions.length === 0 ? (
+              <Stack align="center" py={8} gap={4}>
+                <Icon icon={Wallet} size={12} color="#525252" />
+                <Text color="text-gray-400">No transactions yet</Text>
+              </Stack>
+            ) : (
+              <Stack gap={3}>
+                {viewData.transactions.map((transaction) => (
+                  <TransactionRow key={transaction.id} transaction={transaction} />
+                ))}
+              </Stack>
+            )}
+          </Stack>
         </Card>
 
         {/* Note about features */}
         <Card>
-          <div className="text-center py-8">
-            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-primary-blue/10 flex items-center justify-center">
-              <Wallet className="w-8 h-8 text-primary-blue" />
-            </div>
-            <h3 className="text-lg font-medium text-white mb-2">Wallet Management</h3>
-            <p className="text-sm text-gray-400">
-              Interactive withdrawal and export features will be implemented in future updates.
-            </p>
-          </div>
+          <Stack align="center" py={8} gap={4}>
+            <Surface variant="muted" rounded="full" padding={4} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
+              <Icon icon={Wallet} size={8} color="#3b82f6" />
+            </Surface>
+            <Box style={{ textAlign: 'center' }}>
+              <Heading level={3}>Wallet Management</Heading>
+              <Text size="sm" color="text-gray-400" block mt={2}>
+                Interactive withdrawal and export features will be implemented in future updates.
+              </Text>
+            </Box>
+          </Stack>
         </Card>
-      </div>
-    </Section>
+      </Stack>
+    </Stack>
   );
-}
+}