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 ( <> - + ); 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(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(0); + const [renewalEnabled, setRenewalEnabled] = useState(true); const { status, parachains } = useRenewableParachains(); return status !== ContextStatus.LOADED ? ( @@ -57,8 +58,11 @@ const Renewal = () => { parachains={parachains} setActiveIdx={setActiveIdx} /> - - + + 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>; } -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 ( <> @@ -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 && ( - saleInfo.regionBegin ? ( + + ) : ( + <> + {/* If all cores are sold warn the user: */} + {saleInfo.coresSold === saleInfo.coresOffered && ( + - )} - {/* If not all cores are sold inform the user to renew: */} - {saleInfo.coresSold < saleInfo.coresOffered && ( - + )} + {/* If not all cores are sold inform the user to renew: */} + {saleInfo.coresSold < saleInfo.coresOffered && ( + + } + link={{ + title: 'Renewal FAQ', + href: 'https://docs.regionx.tech/docs/faq/renewal-questions', + }} + severity='info' + /> + )} + )}