Merge pull request #1483 from oasisprotocol/mz/stakingCardUpdate

Staking card layout update
oasisprotocol · Jul 22, 2024 · e2d1453 · e2d1453
2 parents 19a6ddb + 6d8f3b9
commit e2d1453
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 31 deletions.
diff --git a/.changelog/1483.trivial.md b/.changelog/1483.trivial.md
@@ -0,0 +1 @@
+Staking card layout update
diff --git a/src/app/components/Table/TablePagination.tsx b/src/app/components/Table/TablePagination.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { Link, To } from 'react-router-dom'
 
 export type TablePaginationProps = {
+  compact?: boolean
   linkToPage: (page: number) => To
   rowsPerPage: number
   selectedPage: number
@@ -13,6 +14,7 @@ export type TablePaginationProps = {
 }
 
 export const TablePagination: FC<TablePaginationProps> = ({
+  compact,
   selectedPage,
   linkToPage,
   rowsPerPage,
@@ -51,7 +53,7 @@ export const TablePagination: FC<TablePaginationProps> = ({
       showFirstButton
       showLastButton
       size="small"
-      sx={{ marginTop: 5 }}
+      sx={{ marginTop: compact ? 2 : 5 }}
     />
   )
 }
diff --git a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountCardEmptyState.tsx b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountCardEmptyState.tsx
@@ -36,7 +36,6 @@ export const ConsensusAccountCardEmptyState: FC<ConsensusAccountCardEmptyStatePr
         sx={{
           color: COLORS.grayMedium,
           fontWeight: 700,
-          maxWidth: '190px',
           textAlign: 'center',
           opacity: 0.5,
         }}

diff --git a/src/app/pages/ConsensusAccountDetailsPage/Staking.tsx b/src/app/pages/ConsensusAccountDetailsPage/Staking.tsx
@@ -1,10 +1,13 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
 import Link from '@mui/material/Link'
 import Skeleton from '@mui/material/Skeleton'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import { styled } from '@mui/material/styles'
 import {
   Account,
   useGetConsensusAccountsAddressDebondingDelegations,
@@ -18,42 +21,38 @@ import { Delegations } from '../..//components/Delegations'
 import { wallet } from '../../utils/externalLinks'
 import { t } from 'i18next'
 import { ConsensusAccountCardEmptyState } from './ConsensusAccountCardEmptyState'
-import { FilterButtons } from '../../components/FilterButtons'
+
+export const StyledCard = styled(Card)(({ theme }) => ({
+  flex: 1,
+  '&': {
+    padding: `0 ${theme.spacing(4)}`,
+    marginBottom: 0,
+  },
+}))
 
 type StakingProps = {
   account: Account | undefined
   isLoading: boolean
 }
-type DelegationStatus = 'staked' | 'debonding'
 
 export const Staking: FC<StakingProps> = ({ account, isLoading }) => {
   const { t } = useTranslation()
-  const [type, setType] = useState<DelegationStatus>('staked')
-  const options: { label: string; value: DelegationStatus }[] = [
-    {
-      label: t('common.staked'),
-      value: 'staked',
-    },
-    {
-      label: t('common.debonding'),
-      value: 'debonding',
-    },
-  ]
+  const [tab, setTabValue] = useState(0)
 
   return (
-    <Card sx={{ height: '100%' }}>
-      <CardHeader
-        action={<FilterButtons options={options} value={type} onSelect={type => setType(type)} />}
-        disableTypography
-        component="h3"
-        title={t('validator.delegations')}
-      />
-      <CardContent>
-        {isLoading && <Skeleton variant="rectangular" height={300} />}
-        {account && type === 'staked' && <ActiveDelegations address={account?.address} />}
-        {account && type === 'debonding' && <DebondingDelegations address={account?.address} />}
-      </CardContent>
-    </Card>
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <Tabs value={tab} onChange={(event, tab) => setTabValue(tab)} aria-label={t('validator.delegations')}>
+        <Tab label={t('common.staked')} />
+        <Tab label={t('common.debonding')} />
+      </Tabs>
+      <StyledCard>
+        <CardContent>
+          {isLoading && <Skeleton variant="rectangular" height={300} sx={{ marginTop: 5 }} />}
+          {account && tab === 0 && <ActiveDelegations address={account?.address} />}
+          {account && tab === 1 && <DebondingDelegations address={account?.address} />}
+        </CardContent>
+      </StyledCard>
+    </Box>
   )
 }
 
@@ -94,6 +93,7 @@ const ActiveDelegations: FC<DelegationCardProps> = ({ address }) => {
           limit={PAGE_SIZE}
           linkType="validator"
           pagination={{
+            compact: true,
             selectedPage: pagination.selectedPage,
             linkToPage: pagination.linkToPage,
             totalCount: data?.data.total_count,
@@ -134,6 +134,7 @@ const DebondingDelegations: FC<DelegationCardProps> = ({ address }) => {
           limit={PAGE_SIZE}
           linkType="validator"
           pagination={{
+            compact: true,
             selectedPage: pagination.selectedPage,
             linkToPage: pagination.linkToPage,
             totalCount: data?.data.total_count,

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -15,8 +15,8 @@
     "listTitle": "Accounts",
     "noTokens": "This account holds no tokens",
     "noBalances": "This account currently has no balances.",
-    "notStaking": "This account is currently not staking.",
-    "notDebonding": "This account is currently not debonding.",
+    "notStaking": "There are currently no active delegations.",
+    "notDebonding": "There are no debonding delegations for this account.",
     "showMore": "+ {{counter}} more",
     "sizeTooltip": "This account is indicated as an {{size}} account based on sum of assets they own.",
     "startStaking": "Start staking now",