Only show AccountSubnavigation in account details

oasisprotocol · May 21, 2024 · f30c919 · f30c919
1 parent a6a2bd9
commit f30c919
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 20 deletions.
diff --git a/.changelog/1946.bugfix.md b/.changelog/1946.bugfix.md
@@ -0,0 +1 @@
+Only show Delegations and Debonding tabs in account details
diff --git a/src/app/pages/AccountPage/Features/AccountDetails/index.tsx b/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>
+    </>
   )
 })
diff --git a/src/app/pages/AccountPage/Features/AccountSubnavigation/index.tsx b/src/app/pages/AccountPage/Features/AccountSubnavigation/index.tsx
@@ -70,7 +70,7 @@ export function AccountSubnavigation() {
             ? t('account.subnavigation.mobileActiveDelegations', 'Delegations')
             : t('account.subnavigation.activeDelegations', 'Active delegations')
         }
-        route="active-delegations"
+        route={`/account/${address}/active-delegations`}
       />
 
       <NavItem
@@ -80,7 +80,7 @@ export function AccountSubnavigation() {
             ? t('account.subnavigation.mobileDebondingDelegations', 'Debonding')
             : t('account.subnavigation.debondingDelegations', 'Debonding delegations')
         }
-        route="debonding-delegations"
+        route={`/account/${address}/debonding-delegations`}
       />
     </Nav>
   )

diff --git a/src/app/pages/AccountPage/index.tsx b/src/app/pages/AccountPage/index.tsx
@@ -25,7 +25,6 @@ import { selectActiveWallet, selectHasAccounts, selectHasOneAccount } from 'app/
 import { walletActions } from 'app/state/wallet'
 import { AccountSummary } from './Features/AccountSummary'
 import { AccountPageParams } from './validateAccountPageRoute'
-import { AccountSubnavigation } from './Features/AccountSubnavigation'
 
 interface AccountPageProps {}
 
@@ -108,7 +107,6 @@ export function AccountPage(props: AccountPageProps) {
             walletHasAccounts={walletHasAccounts}
           />
           <Box margin={{ bottom: 'small' }}></Box>
-          <AccountSubnavigation />
           <Outlet />
         </>
       )}

diff --git a/src/app/pages/StakingPage/Features/DelegationList/ActiveDelegationList.tsx b/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>
+    </>
   )
 }
diff --git a/src/app/pages/StakingPage/Features/DelegationList/DebondingDelegationList.tsx b/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>
+    </>
   )
 }