From b09682a867800ee3996aa2657e58192d8934ce6d Mon Sep 17 00:00:00 2001 From: Radu Mojic Date: Tue, 28 May 2024 16:06:06 +0300 Subject: [PATCH 1/2] removed unused component --- .../NodesAuctionList/NodesAuctionListOld.tsx | 264 ------------------ 1 file changed, 264 deletions(-) delete mode 100644 src/pages/NodesAuctionList/NodesAuctionListOld.tsx diff --git a/src/pages/NodesAuctionList/NodesAuctionListOld.tsx b/src/pages/NodesAuctionList/NodesAuctionListOld.tsx deleted file mode 100644 index 7c642aede..000000000 --- a/src/pages/NodesAuctionList/NodesAuctionListOld.tsx +++ /dev/null @@ -1,264 +0,0 @@ -import { useEffect, useState } from 'react'; -import BigNumber from 'bignumber.js'; -import { useDispatch, useSelector } from 'react-redux'; -import { useSearchParams } from 'react-router-dom'; - -import { PAGE_SIZE, AUCTION_LIST_MAX_NODES } from 'appConstants'; -import { IDENTITIES_FIELDS } from 'appConstants'; -import { - Loader, - Pager, - PageSize, - PageState, - AuctionListCards, - NodesTable, - AuctionListFilters -} from 'components'; -import { processNodesIdentities } from 'helpers'; -import { - useAdapter, - useGetNodeFilters, - useGetPage, - useGetSearch, - useGetSort -} from 'hooks'; -import { faCogs } from 'icons/regular'; -import { NodesTabs } from 'layouts/NodesLayout/NodesTabs'; -import { nodesIdentitiesSelector } from 'redux/selectors'; -import { setNodesIdentities } from 'redux/slices/nodesIdentities'; -import { NodeType, SortOrderEnum } from 'types'; - -export const NodesAuctionListOld = () => { - const dispatch = useDispatch(); - const { nodesIdentities } = useSelector(nodesIdentitiesSelector); - const { getNodes, getNodesCount, getIdentities } = useAdapter(); - - const { search } = useGetSearch(); - const { page, size: pageSize } = useGetPage(); - const nodeFilters = useGetNodeFilters(); - const sort = useGetSort(); - const [searchParams] = useSearchParams(); - - const [nodes, setNodes] = useState([]); - const [totalNodes, setTotalNodes] = useState('...'); - const [dataReady, setDataReady] = useState(); - - const isCustomSize = ![PAGE_SIZE, AUCTION_LIST_MAX_NODES].includes(pageSize); - const size = isCustomSize ? pageSize : AUCTION_LIST_MAX_NODES; - - let filterText = ''; - if (!nodeFilters.isQualified) { - filterText = 'Unqualified'; - } - if (nodeFilters.isQualified) { - filterText = 'Qualified'; - } - if (nodeFilters.isAuctionDangerZone) { - filterText = 'Danger Zone'; - } - if (Object.keys(nodeFilters).length === 0) { - filterText = ''; - } - if (!sort.sort) { - sort.sort = 'locked'; - sort.order = SortOrderEnum.desc; - } - - const hasNoFilters = - [search, ...Object.keys(nodeFilters)].every((el) => el === undefined) && - sort.sort === 'locked'; - - const sortLocked = (a: NodeType, b: NodeType) => { - if (sort.sort !== 'locked') { - return 0; - } - - const totalLockedA = new BigNumber(a.stake).plus(a.auctionTopUp ?? 0); - const totalLockedB = new BigNumber(b.stake).plus(b.auctionTopUp ?? 0); - const isDesc = sort.order === SortOrderEnum.asc; - - return totalLockedA?.isGreaterThan(totalLockedB) - ? isDesc - ? 1 - : -1 - : isDesc - ? -1 - : 1; - }; - - const fetchNodes = () => { - setDataReady(undefined); - const auctionListFilters = { - ...nodeFilters, - type: 'validator', - isAuctioned: true, - search - }; - - // TODO - temporary until sorting is fixed from api - const nodesPromiseArray = hasNoFilters - ? [ - getNodes({ - ...sort, - ...auctionListFilters, - isQualified: true, - page, - size - }), - getNodes({ - ...sort, - ...auctionListFilters, - isQualified: false, - page, - size - }) - ] - : [ - getNodes({ - ...sort, - ...auctionListFilters, - page, - size: pageSize - }), - Promise.resolve({ success: true, data: undefined }) - ]; - - Promise.all([...nodesPromiseArray, getNodesCount(auctionListFilters)]).then( - ([firstNodes, secondNodes, count]) => { - const qualifiedNodes = firstNodes.data - ? firstNodes.data - .filter( - (node: NodeType) => - node.auctionQualified && !node.isInDangerZone - ) - .sort(sortLocked) - : []; - const dzNodes = firstNodes.data - ? firstNodes.data - .filter((node: NodeType) => node.isInDangerZone) - .sort(sortLocked) - : []; - const notQualifiedNodes = firstNodes.data - ? firstNodes.data - .filter( - (node: NodeType) => - !node.auctionQualified && !node.isInDangerZone - ) - .sort(sortLocked) - : []; - - const sortedFirst = [ - ...(sort.order === SortOrderEnum.asc - ? [ - ...(notQualifiedNodes ?? []), - ...(dzNodes ?? []), - ...(qualifiedNodes ?? []) - ] - : [ - ...(qualifiedNodes ?? []), - ...(dzNodes ?? []), - ...(notQualifiedNodes ?? []) - ]) - ]; - const allNodes = [ - ...(sort.order === SortOrderEnum.asc - ? [...(secondNodes.data ?? []), ...(sortedFirst ?? [])] - : [...(sortedFirst ?? []), ...(secondNodes.data ?? [])]) - ]; - - const identityArray = allNodes - .filter((node) => node.identity) - .map((node) => node.identity); - - if (identityArray.length > 0) { - const nodesIdentityList = nodesIdentities.map( - (node) => node.identity - ); - const newIdentities = identityArray.filter( - (value) => !nodesIdentityList.includes(value) - ); - - if (newIdentities.length > 0) { - getIdentities({ - identities: identityArray.join(','), - fields: IDENTITIES_FIELDS.join(',') - }).then(({ data, success }) => { - if (data) { - const processedNodesIdentities = processNodesIdentities(data); - dispatch( - setNodesIdentities({ - nodesIdentities: processedNodesIdentities, - unprocessed: data, - isFetched: success - }) - ); - } - }); - } - } - setNodes(allNodes); - setTotalNodes(count.data); - - setDataReady( - firstNodes.success && secondNodes.success && count.success - ); - } - ); - }; - - useEffect(fetchNodes, [searchParams]); - - return ( -
-
- -
- - - {dataReady === true && (isCustomSize || !hasNoFilters) && ( - - )} -
-
- - {dataReady === undefined && } - {dataReady === false && ( - - )} - {dataReady === true && nodes.length === 0 && ( - - )} - - {dataReady === true && nodes.length > 0 && ( - <> -
- - - -
- {(isCustomSize || !hasNoFilters) && ( -
- - -
- )} - - )} -
- ); -}; From 8d1ce518f7bb2cd8705f20936e3e30868c68a3b2 Mon Sep 17 00:00:00 2001 From: Radu Mojic Date: Tue, 28 May 2024 17:11:29 +0300 Subject: [PATCH 2/2] Show the filtered Nodes Table on click on an Auction List Row Validator ( Identity/Provider/Owner ) --- .../AuctionListTable/AuctionListBaseRow.tsx | 256 ++++++++++++------ .../NodesTableBody/NodesTableBody.tsx | 15 +- .../components/NodesTableHead/AuctionHead.tsx | 23 +- src/components/NodesTable/index.tsx | 2 +- .../Identities/components/IdentityRow.tsx | 4 +- src/pages/Identities/identities.styles.scss | 7 +- src/pages/NodesAuctionList/index.ts | 1 - .../nodesAuctionList.styles.scss | 39 +++ src/types/adapter.types.ts | 1 - 9 files changed, 242 insertions(+), 106 deletions(-) diff --git a/src/components/Nodes/AuctionListTable/AuctionListBaseRow.tsx b/src/components/Nodes/AuctionListTable/AuctionListBaseRow.tsx index 2e75422b2..c32b08cb2 100644 --- a/src/components/Nodes/AuctionListTable/AuctionListBaseRow.tsx +++ b/src/components/Nodes/AuctionListTable/AuctionListBaseRow.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import BigNumber from 'bignumber.js'; import classNames from 'classnames'; -import { ELLIPSIS, ZERO } from 'appConstants'; +import { ELLIPSIS, ZERO, MAX_RESULTS } from 'appConstants'; import { FormatAmount, NodeThreshold, @@ -12,10 +13,20 @@ import { FormatNumber, NetworkLink, SharedIdentity, - Trim + Trim, + Loader, + PageState, + NodesTable } from 'components'; import { urlBuilder } from 'helpers'; -import { AuctionValidatorType } from 'types'; +import { useAdapter } from 'hooks'; +import { faCogs } from 'icons/regular'; +import { + AuctionValidatorType, + NodeType, + NodeTypeEnum, + SortOrderEnum +} from 'types'; import { AuctionListBaseRowUIType } from './types'; @@ -34,6 +45,25 @@ const getIdentityLink = (validator: AuctionValidatorType) => { return ''; }; +const getNodesFilters = (validator: AuctionValidatorType) => { + const { auctionValidators, identity, provider, owner } = validator; + if (!auctionValidators || !(identity || provider || owner)) { + return; + } + + return { + size: MAX_RESULTS, + type: NodeTypeEnum.validator, + sort: 'qualifiedStake', + order: SortOrderEnum.desc, + isAuctioned: true, + withIdentityInfo: true, + ...(identity ? { identity } : {}), + ...(provider ? { provider } : {}), + ...(owner ? { owner } : {}) + }; +}; + export const AuctionListBaseRow = ({ validator, index, @@ -57,6 +87,27 @@ export const AuctionListBaseRow = ({ auctionPosition } = validator; + const { getNodes } = useAdapter(); + + const [collapsed, setCollapsed] = useState(true); + const [showDetails, setShowDetails] = useState(false); + const [dataReady, setDataReady] = useState(); + const [identityNodes, setIdentityNodes] = useState([]); + + const expand = (auctionValidator: AuctionValidatorType) => () => { + if (dataReady === undefined) { + const nodeFilters = getNodesFilters(auctionValidator); + if (nodeFilters) { + getNodes(nodeFilters).then((nodes) => { + setDataReady(nodes.success); + setIdentityNodes(nodes.data); + }); + } + } + setShowDetails(true); + setCollapsed((collapsed) => !collapsed); + }; + const identityLink = getIdentityLink(validator); const bNauctionValidators = new BigNumber(auctionValidators ?? 0); @@ -84,91 +135,132 @@ export const AuctionListBaseRow = ({ }; return ( - - {showPosition && {auctionPosition ?? index + 1}} - -
- - + 0 + })} + > + {showPosition && {auctionPosition ?? index + 1}} + +
+ + + +
+ + + {details && ( + ({details}) + )} + +
+
+ + {auctionValidators ? auctionValidators : ELLIPSIS} + +
+ - -
- - - {details && ( - ({details}) + {qualifiedAuctionValidators && qualifiedAuctionValidators > 0 ? ( + + ) : ( + ZERO + )} + {new BigNumber(dangerZoneValidators ?? 0).isGreaterThan(0) && + qualifiedStake && ( + )} -
-
- - {auctionValidators ? auctionValidators : ELLIPSIS} - -
+ - - {qualifiedAuctionValidators && qualifiedAuctionValidators > 0 ? ( - + {formattedDroppedValidators ? formattedDroppedValidators : ZERO} + + + {qualifiedStake ? ( + + } + tooltipClassName='tooltip-text-start tooltip-lg' + persistent + truncate + > + + ) : ( - ZERO + ELLIPSIS )} - {new BigNumber(dangerZoneValidators ?? 0).isGreaterThan(0) && - qualifiedStake && ( - - )} -
- - - {formattedDroppedValidators ? formattedDroppedValidators : ZERO} - - - {qualifiedStake ? ( - - } - tooltipClassName='tooltip-text-start tooltip-lg' - persistent - truncate - > - - - ) : ( - ELLIPSIS - )} - - - - - + + + + + + {showDetails && ( + + +
+ {dataReady === undefined && ( +
+ +
+ )} + {dataReady === false && ( + + )} + {dataReady === true && ( +
+ + + +
+ )} +
+ + + )} + ); }; diff --git a/src/components/NodesTable/components/NodesTableBody/NodesTableBody.tsx b/src/components/NodesTable/components/NodesTableBody/NodesTableBody.tsx index 1a40ff14e..fbded4671 100644 --- a/src/components/NodesTable/components/NodesTableBody/NodesTableBody.tsx +++ b/src/components/NodesTable/components/NodesTableBody/NodesTableBody.tsx @@ -20,6 +20,7 @@ export interface NodesTableBodyUIType { status?: NodeType['status']; auctionList?: boolean; showPosition?: boolean; + showTresholdRow?: boolean; } const findThresholdNode = ( @@ -50,7 +51,8 @@ export const NodesTableBody = ({ type, status, auctionList, - showPosition + showPosition, + showTresholdRow = true }: NodesTableBodyUIType) => { const { unprocessed: { minimumAuctionQualifiedStake } @@ -90,8 +92,11 @@ export const NodesTableBody = ({ return ( {nodes.map((nodeData, index) => { - const showThresholdRow = Boolean( - thresholdIndex && index === thresholdIndex && hasNoFilters + const hasTresholdRow = Boolean( + showTresholdRow && + thresholdIndex && + index === thresholdIndex && + hasNoFilters ); if (statistics) { @@ -105,7 +110,7 @@ export const NodesTableBody = ({ @@ -119,7 +124,7 @@ export const NodesTableBody = ({ type={type} status={status} key={nodeData.bls} - showThresholdRow={showThresholdRow} + showThresholdRow={hasTresholdRow} showPosition={showPosition} /> ); diff --git a/src/components/NodesTable/components/NodesTableHead/AuctionHead.tsx b/src/components/NodesTable/components/NodesTableHead/AuctionHead.tsx index a679f9dc5..ee5228dc9 100644 --- a/src/components/NodesTable/components/NodesTableHead/AuctionHead.tsx +++ b/src/components/NodesTable/components/NodesTableHead/AuctionHead.tsx @@ -8,31 +8,38 @@ import { useIsSovereign } from 'hooks'; import { NodesTableFilterHead } from '../NodesTableFilterHead'; -export const AuctionHead = () => { +export const AuctionHead = ({ hideFilters }: { hideFilters?: boolean }) => { const isSovereign = useIsSovereign(); return ( - + - + - + - + - + - + - + diff --git a/src/components/NodesTable/index.tsx b/src/components/NodesTable/index.tsx index 101423ce3..614f0a11a 100644 --- a/src/components/NodesTable/index.tsx +++ b/src/components/NodesTable/index.tsx @@ -43,7 +43,7 @@ export default class NodesTable extends React.Component { })} > - {auctionList && } + {auctionList && } {statistics && } {queue && } {!statistics && !queue && !auctionList && ( diff --git a/src/pages/Identities/components/IdentityRow.tsx b/src/pages/Identities/components/IdentityRow.tsx index 84fe71ac1..0b7a5d994 100644 --- a/src/pages/Identities/components/IdentityRow.tsx +++ b/src/pages/Identities/components/IdentityRow.tsx @@ -1,6 +1,7 @@ import { useRef, useState } from 'react'; import BigNumber from 'bignumber.js'; +import { MAX_RESULTS } from 'appConstants'; import { ReactComponent as CarretDown } from 'assets/img/carret-down.svg'; import { Loader, @@ -40,8 +41,7 @@ export const IdentityRow = ({ identity, index }: IdentityRowType) => { if (identityRow.identity) { getNodes({ identity: identityRow.identity, - size: 1500, - pagination: false + size: MAX_RESULTS }).then((nodes) => { if (ref.current !== null) { setDataReady(nodes.success); diff --git a/src/pages/Identities/identities.styles.scss b/src/pages/Identities/identities.styles.scss index 659c822ec..0f3c11956 100644 --- a/src/pages/Identities/identities.styles.scss +++ b/src/pages/Identities/identities.styles.scss @@ -37,11 +37,9 @@ .identity-details-row { background-color: var(--neutral-900); - &:hover { background-color: var(--neutral-900); } - .table-wrapper { th { color: var(--body-color); @@ -50,7 +48,6 @@ font-size: 0.785rem; border-bottom: 0; } - tr { background-color: var(--neutral-900); color: var(--neutral-400); @@ -59,13 +56,11 @@ &.collapsed { td { - border-top: 0; - + border: 0; .content { max-height: 0; overflow: hidden; } - .details-arrow { transform: rotateZ(-90deg); } diff --git a/src/pages/NodesAuctionList/index.ts b/src/pages/NodesAuctionList/index.ts index 8ac18c2f1..7b8ddf8d6 100644 --- a/src/pages/NodesAuctionList/index.ts +++ b/src/pages/NodesAuctionList/index.ts @@ -1,2 +1 @@ -export * from './NodesAuctionListOld'; export * from './NodesAuctionList'; diff --git a/src/pages/NodesAuctionList/nodesAuctionList.styles.scss b/src/pages/NodesAuctionList/nodesAuctionList.styles.scss index beeabed7e..a8110158b 100644 --- a/src/pages/NodesAuctionList/nodesAuctionList.styles.scss +++ b/src/pages/NodesAuctionList/nodesAuctionList.styles.scss @@ -11,5 +11,44 @@ white-space: nowrap; vertical-align: middle; } + + .auction-list-row { + position: relative; + background-color: var(--neutral-900); + &:hover { + td { + background-color: var(--neutral-900); + } + } + &.collapsed { + background-color: transparent; + } + } + .auction-list-expand-row { + background-color: var(--neutral-900); + .table-wrapper { + th { + color: var(--body-color); + background: none; + text-transform: uppercase; + font-size: 0.785rem; + border-bottom: 0; + } + tr { + background-color: var(--neutral-900); + color: var(--neutral-400); + } + } + + &.collapsed { + td { + border: 0; + .content { + max-height: 0; + overflow: hidden; + } + } + } + } } } diff --git a/src/types/adapter.types.ts b/src/types/adapter.types.ts index d45b91547..d3fc88007 100644 --- a/src/types/adapter.types.ts +++ b/src/types/adapter.types.ts @@ -74,7 +74,6 @@ export interface GetNodesType extends SortableApiType { status?: string; count?: boolean; identity?: string; - pagination?: boolean; provider?: string; fullHistory?: string; from?: number;