diff --git a/.changelog/1986.bugfix.md b/.changelog/1986.bugfix.md new file mode 100644 index 0000000000..c84f720b30 --- /dev/null +++ b/.changelog/1986.bugfix.md @@ -0,0 +1 @@ +Make Stake button active in delegations and debonding routes diff --git a/src/app/components/MobileFooterNavigation/index.tsx b/src/app/components/MobileFooterNavigation/index.tsx index 214713d468..3888044e82 100644 --- a/src/app/components/MobileFooterNavigation/index.tsx +++ b/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 ( - {getMenuItems.map(({ label, Icon, to }) => ( - + {getMenuItems.map(params => ( + ))} ) } -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 ( diff --git a/src/app/components/Sidebar/index.tsx b/src/app/components/Sidebar/index.tsx index dcdcacb090..149bfa2648 100644 --- a/src/app/components/Sidebar/index.tsx +++ b/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 & React.MouseEventHandler } @@ -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: } label={t('menu.home', 'Home')} route="/" data-testid="nav-home" />, + home: ( + } + label={t('menu.home', 'Home')} + route="/" + exactActive + data-testid="nav-home" + /> + ), wallet: ( } label={t('menu.wallet', 'Account')} needsWalletOpen={true} route={`/account/${address}`} + exactActive data-testid="nav-myaccount" /> ), diff --git a/src/app/pages/AccountPage/Features/StakeSubnavigation/index.tsx b/src/app/pages/AccountPage/Features/StakeSubnavigation/index.tsx index a66d9ee095..071af0cf06 100644 --- a/src/app/pages/AccountPage/Features/StakeSubnavigation/index.tsx +++ b/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`} /> ) diff --git a/src/commonRoutes.tsx b/src/commonRoutes.tsx index e9fd94eb0d..ebff10e060 100644 --- a/src/commonRoutes.tsx +++ b/src/commonRoutes.tsx @@ -42,11 +42,11 @@ export const commonRoutes: RouteObject[] = [ element: , }, { - path: 'active-delegations', + path: 'stake/active-delegations', element: , }, { - path: 'debonding-delegations', + path: 'stake/debonding-delegations', element: , }, {