Relay Chain - Coretime Sale UI

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

@@ -1,57 +1,58 @@
 // Copyright 2017-2024 @polkadot/app-coretime authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ApiPromise } from '@polkadot/api';
 import type { BrokerStatus, CoreDescription, PalletBrokerConfigRecord, PalletBrokerSaleInfoRecord, RegionInfo } from '@polkadot/react-hooks/types';
+import type { ChainName } from '../types.js';
 
 import React, { useMemo } from 'react';
 
 import { CardSummary, SummaryBox } from '@polkadot/react-components';
-import { useCall } from '@polkadot/react-hooks';
 import { BN } from '@polkadot/util';
 
 import { useTranslation } from '../translate.js';
-import { estimateTime, FirstCycleStart } from '../utils.js';
+import { estimateTime, FirstCycleStart, get } from '../utils/index.js';
 
 interface Props {
-  api: ApiPromise | null,
   coreDscriptors?: CoreDescription[];
   saleInfo: PalletBrokerSaleInfoRecord
   config: PalletBrokerConfigRecord,
   region: RegionInfo[],
   status: BrokerStatus,
   parachainCount: number
+  chainName: ChainName
 }
 
-function Summary ({ api, config, parachainCount, saleInfo, status }: Props): React.ReactElement<Props> {
+function Summary ({ chainName, config, parachainCount, saleInfo, status }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const currentRegionEnd = saleInfo.regionEnd - config.regionLength;
   const currentRegionStart = saleInfo.regionEnd - config.regionLength * 2;
-  const chainName = useCall<string>(api?.rpc.system.chain)?.toString().toLowerCase();
 
-  const cycleNumber = useMemo(() =>
-    chainName && currentRegionEnd && Math.floor((currentRegionEnd - FirstCycleStart[chainName]) / config.regionLength)
-  , [currentRegionEnd, chainName, config]);
+  const cycleNumber = useMemo(() => {
+    if (chainName && currentRegionEnd) {
+      return Math.floor(
+        (currentRegionEnd - FirstCycleStart.timeslice.coretime[chainName]) / config.regionLength
+      );
+    }
+
+    return undefined;
+  }, [currentRegionEnd, chainName, config]);
 
   return (
     <SummaryBox>
       <section>
-        <CardSummary label={t('timeslice')}>
-          {status?.lastTimeslice}
-        </CardSummary>
-        <CardSummary label={t('cores sold')}>
-          {`${saleInfo?.coresSold} / ${saleInfo?.coresOffered}`}
-        </CardSummary>
-        <CardSummary label={t('parachains')}>
-          {parachainCount && parachainCount}
-        </CardSummary>
         {status &&
-          <CardSummary label={t('cycle number')}>
+          <CardSummary label={t('sale number')}>
             <div>
               {cycleNumber}
             </div>
           </CardSummary>
         }
+        <CardSummary label={t('timeslice')}>
+          {status?.lastTimeslice}
+        </CardSummary>
+        <CardSummary label={t('parachains')}>
+          {parachainCount && parachainCount}
+        </CardSummary>
         {config && status &&
           <CardSummary
             className='media--800'
@@ -69,8 +70,8 @@ function Summary ({ api, config, parachainCount, saleInfo, status }: Props): Rea
         {status &&
           (<CardSummary 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 style={{ fontSize: '14px' }}>{estimateTime(currentRegionStart, get.blocks.relay(status?.lastTimeslice))}</div>
+              <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionEnd, get.blocks.relay(status?.lastTimeslice))}</div>
             </div>
           </CardSummary>)
         }

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

@@ -0,0 +1,40 @@
+// Copyright 2017-2024 @polkadot/app-coretime authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { CoretimeInformation } from '@polkadot/react-hooks/types';
+import type { ChainName } from '../types.js';
+
+import React from 'react';
+
+import ParachainsTable from '../ParachainsTable.js';
+import Summary from './Summary.js';
+
+interface Props {
+  className?: string;
+  coretimeInfo: CoretimeInformation
+  chainName: ChainName
+}
+
+function Overview ({ chainName, className, coretimeInfo }: Props): React.ReactElement<Props> {
+  return (
+    <main className={className}>
+      {coretimeInfo && (
+        <Summary
+          chainName={chainName}
+          config={coretimeInfo?.config}
+          parachainCount={coretimeInfo.taskIds?.length || 0}
+          region={coretimeInfo?.region}
+          saleInfo={coretimeInfo?.salesInfo}
+          status={coretimeInfo?.status}
+        />
+      )}
+      {!!coretimeInfo &&
+        <ParachainsTable
+          coretimeInfo={coretimeInfo}
+        />
+      }
+    </main>
+  );
+}
+
+export default React.memo(Overview);

packages/page-coretime/src/ParachainsTable.tsx

@@ -33,6 +33,7 @@ function ParachainsTable ({ coretimeInfo }: Props): React.ReactElement<Props> {
       header={headerRef.current}
       isSplit={false}
     >
+
       {coretimeInfo?.taskIds?.map((taskId: number) => {
         const chain = coretimeInfo.chainInfo[taskId];
 

packages/page-coretime/src/Row.tsx

@@ -10,8 +10,8 @@ import { ParaLink, styled, Tag } from '@polkadot/react-components';
 import { ChainRenewalStatus } from '@polkadot/react-hooks/types';
 import { BN, formatBalance, formatNumber } from '@polkadot/util';
 
+import { estimateTime, get } from './utils/index.js';
 import { CoreTimeTypes } from './types.js';
-import { estimateTime } from './utils.js';
 
 interface Props {
   id: number
@@ -57,11 +57,11 @@ function Row ({ chainRecord, highlight = false, id, lastCommittedTimeslice, leas
       <StyledCell
         $p={highlight}
         className='media--800'
-      >{showEstimates && formatNumber(targetTimeslice * 80).toString()}</StyledCell>
+      >{showEstimates && formatNumber(get.blocks.relay(targetTimeslice)).toString()}</StyledCell>
       <StyledCell
         $p={highlight}
         className='media--1000'
-      >{showEstimates && estimateTime(targetTimeslice, lastCommittedTimeslice * 80)}</StyledCell>
+      >{showEstimates && estimateTime(targetTimeslice, get.blocks.relay(lastCommittedTimeslice))}</StyledCell>
       <StyledCell
         $p={highlight}
         className='media--1200'

packages/page-coretime/src/Sale/SaleTable.tsx

@@ -0,0 +1,51 @@
+// Copyright 2017-2024 @polkadot/app-coretime authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { SaleDetails } from '../types.js';
+
+import React, { useRef } from 'react';
+
+import { Table } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate.js';
+
+interface Props {
+  saleDetails: SaleDetails
+}
+
+function SaleTable ({ saleDetails }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const headerRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
+    [],
+    [t('Dates'), 'start media--800'],
+    [t('Blocks (relay)'), 'start'],
+    [t('Blocks(coretime)'), 'start'],
+    [t('Timeslices'), 'start']
+  ]);
+
+  return (
+    <Table
+      emptySpinner={false}
+      header={headerRef.current}
+      isSplit={false}
+    >
+      <tr>
+        <td>Start</td>
+        <td>{saleDetails.date.start}</td>
+        <td>{saleDetails.relay.start.block}</td>
+        <td>{saleDetails.coretime.start.block}</td>
+        <td>{saleDetails.relay.start.ts}</td>
+      </tr>
+      <tr>
+        <td>End</td>
+        <td>{saleDetails.date.end}</td>
+        <td>{saleDetails.relay.end.block}</td>
+        <td>{saleDetails.coretime.end.block}</td>
+        <td>{saleDetails.relay.end.ts}</td>
+      </tr>
+
+    </Table>
+  );
+}
+
+export default React.memo(SaleTable);

packages/page-coretime/src/Sale/Summary.tsx

@@ -0,0 +1,86 @@
+// Copyright 2017-2024 @polkadot/app-coretime authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ApiPromise } from '@polkadot/api';
+import type { BrokerStatus, CoreDescription, PalletBrokerConfigRecord, PalletBrokerSaleInfoRecord, RegionInfo } from '@polkadot/react-hooks/types';
+
+import React from 'react';
+
+import { CardSummary, SummaryBox } from '@polkadot/react-components';
+import { BN, formatNumber } from '@polkadot/util';
+
+import { useTranslation } from '../translate.js';
+import { estimateTime, get, getCurrentRegionStartEndTs } from '../utils/index.js';
+
+interface Props {
+  api: ApiPromise | null,
+  coreDscriptors?: CoreDescription[];
+  saleInfo: PalletBrokerSaleInfoRecord
+  config: PalletBrokerConfigRecord,
+  region: RegionInfo[],
+  status: BrokerStatus,
+  cycleNumber: number
+}
+
+function Summary ({ config, cycleNumber, saleInfo, status }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { currentRegionEnd, currentRegionStart } = getCurrentRegionStartEndTs(saleInfo, config.regionLength);
+
+  return (
+    <SummaryBox>
+      <section>
+        {status &&
+          <CardSummary label={t('sale number')}>
+            <div>
+              {cycleNumber > -1 ? cycleNumber : '-'}
+            </div>
+          </CardSummary>
+        }
+        <CardSummary label={t('sold/offered')}>
+          {`${saleInfo?.coresSold} / ${saleInfo?.coresOffered}`}
+        </CardSummary>
+        <CardSummary label={t('sale end')}>
+          <div>{estimateTime(currentRegionEnd, get.blocks.relay(status?.lastTimeslice))}</div>
+        </CardSummary>
+        <CardSummary label={t('last block')}>
+          <div>{formatNumber(get.blocks.relay(currentRegionEnd))}</div>
+        </CardSummary>
+        <CardSummary label={t('last timeslice')}>
+          <div>{formatNumber(currentRegionEnd)}</div>
+        </CardSummary>
+        {config && status &&
+          <CardSummary
+            className='media--800'
+            label={t('sale progress')}
+            progress={{
+              isBlurred: false,
+              total: new BN(config?.regionLength),
+              value: new BN(config?.regionLength - (currentRegionEnd - status.lastTimeslice)),
+              withTime: false
+            }}
+          />
+        }
+      </section>
+      <section className='media--1200'>
+        {status &&
+          (<CardSummary label={t('cycle dates')}>
+            <div>
+              <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionStart, get.blocks.relay(status?.lastTimeslice))}</div>
+              <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionEnd, get.blocks.relay(status?.lastTimeslice))}</div>
+            </div>
+          </CardSummary>)
+        }
+        {status &&
+          <CardSummary label={t('cycle ts')}>
+            <div>
+              <div style={{ fontSize: '14px' }}>{currentRegionStart}</div>
+              <div style={{ fontSize: '14px' }}>{currentRegionEnd}</div>
+            </div>
+          </CardSummary>
+        }
+      </section>
+    </SummaryBox>
+  );
+}
+
+export default React.memo(Summary);