From 5b5314593ff20e2e869ca0c9b505ac5b95b8f49e Mon Sep 17 00:00:00 2001
From: DooseWayo <“doosewayo94@gmail.com”>
Date: Mon, 31 Aug 2026 09:32:48 +0100
Subject: [PATCH] Duplicate ProtectedRoute import from two modules

---
 frontend/src/App.tsx                          | 39 +++--------
 .../components/agents/AgentDetailModal.tsx    |  1 +
 frontend/src/components/agents/AgentTable.tsx | 14 +---
 .../components/agents/TaskSubmissionForm.tsx  | 10 +--
 frontend/src/components/common/DataTable.tsx  |  2 +-
 .../src/components/common/FormField.test.tsx  |  2 +-
 .../src/components/common/ProtectedRoute.tsx  | 18 -----
 frontend/src/components/landing/Hero.tsx      | 11 ++--
 .../src/components/wallet/SendXLMForm.tsx     | 65 ++++++++++++-------
 .../components/wallet/TransactionTable.tsx    | 22 -------
 frontend/src/context/ToastContext.tsx         | 36 +---------
 frontend/src/pages/dashboard.tsx              |  6 --
 12 files changed, 63 insertions(+), 163 deletions(-)
 delete mode 100644 frontend/src/components/common/ProtectedRoute.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6bed989f..89519e8e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -17,41 +17,16 @@ import RendererDemoPage from './pages/RendererDemoPage'
 import WalletPage from './pages/WalletPage'
 import DashboardPage from './pages/dashboard'
 import ErrorBoundary from './components/common/ErrorBoundary'
-import { ProtectedRoute } from './components/common/ProtectedRoute'
+import { ProtectedRoute } from './components/auth/ProtectedRoute'
 import { CommandPalette } from './components/common/CommandPalette'
 import { useCommandPalette } from './hooks/useCommandPalette'
-import { ProtectedRoute } from './components/auth/ProtectedRoute'
 import './components/common/Toast.css'
 
 /**
- * Everything that needs router context lives here, so `<Router>` (mounted by
- * `App` below) is already in place before `useCommandPalette` calls
- * `useNavigate`.
+ * AppContent lives inside <Router> so that useCommandPalette() (which calls
+ * useNavigate()) has a router context available.
  */
 const AppContent: React.FC = () => {
-  return (
-    <Router>
-      <AppShell>
-        <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
-          <Route path="/wallet" element={<WalletPage />} />
-          <Route path="/agents" element={<AgentsPage />} />
-          <Route path="/tasks/new" element={<ProtectedRoute><NewTaskPage /></ProtectedRoute>} />
-          <Route path="/tasks/:id" element={<ProtectedRoute><TaskDetailPage /></ProtectedRoute>} />
-          <Route path="/renderer-demo" element={<RendererDemoPage />} />
-        </Routes>
-      </AppShell>
-    <NotificationProvider>
-      <RoutedContent />
-    </NotificationProvider>
-  )
-}
-
-// Lives INSIDE <Router>: useCommandPalette() calls useNavigate(), which
-// throws the "may be used only in the context of a <Router>" invariant when
-// rendered above it.
-const RoutedContent: React.FC = () => {
   const { isOpen, closePalette, search, recentSearches } = useCommandPalette()
 
   return (
@@ -109,9 +84,11 @@ const App: React.FC = () => {
         <ThemeProvider>
           <WalletProvider>
             <ToastProvider>
-              <Router>
-                <AppContent />
-              </Router>
+              <NotificationProvider>
+                <Router>
+                  <AppContent />
+                </Router>
+              </NotificationProvider>
             </ToastProvider>
           </WalletProvider>
         </ThemeProvider>
diff --git a/frontend/src/components/agents/AgentDetailModal.tsx b/frontend/src/components/agents/AgentDetailModal.tsx
index 952679c6..7391392d 100644
--- a/frontend/src/components/agents/AgentDetailModal.tsx
+++ b/frontend/src/components/agents/AgentDetailModal.tsx
@@ -17,6 +17,7 @@ interface AgentDetailModalProps {
 
 export function AgentDetailModal({ agent, onClose }: AgentDetailModalProps) {
   const { t } = useTranslation()
+  const { data: reputationData, loading: reputationLoading } = useAgentReputation(agent?.id ?? '')
 
   useEffect(() => {
     if (!agent) return
diff --git a/frontend/src/components/agents/AgentTable.tsx b/frontend/src/components/agents/AgentTable.tsx
index eeaa1f22..6529c42d 100644
--- a/frontend/src/components/agents/AgentTable.tsx
+++ b/frontend/src/components/agents/AgentTable.tsx
@@ -23,21 +23,13 @@ function truncateId(id: string): string {
   return `${id.slice(0, 6)}…${id.slice(-4)}`
 }
 
-function SortIcon({ active, dir }: { active: boolean; dir: SortDir }) {
-  if (!active) return <ArrowUpDown size={12} aria-hidden="true" />
-  return dir === 'asc' ? (
-    <ArrowUp size={12} aria-hidden="true" />
-  ) : (
-    <ArrowDown size={12} aria-hidden="true" />
-  )
-}
 
 export function AgentTable({
   agents,
   loading,
-  sortKey,
-  sortDir,
-  onSort,
+  sortKey: _sortKey,
+  sortDir: _sortDir,
+  onSort: _onSort,
   onRowClick,
 }: AgentTableProps) {
   const { t } = useTranslation()
diff --git a/frontend/src/components/agents/TaskSubmissionForm.tsx b/frontend/src/components/agents/TaskSubmissionForm.tsx
index bb9b52d5..67591fdc 100644
--- a/frontend/src/components/agents/TaskSubmissionForm.tsx
+++ b/frontend/src/components/agents/TaskSubmissionForm.tsx
@@ -1,15 +1,14 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
+import { AlertCircle } from 'lucide-react';
 import { DAGPreview } from './DAGPreview';
 import { useTaskSubmit } from '../../hooks/useTaskSubmit';
-import { useToast } from '../../hooks/useToast';
 import { useToast } from '../../context/ToastContext';
-import { FormField } from '../common/FormField';
-import { taskSchema, type TaskFormValues } from '../../schemas/task';
 import type { AgentPreference, TaskSubmitResponse } from '../../services/taskService';
 
 // Only the label is translated: `value` is the wire format the API and the zod
@@ -43,10 +42,7 @@ export function TaskSubmissionForm() {
   const navigate = useNavigate();
   const { showToast } = useToast();
   const [preview, setPreview] = useState<TaskSubmitResponse['dagPreview'] | null>(null);
-  const { submitTask, status, data } = useTaskSubmit();
-  const [preview, setPreview] = useState<TaskSubmitResponse['dagPreview'] | null>(null);
   const { submitTask, status, error, data } = useTaskSubmit();
-  const { showToast } = useToast();
 
   const agentPreferences = useMemo(
     () =>
@@ -64,7 +60,7 @@ export function TaskSubmissionForm() {
     handleSubmit,
     control,
     trigger,
-    formState: { errors, isSubmitting, isSubmitted },
+    formState: { errors, isSubmitting, isSubmitted, isValid },
   } = useForm<TaskFormValues>({
     mode: 'onBlur',
     resolver: zodResolver(taskSchema),
diff --git a/frontend/src/components/common/DataTable.tsx b/frontend/src/components/common/DataTable.tsx
index a36e0027..533925fd 100644
--- a/frontend/src/components/common/DataTable.tsx
+++ b/frontend/src/components/common/DataTable.tsx
@@ -89,7 +89,7 @@ export function DataTable<T>({
     : itemCount;
   const visibleRows = virtualization ? sortedRows.slice(startIndex, endIndex) : sortedRows;
 
-  const handleSelect = (key: string | number, row: T) => {
+  const handleSelect = (_key: string | number, row: T) => {
     if (onRowSelect) onRowSelect(row);
   };
 
diff --git a/frontend/src/components/common/FormField.test.tsx b/frontend/src/components/common/FormField.test.tsx
index 6e7cd185..6e4abd16 100644
--- a/frontend/src/components/common/FormField.test.tsx
+++ b/frontend/src/components/common/FormField.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 import { FormField } from './FormField';
 
diff --git a/frontend/src/components/common/ProtectedRoute.tsx b/frontend/src/components/common/ProtectedRoute.tsx
deleted file mode 100644
index 780e2735..00000000
--- a/frontend/src/components/common/ProtectedRoute.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { Navigate, useLocation } from 'react-router-dom';
-import { useWallet } from '../../context/WalletContext';
-
-interface ProtectedRouteProps {
-  children: React.ReactNode;
-}
-
-export function ProtectedRoute({ children }: ProtectedRouteProps) {
-  const { connected } = useWallet();
-  const location = useLocation();
-
-  if (!connected) {
-    return <Navigate to="/" replace state={{ from: location.pathname }} />;
-  }
-
-  return <>{children}</>;
-}
diff --git a/frontend/src/components/landing/Hero.tsx b/frontend/src/components/landing/Hero.tsx
index a1b9e2e3..e29a1b15 100644
--- a/frontend/src/components/landing/Hero.tsx
+++ b/frontend/src/components/landing/Hero.tsx
@@ -13,11 +13,8 @@ const Hero: React.FC = () => {
   const { canvasRef, prefersReducedMotion } = useParticles()
 
   return (
-    <motion.section
+    <section
       className={`flex flex-col items-center text-center pt-24 pb-20 px-4 max-w-4xl mx-auto ${styles.heroContainer}`}
-      variants={containerVariants}
-      initial="hidden"
-      animate="visible"
     >
       {!prefersReducedMotion ? (
         <canvas ref={canvasRef} className={styles.particleCanvas} />
@@ -48,7 +45,7 @@ const Hero: React.FC = () => {
       >
         <div className="w-1.5 h-1.5 rounded-full bg-accent-green shadow-[0_0_8px_rgba(52,211,153,0.6)] animate-pulse" />
         <span className="text-xs font-semibold text-accent-green tracking-wide">{t('landing.hero.badge')}</span>
-      </motion.div>
+      </div>
 
       {/* Headline */}
       <h1
@@ -62,7 +59,7 @@ const Hero: React.FC = () => {
             <span key="accent" className="bg-clip-text text-transparent bg-gradient-primary" />,
           ]}
         />
-      </motion.h1>
+      </h1>
 
       {/* Subtext */}
       <p
@@ -70,7 +67,7 @@ const Hero: React.FC = () => {
         style={{ animationDelay: '400ms' }}
       >
         {t('landing.hero.subtitle')}
-      </motion.p>
+      </p>
 
       {/* CTAs */}
       <div
diff --git a/frontend/src/components/wallet/SendXLMForm.tsx b/frontend/src/components/wallet/SendXLMForm.tsx
index 7f9ee57a..c77a5144 100644
--- a/frontend/src/components/wallet/SendXLMForm.tsx
+++ b/frontend/src/components/wallet/SendXLMForm.tsx
@@ -4,18 +4,29 @@ import { Keypair, TransactionBuilder, Operation, Asset, BASE_FEE, Networks, Memo
 import { useWallet } from '../../context/WalletContext'
 import { useWalletBalance } from '../../hooks/useWalletBalance'
 import { signTransactionWithFreighter } from '../../services/freighter'
-import { walletTransferSchema, type WalletTransferValues } from '../../schemas/wallet'
-import { FormField } from '../common/FormField'
 import styles from './SendXLMForm.module.css'
 
 const HORIZON_URL = 'https://horizon-testnet.stellar.org'
 
+function isValidStellarAddress(address: string): boolean {
+  try {
+    Keypair.fromPublicKey(address)
+    return true
+  } catch {
+    return false
+  }
+}
+
 export function SendXLMForm() {
   const { t } = useTranslation()
   const { publicKey, keypair, connected, connectionMethod } = useWallet()
   const { balance } = useWalletBalance(publicKey)
 
-  const [confirmation, setConfirmation] = useState<WalletTransferValues | null>(null)
+  const [destination, setDestination] = useState('')
+  const [amount, setAmount] = useState('')
+  const [memo, setMemo] = useState('')
+  const [errors, setErrors] = useState<{ destination?: string; amount?: string }>({})
+  const [confirmation, setConfirmation] = useState<{ destination: string; amount: string; memo: string } | null>(null)
   const [successTx, setSuccessTx] = useState<string | null>(null)
   const [submitError, setSubmitError] = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
@@ -56,14 +67,14 @@ export function SendXLMForm() {
   const handleSendClick = () => {
     const destErr = validateField('destination')
     const amtErr = validateField('amount')
-    const newErrors = { destination: destErr, amount: amtErr }
-    setErrors(newErrors)
+    setErrors({ destination: destErr, amount: amtErr })
+
+    if (destErr || amtErr) return
 
-  const handleSendClick = (data: WalletTransferValues) => {
     setConfirmation({
-      destination: data.destination.trim(),
-      amount: data.amount,
-      memo: data.memo?.trim() || '',
+      destination: destination.trim(),
+      amount: amount.trim(),
+      memo: memo.trim(),
     })
   }
 
@@ -135,7 +146,10 @@ export function SendXLMForm() {
 
       const txHash = submitData.hash
       setSuccessTx(txHash)
-      reset()
+      setDestination('')
+      setAmount('')
+      setMemo('')
+      setErrors({})
       setConfirmation(null)
     } catch (err) {
       const message = err instanceof Error ? err.message : t('wallet.send.failedToSend')
@@ -167,13 +181,20 @@ export function SendXLMForm() {
         </label>
         <input
           id="send-destination"
+          className={`${styles.input} ${errors.destination ? styles.inputError : ''}`}
+          type="text"
           placeholder="GABCD...1234"
-          error={errors.destination?.message}
-          isTouched={touchedFields.destination}
+          value={destination}
+          onChange={(e) => setDestination(e.target.value)}
+          onBlur={handleDestinationBlur}
           disabled={Boolean(successTx) || submitting}
-          className={styles.field}
-          {...register('destination')}
         />
+        {errors.destination && (
+          <p id="destination-error" className={styles.error} role="alert">
+            {errors.destination}
+          </p>
+        )}
+      </div>
 
       <div className={styles.field}>
         <label className={styles.label} htmlFor="send-amount">
@@ -183,16 +204,13 @@ export function SendXLMForm() {
           id="send-amount"
           className={`${styles.input} ${errors.amount ? styles.inputError : ''}`}
           type="number"
-          id="send-amount"
           step="0.0000001"
           min="0"
           placeholder="0.0"
-          error={errors.amount?.message}
-          isTouched={touchedFields.amount}
-          helperText={`Available balance: ${parseFloat(balance).toFixed(7)} XLM`}
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+          onBlur={handleAmountBlur}
           disabled={Boolean(successTx) || submitting}
-          className={styles.field}
-          {...register('amount')}
         />
         <p className={styles.helper}>
           {t('wallet.send.availableBalance', { balance: parseFloat(balance).toFixed(7) })}
@@ -214,12 +232,11 @@ export function SendXLMForm() {
           type="text"
           placeholder={t('wallet.send.memoPlaceholder')}
           maxLength={28}
-          error={errors.memo?.message}
-          isTouched={touchedFields.memo}
+          value={memo}
+          onChange={(e) => setMemo(e.target.value)}
           disabled={Boolean(successTx) || submitting}
-          className={styles.field}
-          {...register('memo')}
         />
+      </div>
 
       <button
         id="btn-send-xlm"
diff --git a/frontend/src/components/wallet/TransactionTable.tsx b/frontend/src/components/wallet/TransactionTable.tsx
index 1ae5dbbb..6e05a292 100644
--- a/frontend/src/components/wallet/TransactionTable.tsx
+++ b/frontend/src/components/wallet/TransactionTable.tsx
@@ -232,28 +232,6 @@ export function TransactionTable({ transactions, loading, publicKey }: Transacti
         />
       )}
 
-      <div className={styles.pagination}>
-        <button type="button" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={currentPage === 1}>
-          Previous
-        </button>
-        <span>
-          Page {currentPage} of {totalPages}
-        </span>
-        <button type="button" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages}>
-          Next
-        </button>
-      </div>
-      <div className={styles.runningTotal}>
-        {t('wallet.tx.total')} {runningTotal > 0 ? '+' : ''}{runningTotal.toFixed(7)} XLM
-      </div>
-    </div>
-  )
-}            </span>
-          </div>
-        ))}
-      </div>
-      )}
-
       {filtered.length > 0 && (
         <div className={styles.footer}>
           <div className={styles.pagination}>
diff --git a/frontend/src/context/ToastContext.tsx b/frontend/src/context/ToastContext.tsx
index 3e0dc597..abd71ef4 100644
--- a/frontend/src/context/ToastContext.tsx
+++ b/frontend/src/context/ToastContext.tsx
@@ -1,8 +1,6 @@
-import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useEffect, useMemo, useState, useContext } from 'react';
 import type { ReactNode } from 'react';
 import { ToastContainer } from '../components/common/Toast';
-import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
 
 export type ToastType = 'success' | 'error' | 'warning' | 'info';
 
@@ -10,7 +8,6 @@ export interface Toast {
   id: string;
   message: string;
   type: ToastType;
-  duration: number;
   duration?: number;
 }
 
@@ -28,7 +25,6 @@ const defaultDurations: Record<ToastType, number> = {
 };
 
 export const ToastContext = createContext<ToastContextValue | undefined>(undefined);
-const ToastContext = createContext<ToastContextValue | null>(null);
 
 export function ToastProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<Toast[]>([]);
@@ -67,20 +63,6 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 
   return (
     <ToastContext.Provider value={value}>
-    setToasts(prev => prev.filter(t => t.id !== id));
-  }, []);
-
-  const showToast = useCallback((message: string, type: ToastType = 'info', duration = 5000) => {
-    const id = Math.random().toString(36).slice(2);
-    setToasts(prev => [...prev, { id, message, type, duration }]);
-
-    if (duration > 0) {
-      setTimeout(() => dismissToast(id), duration);
-    }
-  }, [dismissToast]);
-
-  return (
-    <ToastContext.Provider value={{ toasts, showToast, dismissToast }}>
       {children}
       <ToastContainer toasts={toasts} onDismiss={dismissToast} />
     </ToastContext.Provider>
@@ -92,19 +74,3 @@ export function useToast() {
   if (!context) throw new Error('useToast must be used within ToastProvider');
   return context;
 }
-
-function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
-  const { t } = useTranslation();
-
-  if (toasts.length === 0) return null;
-  return (
-    <div className="toast-container" role="alert" aria-live="polite">
-      {toasts.map(toast => (
-        <div key={toast.id} className={`toast toast-${toast.type}`}>
-          <span>{toast.message}</span>
-          <button onClick={() => onDismiss(toast.id)} aria-label={t('a11y.dismiss')}>&times;</button>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx
index 0642046c..6ea632f3 100644
--- a/frontend/src/pages/dashboard.tsx
+++ b/frontend/src/pages/dashboard.tsx
@@ -9,7 +9,6 @@ import { DashboardLayout } from '../components/dashboard/DashboardLayout';
 import { KpiCard } from '../components/dashboard/KpiCard';
 import { NetworkHealthBadge } from '../components/dashboard/NetworkHealthBadge';
 import { RecentTasksTable } from '../components/dashboard/RecentTasksTable';
-import { useToast } from '../hooks/useToast';
 import { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTable } from '../components/common/Skeleton';
 import styles from './dashboard.module.css';
 import type { TimePoint } from '../types/api';
@@ -82,11 +81,6 @@ export const DashboardPage: React.FC = () => {
     return <Navigate to="/" replace />;
   }
 
-  React.useEffect(() => {
-    if (error) {
-      showToast(error.message || 'Unable to load dashboard data.', 'error');
-    }
-  }, [error, showToast]);
 
   if (!address) return null; // render nothing while redirecting
   if (loading) {