feat(demo): fix transaction explorer links and enhance score tracking

- Fix hardcoded stellar.expert URLs to dynamically detect testnet/mainnet
- Update HelloMilestoneDemo, EscrowInitializer, and EscrowDisplay components
- Add comprehensive demo completion history tracking system
- Create useDemoCompletionHistory hook for persistent score storage
- Add DemoCompletionHistory component with expandable history view
- Track completion time, cumulative points, best scores, and averages
- Show completion badges and detailed statistics
- Install date-fns for better date formatting
- Add comprehensive test coverage for completion history functionality

Author: josegomez-dev

__tests__/hooks/useDemoCompletionHistory.test.ts

@@ -0,0 +1,133 @@
+import { renderHook, act } from '@testing-library/react';
+import { useDemoCompletionHistory } from '../../hooks/useDemoCompletionHistory';
+
+// Mock the contexts
+jest.mock('../../contexts/WalletContext', () => ({
+  useGlobalWallet: () => ({
+    walletData: {
+      publicKey: 'test-wallet-address',
+      network: 'TESTNET',
+      isMainnet: false,
+    },
+    isConnected: true,
+  }),
+}));
+
+jest.mock('../../contexts/ToastContext', () => ({
+  useToast: () => ({
+    addToast: jest.fn(),
+  }),
+}));
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+  clear: jest.fn(),
+};
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock,
+});
+
+describe('useDemoCompletionHistory', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    localStorageMock.getItem.mockReturnValue(null);
+  });
+
+  it('should initialize with empty history', () => {
+    const { result } = renderHook(() => useDemoCompletionHistory());
+    
+    expect(result.current.completionHistory).toEqual([]);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('should add completion record', () => {
+    const { result } = renderHook(() => useDemoCompletionHistory());
+    
+    act(() => {
+      result.current.addCompletion({
+        demoId: 'hello-milestone',
+        demoName: 'Baby Steps to Riches',
+        score: 85,
+        pointsEarned: 85,
+        completionTime: 120,
+        isFirstCompletion: true,
+      });
+    });
+
+    expect(result.current.completionHistory).toHaveLength(1);
+    expect(result.current.completionHistory[0]).toMatchObject({
+      demoId: 'hello-milestone',
+      demoName: 'Baby Steps to Riches',
+      score: 85,
+      pointsEarned: 85,
+      completionTime: 120,
+      isFirstCompletion: true,
+    });
+  });
+
+  it('should calculate demo statistics correctly', () => {
+    const { result } = renderHook(() => useDemoCompletionHistory());
+    
+    // Add multiple completions
+    act(() => {
+      result.current.addCompletion({
+        demoId: 'hello-milestone',
+        demoName: 'Baby Steps to Riches',
+        score: 80,
+        pointsEarned: 80,
+        completionTime: 120,
+        isFirstCompletion: true,
+      });
+    });
+
+    act(() => {
+      result.current.addCompletion({
+        demoId: 'hello-milestone',
+        demoName: 'Baby Steps to Riches',
+        score: 90,
+        pointsEarned: 20, // 25% of original for replay
+        completionTime: 100,
+        isFirstCompletion: false,
+      });
+    });
+
+    expect(result.current.getCompletionCount('hello-milestone')).toBe(2);
+    expect(result.current.getTotalPointsEarned('hello-milestone')).toBe(100);
+    expect(result.current.getBestScore('hello-milestone')).toBe(90);
+    expect(result.current.getAverageScore('hello-milestone')).toBe(85);
+  });
+
+  it('should filter demo history by demo ID', () => {
+    const { result } = renderHook(() => useDemoCompletionHistory());
+    
+    act(() => {
+      result.current.addCompletion({
+        demoId: 'hello-milestone',
+        demoName: 'Baby Steps to Riches',
+        score: 85,
+        pointsEarned: 85,
+        completionTime: 120,
+        isFirstCompletion: true,
+      });
+    });
+
+    act(() => {
+      result.current.addCompletion({
+        demoId: 'other-demo',
+        demoName: 'Other Demo',
+        score: 90,
+        pointsEarned: 90,
+        completionTime: 100,
+        isFirstCompletion: true,
+      });
+    });
+
+    const helloMilestoneHistory = result.current.getDemoHistory('hello-milestone');
+    expect(helloMilestoneHistory).toHaveLength(1);
+    expect(helloMilestoneHistory[0].demoId).toBe('hello-milestone');
+  });
+});

components/EscrowDisplay.tsx

@@ -2,9 +2,11 @@
 
 import { useEscrowContext } from '@/contexts/EscrowContext';
 import { MultiReleaseEscrow } from '@/contexts/EscrowContext';
+import { useGlobalWallet } from '@/contexts/WalletContext';
 
 export const EscrowDisplay = () => {
   const { escrowData } = useEscrowContext();
+  const { walletData } = useGlobalWallet();
 
   if (!escrowData) {
     return null;
@@ -175,7 +177,11 @@ export const EscrowDisplay = () => {
       {/* Stellar Viewer Link */}
       <div className='mt-6 text-center'>
         <a
-          href={`https://stellar.expert/explorer/testnet/contract/${escrowData.contractId}`}
+          href={(() => {
+            const isTestnet = walletData?.network === 'TESTNET' || !walletData?.isMainnet;
+            const networkSuffix = isTestnet ? 'testnet' : 'public';
+            return `https://stellar.expert/explorer/${networkSuffix}/contract/${escrowData.contractId}`;
+          })()}
           target='_blank'
           rel='noopener noreferrer'
           className='inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700 transition-colors'

components/EscrowInitializer.tsx

@@ -101,7 +101,10 @@ export const EscrowInitializer = () => {
   };
 
   const getStellarViewerUrl = (contractId: string) => {
-    return `https://stellar.expert/explorer/testnet/contract/${contractId}`;
+    // Determine network-specific URL based on wallet data
+    const isTestnet = walletData?.network === 'TESTNET' || !walletData?.isMainnet;
+    const networkSuffix = isTestnet ? 'testnet' : 'public';
+    return `https://stellar.expert/explorer/${networkSuffix}/contract/${contractId}`;
   };
 
   if (!isConnected) {