Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add portal links on explorer #154

Merged
merged 6 commits into from
Feb 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions packages/app-explorer/next.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,6 @@ export function TopNav() {

const tooling = (
<>
<Nav.MenuItem href="https://next-alpha.fuel.network/bridge">
Bridge
</Nav.MenuItem>
<Nav.MenuItem
isActive
as={NextLink}
Expand All @@ -53,9 +50,8 @@ export function TopNav() {
>
Explorer
</Nav.MenuItem>
<Nav.MenuItem href="https://next-alpha.fuel.network/ecosystem">
Ecosystem
</Nav.MenuItem>
<Nav.MenuItem href="/portal/bridge">Bridge</Nav.MenuItem>
<Nav.MenuItem href="/portal/ecosystem">Ecosystem</Nav.MenuItem>
</>
);

Expand Down
2 changes: 1 addition & 1 deletion packages/app-portal/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/app-portal/src/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ecosystemRoutes } from './systems/Ecosystem/routes';
import { Pages } from './types';

export const routes = (
<BrowserRouter>
<BrowserRouter basename="/portal">
<Routes>
<Route>
<Route path="*" element={<Navigate to={Pages.ecosystem} />} />
Expand Down
26 changes: 18 additions & 8 deletions packages/app-portal/src/systems/Bridge/hooks/useBridge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -166,21 +166,31 @@ 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() {
const searchParams = new URLSearchParams(location.search);
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) {
Expand Down
25 changes: 16 additions & 9 deletions packages/app-portal/src/systems/Bridge/pages/BridgeHome.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -16,7 +16,6 @@ export const BridgeHome = ({ children }: BridgeHomeProps) => {
const { isCompatible } = useNodeInfo({
version: VITE_FUEL_VERSION,
});
const navigate = useNavigate();
const location = useLocation();

return (
Expand All @@ -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>
Expand All @@ -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',
},
Expand Down
61 changes: 22 additions & 39 deletions packages/app-portal/src/systems/Core/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -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 />
Expand All @@ -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>
Expand All @@ -70,5 +46,12 @@ export function Header() {
const styles = {
menuItem: cssObj({
cursor: 'pointer',
a: {
color: 'inherit',
textDecoration: 'none',
},
'a.active': {
color: '$accent9',
},
}),
};
2 changes: 1 addition & 1 deletion pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading