search based on core & paraId

src/components/Renew/renewPage.tsx

@@ -27,7 +27,9 @@ const Renewal = () => {
 
     // Intentionally set to -1 so that the user gets rerouted if core is not set.
     const core = router.query.core ? Number(router.query.core) : -1;
-    const index = parachains.findIndex((p) => p.core === core);
+    const paraId = router.query.paraId ? Number(router.query.paraId) : -1;
+
+    const index = parachains.findIndex((p) => p.core === core && p.paraId === paraId);
 
     if (index >= 0) {
       setActiveIndex(index);

src/components/Renew/select.tsx

@@ -26,14 +26,19 @@ export const SelectParachain = ({ parachains }: SelectParachainProps) => {
 
   // Get coreId from query params.
   const core = router.query.core ? Number(router.query.core) : null;
+  const paraId = router.query.paraId ? Number(router.query.paraId) : null;
 
   const onParaChange = (e: SelectChangeEvent) => {
     const selectedCoreId = core ? parachains[Number(e.target.value)].core : parachains[0].core;
 
+    const selectedParaId = paraId
+      ? parachains[Number(e.target.value)].paraId
+      : parachains[0].paraId;
+
     // Update the URL with the new `core` query param
     router.push({
       pathname: '/renew',
-      query: { network, core: selectedCoreId },
+      query: { network, paraId: selectedParaId, core: selectedCoreId },
     });
   };
 
@@ -52,7 +57,7 @@ export const SelectParachain = ({ parachains }: SelectParachainProps) => {
           sx={{ borderRadius: '1rem' }}
           labelId='label-parachain-select'
           label='Parachain'
-          value={parachains.findIndex((p) => p.core === core).toString()}
+          value={parachains.findIndex((p) => p.core === core && p.paraId === paraId).toString()}
           onChange={onParaChange}
         >
           {parachains.map(({ paraId, core }, index) => (

src/components/Tables/ParachainTable/index.tsx

@@ -43,7 +43,7 @@ interface ParachainTableProps {
     onUpgrade: (_id: number) => void;
     onBuy: () => void;
     onWatch: (_id: number, _watching: boolean) => void;
-    onRenew: (_id: number) => void;
+    onRenew: (_id: number, _core: number) => void;
   };
   orderBy: string;
   direction: Order;
@@ -151,7 +151,7 @@ export const ParachainTable = ({
           {(rowsPerPage > 0
             ? parachains.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
             : parachains
-          ).map(({ id, name, state, watching, logo, homepage }, index) => (
+          ).map(({ id, core, name, state, watching, logo, homepage }, index) => (
             <StyledTableRow key={index}>
               <StyledTableCell style={{ width: '10%' }} align='center'>
                 <Link href={`${SUSBCAN_RELAY_URL[network]}/parachain/${id}`}>{id}</Link>
@@ -219,7 +219,9 @@ export const ParachainTable = ({
                 ) : state === ParaState.IDLE_PARA ? (
                   <ParaActionButton onClick={onBuy}>Buy Coretime</ParaActionButton>
                 ) : state === ParaState.ACTIVE_RENEWABLE_PARA ? (
-                  <ParaActionButton onClick={() => onRenew(id)}>Renew Coretime</ParaActionButton>
+                  <ParaActionButton onClick={() => onRenew(id, core)}>
+                    Renew Coretime
+                  </ParaActionButton>
                 ) : (
                   <Typography>No action required</Typography>
                 )}

src/hooks/parasInfo.ts

@@ -125,7 +125,7 @@ export const useParasInfo = () => {
                       ? ParaState.ONDEMAND_PARACHAIN
                       : ParaState.IDLE_PARA;
 
-        paras.push({ id, state, name, logo, homepage } as ParachainInfo);
+        paras.push({ id, core: isRenewable?.core, state, name, logo, homepage } as ParachainInfo);
       }
       return paras;
     };
@@ -141,6 +141,7 @@ export const useParasInfo = () => {
         if (manager === activeAccount?.address) {
           paras.push({
             id,
+            core: 0,
             state: ParaState.RESERVED,
             name: '',
           });

src/models/paras/index.ts

@@ -20,6 +20,7 @@ export enum ParaState {
 }
 export type ParachainInfo = {
   id: number;
+  core: number;
   state: ParaState;
   name: string;
   watching?: boolean;

src/pages/paras/index.tsx

@@ -67,10 +67,10 @@ const ParachainManagement = () => {
   };
 
   // Renew coretime with the given para id
-  const onRenew = (paraId: number) => {
+  const onRenew = (paraId: number, core: number) => {
     router.push({
       pathname: 'renew',
-      query: { network, paraId },
+      query: { network, paraId, core },
     });
   };