updated readme and refined task list and task upload ui

.vscode/settings.json

@@ -34,5 +34,8 @@
   "eslint.execArgv": null,
   "[typescript]": {
     "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
   }
 }

README.md

@@ -43,9 +43,7 @@ npm run package
 
 Note:
 - In Windows environments, the packaged application is output as an .exe file within the /release/build directory. It is important to highlight that, in the absence of code signing, the application may not execute as intended on distribution due to Windows security protocols.
-- In Linux, the packaged app is output as an AppImage. First, grant execution permissions to the AppImage file
-  ```bash
-  chmod +x MECAnywhere-4.6.0.AppImage
+- In Linux, the packaged app is output as an AppImage. 
   ```
   Then, install FUSE to enable AppImage support.:
   ```bash
@@ -214,6 +212,5 @@ This directory simple handles the external api calls.
 
 
 ## Other notes
-- When developing in linux, sometimes closing the app doesn't completely shut down the electron processes, thus requiring one to manually kill the processes.
 - Use electron-store for persistent storage, redux for global state management, and React's useState() hook for component-level state.
 - Under `webpack.config.base.ts`, there is an alias of react pointing to `./src/node_modules/react'`. This is because the *@metamask/sdk* introduces another instance of React, causing conflicts. The alias ensures the project uses only one instance of React. 

src/renderer/components/navigation/rightDrawer/KeyExportPopover.tsx

@@ -91,16 +91,16 @@ const KeyExportPopover: React.FC<KeyExportPopoverProps> = ({
               .trim()
               .split(' ')
               .map((word: string) => (
-                <Typography key={word} variant="body1" mr="1rem">
+                <Typography key={word}  color="primary.dark" variant="body1" mr="1rem">
                   {word}
                 </Typography>
               ))
           ) : (
-            <Typography variant="body1">Click to reveal</Typography>
+            <Typography variant="body1" color="primary.dark">Click to reveal</Typography>
           )}
           {!reveal && (
             <IconButton size="small" onClick={handleRevealClick}>
-              <VisibilityIcon fontSize="small" />
+              <VisibilityIcon fontSize="small" sx={{color:"primary.dark"}}/>
             </IconButton>
           )}
         </Box>

src/renderer/components/tasks/CardDetail.tsx

@@ -1,4 +1,6 @@
 import { CardContent, Grid, Divider, Typography  } from '@mui/material';
+import React from 'react';
+import { Task } from 'renderer/utils/dataTypes';
 
 interface LabelWithValueProps {
   label: string;
@@ -13,51 +15,43 @@ const LabelWithValue: React.FC<LabelWithValueProps> = ({ label, value }) => {
   );
 };
 
-const CardDetail = ({ task, isTested }) => {
+interface CardDetailProps {
+  task: Task;
+  isTested: boolean;
+}
+
+const CardDetail: React.FC<CardDetailProps> = ({ task, isTested }) => {
   return (
     <CardContent>
       <Typography variant="h4" margin="0 0 0.5rem 0">
         {task.taskName}
       </Typography>
-      <Grid container spacing={2}>
-        <Grid item xs={12} md={3}>
-          <LabelWithValue label="Docker File CID" value={task.dockerFileCID.slice(0, 10)} />
-          <LabelWithValue label="Object File CID" value={task.objectFileCID.slice(0, 10)} />
+        <Grid item xs={12} md={12} marginBottom="0.5rem">
+          <LabelWithValue label="CID" value={task.cid} />
         </Grid>
-        <Grid item xs={12} md={3}>
+      <Grid container>
+        <Grid item xs={12} md={4}>
           <LabelWithValue
-            label="Input Size Limit"
-            value={task.inputSizeLimit}
+            label="I/O Size"
+            value={task.size_io.toString()}
           />
           <LabelWithValue
-            label="Output Size Limit"
-            value={task.outputSizeLimit}
+            label="Folder Size"
+            value={task.size_folder.toString()}
           />
-          <LabelWithValue label="Block Time Out" value={task.blockTimeOut} />
         </Grid>
-        <Grid item xs={12} md={2.5}>
-          <LabelWithValue label="CPU Gas" value={task.cpuGas} />
-          <LabelWithValue label="GPU Gas" value={task.gpuGas} />
-          <LabelWithValue label="Fee" value={task.fee} />
+        <Grid item xs={12} md={4}>
+          <LabelWithValue label="Computing Type" value={task.computing_type} />
+          <LabelWithValue label="Fee" value={task.fee.toString()} />
         </Grid>
+
+      </Grid>
         {isTested && (
           <>
-            <Divider orientation="vertical" flexItem />
-            <Typography variant="subtitle1" padding="0.5rem 0 0 0.5rem">File tested</Typography >
-            {/* <Grid item xs={12} md={3}>
-              <LabelWithValue
-                label="Tested CPU Gas"
-                value={testData.TestedCpuGas}
-              />
-              <LabelWithValue
-                label="Tested GPU Gas"
-                value={testData.TestedGpuGas}
-              />
-              <LabelWithValue label="Tested Fee" value={testData.TestedFee} />
-            </Grid> */}
+            {/* <Divider orientation="vertical" flexItem /> */}
+            <Typography variant="subtitle2" sx={{fontWeight: 600, color: "primary.main", paddingTop: "0.5rem"}}>File tested, no issue.</Typography >
           </>
         )}
-      </Grid>
     </CardContent>
   );
 };

src/renderer/components/tasks/CustomButton.tsx

@@ -9,6 +9,8 @@ interface CustomButtonProps {
   backgroundColor: string;
   isLoading?: boolean;
   showBlockIcon?: boolean;
+  fullWidth?: boolean;
+  fontSize? : string;
 }
 
 const CustomButton: React.FC<CustomButtonProps> = ({
@@ -18,21 +20,23 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   backgroundColor,
   isLoading = false,
   showBlockIcon = false,
+  fullWidth = true,
+  fontSize = '1rem',
 }) => {
   return (
     <Button
       onClick={onClick}
       sx={{
         color,
         backgroundColor,
-        width: '14rem',
         margin: '0 0 0.3rem 0',
         position: 'relative',
         '&:disabled': {
           backgroundColor,
           color: 'grey',
         },
         fontWeight: 600,
+        fontSize, 
         opacity: isLoading ? 0.7 : 1,
         ...(showBlockIcon
           ? {
@@ -45,6 +49,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
       }}
       disabled={showBlockIcon}
       startIcon={showBlockIcon ? <BlockIcon /> : null}
+      fullWidth={fullWidth}
     >
       <Box
         sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
@@ -54,7 +59,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
             size={24}
             sx={{
               color,
-              marginRight: '8px',
+              marginRight: '4px',
             }}
           />
         )}

src/renderer/components/tasks/SortWidget.tsx

@@ -3,11 +3,10 @@ import React from 'react';
 
 const sortOptions = [
   { value: 'taskName', label: 'Task Name' },
-  { value: 'inputSizeLimit', label: 'Input Size Limit' },
-  { value: 'outputSizeLimit', label: 'Output Size Limit' },
-  { value: 'cpuGas', label: 'CPU Gas' },
-  { value: 'gpuGas', label: 'GPU Gas' },
-  { value: 'blockTimeOut', label: 'Block Timeout' },
+  { value: 'cid', label: 'CID' },
+  { value: 'size_folder', label: 'Folder Size' },
+  { value: 'size_io', label: 'I/O Size' },
+  { value: 'computing_type', label: 'Computing Type' },
   { value: 'fee', label: 'Fee' },
 ];
 
@@ -29,14 +28,14 @@ const CustomFormControl: React.FC<CustomFormControlProps> = ({
   handleSortByChange,
   options,
 }) => {
-  console.log('sortBy', sortBy);
   return (
     <FormControl
       variant="outlined"
       sx={{
         minWidth: '9rem',
         '& .MuiSelect-nativeInput': { display: 'none' },
-      }}
+        margin: { xs: '0 0 2rem 0', md: "0" }
+            }}
     >
       <InputLabel
         shrink