improve renewals (#223)

* improve renewals

* consistent order

* add warning

* info banner

src/components/Paras/ParaDisplay/index.tsx

@@ -4,20 +4,33 @@ import Image from 'next/image';
 import { chainData } from '@/chaindata';
 import { NetworkType } from '@/models';
 
+import Unknown from '../../../assets/unknown.svg';
+
 interface ParaDisplayProps {
   paraId: number;
   network: NetworkType;
 }
 export const ParaDisplay = ({ paraId, network }: ParaDisplayProps) => {
   const data = chainData[network][paraId];
 
-  if (data === undefined) return <>{paraId}</>;
+  if (data === undefined)
+    return (
+      <Stack direction='row' alignItems='center' gap='0.5rem'>
+        <Image
+          src={Unknown}
+          width={32}
+          height={32}
+          style={{ borderRadius: '100%' }}
+          alt=''
+        />
+        Parachain #{paraId}
+      </Stack>
+    );
 
   const { name, logo } = data;
 
   return (
     <Stack direction='row' alignItems='center' gap='0.5rem'>
-      {paraId}
       {logo === undefined ? (
         <></>
       ) : (
@@ -30,6 +43,7 @@ export const ParaDisplay = ({ paraId, network }: ParaDisplayProps) => {
         />
       )}
       {name}
+      <p>#{paraId}</p>
     </Stack>
   );
 };

src/contexts/orders/index.tsx

@@ -112,7 +112,7 @@ const OrderProvider = ({ children }: Props) => {
                   ...item,
                   totalContribution: parseInt(item.contribution),
                   contribution: await getContribution(item.orderId),
-                } as Order)
+                }) as Order
             )
           )
         );

src/hooks/order/processed.ts

@@ -58,7 +58,7 @@ export const useProcessedOrders = () => {
                   mask,
                   account: seller,
                   reward,
-                } as OrderItem)
+                }) as OrderItem
             )
           );
         }

src/pages/paras/renewal.tsx

@@ -20,12 +20,13 @@ import { useRenewableParachains } from '@/hooks/renewableParas';
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
 import { getBalanceString, timesliceToTimestamp } from '@/utils/functions';
 
-import { Balance, ParaDisplay, ProgressButton } from '@/components';
+import { Balance, Banner, ParaDisplay, ProgressButton } from '@/components';
 
 import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
 import { ApiState } from '@/contexts/apis/types';
 import { useNetwork } from '@/contexts/network';
+import { useSaleInfo } from '@/contexts/sales';
 import { useToast } from '@/contexts/toast';
 import { BrokerStatus, ContextStatus } from '@/models';
 
@@ -37,6 +38,7 @@ const Renewal = () => {
     state: { activeAccount, activeSigner },
   } = useAccounts();
   const { status, parachains } = useRenewableParachains();
+  const { saleInfo } = useSaleInfo();
 
   const {
     state: { api: relayApi, apiState: relayApiState },
@@ -248,6 +250,37 @@ const Renewal = () => {
               />
             </Stack>
           </Stack>
+          {saleInfo.coresSold === saleInfo.coresOffered && (
+            <Stack width='75%' margin='0 auto' mt='1rem'>
+              <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'
+              />
+            </Stack>
+          )}
+          {/* If not all cores are sold inform the user: */}
+          {saleInfo.coresSold < saleInfo.coresOffered && (
+            <Stack width='75%' margin='0 auto' mt='1rem'>
+              <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'
+              />
+            </Stack>
+          )}
           <Stack
             direction='row'
             gap='1rem'