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: ,
},
{