From f2b3738cecd810334c0d40531bd3dbbda7276378 Mon Sep 17 00:00:00 2001 From: Szegoo Date: Sat, 21 Sep 2024 15:50:57 +0200 Subject: [PATCH 1/4] Renewal page query parameters --- src/components/Renew/renewPage.tsx | 35 ++++++++++++++++++++++-------- src/components/Renew/select.tsx | 35 ++++++++++++++++++++++++------ 2 files changed, 54 insertions(+), 16 deletions(-) diff --git a/src/components/Renew/renewPage.tsx b/src/components/Renew/renewPage.tsx index d5023b1f..4ee3a3d3 100644 --- a/src/components/Renew/renewPage.tsx +++ b/src/components/Renew/renewPage.tsx @@ -1,5 +1,6 @@ import { Backdrop, Box, CircularProgress, Paper, Typography, useTheme } from '@mui/material'; -import { useState } from 'react'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; import { useRenewableParachains } from '@/hooks/renewableParas'; @@ -14,10 +15,30 @@ import { SelectParachain } from './select'; const Renewal = () => { const theme = useTheme(); - const [activeIdx, setActiveIdx] = useState(0); + const router = useRouter(); + const { network } = router.query; + + const [activeIndex, setActiveIndex] = useState(0); const [renewalEnabled, setRenewalEnabled] = useState(true); const { status, parachains } = useRenewableParachains(); + useEffect(() => { + if (parachains.length === 0) return; + + // 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); + + if (index >= 0) { + setActiveIndex(index); + } else { + router.push({ + pathname: '/renew', + query: { network, core: parachains[0].core }, + }); + } + }, [router.query, parachains]); + return status !== ContextStatus.LOADED ? ( @@ -53,16 +74,12 @@ const Renewal = () => { boxShadow: 'none', }} > - + - + diff --git a/src/components/Renew/select.tsx b/src/components/Renew/select.tsx index d8193527..f48d678d 100644 --- a/src/components/Renew/select.tsx +++ b/src/components/Renew/select.tsx @@ -1,4 +1,13 @@ -import { FormControl, InputLabel, MenuItem, Select, Stack, Typography } from '@mui/material'; +import { + FormControl, + InputLabel, + MenuItem, + Select, + SelectChangeEvent, + Stack, + Typography, +} from '@mui/material'; +import { useRouter } from 'next/router'; import { RenewableParachain } from '@/hooks'; import theme from '@/utils/muiTheme'; @@ -9,12 +18,24 @@ import { useNetwork } from '@/contexts/network'; interface SelectParachainProps { parachains: RenewableParachain[]; - activeIdx: number; - setActiveIdx: (_: number) => void; } -export const SelectParachain = ({ parachains, activeIdx, setActiveIdx }: SelectParachainProps) => { +export const SelectParachain = ({ parachains }: SelectParachainProps) => { const { network } = useNetwork(); + const router = useRouter(); + + // Get coreId from query params. + const core = router.query.core ? Number(router.query.core) : null; + + const onParaChange = (e: SelectChangeEvent) => { + const selectedCoreId = core ? parachains[Number(e.target.value)].core : parachains[0].core; + + // Update the URL with the new `core` query param + router.push({ + pathname: '/renew', + query: { network, core: selectedCoreId }, + }); + }; return ( @@ -31,11 +52,11 @@ export const SelectParachain = ({ parachains, activeIdx, setActiveIdx }: SelectP sx={{ borderRadius: '1rem' }} labelId='label-parachain-select' label='Parachain' - value={activeIdx} - onChange={(e) => setActiveIdx(Number(e.target.value))} + value={parachains.findIndex((p) => p.core === core).toString()} + onChange={onParaChange} > {parachains.map(({ paraId, core }, index) => ( - + ))} From 1e73548e232eb467e77f99232bb4efd01122a71a Mon Sep 17 00:00:00 2001 From: Szegoo Date: Sat, 21 Sep 2024 16:40:19 +0200 Subject: [PATCH 2/4] search based on core & paraId --- src/components/Renew/renewPage.tsx | 4 +++- src/components/Renew/select.tsx | 9 +++++++-- src/components/Tables/ParachainTable/index.tsx | 8 +++++--- src/hooks/parasInfo.ts | 3 ++- src/models/paras/index.ts | 1 + src/pages/paras/index.tsx | 4 ++-- 6 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/components/Renew/renewPage.tsx b/src/components/Renew/renewPage.tsx index 4ee3a3d3..ab006fc9 100644 --- a/src/components/Renew/renewPage.tsx +++ b/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); diff --git a/src/components/Renew/select.tsx b/src/components/Renew/select.tsx index f48d678d..746ea6e2 100644 --- a/src/components/Renew/select.tsx +++ b/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) => ( diff --git a/src/components/Tables/ParachainTable/index.tsx b/src/components/Tables/ParachainTable/index.tsx index 7135c857..888ed469 100644 --- a/src/components/Tables/ParachainTable/index.tsx +++ b/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) => ( {id} @@ -219,7 +219,9 @@ export const ParachainTable = ({ ) : state === ParaState.IDLE_PARA ? ( Buy Coretime ) : state === ParaState.ACTIVE_RENEWABLE_PARA ? ( - onRenew(id)}>Renew Coretime + onRenew(id, core)}> + Renew Coretime + ) : ( No action required )} diff --git a/src/hooks/parasInfo.ts b/src/hooks/parasInfo.ts index d6c138e9..ae85e77e 100644 --- a/src/hooks/parasInfo.ts +++ b/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: '', }); diff --git a/src/models/paras/index.ts b/src/models/paras/index.ts index 87aaab88..e38e2c75 100644 --- a/src/models/paras/index.ts +++ b/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; diff --git a/src/pages/paras/index.tsx b/src/pages/paras/index.tsx index 22310ca6..60875e9f 100644 --- a/src/pages/paras/index.tsx +++ b/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 }, }); }; From 26f8fb8f14920f3c36531053a6f94d7e10095e82 Mon Sep 17 00:00:00 2001 From: Szegoo Date: Sat, 21 Sep 2024 18:40:03 +0200 Subject: [PATCH 3/4] fix --- src/components/Renew/renewPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Renew/renewPage.tsx b/src/components/Renew/renewPage.tsx index ab006fc9..b38b4319 100644 --- a/src/components/Renew/renewPage.tsx +++ b/src/components/Renew/renewPage.tsx @@ -36,7 +36,7 @@ const Renewal = () => { } else { router.push({ pathname: '/renew', - query: { network, core: parachains[0].core }, + query: { network, paraId: parachains[0].paraId, core: parachains[0].core }, }); } }, [router.query, parachains]); From 80729b86179a6d1712c5813f5be2a767c8b4bd64 Mon Sep 17 00:00:00 2001 From: Szegoo Date: Sat, 21 Sep 2024 18:51:44 +0200 Subject: [PATCH 4/4] last touches --- src/components/Renew/renewPage.tsx | 4 ++-- src/components/Renew/select.tsx | 5 ++--- src/hooks/parasInfo.ts | 1 + 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Renew/renewPage.tsx b/src/components/Renew/renewPage.tsx index b38b4319..f34a2a28 100644 --- a/src/components/Renew/renewPage.tsx +++ b/src/components/Renew/renewPage.tsx @@ -25,7 +25,7 @@ const Renewal = () => { useEffect(() => { if (parachains.length === 0) return; - // Intentionally set to -1 so that the user gets rerouted if core is not set. + // Intentionally set to -1 so that the user gets rerouted if the core or the paraId is not set. const core = router.query.core ? Number(router.query.core) : -1; const paraId = router.query.paraId ? Number(router.query.paraId) : -1; @@ -35,7 +35,7 @@ const Renewal = () => { setActiveIndex(index); } else { router.push({ - pathname: '/renew', + pathname: '', query: { network, paraId: parachains[0].paraId, core: parachains[0].core }, }); } diff --git a/src/components/Renew/select.tsx b/src/components/Renew/select.tsx index 746ea6e2..f252e294 100644 --- a/src/components/Renew/select.tsx +++ b/src/components/Renew/select.tsx @@ -24,20 +24,19 @@ export const SelectParachain = ({ parachains }: SelectParachainProps) => { const { network } = useNetwork(); const router = useRouter(); - // Get coreId from query params. + // Get core and paraId 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', + pathname: '', query: { network, paraId: selectedParaId, core: selectedCoreId }, }); }; diff --git a/src/hooks/parasInfo.ts b/src/hooks/parasInfo.ts index ae85e77e..0e798d6b 100644 --- a/src/hooks/parasInfo.ts +++ b/src/hooks/parasInfo.ts @@ -141,6 +141,7 @@ export const useParasInfo = () => { if (manager === activeAccount?.address) { paras.push({ id, + // Paras in `RESERVED` state can't have a core assigned. core: 0, state: ParaState.RESERVED, name: '',