improvements & cleanup

RegionX-Labs · Aug 31, 2024 · 590d2ea · 590d2ea
1 parent 3b092f1
commit 590d2ea
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 45 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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,17 +33,13 @@ 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 (
         !coretimeApi ||
         !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>
     </>