From 590d2eaa4c536855d66f2fbddcfa754edc5c1cbc Mon Sep 17 00:00:00 2001
From: Sergej <sakacszergej@gmail.com>
Date: Sat, 31 Aug 2024 20:53:44 +0200
Subject: [PATCH] improvements & cleanup

---
 src/hooks/renewableParas.ts               |  1 +
 src/pages/renew/action.tsx                | 11 +++-
 src/pages/renew/hooks/useRenewHandlers.ts | 10 ----
 src/pages/renew/index.tsx                 |  8 ++-
 src/pages/renew/info.tsx                  | 70 +++++++++++++----------
 5 files changed, 55 insertions(+), 45 deletions(-)
 delete mode 100644 src/pages/renew/hooks/useRenewHandlers.ts

diff --git a/src/hooks/renewableParas.ts b/src/hooks/renewableParas.ts
index c23340b0..71f3958d 100644
--- a/src/hooks/renewableParas.ts
+++ b/src/hooks/renewableParas.ts
@@ -12,6 +12,7 @@ export type RenewableParachain = {
   paraId: number;
   price: number;
   mask: string;
+  // The point in time that the renewable workload on `core` ends and a fresh renewal may begin.
   when: number;
 };
 
diff --git a/src/pages/renew/action.tsx b/src/pages/renew/action.tsx
index de5ab824..ad472abe 100644
--- a/src/pages/renew/action.tsx
+++ b/src/pages/renew/action.tsx
@@ -12,9 +12,10 @@ import { useToast } from '@/contexts/toast';
 
 interface RenewActionProps {
   parachain: RenewableParachain;
+  enabled: boolean;
 }
 
-export const RenewAction = ({ parachain }: RenewActionProps) => {
+export const RenewAction = ({ parachain, enabled }: RenewActionProps) => {
   const [working, setWorking] = useState(false);
 
   const {
@@ -56,7 +57,13 @@ export const RenewAction = ({ parachain }: RenewActionProps) => {
   return (
     <>
       <Stack direction='row' gap='1rem' marginTop='2em' justifyContent='center'>
-        <ProgressButton label='Renew' onClick={handleRenew} loading={working} width='200px' />
+        <ProgressButton
+          disabled={!enabled}
+          label='Renew'
+          onClick={handleRenew}
+          loading={working}
+          width='200px'
+        />
       </Stack>
     </>
   );
diff --git a/src/pages/renew/hooks/useRenewHandlers.ts b/src/pages/renew/hooks/useRenewHandlers.ts
deleted file mode 100644
index 75811349..00000000
--- a/src/pages/renew/hooks/useRenewHandlers.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useState } from 'react';
-
-export const useRenewHandlers = () => {
-  const [activeIdx, setActiveIdx] = useState<number>(0);
-
-  return {
-    activeIdx,
-    setActiveIdx,
-  };
-};
diff --git a/src/pages/renew/index.tsx b/src/pages/renew/index.tsx
index a8be6687..d5023b1f 100644
--- a/src/pages/renew/index.tsx
+++ b/src/pages/renew/index.tsx
@@ -15,6 +15,7 @@ const Renewal = () => {
   const theme = useTheme();
 
   const [activeIdx, setActiveIdx] = useState<number>(0);
+  const [renewalEnabled, setRenewalEnabled] = useState<boolean>(true);
   const { status, parachains } = useRenewableParachains();
 
   return status !== ContextStatus.LOADED ? (
@@ -57,8 +58,11 @@ const Renewal = () => {
             parachains={parachains}
             setActiveIdx={setActiveIdx}
           />
-          <RenewableParaInfo parachain={parachains[activeIdx]} />
-          <RenewAction parachain={parachains[activeIdx]} />
+          <RenewableParaInfo
+            parachain={parachains[activeIdx]}
+            setRenewalEnabled={setRenewalEnabled}
+          />
+          <RenewAction parachain={parachains[activeIdx]} enabled={renewalEnabled} />
         </Paper>
       </Box>
     </>
diff --git a/src/pages/renew/info.tsx b/src/pages/renew/info.tsx
index 9cd21e84..e2e669c6 100644
--- a/src/pages/renew/info.tsx
+++ b/src/pages/renew/info.tsx
@@ -1,6 +1,6 @@
 import { Box, Stack, Tooltip, Typography } from '@mui/material';
 import { humanizer } from 'humanize-duration';
-import { useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 import { RenewableParachain } from '@/hooks';
 import { getBalanceString, timesliceToTimestamp } from '@/utils/functions';
@@ -14,9 +14,10 @@ import { ContextStatus } from '@/models';
 
 interface RenewableParaInfoProps {
   parachain: RenewableParachain;
+  setRenewalEnabled: Dispatch<SetStateAction<boolean>>;
 }
 
-export const RenewableParaInfo = ({ parachain }: RenewableParaInfoProps) => {
+export const RenewableParaInfo = ({ parachain, setRenewalEnabled }: RenewableParaInfoProps) => {
   const [expiryTimestamp, setExpiryTimestamp] = useState(0);
 
   const { saleInfo, saleStatus, status: saleInfoStatus, phase } = useSaleInfo();
@@ -32,9 +33,6 @@ export const RenewableParaInfo = ({ parachain }: RenewableParaInfoProps) => {
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    // No need to keep refreshing
-    if (expiryTimestamp) return;
-
     const getExpiry = async () => {
       setLoading(true);
       if (
@@ -42,7 +40,6 @@ export const RenewableParaInfo = ({ parachain }: RenewableParaInfoProps) => {
         !isCoretimeReady ||
         !relayApi ||
         !isRelayReady ||
-        !parachain ||
         saleInfoStatus !== ContextStatus.LOADED
       )
         return;
@@ -75,6 +72,11 @@ export const RenewableParaInfo = ({ parachain }: RenewableParaInfoProps) => {
     phase,
   ]);
 
+  useEffect(() => {
+    // if expiry is before the next region begin it should be possible to renew.
+    setRenewalEnabled(parachain.when <= saleInfo.regionBegin);
+  }, [saleInfo.regionBegin, parachain.when]);
+
   return (
     <>
       <Stack direction='column' gap='1.5rem' margin='1rem 0' width='75%' sx={{ mx: 'auto' }}>
@@ -83,33 +85,39 @@ export const RenewableParaInfo = ({ parachain }: RenewableParaInfoProps) => {
           expiryTimestamp={expiryTimestamp}
           expiryLoading={loading}
         />
-        {/* If all cores are sold warn the user: */}
-        {saleInfo.coresSold === saleInfo.coresOffered && (
-          <Banner
-            content={
-              'No more cores are on sale! Attempting to renew will fail. To avoid these kind of \
+        {parachain.when > saleInfo.regionBegin ? (
+          <Banner content={'No need to renew in the current sale'} severity='success' />
+        ) : (
+          <>
+            {/* If all cores are sold warn the user: */}
+            {saleInfo.coresSold === saleInfo.coresOffered && (
+              <Banner
+                content={
+                  'No more cores are on sale! Attempting to renew will fail. To avoid these kind of \
                   issues in the future, please renew during the interlude phase. '
-            }
-            link={{
-              title: 'Renewal FAQ',
-              href: 'https://docs.regionx.tech/docs/faq/renewal-questions',
-            }}
-            severity='warning'
-          />
-        )}
-        {/* If not all cores are sold inform the user to renew: */}
-        {saleInfo.coresSold < saleInfo.coresOffered && (
-          <Banner
-            content={
-              'It is highly recommended to renew during the interlude phase, as doing so guarantees \
+                }
+                link={{
+                  title: 'Renewal FAQ',
+                  href: 'https://docs.regionx.tech/docs/faq/renewal-questions',
+                }}
+                severity='warning'
+              />
+            )}
+            {/* If not all cores are sold inform the user to renew: */}
+            {saleInfo.coresSold < saleInfo.coresOffered && (
+              <Banner
+                content={
+                  'It is highly recommended to renew during the interlude phase, as doing so guarantees \
                   that the core will be available for renewal. '
-            }
-            link={{
-              title: 'Renewal FAQ',
-              href: 'https://docs.regionx.tech/docs/faq/renewal-questions',
-            }}
-            severity='info'
-          />
+                }
+                link={{
+                  title: 'Renewal FAQ',
+                  href: 'https://docs.regionx.tech/docs/faq/renewal-questions',
+                }}
+                severity='info'
+              />
+            )}
+          </>
         )}
       </Stack>
     </>