Skip to content

Commit

Permalink
minor changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@wainola
wainola committed Aug 30, 2023
1 parent e204540 commit b8eb0bd
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 261 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
"node": true
},
"extends": [
"standard"
"standard",
"@chainsafe"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
Expand Down
150 changes: 55 additions & 95 deletions src/components/ExplorerTable/ExplorerTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,8 @@
import React from "react";
import {
Table,
TableHead,
TableCell,
TableBody,
TableRow,
} from "@mui/material";
import clsx from "clsx";
import {
EvmBridgeConfig,
SharedConfigDomain,
Transfer,
} from "../../types";
import { Link } from "react-router-dom";
import React from "react"
import { Table, TableHead, TableCell, TableBody, TableRow } from "@mui/material"
import clsx from "clsx"
import { Link } from "react-router-dom"
import { EvmBridgeConfig, SharedConfigDomain, Transfer } from "../../types"
import {
getDisplayedStatuses,
shortenAddress,
Expand All @@ -24,81 +14,60 @@ import {
formatDistanceDate,
getFormatedFee,
formatConvertedAmount,
} from "../../utils/Helpers";
import { useStyles } from "./styles";
} from "../../utils/Helpers"
import { useStyles } from "./styles"

type ExplorerTable = {
active: boolean;
setActive: (state: boolean) => void;
chains: Array<EvmBridgeConfig>;
active: boolean
setActive: (state: boolean) => void
chains: Array<EvmBridgeConfig>
state: {
transfers: Transfer[];
loading: "none" | "loading" | "done";
error: undefined | string;
};
sharedConfig: SharedConfigDomain[] | [];
};

const ExplorerTable: React.FC<ExplorerTable> = ({
state,
sharedConfig,
}: ExplorerTable) => {
const { classes } = useStyles();

const renderTransferList = (transferData: Transfer[]) => {
transfers: Transfer[]
loading: "none" | "loading" | "done"
error: undefined | string
}
sharedConfig: SharedConfigDomain[] | []
}

const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: ExplorerTable) => {
const { classes } = useStyles()

const renderTransferList = (transferData: Transfer[]): JSX.Element[] => {
return transferData.map((transfer: Transfer) => {
const {
deposit,
status,
amount,
resource,
fromDomainId,
toDomainId,
id,
resourceID,
timestamp,
fee,
usdValue,
} = transfer;

let formatedFee = getFormatedFee(fee);

const fromDomainInfo = getDomainData(fromDomainId, sharedConfig);
const toDomainInfo = getDomainData(toDomainId, sharedConfig);

const fromDomainType = fromDomainInfo?.type;

const { type } = resource;
let txHash: string | undefined;
const { deposit, status, amount, resource, fromDomainId, toDomainId, id, resourceID, timestamp, fee, usdValue } = transfer

const formatedFee = getFormatedFee(fee)

const fromDomainInfo = getDomainData(fromDomainId, sharedConfig)
const toDomainInfo = getDomainData(toDomainId, sharedConfig)

const fromDomainType = fromDomainInfo?.type

const { type } = resource
let txHash: string | undefined

if (fromDomainType === "evm" && deposit) {
txHash = shortenAddress(deposit?.txHash!);
txHash = shortenAddress(deposit?.txHash)
} else {
txHash = deposit?.txHash;
txHash = deposit?.txHash
}

const fromDomainName = getNetworkNames(fromDomainInfo?.chainId!);
const toDomainName = getNetworkNames(toDomainInfo?.chainId!);
const fromDomainName = getNetworkNames(fromDomainInfo?.chainId!)
const toDomainName = getNetworkNames(toDomainInfo?.chainId!)

const dateFormated = formatDistanceDate(timestamp!);
const dateFormated = formatDistanceDate(timestamp!)

let formatedConvertedAmount;
let formatedConvertedAmount

if (usdValue) {
formatedConvertedAmount = formatConvertedAmount(usdValue);
if (usdValue !== null) {
formatedConvertedAmount = formatConvertedAmount(usdValue)
}

return (
<TableRow className={classes.row} key={transfer.id}>
<TableCell
className={clsx(classes.row, classes.dataRow, classes.cellRow)}
>
<TableCell className={clsx(classes.row, classes.dataRow, classes.cellRow)}>
{txHash !== undefined ? (
<Link
className={classes.hashAnchorLink}
to={`/transfer/${deposit?.txHash}`}
state={{ id: id }}
>
<Link className={classes.hashAnchorLink} to={`/transfer/${deposit?.txHash!}`} state={{ id: id }}>
{txHash}
</Link>
) : (
Expand All @@ -108,24 +77,21 @@ const ExplorerTable: React.FC<ExplorerTable> = ({
<TableCell className={clsx(classes.row, classes.dataRow)}>
<div className={classes.accountAddress}>
<span className={classes.statusPill}>
{renderStatusIcon(status, classes)}{" "}
{getDisplayedStatuses(status)}
{renderStatusIcon(status, classes)} {getDisplayedStatuses(status)}
</span>
</div>
</TableCell>
<TableCell className={clsx(classes.row, classes.dataRow)}>
<div style={{ width: "100%" }}>
<span style={{ display: "flex" }}>
{renderNetworkIcon(fromDomainInfo?.chainId!, classes)}{" "}
{fromDomainName}
{renderNetworkIcon(fromDomainInfo?.chainId!, classes)} {fromDomainName}
</span>
</div>
</TableCell>
<TableCell className={clsx(classes.row, classes.dataRow)}>
<div style={{ width: "100%" }}>
<span style={{ display: "flex" }}>
{renderNetworkIcon(toDomainInfo?.chainId!, classes)}{" "}
{toDomainName}
{renderNetworkIcon(toDomainInfo?.chainId!, classes)} {toDomainName}
</span>
</div>
</TableCell>
Expand All @@ -149,18 +115,16 @@ const ExplorerTable: React.FC<ExplorerTable> = ({
<span className={classes.amountInfo}>
<div className={classes.amountContainer}>
<span>
{amount}{" "}
{resourceID !== "" &&
getResourceInfo(resourceID, fromDomainInfo!)}
{amount} {resourceID !== "" && getResourceInfo(resourceID, fromDomainInfo!)}
</span>
{usdValue && <span>${formatedConvertedAmount}</span>}
{usdValue !== null && <span>{formatedConvertedAmount}</span>}
</div>
</span>
</TableCell>
</TableRow>
);
});
};
)
})
}

return (
<Table className={classes.rootTable}>
Expand All @@ -174,18 +138,14 @@ const ExplorerTable: React.FC<ExplorerTable> = ({
}}
>
<TableRow className={classes.row}>
<TableCell sx={{ borderTopLeftRadius: "12px !important" }}>
Source Tx/Extr Hash
</TableCell>
<TableCell sx={{ borderTopLeftRadius: "12px !important" }}>Source Tx/Extr Hash</TableCell>
<TableCell>Status</TableCell>
<TableCell>From</TableCell>
<TableCell>To</TableCell>
<TableCell>Type</TableCell>
<TableCell>Date</TableCell>
<TableCell>Fee</TableCell>
<TableCell sx={{ borderTopRightRadius: "12px !important" }}>
Value
</TableCell>
<TableCell sx={{ borderTopRightRadius: "12px !important" }}>Value</TableCell>
</TableRow>
</TableHead>
<TableBody>
Expand All @@ -204,7 +164,7 @@ const ExplorerTable: React.FC<ExplorerTable> = ({
)}
</TableBody>
</Table>
);
};
)
}

export default ExplorerTable;
export default ExplorerTable
Loading

0 comments on commit b8eb0bd

Please sign in to comment.