Implement comprehensive routing system - unique URLs for all tabs and sub-tabs

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

Author: Copilot

package-lock.json

@@ -1,6 +1,8 @@
 import React, { useContext, useState, useEffect } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { PhantomWalletButton } from './PhantomWalletButton';
 import { usePhantomWallet } from '@/contexts/PhantomWalletProvider';
 import { createLogger } from '@/utils/logger';
@@ -23,11 +25,10 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
     network, 
     selectedNetwork, 
     setSelectedNetwork, 
-    activeTab, 
-    setActiveTab,
     networks 
   } = useContext(AppContext);
 
+  const router = useRouter();
   const { connected, publicKey } = usePhantomWallet();
   const [showOnboarding, setShowOnboarding] = useState(false);
   const [currentLocale, setCurrentLocale] = useState('en');
@@ -76,18 +77,18 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
 
   // Top navbar items (most important sections)
   const topNavItems = [
-    { key: 'buy', label: 'BUY', icon: 'B' },
-    { key: 'sell', label: 'SELL', icon: 'S' },
-    { key: 'analytics', label: 'ANALYTICS', icon: '📊' },
-    { key: 'help', label: 'HELP', icon: '?' },
+    { key: 'buy', label: 'BUY', icon: 'B', href: '/buy' },
+    { key: 'sell', label: 'SELL', icon: 'S', href: '/sell' },
+    { key: 'analytics', label: 'ANALYTICS', icon: '📊', href: '/analytics' },
+    { key: 'help', label: 'HELP', icon: '?', href: '/help' },
   ];
 
   // Sidebar navigation items (secondary sections)
   const sidebarNavItems = [
-    { key: 'myoffers', label: 'MY OFFERS', icon: 'M' },
-    { key: 'disputes', label: 'DISPUTES', icon: 'D' },
-    { key: 'rewards', label: 'REWARDS', icon: '🎁' },
-    { key: 'profile', label: 'PROFILE', icon: 'P' },
+    { key: 'myoffers', label: 'MY OFFERS', icon: 'M', href: '/myoffers' },
+    { key: 'disputes', label: 'DISPUTES', icon: 'D', href: '/disputes' },
+    { key: 'rewards', label: 'REWARDS', icon: '🎁', href: '/rewards' },
+    { key: 'profile', label: 'PROFILE', icon: 'P', href: '/profile' },
   ];
 
   return (
@@ -124,44 +125,37 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
             <nav className="desktop-nav">
               {/* Primary navigation items */}
               {topNavItems.map((item) => (
-                <button
+                <Link
                   key={item.key}
-                  className={`nav-tab ${
-                    activeTab === item.key ? 'active' : ''
-                  }`}
-                  onClick={() => setActiveTab(item.key)}
+                  href={item.href}
+                  className={`nav-tab ${router.pathname === item.href ? 'active' : ''}`}
                 >
                   <span className="nav-label">{item.label}</span>
-                </button>
+                </Link>
               ))}
 
               {/* Secondary navigation items (previously in sidebar) */}
               {sidebarNavItems.map((item) => (
-                <button
+                <Link
                   key={item.key}
-                  className={`nav-tab ${
-                    activeTab === item.key ? 'active' : ''
-                  }`}
-                  onClick={() => setActiveTab(item.key)}
+                  href={item.href}
+                  className={`nav-tab ${router.pathname === item.href ? 'active' : ''}`}
                 >
                   <span className="nav-label">{item.label}</span>
-                </button>
+                </Link>
               ))}
             </nav>
 
             {/* RIGHT SIDE: ALL HEADER CONTROLS */}
             <div className="header-controls">
               {/* PROFILE element - now properly in the flex container */}
               <div className="profile-nav">
-                <a 
-                  href="#"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setActiveTab('profile');
-                  }}
+                <Link 
+                  href="/profile"
+                  className={router.pathname === '/profile' ? 'active' : ''}
                 >
                   PROFILE
-                </a>
+                </Link>
               </div>
 
               {/* Network selector */}
@@ -213,28 +207,24 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
           <div className="mobile-nav-buttons">
             {/* Primary navigation items */}
             {topNavItems.map((item) => (
-              <button
+              <Link
                 key={item.key}
-                className={`mobile-nav-btn ${
-                  activeTab === item.key ? 'active' : ''
-                }`}
-                onClick={() => setActiveTab(item.key)}
+                href={item.href}
+                className={`mobile-nav-btn ${router.pathname === item.href ? 'active' : ''}`}
               >
                 <span className="nav-label">{item.label}</span>
-              </button>
+              </Link>
             ))}
 
             {/* Secondary navigation items */}
             {sidebarNavItems.map((item) => (
-              <button
+              <Link
                 key={item.key}
-                className={`mobile-nav-btn ${
-                  activeTab === item.key ? 'active' : ''
-                }`}
-                onClick={() => setActiveTab(item.key)}
+                href={item.href}
+                className={`mobile-nav-btn ${router.pathname === item.href ? 'active' : ''}`}
               >
                 <span className="nav-label">{item.label}</span>
-              </button>
+              </Link>
             ))}
           </div>
         </nav>

src/components/Layout.js

@@ -24,13 +24,13 @@ const LoadingFallback = () => (
  * Optimized for performance with React.memo, lazy loading, and hooks
  * Now uses SafeWallet context to prevent null reference errors
  */
-const UserProfile = ({ wallet: walletProp, network }) => {
+const UserProfile = ({ wallet: walletProp, network, initialTab = 'overview', onTabChange }) => {
   // Use safe wallet context if no wallet prop provided
   const contextWallet = useSafeWallet();
   const wallet = walletProp || contextWallet;
 
   // Initialize all hooks first (Rules of Hooks)
-  const [activeTab, setActiveTab] = useState('overview');
+  const [activeTab, setActiveTab] = useState(initialTab);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [profileData, setProfileData] = useState({
@@ -174,30 +174,43 @@ const UserProfile = ({ wallet: walletProp, network }) => {
     console.log('Saving settings:', newSettings);
   }, []);
 
+  // Handle tab change with URL update
+  const handleTabChange = (newTab) => {
+    setActiveTab(newTab);
+    if (onTabChange) {
+      onTabChange(newTab);
+    }
+  };
+
+  // Update tab when initialTab changes (for URL navigation)
+  useEffect(() => {
+    setActiveTab(initialTab);
+  }, [initialTab]);
+
   // Render tabs navigation - memoized to prevent recreation on each render
   const renderTabs = useMemo(() => (
     <div className="profile-tabs">
       <button 
         className={`tab-button ${activeTab === 'overview' ? 'active' : ''}`}
-        onClick={() => setActiveTab('overview')}
+        onClick={() => handleTabChange('overview')}
       >
         Overview
       </button>
       <button 
         className={`tab-button ${activeTab === 'transactions' ? 'active' : ''}`}
-        onClick={() => setActiveTab('transactions')}
+        onClick={() => handleTabChange('transactions')}
       >
         Transactions
       </button>
       <button 
         className={`tab-button ${activeTab === 'stats' ? 'active' : ''}`}
-        onClick={() => setActiveTab('stats')}
+        onClick={() => handleTabChange('stats')}
       >
         Statistics
       </button>
       <button 
         className={`tab-button ${activeTab === 'settings' ? 'active' : ''}`}
-        onClick={() => setActiveTab('settings')}
+        onClick={() => handleTabChange('settings')}
       >
         Settings
       </button>
@@ -323,7 +336,9 @@ UserProfile.propTypes = {
   }),
   network: PropTypes.shape({
     name: PropTypes.string
-  })
+  }),
+  initialTab: PropTypes.string,
+  onTabChange: PropTypes.func
 };
 
 // Export memoized component to prevent unnecessary re-renders

src/components/UserProfile.js

@@ -7,8 +7,6 @@ export const AppContext = createContext({
   networks: {},
   selectedNetwork: 'solana',
   setSelectedNetwork: () => {},
-  activeTab: 'buy',
-  setActiveTab: () => {},
 });
 
 // SVM Networks configuration
@@ -58,7 +56,6 @@ const SVM_NETWORKS = {
 export const AppContextProvider = ({ children }) => {
   // State for selected network
   const [selectedNetwork, setSelectedNetwork] = useState('solana');
-  const [activeTab, setActiveTab] = useState('buy'); // 'buy', 'sell', 'myoffers', 'disputes', 'profile'
 
   // Get network configuration
   const network = SVM_NETWORKS[selectedNetwork];
@@ -69,9 +66,7 @@ export const AppContextProvider = ({ children }) => {
     networks: SVM_NETWORKS,
     selectedNetwork,
     setSelectedNetwork,
-    activeTab,
-    setActiveTab,
-  }), [network, selectedNetwork, activeTab]);
+  }), [network, selectedNetwork]);
 
   return (
     <AppContext.Provider value={contextValue}>

src/contexts/AppContext.js

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+
+export default function Custom404() {
+  const router = useRouter();
+
+  return (
+    <div className="error-page">
+      <div className="error-content">
+        <h1>404 - Page Not Found</h1>
+        <p>The page you're looking for doesn't exist.</p>
+        <div className="error-actions">
+          <Link href="/buy" className="button button-primary">
+            Go to Home
+          </Link>
+          <button 
+            className="button button-secondary" 
+            onClick={() => router.back()}
+          >
+            Go Back
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/404.js

@@ -24,6 +24,7 @@ import '@/styles/TransactionAnalytics.css'; // Transaction Analytics component s
 import '@/styles/TransactionProgressIndicator.css'; // Transaction Progress Indicator component styles
 import '@/styles/AnalyticsDashboard.css'; // Analytics Dashboard component styles
 import '@/styles/pwa.css'; // PWA-specific styles
+import '@/styles/routing.css'; // Routing and navigation styles
 
 // Import context
 import { AppContextProvider } from '@/contexts/AppContext';

src/pages/_app.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { createLazyComponent } from '@/utils/lazyLoading';
+
+// Lazy load components
+const AnalyticsDashboard = createLazyComponent(
+  () => import('@/components/AnalyticsDashboard'),
+  {
+    fallback: <div className="loading-analytics">Loading analytics...</div>
+  }
+);
+
+export default function AnalyticsPage() {
+  return <AnalyticsDashboard />;
+}

src/pages/analytics.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { createLazyComponent } from '@/utils/lazyLoading';
+
+// Lazy load components
+const OfferList = createLazyComponent(
+  () => import('@/components/OfferList'),
+  {
+    fallback: <div className="loading-offer-list">Loading offers...</div>,
+    retryDelay: 1000,
+    maxRetries: 3
+  }
+);
+
+export default function BuyPage() {
+  return <OfferList type="buy" />;
+}

src/pages/buy.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { createLazyComponent } from '@/utils/lazyLoading';
+
+// Lazy load components
+const DisputeResolution = createLazyComponent(
+  () => import('@/components/DisputeResolution'),
+  {
+    fallback: <div className="loading-disputes">Loading disputes...</div>
+  }
+);
+
+export default function DisputesPage() {
+  return <DisputeResolution />;
+}

src/pages/disputes.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+export default function HelpPage() {
+  return (
+    <div className="help-page">
+      <h1>Help & Support</h1>
+      <div className="help-content">
+        <section>
+          <h2>Getting Started</h2>
+          <p>Learn how to use the OpenSVM P2P Exchange platform.</p>
+        </section>
+        
+        <section>
+          <h2>Trading Guide</h2>
+          <p>Step-by-step instructions for buying and selling SOL.</p>
+        </section>
+        
+        <section>
+          <h2>FAQ</h2>
+          <p>Frequently asked questions and answers.</p>
+        </section>
+        
+        <section>
+          <h2>Contact Support</h2>
+          <p>Get in touch with our support team for assistance.</p>
+        </section>
+      </div>
+    </div>
+  );
+}