show ids of tasks (#224)

RegionX-Labs · Aug 17, 2024 · b4e41ea · b4e41ea
1 parent 0c9fc02
commit b4e41ea
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/components/Regions/Modals/TaskAssign/index.tsx b/src/components/Regions/Modals/TaskAssign/index.tsx
@@ -80,7 +80,7 @@ const TaskItem = ({ name, id, editable = false }: TaskItemProps) => {
           onClick={(e) => e.stopPropagation()}
         />
       ) : (
-        name
+        `${name} #${id}`
       )}
       {editable &&
         (editing ? (

diff --git a/src/components/Regions/RegionMetaCard/index.tsx b/src/components/Regions/RegionMetaCard/index.tsx
@@ -8,6 +8,7 @@ import {
   IconButton,
   Input,
   LinearProgress,
+  Link,
   Paper,
   Typography,
   useTheme,
@@ -18,8 +19,10 @@ import React, { useEffect, useState } from 'react';
 
 import { getRelativeTimeString, timesliceToTimestamp } from '@/utils/functions';
 
+import { SUSBCAN_RELAY_URL } from '@/consts';
 import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
 import { ApiState } from '@/contexts/apis/types';
+import { useNetwork } from '@/contexts/network';
 import { useTasks } from '@/contexts/tasks';
 import { POOLING_TASK_ID, RegionLocation, RegionMetadata } from '@/models';
 
@@ -88,6 +91,8 @@ const RegionCardInner = ({
   const [beginTimestamp, setBeginTimestamp] = useState(0);
   const [endTimestamp, setEndTimestamp] = useState(0);
 
+  const { network } = useNetwork();
+
   const {
     state: { api, apiState },
   } = useRelayApi();
@@ -251,9 +256,16 @@ const RegionCardInner = ({
       </div>
       <Divider orientation='vertical' flexItem />
       <Box sx={{ color: theme.palette.grey[200] }}>
-        <Typography variant='subtitle2'>
-          {`Task: ${getTask(taskId)}`}
-        </Typography>
+        <Link
+          sx={{ textDecoration: 'none' }}
+          rel='noopener noreferrer'
+          target='_blank'
+          href={`${SUSBCAN_RELAY_URL[network]}/parachain/${taskId}`}
+        >
+          <Typography variant='subtitle2'>
+            {`Task: ${getTask(taskId)} #${taskId}`}
+          </Typography>
+        </Link>
         <Box
           sx={{
             display: 'flex',