lint and tsc

polkadot-js · Jan 17, 2025 · 1c44b1c · 1c44b1c
1 parent 523ca7c
commit 1c44b1c
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 59 deletions.
diff --git a/packages/page-coretime/src/CoretimePage.tsx b/packages/page-coretime/src/CoretimePage.tsx
@@ -8,7 +8,7 @@ import type { ChainName } from './types.js';
 import React, { useRef } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
-import { Tabs } from '@polkadot/react-components';
+import { Spinner, Tabs } from '@polkadot/react-components';
 import { useCall } from '@polkadot/react-hooks';
 
 import Overview from './Overview/index.js';
@@ -47,18 +47,21 @@ function CoretimePage ({ api, basePath, className, isApiReady }: Props): React.R
         basePath={basePath}
         items={itemsRef.current}
       />
-      <Routes>
-        <Route path={basePath}>
-          <Route
-            element={<Overview chainName={chainName} />}
-            index
-          />
-          <Route
-            element={<Sale chainName={chainName} />}
-            path='sale'
-          />
-        </Route>
-      </Routes>
+      {!chainName
+        ? <div><Spinner /></div>
+        : <Routes>
+          <Route path={basePath}>
+            <Route
+              element={<Overview chainName={chainName} />}
+              index
+            />
+            <Route
+              element={<Sale chainName={chainName} />}
+              path='sale'
+            />
+          </Route>
+        </Routes>
+      }
     </main>
   );
 }

diff --git a/packages/page-coretime/src/Sale/SaleDetailsView.tsx b/packages/page-coretime/src/Sale/SaleDetailsView.tsx
@@ -3,14 +3,14 @@
 
 import type { ChainName, SaleParameters } from '../types.js';
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { Button, styled } from '@polkadot/react-components';
 
 import { PhaseName } from '../constants.js';
+import { useTranslation } from '../translate.js';
 import PhaseTable from './PhaseTable.js';
 import { SubScanButton } from './SubScanButton.js';
-import { useTranslation } from '../translate.js';
 
 const ResponsiveContainer = styled.div`
   display: flex;
@@ -80,6 +80,15 @@ const phases = {
 
 const SaleDetailsView = ({ chainName, chosenSaleNumber, saleParams }: { saleParams: SaleParameters, chosenSaleNumber: number, chainName: ChainName }) => {
   const { t } = useTranslation();
+
+  const openCoretimeDashboard = useCallback(() => {
+    window.open('https://data.parity.io/coretime');
+  }, []);
+
+  const openSubscanSalePriceGraph = useCallback(() => {
+    window.open(`https://coretime-${chainName}.subscan.io/coretime_dashboard`);
+  }, [chainName]);
+
   if (chosenSaleNumber === -1 || !saleParams) {
     return null;
   }
@@ -115,8 +124,8 @@ const SaleDetailsView = ({ chainName, chosenSaleNumber, saleParams }: { salePara
         <Title>Price graph</Title>
         <Button
           isBasic
-          label={t(`Open Subscan Sale Price graph`)}
-          onClick={() => { window.open(`https://coretime-${chainName}.subscan.io/coretime_dashboard`); }}
+          label={t('Open Subscan Sale Price graph')}
+          onClick={openSubscanSalePriceGraph}
         />
         <Title>Core Purchase Transactions</Title>
         <SubScanButton
@@ -127,8 +136,8 @@ const SaleDetailsView = ({ chainName, chosenSaleNumber, saleParams }: { salePara
         <Title>DotLake Coretime Dashboard</Title>
         <Button
           isBasic
-          label={t(`DotLake Coretime Dashboard`)}
-          onClick={() => { window.open(`https://data.parity.io/coretime`); }}
+          label={t('DotLake Coretime Dashboard')}
+          onClick={openCoretimeDashboard}
         />
         <Title>Coretime providers</Title>
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>

diff --git a/packages/page-coretime/src/Sale/boxes/Cores.tsx b/packages/page-coretime/src/Sale/boxes/Cores.tsx
@@ -6,14 +6,14 @@ import type { BlockNumber } from '@polkadot/types/interfaces';
 
 import React, { useMemo } from 'react';
 
+import { styled } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatBalance } from '@polkadot/util';
 
 import { PhaseName } from '../../constants.js';
 import { useTranslation } from '../../translate.js';
 import { getCorePriceAt } from '../../utils/sale.js';
 import { WhiteBox } from '../../WhiteBox.js';
-import { styled } from '@polkadot/react-components';
 
 export const Cores = ({ phaseName, salesInfo }: { phaseName: string, salesInfo: CoretimeInformation['salesInfo'] }) => {
   const { t } = useTranslation();
@@ -29,6 +29,7 @@ export const Cores = ({ phaseName, salesInfo }: { phaseName: string, salesInfo:
       width: 100%;
     }
   `;
+
   return (
     <CoresWrapper>
       <p style={{ fontSize: '16px', fontWeight: 'bold' }}>Cores</p>
@@ -45,7 +46,7 @@ export const Cores = ({ phaseName, salesInfo }: { phaseName: string, salesInfo:
               <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                 <div>
                   <p style={{ fontSize: '14px', marginBottom: '0.15rem', opacity: '0.8' }}>{t('current price')}</p>
-                  <p style={{ fontSize: '20px', color: '#007bff' }}> {coretimePrice && formatBalance(coretimePrice)}</p>
+                  <p style={{ color: '#007bff', fontSize: '20px' }}> {coretimePrice && formatBalance(coretimePrice)}</p>
                 </div>
                 <div>
                   <p style={{ fontSize: '14px', marginBottom: '0.15rem', opacity: '0.8' }}>{t('available cores')}</p>

diff --git a/packages/page-coretime/src/Sale/boxes/Region.tsx b/packages/page-coretime/src/Sale/boxes/Region.tsx
@@ -5,11 +5,10 @@ import type { SaleParameters } from 'page-coretime/src/types.js';
 
 import React from 'react';
 
+import { styled } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
 import { WhiteBox } from '../../WhiteBox.js';
-import { styled } from '@polkadot/react-components';
-
 
 const RegionWrapper = styled(WhiteBox)`
   justify-self: center;
@@ -18,6 +17,7 @@ const RegionWrapper = styled(WhiteBox)`
     width: 100%;
   }
 `;
+
 export const Region = ({ regionForSale }: { regionForSale: SaleParameters['regionForSale'] }) => {
   return (
     <RegionWrapper>
@@ -30,7 +30,7 @@ export const Region = ({ regionForSale }: { regionForSale: SaleParameters['regio
           </div>
           <div style={{ marginTop: '0.5rem' }}>
             <p style={{ fontSize: '14px', marginBottom: '0.15rem', opacity: '0.8' }}>relay chain blocks</p>
-            <p style={{ fontSize: '20px' }}>{formatNumber(regionForSale.start.blocks)} - {formatNumber(regionForSale.end.blocks)}</p>
+            <p style={{ fontSize: '20px' }}>{formatNumber(regionForSale.start.blocks.relay)} - {formatNumber(regionForSale.end.blocks.relay)}</p>
           </div>
 
         </div>}

diff --git a/packages/page-coretime/src/Sale/boxes/Timeline.tsx b/packages/page-coretime/src/Sale/boxes/Timeline.tsx
@@ -29,7 +29,7 @@ export const Timeline = ({ coretimeInfo: { salesInfo, status }, phaseName, saleP
       saleParams.interlude.ts,
       saleParams.leadin.ts,
       salesInfo.regionBegin),
-    [saleParams, status.lastTimeslice, salesInfo.regionBegin]);
+  [saleParams, status.lastTimeslice, salesInfo.regionBegin]);
 
   return (
     <TimelineWrapper>

diff --git a/packages/page-coretime/src/Sale/index.tsx b/packages/page-coretime/src/Sale/index.tsx
@@ -17,7 +17,6 @@ import { Timeline } from './boxes/Timeline.js';
 import SaleDetailsView from './SaleDetailsView.js';
 import Summary from './Summary.js';
 
-
 interface Props {
   chainName: ChainName
 }
@@ -46,31 +45,25 @@ const ResponsiveGrid = styled.div`
   }
 `;
 
-function Sale({ chainName }: Props): React.ReactElement<Props> {
+function Sale ({ chainName }: Props): React.ReactElement<Props> {
   const { coretimeInfo } = useCoretimeContext();
   const { api, isApiReady } = useApi();
   const { t } = useTranslation();
   const lastCommittedTimeslice = coretimeInfo?.status?.lastTimeslice;
   const [chosenSaleNumber, setChosenSaleNumber] = useState<number>(-1);
   const [saleParams, setSaleParams] = useState<SaleParameters | null>(null);
   const [selectedSaleParams, setSelectedSaleParams] = useState<SaleParameters | null>(null);
-  const saleNumberOptions = useMemo(() =>
-    [
-      {
-        text: t('Pick a sale number'),
-        value: -1
-      },
-      ...Array.from({ length: saleParams?.saleNumber ?? 0 }, (_, i) => ({
-        text: `sale #${i + 1}`,
-        value: i
-      })).reverse()
-
-    ]
-    , [saleParams, t]);
 
-
-  // TODO: uncomment when introducing core purchase functionality
-  // const available = getAvailableNumberOfCores(coretimeInfo);
+  const saleNumberOptions = useMemo(() => [
+    {
+      text: t('Pick a sale number'),
+      value: -1
+    },
+    ...Array.from({ length: saleParams?.saleNumber ?? 0 }, (_, i) => ({
+      text: `sale #${i + 1}`,
+      value: i
+    })).reverse()
+  ], [saleParams?.saleNumber, t]);
 
   useEffect(() => {
     if (coretimeInfo && !saleParams) {
@@ -80,13 +73,11 @@ function Sale({ chainName }: Props): React.ReactElement<Props> {
         lastCommittedTimeslice ?? 0
       ));
     }
-  }, [coretimeInfo, saleParams]);
-
+  }, [coretimeInfo, saleParams, lastCommittedTimeslice, chainName]);
 
   const phaseName = useMemo(() => saleParams?.phaseConfig?.currentPhaseName, [saleParams]);
 
-  const onDropDownChange = (value: number) => {
-    console.log('dropdown changed', value);
+  const onDropDownChange = useCallback((value: number) => {
     setChosenSaleNumber(value);
 
     if (value !== -1) {
@@ -96,11 +87,11 @@ function Sale({ chainName }: Props): React.ReactElement<Props> {
 
       setSelectedSaleParams(getSaleParameters(coretimeInfo, chainName, lastCommittedTimeslice ?? 0, value));
     }
-  }
+  }, [coretimeInfo, chainName, lastCommittedTimeslice]);
 
   return (
     <div>
-      {coretimeInfo && saleParams &&
+      {coretimeInfo && !!saleParams?.saleNumber &&
         <Summary
           api={isApiReady ? api : null}
           config={coretimeInfo?.config}
@@ -111,13 +102,13 @@ function Sale({ chainName }: Props): React.ReactElement<Props> {
           status={coretimeInfo?.status}
         />}
       <ResponsiveGrid>
-        {phaseName &&
+        {phaseName && coretimeInfo &&
           <Cores
             phaseName={phaseName}
             salesInfo={coretimeInfo?.salesInfo}
           />}
         {saleParams?.regionForSale && <Region regionForSale={saleParams.regionForSale} />}
-        {phaseName && coretimeInfo &&
+        {phaseName && coretimeInfo && saleParams &&
           <Timeline
             coretimeInfo={coretimeInfo}
             phaseName={phaseName}
@@ -135,7 +126,7 @@ function Sale({ chainName }: Props): React.ReactElement<Props> {
                 value={chosenSaleNumber}
               />
             </div>
-            {saleParams &&
+            {saleParams && selectedSaleParams &&
               <SaleDetailsView
                 chainName={chainName}
                 chosenSaleNumber={chosenSaleNumber}

diff --git a/packages/page-coretime/src/types.ts b/packages/page-coretime/src/types.ts
@@ -4,7 +4,7 @@
 import type { PhaseName } from './constants.js';
 
 export interface PhaseInfo {
-  name: string;
+  name?: string;
   start: {
     date: string | null;
     blocks: {
@@ -42,8 +42,8 @@ export interface SaleParameters {
     end: { date: string, ts: number; blocks: { coretime: number, relay: number } };
   };
   regionForSale: {
-    start: { date: string, ts: number; blocks: number };
-    end: { date: string, ts: number; blocks: number };
+    start: { date: string, ts: number; blocks: { coretime: number, relay: number } };
+    end: { date: string | null, ts: number; blocks: { coretime: number, relay: number } };
   };
   saleNumber: number;
   interlude: { ts: number; blocks: number };

diff --git a/packages/page-coretime/src/utils/sale.ts b/packages/page-coretime/src/utils/sale.ts
@@ -180,7 +180,7 @@ export const getSaleParameters = (
   { config, constants, salesInfo }: {salesInfo: RegionInfo, config: Pick<PalletBrokerConfigRecord, 'interludeLength' | 'leadinLength' | 'regionLength'>, constants: ChainConstants},
   chainName: ChainName,
   lastCommittedTimeslice: number,
-  chosenSaleNumber: number = -1
+  chosenSaleNumber = -1
 ): SaleParameters => {
   const get = createGet(constants);
   const interludeLengthTs = get.timeslices.coretime(config.interludeLength);
@@ -196,6 +196,7 @@ export const getSaleParameters = (
     // checked against Subscan historical sales
     if (chainName === 'kusama') {
       const irregularRegionLength = 848;
+
       if (chosenSaleNumber === 0) {
         currentRegionStartTs = FirstCycleStart.timeslice.coretime[chainName];
         currentRegionEndTs = currentRegionStartTs + config.regionLength;
@@ -248,7 +249,6 @@ export const getSaleParameters = (
       constants
     );
   }
-
 
   return {
     currentRegion: currentRegionInfo,
@@ -263,12 +263,18 @@ export const getSaleParameters = (
     phaseConfig,
     regionForSale: {
       end: {
-        blocks: currentRegionInfo.end.blocks.relay + get.blocks.relay(config.regionLength),
+        blocks: {
+          coretime: 0,
+          relay: currentRegionInfo.end.blocks.relay + get.blocks.relay(config.regionLength)
+        },
         date: estimateTime(currentRegionInfo.end.ts + config.regionLength, get.blocks.relay(lastCommittedTimeslice), constants.relay),
         ts: currentRegionInfo.end.ts + config.regionLength
       },
       start: {
-        blocks: currentRegionInfo.end.blocks.relay,
+        blocks: {
+          coretime: 0,
+          relay: currentRegionInfo.end.blocks.relay
+        },
         date: currentRegionInfo.end.date,
         ts: currentRegionInfo.end.ts
       }