Final assignment (#92)

* Final assignment

* loading fix

* off-topic: add analytics

package.json

@@ -27,6 +27,7 @@
     "@polkadot/ui-keyring": "latest",
     "@polkadot/util": "latest",
     "@types/humanize-duration": "^3.27.3",
+    "@vercel/analytics": "^1.2.2",
     "clsx": "^1.1.1",
     "coretime-utils": "^0.2.8",
     "date-fns": "^3.3.1",

src/components/Elements/RegionCard/index.tsx

@@ -173,7 +173,7 @@ const RegionCardInner = ({
     };
 
     if (taskId !== null) {
-      return getTaskName(taskId) ? getTaskName(taskId) : `Parachain: ${taskId}`;
+      return getTaskName(taskId) ? getTaskName(taskId) : `Parachain ${taskId}`;
     }
     return 'Unassigned';
   };

src/components/Modals/TaskAssign/index.tsx

@@ -1,4 +1,5 @@
 import {
+  Alert,
   Box,
   Button,
   Dialog,
@@ -49,11 +50,11 @@ export const TaskAssignModal = ({
   const { tasks } = useTasks();
   const { toastError, toastInfo, toastSuccess } = useToast();
 
-  const [working, setWorking] = useState(false);
+  const [working, setWorking] = useState<'Final' | 'Provisional' | null>(null);
   const [taskSelected, selectTask] = useState<number>();
   const [taskModalOpen, openTaskModal] = useState(false);
 
-  const onAssign = async () => {
+  const onAssign = async (final: boolean) => {
     if (!coretimeApi || !activeAccount || !activeSigner) return;
 
     if (taskSelected === undefined) {
@@ -64,19 +65,19 @@ export const TaskAssignModal = ({
     const txAssign = coretimeApi.tx.broker.assign(
       regionMetadata.region.getOnChainRegionId(),
       taskSelected,
-      'Provisional'
+      final ? 'Final' : 'Provisional'
     );
 
     try {
-      setWorking(true);
+      setWorking(final ? 'Final' : 'Provisional');
       await txAssign.signAndSend(
         activeAccount.address,
         { signer: activeSigner },
         ({ status, events }) => {
           if (status.isReady) toastInfo('Transaction was initiated');
           else if (status.isInBlock) toastInfo(`In Block`);
           else if (status.isFinalized) {
-            setWorking(false);
+            setWorking(null);
             events.forEach(({ event: { method } }) => {
               if (method === 'ExtrinsicSuccess') {
                 toastSuccess('Successfully assigned a task');
@@ -91,13 +92,13 @@ export const TaskAssignModal = ({
       );
     } catch (e) {
       toastError(`Failed to assign a task. ${e}`);
-      setWorking(false);
+      setWorking(null);
     }
   };
 
   useEffect(() => {
     selectTask(tasks[0]?.id);
-    setWorking(false);
+    setWorking(null);
     openTaskModal(false);
   }, [open, tasks]);
 
@@ -165,12 +166,28 @@ export const TaskAssignModal = ({
             </Paper>
           </Box>
         </DialogContent>
+        <Alert
+          sx={{ margin: '2rem', maxWidth: '500px', textAlign: 'center' }}
+          severity='info'
+        >
+          Finally assigned regions can no longer be managed. They will not be
+          displayed on the Region Management page anymore.
+        </Alert>
         <DialogActions>
           <Button onClick={onClose} variant='outlined'>
             Cancel
           </Button>
 
-          <ProgressButton onClick={onAssign} label='Assign' loading={working} />
+          <ProgressButton
+            onClick={() => onAssign(false)}
+            label='Provisional Assignment'
+            loading={working === 'Provisional'}
+          />
+          <ProgressButton
+            onClick={() => onAssign(true)}
+            label='Final Assignment'
+            loading={working === 'Final'}
+          />
         </DialogActions>
       </Dialog>
       {taskModalOpen && (

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import { CacheProvider, EmotionCache } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
+import { Analytics } from '@vercel/analytics/react';
 import { NextPage } from 'next';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
@@ -72,6 +73,7 @@ export default function MyApp(props: MyAppProps) {
           </NetworkProvider>
         </ToastProvider>
       </ThemeProvider>
+      <Analytics />
     </CacheProvider>
   );
 }

src/utils/functions.ts

@@ -169,7 +169,5 @@ export const rcBlockToParachainBlock = (
   blockNumber: number
 ): number => {
   // Coretime on Rococo has async backing and due to this it has a block time of 6 seconds.
-  return network == 'rococo'
-    ? blockNumber
-    : Math.floor(blockNumber / 2);
+  return network == 'rococo' ? blockNumber : Math.floor(blockNumber / 2);
 };