From ef698014bcc058d9f4a1f7ebfa2e984f9a160b9a Mon Sep 17 00:00:00 2001
From: Daria <2395326+piggydoughnut@users.noreply.github.com>
Date: Fri, 7 Mar 2025 12:01:48 +1300
Subject: [PATCH] Fix: Coretime sale page -> purchase transactions subscan url
 is constructred with start and end blocks = 0 (#11360)

* swapped blocks for dates in subscan url, adjusted the links on sale history tab

* changed title
---
 .../src/Sale/SaleDetailsView.tsx              | 61 +++++++++++--------
 .../page-coretime/src/Sale/SubScanButton.tsx  | 32 ----------
 .../src/Sale/SubscanModuleCallUrl.tsx         | 30 +++++++++
 packages/page-coretime/src/Sale/index.tsx     |  2 +-
 packages/page-coretime/src/utils/index.ts     |  4 +-
 5 files changed, 67 insertions(+), 62 deletions(-)
 delete mode 100644 packages/page-coretime/src/Sale/SubScanButton.tsx
 create mode 100644 packages/page-coretime/src/Sale/SubscanModuleCallUrl.tsx

diff --git a/packages/page-coretime/src/Sale/SaleDetailsView.tsx b/packages/page-coretime/src/Sale/SaleDetailsView.tsx
index ec67a927da..9f0d8314e9 100644
--- 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, { useCallback } from 'react';
+import React, { useMemo } from 'react';
 
-import { Button, styled } from '@polkadot/react-components';
+import { 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 { SubscanModuleCallUrl } from './SubscanModuleCallUrl.js';
 
 const ResponsiveContainer = styled.div`
   display: flex;
@@ -78,16 +78,14 @@ const phases = {
   }
 };
 
+const dotLakeUrl = 'https://data.parity.io/coretime';
+
 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]);
+  const subscanPriceGraphUrl = useMemo(() =>
+    `https://coretime-${chainName}.subscan.io/coretime_dashboard`
+  , [chainName]);
 
   if (chosenSaleNumber === -1 || !saleParams) {
     return null;
@@ -121,24 +119,33 @@ const SaleDetailsView = ({ chainName, chosenSaleNumber, saleParams }: { salePara
         <Title>{t('Region for sale ')}</Title>
         <p style={{ maxWidth: '600px', opacity: '0.8' }}>{t('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>Price graph</Title>
-        <Button
-          isBasic
-          label={t('Open Subscan Sale Price graph')}
-          onClick={openSubscanSalePriceGraph}
-        />
-        <Title>{t('Core Purchase Transactions')}</Title>
-        <SubScanButton
-          chainName={chainName}
-          chosenSaleNumber={chosenSaleNumber}
-          currentRegion={saleParams.currentRegion}
-        />
+        <Title>{t('Subscan Links')}</Title>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <a
+            href={subscanPriceGraphUrl}
+            rel='noopener noreferrer'
+            target='_blank'
+          >Sale Purchase Graph</a>
+          <SubscanModuleCallUrl
+            chainName={chainName}
+            chosenSaleNumber={chosenSaleNumber}
+            currentRegion={saleParams.currentRegion}
+            urlTitle='Sale Purchase Transactions'
+          />
+          <SubscanModuleCallUrl
+            call={'renew'}
+            chainName={chainName}
+            chosenSaleNumber={chosenSaleNumber}
+            currentRegion={saleParams.currentRegion}
+            urlTitle='Sale Renewal Transactions'
+          />
+        </div>
         <Title>{t('DotLake Coretime Dashboard')}</Title>
-        <Button
-          isBasic
-          label={t('DotLake Coretime Dashboard')}
-          onClick={openCoretimeDashboard}
-        />
+        <a
+          href={dotLakeUrl}
+          rel='noopener noreferrer'
+          target='_blank'
+        >Dot Lake</a>
         <Title>{t('Coretime providers')}</Title>
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
           {Object.entries(providers).map(([provider, { alt, href, logo }]) => (
diff --git a/packages/page-coretime/src/Sale/SubScanButton.tsx b/packages/page-coretime/src/Sale/SubScanButton.tsx
deleted file mode 100644
index 552701c060..0000000000
--- a/packages/page-coretime/src/Sale/SubScanButton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// 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';
-
-import { Button } from '@polkadot/react-components';
-
-import { useTranslation } from '../translate.js';
-import { constructSubscanQuery } from '../utils/index.js';
-
-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]);
-
-  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/SubscanModuleCallUrl.tsx b/packages/page-coretime/src/Sale/SubscanModuleCallUrl.tsx
new file mode 100644
index 0000000000..17408e9678
--- /dev/null
+++ b/packages/page-coretime/src/Sale/SubscanModuleCallUrl.tsx
@@ -0,0 +1,30 @@
+// Copyright 2017-2025 @polkadot/app-coretime authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { SaleParameters } from '../types.js';
+
+import React, { useMemo } from 'react';
+
+import { constructSubscanQuery } from '../utils/index.js';
+
+function formatDate (input: string) {
+  const date = new Date(input + ' UTC');
+
+  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+}
+
+export const SubscanModuleCallUrl = ({ call = 'purchase', chainName, chosenSaleNumber, currentRegion, module = 'broker', urlTitle }: { chosenSaleNumber: number, currentRegion: SaleParameters['currentRegion'], chainName: string, urlTitle: string, module?: string, call?: string }) => {
+  const url = useMemo(() => constructSubscanQuery(formatDate(currentRegion.start.date), formatDate(currentRegion.end.date), chainName, module, call), [currentRegion, chainName, module, call]);
+
+  if (chosenSaleNumber === -1 || !currentRegion) {
+    return null;
+  }
+
+  return (
+    <a
+      href={url}
+      rel='noopener noreferrer'
+      target='_blank'
+    >{urlTitle}</a>
+  );
+};
diff --git a/packages/page-coretime/src/Sale/index.tsx b/packages/page-coretime/src/Sale/index.tsx
index 0557b7ce5b..48061ae8f3 100644
--- a/packages/page-coretime/src/Sale/index.tsx
+++ b/packages/page-coretime/src/Sale/index.tsx
@@ -119,7 +119,7 @@ function Sale ({ chainName }: Props): React.ReactElement<Props> {
             saleParams={saleParams}
           />}
         <div style={{ backgroundColor: 'white', borderRadius: '4px', gridColumn: '1 / -1', justifySelf: 'center', padding: '24px', width: '100%' }}>
-          <p style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '1rem' }}>{t('Sale information')}</p>
+          <p style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '1rem' }}>{t('Sale history information')}</p>
           <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
             <div style={{ maxWidth: '300px' }}>
               <Dropdown
diff --git a/packages/page-coretime/src/utils/index.ts b/packages/page-coretime/src/utils/index.ts
index 76ee14d537..9220830a23 100644
--- a/packages/page-coretime/src/utils/index.ts
+++ b/packages/page-coretime/src/utils/index.ts
@@ -165,11 +165,11 @@ export const getCurrentRegionStartEndTs = (saleInfo: RegionInfo, regionLength: n
 export const getAvailableNumberOfCores = (coretimeInfo: CoretimeInformation) =>
   Number(coretimeInfo?.salesInfo?.coresOffered) - Number(coretimeInfo?.salesInfo.coresSold);
 
-export const constructSubscanQuery = (blockStart: number, blockEnd: number, chainName: string, module = 'broker', call = 'purchase') => {
+export const constructSubscanQuery = (dateStart: string, dateEnd: string, chainName: string, module = 'broker', call = 'purchase') => {
   const page = 1;
   const pageSize = 25;
   const signed = 'all';
   const baseURL = `https://coretime-${chainName}.subscan.io/extrinsic`;
 
-  return `${baseURL}?page=${page}&time_dimension=block&page_size=${pageSize}&module=${module}&signed=${signed}&call=${call}&block_start=${blockStart}&block_end=${blockEnd}`;
+  return `${baseURL}?page=${page}&time_dimension=date&page_size=${pageSize}&module=${module}&signed=${signed}&call=${call}&date_start=${dateStart}&date_end=${dateEnd}`;
 };