website refactor

apps/website/client-wrapper/LeagueWalletPageClient.tsx

@@ -1,26 +1,16 @@
 'use client';
 
-import { WalletSummaryPanel } from '@/components/leagues/WalletSummaryPanel';
 import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
-import { Box } from '@/ui/Box';
-import { Button } from '@/ui/Button';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Icon as UIIcon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import {
-  Download
-} from 'lucide-react';
+import { LeagueWalletTemplate } from '@/templates/LeagueWalletTemplate';
+import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
 
-interface WalletTemplateProps {
-  viewData: LeagueWalletViewData;
+interface LeagueWalletPageClientProps extends ClientWrapperProps<LeagueWalletViewData> {
   onWithdraw?: (amount: number) => void;
   onExport?: () => void;
   mutationLoading?: boolean;
 }
 
-export function LeagueWalletPageClient({ viewData, onExport }: WalletTemplateProps) {
+export function LeagueWalletPageClient({ viewData, onExport }: LeagueWalletPageClientProps) {
   // Map transactions to the format expected by WalletSummaryPanel
   const transactions = viewData.transactions.map(t => ({
     id: t.id,
@@ -31,36 +21,10 @@ export function LeagueWalletPageClient({ viewData, onExport }: WalletTemplatePro
   }));
 
   return (
-    <Container size="lg" py={8}>
-      {/* Header */}
-      <Box display="flex" alignItems="center" justifyContent="between" mb={8}>
-        <Box>
-          <Heading level={1}>League Wallet</Heading>
-          <Text color="text-gray-400">Manage your league&apos;s finances and payouts</Text>
-        </Box>
-        <Button variant="secondary" onClick={onExport}>
-          <Stack direction="row" align="center" gap={2}>
-            <UIIcon icon={Download} size={4} />
-            <Text>Export</Text>
-          </Stack>
-        </Button>
-      </Box>
-
-      <WalletSummaryPanel 
-        balance={viewData.balance}
-        currency="USD"
-        transactions={transactions}
-        onDeposit={() => {}} // Not implemented for leagues yet
-        onWithdraw={() => {}} // Not implemented for leagues yet
-      />
-
-      {/* Alpha Notice */}
-      <Box mt={6} rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30" p={4}>
-        <Text size="xs" color="text-gray-400">
-          <Text weight="bold" color="text-warning-amber">Alpha Note:</Text> Wallet management is demonstration-only.
-          Real payment processing and bank integrations will be available when the payment system is fully implemented.
-        </Text>
-      </Box>
-    </Container>
+    <LeagueWalletTemplate
+      viewData={viewData}
+      onExport={onExport}
+      transactions={transactions}
+    />
   );
 }