Merge pull request #1461 from oasisprotocol/mz/staking-alt

Consensus: add debonding delegations to Staking card
oasisprotocol · Jul 17, 2024 · 069be84 · 069be84
2 parents 3c5c8bc + 6949bb2
commit 069be84
Show file tree

Hide file tree

Showing 12 changed files with 207 additions and 99 deletions.
diff --git a/.changelog/1461.trivial.md b/.changelog/1461.trivial.md
@@ -0,0 +1 @@
+Add debonding delegations to Staking card
diff --git a/src/app/components/Account/ConsensusAccountDetailsView.tsx b/src/app/components/Account/ConsensusAccountDetailsView.tsx
@@ -83,7 +83,7 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
           ticker: account.ticker,
         })}
       </dd>
-      <StyledListTitle>{t('common.staking')}</StyledListTitle>
+      <StyledListTitle>{t('common.staked')}</StyledListTitle>
       <dd>
         {t('common.valueInToken', {
           ...getPreciseNumberFormat(account.delegations_balance!),

diff --git a/src/app/components/Delegations/index.tsx b/src/app/components/Delegations/index.tsx
@@ -27,41 +27,42 @@ export const Delegations: FC<DelegationsProps> = ({
   const { t } = useTranslation()
 
   const tableColumns: TableColProps[] = [
-    { key: 'delegator', content: t('common.address') },
+    { key: 'delegator', content: t('common.address'), hide: linkType === 'validator' },
+    { key: 'validator', content: t('validator.title'), hide: linkType !== 'validator' },
     { key: 'amount', content: t('validator.amount'), align: TableCellAlign.Right },
     { key: 'shares', content: t('common.shares'), align: TableCellAlign.Right },
     ...(debonding
       ? [{ key: 'debondingEnd', content: t('validator.debondingEnd'), align: TableCellAlign.Right }]
       : []),
   ]
   const tableRows = delegations?.map(delegation => ({
-    key: linkType === 'validator' ? delegation.validator : delegation.delegator,
+    key: `${delegation.delegator}${delegation.validator}${debonding ? 'debond_end' in delegation && delegation.debond_end : ''}`,
     data: [
       {
-        content:
-          linkType === 'validator' ? (
-            <ValidatorLink address={delegation.validator} alwaysTrim network={delegation.network} />
-          ) : (
-            <AccountLink scope={delegation} address={delegation.delegator} />
-          ),
+        content: <AccountLink scope={delegation} address={delegation.delegator} />,
+        hide: linkType === 'validator',
         key: 'delegator',
       },
+      {
+        content: <ValidatorLink address={delegation.validator} alwaysTrim network={delegation.network} />,
+        hide: linkType !== 'validator',
+        key: 'validator',
+      },
       {
         align: TableCellAlign.Right,
-        content: <RoundedBalance value={delegation.amount} />,
+        content: <RoundedBalance value={delegation.amount} ticker={delegation.ticker} />,
         key: 'amount',
       },
       {
         align: TableCellAlign.Right,
         content: <RoundedBalance compactLargeNumbers value={delegation.shares} />,
         key: 'shares',
       },
-      ...(debonding
+      ...(debonding && 'debond_end' in delegation
         ? [
             {
               align: TableCellAlign.Right,
-              // TODO: Add when API returns correct value and provides current epoch
-              content: <>-</>,
+              content: <>{delegation.debond_end}</>,
               key: 'debondingEnd',
             },
           ]

diff --git a/src/app/components/FilterButtons/index.tsx b/src/app/components/FilterButtons/index.tsx
@@ -0,0 +1,42 @@
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import Typography from '@mui/material/Typography'
+import { COLORS } from '../../../styles/theme/colors'
+
+type FilterButtonsProps<T extends string> = {
+  options: { label: string; value: T }[]
+  onSelect: (value: T) => void
+  value?: NoInfer<T>
+}
+
+export const FilterButtons = <T extends string>({ options, onSelect, value }: FilterButtonsProps<T>) => {
+  return (
+    <Box sx={{ display: 'inline-flex' }}>
+      {options.map(option => {
+        const selected = option.value === value
+        return (
+          <Chip
+            key={option.value}
+            onClick={() => onSelect(option.value)}
+            clickable
+            color="secondary"
+            label={
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Typography component="span" sx={{ fontSize: 16 }}>
+                  {option.label}
+                </Typography>
+              </Box>
+            }
+            sx={{
+              mr: 3,
+              borderColor: COLORS.brandMedium,
+              backgroundColor: selected ? COLORS.brandMedium : COLORS.brandMedium15,
+              color: selected ? COLORS.white : COLORS.grayExtraDark,
+            }}
+            variant={selected ? 'outlined-selected' : 'outlined'}
+          />
+        )
+      })}
+    </Box>
+  )
+}
diff --git a/src/app/components/Proposals/VoteTypeFilter.tsx b/src/app/components/Proposals/VoteTypeFilter.tsx
@@ -1,17 +1,14 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
-import Chip from '@mui/material/Chip'
-import Typography from '@mui/material/Typography'
-import { COLORS } from '../../../styles/theme/colors'
 import { ProposalVoteValue, VoteType } from '../../../types/vote'
+import { FilterButtons } from '../FilterButtons'
 
 type VoteTypeFilterProps = {
   onSelect: (voteType: VoteType) => void
   value?: VoteType
 }
 
-export const VoteTypeFilter: FC<VoteTypeFilterProps> = ({ onSelect, value }) => {
+export const VoteTypeFilter: FC<VoteTypeFilterProps> = props => {
   const { t } = useTranslation()
   const options: { label: string; value: VoteType }[] = [
     {
@@ -32,33 +29,5 @@ export const VoteTypeFilter: FC<VoteTypeFilterProps> = ({ onSelect, value }) =>
     },
   ]
 
-  return (
-    <Box sx={{ display: 'inline-flex' }}>
-      {options.map(option => {
-        const selected = option.value === value
-        return (
-          <Chip
-            key={option.value}
-            onClick={() => onSelect(option.value)}
-            clickable
-            color="secondary"
-            label={
-              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <Typography component="span" sx={{ fontSize: 16 }}>
-                  {option.label}
-                </Typography>
-              </Box>
-            }
-            sx={{
-              mr: 3,
-              borderColor: COLORS.brandMedium,
-              backgroundColor: selected ? COLORS.brandMedium : COLORS.brandMedium15,
-              color: selected ? COLORS.white : COLORS.grayExtraDark,
-            }}
-            variant={selected ? 'outlined-selected' : 'outlined'}
-          />
-        )
-      })}
-    </Box>
-  )
+  return <FilterButtons options={options} {...props} />
 }
diff --git a/src/app/components/Table/index.tsx b/src/app/components/Table/index.tsx
@@ -51,6 +51,7 @@ export enum TableCellAlign {
 type TableCellProps = {
   align?: TableCellAlign
   content: ReactNode
+  hide?: boolean
   key: string
 }
 
@@ -61,9 +62,10 @@ export type TableRowProps = {
 }
 
 export type TableColProps = {
-  key: string
-  content: ReactNode
   align?: TableCellAlign
+  content: ReactNode
+  hide?: boolean
+  key: string
   width?: string
 }
 type TableProps = {
@@ -112,18 +114,23 @@ export const Table: FC<TableProps> = ({
         <MuiTable aria-label={name}>
           <TableHead>
             <TableRow>
-              {columns.map((column, index) => (
-                <TableCell
-                  key={column.key}
-                  align={column.align}
-                  sx={{
-                    width: column.width || 'auto',
-                    ...(stickyColumn && !index && isMobile ? stickyColumnStyles : {}),
-                  }}
-                >
-                  {column.content}
-                </TableCell>
-              ))}
+              {columns.map((column, index) => {
+                if (column.hide) {
+                  return null
+                }
+                return (
+                  <TableCell
+                    key={column.key}
+                    align={column.align}
+                    sx={{
+                      width: column.width || 'auto',
+                      ...(stickyColumn && !index && isMobile ? stickyColumnStyles : {}),
+                    }}
+                  >
+                    {column.content}
+                  </TableCell>
+                )
+              })}
             </TableRow>
           </TableHead>
           <TableBody>
@@ -132,18 +139,23 @@ export const Table: FC<TableProps> = ({
             )}
             {rows?.map(row => (
               <StyledTableRow key={row.key} highlight={row.highlight}>
-                {row.data.map((cell, index) => (
-                  <TableCell
-                    key={cell.key}
-                    align={cell.align}
-                    sx={{
-                      ...(stickyColumn && !index && isMobile ? stickyColumnStyles : {}),
-                      ...(extraHorizontalSpaceOnMobile && isMobile ? extraHorizontalPaddingStyles : {}),
-                    }}
-                  >
-                    {cell.content}
-                  </TableCell>
-                ))}
+                {row.data.map((cell, index) => {
+                  if (cell.hide) {
+                    return null
+                  }
+                  return (
+                    <TableCell
+                      key={cell.key}
+                      align={cell.align}
+                      sx={{
+                        ...(stickyColumn && !index && isMobile ? stickyColumnStyles : {}),
+                        ...(extraHorizontalSpaceOnMobile && isMobile ? extraHorizontalPaddingStyles : {}),
+                      }}
+                    >
+                      {cell.content}
+                    </TableCell>
+                  )
+                })}
               </StyledTableRow>
             ))}
           </TableBody>

diff --git a/src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx b/src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx
@@ -59,7 +59,7 @@ const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ accou
       value: Number(account.available),
     },
     {
-      label: t('common.staking'),
+      label: t('common.staked'),
       value: Number(account.delegations_balance),
     },
     {

diff --git a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountCardEmptyState.tsx b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountCardEmptyState.tsx
@@ -36,7 +36,7 @@ export const ConsensusAccountCardEmptyState: FC<ConsensusAccountCardEmptyStatePr
         sx={{
           color: COLORS.grayMedium,
           fontWeight: 700,
-          maxWidth: '170px',
+          maxWidth: '190px',
           textAlign: 'center',
           opacity: 0.5,
         }}