website refactor

apps/website/components/leagues/WalletSummaryPanel.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Surface } from '@/ui/Surface';
@@ -30,7 +29,7 @@ export function WalletSummaryPanel({ balance, currency, transactions, onDeposit,
     <Stack gap={6}>
       <Surface variant="dark" border rounded="lg" padding={8} position="relative" overflow="hidden">
         {/* Background Pattern */}
-        <Box 
+        <Stack 
           position="absolute" 
           top="-5rem" 
           right="-5rem" 
@@ -74,26 +73,26 @@ export function WalletSummaryPanel({ balance, currency, transactions, onDeposit,
       </Surface>
 
       <Surface variant="dark" border rounded="lg" overflow="hidden">
-        <Box px={6} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
+        <Stack px={6} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
           <Stack direction="row" align="center" gap={2}>
             <Icon icon={History} size={4} color="text-primary-blue" />
             <Text weight="bold" letterSpacing="wider" size="sm" display="block">
               RECENT TRANSACTIONS
             </Text>
           </Stack>
-        </Box>
+        </Stack>
 
         <Stack gap={0}>
           {transactions.length === 0 ? (
-            <Box py={12} center>
+            <Stack py={12} center>
               <Text color="text-gray-500">No recent transactions.</Text>
-            </Box>
+            </Stack>
           ) : (
             transactions.map((tx) => (
-              <Box key={tx.id} p={4} borderBottom borderColor="border-charcoal-outline" hoverBg="bg-white/5" transition>
+              <Stack key={tx.id} p={4} borderBottom borderColor="border-charcoal-outline" hoverBg="bg-white/5" transition>
                 <Stack direction="row" justify="between" align="center">
                   <Stack direction="row" align="center" gap={4}>
-                    <Box 
+                    <Stack 
                       center 
                       w={10} 
                       h={10} 
@@ -105,7 +104,7 @@ export function WalletSummaryPanel({ balance, currency, transactions, onDeposit,
                         size={4} 
                         color={tx.type === 'credit' ? 'text-performance-green' : 'text-error-red'} 
                       />
-                    </Box>
+                    </Stack>
                     <Stack gap={0.5}>
                       <Text weight="medium" color="text-white">{tx.description}</Text>
                       <Text size="xs" color="text-gray-500">{new Date(tx.date).toLocaleDateString()}</Text>
@@ -118,7 +117,7 @@ export function WalletSummaryPanel({ balance, currency, transactions, onDeposit,
                     {tx.type === 'credit' ? '+' : '-'}{tx.amount.toFixed(2)}
                   </Text>
                 </Stack>
-              </Box>
+              </Stack>
             ))
           )}
         </Stack>