Merge branch 'fix/table-columns' into 'dev'

Fix/table columns Closes #68 See merge request ergo/rosen-bridge/ui!68
rosen-bridge · Sep 26, 2023 · acf6ae4 · acf6ae4
2 parents 7343839 + 47e0edf
commit acf6ae4
Show file tree

Hide file tree

Showing 6 changed files with 286 additions and 126 deletions.
diff --git a/apps/watcher/app/_constants/index.ts b/apps/watcher/app/_constants/index.ts
@@ -0,0 +1,3 @@
+export const CARDANO_BASE_TX_URL = 'https://cardanoscan.io/transaction/';
+export const ERGO_BASE_TX_URL =
+  'https://explorer.ergoplatform.com/transactions/';
diff --git a/apps/watcher/app/_mock/mockedData.ts b/apps/watcher/app/_mock/mockedData.ts
@@ -269,6 +269,22 @@ const generateRevenueRecords = (numberOfRecords: number) => {
     height: 100,
     timestamp: Date.now(),
     status: 'Done',
+    revenues: [
+      {
+        tokenId:
+          '6c1526b2a5ef010edb622719d9d7fbde8437a39543547c3effbe72ad33504cf1',
+        amount: 1000,
+        name: 'fakeRSN',
+        decimals: 0,
+      },
+      {
+        tokenId:
+          '6c1526b2a5ef010edb622719d9d7fbde8437a39543547c3effbe72ad33504cf2',
+        amount: 100,
+        name: 'awesome token',
+        decimals: 2,
+      },
+    ],
   }));
 };
 

diff --git a/apps/watcher/app/_types/api.ts b/apps/watcher/app/_types/api.ts
@@ -86,6 +86,7 @@ export interface Revenue {
   height: number;
   timestamp: number;
   status: string;
+  revenues: TokenInfo[];
 }
 
 export type ApiRevenueResponse = Paginated<Revenue>;

diff --git 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>
   );
 };