Merge pull request #1986 from oasisprotocol/lw/subnav-active-route

Make Stake button active in delegations and debonding routes

.changelog/1986.bugfix.md

@@ -0,0 +1 @@
+Make Stake button active in delegations and debonding routes

src/app/components/MobileFooterNavigation/index.tsx

@@ -58,6 +58,7 @@ export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFo
         label: t('menu.wallet', 'Account'),
         Icon: Money,
         to: `/account/${address}`,
+        exactActive: true,
       },
       {
         label: t('menu.stake-mobile', 'Stake'),
@@ -88,16 +89,26 @@ export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFo
 
   return (
     <StyledMobileFooterNavigation data-testid="mobile-footer-navigation">
-      {getMenuItems.map(({ label, Icon, to }) => (
-        <MobileFooterButton key={to} label={label} Icon={Icon} to={to} />
+      {getMenuItems.map(params => (
+        <MobileFooterButton key={params.to} {...params} />
       ))}
     </StyledMobileFooterNavigation>
   )
 }
 
-function MobileFooterButton({ label, Icon, to }: { label: string; Icon: Icon; to: string }) {
+function MobileFooterButton({
+  label,
+  Icon,
+  to,
+  exactActive,
+}: {
+  label: string
+  Icon: Icon
+  to: string
+  exactActive?: boolean | undefined
+}) {
   const location = useLocation()
-  const isActive = to === location.pathname
+  const isActive = exactActive ? location.pathname === to : location.pathname.startsWith(to)
 
   return (
     <StyledNavLink to={to}>

src/app/components/Sidebar/index.tsx

@@ -38,6 +38,8 @@ import {
   mobileToolbarZIndex,
 } from '../../../styles/theme/elementSizes'
 import { ThemeContext } from 'styled-components'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { MobileFooterNavigation } from '../MobileFooterNavigation'
 
 interface SidebarButtonBaseProps {
   needsWalletOpen?: boolean
@@ -47,9 +49,10 @@ interface SidebarButtonBaseProps {
 
 type SidebarButtonProps = SidebarButtonBaseProps &
   (
-    | { route: string; newTab?: boolean; onClick?: undefined }
+    | { route: string; exactActive?: boolean; newTab?: boolean; onClick?: undefined }
     | {
         route?: undefined
+        exactActive?: undefined
         newTab?: undefined
         onClick: React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLAnchorElement>
       }
@@ -61,12 +64,17 @@ export const SidebarButton = ({
   label,
   route,
   newTab,
+  exactActive,
   onClick,
   ...rest
 }: SidebarButtonProps) => {
   const walletHasAccounts = useSelector(selectHasAccounts)
   const location = useLocation()
-  const isActive = route ? route === location.pathname : false
+  const isActive = route
+    ? exactActive
+      ? location.pathname === route
+      : location.pathname.startsWith(route)
+    : false
 
   if (!walletHasAccounts && needsWalletOpen) {
     return null
@@ -229,18 +237,28 @@ const SidebarFooter = (props: SidebarFooterProps) => {
   )
 }
 
+/** See also {@link MobileFooterNavigation} */
 function SidebarMenuItems() {
   const address = useSelector(selectAddress)
   const { t } = useTranslation()
   const { getParaTimesRoutePath, paraTimesRouteLabel } = useParaTimesNavigation()
   const menu = {
-    home: <SidebarButton icon={<Home />} label={t('menu.home', 'Home')} route="/" data-testid="nav-home" />,
+    home: (
+      <SidebarButton
+        icon={<Home />}
+        label={t('menu.home', 'Home')}
+        route="/"
+        exactActive
+        data-testid="nav-home"
+      />
+    ),
     wallet: (
       <SidebarButton
         icon={<Money />}
         label={t('menu.wallet', 'Account')}
         needsWalletOpen={true}
         route={`/account/${address}`}
+        exactActive
         data-testid="nav-myaccount"
       />
     ),

src/app/pages/AccountPage/Features/StakeSubnavigation/index.tsx

@@ -70,7 +70,7 @@ export function StakeSubnavigation() {
             ? t('account.subnavigation.mobileActiveDelegations', 'Staked')
             : t('account.subnavigation.activeDelegations', 'Staked')
         }
-        route={`/account/${address}/active-delegations`}
+        route={`/account/${address}/stake/active-delegations`}
       />
 
       <NavItem
@@ -80,7 +80,7 @@ export function StakeSubnavigation() {
             ? t('account.subnavigation.mobileDebondingDelegations', 'Debonding')
             : t('account.subnavigation.debondingDelegations', 'Debonding')
         }
-        route={`/account/${address}/debonding-delegations`}
+        route={`/account/${address}/stake/debonding-delegations`}
       />
     </Nav>
   )

src/commonRoutes.tsx

@@ -42,11 +42,11 @@ export const commonRoutes: RouteObject[] = [
         element: <ValidatorList />,
       },
       {
-        path: 'active-delegations',
+        path: 'stake/active-delegations',
         element: <ActiveDelegationList />,
       },
       {
-        path: 'debonding-delegations',
+        path: 'stake/debonding-delegations',
         element: <DebondingDelegationList />,
       },
       {