fix: improve ux

Author: foodaka

pages/index.page.tsx

@@ -1,27 +1,25 @@
-import { useRouter } from 'next/router';
 import { useEffect } from 'react';
-import { ROUTES } from 'src/components/primitives/Link';
 
 import { MainLayout } from '../src/layouts/MainLayout';
 import { useWeb3Context } from '../src/libs/hooks/useWeb3Context';
+import { useRootStore } from '../src/store/root';
+import Dashboard from './dashboard.page';
+import Markets from './markets.page';
 
 export default function Home() {
-  const router = useRouter();
   const { currentAccount } = useWeb3Context();
+  const trackEvent = useRootStore((store) => store.trackEvent);
 
-  // Redirect based on wallet connection status
   useEffect(() => {
-    if (currentAccount) {
-      // If wallet is connected, go to dashboard
-      router.replace(ROUTES.dashboard);
-    } else {
-      // If no wallet connected, go to markets
-      router.replace(ROUTES.markets);
-    }
-  }, [currentAccount, router]);
+    trackEvent('Page Viewed', {
+      'Page Name': 'Home',
+      'Wallet Connected': !!currentAccount,
+      'Connection Status': currentAccount ? 'Connected' : 'Unconnected',
+    });
+  }, [trackEvent, currentAccount]);
 
-  // Don't render anything since we're redirecting
-  return null;
+  // Show dashboard if wallet is connected, otherwise show markets
+  return currentAccount ? <Dashboard /> : <Markets />;
 }
 
 Home.getLayout = function getLayout(page: React.ReactElement) {

pages/markets.page.tsx

@@ -1,9 +1,6 @@
 import { Box, Container } from '@mui/material';
-import { useRouter } from 'next/router';
-import { ReactNode, useEffect, useRef } from 'react';
-import { ROUTES } from 'src/components/primitives/Link';
+import { ReactNode, useEffect } from 'react';
 import { MainLayout } from 'src/layouts/MainLayout';
-import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { MarketAssetsListContainer } from 'src/modules/markets/MarketAssetsListContainer';
 import { MarketsTopPanel } from 'src/modules/markets/MarketsTopPanel';
 import { useRootStore } from 'src/store/root';
@@ -41,32 +38,7 @@ export const MarketContainer = ({ children }: MarketContainerProps) => {
 };
 
 export default function Markets() {
-  const router = useRouter();
-  const { currentAccount } = useWeb3Context();
   const trackEvent = useRootStore((store) => store.trackEvent);
-  const prevAccountRef = useRef<string | undefined>();
-  const isInitialMount = useRef(true);
-
-  // Redirect to dashboard only when wallet gets connected (not when already connected)
-  useEffect(() => {
-    // Skip the initial mount to avoid redirecting when already connected
-    if (isInitialMount.current) {
-      isInitialMount.current = false;
-      prevAccountRef.current = currentAccount;
-      return;
-    }
-
-    const wasConnected = !!prevAccountRef.current;
-    const isConnected = !!currentAccount;
-
-    // Only redirect if wallet was not connected before but is now connected
-    if (!wasConnected && isConnected) {
-      router.replace(ROUTES.dashboard);
-    }
-
-    // Update the ref for next comparison
-    prevAccountRef.current = currentAccount;
-  }, [currentAccount, router]);
 
   useEffect(() => {
     trackEvent('Page Viewed', {

src/ui-config/menu-items/index.tsx

@@ -19,16 +19,16 @@ interface Navigation {
 }
 
 export const navigation: Navigation[] = [
-  {
-    link: ROUTES.markets,
-    title: t`Markets`,
-    dataCy: 'menuMarkets',
-  },
   {
     link: ROUTES.dashboard,
     title: t`Dashboard`,
     dataCy: 'menuDashboard',
   },
+  {
+    link: ROUTES.markets,
+    title: t`Markets`,
+    dataCy: 'menuMarkets',
+  },
   {
     link: ROUTES.governance,
     title: t`Governance`,