diff --git a/apps/guard/app/_constants/index.ts b/apps/guard/app/_constants/index.ts new file mode 100644 index 00000000..5860d39c --- /dev/null +++ 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 index 00360959..914023cc 100644 --- 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 index 5ea9c60c..2788c911 100644 --- 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 index be83cc8c..b4286f05 100644 --- 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 = (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 ( <> - - Id - {row.id} - - - - From chain + + Tx Id + + + {row.lockTxId.slice(0, 8)} + - {row.fromChain} - - To chain - {row.toChain} + + Token Id + {row.lockTokenId.slice(0, 8)} {expand && ( <> + + From Address + {row.fromAddress.slice(0, 8)} + + + To Address + {row.toAddress.slice(0, 8)} + + + Height + {row.lockHeight} + Amount {row.amount} - Height - {renderValue(row.height)} + Bridge Fee + {row.bridgeFee} - Network fee - {renderValue(row.networkFee)} + Network Fee + {row.networkFee} - Bridge fee - {renderValue(row.bridgeFee)} + Event Id + {row.eventId.slice(0, 8)} )} @@ -143,15 +174,30 @@ export const MobileRow: FC = (props) => { export const TabletRow: FC = (props) => { const { isLoading, ...row } = props; + + const baseTxUrl = + row.fromChain === 'ergo' ? ERGO_BASE_TX_URL : CARDANO_BASE_TX_URL; + return ( - {row.id} - {row.fromChain} - {row.toChain} - {row.amount} - {renderValue(row.height)} - {renderValue(row.networkFee)} - {renderValue(row.bridgeFee)} + + + {row.lockTxId.slice(0, 8)} + + + {row.lockTokenId.slice(0, 8)} + {row.fromAddress.slice(0, 8)} + {row.toAddress.slice(0, 8)} + {row.lockHeight} + {row.amount} + {row.bridgeFee} + {row.networkFee} + {row.eventId.slice(0, 8)} ); };