feat(js/frontend): improve faucet navigation UX (#805)

Author: nikitayutanov

js/frontend/src/components/layout/header/consts.ts

@@ -1,9 +1,15 @@
 import { ROUTE } from '@/consts';
+import { NETWORK_TYPE } from '@/context/network-type';
 
 const LINKS = {
   [ROUTE.HOME]: 'Bridge',
   [ROUTE.TRANSACTIONS]: 'Transactions',
-  [ROUTE.TOKEN_TRACKER]: 'My Tokens',
+
+  [ROUTE.TOKEN_TRACKER]: {
+    [NETWORK_TYPE.MAINNET]: 'My Tokens',
+    [NETWORK_TYPE.TESTNET]: 'My Tokens & Faucet',
+  },
+
   [ROUTE.FAQ]: 'FAQ',
 } as const;
 

js/frontend/src/components/layout/header/header.module.scss

@@ -79,6 +79,8 @@
 
     justify-content: space-between;
     gap: 0;
+
+    font-size: 12px;
   }
 
   &::before {

js/frontend/src/components/layout/header/header.tsx

@@ -3,11 +3,13 @@ import { Link, NavLink, useLocation } from 'react-router-dom';
 
 import LogoSVG from '@/assets/logo.svg?react';
 import { ROUTE } from '@/consts';
+import { useNetworkType } from '@/context/network-type';
 import { TransactionsCounter } from '@/features/history';
 import { NetworkSwitch } from '@/features/network-switch';
 import { LockedBalanceTooltip } from '@/features/token-tracker';
 import { Wallet } from '@/features/wallet';
 import { useAccountsConnection } from '@/hooks';
+import { isString } from '@/utils';
 
 import { Container } from '../container';
 
@@ -16,11 +18,13 @@ import styles from './header.module.scss';
 
 function Header() {
   const { isAnyAccount } = useAccountsConnection();
+  const { networkType } = useNetworkType();
 
   const { pathname } = useLocation();
   const [linksStyle, setLinksStyle] = useState<CSSProperties>();
 
   const linksRef = useRef<HTMLUListElement>(null);
+
   const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({
     [ROUTE.HOME]: null,
     [ROUTE.TRANSACTIONS]: null,
@@ -40,7 +44,7 @@ function Header() {
       '--active-link-width': `${linkRect.width}px`,
       '--active-link-offset': `${offset}px`,
     } as CSSProperties);
-  }, [pathname, isAnyAccount]);
+  }, [pathname, isAnyAccount, networkType]);
 
   const renderLinks = () =>
     Object.entries(LINKS).map(([to, text]) => {
@@ -55,7 +59,7 @@ function Header() {
       return (
         <li key={to}>
           <NavLink to={to} className={styles.link} ref={setRef}>
-            {text}
+            {isString(text) ? text : text[networkType]}
           </NavLink>
 
           {isTokensLink && <LockedBalanceTooltip />}

js/frontend/src/utils/index.ts

@@ -37,6 +37,7 @@ const asOptionalField = <T extends z.ZodTypeAny>(schema: T) => schema.or(z.liter
 
 const isUndefined = (value: unknown): value is undefined => value === undefined;
 const isNull = (value: unknown): value is null => value === null;
+const isString = (value: unknown): value is string => typeof value === 'string';
 const isNumeric = (value: string) => /^\d+$/.test(value);
 
 // asserts can't use arrow functions
@@ -67,6 +68,7 @@ export {
   asOptionalField,
   isUndefined,
   isNull,
+  isString,
   isNumeric,
   getErrorMessage,
   definedAssert,