Implement major wallet improvements: API security, timer cleanup, popup handling, focus management

Co-authored-by: 0xrinegade <[email protected]>

Author: Copilot

.env.example

@@ -2,11 +2,19 @@
 
 # Para SDK API Key (required for OAuth authentication)
 # Get your API key from: https://para.build/
+# 
+# ⚠️  SECURITY WARNING: 
+# - NEXT_PUBLIC_PARA_API_KEY is exposed to the browser (public prefix)
+# - Only use API keys with read-only/limited scopes for frontend
+# - Never include admin/write permissions in this key
+# - Ensure the key only has OAuth authentication permissions
 NEXT_PUBLIC_PARA_API_KEY=your_para_api_key_here
 
 # Alternative environment variable name (fallback)
 PARA_API_KEY=your_para_api_key_here
 
+# ⚠️  IMPORTANT: Never commit .env.local with real API keys to version control!
+
 # Network Configuration
 # Options: localnet, devnet, mainnet-beta
 NEXT_PUBLIC_SOLANA_NETWORK=devnet
@@ -16,4 +24,5 @@ NODE_ENV=development
 NEXT_PUBLIC_APP_ENV=development
 
 # Example .env.local file (copy this to .env.local and update values)
-# NEXT_PUBLIC_PARA_API_KEY=your_actual_api_key_here
+# ⚠️  NEVER commit .env.local to git - it should contain your real API keys
+# NEXT_PUBLIC_PARA_API_KEY=your_actual_api_key_here

src/components/ReconnectionModal.js

@@ -2,18 +2,95 @@
  * Reconnection Modal Component
  * 
  * Displays reconnection progress to users with cancellation option
+ * Includes proper focus management and accessibility features
  */
 
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 /**
- * Reconnection progress modal
+ * Trap focus within modal for accessibility
+ * @param {HTMLElement} element - Modal element to trap focus within
+ */
+const trapFocus = (element) => {
+  const focusableElements = element.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+  const firstElement = focusableElements[0];
+  const lastElement = focusableElements[focusableElements.length - 1];
+
+  const handleTabKey = (e) => {
+    if (e.key !== 'Tab') return;
+
+    if (e.shiftKey) {
+      if (document.activeElement === firstElement) {
+        lastElement.focus();
+        e.preventDefault();
+      }
+    } else {
+      if (document.activeElement === lastElement) {
+        firstElement.focus();
+        e.preventDefault();
+      }
+    }
+  };
+
+  element.addEventListener('keydown', handleTabKey);
+  return () => element.removeEventListener('keydown', handleTabKey);
+};
+
+/**
+ * Reconnection progress modal with accessibility features
  * @param {Object} props - Component props
  * @param {boolean} props.isVisible - Whether modal is visible
  * @param {Object} props.progress - Reconnection progress state
  * @param {Function} props.onCancel - Cancel callback
  */
 export const ReconnectionModal = ({ isVisible, progress, onCancel }) => {
+  const modalRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+
+  // Focus management
+  useEffect(() => {
+    if (isVisible && modalRef.current) {
+      // Store currently focused element
+      previousActiveElementRef.current = document.activeElement;
+      
+      // Focus the modal container
+      modalRef.current.focus();
+      
+      // Set up focus trap
+      const removeFocusTrap = trapFocus(modalRef.current);
+      
+      // Prevent background scrolling
+      document.body.style.overflow = 'hidden';
+      
+      return () => {
+        // Cleanup
+        removeFocusTrap();
+        document.body.style.overflow = '';
+        
+        // Restore previous focus
+        if (previousActiveElementRef.current) {
+          previousActiveElementRef.current.focus();
+        }
+      };
+    }
+  }, [isVisible]);
+
+  // Handle escape key
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === 'Escape' && isVisible && progress.canCancel) {
+        onCancel();
+      }
+    };
+
+    if (isVisible) {
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }
+  }, [isVisible, progress.canCancel, onCancel]);
+
   if (!isVisible) return null;
 
   const { attempt, maxAttempts, nextRetryIn, canCancel } = progress;
@@ -27,12 +104,22 @@ export const ReconnectionModal = ({ isVisible, progress, onCancel }) => {
   const strokeDashoffset = circumference - (progressPercentage / 100) * circumference;
 
   return (
-    <div className="reconnection-modal">
-      <div className="modal-content">
+    <div 
+      className="reconnection-modal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="reconnection-title"
+      aria-describedby="reconnection-description"
+    >
+      <div 
+        className="modal-content"
+        ref={modalRef}
+        tabIndex={-1}
+      >
         {nextRetryIn > 0 ? (
           <>
             {/* Countdown display */}
-            <div className="progress-ring">
+            <div className="progress-ring" aria-hidden="true">
               <svg width="80" height="80" className="transform -rotate-90">
                 <circle
                   cx="40"
@@ -50,32 +137,34 @@ export const ReconnectionModal = ({ isVisible, progress, onCancel }) => {
                 />
               </svg>
               <div className="absolute inset-0 flex items-center justify-center">
-                <span className="text-2xl font-bold text-gray-700">{nextRetryIn}</span>
+                <span className="text-2xl font-bold text-gray-700" aria-live="polite">
+                  {nextRetryIn}
+                </span>
               </div>
             </div>
 
-            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            <h3 id="reconnection-title" className="text-lg font-semibold text-gray-900 mb-2">
               Connection Lost
             </h3>
-            <p className="text-gray-600 mb-4">
+            <p id="reconnection-description" className="text-gray-600 mb-4">
               Attempting to reconnect in {nextRetryIn} second{nextRetryIn !== 1 ? 's' : ''}...
             </p>
-            <p className="text-sm text-gray-500 mb-6">
+            <p className="text-sm text-gray-500 mb-6" aria-live="polite">
               Attempt {attempt} of {maxAttempts}
             </p>
           </>
         ) : (
           <>
             {/* Connecting display */}
-            <div className="spinner"></div>
+            <div className="spinner" aria-hidden="true"></div>
 
-            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            <h3 id="reconnection-title" className="text-lg font-semibold text-gray-900 mb-2">
               Reconnecting...
             </h3>
-            <p className="text-gray-600 mb-4">
+            <p id="reconnection-description" className="text-gray-600 mb-4">
               Attempting to restore connection
             </p>
-            <p className="text-sm text-gray-500 mb-6">
+            <p className="text-sm text-gray-500 mb-6" aria-live="polite">
               Attempt {attempt} of {maxAttempts}
             </p>
           </>
@@ -85,13 +174,15 @@ export const ReconnectionModal = ({ isVisible, progress, onCancel }) => {
           <div className="flex gap-3 justify-center">
             <button
               onClick={onCancel}
-              className="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium"
+              className="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+              aria-label="Cancel reconnection"
             >
               Cancel
             </button>
             <button
               onClick={() => window.location.reload()}
-              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 font-medium"
+              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              aria-label="Refresh page to retry connection"
             >
               Refresh Page
             </button>
@@ -102,7 +193,8 @@ export const ReconnectionModal = ({ isVisible, progress, onCancel }) => {
           <div className="flex gap-3 justify-center">
             <button
               onClick={() => window.location.reload()}
-              className="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 font-medium"
+              className="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 font-medium focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+              aria-label="Refresh page - all reconnection attempts failed"
             >
               Refresh Page
             </button>
@@ -113,4 +205,4 @@ export const ReconnectionModal = ({ isVisible, progress, onCancel }) => {
   );
 };
 
-export default ReconnectionModal;
+export default ReconnectionModal;

src/config/networks.js

@@ -0,0 +1,82 @@
+/**
+ * SVM Networks Configuration
+ * 
+ * Centralized network configuration for all Solana Virtual Machine networks
+ * including endpoints, fallbacks, and connection parameters.
+ */
+
+import { clusterApiUrl } from '@solana/web3.js';
+
+/**
+ * SVM Networks configuration with primary and fallback endpoints
+ */
+export const SVM_NETWORKS = {
+  'solana': {
+    name: 'Solana',
+    endpoint: clusterApiUrl('devnet'),
+    programId: 'YOUR_SOLANA_PROGRAM_ID',
+    icon: '/images/solana-logo.svg',
+    color: '#9945FF',
+    explorerUrl: 'https://explorer.solana.com',
+    fallbackEndpoints: [
+      'https://api.devnet.solana.com',
+      'https://solana-devnet-rpc.allthatnode.com',
+    ],
+    connectionConfig: {
+      commitment: 'confirmed',
+      confirmTransactionInitialTimeout: 60000,
+    }
+  },
+  'sonic': {
+    name: 'Sonic',
+    endpoint: 'https://sonic-api.example.com',
+    programId: 'YOUR_SONIC_PROGRAM_ID',
+    icon: '/images/sonic-logo.svg',
+    color: '#00C2FF',
+    explorerUrl: 'https://explorer.sonic.example.com',
+    fallbackEndpoints: [],
+    connectionConfig: {
+      commitment: 'confirmed',
+      confirmTransactionInitialTimeout: 60000,
+    }
+  }
+};
+
+/**
+ * Get network configuration by name
+ * @param {string} networkName - Network name (e.g., 'solana', 'sonic')
+ * @returns {Object|null} Network configuration or null if not found
+ */
+export const getNetworkConfig = (networkName) => {
+  return SVM_NETWORKS[networkName] || null;
+};
+
+/**
+ * Get default network configuration (Solana)
+ * @returns {Object} Default network configuration
+ */
+export const getDefaultNetworkConfig = () => {
+  return SVM_NETWORKS.solana;
+};
+
+/**
+ * Get all available network names
+ * @returns {string[]} Array of network names
+ */
+export const getAvailableNetworks = () => {
+  return Object.keys(SVM_NETWORKS);
+};
+
+/**
+ * Validate network configuration
+ * @param {Object} config - Network configuration to validate
+ * @returns {boolean} True if valid, false otherwise
+ */
+export const validateNetworkConfig = (config) => {
+  return !!(
+    config &&
+    config.name &&
+    config.endpoint &&
+    config.connectionConfig
+  );
+};