diff --git a/src/App.scss b/src/App.scss index cb0ca03..a822bc3 100644 --- a/src/App.scss +++ b/src/App.scss @@ -76,6 +76,10 @@ body { width: 100%; } +.fullH { + height: 100%; +} + .mp__btnConnect { position: relative; @@ -1149,7 +1153,6 @@ input[type=number] { } } - .trustedBadge { color: #0095f6; } @@ -1158,12 +1161,6 @@ input[type=number] { color: #ffb817; } -.validatorCard { - height: 100% !important; - cursor: pointer; -} - - .pOneLine { overflow: hidden; white-space: nowrap; @@ -1426,6 +1423,10 @@ input[type=number] { display: none; } +.opacity0 { + opacity: 0; +} + .MuiTooltip-tooltip { font-size: 0.8rem !important; padding: 8px 12px !important; diff --git a/src/components/Tile.tsx b/src/components/Tile.tsx index 59ffad4..6c5fb25 100644 --- a/src/components/Tile.tsx +++ b/src/components/Tile.tsx @@ -114,7 +114,7 @@ export default function Tile(props: { cmn.flex, cmn.flexcv, cmn.mbott5, - ['pSec', !props.color], + ['pSec', !props.color && !props.textColor], ['blackP', props.color] )} > diff --git a/src/components/delegation/Delegation.tsx b/src/components/delegation/Delegation.tsx index 17e2a4e..e613506 100644 --- a/src/components/delegation/Delegation.tsx +++ b/src/components/delegation/Delegation.tsx @@ -27,6 +27,8 @@ import { Collapse, Grid, Tooltip } from '@mui/material' import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded' import AccountBalanceRoundedIcon from '@mui/icons-material/AccountBalanceRounded' import ApartmentRoundedIcon from '@mui/icons-material/ApartmentRounded' +import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded' +import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded' import SkBtn from '../SkBtn' import ValidatorLogo from './ValidatorLogo' @@ -42,16 +44,19 @@ import { import { formatBigIntTimestampSeconds } from '../../core/timeHelper' import { convertMonthIndexToText, formatBalance } from '../../core/helper' +import Tile from '../Tile' export default function Delegation(props: { delegation: types.staking.IDelegation validator: types.staking.IValidator delegationType: types.staking.DelegationType + accept?: (delegationInfo: types.staking.IDelegationInfo) => Promise unstake?: (delegationInfo: types.staking.IDelegationInfo) => Promise cancelRequest?: (delegationInfo: types.staking.IDelegationInfo) => Promise loading: types.staking.IRewardInfo | types.staking.IDelegationInfo | false isXs: boolean customAddress: types.AddressType | undefined + isValidatorPage?: boolean }) { const source = getDelegationSource(props.delegation) const delegationAmount = formatBalance(props.delegation.amount, 'SKL') @@ -91,6 +96,12 @@ export default function Delegation(props: { } } + const noActions = + Number(props.delegation.stateId) !== DelegationState.PROPOSED && + Number(props.delegation.stateId) !== DelegationState.DELEGATED && + !isCompleted && + !props.isValidatorPage + if (!props.validator) return return (
@@ -98,19 +109,22 @@ export default function Delegation(props: { container spacing={0} alignItems="center" - className="validatorCard" + className={cls('fullH', ['pointer', !noActions])} onClick={() => { + if (noActions) return setOpen(!open) }} >
- + {!props.isValidatorPage && ( + + )}

ID: {Number(props.delegation.id)}

@@ -162,22 +176,43 @@ export default function Delegation(props: {

{delegationAmount}

{getStakingText()}

+
- {isCompleted ? ( -
-

Delegation completed

-

- {convertMonthIndexToText(Number(props.delegation.finished))} -

-
- ) : null} + {props.isValidatorPage && ( + } + /> + )} + {isCompleted && ( + } + /> + )} {Number(props.delegation.stateId) === DelegationState.DELEGATED && props.unstake ? ( ) : null} - {Number(props.delegation.stateId) !== DelegationState.PROPOSED && - Number(props.delegation.stateId) !== DelegationState.DELEGATED && - !isCompleted ? ( -

- No actions available -

- ) : null}
diff --git a/src/components/delegation/DelegationTotals.tsx b/src/components/delegation/DelegationTotals.tsx index ff0c0a8..a9d46a2 100644 --- a/src/components/delegation/DelegationTotals.tsx +++ b/src/components/delegation/DelegationTotals.tsx @@ -22,7 +22,7 @@ */ import { useMemo } from 'react' -import { cls, styles } from '@skalenetwork/metaport' +import { cls, styles, useUIStore } from '@skalenetwork/metaport' import { type types } from '@/core' import InboxRoundedIcon from '@mui/icons-material/InboxRounded' @@ -46,7 +46,7 @@ const DelegationTotals: React.FC = ({ delegations, classN () => (delegations ? calculateDelegationTotals(delegations) : null), [delegations] ) - + const theme = useUIStore((state) => state.theme) const getTileText = (status: string, count?: number) => `${status}${count ? ` (${count})` : ''}` return ( @@ -56,6 +56,7 @@ const DelegationTotals: React.FC = ({ delegations, classN text={getTileText('Proposed', totals?.proposed.count)} grow size="md" + textColor={totals?.proposed.count ? theme.primary : undefined} icon={} /> ))} {remainingItems > 0 && (