From c01facb81127f3ed92df9f3ab1e61b85711b65c0 Mon Sep 17 00:00:00 2001 From: Pedro Nauck 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 = ( <> - - Bridge - + Bridge Explorer - - Ecosystem - + Ecosystem ); From 0c62490bfb0bfcae87365e2e212452bc0ac16be0 Mon Sep 17 00:00:00 2001 From: Pedro Nauck 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 = ( <> - Bridge Explorer + 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..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 = ( - + } /> @@ -13,5 +13,5 @@ export const routes = ( {ecosystemRoutes} - + ); 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 (