Skip to content

Commit 0c62490

Browse files
pedronauckpedronauck
committed
fix: portal routing
1 parent fb29dba commit 0c62490

File tree

7 files changed

+55
-54
lines changed

7 files changed

+55
-54
lines changed

‎packages/app-explorer/next.config.mjs

+11
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const config = {
2323
externalDir: true,
2424
serverComponentsExternalPackages: externals,
2525
esmExternals: true,
26+
typedRoutes: true,
2627
},
2728
/** We run eslint as a separate task in CI */
2829
eslint: {
@@ -35,6 +36,16 @@ const config = {
3536
destination: '/portal/index.html',
3637
permanent: false,
3738
},
39+
{
40+
source: '/ecosystem',
41+
destination: '/portal/index.html#/ecosystem',
42+
permanent: false,
43+
},
44+
{
45+
source: '/bridge',
46+
destination: '/portal/index.html#/bridge',
47+
permanent: false,
48+
},
3849
{
3950
source: '/portal-storybook',
4051
destination: '/portal-storybook/index.html',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ export function TopNav() {
4242

4343
const tooling = (
4444
<>
45-
<Nav.MenuItem href="/portal/bridge">Bridge</Nav.MenuItem>
4645
<Nav.MenuItem
4746
isActive
4847
as={NextLink}
@@ -51,6 +50,7 @@ export function TopNav() {
5150
>
5251
Explorer
5352
</Nav.MenuItem>
53+
<Nav.MenuItem href="/bridge">Bridge</Nav.MenuItem>
5454
<Nav.MenuItem href="/portal">Ecosystem</Nav.MenuItem>
5555
</>
5656
);

‎packages/app-portal/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"react-dom": "^18.2.0",
3737
"react-helmet": "^6.1.0",
3838
"react-hook-form": "^7.45.2",
39-
"react-router-dom": "^6.8.2",
39+
"react-router-dom": "6.22.0",
4040
"viem": "0.3.36",
4141
"wagmi": "1.0.6",
4242
"xstate": "^4.37.2",

‎packages/app-portal/src/routes.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
1+
import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
22

33
import { bridgeRoutes } from './systems/Bridge/routes';
44
import { ecosystemRoutes } from './systems/Ecosystem/routes';
55
import { Pages } from './types';
66

77
export const routes = (
8-
<BrowserRouter>
8+
<HashRouter>
99
<Routes>
1010
<Route>
1111
<Route path="*" element={<Navigate to={Pages.ecosystem} />} />
1212
{bridgeRoutes}
1313
{ecosystemRoutes}
1414
</Route>
1515
</Routes>
16-
</BrowserRouter>
16+
</HashRouter>
1717
);

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

+16-9
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { cssObj } from '@fuel-ui/css';
22
import { Heading, Tabs } from '@fuel-ui/react';
33
import { useNodeInfo } from '@fuel-wallet/react';
44
import type { ReactNode } from 'react';
5-
import { useLocation, useNavigate } from 'react-router-dom';
5+
import { NavLink, useLocation } from 'react-router-dom';
66
import { VITE_FUEL_VERSION } from '~/config';
77
import { FuelVersionDialog } from '~/systems/Chains/fuel/containers/FuelVersionDialog';
88
import { Layout } from '~/systems/Core';
@@ -16,7 +16,6 @@ export const BridgeHome = ({ children }: BridgeHomeProps) => {
1616
const { isCompatible } = useNodeInfo({
1717
version: VITE_FUEL_VERSION,
1818
});
19-
const navigate = useNavigate();
2019
const location = useLocation();
2120

2221
return (
@@ -26,13 +25,14 @@ export const BridgeHome = ({ children }: BridgeHomeProps) => {
2625
Fuel Native Bridge
2726
</Heading>
2827
<FuelVersionDialog isOpen={!(isCompatible ?? true)} />
29-
<Tabs
30-
defaultValue={location.pathname.replace(/\/$/, '')}
31-
onValueChange={(path) => navigate(path)}
32-
>
28+
<Tabs defaultValue={location.pathname.replace(/\/$/, '')}>
3329
<Tabs.List css={styles.tabs}>
34-
<Tabs.Trigger value={Pages.bridge}>Bridge</Tabs.Trigger>
35-
<Tabs.Trigger value={Pages.transactions}>History</Tabs.Trigger>
30+
<NavLink to={Pages.bridge}>
31+
<Tabs.Trigger value={Pages.bridge}>Bridge</Tabs.Trigger>
32+
</NavLink>
33+
<NavLink to={Pages.transactions}>
34+
<Tabs.Trigger value={Pages.transactions}>History</Tabs.Trigger>
35+
</NavLink>
3636
</Tabs.List>
3737
{children}
3838
</Tabs>
@@ -53,8 +53,15 @@ const styles = {
5353
}),
5454
tabs: cssObj({
5555
ml: 0,
56+
a: {
57+
color: 'inherit',
58+
textDecoration: 'none',
59+
},
60+
'a.active': {
61+
color: '$accent9',
62+
},
5663
}),
57-
buttonLink: cssObj({
64+
buttonNavLink: cssObj({
5865
'&:hover': {
5966
textDecoration: 'none',
6067
},

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

+22-39
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,23 @@
11
import { cssObj } from '@fuel-ui/css';
22
import { Nav } from '@fuel-ui/react';
3-
import { useLocation, useNavigate } from 'react-router-dom';
3+
import { NavLink } from 'react-router-dom';
44
import { Pages } from '~/types';
55

6-
import { removeTrailingSlash } from '../utils';
7-
86
export function Header() {
9-
const location = useLocation();
10-
const navigate = useNavigate();
11-
const isLinkActive = (url: string) => {
12-
return removeTrailingSlash(location.pathname).startsWith(
13-
removeTrailingSlash(url),
14-
);
15-
};
16-
177
return (
188
<Nav>
199
<Nav.Desktop>
2010
<Nav.Logo />
2111
<Nav.Spacer />
2212
<Nav.Menu>
23-
<Nav.MenuItem
24-
as="div"
25-
css={styles.menuItem}
26-
isActive={isLinkActive(Pages.bridge)}
27-
onClick={() => navigate(Pages.bridge)}
28-
>
29-
Bridge
13+
<Nav.MenuItem css={styles.menuItem}>
14+
<a href={window.location.origin}>Explorer</a>
3015
</Nav.MenuItem>
31-
<Nav.MenuItem
32-
as="div"
33-
css={styles.menuItem}
34-
isActive={isLinkActive(Pages.ecosystem)}
35-
onClick={() => navigate(Pages.ecosystem)}
36-
>
37-
Ecosystem
16+
<Nav.MenuItem css={styles.menuItem}>
17+
<NavLink to={Pages.bridge}>Bridge</NavLink>
18+
</Nav.MenuItem>
19+
<Nav.MenuItem css={styles.menuItem}>
20+
<NavLink to={Pages.ecosystem}>Ecosystem</NavLink>
3821
</Nav.MenuItem>
3922
</Nav.Menu>
4023
<Nav.ThemeToggle />
@@ -45,21 +28,14 @@ export function Header() {
4528
<Nav.ThemeToggle />
4629
</Nav.MobileContent>
4730
<Nav.Menu>
48-
<Nav.MenuItem
49-
as="div"
50-
css={styles.menuItem}
51-
isActive={isLinkActive(Pages.bridge)}
52-
onClick={() => navigate(Pages.bridge)}
53-
>
54-
Bridge
31+
<Nav.MenuItem css={styles.menuItem}>
32+
<a href={window.location.origin}>Explorer</a>
33+
</Nav.MenuItem>
34+
<Nav.MenuItem css={styles.menuItem}>
35+
<NavLink to={Pages.bridge}>Bridge</NavLink>
5536
</Nav.MenuItem>
56-
<Nav.MenuItem
57-
as="div"
58-
css={styles.menuItem}
59-
isActive={isLinkActive(Pages.ecosystem)}
60-
onClick={() => navigate(Pages.ecosystem)}
61-
>
62-
Ecosystem
37+
<Nav.MenuItem css={styles.menuItem}>
38+
<NavLink to={Pages.ecosystem}>Ecosystem</NavLink>
6339
</Nav.MenuItem>
6440
</Nav.Menu>
6541
</Nav.Mobile>
@@ -70,5 +46,12 @@ export function Header() {
7046
const styles = {
7147
menuItem: cssObj({
7248
cursor: 'pointer',
49+
a: {
50+
color: 'inherit',
51+
textDecoration: 'none',
52+
},
53+
'a.active': {
54+
color: '$accent9',
55+
},
7356
}),
7457
};

‎pnpm-lock.yaml

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)