Render deal status icon with link to staging zone if in staged status

components/DealStatusIcon.tsx

@@ -0,0 +1,70 @@
+import styles from '@components/PinStatusIcon.module.scss';
+import {
+  BalanceOutlined,
+  GppBadOutlined,
+  GppGoodOutlined,
+  LinkOutlined,
+  PhotoSizeSelectSmallOutlined,
+  RemoveModeratorOutlined,
+  SafetyCheckOutlined,
+  UploadOutlined,
+} from '@mui/icons-material';
+import { Link, Tooltip } from '@mui/material';
+
+function DealStatusIcon(props: any) {
+  if (props.dealStatus == 'preparing') {
+    const zoneHref = `/staging/${props.zone}`;
+    return (
+      <Link href={zoneHref}>
+        <Tooltip title={props.dealStatus} placement="left" arrow>
+          <PhotoSizeSelectSmallOutlined color="disabled" fontSize="small" className={styles.statusIcon} />
+        </Tooltip>
+      </Link>
+    );
+  } else if (props.dealStatus == 'proposing') {
+    return (
+      <Tooltip title={props.dealStatus} placement="left" arrow>
+        <BalanceOutlined color="action" fontSize="small" className={styles.statusIcon} />
+      </Tooltip>
+    );
+  } else if (props.dealStatus == 'transfering') {
+    return (
+      <Tooltip title={props.dealStatus} placement="left" arrow>
+        <UploadOutlined color="primary" fontSize="small" className={styles.statusIcon} />
+      </Tooltip>
+    );
+  } else if (props.dealStatus == 'on-chain') {
+    return (
+      <Tooltip title={props.dealStatus} placement="left" arrow>
+        <LinkOutlined color="secondary" fontSize="small" className={styles.statusIcon} />
+      </Tooltip>
+    );
+  } else if (props.dealStatus == 'sealed') {
+    return (
+      <Tooltip title={props.dealStatus} placement="left" arrow>
+        <GppGoodOutlined color="success" fontSize="small" className={styles.statusIcon} />
+      </Tooltip>
+    );
+  } else if (props.dealStatus == 'repairing') {
+    return (
+      <Tooltip title={props.dealStatus} placement="left" arrow>
+        <SafetyCheckOutlined color="warning" fontSize="small" className={styles.statusIcon} />
+      </Tooltip>
+    );
+  } else if (props.dealStatus == 'slashed') {
+    return (
+      <Tooltip title={props.dealStatus} placement="left" arrow>
+        <RemoveModeratorOutlined color="error" fontSize="small" className={styles.statusIcon} />
+      </Tooltip>
+    );
+  } else if (props.dealStatus == 'expired') {
+    return (
+      <Tooltip title={props.dealStatus} placement="left" arrow>
+        <GppBadOutlined color="disabled" fontSize="small" className={styles.statusIcon} />
+      </Tooltip>
+    );
+  }
+  return null;
+}
+
+export default DealStatusIcon;

components/FilesTable.tsx

@@ -2,6 +2,7 @@ import * as U from '@common/utilities';
 import tstyles from '@pages/files-table.module.scss';
 import React, { useMemo, useState } from 'react';
 import { useFilters, usePagination, useSortBy, useTable } from 'react-table';
+import DealStatusIcon from './DealStatusIcon';
 import PinStatusIcon from './PinStatusIcon';
 
 const FilesTable = ({ files }) => {
@@ -35,10 +36,13 @@ const FilesTable = ({ files }) => {
 
           const lk = cid != null ? gateway + cid : null;
           const pinStatus = data.pinningStatus;
-          return { name, lk, pinStatus };
+          const dealStatus = 'preparing'; // temp until actual field exists
+          const zone = data.aggregatedIn;
+          return { name, lk, pinStatus, dealStatus, zone };
         },
         Cell: ({ value }) => (
           <div style={{ display: 'block' }}>
+            <DealStatusIcon dealStatus={value.dealStatus} zone={value.zone} />
             <PinStatusIcon pinningStatus={value.pinStatus} />
             <a href={value.lk} style={{ overflowWrap: 'break-word' }} target="_blank" className={tstyles.cta}>
               {value.name}