diff --git a/packages/page-staking/src/Bags/Bag.tsx b/packages/page-staking/src/Bags/Bag.tsx index 0fad8eccf9..9e7a565b6a 100644 --- a/packages/page-staking/src/Bags/Bag.tsx +++ b/packages/page-staking/src/Bags/Bag.tsx @@ -22,7 +22,7 @@ interface Props { bagUpper: BN; index: number; info: PalletBagsListListBag; - stashNodes?: StashNode[]; + nodesOwn?: StashNode[]; } function getRebags (bonded: ListNode[], bagUpper: BN, bagLower: BN): string[] { @@ -34,7 +34,7 @@ function getRebags (bonded: ListNode[], bagUpper: BN, bagLower: BN): string[] { .map(({ stashId }) => stashId); } -function Bag ({ bagLower, bagUpper, info, stashNodes }: Props): React.ReactElement { +function Bag ({ bagLower, bagUpper, info, nodesOwn }: Props): React.ReactElement { const [[headId, trigger], setHeadId] = useState<[AccountId32 | null, number]>([null, 0]); const [rebags, setRebags] = useState([]); const [isLoading, setLoading] = useState(true); @@ -42,23 +42,23 @@ function Bag ({ bagLower, bagUpper, info, stashNodes }: Props): React.ReactEleme const bonded = useBonded(list); useEffect((): void => { - info && stashNodes && + info && nodesOwn && setHeadId(([, trigger]) => [info.head.unwrapOr(null), ++trigger]); - }, [info, stashNodes]); + }, [info, nodesOwn]); useEffect((): void => { setLoading( - stashNodes && stashNodes.length + nodesOwn && nodesOwn.length ? !isCompleted || !bonded : false ); - }, [bonded, isCompleted, stashNodes]); + }, [bonded, isCompleted, nodesOwn]); useEffect((): void => { !isLoading && bonded && setRebags( getRebags(bonded, bagUpper, bagLower) ); - }, [bagLower, bagUpper, bonded, isLoading, stashNodes]); + }, [bagLower, bagUpper, bonded, isLoading]); return ( @@ -68,7 +68,7 @@ function Bag ({ bagLower, bagUpper, info, stashNodes }: Props): React.ReactEleme {info.head.isSome && } {info.tail.isSome && } - {stashNodes?.map(({ stashId }) => ( + {nodesOwn?.map(({ stashId }) => ( - + {!isLoading && ( + + )} ); diff --git a/packages/page-staking/src/Bags/Summary.tsx b/packages/page-staking/src/Bags/Summary.tsx index dbf0883513..0dc28e40c9 100644 --- a/packages/page-staking/src/Bags/Summary.tsx +++ b/packages/page-staking/src/Bags/Summary.tsx @@ -15,17 +15,17 @@ import { useTranslation } from '../translate'; interface Props { className?: string; ids?: BN[]; - stashNodes?: BagMap; + mapOwn?: BagMap; } -function Summary ({ className = '', ids, stashNodes }: Props): React.ReactElement { +function Summary ({ className = '', ids, mapOwn }: Props): React.ReactElement { const { t } = useTranslation(); const { api } = useApi(); const total = useCall(api.query.bagsList.counterForListNodes); const myCount = useMemo( - () => stashNodes && Object.values(stashNodes).reduce((count, n) => count + n.length, 0), - [stashNodes] + () => mapOwn && Object.values(mapOwn).reduce((count, n) => count + n.length, 0), + [mapOwn] ); return ( @@ -38,7 +38,7 @@ function Summary ({ className = '', ids, stashNodes }: Props): React.ReactElemen
('total nodes')}> - {stashNodes + {mapOwn ? formatNumber(total) : } diff --git a/packages/page-staking/src/Bags/index.tsx b/packages/page-staking/src/Bags/index.tsx index fd1a4959b6..807c53dfa6 100644 --- a/packages/page-staking/src/Bags/index.tsx +++ b/packages/page-staking/src/Bags/index.tsx @@ -36,7 +36,7 @@ function Bags ({ ownStashes }: Props): React.ReactElement { const [filterIndex, setFilterIndex] = useState(() => stashIds.length ? 0 : 1); const ids = useBagsIds(); const list = useBagsList(ids); - const stashNodes = useBagsNodes(stashIds); + const mapOwn = useBagsNodes(stashIds); const headerRef = useRef([ [t('bags')], @@ -57,15 +57,15 @@ function Bags ({ ownStashes }: Props): React.ReactElement { [stashIds, t] ); const filtered = useMemo( - () => list && stashNodes && sortNodes(list, stashNodes, !filterIndex), - [filterIndex, list, stashNodes] + () => list && mapOwn && sortNodes(list, mapOwn, !filterIndex), + [filterIndex, list, mapOwn] ); return ( <> { emptySpinner={t('Retrieving all available bags, this will take some time')} header={headerRef.current} > - {filtered?.map(([{ bagLower, bagUpper, index, info, key }, stashNodes]) => ( + {filtered?.map(([{ bagLower, bagUpper, index, info, key }, nodesOwn]) => ( ))}