Parachain loading cleanups (#4950)

packages/page-parachains/src/Auctions/Auction.tsx

@@ -1,8 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AuctionInfo } from '../types';
-import type { Winning } from './types';
+import type { AuctionInfo, Winning } from '../types';
 
 import React, { useRef } from 'react';
 
@@ -12,9 +11,9 @@ import { useTranslation } from '../translate';
 import WinRange from './WinRange';
 
 interface Props {
-  auctionInfo: AuctionInfo;
+  auctionInfo?: AuctionInfo;
   className?: string;
-  winningData: Winning[] | null;
+  winningData?: Winning[];
 }
 
 function Auction ({ auctionInfo, className, winningData }: Props): React.ReactElement<Props> {
@@ -30,7 +29,7 @@ function Auction ({ auctionInfo, className, winningData }: Props): React.ReactEl
     <Table
       className={className}
       empty={
-        auctionInfo.numAuctions && winningData && (
+        auctionInfo && auctionInfo.numAuctions && winningData && (
           auctionInfo.endBlock && !winningData.length
             ? t<string>('No winners in this auction')
             : t<string>('No ongoing auction')

packages/page-parachains/src/Auctions/Bid.tsx

@@ -3,8 +3,7 @@
 
 import type BN from 'bn.js';
 import type { BlockNumber } from '@polkadot/types/interfaces';
-import type { AuctionInfo, OwnedId, OwnerInfo } from '../types';
-import type { Winning } from './types';
+import type { AuctionInfo, OwnedId, OwnerInfo, Winning } from '../types';
 
 import React, { useMemo, useState } from 'react';
 
@@ -12,14 +11,14 @@ import { Button, Dropdown, InputBalance, Modal, TxButton } from '@polkadot/react
 import { useAccounts, useApi, useBestNumber, useToggle } from '@polkadot/react-hooks';
 import { BN_ZERO, formatNumber } from '@polkadot/util';
 
+import { RANGES } from '../constants';
 import InputOwner from '../InputOwner';
 import { useTranslation } from '../translate';
-import { RANGES } from './constants';
 
 interface Props {
-  auctionInfo: AuctionInfo;
+  auctionInfo?: AuctionInfo;
   className?: string;
-  lastWinners: Winning | null;
+  lastWinners?: Winning;
   ownedIds: OwnedId[];
 }
 
@@ -30,19 +29,21 @@ interface Option {
   value: number;
 }
 
+const EMPTY_OWNER: OwnerInfo = { accountId: null, paraId: 0 };
+
 function Bid ({ auctionInfo, className, lastWinners, ownedIds }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { hasAccounts } = useAccounts();
   const bestNumber = useBestNumber();
-  const [{ accountId, paraId }, setOwnerInfo] = useState<OwnerInfo>({ accountId: null, paraId: 0 });
+  const [{ accountId, paraId }, setOwnerInfo] = useState<OwnerInfo>(EMPTY_OWNER);
   const [amount, setAmount] = useState<BN | undefined>(BN_ZERO);
   const [range, setRange] = useState(0);
   const [isOpen, toggleOpen] = useToggle();
 
   const rangeOpts = useMemo(
     (): Option[] => {
-      if (!auctionInfo.leasePeriod) {
+      if (!auctionInfo?.leasePeriod) {
         return [];
       }
 
@@ -73,7 +74,7 @@ function Bid ({ auctionInfo, className, lastWinners, ownedIds }: Props): React.R
     <>
       <Button
         icon='plus'
-        isDisabled={!ownedIds.length || !hasAccounts || !auctionInfo.numAuctions || !auctionInfo.leasePeriod || !auctionInfo.endBlock || bestNumber?.gte(auctionInfo.endBlock.add(api.consts.auctions.endingPeriod as BlockNumber))}
+        isDisabled={!ownedIds.length || !hasAccounts || !auctionInfo?.numAuctions || !auctionInfo.leasePeriod || !auctionInfo.endBlock || bestNumber?.gte(auctionInfo.endBlock.add(api.consts.auctions.endingPeriod as BlockNumber))}
         label={t<string>('Bid')}
         onClick={toggleOpen}
       />
@@ -121,10 +122,10 @@ function Bid ({ auctionInfo, className, lastWinners, ownedIds }: Props): React.R
             <TxButton
               accountId={accountId}
               icon='plus'
-              isDisabled={!paraId || isAmountError || !auctionInfo.leasePeriod}
+              isDisabled={!paraId || isAmountError || !auctionInfo?.leasePeriod}
               label={t<string>('Bid')}
               onStart={toggleOpen}
-              params={[paraId, auctionInfo.numAuctions, auctionInfo.leasePeriod?.addn(RANGES[range][0]), auctionInfo.leasePeriod?.addn(RANGES[range][1]), amount]}
+              params={[paraId, auctionInfo?.numAuctions, auctionInfo?.leasePeriod?.addn(RANGES[range][0]), auctionInfo?.leasePeriod?.addn(RANGES[range][1]), amount]}
               tx={api.tx.auctions.bid}
             />
           </Modal.Actions>

packages/page-parachains/src/Auctions/Summary.tsx

@@ -2,8 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Balance, BlockNumber } from '@polkadot/types/interfaces';
-import type { AuctionInfo } from '../types';
-import type { Winning } from './types';
+import type { AuctionInfo, Winning } from '../types';
 
 import React from 'react';
 
@@ -15,9 +14,9 @@ import { BN_THREE, formatNumber } from '@polkadot/util';
 import { useTranslation } from '../translate';
 
 interface Props {
-  auctionInfo: AuctionInfo;
+  auctionInfo?: AuctionInfo;
   className?: string;
-  lastWinners: Winning | null;
+  lastWinners?: Winning;
 }
 
 function Summary ({ auctionInfo, className, lastWinners }: Props): React.ReactElement<Props> {
@@ -30,10 +29,10 @@ function Summary ({ auctionInfo, className, lastWinners }: Props): React.ReactEl
     <SummaryBox className={className}>
       <section>
         <CardSummary label={t<string>('auctions')}>
-          {formatNumber(auctionInfo.numAuctions)}
+          {formatNumber(auctionInfo?.numAuctions)}
         </CardSummary>
       </section>
-      {auctionInfo.endBlock && (
+      {auctionInfo && (
         <>
           <section>
             {auctionInfo.leasePeriod && (
@@ -59,7 +58,7 @@ function Summary ({ auctionInfo, className, lastWinners }: Props): React.ReactEl
             )}
           </section>
           <section>
-            {bestNumber && (
+            {auctionInfo?.endBlock && bestNumber && (
               bestNumber.lt(auctionInfo.endBlock)
                 ? (
                   <CardSummary

packages/page-parachains/src/Auctions/WinRange.tsx

@@ -2,8 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type BN from 'bn.js';
-import type { AuctionInfo } from '../types';
-import type { WinnerData } from './types';
+import type { AuctionInfo, WinnerData } from '../types';
 
 import React from 'react';
 

packages/page-parachains/src/Auctions/index.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AuctionInfo, OwnedId } from '../types';
+import type { AuctionInfo, OwnedId, Winning } from '../types';
 
 import React from 'react';
 
@@ -10,17 +10,15 @@ import { Button } from '@polkadot/react-components';
 import Auction from './Auction';
 import Bid from './Bid';
 import Summary from './Summary';
-import useWinningData from './useWinningData';
 
 interface Props {
-  auctionInfo: AuctionInfo;
+  auctionInfo?: AuctionInfo;
   className?: string;
   ownedIds: OwnedId[];
+  winningData?: Winning[];
 }
 
-function Auctions ({ auctionInfo, className, ownedIds }: Props): React.ReactElement<Props> {
-  const winningData = useWinningData(auctionInfo);
-
+function Auctions ({ auctionInfo, className, ownedIds, winningData }: Props): React.ReactElement<Props> {
   const lastWinners = winningData && winningData[0];
 
   return (

packages/page-parachains/src/Auctions/types.ts

@@ -1,20 +0,0 @@
-// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type BN from 'bn.js';
-import type { AccountId, BalanceOf, ParaId } from '@polkadot/types/interfaces';
-
-export interface WinnerData {
-  accountId: AccountId;
-  firstSlot: number;
-  lastSlot: number;
-  paraId: ParaId;
-  value: BalanceOf;
-}
-
-export interface Winning {
-  blockNumber: BN;
-  blockOffset: BN;
-  total: BN;
-  winners: WinnerData[];
-}

packages/page-parachains/src/Crowdloan/Fund.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type BN from 'bn.js';
-import type { Campaign } from './types';
+import type { Campaign } from '../types';
 
 import React, { useMemo } from 'react';
 

packages/page-parachains/src/Crowdloan/FundAdd.tsx

@@ -14,10 +14,10 @@ import InputOwner from '../InputOwner';
 import { useTranslation } from '../translate';
 
 interface Props {
-  auctionInfo: AuctionInfo;
+  auctionInfo?: AuctionInfo;
   bestNumber?: BN;
   className?: string;
-  leasePeriod: LeasePeriod | null;
+  leasePeriod?: LeasePeriod;
   ownedIds: OwnedId[];
 }
 
@@ -34,7 +34,7 @@ function FundAdd ({ auctionInfo, bestNumber, className, leasePeriod, ownedIds }:
   const isEndError = !bestNumber || !endBlock || endBlock.lt(bestNumber);
   const isFirstError = !firstSlot || (!!leasePeriod && firstSlot.lte(leasePeriod.currentPeriod));
   const isLastError = !lastSlot || !firstSlot || lastSlot.lt(firstSlot) || lastSlot.gt(firstSlot.add(BN_THREE));
-  const defaultSlot = (auctionInfo.leasePeriod || leasePeriod?.currentPeriod.add(BN_ONE) || 1).toString();
+  const defaultSlot = (auctionInfo?.leasePeriod || leasePeriod?.currentPeriod.add(BN_ONE) || 1).toString();
 
   // TODO Add verifier
 

packages/page-parachains/src/Crowdloan/Funds.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type BN from 'bn.js';
-import type { Campaign } from './types';
+import type { Campaign } from '../types';
 
 import React, { useMemo, useRef } from 'react';
 

packages/page-parachains/src/Crowdloan/index.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AuctionInfo, LeasePeriod, OwnedId } from '../types';
+import type { AuctionInfo, Campaigns, LeasePeriod, OwnedId } from '../types';
 
 import React from 'react';
 
@@ -11,18 +11,17 @@ import { useBestNumber } from '@polkadot/react-hooks';
 import FundAdd from './FundAdd';
 import Funds from './Funds';
 import Summary from './Summary';
-import useFunds from './useFunds';
 
 interface Props {
-  auctionInfo: AuctionInfo;
+  auctionInfo?: AuctionInfo;
+  campaigns: Campaigns;
   className?: string;
-  leasePeriod: LeasePeriod | null;
+  leasePeriod?: LeasePeriod;
   ownedIds: OwnedId[];
 }
 
-function Crowdloan ({ auctionInfo, className, leasePeriod, ownedIds }: Props): React.ReactElement<Props> {
+function Crowdloan ({ auctionInfo, campaigns: { activeCap, activeRaised, funds, totalCap, totalRaised }, className, leasePeriod, ownedIds }: Props): React.ReactElement<Props> {
   const bestNumber = useBestNumber();
-  const { activeCap, activeRaised, funds, totalCap, totalRaised } = useFunds();
 
   return (
     <div className={className}>

packages/page-parachains/src/Crowdloan/types.ts

@@ -1,26 +0,0 @@
-// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type BN from 'bn.js';
-import type { AccountId, BalanceOf, FundInfo, ParaId } from '@polkadot/types/interfaces';
-
-export interface Campaign {
-  info: FundInfo;
-  isCapped?: boolean;
-  isEnded?: boolean;
-  isRetired?: boolean;
-  isWinner?: boolean;
-  key: string;
-  paraId: ParaId;
-  retireEnd?: BN;
-}
-
-export interface LeaseLease {
-  accountId: AccountId;
-  balance: BalanceOf;
-}
-
-export interface Lease {
-  leases: LeaseLease[];
-  paraId: ParaId;
-}

packages/page-parachains/src/Overview/Summary.tsx

@@ -12,7 +12,7 @@ import { formatNumber, isNumber } from '@polkadot/util';
 import { useTranslation } from '../translate';
 
 interface Props {
-  leasePeriod: LeasePeriod | null;
+  leasePeriod?: LeasePeriod;
   parachainCount?: number;
   proposalCount?: number;
   upcomingCount?: number;
@@ -30,7 +30,7 @@ function Summary ({ leasePeriod, parachainCount, proposalCount, upcomingCount }:
           </CardSummary>
         )}
         {isNumber(upcomingCount) && (
-          <CardSummary label={t<string>('upcoming')}>
+          <CardSummary label={t<string>('parathreads')}>
             {formatNumber(upcomingCount)}
           </CardSummary>
         )}

packages/page-parachains/src/Overview/Upcoming.tsx

@@ -20,7 +20,7 @@ import Lifecycle from './Lifecycle';
 
 interface Props {
   id: ParaId;
-  leasePeriod: LeasePeriod | null;
+  leasePeriod: LeasePeriod;
   nextAction?: QueuedAction;
 }
 
@@ -92,7 +92,7 @@ function Upcoming ({ id, leasePeriod, nextAction }: Props): React.ReactElement<P
         />
       </td>
       <td className='all number together'>
-        {leasePeriod && leasePeriod.currentPeriod && leases && (
+        {leasePeriod && leases && (
           leases.length
             ? (
               <>

packages/page-parachains/src/Overview/Upcomings.tsx

@@ -15,14 +15,14 @@ import Upcoming from './Upcoming';
 interface Props {
   actionsQueue: QueuedAction[];
   ids?: ParaId[];
-  leasePeriod: LeasePeriod | null;
+  leasePeriod?: LeasePeriod;
 }
 
 function Upcomings ({ actionsQueue, ids, leasePeriod }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const headerRef = useRef([
-    [t('upcoming'), 'start', 3],
+    [t('parathreads'), 'start', 3],
     [t('head'), 'start'],
     [t('lifecycle'), 'start'],
     [t('leases')]
@@ -30,10 +30,10 @@ function Upcomings ({ actionsQueue, ids, leasePeriod }: Props): React.ReactEleme
 
   return (
     <Table
-      empty={ids && t<string>('There are no upcoming parachains')}
+      empty={leasePeriod && ids && t<string>('There are no upcoming parachains')}
       header={headerRef.current}
     >
-      {ids?.map((id): React.ReactNode => (
+      {leasePeriod && ids?.map((id): React.ReactNode => (
         <Upcoming
           id={id}
           key={id.toString()}

packages/page-parachains/src/Overview/index.tsx

@@ -17,7 +17,7 @@ import useUpcomingIds from './useUpcomingIds';
 
 interface Props {
   className?: string;
-  leasePeriod: LeasePeriod | null;
+  leasePeriod?: LeasePeriod;
   proposals?: Proposals;
 }
 

packages/page-parachains/src/index.tsx

@@ -15,9 +15,11 @@ import Overview from './Overview';
 import Proposals from './Proposals';
 import { useTranslation } from './translate';
 import useAuctionInfo from './useAuctionInfo';
+import useFunds from './useFunds';
 import useLeasePeriod from './useLeasePeriod';
 import useOwnedIds from './useOwnedIds';
 import useProposals from './useProposals';
+import useWinningData from './useWinningData';
 
 interface Props {
   basePath: string;
@@ -29,8 +31,10 @@ function ParachainsApp ({ basePath, className }: Props): React.ReactElement<Prop
   const { api } = useApi();
   const { pathname } = useLocation();
   const auctionInfo = useAuctionInfo();
+  const campaigns = useFunds();
   const leasePeriod = useLeasePeriod();
   const ownedIds = useOwnedIds();
+  const winningData = useWinningData(auctionInfo);
   const proposals = useProposals();
 
   const items = useRef([
@@ -64,11 +68,13 @@ function ParachainsApp ({ basePath, className }: Props): React.ReactElement<Prop
           <Auctions
             auctionInfo={auctionInfo}
             ownedIds={ownedIds}
+            winningData={winningData}
           />
         </Route>
         <Route path={`${basePath}/crowdloan`}>
           <Crowdloan
             auctionInfo={auctionInfo}
+            campaigns={campaigns}
             leasePeriod={leasePeriod}
             ownedIds={ownedIds}
           />

packages/page-parachains/src/types.ts

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type BN from 'bn.js';
-import type { AuctionIndex, BlockNumber, LeasePeriodOf, ParachainProposal, ParaId, ParaInfo, SessionIndex } from '@polkadot/types/interfaces';
+import type { AccountId, AuctionIndex, BalanceOf, BlockNumber, FundInfo, LeasePeriodOf, ParachainProposal, ParaId, ParaInfo, SessionIndex } from '@polkadot/types/interfaces';
 
 export interface AuctionInfo {
   endBlock: BlockNumber | null;
   leasePeriod: LeasePeriodOf | null;
-  numAuctions: AuctionIndex | null;
+  numAuctions: AuctionIndex;
 }
 
 export interface ProposalExt {
@@ -22,6 +22,25 @@ export interface ScheduledProposals {
   sessionIndex: SessionIndex;
 }
 
+export interface Campaigns {
+  activeCap: BN;
+  activeRaised: BN;
+  funds: Campaign[] | null;
+  totalCap: BN;
+  totalRaised: BN;
+}
+
+export interface Campaign {
+  info: FundInfo;
+  isCapped?: boolean;
+  isEnded?: boolean;
+  isRetired?: boolean;
+  isWinner?: boolean;
+  key: string;
+  paraId: ParaId;
+  retireEnd?: BN;
+}
+
 export interface LeasePeriod {
   currentPeriod: BN;
   length: BN;
@@ -45,3 +64,18 @@ export interface OwnerInfo {
   accountId: string | null;
   paraId: number;
 }
+
+export interface WinnerData {
+  accountId: AccountId;
+  firstSlot: number;
+  lastSlot: number;
+  paraId: ParaId;
+  value: BalanceOf;
+}
+
+export interface Winning {
+  blockNumber: BN;
+  blockOffset: BN;
+  total: BN;
+  winners: WinnerData[];
+}

packages/page-parachains/src/useAuctionInfo.tsx

@@ -8,14 +8,7 @@ import type { AuctionInfo } from './types';
 
 import { useApi, useCallMulti } from '@polkadot/react-hooks';
 
-const defaultValue: AuctionInfo = {
-  endBlock: null,
-  leasePeriod: null,
-  numAuctions: null
-};
-
 const optionsMulti = {
-  defaultValue,
   transform: ([numAuctions, optInfo]: [AuctionIndex, Option<ITuple<[LeasePeriodOf, BlockNumber]>>]): AuctionInfo => {
     const [leasePeriod, endBlock] = optInfo.unwrapOr([null, null]);
 
@@ -27,7 +20,7 @@ const optionsMulti = {
   }
 };
 
-export default function useAuctionInfo (): AuctionInfo {
+export default function useAuctionInfo (): AuctionInfo | undefined {
   const { api } = useApi();
 
   return useCallMulti<AuctionInfo>([

packages/page-parachains/src/useFunds.ts

@@ -4,7 +4,7 @@
 import type { Option } from '@polkadot/types';
 import type { AccountId, BalanceOf, BlockNumber, FundInfo, ParaId } from '@polkadot/types/interfaces';
 import type { ITuple } from '@polkadot/types/types';
-import type { Campaign } from './types';
+import type { Campaign, Campaigns } from './types';
 
 import BN from 'bn.js';
 import { useEffect, useState } from 'react';
@@ -12,15 +12,7 @@ import { useEffect, useState } from 'react';
 import { useApi, useBestNumber, useCall, useEventTrigger } from '@polkadot/react-hooks';
 import { BN_ZERO, stringToU8a, u8aConcat } from '@polkadot/util';
 
-interface FundResult {
-  activeCap: BN;
-  activeRaised: BN;
-  funds: Campaign[] | null;
-  totalCap: BN;
-  totalRaised: BN;
-}
-
-const EMPTY: FundResult = {
+const EMPTY: Campaigns = {
   activeCap: BN_ZERO,
   activeRaised: BN_ZERO,
   funds: null,
@@ -50,7 +42,7 @@ function updateFund (bestNumber: BN, minContribution: BN, retirementPeriod: BN,
   return data;
 }
 
-function isFundUpdated (bestNumber: BlockNumber, minContribution: BN, retirementPeriod: BN, { info: { cap, end, raised }, paraId }: Campaign, leased: ParaId[], allPrev: FundResult): boolean {
+function isFundUpdated (bestNumber: BlockNumber, minContribution: BN, retirementPeriod: BN, { info: { cap, end, raised }, paraId }: Campaign, leased: ParaId[], allPrev: Campaigns): boolean {
   const prev = allPrev.funds?.find((p) => p.paraId.eq(paraId));
 
   return !prev ||
@@ -61,7 +53,7 @@ function isFundUpdated (bestNumber: BlockNumber, minContribution: BN, retirement
 }
 
 // compare the current campaigns against the previous, manually adding ending and calculating the new totals
-function createResult (bestNumber: BlockNumber, minContribution: BN, retirementPeriod: BN, funds: Campaign[], leased: ParaId[], prev: FundResult): FundResult {
+function createResult (bestNumber: BlockNumber, minContribution: BN, retirementPeriod: BN, funds: Campaign[], leased: ParaId[], prev: Campaigns): Campaigns {
   const [activeRaised, activeCap, totalRaised, totalCap] = funds.reduce(([ar, ac, tr, tc], { info: { cap, end, raised } }) => [
     bestNumber.gt(end) ? ar : ar.iadd(raised),
     bestNumber.gt(end) ? ac : ac.iadd(cap),
@@ -149,14 +141,14 @@ const optLeaseMulti = {
   withParamsTransform: true
 };
 
-export default function useFunds (): FundResult {
+export default function useFunds (): Campaigns {
   const { api } = useApi();
   const bestNumber = useBestNumber();
   const [paraIds, setParaIds] = useState<ParaId[]>([]);
   const trigger = useEventTrigger([api.events.crowdloan.Created]);
   const campaigns = useCall<Campaign[]>(api.query.crowdloan.funds.multi, [paraIds], optFundMulti);
   const leases = useCall<ParaId[]>(api.query.slots.leases.multi, [paraIds], optLeaseMulti);
-  const [result, setResult] = useState<FundResult>(EMPTY);
+  const [result, setResult] = useState<Campaigns>(EMPTY);
 
   // on event triggers, update the available paraIds
   useEffect((): void => {

packages/page-parachains/src/useLeasePeriod.ts

@@ -8,23 +8,23 @@ import { useMemo } from 'react';
 
 import { useApi, useBestNumber } from '@polkadot/react-hooks';
 
-export default function useLeasePeriod (): LeasePeriod | null {
+export default function useLeasePeriod (): LeasePeriod | undefined {
   const { api } = useApi();
   const bestNumber = useBestNumber();
 
-  return useMemo((): LeasePeriod | null => {
-    if (api.consts.slots?.leasePeriod && bestNumber) {
-      const length = api.consts.slots.leasePeriod as BlockNumber;
-      const progress = bestNumber.mod(length);
-
-      return {
-        currentPeriod: bestNumber.div(length),
-        length,
-        progress,
-        remainder: length.sub(progress)
-      };
+  return useMemo((): LeasePeriod | undefined => {
+    if (!api.consts.slots?.leasePeriod || !bestNumber) {
+      return;
     }
 
-    return null;
+    const length = api.consts.slots.leasePeriod as BlockNumber;
+    const progress = bestNumber.mod(length);
+
+    return {
+      currentPeriod: bestNumber.div(length),
+      length,
+      progress,
+      remainder: length.sub(progress)
+    };
   }, [api, bestNumber]);
 }

packages/page-parachains/src/useWinningData.ts

@@ -3,8 +3,7 @@
 
 import type { Option, StorageKey } from '@polkadot/types';
 import type { BlockNumber, WinningData } from '@polkadot/types/interfaces';
-import type { AuctionInfo } from '../types';
-import type { WinnerData, Winning } from './types';
+import type { AuctionInfo, WinnerData, Winning } from './types';
 
 import BN from 'bn.js';
 import { useEffect, useRef, useState } from 'react';
@@ -71,7 +70,7 @@ function extractData (auctionInfo: AuctionInfo, values: [StorageKey<[BlockNumber
     .reverse();
 }
 
-function mergeCurrent (auctionInfo: AuctionInfo, prev: Winning[] | null, optCurrent: Option<WinningData>, blockOffset: BN): Winning[] | null {
+function mergeCurrent (auctionInfo: AuctionInfo, prev: Winning[] | undefined, optCurrent: Option<WinningData>, blockOffset: BN): Winning[] | undefined {
   const current = createWinning(auctionInfo, blockOffset, extractWinners(auctionInfo, optCurrent));
 
   if (current.winners.length) {
@@ -93,7 +92,7 @@ function mergeCurrent (auctionInfo: AuctionInfo, prev: Winning[] | null, optCurr
   return prev;
 }
 
-function mergeFirst (auctionInfo: AuctionInfo, prev: Winning[] | null, optFirstData: Option<WinningData>): Winning[] | null {
+function mergeFirst (auctionInfo: AuctionInfo, prev: Winning[] | undefined, optFirstData: Option<WinningData>): Winning[] | undefined {
   if (prev && prev.length <= 1) {
     const updated: Winning[] = prev || [];
     const firstEntry = createWinning(auctionInfo, null, extractWinners(auctionInfo, optFirstData));
@@ -112,9 +111,9 @@ function mergeFirst (auctionInfo: AuctionInfo, prev: Winning[] | null, optFirstD
   return prev;
 }
 
-export default function useWinningData (auctionInfo: AuctionInfo): Winning[] | null {
+export default function useWinningData (auctionInfo?: AuctionInfo): Winning[] | undefined {
   const { api } = useApi();
-  const [result, setResult] = useState<Winning[] | null>(null);
+  const [result, setResult] = useState<Winning[] | undefined>();
   const bestNumber = useBestNumber();
   const trigger = useEventTrigger([api.events.auctions?.BidAccepted]);
   const triggerRef = useRef(trigger);
@@ -123,14 +122,14 @@ export default function useWinningData (auctionInfo: AuctionInfo): Winning[] | n
 
   // should be fired once, all entries as an initial round
   useEffect((): void => {
-    allEntries && setResult(
+    auctionInfo && allEntries && setResult(
       extractData(auctionInfo, allEntries)
     );
   }, [allEntries, auctionInfo]);
 
   // when block 0 changes, update (typically in non-ending-period, static otherwise)
   useEffect((): void => {
-    optFirstData && setResult((prev) =>
+    auctionInfo && optFirstData && setResult((prev) =>
       mergeFirst(auctionInfo, prev, optFirstData)
     );
   }, [auctionInfo, optFirstData]);
@@ -139,9 +138,7 @@ export default function useWinningData (auctionInfo: AuctionInfo): Winning[] | n
   // and add it to the list when not duplicated. Additionally we cleanup after ourselves when endBlock
   // gets cleared
   useEffect((): void => {
-    if (!auctionInfo.endBlock) {
-      setResult((prev) => prev && prev.length ? [] : prev);
-    } else if (bestNumber && bestNumber.gt(auctionInfo.endBlock) && triggerRef.current !== trigger) {
+    if (auctionInfo?.endBlock && bestNumber && bestNumber.gt(auctionInfo.endBlock) && triggerRef.current !== trigger) {
       const blockOffset = bestNumber.sub(auctionInfo.endBlock).iadd(BN_ONE);
 
       triggerRef.current = trigger;