Only show Delegations and Debonding tabs in account details

.changelog/1946.bugfix.md

@@ -0,0 +1 @@
+Only show Delegations and Debonding tabs in account details

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

@@ -9,22 +9,26 @@ import { useSelector } from 'react-redux'
 import { SendTransaction } from '../SendTransaction'
 import { TransactionHistory } from '../TransactionHistory'
 import { selectIsAddressInWallet } from 'app/state/selectIsAddressInWallet'
+import { AccountSubnavigation } from '../AccountSubnavigation'
 
 interface Props {}
 
 export const AccountDetails = memo((props: Props) => {
   const isAddressInWallet = useSelector(selectIsAddressInWallet)
 
   return (
-    <Box direction="row" wrap style={{ gap: '24px' }}>
-      {isAddressInWallet && (
-        <Box flex={{ grow: 1 }} basis="32ex" width={{ max: '100%' }}>
-          <SendTransaction isAddressInWallet={isAddressInWallet} />
+    <>
+      <AccountSubnavigation />
+      <Box direction="row" wrap style={{ gap: '24px' }}>
+        {isAddressInWallet && (
+          <Box flex={{ grow: 1 }} basis="32ex" width={{ max: '100%' }}>
+            <SendTransaction isAddressInWallet={isAddressInWallet} />
+          </Box>
+        )}
+        <Box flex={{ grow: 3 }} basis="80ex" width={{ max: '100%' }}>
+          <TransactionHistory />
         </Box>
-      )}
-      <Box flex={{ grow: 3 }} basis="80ex" width={{ max: '100%' }}>
-        <TransactionHistory />
       </Box>
-    </Box>
+    </>
   )
 })

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

@@ -0,0 +1,87 @@
+import { selectStaking } from 'app/state/staking/selectors'
+import { Nav } from 'grommet/es6/components/Nav'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { NavLink, useParams } from 'react-router-dom'
+import styled from 'styled-components'
+import { normalizeColor } from 'grommet/es6/utils'
+
+import { AccountPageParams } from '../../validateAccountPageRoute'
+import { Button } from 'grommet/es6/components/Button'
+
+const StyledNavItem = styled(NavLink)`
+  padding: ${({ theme }) => theme.global?.edgeSize?.small};
+
+  :hover {
+    background-color: ${({ theme }) => normalizeColor('background-contrast', theme)};
+  }
+
+  &.active {
+    background-color: ${({ theme }) => normalizeColor('background-back', theme)};
+  }
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.global?.breakpoints?.small?.value}px`}) {
+    padding: ${({ theme }) => theme.global?.edgeSize?.xsmall};
+  }
+`
+
+interface NavItemProps {
+  counter?: number
+  label: string
+  route: string
+}
+
+const NavItem = ({ counter, label, route }: NavItemProps) => {
+  return (
+    <StyledNavItem end to={route}>
+      <Button badge={counter} tabIndex={-1}>
+        {label}
+      </Button>
+    </StyledNavItem>
+  )
+}
+
+export function AccountSubnavigation() {
+  const { t } = useTranslation()
+  const isMobile = React.useContext(ResponsiveContext) === 'small'
+  const address = useParams<keyof AccountPageParams>().address!
+  const stake = useSelector(selectStaking)
+
+  return (
+    <Nav
+      background="background-front"
+      justify={isMobile ? 'evenly' : 'start'}
+      margin={{ bottom: 'small' }}
+      direction="row"
+      gap="none"
+      wrap
+    >
+      <NavItem
+        label={t('account.subnavigation.transactions', 'Transactions')}
+        route={`/account/${address}`}
+      />
+
+      <NavItem
+        counter={stake.delegations?.length}
+        label={
+          isMobile
+            ? t('account.subnavigation.mobileActiveDelegations', 'Delegations')
+            : t('account.subnavigation.activeDelegations', 'Active delegations')
+        }
+        route={`/account/${address}/active-delegations`}
+      />
+
+      <NavItem
+        counter={stake.debondingDelegations?.length}
+        label={
+          isMobile
+            ? t('account.subnavigation.mobileDebondingDelegations', 'Debonding')
+            : t('account.subnavigation.debondingDelegations', 'Debonding delegations')
+        }
+        route={`/account/${address}/debonding-delegations`}
+      />
+    </Nav>
+  )
+}

src/app/pages/AccountPage/index.tsx

@@ -11,17 +11,12 @@ import { selectStaking } from 'app/state/staking/selectors'
 import { selectTransaction } from 'app/state/transaction/selectors'
 import { Box } from 'grommet/es6/components/Box'
 import { Layer } from 'grommet/es6/components/Layer'
-import { Nav } from 'grommet/es6/components/Nav'
 import { Spinner } from 'grommet/es6/components/Spinner'
-import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { Text } from 'grommet/es6/components/Text'
-import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import { NavLink, Outlet, useParams } from 'react-router-dom'
-import styled from 'styled-components'
-import { normalizeColor } from 'grommet/es6/utils'
+import { Outlet, useParams } from 'react-router-dom'
 
 import { accountActions } from 'app/state/account'
 import { selectAccount } from 'app/state/account/selectors'
@@ -30,45 +25,11 @@ import { selectActiveWallet, selectHasAccounts, selectHasOneAccount } from 'app/
 import { walletActions } from 'app/state/wallet'
 import { AccountSummary } from './Features/AccountSummary'
 import { AccountPageParams } from './validateAccountPageRoute'
-import { Button } from 'grommet/es6/components/Button'
-
-const StyledNavItem = styled(NavLink)`
-  padding: ${({ theme }) => theme.global?.edgeSize?.small};
-
-  :hover {
-    background-color: ${({ theme }) => normalizeColor('background-contrast', theme)};
-  }
-
-  &.active {
-    background-color: ${({ theme }) => normalizeColor('background-back', theme)};
-  }
-
-  @media only screen and (max-width: ${({ theme }) => `${theme.global?.breakpoints?.small?.value}px`}) {
-    padding: ${({ theme }) => theme.global?.edgeSize?.xsmall};
-  }
-`
-
-interface NavItemProps {
-  counter?: number
-  label: string
-  route: string
-}
-
-const NavItem = ({ counter, label, route }: NavItemProps) => {
-  return (
-    <StyledNavItem end to={route}>
-      <Button badge={counter} tabIndex={-1}>
-        {label}
-      </Button>
-    </StyledNavItem>
-  )
-}
 
 interface AccountPageProps {}
 
 export function AccountPage(props: AccountPageProps) {
   const { t } = useTranslation()
-  const isMobile = React.useContext(ResponsiveContext) === 'small'
   const address = useParams<keyof AccountPageParams>().address!
   const dispatch = useDispatch()
 
@@ -145,39 +106,7 @@ export function AccountPage(props: AccountPageProps) {
             wallet={wallet}
             walletHasAccounts={walletHasAccounts}
           />
-          <Nav
-            background="background-front"
-            justify={isMobile ? 'evenly' : 'start'}
-            margin={{ vertical: 'small' }}
-            direction="row"
-            gap="none"
-            wrap
-          >
-            <NavItem
-              label={t('account.subnavigation.transactions', 'Transactions')}
-              route={`/account/${address}`}
-            />
-
-            <NavItem
-              counter={stake.delegations?.length}
-              label={
-                isMobile
-                  ? t('account.subnavigation.mobileActiveDelegations', 'Delegations')
-                  : t('account.subnavigation.activeDelegations', 'Active delegations')
-              }
-              route="active-delegations"
-            />
-
-            <NavItem
-              counter={stake.debondingDelegations?.length}
-              label={
-                isMobile
-                  ? t('account.subnavigation.mobileDebondingDelegations', 'Debonding')
-                  : t('account.subnavigation.debondingDelegations', 'Debonding delegations')
-              }
-              route="debonding-delegations"
-            />
-          </Nav>
+          <Box margin={{ bottom: 'small' }}></Box>
           <Outlet />
         </>
       )}

src/app/pages/StakingPage/Features/DelegationList/ActiveDelegationList.tsx

@@ -6,14 +6,18 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 import { DelegationList } from '.'
+import { AccountSubnavigation } from '../../../AccountPage/Features/AccountSubnavigation'
 
 export const ActiveDelegationList = () => {
   const { t } = useTranslation()
   const delegations = useSelector(selectActiveDelegations)
   return (
-    <Box pad="medium" background="background-front">
-      <Header>{t('delegations.activeDelegations', 'Active delegations')}</Header>
-      <DelegationList type="active" delegations={delegations ?? []} />
-    </Box>
+    <>
+      <AccountSubnavigation />
+      <Box pad="medium" background="background-front">
+        <Header level={2}>{t('delegations.activeDelegations', 'Active delegations')}</Header>
+        <DelegationList type="active" delegations={delegations ?? []} />
+      </Box>
+    </>
   )
 }

src/app/pages/StakingPage/Features/DelegationList/DebondingDelegationList.tsx

@@ -6,14 +6,18 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 import { DelegationList } from '.'
+import { AccountSubnavigation } from '../../../AccountPage/Features/AccountSubnavigation'
 
 export const DebondingDelegationList = () => {
   const { t } = useTranslation()
   const delegations = useSelector(selectDebondingDelegations)
   return (
-    <Box pad="medium" background="background-front">
-      <Header>{t('delegations.debondingDelegations', 'Debonding delegations')}</Header>
-      <DelegationList type="debonding" delegations={delegations ?? []} />
-    </Box>
+    <>
+      <AccountSubnavigation />
+      <Box pad="medium" background="background-front">
+        <Header level={2}>{t('delegations.debondingDelegations', 'Debonding delegations')}</Header>
+        <DelegationList type="debonding" delegations={delegations ?? []} />
+      </Box>
+    </>
   )
 }