From 03298d2f1aaef945aa3de6d32e60957029da12f6 Mon Sep 17 00:00:00 2001
From: Michel Erokhov <mixaileroxov@gmail.com>
Date: Tue, 12 Nov 2024 15:52:11 +0100
Subject: [PATCH] feat(WorkerStatus): update worker status text (#117)

---
 src/components/WorkerStatus.tsx  |  2 +-
 src/pages/deal/MatchingTable.tsx | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/WorkerStatus.tsx b/src/components/WorkerStatus.tsx
index 0325e0a..bc67a1b 100644
--- a/src/components/WorkerStatus.tsx
+++ b/src/components/WorkerStatus.tsx
@@ -23,7 +23,7 @@ export const WorkerStatus: React.FC<WorkerStatusProps> = ({
   return (
     <Status color="grey200">
       <Text color="grey500" weight={800} size={10} uppercase>
-        Waiting...
+        Waiting registration
       </Text>
     </Status>
   )
diff --git a/src/pages/deal/MatchingTable.tsx b/src/pages/deal/MatchingTable.tsx
index 255d5e6..60968cc 100644
--- a/src/pages/deal/MatchingTable.tsx
+++ b/src/pages/deal/MatchingTable.tsx
@@ -19,6 +19,7 @@ import { useApiQuery } from '../../hooks'
 import { formatHexData } from '../../utils/helpers'
 
 const template = [
+  '30px',
   'minmax(10px, 1fr)',
   'minmax(10px, 1fr)',
   'minmax(10px, 1fr)',
@@ -45,6 +46,7 @@ export const MatchingTable: React.FC<MatchingTableProps> = ({ dealId }) => {
     <>
       <ScrollableTable>
         <TableHeader template={template}>
+          <TableColumnTitle>#</TableColumnTitle>
           <TableColumnTitle>Worker Id</TableColumnTitle>
           <TableColumnTitle>Provider Id</TableColumnTitle>
           <TableColumnTitle>Compute Unit</TableColumnTitle>
@@ -56,8 +58,8 @@ export const MatchingTable: React.FC<MatchingTableProps> = ({ dealId }) => {
           isLoading={isLoading}
           noDataText="No found any workers"
         >
-          {data?.data.map((worker) => (
-            <WorkerDetailRow key={worker.id} worker={worker} />
+          {data?.data.map((worker, index) => (
+            <WorkerDetailRow key={worker.id} worker={worker} index={index} />
           ))}
         </TableBody>
       </ScrollableTable>
@@ -66,29 +68,29 @@ export const MatchingTable: React.FC<MatchingTableProps> = ({ dealId }) => {
 }
 interface WorkerDetailRowProps {
   worker: WorkerDetail
+  index: number
 }
 
-const WorkerDetailRow: React.FC<WorkerDetailRowProps> = ({ worker }) => {
+const WorkerDetailRow: React.FC<WorkerDetailRowProps> = ({ worker, index }) => {
   return (
     <RowBlock>
       <RowHeader>
         <RowTrigger>
           <Row template={template}>
-            {/* # */}
+            <Cell>
+              <Text size={12}>{index + 1}</Text>
+            </Cell>
             <Cell>
               <Text size={12}>{formatHexData(worker.id, 10, 10)}</Text>
             </Cell>
-            {/* Provider ID */}
             <Cell>
               <A href={`/provider/${worker.providerId}`}>
                 {formatHexData(worker.providerId, 10, 10)}
               </A>
             </Cell>
-            {/* Compute Unit */}
             <Cell>
               <ShrinkText size={12}>{worker.cuCount}</ShrinkText>
             </Cell>
-            {/* Status */}
             <Cell>
               <WorkerStatus hasOffChainId={!!worker.offchainWorkerId} />
             </Cell>