Clean up and fixes

src/tui/screens/WalletState.tsx

@@ -43,7 +43,7 @@ interface UTXOItem {
  */
 export function WalletStateScreen(): React.ReactElement {
   const { navigate } = useNavigation();
-  const { walletController, showError, showInfo } = useAppContext();
+  const { appService, showError, showInfo } = useAppContext();
   const { setStatus } = useStatus();
 
   // State
@@ -57,19 +57,17 @@ export function WalletStateScreen(): React.ReactElement {
    * Refreshes wallet state.
    */
   const refresh = useCallback(async () => {
+    if (!appService) {
+      showError('AppService not initialized');
+      return;
+    }
+
     try {
       setIsLoading(true);
       setStatus('Loading wallet state...');
 
-      // Get balance
-      const balanceData = await walletController.getBalance();
-      setBalance({
-        totalSatoshis: balanceData.totalSatoshis,
-        utxoCount: balanceData.utxoCount,
-      });
-
       // Get UTXOs
-      const utxoData = await walletController.getUnspentOutputs();
+      const utxoData = await appService.engine.listUnspentOutputsData();
       setUtxos(utxoData.map((utxo) => ({
         key: `${utxo.outpointTransactionHash}:${utxo.outpointIndex}`,
         satoshis: BigInt(utxo.valueSatoshis),
@@ -78,13 +76,20 @@ export function WalletStateScreen(): React.ReactElement {
         reserved: utxo.reserved ?? false,
       })));
 
+      // Get balance
+      const balanceData = utxoData.reduce((acc, utxo) => acc + BigInt(utxo.valueSatoshis), BigInt(0));
+      setBalance({
+        totalSatoshis: balanceData,
+        utxoCount: utxoData.length,  
+      });
+
       setStatus('Wallet ready');
       setIsLoading(false);
     } catch (error) {
       showError(`Failed to load wallet state: ${error instanceof Error ? error.message : String(error)}`);
       setIsLoading(false);
     }
-  }, [walletController, setStatus, showError]);
+  }, [appService, setStatus, showError]);
 
   // Load wallet state on mount
   useEffect(() => {
@@ -95,11 +100,16 @@ export function WalletStateScreen(): React.ReactElement {
    * Generates a new receiving address.
    */
   const generateNewAddress = useCallback(async () => {
+    if (!appService) {
+      showError('AppService not initialized');
+      return;
+    }
+
     try {
       setStatus('Generating new address...');
 
       // Get the default P2PKH template
-      const templates = await walletController.getTemplates();
+      const templates = await appService.engine.listImportedTemplates();
       const p2pkhTemplate = templates.find(t => t.name?.includes('P2PKH'));
 
       if (!p2pkhTemplate) {
@@ -111,7 +121,7 @@ export function WalletStateScreen(): React.ReactElement {
       const { generateTemplateIdentifier } = await import('@xo-cash/engine');
       const templateId = generateTemplateIdentifier(p2pkhTemplate);
 
-      const lockingBytecode = await walletController.generateLockingBytecode(
+      const lockingBytecode = await appService.engine.generateLockingBytecode(
         templateId,
         'receiveOutput',
         'receiver',
@@ -124,7 +134,7 @@ export function WalletStateScreen(): React.ReactElement {
     } catch (error) {
       showError(`Failed to generate address: ${error instanceof Error ? error.message : String(error)}`);
     }
-  }, [walletController, setStatus, showInfo, showError, refresh]);
+  }, [appService, setStatus, showInfo, showError, refresh]);
 
   /**
    * Handles menu selection.
@@ -164,29 +174,29 @@ export function WalletStateScreen(): React.ReactElement {
   }));
 
   return (
-    <Box flexDirection="column" flexGrow={1}>
+    <Box flexDirection='column' flexGrow={1}>
       {/* Header */}
-      <Box borderStyle="single" borderColor={colors.secondary} paddingX={1}>
+      <Box borderStyle='single' borderColor={colors.secondary} paddingX={1}>
         <Text color={colors.primary} bold>{logoSmall} - Wallet Overview</Text>
       </Box>
 
       {/* Main content */}
-      <Box flexDirection="row" marginTop={1} flexGrow={1}>
+      <Box flexDirection='row' marginTop={1} flexGrow={1}>
         {/* Left column: Balance */}
         <Box 
-          flexDirection="column" 
-          width="50%" 
+          flexDirection='column' 
+          width='50%' 
           paddingRight={1}
         >
           <Box
-            borderStyle="single"
+            borderStyle='single'
             borderColor={colors.primary}
-            flexDirection="column"
+            flexDirection='column'
             paddingX={1}
             paddingY={1}
           >
             <Text color={colors.primary} bold> Balance </Text>
-            <Box marginTop={1} flexDirection="column">
+            <Box marginTop={1} flexDirection='column'>
               <Text color={colors.text}>Total Balance:</Text>
               {balance ? (
                 <>
@@ -206,14 +216,14 @@ export function WalletStateScreen(): React.ReactElement {
 
         {/* Right column: Actions menu */}
         <Box 
-          flexDirection="column" 
-          width="50%" 
+          flexDirection='column' 
+          width='50%' 
           paddingLeft={1}
         >
           <Box
-            borderStyle="single"
+            borderStyle='single'
             borderColor={focusedPanel === 'menu' ? colors.focus : colors.border}
-            flexDirection="column"
+            flexDirection='column'
             paddingX={1}
           >
             <Text color={colors.primary} bold> Actions </Text>
@@ -244,14 +254,14 @@ export function WalletStateScreen(): React.ReactElement {
       {/* UTXO list */}
       <Box marginTop={1} flexGrow={1}>
         <Box
-          borderStyle="single"
+          borderStyle='single'
           borderColor={focusedPanel === 'utxos' ? colors.focus : colors.border}
-          flexDirection="column"
+          flexDirection='column'
           paddingX={1}
-          width="100%"
+          width='100%'
         >
           <Text color={colors.primary} bold> Unspent Outputs (UTXOs) </Text>
-          <Box marginTop={1} flexDirection="column">
+          <Box marginTop={1} flexDirection='column'>
             {isLoading ? (
               <Text color={colors.textMuted}>Loading...</Text>
             ) : utxoListItems.length === 0 ? (