Feedback/#11253

packages/page-broker/src/BrokerContext.tsx

@@ -0,0 +1,83 @@
+// Copyright 2017-2025 @polkadot/app-broker authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ReactNode } from 'react';
+import type { ApiPromise } from '@polkadot/api';
+import type { BrokerStatus, ChainConstants, PalletBrokerConfigRecord, PalletBrokerSaleInfoRecord } from '@polkadot/react-hooks/types';
+import type { CurrentRegion } from './types.js';
+
+import React, { createContext, useContext, useMemo } from 'react';
+
+import { useBrokerConfig, useBrokerSalesInfo, useBrokerStatus, useCoretimeConsts } from '@polkadot/react-hooks';
+
+import { estimateTime } from './utils.js';
+
+interface BrokerProviderProps {
+  children: ReactNode;
+  api: ApiPromise;
+  isApiReady: boolean;
+}
+
+interface BrokerContextProps {
+  config: PalletBrokerConfigRecord | null,
+  coretimeConsts: ChainConstants | null,
+  currentRegion: CurrentRegion,
+  saleInfo: PalletBrokerSaleInfoRecord | null,
+  status: BrokerStatus | null,
+}
+
+const initialState = {
+  config: null,
+  coretimeConsts: null,
+  currentRegion: {
+    begin: null,
+    beginDate: null,
+    end: null,
+    endDate: null
+  },
+  saleInfo: null,
+  status: null
+};
+
+export const BrokerContext = createContext<BrokerContextProps>(initialState);
+
+export const BrokerProvider = ({ api, children, isApiReady }: BrokerProviderProps) => {
+  const coretimeConsts = useCoretimeConsts();
+  const config = useBrokerConfig(api, isApiReady);
+  const saleInfo = useBrokerSalesInfo(api, isApiReady);
+  const status = useBrokerStatus(api, isApiReady);
+
+  const currentRegionEnd = useMemo(() => saleInfo?.regionBegin, [saleInfo]);
+  const currentRegionBegin = useMemo(() => saleInfo && config && saleInfo?.regionBegin - config?.regionLength, [saleInfo, config]);
+  const lastBlock = useMemo(() => status && coretimeConsts && status.lastTimeslice * coretimeConsts.relay.blocksPerTimeslice, [status, coretimeConsts]);
+
+  const currentRegionEndDate = useMemo(() => currentRegionEnd && lastBlock && estimateTime(Number(currentRegionEnd), lastBlock), [currentRegionEnd, lastBlock]);
+  const currentRegionBeginDate = useMemo(() => currentRegionBegin && lastBlock && estimateTime(Number(currentRegionBegin), lastBlock), [currentRegionBegin, lastBlock]);
+
+  const value = useMemo(() => {
+    if (!config || !saleInfo || !status || !currentRegionBegin || !currentRegionBeginDate || !currentRegionEnd || !currentRegionEndDate || !coretimeConsts) {
+      return initialState;
+    }
+
+    return ({
+      config,
+      coretimeConsts,
+      currentRegion: {
+        begin: currentRegionBegin,
+        beginDate: currentRegionBeginDate,
+        end: currentRegionEnd,
+        endDate: currentRegionEndDate
+      },
+      saleInfo,
+      status
+    });
+  }, [currentRegionBegin, currentRegionEnd, currentRegionBeginDate, currentRegionEndDate, config, saleInfo, status, coretimeConsts]);
+
+  return (
+    <BrokerContext.Provider value={value}>
+      {children}
+    </BrokerContext.Provider>
+  );
+};
+
+export const useBrokerContext = () => useContext(BrokerContext);

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

@@ -27,7 +27,7 @@ function CoreTable ({ api, config, core, workload, workplan }: Props): React.Rea
     [
       <div key={`header${core}`}>{headerRef.current} {core} <span></span></div>,
       'core',
-      8,
+      9,
       undefined
     ]
   ];

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

@@ -6,8 +6,7 @@ import type { CoreInfo } from '../types.js';
 
 import React from 'react';
 
-import { useBrokerConfig } from '@polkadot/react-hooks';
-
+import { useBrokerContext } from '../BrokerContext.js';
 import CoreTable from './CoreTable.js';
 
 interface Props {
@@ -16,8 +15,8 @@ interface Props {
   data: CoreInfo[];
 }
 
-function CoresTable ({ api, data, isApiReady }: Props): React.ReactElement<Props> {
-  const config = useBrokerConfig(api, isApiReady);
+function CoresTable ({ api, data }: Props): React.ReactElement<Props> {
+  const { config } = useBrokerContext();
 
   return (
     <>

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

@@ -23,7 +23,7 @@ interface Props {
 
 const filterLoad = (parachainId: string, data: CoreInfo[], workloadCoreSelected: number): CoreInfo[] => {
   if (parachainId) {
-    return data.filter(({ workload }) => !!workload?.filter(({ info }) => info.task === parachainId).length);
+    return data.filter(({ workload, workplan }) => !!workload?.filter(({ info }) => info.task === parachainId).length || !!workplan?.filter(({ info }) => info.task === parachainId).length);
   }
 
   if (workloadCoreSelected === -1) {

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

@@ -4,17 +4,17 @@
 import type { LinkOption } from '@polkadot/apps-config/endpoints/types';
 import type { statsType } from '../types.js';
 
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import { CardSummary, styled, SummaryBox, UsageBar } from '@polkadot/react-components';
 import { defaultHighlight } from '@polkadot/react-components/styles';
-import { useApi, useBrokerConfig, useBrokerSalesInfo, useBrokerStatus } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { type CoreWorkload } from '@polkadot/react-hooks/types';
-import { useCoretimeConsts } from '@polkadot/react-hooks/useCoretimeConsts';
 import { BN, BN_ZERO } from '@polkadot/util';
 
+import { useBrokerContext } from '../BrokerContext.js';
 import { useTranslation } from '../translate.js';
-import { estimateTime, getStats } from '../utils.js';
+import { getStats } from '../utils.js';
 import RegionLength from './Summary/RegionLength.js';
 import Timeslice from './Summary/Timeslice.js';
 import TimeslicePeriod from './Summary/TimeslicePeriod.js';
@@ -35,23 +35,17 @@ const StyledSection = styled.section`
 `;
 
 interface Props {
-  coreCount?: string
   apiEndpoint?: LinkOption | null;
+  coreCount?: string
   workloadInfos?: CoreWorkload[]
 }
 
 function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
   const { t } = useTranslation();
-  const { api, apiEndpoint, isApiReady } = useApi();
-  const coretimeConstants = useCoretimeConsts();
+  const { api, apiEndpoint } = useApi();
   const uiHighlight = apiEndpoint?.ui.color || defaultHighlight;
   const { idles, pools, tasks }: statsType = React.useMemo(() => getStats(coreCount, workloadInfos), [coreCount, workloadInfos]);
-
-  const saleInfo = useBrokerSalesInfo(api, isApiReady);
-  const config = useBrokerConfig(api, isApiReady);
-  const status = useBrokerStatus(api, isApiReady);
-  const currentRegionEnd = useMemo(() => saleInfo && config && saleInfo?.regionEnd - config?.regionLength, [saleInfo, config]);
-  const currentRegionStart = useMemo(() => currentRegionEnd && config && currentRegionEnd - config?.regionLength, [currentRegionEnd, config]);
+  const { config, currentRegion, saleInfo, status } = useBrokerContext();
 
   return (
     <SummaryBox>
@@ -81,7 +75,7 @@ function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
                 progress={{
                   isBlurred: false,
                   total: new BN(config?.regionLength || 0),
-                  value: (config?.regionLength && currentRegionEnd && status && new BN(config?.regionLength - (currentRegionEnd - status?.lastTimeslice))) || BN_ZERO,
+                  value: (config?.regionLength && currentRegion.end && status && new BN(config?.regionLength - (currentRegion.end - status?.lastTimeslice))) || BN_ZERO,
                   withTime: false
                 }}
               />
@@ -104,25 +98,25 @@ function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
         </div>
       </StyledSection>
       <section>
-        {status && currentRegionStart && currentRegionEnd &&
+        {currentRegion.begin && currentRegion.end &&
           (
             <>
               <CardSummary
                 className='media--1200'
                 label={t('sale dates')}
               >
                 <div>
-                  <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionStart, status?.lastTimeslice * 80, coretimeConstants?.relay)}</div>
-                  <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionEnd, status?.lastTimeslice * 80, coretimeConstants?.relay)}</div>
+                  <div style={{ fontSize: '14px' }}>{currentRegion.beginDate}</div>
+                  <div style={{ fontSize: '14px' }}>{currentRegion.endDate}</div>
                 </div>
               </CardSummary>
               <CardSummary
                 className='media--1200'
                 label={t('sale ts')}
               >
                 <div>
-                  <div style={{ fontSize: '14px' }}>{currentRegionStart}</div>
-                  <div style={{ fontSize: '14px' }}>{currentRegionEnd}</div>
+                  <div style={{ fontSize: '14px' }}>{currentRegion.begin}</div>
+                  <div style={{ fontSize: '14px' }}>{currentRegion.end}</div>
                 </div>
               </CardSummary>
             </>