Merge branch 'refactor/guard-revenue-table' into 'dev'

refactor(guard-app): update revenue table columns See merge request ergo/rosen-bridge/ui!73
rosen-bridge · Oct 8, 2023 · 603b3ff · 603b3ff
2 parents 49e579d + d506d8c
commit 603b3ff
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 37 deletions.
diff --git a/apps/guard/app/_constants/index.ts b/apps/guard/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/guard/app/_mock/mockedData.ts b/apps/guard/app/_mock/mockedData.ts
@@ -263,7 +263,8 @@ const generateRevenueRecords = (numberOfRecords: number) => {
     amount: '0.1',
     bridgeFee: '0.002',
     networkFee: '0.003',
-    tokenId: '15baefff2eb9e45b04f8b4e6265e866773db6db5f9e8e30ce2cae1aa263b90f7',
+    lockTokenId:
+      '15baefff2eb9e45b04f8b4e6265e866773db6db5f9e8e30ce2cae1aa263b90f7',
     lockTxId:
       '15baefff2eb9e45b04f8b4e6265e8663773db6db5f9e8e30ce2cae1aa263b90f8',
     height: 100,

diff --git a/apps/guard/app/_types/api.ts b/apps/guard/app/_types/api.ts
@@ -50,7 +50,7 @@ export interface Revenue {
   amount: string;
   bridgeFee: string;
   networkFee: string;
-  tokenId: string;
+  lockTokenId: string;
   lockTxId: string;
   height: number;
   timestamp: number;

diff --git a/apps/guard/app/revenues/TableRow.tsx b/apps/guard/app/revenues/TableRow.tsx
@@ -1,9 +1,16 @@
 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 { CARDANO_BASE_TX_URL, ERGO_BASE_TX_URL } from '@/_constants';
+
 import { Revenue } from '@/_types/api';
 
 interface RowProps extends Revenue {
@@ -27,28 +34,27 @@ export const mobileHeader = [
 
 export const tabletHeader = [
   {
-    title: 'ID',
+    title: 'Tx Id',
     cellProps: {
-      width: 50,
+      width: 150,
     },
   },
   {
-    title: 'From Chain',
+    title: 'Token Id',
     cellProps: {
-      width: 250,
+      width: 150,
     },
   },
   {
-    title: 'To Chain',
+    title: 'From Address',
     cellProps: {
       width: 150,
     },
   },
   {
-    title: 'Amount',
+    title: 'To Address',
     cellProps: {
       width: 150,
-      align: 'right' as const,
     },
   },
   {
@@ -58,13 +64,25 @@ export const tabletHeader = [
     },
   },
   {
-    title: 'Network fee',
+    title: 'Amount',
+    cellProps: {
+      width: 150,
+    },
+  },
+  {
+    title: 'Bridge Fee',
+    cellProps: {
+      width: 150,
+    },
+  },
+  {
+    title: 'Network Fee',
     cellProps: {
       width: 150,
     },
   },
   {
-    title: 'Bridge fee',
+    title: 'Event Id',
     cellProps: {
       width: 150,
     },
@@ -81,46 +99,59 @@ export const MobileRow: FC<RowProps> = (props) => {
 
   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.id}</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.lockTxId}`} target="_blank">
+            {row.lockTxId.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.lockTokenId.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.lockHeight}</EnhancedTableCell>
+          </TableRow>
           <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
             <EnhancedTableCell>Amount</EnhancedTableCell>
             <EnhancedTableCell>{row.amount}</EnhancedTableCell>
           </TableRow>
           <TableRow sx={rowStyles}>
-            <EnhancedTableCell>Height</EnhancedTableCell>
-            <EnhancedTableCell>{renderValue(row.height)}</EnhancedTableCell>
+            <EnhancedTableCell>Bridge Fee</EnhancedTableCell>
+            <EnhancedTableCell>{row.bridgeFee}</EnhancedTableCell>
           </TableRow>
           <TableRow sx={rowStyles}>
-            <EnhancedTableCell>Network fee</EnhancedTableCell>
-            <EnhancedTableCell>{renderValue(row.networkFee)}</EnhancedTableCell>
+            <EnhancedTableCell>Network Fee</EnhancedTableCell>
+            <EnhancedTableCell>{row.networkFee}</EnhancedTableCell>
           </TableRow>
           <TableRow sx={rowStyles}>
-            <EnhancedTableCell>Bridge fee</EnhancedTableCell>
-            <EnhancedTableCell>{renderValue(row.bridgeFee)}</EnhancedTableCell>
+            <EnhancedTableCell>Event Id</EnhancedTableCell>
+            <EnhancedTableCell>{row.eventId.slice(0, 8)}</EnhancedTableCell>
           </TableRow>
         </>
       )}
@@ -143,15 +174,30 @@ 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.id}</EnhancedTableCell>
-      <EnhancedTableCell>{row.fromChain}</EnhancedTableCell>
-      <EnhancedTableCell>{row.toChain}</EnhancedTableCell>
-      <EnhancedTableCell align="right">{row.amount}</EnhancedTableCell>
-      <EnhancedTableCell>{renderValue(row.height)}</EnhancedTableCell>
-      <EnhancedTableCell>{renderValue(row.networkFee)}</EnhancedTableCell>
-      <EnhancedTableCell>{renderValue(row.bridgeFee)}</EnhancedTableCell>
+      <EnhancedTableCell>
+        <Link
+          href={`${baseTxUrl}${row.lockTxId}`}
+          target="_blank"
+          color="textPrimary"
+          underline="hover"
+        >
+          {row.lockTxId.slice(0, 8)}
+        </Link>
+      </EnhancedTableCell>
+      <EnhancedTableCell>{row.lockTokenId.slice(0, 8)}</EnhancedTableCell>
+      <EnhancedTableCell>{row.fromAddress.slice(0, 8)}</EnhancedTableCell>
+      <EnhancedTableCell>{row.toAddress.slice(0, 8)}</EnhancedTableCell>
+      <EnhancedTableCell>{row.lockHeight}</EnhancedTableCell>
+      <EnhancedTableCell>{row.amount}</EnhancedTableCell>
+      <EnhancedTableCell>{row.bridgeFee}</EnhancedTableCell>
+      <EnhancedTableCell>{row.networkFee}</EnhancedTableCell>
+      <EnhancedTableCell>{row.eventId.slice(0, 8)}</EnhancedTableCell>
     </TableRow>
   );
 };