Skip to content

Commit

Permalink
- removed AuctionListTresholdRow from standard row
Browse files Browse the repository at this point in the history 
- show Danger Zone text, but no tooltip if invalid values
- handle both sortings
  • Loading branch information
@radumojic
radumojic committed Apr 2, 2024
1 parent 909ef17 commit 146fad7
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 144 deletions.
75 changes: 37 additions & 38 deletions src/components/Nodes/NodeDangerZoneTooltip/NodeDangerZoneTooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,7 @@ export const NodeDangerZoneTooltip = ({
const bNLocked = new BigNumber(locked);
const bNMinimumAuctionStake = new BigNumber(minimumAuctionQualifiedStake);

if (
bNLocked.isGreaterThanOrEqualTo(bNMinimumAuctionStake) &&
isInDangerZone
) {
if (isInDangerZone) {
const bNDangerZoneTreshold = bNMinimumAuctionStake
.times(105)
.dividedBy(100)
Expand All @@ -53,40 +50,42 @@ export const NodeDangerZoneTooltip = ({
<div className={classNames('d-flex align-items-center gap-1', className)}>
<span className='text-red-400'>
{NodeQualificationStatusEnum.dangerZone}
<Overlay
title={
<>
<p className='mb-2 h6'>
Danger Zone <Led color='bg-danger ms-1' />
</p>
<p className='mb-0'>
This node is only{' '}
<FormatAmount
value={bNLockedAboveTreshold.toString(10)}
digits={4}
/>{' '}
above the threshold level.
{bNLockedNeededAboveDangerZone.isGreaterThan(0) && (
<>
{' '}
Increase the staked amount with{' '}
<FormatAmount
value={bNLockedNeededAboveDangerZone.toString(10)}
digits={4}
/>{' '}
/ node to exit the danger zone and move up in the auction
list.
</>
)}
</p>
</>
}
className='side-action'
tooltipClassName='tooltip-text-start tooltip-lg'
persistent
>
<FontAwesomeIcon icon={faSquareInfo} className='text-red-400' />
</Overlay>
{bNLocked.isGreaterThanOrEqualTo(bNMinimumAuctionStake) && (
<Overlay
title={
<>
<p className='mb-2 h6'>
Danger Zone <Led color='bg-danger ms-1' />
</p>
<p className='mb-0'>
This node is only{' '}
<FormatAmount
value={bNLockedAboveTreshold.toString(10)}
digits={4}
/>{' '}
above the threshold level.
{bNLockedNeededAboveDangerZone.isGreaterThan(0) && (
<>
{' '}
Increase the staked amount with{' '}
<FormatAmount
value={bNLockedNeededAboveDangerZone.toString(10)}
digits={4}
/>{' '}
/ node to exit the danger zone and move up in the
auction list.
</>
)}
</p>
</>
}
className='side-action'
tooltipClassName='tooltip-text-start tooltip-lg'
persistent
>
<FontAwesomeIcon icon={faSquareInfo} className='text-red-400' />
</Overlay>
)}
</span>
</div>
);
Expand Down
7 changes: 5 additions & 2 deletions src/components/NodesTable/components/NodesTableBody/NodesTableBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,13 @@ export const NodesTableBody = ({
const [notQualifiedExpanded, setNotQualifiedExpanded] = useState(false);

const isAuctionSortDesc =
sort === 'auctionPosition' && order === SortOrderEnum.desc;
(sort === 'auctionPosition' && order === SortOrderEnum.desc) ||
(sort === 'locked' && order === SortOrderEnum.asc);
const hasNoFilters =
[search, ...Object.keys(nodeFilters)].every((el) => el === undefined) &&
((sort === undefined && auctionList) || sort === 'auctionPosition');
((sort === undefined && auctionList) ||
sort === 'auctionPosition' ||
sort === 'locked');
const isCustomSize = ![PAGE_SIZE, AUCTION_LIST_MAX_NODES].includes(pageSize);

const tresholdIndex = isAuctionSortDesc
Expand Down
4 changes: 3 additions & 1 deletion src/components/NodesTable/components/NodesTableBody/Rows/AuctionListRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ export const AuctionListRow = ({
expandRowConfig
}: AuctionListRowUIType) => {
const { sort, order } = useGetSort();
const isSortDesc = sort === 'auctionPosition' && order === SortOrderEnum.desc;
const isSortDesc =
(sort === 'auctionPosition' && order === SortOrderEnum.desc) ||
(sort === 'locked' && order === SortOrderEnum.asc);

const hasExpand = Boolean(
expandRowConfig?.qualifiedExpandPosition ||
Expand Down
192 changes: 89 additions & 103 deletions src/components/NodesTable/components/NodesTableBody/Rows/StandardRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,8 @@ import {
NodeQualification
} from 'components';
import { urlBuilder } from 'helpers';
import { useGetSort } from 'hooks';
import { NodeType, SortOrderEnum } from 'types';

import { AuctionListTresholdRow } from './AuctionListTresholdRow';
import { NodeType } from 'types';

export interface StandardRowUIType {
nodeData: NodeType;
Expand All @@ -34,124 +32,112 @@ export const StandardRow = ({
index,
type,
status,
showTresholdRow,
showPosition
}: StandardRowUIType) => {
const { sort, order } = useGetSort();
const isSortDesc = sort === 'auctionPosition' && order === SortOrderEnum.desc;

const showTreshold = showTresholdRow && status === 'auction';

return (
<>
{isSortDesc && showTreshold && (
<AuctionListTresholdRow colSpan={10} isSortDesc />
<tr
className={classNames({
dz:
nodeData?.isInDangerZone &&
nodeData.auctionQualified &&
status === 'auction'
})}
>
{status === 'queued' && (
<td>
{nodeData.position ? (
<div>{nodeData.position}</div>
) : (
<span className='text-neutral-400'>N/A</span>
)}
</td>
)}
<tr
className={classNames({
dz:
nodeData?.isInDangerZone &&
nodeData.auctionQualified &&
status === 'auction'
})}
>
{status === 'queued' && (
<td>
{nodeData.position ? (
<div>{nodeData.position}</div>
) : (
<span className='text-neutral-400'>N/A</span>
)}
</td>
)}
{status === 'auction' && showPosition && (
<td>{index ?? nodeData.auctionPosition}</td>
{status === 'auction' && showPosition && (
<td>{index ?? nodeData.auctionPosition}</td>
)}
<td>
<div className='d-flex align-items-center gap-1 hash'>
<NodeStatusIcon node={nodeData} />
<NodeFullHistoryIcon node={nodeData} small={true} />
<NetworkLink
to={urlBuilder.nodeDetails(nodeData.bls)}
className='trim-wrapper'
>
<Trim text={nodeData.bls} />
</NetworkLink>
<NodeIssueIcon node={nodeData} />
</div>
</td>
<td>
{nodeData.name ? (
<div className='truncate-item-lg'>{nodeData.name}</div>
) : (
<span className='text-neutral-400'>N/A</span>
)}
<td>
<div className='d-flex align-items-center gap-1 hash'>
<NodeStatusIcon node={nodeData} />
<NodeFullHistoryIcon node={nodeData} small={true} />
</td>
<td>
<div className='d-flex'>
{nodeData.shard !== undefined ? (
<NetworkLink
to={urlBuilder.nodeDetails(nodeData.bls)}
className='trim-wrapper'
to={urlBuilder.shard(nodeData.shard)}
data-testid={`shardLink${index}`}
>
<Trim text={nodeData.bls} />
<ShardSpan shard={nodeData.shard} />
</NetworkLink>
<NodeIssueIcon node={nodeData} />
</div>
</td>
<td>
{nodeData.name ? (
<div className='truncate-item-lg'>{nodeData.name}</div>
) : (
<span className='text-neutral-400'>N/A</span>
)}
</td>
<td>
<div className='d-flex'>
{nodeData.shard !== undefined ? (
<NetworkLink
to={urlBuilder.shard(nodeData.shard)}
data-testid={`shardLink${index}`}
>
<ShardSpan shard={nodeData.shard} />
</NetworkLink>
) : (
<span className='text-neutral-400'>N/A</span>
)}
</div>
</td>
<td>
{nodeData.version ? (
nodeData.version
</div>
</td>
<td>
{nodeData.version ? (
nodeData.version
) : (
<span className='text-neutral-400'>N/A</span>
)}
</td>
{status !== 'auction' && (
<td className='text-end' style={{ maxWidth: '8rem' }}>
{nodeData.validatorIgnoredSignatures ? (
nodeData.validatorIgnoredSignatures.toLocaleString('en')
) : (
<span className='text-neutral-400'>N/A</span>
)}
</td>
{status !== 'auction' && (
<td className='text-end' style={{ maxWidth: '8rem' }}>
{nodeData.validatorIgnoredSignatures ? (
nodeData.validatorIgnoredSignatures.toLocaleString('en')
) : (
<span className='text-neutral-400'>N/A</span>
)}
</td>
)}
<td>
<NodeStatus node={nodeData} className='align-items-end' />
</td>
{status === 'auction' && (
<td className='text-end'>
<NodeQualification
node={nodeData}
showDangerZone={true}
className='justify-content-end'
/>
</td>
)}
{(type === 'validator' || status === 'auction') && nodeData.locked && (
<td className='text-end'>
<Overlay
title={<NodeLockedStakeTooltip node={nodeData} />}
tooltipClassName='tooltip-text-start tooltip-lg'
truncate
>
<FormatAmount value={nodeData.locked} showTooltip={false} />
</Overlay>
</td>
)}
)}
<td>
<NodeStatus node={nodeData} className='align-items-end' />
</td>
{status === 'auction' && (
<td className='text-end'>
<NodeRating node={nodeData} className='justify-content-end' />
<NodeQualification
node={nodeData}
showDangerZone={true}
className='justify-content-end'
/>
</td>
)}
{(type === 'validator' || status === 'auction') && nodeData.locked && (
<td className='text-end'>
{nodeData.nonce ? (
nodeData.nonce
) : (
<span className='text-neutral-400'>N/A</span>
)}
<Overlay
title={<NodeLockedStakeTooltip node={nodeData} />}
tooltipClassName='tooltip-text-start tooltip-lg'
truncate
>
<FormatAmount value={nodeData.locked} showTooltip={false} />
</Overlay>
</td>
</tr>
{!isSortDesc && showTreshold && <AuctionListTresholdRow colSpan={10} />}
</>
)}
<td className='text-end'>
<NodeRating node={nodeData} className='justify-content-end' />
</td>
<td className='text-end'>
{nodeData.nonce ? (
nodeData.nonce
) : (
<span className='text-neutral-400'>N/A</span>
)}
</td>
</tr>
);
};

0 comments on commit 146fad7

Please sign in to comment.