From a5cb60a8802c501124224c85ba83a1371bd15eea Mon Sep 17 00:00:00 2001
From: Mohammad Kermani <mkermani144@gmail.com>
Date: Tue, 26 Sep 2023 12:15:43 +0000
Subject: [PATCH] refactor(watcher-app): refactor events table columns

---
 apps/watcher/app/events/TableRow.tsx | 157 ++++++++++++++++++++++-----
 1 file changed, 131 insertions(+), 26 deletions(-)

diff --git a/apps/watcher/app/events/TableRow.tsx b/apps/watcher/app/events/TableRow.tsx
index a964e8f3..d9e6ad1b 100644
--- a/apps/watcher/app/events/TableRow.tsx
+++ b/apps/watcher/app/events/TableRow.tsx
@@ -1,11 +1,18 @@
 import { useState, FC, useMemo } from 'react';
 
-import { Button, EnhancedTableCell, TableRow } from '@rosen-bridge/ui-kit';
+import {
+  Button,
+  EnhancedTableCell,
+  Link,
+  TableRow,
+} from '@rosen-bridge/ui-kit';
 
 import { AngleDown, AngleUp } from '@rosen-bridge/icons';
 
 import { Event } from '@rosen-ui/types';
 
+import { CARDANO_BASE_TX_URL, ERGO_BASE_TX_URL } from '@/_constants';
+
 interface RowProps extends Event {
   isLoading?: boolean;
 }
@@ -27,19 +34,31 @@ export const mobileHeader = [
 
 export const tabletHeader = [
   {
-    title: 'ID',
+    title: 'Tx Id',
+    cellProps: {
+      width: 150,
+    },
+  },
+  {
+    title: 'Token Id',
+    cellProps: {
+      width: 150,
+    },
+  },
+  {
+    title: 'From Address',
     cellProps: {
       width: 150,
     },
   },
   {
-    title: 'From',
+    title: 'To Address',
     cellProps: {
-      width: 250,
+      width: 150,
     },
   },
   {
-    title: 'To',
+    title: 'Height',
     cellProps: {
       width: 150,
     },
@@ -48,50 +67,112 @@ export const tabletHeader = [
     title: 'Amount',
     cellProps: {
       width: 150,
-      align: 'right' as const,
+    },
+  },
+  {
+    title: 'Bridge Fee',
+    cellProps: {
+      width: 150,
+    },
+  },
+  {
+    title: 'Network Fee',
+    cellProps: {
+      width: 150,
+    },
+  },
+  {
+    title: 'Event Id',
+    cellProps: {
+      width: 150,
+    },
+  },
+  {
+    title: 'Reports',
+    cellProps: {
+      width: 150,
+    },
+  },
+  {
+    title: 'Status',
+    cellProps: {
+      width: 150,
     },
   },
 ];
 
-const renderValue = (value?: string | number | undefined) => {
-  return value || '-';
-};
-
 export const MobileRow: FC<RowProps> = (props) => {
   const { isLoading, ...row } = props;
   const [expand, setExpand] = useState(false);
 
   const rowStyles = useMemo(
     () => (isLoading ? { opacity: 0.3 } : {}),
-    [isLoading]
+    [isLoading],
   );
 
   const toggleExpand = () => {
     setExpand((prevState) => !prevState);
   };
 
+  const baseTxUrl =
+    row.fromChain === 'ergo' ? ERGO_BASE_TX_URL : CARDANO_BASE_TX_URL;
+
   return (
     <>
-      <TableRow className="divider" sx={rowStyles}>
-        <EnhancedTableCell>Id</EnhancedTableCell>
-        <EnhancedTableCell>{row.eventId}</EnhancedTableCell>
-      </TableRow>
-      <TableRow sx={rowStyles}>
-        <EnhancedTableCell tooltipTitle={row.fromChain}>
-          From chain
+      <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
+        <EnhancedTableCell>Tx Id</EnhancedTableCell>
+        <EnhancedTableCell>
+          <Link href={`${baseTxUrl}${row.sourceTxId}`} target="_blank">
+            {row.sourceTxId.slice(0, 8)}
+          </Link>
         </EnhancedTableCell>
-        <EnhancedTableCell>{row.fromChain}</EnhancedTableCell>
       </TableRow>
-      <TableRow sx={rowStyles}>
-        <EnhancedTableCell>To chain</EnhancedTableCell>
-        <EnhancedTableCell>{row.toChain}</EnhancedTableCell>
+      <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
+        <EnhancedTableCell>Token Id</EnhancedTableCell>
+        <EnhancedTableCell>
+          {row.sourceChainTokenId.slice(0, 8)}
+        </EnhancedTableCell>
       </TableRow>
       {expand && (
         <>
+          <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
+            <EnhancedTableCell>From Address</EnhancedTableCell>
+            <EnhancedTableCell>{row.fromAddress.slice(0, 8)}</EnhancedTableCell>
+          </TableRow>
+          <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
+            <EnhancedTableCell>To Address</EnhancedTableCell>
+            <EnhancedTableCell>{row.toAddress.slice(0, 8)}</EnhancedTableCell>
+          </TableRow>
+          <TableRow sx={rowStyles}>
+            <EnhancedTableCell>Height</EnhancedTableCell>
+            <EnhancedTableCell>{row.height}</EnhancedTableCell>
+          </TableRow>
           <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
             <EnhancedTableCell>Amount</EnhancedTableCell>
             <EnhancedTableCell>{row.amount}</EnhancedTableCell>
           </TableRow>
+          <TableRow sx={rowStyles}>
+            <EnhancedTableCell>Bridge Fee</EnhancedTableCell>
+            <EnhancedTableCell>{row.bridgeFee}</EnhancedTableCell>
+          </TableRow>
+          <TableRow sx={rowStyles}>
+            <EnhancedTableCell>Network Fee</EnhancedTableCell>
+            <EnhancedTableCell>{row.networkFee}</EnhancedTableCell>
+          </TableRow>
+          <TableRow sx={rowStyles}>
+            <EnhancedTableCell>Event Id</EnhancedTableCell>
+            <EnhancedTableCell>{row.eventId.slice(0, 8)}</EnhancedTableCell>
+          </TableRow>
+          <TableRow sx={rowStyles}>
+            <EnhancedTableCell>Reports</EnhancedTableCell>
+            <EnhancedTableCell>{row.WIDs.split(',').length}</EnhancedTableCell>
+          </TableRow>
+          <TableRow sx={rowStyles}>
+            <EnhancedTableCell>Status</EnhancedTableCell>
+            <EnhancedTableCell>
+              {row.spendBlock ? 'Completed' : 'Incomplete'}
+            </EnhancedTableCell>
+          </TableRow>
         </>
       )}
       <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
@@ -113,12 +194,36 @@ export const MobileRow: FC<RowProps> = (props) => {
 
 export const TabletRow: FC<RowProps> = (props) => {
   const { isLoading, ...row } = props;
+
+  const baseTxUrl =
+    row.fromChain === 'ergo' ? ERGO_BASE_TX_URL : CARDANO_BASE_TX_URL;
+
   return (
     <TableRow className="divider" sx={isLoading ? { opacity: 0.3 } : {}}>
-      <EnhancedTableCell>{row.eventId}</EnhancedTableCell>
-      <EnhancedTableCell>{row.fromChain}</EnhancedTableCell>
-      <EnhancedTableCell>{row.toChain}</EnhancedTableCell>
-      <EnhancedTableCell align="right">{row.amount}</EnhancedTableCell>
+      <EnhancedTableCell>
+        <Link
+          href={`${baseTxUrl}${row.sourceTxId}`}
+          target="_blank"
+          color="textPrimary"
+          underline="hover"
+        >
+          {row.sourceTxId.slice(0, 8)}
+        </Link>
+      </EnhancedTableCell>
+      <EnhancedTableCell>
+        {row.sourceChainTokenId.slice(0, 8)}
+      </EnhancedTableCell>
+      <EnhancedTableCell>{row.fromAddress.slice(0, 8)}</EnhancedTableCell>
+      <EnhancedTableCell>{row.toAddress.slice(0, 8)}</EnhancedTableCell>
+      <EnhancedTableCell>{row.height}</EnhancedTableCell>
+      <EnhancedTableCell>{row.amount}</EnhancedTableCell>
+      <EnhancedTableCell>{row.bridgeFee}</EnhancedTableCell>
+      <EnhancedTableCell>{row.networkFee}</EnhancedTableCell>
+      <EnhancedTableCell>{row.eventId.slice(0, 8)}</EnhancedTableCell>
+      <EnhancedTableCell>{row.WIDs.split(',').length}</EnhancedTableCell>
+      <EnhancedTableCell>
+        {row.spendBlock ? 'Completed' : 'Incomplete'}
+      </EnhancedTableCell>
     </TableRow>
   );
 };