tsc

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

@@ -10,7 +10,7 @@ import { CardSummary, styled, SummaryBox, UsageBar } from '@polkadot/react-compo
 import { defaultHighlight } from '@polkadot/react-components/styles';
 import { useApi, useBrokerConfig, useBrokerSalesInfo, useBrokerStatus } from '@polkadot/react-hooks';
 import { type CoreWorkload } from '@polkadot/react-hooks/types';
-import { BN } from '@polkadot/util';
+import { BN, BN_ZERO } from '@polkadot/util';
 
 import { useTranslation } from '../translate.js';
 import { estimateTime, getStats } from '../utils.js';
@@ -39,7 +39,7 @@ interface Props {
   workloadInfos?: CoreWorkload[]
 }
 
-function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
+function Summary({ coreCount, workloadInfos }: Props): React.ReactElement {
   const { t } = useTranslation();
   const { api, apiEndpoint, isApiReady } = useApi();
   const uiHighlight = apiEndpoint?.ui.color || defaultHighlight;
@@ -79,7 +79,7 @@ function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
                 progress={{
                   isBlurred: false,
                   total: new BN(config?.regionLength || 0),
-                  value: config?.regionLength && new BN(config?.regionLength - (currentRegionEnd - status?.lastTimeslice)),
+                  value: config?.regionLength && currentRegionEnd && status && new BN(config?.regionLength - (currentRegionEnd - status?.lastTimeslice)) || BN_ZERO,
                   withTime: false
                 }}
               />
@@ -88,7 +88,7 @@ function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
 
         )}
         <div
-          className='media--1200'
+          className='media--1400'
           style={{ marginLeft: '2rem' }}
         >
           <UsageBar
@@ -102,30 +102,31 @@ function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
         </div>
       </StyledSection>
       <section>
-        {status &&
+        {status && currentRegionStart && currentRegionEnd &&
           (
-            <CardSummary
-              className='media--1200'
-              label={t('cycle dates')}
-            >
-              <div>
-                <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionStart, status?.lastTimeslice * 80)}</div>
-                <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionEnd, status?.lastTimeslice * 80)}</div>
-              </div>
-            </CardSummary>
+            <>
+              <CardSummary
+                className='media--1200'
+                label={t('cycle dates')}
+              >
+                <div>
+                  <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionStart, status?.lastTimeslice * 80)}</div>
+                  <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionEnd, status?.lastTimeslice * 80)}</div>
+                </div>
+              </CardSummary>
+
+              <CardSummary
+                className='media--1200'
+                label={t('cycle ts')}
+              >
+                <div>
+                  <div style={{ fontSize: '14px' }}>{currentRegionStart}</div>
+                  <div style={{ fontSize: '14px' }}>{currentRegionEnd}</div>
+                </div>
+              </CardSummary>
+            </>
           )
         }
-        {status &&
-          <CardSummary
-            className='media--1200'
-            label={t('cycle ts')}
-          >
-            <div>
-              <div style={{ fontSize: '14px' }}>{currentRegionStart}</div>
-              <div style={{ fontSize: '14px' }}>{currentRegionEnd}</div>
-            </div>
-          </CardSummary>
-        }
       </section>
     </SummaryBox>
   );

packages/react-hooks/src/useBrokerPotentialRenewals.ts

@@ -5,17 +5,22 @@ import type { ApiPromise } from '@polkadot/api';
 import type { Option, StorageKey, u32 } from '@polkadot/types';
 import type { PalletBrokerPotentialRenewalId, PalletBrokerPotentialRenewalRecord } from '@polkadot/types/lookup';
 import type { PotentialRenewal } from './types.js';
+import { BN_ZERO,  } from '@polkadot/util';
 
 import { useEffect, useState } from 'react';
 
 import { createNamedHook, useCall, useMapKeys } from '@polkadot/react-hooks';
 
 import { processHexMask } from './utils/dataProcessing.js';
 
-function extractInfo (info: Option<PalletBrokerPotentialRenewalRecord>, item: PalletBrokerPotentialRenewalId): PotentialRenewal {
+function extractInfo (info: Option<PalletBrokerPotentialRenewalRecord>, item: PalletBrokerPotentialRenewalId): PotentialRenewal | undefined {
   const unwrapped: PalletBrokerPotentialRenewalRecord | null = info.isSome ? info.unwrap() : null;
-  let mask = [];
-  let task = null;
+  let mask: string[] = [];
+  let task = '';
+
+  if (!unwrapped) {
+    return
+  }
   const completion = unwrapped?.completion;
 
   if (completion?.isComplete) {
@@ -24,8 +29,8 @@ function extractInfo (info: Option<PalletBrokerPotentialRenewalRecord>, item: Pa
     task = complete.assignment.isTask ? complete?.assignment.asTask.toString() : complete?.assignment.isPool ? 'Pool' : 'Idle';
     mask = processHexMask(complete.mask);
   } else if (completion?.isPartial) {
-    task = null;
-    mask = completion.asPartial[0];
+    mask = processHexMask(completion?.asPartial);
+    task = '';
   } else {
     mask = [];
   }
@@ -36,10 +41,11 @@ function extractInfo (info: Option<PalletBrokerPotentialRenewalRecord>, item: Pa
     core: item?.core.toNumber(),
     mask,
     maskBits: mask?.length,
-    price: unwrapped?.price.toBn(),
+    price: unwrapped?.price.toBn() || BN_ZERO,
     task,
     when: item?.when.toNumber()
   };
+
 }
 
 const OPT_KEY = {
@@ -51,12 +57,14 @@ function useBrokerPotentialRenewalsImpl (api: ApiPromise, ready: boolean): Poten
   const keys = useMapKeys(ready && api?.query.broker.potentialRenewals, [], OPT_KEY);
   const potentialRenewals = useCall<[[PalletBrokerPotentialRenewalId[]], Option<PalletBrokerPotentialRenewalRecord>[]]>(ready && api?.query.broker.potentialRenewals.multi, [keys], { withParams: true });
 
-  const [state, setState] = useState<any[] | undefined>();
+  const [state, setState] = useState<PotentialRenewal[] | undefined>();
 
   useEffect((): void => {
-    potentialRenewals &&
-      setState(potentialRenewals[0][0].map((info, index) => extractInfo(potentialRenewals[1][index], info))
-      );
+    if (!potentialRenewals) {
+      return
+    }
+    const renewals = potentialRenewals[0][0].map((info, index) => extractInfo(potentialRenewals[1][index], info))
+    setState(renewals.filter((renewal): renewal is PotentialRenewal => !!renewal));
   }, [potentialRenewals]);
 
   return state;

packages/react-hooks/src/useCoretimeInformation.ts

@@ -32,7 +32,7 @@ function useCoretimeInformationImpl (api: ApiPromise, ready: boolean): CoretimeI
   const coreInfos = useCoreDescriptor(api, ready);
 
   const potentialRenewalsCurrentRegion = useMemo(() => potentialRenewals?.filter((renewal: PotentialRenewal) => renewal.when === salesInfo?.regionEnd), [potentialRenewals, salesInfo]);
-  const [state, setState] = useState<CoretimeInformation[] | undefined>();
+  const [state, setState] = useState<CoretimeInformation | undefined>();
 
   useEffect(() => {
     if (workloads?.length) {
@@ -53,7 +53,7 @@ function useCoretimeInformationImpl (api: ApiPromise, ready: boolean): CoretimeI
         ) as CoreWorkloadInfo)
       }));
 
-      setWorkloadData(parsedCoreInfos);
+      setWorkloadData(parsedCoreInfos as unknown as CoreWorkload[]);
     }
   }, [workloads, coreInfos]);
 
@@ -79,7 +79,7 @@ function useCoretimeInformationImpl (api: ApiPromise, ready: boolean): CoretimeI
       };
     });
 
-    if (chainInfo) {
+    if (chainInfo && config && region && salesInfo && status) {
       setState({
         chainInfo,
         config,

packages/react-hooks/src/useRegions.ts

@@ -27,7 +27,7 @@ const OPT_KEY = {
 };
 
 function useRegionsImpl (api: ApiPromise): RegionInfo[] | undefined {
-  const regionKeys = useMapKeys(api.query.broker.regions, [], OPT_KEY);
+  const regionKeys = useMapKeys(api?.query?.broker.regions, [], OPT_KEY);
 
   const regionInfo = useCall<[[PalletBrokerRegionId[]], Option<PalletBrokerRegionRecord>[]]>(api?.query?.broker.regions.multi, [regionKeys], { withParams: true });
 

packages/react-hooks/src/utils/dataProcessing.ts

@@ -1,15 +1,15 @@
 // Copyright 2017-2024 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { PalletBrokerScheduleItem } from '@polkadot/types/lookup';
+import type { PalletBrokerScheduleItem, PalletBrokerCoreMask } from '@polkadot/types/lookup';
 
 import { BN } from '@polkadot/util';
 
 export function hexToBin (hex: string): string {
   return parseInt(hex, 16).toString(2);
 }
 
-export function processHexMask (mask: PalletBrokerScheduleItem['mask'] | undefined): string[] {
+export function processHexMask (mask: PalletBrokerScheduleItem['mask'] | PalletBrokerCoreMask | undefined): string[] {
   if (!mask) {
     return [];
   }

packages/react-query/src/index.ts

@@ -8,7 +8,6 @@ export { default as BestFinalized } from './BestFinalized.js';
 export { default as BestNumber } from './BestNumber.js';
 export { default as BlockToTime } from './BlockToTime.js';
 export { default as Bonded } from './Bonded.js';
-export { default as BrokerStatus } from './BrokerStatus.js';
 export { default as Chain } from './Chain.js';
 export { default as Elapsed } from './Elapsed.js';
 export { default as FormatBalance } from './FormatBalance.js';