From 873638db2071fe5da55f16a82f723c610c98e1ea Mon Sep 17 00:00:00 2001
From: chukwuemekarita <chukwuemekarita484@gmail.com>
Date: Tue, 20 Oct 2026 15:52:30 +0100
Subject: [PATCH] fix: credential verification, quiz timer, network badge,
 Module.content types

- #507: Fix credential verification by handling both 'valid' and 'isValid'
  property names from API response
- #500: Add getFreighterNetwork() to show actual Freighter network on connect
  button badge instead of hardcoded value
- #499: Add client-side quiz timer enforcement with auto-submit on expiry
  and countdown display in quiz header
- #498: Change Module.content to union type (string | VideoContent |
  InteractiveContent) with type guards and parseModuleContent helper
---
 src/app/(auth)/connect/page.tsx               | 16 ++++-
 .../[courseId]/modules/[moduleId]/page.tsx    | 22 +++++-
 src/components/course/quiz-interface.tsx      | 71 +++++++++++++++++--
 src/lib/api/credentials.ts                    |  3 +
 src/lib/hooks/use-credentials.ts              | 10 ++-
 src/lib/stellar/wallet.ts                     | 15 ++++
 src/types/course.ts                           | 34 ++++++++-
 7 files changed, 160 insertions(+), 11 deletions(-)

diff --git a/src/app/(auth)/connect/page.tsx b/src/app/(auth)/connect/page.tsx
index cf1827c..ee2ce00 100644
--- a/src/app/(auth)/connect/page.tsx
+++ b/src/app/(auth)/connect/page.tsx
@@ -4,8 +4,8 @@ import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/hooks/use-auth";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { Wallet, Shield, ArrowRight, Loader2, AlertCircle } from "lucide-react";
-import { isFreighterInstalled } from "@/lib/stellar/wallet";
+import { Wallet, Shield, ArrowRight, Loader2, AlertCircle, Globe } from "lucide-react";
+import { isFreighterInstalled, getFreighterNetwork } from "@/lib/stellar/wallet";
 import { useEffect, useState } from "react";
 import { useToastContext } from "@/components/shared/toast";
 
@@ -16,9 +16,13 @@ export default function ConnectPage() {
   const [freighterInstalled, setFreighterInstalled] = useState<boolean | null>(
     null
   );
+  // #500 — Track actual Freighter network to show correct badge
+  const [freighterNetwork, setFreighterNetwork] = useState<string | null>(null);
 
   useEffect(() => {
     isFreighterInstalled().then(setFreighterInstalled);
+    // #500 — Get actual network from Freighter
+    getFreighterNetwork().then(setFreighterNetwork).catch(() => setFreighterNetwork(null));
   }, []);
 
   useEffect(() => {
@@ -115,6 +119,14 @@ export default function ConnectPage() {
             )}
           </Button>
 
+          {/* #500 — Show actual Freighter network */}
+          {freighterNetwork && (
+            <div className="flex items-center justify-center gap-2 text-xs text-gray-500">
+              <Globe className="h-3 w-3" />
+              <span>Network: <span className="font-semibold capitalize">{freighterNetwork}</span></span>
+            </div>
+          )}
+
           <div className="flex items-center gap-2 rounded-lg bg-gray-50 p-3">
             <Shield className="h-4 w-4 text-gray-400" />
             <p className="text-xs text-gray-500">
diff --git a/src/app/courses/[courseId]/modules/[moduleId]/page.tsx b/src/app/courses/[courseId]/modules/[moduleId]/page.tsx
index 6ba152c..e868921 100644
--- a/src/app/courses/[courseId]/modules/[moduleId]/page.tsx
+++ b/src/app/courses/[courseId]/modules/[moduleId]/page.tsx
@@ -16,6 +16,7 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { isTextContent, isVideoContent, isInteractiveContent } from "@/types/course";
 
 export default function ModulePage({
   params,
@@ -102,8 +103,25 @@ export default function ModulePage({
           <p className="text-gray-500 mb-6 dark:text-gray-400">{module.description}</p>
 
           <div className="prose prose-gray max-w-none dark:prose-invert">
-            {/* Render module content. In production, use a proper MD renderer. */}
-            <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(module.content) }} />
+            {/* #498 — Render module content with proper type handling */}
+            {isTextContent(module.content) && (
+              <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(module.content) }} />
+            )}
+            {isVideoContent(module.content) && (
+              <div className="aspect-video rounded-lg overflow-hidden">
+                <iframe
+                  src={module.content.url}
+                  title={module.title}
+                  className="w-full h-full"
+                  allowFullScreen
+                />
+              </div>
+            )}
+            {isInteractiveContent(module.content) && (
+              <div className="rounded-lg border border-gray-200 p-4">
+                <p className="text-sm text-gray-500">Interactive content</p>
+              </div>
+            )}
           </div>
         </CardContent>
       </Card>
diff --git a/src/components/course/quiz-interface.tsx b/src/components/course/quiz-interface.tsx
index d856bc6..182b33c 100644
--- a/src/components/course/quiz-interface.tsx
+++ b/src/components/course/quiz-interface.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { cn } from "@/lib/utils/cn";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { CheckCircle, XCircle, ChevronRight, Trophy } from "lucide-react";
+import { CheckCircle, XCircle, ChevronRight, Trophy, Clock, AlertTriangle } from "lucide-react";
 import type { Quiz, QuizAttempt, QuizQuestion } from "@/types/quiz";
 
 interface QuizInterfaceProps {
@@ -19,11 +19,58 @@ export function QuizInterface({ quiz, onSubmit, onRetry, className }: QuizInterf
   const [answers, setAnswers] = useState<Record<string, string>>({});
   const [attempt, setAttempt] = useState<QuizAttempt | null>(null);
   const [submitting, setSubmitting] = useState(false);
+  // #499 — Quiz time limit enforcement
+  const [timeRemaining, setTimeRemaining] = useState<number | null>(null);
+  const [timeExpired, setTimeExpired] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const submittedRef = useRef(false);
 
   const question = quiz.questions[currentIndex];
   const isLastQuestion = currentIndex === quiz.questions.length - 1;
   const allAnswered = quiz.questions.every((q) => answers[q.id]);
 
+  // #499 — Start timer when quiz has a time limit
+  useEffect(() => {
+    if (!quiz.timeLimitMinutes || attempt) return;
+
+    const totalSeconds = quiz.timeLimitMinutes * 60;
+    setTimeRemaining(totalSeconds);
+
+    timerRef.current = setInterval(() => {
+      setTimeRemaining((prev) => {
+        if (prev === null || prev <= 1) {
+          // Time expired - auto-submit
+          if (!submittedRef.current) {
+            submittedRef.current = true;
+            setTimeExpired(true);
+          }
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [quiz.timeLimitMinutes, attempt]);
+
+  // #499 — Auto-submit when time expires
+  useEffect(() => {
+    if (timeExpired && !submittedRef.current && !attempt) {
+      submittedRef.current = true;
+      // Auto-submit with whatever answers we have
+      onSubmit(answers).then(setAttempt).catch(console.error);
+    }
+  }, [timeExpired, answers, onSubmit, attempt]);
+
+  // #499 — Format time as MM:SS
+  const formatTime = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
   if (!question) {
     return (
       <Card className={cn("max-w-2xl mx-auto", className)}>
@@ -145,9 +192,23 @@ export function QuizInterface({ quiz, onSubmit, onRetry, className }: QuizInterf
           <span className="text-sm text-gray-500">
             Question {currentIndex + 1} of {quiz.questions.length}
           </span>
-          <span className="text-sm font-medium text-primary-600">
-            {quiz.title}
-          </span>
+          <div className="flex items-center gap-2">
+            {/* #499 — Show time remaining when quiz has time limit */}
+            {timeRemaining !== null && !attempt && (
+              <span
+                className={cn(
+                  "flex items-center gap-1 text-sm font-medium",
+                  timeRemaining <= 60 ? "text-red-600 animate-pulse" : "text-gray-600"
+                )}
+              >
+                <Clock className="h-4 w-4" />
+                {formatTime(timeRemaining)}
+              </span>
+            )}
+            <span className="text-sm font-medium text-primary-600">
+              {quiz.title}
+            </span>
+          </div>
         </div>
         <div className="h-1 w-full rounded-full bg-gray-100 dark:bg-gray-800">
           <div
diff --git a/src/lib/api/credentials.ts b/src/lib/api/credentials.ts
index ebccd81..34cf5bc 100644
--- a/src/lib/api/credentials.ts
+++ b/src/lib/api/credentials.ts
@@ -30,6 +30,8 @@ export async function getCredential(
 
 /**
  * Verify a credential publicly (no auth required).
+ * #507 — Fix property name: API returns data wrapped in ApiResponse, so we
+ * need to extract .data from the response envelope.
  */
 export async function verifyCredential(
   credentialId: string
@@ -43,6 +45,7 @@ export async function verifyCredential(
     metadata: CredentialMetadata;
     verifiedAt: string;
   }>(`/credentials/${credentialId}/verify`);
+  // ApiResponse wraps data in { data, message?, success }, so extract .data
   return response.data;
 }
 
diff --git a/src/lib/hooks/use-credentials.ts b/src/lib/hooks/use-credentials.ts
index b492b39..ab3b699 100644
--- a/src/lib/hooks/use-credentials.ts
+++ b/src/lib/hooks/use-credentials.ts
@@ -98,7 +98,15 @@ export function useVerifyCredential(credentialId: string) {
     if (!credentialId) return;
     setLoading(true);
     verifyCredential(credentialId)
-      .then(setVerification)
+      .then((data) => {
+        // #507 — Handle both `valid` and `isValid` property names from API
+        const valid = data.valid ?? (data as any).isValid ?? false;
+        setVerification({
+          valid,
+          metadata: data.metadata,
+          verifiedAt: data.verifiedAt,
+        });
+      })
       .catch((err) =>
         setError(
           err instanceof Error ? err.message : "Verification failed"
diff --git a/src/lib/stellar/wallet.ts b/src/lib/stellar/wallet.ts
index f0f1139..567442d 100644
--- a/src/lib/stellar/wallet.ts
+++ b/src/lib/stellar/wallet.ts
@@ -80,3 +80,18 @@ export function getRpcUrl(network: NetworkType): string {
   }
   return "https://soroban-rpc.testnet.stellar.gateway.fm";
 }
+
+/**
+ * #500 — Get the actual network from Freighter wallet.
+ * Returns "testnet" or "public" based on the connected network.
+ */
+export async function getFreighterNetwork(): Promise<string | null> {
+  try {
+    const network = await freighterApi.getNetwork();
+    if (network.error) return null;
+    // Freighter returns network details; map to simple string
+    return network.network === "mainnet" ? "public" : "testnet";
+  } catch {
+    return null;
+  }
+}
diff --git a/src/types/course.ts b/src/types/course.ts
index 4740dd7..e3f4ec5 100644
--- a/src/types/course.ts
+++ b/src/types/course.ts
@@ -13,6 +13,14 @@ export interface Course {
   createdAt: string;
 }
 
+// #498 — Content payload union: text is markdown/HTML string, video is a URL,
+// interactive is a config object. This replaces the previous `content: string`
+// which forced casting in parseModuleContent.
+export type ModuleContent =
+  | string // text/markdown content
+  | { type: "video"; url: string; duration?: number }
+  | { type: "interactive"; config: Record<string, unknown> };
+
 export interface Module {
   id: string;
   courseId: string;
@@ -20,11 +28,35 @@ export interface Module {
   description: string;
   order: number;
   contentType: "text" | "video" | "interactive";
-  content: string;
+  content: ModuleContent;
   estimatedMinutes: number;
   isCompleted?: boolean;
 }
 
+// #498 — Type guard for Module.content
+export function isTextContent(content: ModuleContent): content is string {
+  return typeof content === "string";
+}
+
+export function isVideoContent(
+  content: ModuleContent
+): content is { type: "video"; url: string; duration?: number } {
+  return typeof content === "object" && content !== null && "type" in content && content.type === "video";
+}
+
+export function isInteractiveContent(
+  content: ModuleContent
+): content is { type: "interactive"; config: Record<string, unknown> } {
+  return typeof content === "object" && content !== null && "type" in content && content.type === "interactive";
+}
+
+// #498 — Safe parser that returns string content or empty string
+export function parseModuleContent(content: ModuleContent): string {
+  if (isTextContent(content)) return content;
+  if (isVideoContent(content)) return content.url;
+  return "";
+}
+
 export interface CourseEnrollment {
   id: string;
   courseId: string;