renewal refactor

README.md

@@ -25,7 +25,7 @@ The UI currently supports:
 - Parachain Id reservation
 - Parachain code registration
 
-### `/paras/renewal`
+### `/renew`
 - Core renewal
 
 ### `/marketplace`

src/components/Layout/Sidebar/index.tsx

@@ -110,7 +110,7 @@ export const Sidebar = () => {
     parachains: [
       {
         label: 'Renew',
-        route: '/paras/renewal',
+        route: '/renew',
         enabled: true,
         icon: <RenewIcon color={theme.palette.text.primary} />,
       },

src/hooks/renewableParas.ts

@@ -7,7 +7,7 @@ import { ApiState } from '@/contexts/apis/types';
 import { useNetwork } from '@/contexts/network';
 import { ContextStatus, NetworkType } from '@/models';
 
-type RenewableParachain = {
+export type RenewableParachain = {
   core: number;
   paraId: number;
   price: number;

src/pages/paras/index.tsx

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

src/pages/renew/action.tsx

@@ -0,0 +1,60 @@
+import { ProgressButton } from "@/components"
+import { useCoretimeApi, useRelayApi } from "@/contexts/apis";
+import { Stack } from "@mui/material"
+import { useState } from "react";
+import { useToast } from '@/contexts/toast';
+import { useAccounts } from "@/contexts/account";
+import { RenewableParachain } from "@/hooks";
+import { useSubmitExtrinsic } from "@/hooks/submitExtrinsic";
+
+interface RenewActionProps {
+  parachain: RenewableParachain,
+}
+
+export const RenewAction = ({ parachain }: RenewActionProps) => {
+  const [working, setWorking] = useState(false);
+
+  const {
+    state: { activeAccount, activeSigner },
+  } = useAccounts();
+  const {
+    state: { api: coretimeApi, isApiReady: isCoretimeReady, decimals, symbol },
+  } = useCoretimeApi();
+
+  const { toastError, toastInfo, toastSuccess } = useToast();
+  const { submitExtrinsicWithFeeInfo } = useSubmitExtrinsic();
+
+  const handleRenew = () => {
+    if (!activeAccount || !coretimeApi || !isCoretimeReady || !activeSigner) return;
+
+    const { core } = parachain;
+
+    const txRenewal = coretimeApi.tx.broker.renew(core);
+    submitExtrinsicWithFeeInfo(symbol, decimals, txRenewal, activeAccount.address, activeSigner, {
+      ready: () => {
+        setWorking(true);
+        toastInfo('Transaction was initiated');
+      },
+      inBlock: () => toastInfo('In Block'),
+      finalized: () => setWorking(false),
+      success: () => {
+        toastSuccess('Successfully renewed the selected parachain');
+      },
+      fail: () => {
+        toastError(`Failed to renew the selected parachain`);
+      },
+      error: (e) => {
+        toastError(`Failed to renew the selected parachain ${e}`);
+        setWorking(false);
+      },
+    });
+  };
+
+  return (
+    <>
+      <Stack direction='row' gap='1rem' marginTop='2em' justifyContent='center'>
+        <ProgressButton label='Renew' onClick={handleRenew} loading={working} width='200px' />
+      </Stack>
+    </>
+  )
+}