renew parachains

src/components/Elements/Balance/index.tsx

@@ -14,10 +14,16 @@ const Balance = ({ relayBalance, coretimeBalance, symbol }: BalanceProps) => {
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
       <Typography sx={{ color: theme.palette.text.primary, my: '0.5em' }}>
-        {`Relay chain: ${formatBalance(relayBalance.toString(), false)} ${symbol}`}
+        {`Relay chain: ${formatBalance(
+          relayBalance.toString(),
+          false
+        )} ${symbol}`}
       </Typography>
       <Typography sx={{ color: theme.palette.text.primary, my: '0.5em' }}>
-        {`Coretime chain: ${formatBalance(coretimeBalance.toString(), false)} ${symbol}`}
+        {`Coretime chain: ${formatBalance(
+          coretimeBalance.toString(),
+          false
+        )} ${symbol}`}
       </Typography>
     </div>
   );

src/components/Elements/index.ts

@@ -1,4 +1,5 @@
 export * from './AmountInput';
+export * from './Balance';
 export * from './Banner';
 export * from './Buttons';
 export * from './CoreDetailsPanel';

src/hooks/useRenewableParas.ts

@@ -0,0 +1,76 @@
+import { CoreMask } from 'coretime-utils';
+import { useEffect, useState } from 'react';
+
+import { parseHNString } from '@/utils/functions';
+
+import { useCoretimeApi } from '@/contexts/apis';
+import { ApiState } from '@/contexts/apis/types';
+
+type RenewableParachain = {
+  core: number;
+  paraID: number;
+  price: number;
+  mask: CoreMask;
+  when: number;
+};
+
+export const useRenewableParachains = () => {
+  const {
+    state: { api, apiState },
+  } = useCoretimeApi();
+
+  const [loading, setLoading] = useState(false);
+  const [parachains, setParachains] = useState<RenewableParachain[]>([]);
+
+  useEffect(() => {
+    if (apiState !== ApiState.READY) {
+      setLoading(false);
+      setParachains([]);
+    }
+
+    const asyncFetchParaIds = async () => {
+      if (!api) return;
+
+      setLoading(true);
+
+      const renewals = await api.query.broker.allowedRenewals.entries();
+      for (const [key, value] of renewals) {
+        const data: any = key.toHuman();
+        const core = parseHNString(data[0].core);
+        const when = parseHNString(data[0].when);
+
+        const record: any = value.toHuman();
+        const price = parseHNString(record.price);
+        const {
+          completion: { Complete },
+        } = record;
+        if (Complete === undefined) continue;
+        if (Complete.length !== 1) continue;
+        const [
+          {
+            mask,
+            assignment: { Task },
+          },
+        ] = Complete;
+
+        if (Task === undefined) continue;
+
+        parachains.push({
+          core,
+          price,
+          mask: new CoreMask(mask),
+          paraID: parseHNString(Task),
+          when,
+        });
+      }
+
+      setParachains(parachains);
+
+      setLoading(false);
+    };
+
+    asyncFetchParaIds();
+  }, [api, apiState]);
+
+  return { loading, parachains };
+};

src/pages/renewal.tsx

@@ -0,0 +1,157 @@
+import {
+  Backdrop,
+  Box,
+  Button,
+  CircularProgress,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import Link from 'next/link';
+import { useState } from 'react';
+
+import useBalance from '@/hooks/balance';
+import { useRenewableParachains } from '@/hooks/useRenewableParas';
+import { formatBalance, sendTx } from '@/utils/functions';
+
+import { ProgressButton } from '@/components';
+import Balance from '@/components/Elements/Balance';
+
+import { useAccounts } from '@/contexts/account';
+import { useCoretimeApi } from '@/contexts/apis';
+import { useToast } from '@/contexts/toast';
+
+const Renewal = () => {
+  const theme = useTheme();
+
+  const {
+    state: { activeAccount, activeSigner },
+  } = useAccounts();
+  const { coretimeBalance, relayBalance } = useBalance();
+  const { loading, parachains } = useRenewableParachains();
+  const {
+    state: { api, symbol },
+  } = useCoretimeApi();
+  const { toastError, toastInfo, toastSuccess } = useToast();
+
+  const [paraId, setParaId] = useState<number>(0);
+  const [working, setWorking] = useState(false);
+
+  const defaultHandler = {
+    ready: () => toastInfo('Transaction was initiated.'),
+    inBlock: () => toastInfo(`In Block`),
+    finalized: () => setWorking(false),
+    success: () => {
+      toastSuccess('Successfully renewed the selected parachain.');
+    },
+    error: () => {
+      toastError(`Failed to renew the selected parachain.`);
+      setWorking(false);
+    },
+  };
+
+  const handleRenew = () => {
+    if (!activeAccount || !api || !activeSigner) return;
+
+    const { core } = parachains[paraId];
+
+    const txRenewal = api.tx.broker.renew(core);
+
+    sendTx(txRenewal, activeAccount.address, activeSigner, defaultHandler);
+  };
+
+  return loading ? (
+    <Backdrop open>
+      <CircularProgress />
+    </Backdrop>
+  ) : parachains.length === 0 ? (
+    <Typography>There are no renewable parachains.</Typography>
+  ) : (
+    <>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <Box>
+          <Typography
+            variant='subtitle1'
+            sx={{ color: theme.palette.common.black }}
+          >
+            Renew a parachain
+          </Typography>
+          <Typography
+            variant='subtitle2'
+            sx={{ color: theme.palette.text.primary }}
+          >
+            Renew a parachain
+          </Typography>
+        </Box>
+        <Balance
+          coretimeBalance={coretimeBalance}
+          relayBalance={relayBalance}
+          symbol={symbol}
+        />
+      </Box>
+
+      <Stack
+        direction='column'
+        gap={1}
+        margin='1rem 0'
+        width='60%'
+        sx={{ mx: 'auto' }}
+      >
+        <Typography
+          variant='subtitle1'
+          sx={{ color: theme.palette.common.black }}
+        >
+          Select a parachain to renew.
+        </Typography>
+        <FormControl fullWidth sx={{ mt: '1rem' }}>
+          <InputLabel id='label-parachain-select'>Parachain</InputLabel>
+          <Select
+            labelId='label-parachain-select'
+            label='Parachain'
+            value={paraId}
+            onChange={(e) => setParaId(Number(e.target.value))}
+          >
+            {parachains.map(({ paraID }, index) => (
+              <MenuItem key={index} value={index}>
+                {paraID}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Stack direction='column' alignItems='center' mt={'2rem'} gap='1rem'>
+          <Box>{`Core number: ${parachains[paraId].core}`}</Box>
+          <Box>{`Renewal price: ${formatBalance(
+            parachains[paraId].price.toString(),
+            false
+          )} ${symbol}`}</Box>
+        </Stack>
+        <Stack
+          direction='row'
+          gap='1rem'
+          alignItems='center'
+          justifyContent='flex-end'
+        >
+          <Link href='/'>
+            <Button variant='outlined'>Home</Button>
+          </Link>
+          <ProgressButton
+            label='Renew'
+            onClick={handleRenew}
+            loading={working}
+          />
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+export default Renewal;