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 (