chore: add portal links on explorer

packages/app-explorer/next.config.mjs

@@ -23,18 +23,22 @@ const config = {
     externalDir: true,
     serverComponentsExternalPackages: externals,
     esmExternals: true,
+    typedRoutes: true,
   },
   /** We run eslint as a separate task in CI */
   eslint: {
     ignoreDuringBuilds: !!process.env.CI,
   },
-  redirects: async () => {
+  rewrites: async () => {
     return [
       {
-        source: '/portal',
+        source: '/portal/:path*',
         destination: '/portal/index.html',
-        permanent: false,
       },
+    ];
+  },
+  redirects: async () => {
+    return [
       {
         source: '/portal-storybook',
         destination: '/portal-storybook/index.html',

packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx

@@ -42,9 +42,6 @@ export function TopNav() {
 
   const tooling = (
     <>
-      <Nav.MenuItem href="https://next-alpha.fuel.network/bridge">
-        Bridge
-      </Nav.MenuItem>
       <Nav.MenuItem
         isActive
         as={NextLink}
@@ -53,9 +50,8 @@ export function TopNav() {
       >
         Explorer
       </Nav.MenuItem>
-      <Nav.MenuItem href="https://next-alpha.fuel.network/ecosystem">
-        Ecosystem
-      </Nav.MenuItem>
+      <Nav.MenuItem href="/portal/bridge">Bridge</Nav.MenuItem>
+      <Nav.MenuItem href="/portal/ecosystem">Ecosystem</Nav.MenuItem>
     </>
   );
 

packages/app-portal/package.json

@@ -36,7 +36,7 @@
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.45.2",
-    "react-router-dom": "^6.8.2",
+    "react-router-dom": "6.22.0",
     "viem": "0.3.36",
     "wagmi": "1.0.6",
     "xstate": "^4.37.2",

packages/app-portal/src/routes.tsx

@@ -5,7 +5,7 @@ import { ecosystemRoutes } from './systems/Ecosystem/routes';
 import { Pages } from './types';
 
 export const routes = (
-  <BrowserRouter>
+  <BrowserRouter basename="/portal">
     <Routes>
       <Route>
         <Route path="*" element={<Navigate to={Pages.ecosystem} />} />

packages/app-portal/src/systems/Bridge/hooks/useBridge.tsx

@@ -166,21 +166,31 @@ export function useBridge() {
     searchParams.set('from', 'eth');
     searchParams.set('to', 'fuel');
 
-    navigate({
-      pathname: Pages.bridge,
-      search: searchParams.toString(),
-    });
+    navigate(
+      {
+        pathname: Pages.bridge,
+        search: searchParams.toString(),
+      },
+      {
+        replace: true,
+      },
+    );
   }
 
   function goToWithdraw() {
     const searchParams = new URLSearchParams(location.search);
     searchParams.set('from', 'fuel');
     searchParams.set('to', 'eth');
 
-    navigate({
-      pathname: Pages.bridge,
-      search: searchParams.toString(),
-    });
+    navigate(
+      {
+        pathname: Pages.bridge,
+        search: searchParams.toString(),
+      },
+      {
+        replace: true,
+      },
+    );
   }
 
   function connectNetwork(network?: SupportedChain) {

packages/app-portal/src/systems/Bridge/pages/BridgeHome.tsx

@@ -2,7 +2,7 @@ import { cssObj } from '@fuel-ui/css';
 import { Heading, Tabs } from '@fuel-ui/react';
 import { useNodeInfo } from '@fuel-wallet/react';
 import type { ReactNode } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { VITE_FUEL_VERSION } from '~/config';
 import { FuelVersionDialog } from '~/systems/Chains/fuel/containers/FuelVersionDialog';
 import { Layout } from '~/systems/Core';
@@ -16,7 +16,6 @@ export const BridgeHome = ({ children }: BridgeHomeProps) => {
   const { isCompatible } = useNodeInfo({
     version: VITE_FUEL_VERSION,
   });
-  const navigate = useNavigate();
   const location = useLocation();
 
   return (
@@ -26,13 +25,14 @@ export const BridgeHome = ({ children }: BridgeHomeProps) => {
           Fuel Native Bridge
         </Heading>
         <FuelVersionDialog isOpen={!(isCompatible ?? true)} />
-        <Tabs
-          defaultValue={location.pathname.replace(/\/$/, '')}
-          onValueChange={(path) => navigate(path)}
-        >
+        <Tabs defaultValue={location.pathname.replace(/\/$/, '')}>
           <Tabs.List css={styles.tabs}>
-            <Tabs.Trigger value={Pages.bridge}>Bridge</Tabs.Trigger>
-            <Tabs.Trigger value={Pages.transactions}>History</Tabs.Trigger>
+            <NavLink to={Pages.bridge}>
+              <Tabs.Trigger value={Pages.bridge}>Bridge</Tabs.Trigger>
+            </NavLink>
+            <NavLink to={Pages.transactions}>
+              <Tabs.Trigger value={Pages.transactions}>History</Tabs.Trigger>
+            </NavLink>
           </Tabs.List>
           {children}
         </Tabs>
@@ -53,8 +53,15 @@ const styles = {
   }),
   tabs: cssObj({
     ml: 0,
+    a: {
+      color: 'inherit',
+      textDecoration: 'none',
+    },
+    'a.active': {
+      color: '$accent9',
+    },
   }),
-  buttonLink: cssObj({
+  buttonNavLink: cssObj({
     '&:hover': {
       textDecoration: 'none',
     },

packages/app-portal/src/systems/Core/components/Header.tsx

@@ -1,40 +1,23 @@
 import { cssObj } from '@fuel-ui/css';
 import { Nav } from '@fuel-ui/react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { Pages } from '~/types';
 
-import { removeTrailingSlash } from '../utils';
-
 export function Header() {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const isLinkActive = (url: string) => {
-    return removeTrailingSlash(location.pathname).startsWith(
-      removeTrailingSlash(url),
-    );
-  };
-
   return (
     <Nav>
       <Nav.Desktop>
         <Nav.Logo />
         <Nav.Spacer />
         <Nav.Menu>
-          <Nav.MenuItem
-            as="div"
-            css={styles.menuItem}
-            isActive={isLinkActive(Pages.bridge)}
-            onClick={() => navigate(Pages.bridge)}
-          >
-            Bridge
+          <Nav.MenuItem css={styles.menuItem}>
+            <a href={window.location.origin}>Explorer</a>
           </Nav.MenuItem>
-          <Nav.MenuItem
-            as="div"
-            css={styles.menuItem}
-            isActive={isLinkActive(Pages.ecosystem)}
-            onClick={() => navigate(Pages.ecosystem)}
-          >
-            Ecosystem
+          <Nav.MenuItem css={styles.menuItem}>
+            <NavLink to={Pages.bridge}>Bridge</NavLink>
+          </Nav.MenuItem>
+          <Nav.MenuItem css={styles.menuItem}>
+            <NavLink to={Pages.ecosystem}>Ecosystem</NavLink>
           </Nav.MenuItem>
         </Nav.Menu>
         <Nav.ThemeToggle />
@@ -45,21 +28,14 @@ export function Header() {
           <Nav.ThemeToggle />
         </Nav.MobileContent>
         <Nav.Menu>
-          <Nav.MenuItem
-            as="div"
-            css={styles.menuItem}
-            isActive={isLinkActive(Pages.bridge)}
-            onClick={() => navigate(Pages.bridge)}
-          >
-            Bridge
+          <Nav.MenuItem css={styles.menuItem}>
+            <a href={window.location.origin}>Explorer</a>
+          </Nav.MenuItem>
+          <Nav.MenuItem css={styles.menuItem}>
+            <NavLink to={Pages.bridge}>Bridge</NavLink>
           </Nav.MenuItem>
-          <Nav.MenuItem
-            as="div"
-            css={styles.menuItem}
-            isActive={isLinkActive(Pages.ecosystem)}
-            onClick={() => navigate(Pages.ecosystem)}
-          >
-            Ecosystem
+          <Nav.MenuItem css={styles.menuItem}>
+            <NavLink to={Pages.ecosystem}>Ecosystem</NavLink>
           </Nav.MenuItem>
         </Nav.Menu>
       </Nav.Mobile>
@@ -70,5 +46,12 @@ export function Header() {
 const styles = {
   menuItem: cssObj({
     cursor: 'pointer',
+    a: {
+      color: 'inherit',
+      textDecoration: 'none',
+    },
+    'a.active': {
+      color: '$accent9',
+    },
   }),
 };