Skip to content

Commit

Permalink
refactor(watcher-app): refactor events table columns
Browse files Browse the repository at this point in the history
  • Loading branch information
@mkermani144
mkermani144 committed Sep 26, 2023
1 parent d983ac1 commit a5cb60a
Showing 1 changed file with 131 additions and 26 deletions.
157 changes: 131 additions & 26 deletions apps/watcher/app/events/TableRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -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,
},
Expand All @@ -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 } : {}}>
Expand All @@ -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>
);
};

0 comments on commit a5cb60a

Please sign in to comment.