From c01facb81127f3ed92df9f3ab1e61b85711b65c0 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Thu, 1 Feb 2024 21:04:21 -0300
Subject: [PATCH 1/3] chore: add portal links on explorer

---
 .../src/systems/Core/components/TopNav/TopNav.tsx         | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx b/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx
index afd12e6a3..eb6c95a39 100644
--- a/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx
+++ b/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx
@@ -42,9 +42,7 @@ export function TopNav() {
 
   const tooling = (
     <>
-      <Nav.MenuItem href="https://next-alpha.fuel.network/bridge">
-        Bridge
-      </Nav.MenuItem>
+      <Nav.MenuItem href="/portal/bridge">Bridge</Nav.MenuItem>
       <Nav.MenuItem
         isActive
         as={NextLink}
@@ -53,9 +51,7 @@ export function TopNav() {
       >
         Explorer
       </Nav.MenuItem>
-      <Nav.MenuItem href="https://next-alpha.fuel.network/ecosystem">
-        Ecosystem
-      </Nav.MenuItem>
+      <Nav.MenuItem href="/portal">Ecosystem</Nav.MenuItem>
     </>
   );
 

From 0c62490bfb0bfcae87365e2e212452bc0ac16be0 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Tue, 6 Feb 2024 22:46:01 -0300
Subject: [PATCH 2/3] fix: portal routing

---
 packages/app-explorer/next.config.mjs         | 11 ++++
 .../systems/Core/components/TopNav/TopNav.tsx |  2 +-
 packages/app-portal/package.json              |  2 +-
 packages/app-portal/src/routes.tsx            |  6 +-
 .../src/systems/Bridge/pages/BridgeHome.tsx   | 25 +++++---
 .../src/systems/Core/components/Header.tsx    | 61 +++++++------------
 pnpm-lock.yaml                                |  2 +-
 7 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/packages/app-explorer/next.config.mjs b/packages/app-explorer/next.config.mjs
index c87ebd29f..17eeb7475 100644
--- a/packages/app-explorer/next.config.mjs
+++ b/packages/app-explorer/next.config.mjs
@@ -23,6 +23,7 @@ const config = {
     externalDir: true,
     serverComponentsExternalPackages: externals,
     esmExternals: true,
+    typedRoutes: true,
   },
   /** We run eslint as a separate task in CI */
   eslint: {
@@ -35,6 +36,16 @@ const config = {
         destination: '/portal/index.html',
         permanent: false,
       },
+      {
+        source: '/ecosystem',
+        destination: '/portal/index.html#/ecosystem',
+        permanent: false,
+      },
+      {
+        source: '/bridge',
+        destination: '/portal/index.html#/bridge',
+        permanent: false,
+      },
       {
         source: '/portal-storybook',
         destination: '/portal-storybook/index.html',
diff --git a/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx b/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx
index 142119df8..fbb2eeca0 100644
--- a/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx
+++ b/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx
@@ -42,7 +42,6 @@ export function TopNav() {
 
   const tooling = (
     <>
-      <Nav.MenuItem href="/portal/bridge">Bridge</Nav.MenuItem>
       <Nav.MenuItem
         isActive
         as={NextLink}
@@ -51,6 +50,7 @@ export function TopNav() {
       >
         Explorer
       </Nav.MenuItem>
+      <Nav.MenuItem href="/bridge">Bridge</Nav.MenuItem>
       <Nav.MenuItem href="/portal">Ecosystem</Nav.MenuItem>
     </>
   );
diff --git a/packages/app-portal/package.json b/packages/app-portal/package.json
index f5eaf9a81..2c83917e6 100644
--- a/packages/app-portal/package.json
+++ b/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",
diff --git a/packages/app-portal/src/routes.tsx b/packages/app-portal/src/routes.tsx
index 4aef999bf..bb5fd5a3e 100644
--- a/packages/app-portal/src/routes.tsx
+++ b/packages/app-portal/src/routes.tsx
@@ -1,11 +1,11 @@
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
 
 import { bridgeRoutes } from './systems/Bridge/routes';
 import { ecosystemRoutes } from './systems/Ecosystem/routes';
 import { Pages } from './types';
 
 export const routes = (
-  <BrowserRouter>
+  <HashRouter>
     <Routes>
       <Route>
         <Route path="*" element={<Navigate to={Pages.ecosystem} />} />
@@ -13,5 +13,5 @@ export const routes = (
         {ecosystemRoutes}
       </Route>
     </Routes>
-  </BrowserRouter>
+  </HashRouter>
 );
diff --git a/packages/app-portal/src/systems/Bridge/pages/BridgeHome.tsx b/packages/app-portal/src/systems/Bridge/pages/BridgeHome.tsx
index 938266a77..cc05daed2 100644
--- a/packages/app-portal/src/systems/Bridge/pages/BridgeHome.tsx
+++ b/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',
     },
diff --git a/packages/app-portal/src/systems/Core/components/Header.tsx b/packages/app-portal/src/systems/Core/components/Header.tsx
index 208db0d79..3cd9c6532 100644
--- a/packages/app-portal/src/systems/Core/components/Header.tsx
+++ b/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',
+    },
   }),
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03a054ecc..ef9c6928e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -448,7 +448,7 @@ importers:
         specifier: ^7.45.2
         version: 7.50.0(react@18.2.0)
       react-router-dom:
-        specifier: ^6.8.2
+        specifier: 6.22.0
         version: 6.22.0(react-dom@18.2.0)(react@18.2.0)
       viem:
         specifier: 0.3.36

From 8e4f2a193813d7c465bdaacbd282587f65ad7937 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Fri, 9 Feb 2024 11:40:24 -0300
Subject: [PATCH 3/3] fix: routing

---
 packages/app-explorer/next.config.mjs         | 19 +++++---------
 .../systems/Core/components/TopNav/TopNav.tsx |  4 +--
 packages/app-portal/src/routes.tsx            |  6 ++---
 .../src/systems/Bridge/hooks/useBridge.tsx    | 26 +++++++++++++------
 4 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/app-explorer/next.config.mjs b/packages/app-explorer/next.config.mjs
index 17eeb7475..998819db3 100644
--- a/packages/app-explorer/next.config.mjs
+++ b/packages/app-explorer/next.config.mjs
@@ -29,23 +29,16 @@ const config = {
   eslint: {
     ignoreDuringBuilds: !!process.env.CI,
   },
-  redirects: async () => {
+  rewrites: async () => {
     return [
       {
-        source: '/portal',
+        source: '/portal/:path*',
         destination: '/portal/index.html',
-        permanent: false,
-      },
-      {
-        source: '/ecosystem',
-        destination: '/portal/index.html#/ecosystem',
-        permanent: false,
-      },
-      {
-        source: '/bridge',
-        destination: '/portal/index.html#/bridge',
-        permanent: false,
       },
+    ];
+  },
+  redirects: async () => {
+    return [
       {
         source: '/portal-storybook',
         destination: '/portal-storybook/index.html',
diff --git a/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx b/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx
index fbb2eeca0..f98e0ebe5 100644
--- a/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx
+++ b/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx
@@ -50,8 +50,8 @@ export function TopNav() {
       >
         Explorer
       </Nav.MenuItem>
-      <Nav.MenuItem href="/bridge">Bridge</Nav.MenuItem>
-      <Nav.MenuItem href="/portal">Ecosystem</Nav.MenuItem>
+      <Nav.MenuItem href="/portal/bridge">Bridge</Nav.MenuItem>
+      <Nav.MenuItem href="/portal/ecosystem">Ecosystem</Nav.MenuItem>
     </>
   );
 
diff --git a/packages/app-portal/src/routes.tsx b/packages/app-portal/src/routes.tsx
index bb5fd5a3e..8a8c74135 100644
--- a/packages/app-portal/src/routes.tsx
+++ b/packages/app-portal/src/routes.tsx
@@ -1,11 +1,11 @@
-import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 
 import { bridgeRoutes } from './systems/Bridge/routes';
 import { ecosystemRoutes } from './systems/Ecosystem/routes';
 import { Pages } from './types';
 
 export const routes = (
-  <HashRouter>
+  <BrowserRouter basename="/portal">
     <Routes>
       <Route>
         <Route path="*" element={<Navigate to={Pages.ecosystem} />} />
@@ -13,5 +13,5 @@ export const routes = (
         {ecosystemRoutes}
       </Route>
     </Routes>
-  </HashRouter>
+  </BrowserRouter>
 );
diff --git a/packages/app-portal/src/systems/Bridge/hooks/useBridge.tsx b/packages/app-portal/src/systems/Bridge/hooks/useBridge.tsx
index 8db8a892b..0635ffa00 100644
--- a/packages/app-portal/src/systems/Bridge/hooks/useBridge.tsx
+++ b/packages/app-portal/src/systems/Bridge/hooks/useBridge.tsx
@@ -166,10 +166,15 @@ 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() {
@@ -177,10 +182,15 @@ export function useBridge() {
     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) {