diff --git a/packages/app-explorer/next.config.mjs b/packages/app-explorer/next.config.mjs
index c87ebd29f..998819db3 100644
--- a/packages/app-explorer/next.config.mjs
+++ b/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',
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 28e9741c3..f98e0ebe5 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,6 @@ export function TopNav() {
const tooling = (
<>
-
- Bridge
-
Explorer
-
- Ecosystem
-
+ Bridge
+ Ecosystem
);
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..8a8c74135 100644
--- a/packages/app-portal/src/routes.tsx
+++ b/packages/app-portal/src/routes.tsx
@@ -5,7 +5,7 @@ import { ecosystemRoutes } from './systems/Ecosystem/routes';
import { Pages } from './types';
export const routes = (
-
+
} />
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) {
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
- navigate(path)}
- >
+
- Bridge
- History
+
+ Bridge
+
+
+ History
+
{children}
@@ -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 (