import { FunctionComponent , useContext } from "react" ; import BN from "bn.js" ; import { BalanceVisibleContext } from "../utils/contexts" ; import { Balance } from "@polkadot/types/interfaces" ; import { TableRow , TableCell } from "@material-ui/core" ; import { Column } from "../utils/types" ; import { AccountCard , BalanceValue , PopoverExtrinsic } from "." ; interface rowContent { withWhom : string ; extrinsic : string ; value : string | number ; status : string | number ; } interface Props { row : rowContent ; columns : Column [ ] ; unit ? : string ; showStatus ? : boolean ; } const HistoryTableRow = ( { columns , row , unit = "Unit" , showStatus = true , } ) => { const { balanceVisibility } = useContext ( BalanceVisibleContext ) ; return ( < TableRow hover key = { `transaction` } > { columns . map ( ( column ) => { const value = row [ column . id ] ; return ( < TableCell key = { `transaction-${ column . id }` } align = { column . align } > { column . id === "withWhom" && ( < AccountCard account = { { address : value . toString ( ) , name : "" } } / > ) } { column . id === "extrinsic" && value } { column . id === "value" && ( typeof value === "number" || typeof value === "string" ) && ( < BalanceValue isVisible = { balanceVisibility } value = { new BN ( value ) as Balance } unit = { unit } / > ) } { showStatus && column . id === "status" && ( < PopoverExtrinsic status = { row . status } />)} < /TableCell>); } ) } < /TableRow>); } ; export default HistoryTableRow ;