Merge pull request #384 from Folex1275/backendW4

refactor: simplify rate limiter and enhance frontend error handling

Author: Mystery-CLI

backend/src/middleware/rateLimiter.js

@@ -53,15 +53,7 @@ function createRateLimiter(options = {}) {
   return limiter;
 }
 
-function rateLimiter(req, res, next) {
-  const clientIP = getClientIP(req);
-  
-  if (isWhitelisted(clientIP)) {
-    return next();
-  }
-  
-  return createRateLimiter()(req, res, next);
-}
+const rateLimiter = createRateLimiter();
 
 export { createRateLimiter, getClientIP };
 

frontend/src/App.jsx

@@ -29,13 +29,10 @@ import { useAppState, useAppDispatch, A } from './store/index.js';
 const STATUS_COLORS = { connected: '#22c55e', disconnected: '#ef4444', reconnecting: '#f59e0b' };
 const TIMEOUT_MS = 30000;
 
-function withTimeout(promise) {
-  return Promise.race([
-    promise,
-    new Promise((_, reject) =>
-      setTimeout(() => reject(new Error('Request timed out. Please try again.')), TIMEOUT_MS)
-    ),
-  ]);
+function withTimeout(promiseFn) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), TIMEOUT_MS);
+  return promiseFn(controller.signal).finally(() => clearTimeout(timer));
 }
 
 function App() {
@@ -145,6 +142,8 @@ function App() {
 
   const createAccount = async () => {
     try {
+      const { data } = await withTimeout(signal => axios.post('/api/stellar/account/create', null, { signal }));
+      setAccount(data);
       const { data } = await withTimeout(axios.post('/api/stellar/account/create'));
       dispatch({ type: A.SET_ACCOUNT, payload: data });
       resetForm();
@@ -172,6 +171,8 @@ function App() {
     if (!account) return;
     setLoading('balance');
     try {
+      const { data } = await withTimeout(signal => axios.get(`/api/stellar/account/${account.publicKey}`, { signal }));
+      setBalance(data);
       const { data } = await withTimeout(axios.get(`/api/stellar/account/${account.publicKey}`));
       dispatch({ type: A.SET_BALANCE, payload: data });
     } catch (error) {
@@ -203,6 +204,7 @@ function App() {
     }
 
     try {
+      const { data } = await withTimeout(signal => axios.post('/api/stellar/payment/send', payload, { signal }));
       const { data } = await withTimeout(axios.post('/api/stellar/payment/send', payload));
       msg.success(`Payment sent! Hash: ${data.hash}`);
       resetForm();

frontend/src/components/TransactionHistory.jsx

@@ -97,10 +97,15 @@ export function TransactionHistory({ publicKey }) {
   const [loaded, setLoaded] = useState(false);
   const [selected, setSelected] = useState(null);
   const [filters, setFilters] = useState({ type: '', dateFrom: '', dateTo: '' });
+  const [cursors, setCursors] = useState([]); // ring-buffer for back-pagination (max 50)
+  const [error, setError] = useState(null);
+
+  const MAX_CURSOR_HISTORY = 50;
   const [cursors, setCursors] = useState([]);
 
   const fetchPage = useCallback(async (cursor = null, isBack = false) => {
     setLoading(true);
+    setError(null);
     try {
       const params = { limit: PAGE_SIZE, ...(cursor ? { cursor } : {}) };
       if (filters.type) params.type = filters.type;
@@ -110,6 +115,18 @@ export function TransactionHistory({ publicKey }) {
       setTxs(data.records);
       setNextCursor(data.nextCursor);
       setLoaded(true);
+
+      if (!isBack && cursor) {
+        setCursors(prev => {
+          const next = [...prev, cursor];
+          return next.length > MAX_CURSOR_HISTORY ? next.slice(next.length - MAX_CURSOR_HISTORY) : next;
+        });
+      }
+    } catch (e) {
+      setError(e?.response?.data?.error ?? e?.message ?? 'Failed to load transactions.');
+    } finally {
+      setLoading(false);
+    }
       if (!isBack && cursor) setCursors(prev => [...prev, cursor]);
     } catch { /* errors handled by parent */ }
     finally { setLoading(false); }
@@ -171,7 +188,13 @@ export function TransactionHistory({ publicKey }) {
       </form>
 
       <AnimatePresence mode="wait">
-        {loaded && (
+        {error && (
+          <motion.div key="error" className="tx-error" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
+            <p>{error}</p>
+            <button className="tx-page-btn" onClick={() => fetchPage(cursors[cursors.length - 1] ?? null)}>↺ Retry</button>
+          </motion.div>
+        )}
+        {!error && loaded && (
           <motion.div key="list" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
             {txs.length === 0 ? (
               <p className="tx-empty" role="status">No transactions found.</p>