fix: resolve TypeScript errors and improve NexusPrime typewriter animation

- Fixed toast duration property errors in app/home/page.tsx
- Removed invalid OnboardingOverlayProps currentDemo property
- Fixed duplicate property names in DisputeResolutionDemo.tsx
- Resolved undefined variable errors in DisputeResolutionDemo.tsx
- Fixed variable declaration order in HelloMilestoneDemo.tsx
- Corrected missing 'name' property in UserDashboard.tsx
- Completely rewrote NexusPrime typewriter animation to prevent freezing
- Simplified typewriter logic with useCallback and proper cleanup
- Removed complex message queue system for better reliability
- Enhanced performance with memoized functions and proper dependencies

Author: josegomez-dev

app/home/page.tsx

@@ -826,7 +826,6 @@ const DemoSelector = ({
                                 title: '👑 Nexus Master Unlocked!',
                                 message:
                                   'You have mastered all trustless work demos! Earned 200 XP and the legendary Nexus Master badge!',
-                                duration: 6000,
                               });
 
                               // Refresh account data to update UI
@@ -836,7 +835,6 @@ const DemoSelector = ({
                                 type: 'error',
                                 title: '❌ Claim Failed',
                                 message: 'Failed to claim Nexus Master badge. Please try again.',
-                                duration: 4000,
                               });
                             } finally {
                               setIsClaimingNexusMaster(false);
@@ -1005,10 +1003,10 @@ export default function HomePageContent() {
     isLoading: firebaseLoading,
     isInitialized,
   } = useFirebase();
+  const { addToast: addToastHook } = useToast();
   const [activeDemo, setActiveDemo] = useState('hello-milestone');
   // Note: submitFeedback removed from simplified Firebase context
   // Removed old AccountService usage
-  const { addToast } = useToast();
 
   // Check if user has unlocked mini-games access (earned all badges including Nexus Master)
   const miniGamesUnlocked = useMemo(() => {
@@ -1194,7 +1192,7 @@ export default function HomePageContent() {
           feedbackDemoData.completionTime
         );
 
-        addToast({
+        addToastHook({
           title: '🎉 Demo Completed!',
           message: `Great job completing ${feedbackDemoData.demoName}!`,
           type: 'success',
@@ -1203,7 +1201,7 @@ export default function HomePageContent() {
       }
     } catch (error) {
       // Failed to complete demo - error is shown in toast
-      addToast({
+      addToastHook({
         title: 'Error',
         message: 'Failed to complete demo. Please try again.',
         type: 'error',
@@ -1502,7 +1500,7 @@ export default function HomePageContent() {
                     setActiveDemo={setActiveDemo}
                     setShowImmersiveDemo={setShowImmersiveDemo}
                     isConnected={isConnected}
-                    addToast={addToast}
+                    addToast={(toast) => addToastHook({ ...toast, duration: 5000 })}
                     account={account}
                     demos={demos}
                     demoStats={demoStats}
@@ -1724,7 +1722,6 @@ export default function HomePageContent() {
           setShowOnboarding(false);
           setHasSeenOnboarding(true);
         }}
-        currentDemo={activeDemo}
       />
 
       {/* Immersive Demo Modal */}

components/demos/DisputeResolutionDemo.tsx

@@ -616,10 +616,6 @@ export const DisputeResolutionDemo = () => {
         message: `Resolving dispute for "${milestone?.title}" (${resolution})...`,
         type: 'dispute',
         demoId: 'dispute-resolution',
-        amount: milestone?.amount,
-        asset: 'USDC',
-        type: 'dispute',
-        demoId: 'dispute-resolution',
         amount: milestone?.amount ? (parseInt(milestone.amount) / 100000).toFixed(1) : '0',
         asset: 'USDC',
       });
@@ -725,8 +721,6 @@ export const DisputeResolutionDemo = () => {
         demoId: 'dispute-resolution',
         amount: milestone?.amount,
         asset: 'USDC',
-        type: 'dispute',
-        demoId: 'dispute-resolution',
       });
 
       addToast({
@@ -779,10 +773,6 @@ export const DisputeResolutionDemo = () => {
         message: 'Releasing all funds...',
         type: 'release',
         demoId: 'dispute-resolution',
-        amount: '10',
-        asset: 'USDC',
-        type: 'release',
-        demoId: 'dispute-resolution',
         amount: milestones.reduce((total, m) => total + parseInt(m.amount) / 100000, 0).toFixed(1),
         asset: 'USDC',
       });
@@ -821,8 +811,6 @@ export const DisputeResolutionDemo = () => {
         demoId: 'dispute-resolution',
         amount: '10',
         asset: 'USDC',
-        type: 'release',
-        demoId: 'dispute-resolution',
       });
 
       addToast({
@@ -848,8 +836,6 @@ export const DisputeResolutionDemo = () => {
     setEscrowData(null);
     setCurrentRole('client');
     setDisputes([]);
-    setNewDisputeReason('');
-    setResolutionReason('');
 
     // Reset milestone statuses
     const resetMilestones = milestones.map(m => ({ ...m, status: 'pending' as const }));

components/demos/HelloMilestoneDemo.tsx

@@ -189,6 +189,57 @@ export const HelloMilestoneDemo = ({
     };
   }, [transactionTimeouts]);
 
+  // Helper function to update transaction status and check for step completion
+  const updateTransactionStatusAndCheckCompletion = (
+    txHash: string,
+    status: 'pending' | 'success' | 'failed',
+    message: string
+  ) => {
+    // Only update transaction with success/failed status (updateTransaction expects these)
+    if (status === 'success' || status === 'failed') {
+      updateTransaction(txHash, status, message);
+    }
+    setTransactionStatuses(prev => ({ ...prev, [txHash]: status }));
+
+    if (status === 'success') {
+      // Clear any pending timeout for this transaction
+      const timeout = transactionTimeouts[txHash];
+      if (timeout) {
+        clearTimeout(timeout);
+        setTransactionTimeouts(prev => {
+          const newTimeouts = { ...prev };
+          delete newTimeouts[txHash];
+          return newTimeouts;
+        });
+      }
+
+      // Find which step this transaction belongs to
+      const stepId = Object.keys(pendingTransactions).find(
+        key => pendingTransactions[key] === txHash
+      );
+      if (stepId) {
+        // Remove from pending
+        setPendingTransactions(prev => {
+          const newPending = { ...prev };
+          delete newPending[stepId];
+          return newPending;
+        });
+
+        // Allow progression to next step
+        const stepOrder = ['initialize', 'fund', 'complete', 'approve', 'release'];
+        const currentIndex = stepOrder.indexOf(stepId);
+        if (currentIndex !== -1 && currentIndex + 1 <= stepOrder.length) {
+          setCurrentStep(currentIndex + 1);
+
+          // Show success
+          setTimeout(() => {
+            setShowProcessExplanation(false);
+          }, 1000);
+        }
+      }
+    }
+  };
+
   // Auto-completion countdown effect for better UX
   useEffect(() => {
     const intervals: Record<string, NodeJS.Timeout> = {};
@@ -260,57 +311,6 @@ export const HelloMilestoneDemo = ({
     return status === 'success';
   };
 
-  // Helper function to update transaction status and check for step completion
-  const updateTransactionStatusAndCheckCompletion = (
-    txHash: string,
-    status: 'pending' | 'success' | 'failed',
-    message: string
-  ) => {
-    // Only update transaction with success/failed status (updateTransaction expects these)
-    if (status === 'success' || status === 'failed') {
-      updateTransaction(txHash, status, message);
-    }
-    setTransactionStatuses(prev => ({ ...prev, [txHash]: status }));
-
-    if (status === 'success') {
-      // Clear any pending timeout for this transaction
-      const timeout = transactionTimeouts[txHash];
-      if (timeout) {
-        clearTimeout(timeout);
-        setTransactionTimeouts(prev => {
-          const newTimeouts = { ...prev };
-          delete newTimeouts[txHash];
-          return newTimeouts;
-        });
-      }
-
-      // Find which step this transaction belongs to
-      const stepId = Object.keys(pendingTransactions).find(
-        key => pendingTransactions[key] === txHash
-      );
-      if (stepId) {
-        // Remove from pending
-        setPendingTransactions(prev => {
-          const newPending = { ...prev };
-          delete newPending[stepId];
-          return newPending;
-        });
-
-        // Allow progression to next step
-        const stepOrder = ['initialize', 'fund', 'complete', 'approve', 'release'];
-        const currentIndex = stepOrder.indexOf(stepId);
-        if (currentIndex !== -1 && currentIndex + 1 <= stepOrder.length) {
-          setCurrentStep(currentIndex + 1);
-
-          // Show success
-          setTimeout(() => {
-            setShowProcessExplanation(false);
-          }, 1000);
-        }
-      }
-    }
-  };
-
   const getStepStatus = (
     stepIndex: number,
     stepId: string

components/layout/NexusPrime.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import Image from 'next/image';
 
 interface NexusPrimeProps {
@@ -16,12 +16,13 @@ export const NexusPrime: React.FC<NexusPrimeProps> = ({
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [currentMessage, setCurrentMessage] = useState('');
-  const [messageQueue, setMessageQueue] = useState<string[]>([]);
   const [isTyping, setIsTyping] = useState(false);
   const [showTutorial, setShowTutorial] = useState(false);
   const [tutorialStep, setTutorialStep] = useState(0);
   const [isSpeaking, setIsSpeaking] = useState(false);
   const [ttsEnabled, setTtsEnabled] = useState(true);
+  const lastProcessedMessageRef = useRef('');
+  const typewriterTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Tutorial steps for interactive guidance
   const tutorialSteps = [
@@ -131,7 +132,7 @@ export const NexusPrime: React.FC<NexusPrimeProps> = ({
   };
 
   // Get appropriate message based on current context
-  const getContextMessage = () => {
+  const getContextMessage = useCallback(() => {
     let message = '';
 
     if (currentPage === 'home') {
@@ -160,41 +161,54 @@ export const NexusPrime: React.FC<NexusPrimeProps> = ({
     return String(message)
       .replace(/undefined/g, '')
       .trim();
-  };
+  }, [currentPage, currentDemo, walletConnected]);
+
+  // Simple typewriter effect for messages
+  const startTypewriter = useCallback((message: string) => {
+    // Clear any existing timeout
+    if (typewriterTimeoutRef.current) {
+      clearTimeout(typewriterTimeoutRef.current);
+    }
 
-  // Typewriter effect for messages
+    setCurrentMessage('');
+    setIsTyping(true);
+
+    let index = 0;
+    const typeNextChar = () => {
+      if (index < message.length) {
+        const char = message[index];
+        if (char && char !== 'undefined') {
+          setCurrentMessage(prev => prev + char);
+        }
+        index++;
+        typewriterTimeoutRef.current = setTimeout(typeNextChar, 50);
+      } else {
+        setIsTyping(false);
+        typewriterTimeoutRef.current = null;
+      }
+    };
+
+    // Start typing after a small delay
+    typewriterTimeoutRef.current = setTimeout(typeNextChar, 100);
+  }, []);
+
+  // Effect to trigger typewriter when context changes
   useEffect(() => {
     const message = getContextMessage();
-    if (message && message !== currentMessage) {
-      setMessageQueue(prev => [...(prev || []), message]);
+    if (message && message !== lastProcessedMessageRef.current) {
+      lastProcessedMessageRef.current = message;
+      startTypewriter(message);
     }
-  }, [currentPage, currentDemo, walletConnected, currentMessage]);
+  }, [getContextMessage, startTypewriter]);
 
+  // Cleanup timeout on unmount
   useEffect(() => {
-    if (messageQueue && messageQueue.length > 0 && !isTyping) {
-      const nextMessage = messageQueue[0];
-      if (nextMessage) {
-        setMessageQueue(prev => prev.slice(1));
-        setCurrentMessage('');
-        setIsTyping(true);
-
-        let index = 0;
-        const typeInterval = setInterval(() => {
-          if (index < nextMessage.length) {
-            const char = nextMessage[index];
-            // Only add valid characters, skip undefined or null
-            if (char && char !== 'undefined') {
-              setCurrentMessage(prev => prev + char);
-            }
-            index++;
-          } else {
-            setIsTyping(false);
-            clearInterval(typeInterval);
-          }
-        }, 50);
+    return () => {
+      if (typewriterTimeoutRef.current) {
+        clearTimeout(typewriterTimeoutRef.current);
       }
-    }
-  }, [messageQueue, isTyping]);
+    };
+  }, []);
 
   // Removed problematic auto-hide mechanism that was causing button to disappear
 
@@ -417,50 +431,6 @@ export const NexusPrime: React.FC<NexusPrimeProps> = ({
                         )}
                       </p>
 
-                      {/* TTS Controls for Regular Chat */}
-                      <div className='mt-2 flex items-center justify-between'>
-                        <span className='text-xs text-white/60'>Voice Assistant:</span>
-                        <div className='flex items-center space-x-2'>
-                          {/* Play Button */}
-                          <button
-                            onClick={() => {
-                              if (ttsEnabled && currentMessage) {
-                                speakMessage(currentMessage);
-                              }
-                            }}
-                            disabled={!ttsEnabled || !currentMessage || isSpeaking}
-                            className={`px-3 py-1 rounded-lg transition-all duration-200 hover:scale-105 text-xs ${
-                              !ttsEnabled || !currentMessage || isSpeaking
-                                ? 'bg-gray-500/20 text-gray-400 border border-gray-400/30 cursor-not-allowed'
-                                : 'bg-gradient-to-r from-blue-500/20 to-indigo-600/20 border border-blue-400/50 text-blue-300 hover:bg-gradient-to-r hover:from-blue-500/30 hover:to-indigo-600/30'
-                            }`}
-                            title={
-                              !ttsEnabled
-                                ? 'Voice is disabled'
-                                : !currentMessage
-                                  ? 'No message to play'
-                                  : isSpeaking
-                                    ? 'Already speaking'
-                                    : 'Play message with voice'
-                            }
-                          >
-                            {isSpeaking ? '⏸️' : '▶️'}
-                          </button>
-
-                          {/* TTS Toggle */}
-                          <button
-                            onClick={toggleTts}
-                            className={`px-3 py-1 rounded-lg transition-all duration-200 hover:scale-105 text-xs ${
-                              ttsEnabled
-                                ? 'bg-gradient-to-r from-green-500/20 to-emerald-600/20 border border-green-400/50 text-green-300'
-                                : 'bg-gradient-to-r from-red-500/20 to-pink-600/20 border border-red-400/50 text-red-300'
-                            }`}
-                            title={ttsEnabled ? 'Disable Voice' : 'Enable Voice'}
-                          >
-                            {ttsEnabled ? '🔊 ON' : '🔇 OFF'}
-                          </button>
-                        </div>
-                      </div>
                     </div>
                   )}
                 </div>