partial lint

polkadot-js · Jan 10, 2025 · 5113ac7 · 5113ac7
1 parent 7eb586a
commit 5113ac7
Show file tree

Hide file tree

Showing 14 changed files with 318 additions and 246 deletions.
diff --git a/packages/page-broker/src/Overview/Summary.tsx b/packages/page-broker/src/Overview/Summary.tsx
@@ -109,7 +109,7 @@ function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
             <>
               <CardSummary
                 className='media--1200'
-                label={t('cycle dates')}
+                label={t('sale dates')}
               >
                 <div>
                   <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionStart, status?.lastTimeslice * 80, coretimeConstants?.relay)}</div>
@@ -118,7 +118,7 @@ function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
               </CardSummary>
               <CardSummary
                 className='media--1200'
-                label={t('cycle ts')}
+                label={t('sale ts')}
               >
                 <div>
                   <div style={{ fontSize: '14px' }}>{currentRegionStart}</div>

diff --git a/packages/page-coretime/src/CoretimeContext.tsx b/packages/page-coretime/src/CoretimeContext.tsx
@@ -24,10 +24,10 @@ const CoretimeContext = createContext<CoretimeContextProps>({
 export const CoretimeProvider = ({ api,
   children,
   isApiReady }: {
-    children: ReactNode;
-    api: ApiPromise;
-    isApiReady: boolean;
-  }) => {
+  children: ReactNode;
+  api: ApiPromise;
+  isApiReady: boolean;
+}) => {
   const coretimeInfo = useCoretimeInformation(api, isApiReady);
   const get = useMemo(() => {
     if (coretimeInfo?.constants) {

diff --git a/packages/page-coretime/src/Overview/Summary.tsx b/packages/page-coretime/src/Overview/Summary.tsx
@@ -24,7 +24,7 @@ interface Props {
   constants: ChainConstants
 }
 
-function Summary({ chainName, config, constants, parachainCount, saleInfo, status }: Props): React.ReactElement<Props> {
+function Summary ({ chainName, config, constants, parachainCount, saleInfo, status }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const currentRegionEnd = saleInfo.regionEnd - config.regionLength;
   const currentRegionStart = saleInfo.regionEnd - config.regionLength * 2;

diff --git a/packages/page-coretime/src/Sale/SaleDetailsView.tsx b/packages/page-coretime/src/Sale/SaleDetailsView.tsx
@@ -1,8 +1,15 @@
-import { styled } from "@polkadot/react-components";
-import { PhaseName } from "../constants.js";
-import PhaseTable from "./PhaseTable.js";
-import { ChainName, SaleParameters } from "../types.js";
-import { SubScanButton } from "./SubScanButton.js";
+// Copyright 2017-2025 @polkadot/app-coretime authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ChainName, SaleParameters } from '../types.js';
+
+import React from 'react';
+
+import { styled } from '@polkadot/react-components';
+
+import { PhaseName } from '../constants.js';
+import PhaseTable from './PhaseTable.js';
+import { SubScanButton } from './SubScanButton.js';
 
 const ResponsiveContainer = styled.div`
   display: flex;
@@ -19,88 +26,101 @@ const Title = styled.h3`
   margin-bottom: 1rem;
 `;
 
-const LinkWithLogo = ({ href, logo, alt }: { href: string, logo: string, alt: string }) => {
-    return (
-        <a href={href} rel='noopener noreferrer' target='_blank'><img alt={alt} height={25} src={logo} /></a>
-    )
-}
+const LinkWithLogo = ({ alt, href, logo }: { href: string, logo: string, alt: string }) => {
+  return (
+    <a
+      href={href}
+      rel='noopener noreferrer'
+      target='_blank'
+    >
+      <img
+        alt={alt}
+        height={25}
+        src={logo}
+      />
+    </a>
+  );
+};
 
 const providers = {
-    regionx: {
-        href: 'https://app.regionx.tech/?network=${chainName}',
-        logo: 'https://app.regionx.tech/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.8f0fd171.png&w=3840&q=75',
-        alt: 'RegionX'
-    },
-    subscan: {
-        href: 'https://coretime-${chainName}.subscan.io/coretime_dashboard',
-        logo: 'https://www.subscan.io/_next/image?url=%2Fwebsite%2Flogo-light.png&w=256&q=75',
-        alt: 'Subscan'
-    },
-    lastic: {
-        href: 'https://www.lastic.xyz/${chainName}/bulkcore1',
-        logo: 'https://www.lastic.xyz/_next/image?url=%2Fassets%2FImages%2FLogos%2Flastic-logo.png&w=384&q=100',
-        alt: 'Lastic'
-    }
-}
+  lastic: {
+    alt: 'Lastic',
+    href: (chainName: string) => `https://www.lastic.xyz/${chainName}/bulkcore1`,
+    logo: 'https://www.lastic.xyz/_next/image?url=%2Fassets%2FImages%2FLogos%2Flastic-logo.png&w=384&q=100'
+  },
+  regionx: {
+    alt: 'RegionX',
+    href: (chainName: string) => `https://app.regionx.tech/?network=${chainName}`,
+    logo: 'https://app.regionx.tech/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.8f0fd171.png&w=3840&q=75'
+  },
+  subscan: {
+    alt: 'Subscan',
+    href: (chainName: string) => `https://coretime-${chainName}.subscan.io/coretime_dashboard`,
+    logo: 'https://www.subscan.io/_next/image?url=%2Fwebsite%2Flogo-light.png&w=256&q=75'
+  }
+};
 
 const phases = {
-    [PhaseName.Renewals]: {
-        name: 'Interlude/Renewals phase',
-        description: 'In this phase, core owners can renew existing cores at a fixed price to ensure continued operation in the next region. No new core purchases are permitted.'
-    },
-    [PhaseName.PriceDiscovery]: {
-        name: 'Price Discovery phase',
-        description: 'The period during which cores are available for both purchase and renewal. The price is linearly declining price.'
-    },
-    [PhaseName.FixedPrice]: {
-        name: 'Fixed price phase',
-        description: 'The period during which cores are available for both purchase and renewal. The price is fixed price towards the end of the sales period.'
-    }
-}
-
-const SaleDetailsView = ({ saleParams, chosenSaleNumber, chainName }: { saleParams: SaleParameters, chosenSaleNumber: number, chainName: ChainName }) => {
+  [PhaseName.Renewals]: {
+    description: 'In this phase, core owners can renew existing cores at a fixed price to ensure continued operation in the next region. No new core purchases are permitted.',
+    name: 'Interlude/Renewals phase'
+  },
+  [PhaseName.PriceDiscovery]: {
+    description: 'The period during which cores are available for both purchase and renewal. The price is linearly declining price.',
+    name: 'Price Discovery phase'
+  },
+  [PhaseName.FixedPrice]: {
+    description: 'The period during which cores are available for both purchase and renewal. The price is fixed price towards the end of the sales period.',
+    name: 'Fixed price phase'
+  }
+};
 
-    if (chosenSaleNumber === -1 || !saleParams) {
-        return null;
-    }
+const SaleDetailsView = ({ chainName, chosenSaleNumber, saleParams }: { saleParams: SaleParameters, chosenSaleNumber: number, chainName: ChainName }) => {
+  if (chosenSaleNumber === -1 || !saleParams) {
+    return null;
+  }
 
-    return (
-        <ResponsiveContainer>
-            <div>
-                <Title>Sale #{chosenSaleNumber + 1} phases</Title>
-                <div style={{ display: 'grid', gap: '1rem', gridTemplateRows: '1fr 1fr 1fr', minWidth: '200px' }}>
-                    {Object.entries(phases).map(([phase, { name, description }]) => (
-                        <div>
-                            <h4>{name}</h4>
-                            <p style={{ maxWidth: '600px', opacity: '0.8' }}>{description}</p>
-                            {saleParams?.phaseConfig &&
+  return (
+    <ResponsiveContainer>
+      <div>
+        <Title>Sale #{chosenSaleNumber + 1} phases</Title>
+        <div style={{ display: 'grid', gap: '1rem', gridTemplateRows: '1fr 1fr 1fr', minWidth: '200px' }}>
+          {Object.entries(phases).map(([phase, { description, name }]) => (
+            <div key={phase}>
+              <h4>{name}</h4>
+              <p style={{ maxWidth: '600px', opacity: '0.8' }}>{description}</p>
+              {saleParams?.phaseConfig &&
                                 <PhaseTable
-                                    phaseInfo={saleParams?.phaseConfig.config[phase as keyof typeof saleParams.phaseConfig.config]}
+                                  phaseInfo={saleParams?.phaseConfig.config[phase as keyof typeof saleParams.phaseConfig.config]}
                                 />}
-                        </div>
-                    ))}
-                </div>
-            </div>
-
-            <div>
-                <Title>Sale #{chosenSaleNumber + 1} Transactions</Title>
-                <SubScanButton chosenSaleNumber={chosenSaleNumber} currentRegion={saleParams.currentRegion} chainName={chainName} />
-
-                <Title>Region for sale #${chosenSaleNumber + 1} </Title>
-                <p style={{ maxWidth: '600px', opacity: '0.8' }}>Region is an asset of Coretime. It signifies the upcoming sales period within which a core can be secured by purchasing coretime. Acquiring coretime grants access to a core for the duration of that specific region.</p>
-                {saleParams?.regionForSale && <PhaseTable phaseInfo={saleParams?.regionForSale} />}
-
-                <Title>Coretime providers</Title>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', paddingTop: '2rem' }}>
-                    {Object.entries(providers).map(([provider, { href, logo, alt }]) => (
-                        <LinkWithLogo href={href} logo={logo} alt={alt} />
-                    ))}
-                </div>
             </div>
-        </ResponsiveContainer>
-    )
+          ))}
+        </div>
+      </div>
+      <div>
+        <Title>Sale #{chosenSaleNumber + 1} Transactions</Title>
+        <SubScanButton
+          chainName={chainName}
+          chosenSaleNumber={chosenSaleNumber}
+          currentRegion={saleParams.currentRegion}
+        />
+        <Title>Region for sale #${chosenSaleNumber + 1} </Title>
+        <p style={{ maxWidth: '600px', opacity: '0.8' }}>Region is an asset of Coretime. It signifies the upcoming sales period within which a core can be secured by purchasing coretime. Acquiring coretime grants access to a core for the duration of that specific region.</p>
+        {saleParams?.regionForSale && <PhaseTable phaseInfo={saleParams?.regionForSale} />}
+        <Title>Coretime providers</Title>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', paddingTop: '2rem' }}>
+          {Object.entries(providers).map(([provider, { alt, href, logo }]) => (
+            <LinkWithLogo
+              alt={alt}
+              href={href(chainName)}
+              key={provider}
+              logo={logo}
+            />
+          ))}
+        </div>
+      </div>
+    </ResponsiveContainer>
+  );
 };
 
-
-
-export default SaleDetailsView;
+export default SaleDetailsView;
diff --git a/packages/page-coretime/src/Sale/SubScanButton.tsx b/packages/page-coretime/src/Sale/SubScanButton.tsx
@@ -1,27 +1,32 @@
-import { Button } from "@polkadot/react-components"
-import { useCallback } from "react";
-import { constructSubscanQuery } from "../utils/index.js";
-import { SaleParameters } from "../types.js";
-import { useTranslation } from '../translate.js';
+// Copyright 2017-2025 @polkadot/app-coretime authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { SaleParameters } from '../types.js';
+
+import React, { useCallback } from 'react';
 
-export const SubScanButton = ({ chosenSaleNumber, currentRegion, chainName }: { chosenSaleNumber: number, currentRegion: SaleParameters['currentRegion'], chainName: string }) => {
-    const { t } = useTranslation();
-    const onQuerySaleClick = useCallback(() => {
-        if (currentRegion) {
-            window.open(constructSubscanQuery(currentRegion.start.blocks.coretime, currentRegion.end.blocks.coretime, chainName));
-        }
-    }, [currentRegion, chainName]);
+import { Button } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate.js';
+import { constructSubscanQuery } from '../utils/index.js';
 
-    if (chosenSaleNumber === -1 || !currentRegion) {
-        return null;
+export const SubScanButton = ({ chainName, chosenSaleNumber, currentRegion }: { chosenSaleNumber: number, currentRegion: SaleParameters['currentRegion'], chainName: string }) => {
+  const { t } = useTranslation();
+  const onQuerySaleClick = useCallback(() => {
+    if (currentRegion) {
+      window.open(constructSubscanQuery(currentRegion.start.blocks.coretime, currentRegion.end.blocks.coretime, chainName));
     }
+  }, [currentRegion, chainName]);
 
-    return (
-        <Button
-            isBasic
-            label={t(`Query Subscan for sale #${chosenSaleNumber + 1} transactions`)}
-            onClick={onQuerySaleClick}
-        />
-    )
+  if (chosenSaleNumber === -1 || !currentRegion) {
+    return null;
+  }
 
-}
+  return (
+    <Button
+      isBasic
+      label={t(`Query Subscan for sale #${chosenSaleNumber + 1} transactions`)}
+      onClick={onQuerySaleClick}
+    />
+  );
+};
diff --git a/packages/page-coretime/src/Sale/Summary.tsx b/packages/page-coretime/src/Sale/Summary.tsx
@@ -24,7 +24,7 @@ interface Props {
   constants: ChainConstants
 }
 
-function Summary({ config, constants, saleInfo, saleNumber, status }: Props): React.ReactElement<Props> {
+function Summary ({ config, constants, saleInfo, saleNumber, status }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { currentRegionEndTs, currentRegionStartTs } = getCurrentRegionStartEndTs(saleInfo, config.regionLength);
   const { get } = useCoretimeContext();

diff --git a/packages/page-coretime/src/Sale/boxes/Cores.tsx b/packages/page-coretime/src/Sale/boxes/Cores.tsx
@@ -1,42 +1,48 @@
-import { PhaseName } from "../../constants.js";
-import { getCorePriceAt } from "../../utils/sale.js";
-import { WhiteBox } from "../../WhiteBox.js";
-import { useTranslation } from '../../translate.js';
-import { useCall, useApi } from "@polkadot/react-hooks";
+// Copyright 2017-2025 @polkadot/app-coretime authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { CoretimeInformation } from '@polkadot/react-hooks/types';
 import type { BlockNumber } from '@polkadot/types/interfaces';
+
 import React, { useMemo } from 'react';
-import { formatBalance, } from '@polkadot/util';
 
+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';
 
-export const Cores = ({ phaseName, salesInfo }: { phaseName: string, salesInfo: any }) => {
-    const { t } = useTranslation();
-    const { apiCoretime } = useApi();
-    const bestNumberFinalized = useCall<BlockNumber>(apiCoretime?.derive.chain.bestNumberFinalized);
-    const soldOut = useMemo(() => salesInfo.coresOffered === salesInfo.coresSold, [salesInfo.coresOffered, salesInfo.coresSold]);
-    const coretimePrice = useMemo(() => bestNumberFinalized && getCorePriceAt(bestNumberFinalized.toNumber(), salesInfo), [salesInfo, bestNumberFinalized]);
+export const Cores = ({ phaseName, salesInfo }: { phaseName: string, salesInfo: CoretimeInformation['salesInfo'] }) => {
+  const { t } = useTranslation();
+  const { apiCoretime } = useApi();
+  const bestNumberFinalized = useCall<BlockNumber>(apiCoretime?.derive.chain.bestNumberFinalized);
+  const soldOut = useMemo(() => salesInfo.coresOffered === salesInfo.coresSold, [salesInfo.coresOffered, salesInfo.coresSold]);
+  const coretimePrice = useMemo(() => bestNumberFinalized && getCorePriceAt(bestNumberFinalized.toNumber(), salesInfo), [salesInfo, bestNumberFinalized]);
 
-    return (
-        <WhiteBox>
-            <p style={{ fontSize: '14px', opacity: '0.8' }}>Cores sale</p>
-            {phaseName === PhaseName.Renewals
-                ? (
-                    <h4>{t('Cores cannot be purchased now')}</h4>
-                )
-                : (
-                    <div style={{ display: 'flex', flexDirection: 'column' }}>
-                        {soldOut && (
-                            <h4>{t('All cores are sold out')}</h4>
-                        )}
-                        {!soldOut && (
-                            <div>
-                                <p style={{ fontSize: '14px', marginBottom: '0.25rem' }}>{t('current price')}</p>
-                                <p style={{ fontSize: '20px' }}> {coretimePrice && formatBalance(coretimePrice)}</p>
-                            </div>
-                        )}
-                    </div>
-                )}
-            {/* TODO: Add core purchase functionality */}
-            {/* {<div style={{ marginTop: '8px' }}>
+  return (
+    <WhiteBox>
+      <p style={{ fontSize: '14px', opacity: '0.8' }}>Cores sale</p>
+      {phaseName === PhaseName.Renewals
+        ? (
+          <h4>{t('Cores cannot be purchased now')}</h4>
+        )
+        : (
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            {soldOut && (
+              <h4>{t('All cores are sold out')}</h4>
+            )}
+            {!soldOut && (
+              <div>
+                <p style={{ fontSize: '14px', marginBottom: '0.25rem' }}>{t('current price')}</p>
+                <p style={{ fontSize: '20px' }}> {coretimePrice && formatBalance(coretimePrice)}</p>
+              </div>
+            )}
+          </div>
+        )}
+      {/* TODO: Add core purchase functionality */}
+      {/* {<div style={{ marginTop: '8px' }}>
                 <Button
                     isBasic
                     // isDisabled={!available || phaseName === PhaseName.Renewals}
@@ -45,6 +51,6 @@ export const Cores = ({ phaseName, salesInfo }: { phaseName: string, salesInfo:
                     onClick={() => window.alert('yo')}
                 />
                 </div>} */}
-        </WhiteBox>
-    )
+    </WhiteBox>
+  );
 };