mirror of
https://github.com/Chia-Network/chia-blockchain.git
synced 2024-09-11 18:58:59 +03:00
used internal table component for history
This commit is contained in:
parent
e60b322b9f
commit
5696a1745e
@ -160,10 +160,14 @@ export default function Table(props: Props) {
|
||||
|
||||
let tooltipValue;
|
||||
if (tooltip) {
|
||||
tooltipValue = typeof tooltip === 'function'
|
||||
if (tooltip === true) {
|
||||
tooltipValue = value;
|
||||
} else {
|
||||
tooltipValue = typeof tooltip === 'function'
|
||||
? tooltip(row)
|
||||
: // @ts-ignore
|
||||
row[tooltip];
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
92
electron-react/src/components/wallet/WalletHistory.tsx
Normal file
92
electron-react/src/components/wallet/WalletHistory.tsx
Normal file
@ -0,0 +1,92 @@
|
||||
import React from 'react';
|
||||
import { Trans } from '@lingui/macro';
|
||||
import { Typography } from '@material-ui/core';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Card, Table } from '@chia/core';
|
||||
import type { RootState } from '../../modules/rootReducer';
|
||||
import type { Row } from '../core/Table/Table';
|
||||
import { mojo_to_chia_string } from '../../util/chia';
|
||||
import { unix_to_short_date } from '../../util/utils';
|
||||
import TransactionType from '../../constants/TransactionType';
|
||||
|
||||
const cols = [
|
||||
{
|
||||
width: '120px',
|
||||
field(row: Row) {
|
||||
const isOutgoing = [
|
||||
TransactionType.OUTGOING,
|
||||
TransactionType.OUTGOING_TRADE,
|
||||
].includes(row.type);
|
||||
|
||||
return isOutgoing
|
||||
? <Trans id="TransactionTable.outgoing">Outgoing</Trans>
|
||||
: <Trans id="TransactionTable.incoming">Incoming</Trans>;
|
||||
},
|
||||
title: <Trans id="WalletHistory.type">Type</Trans>,
|
||||
},
|
||||
{
|
||||
minWidth: '150px',
|
||||
field: (row: Row) => row.to_address,
|
||||
tooltip: true,
|
||||
title: <Trans id="TransactionTable.to">To</Trans>,
|
||||
},
|
||||
{
|
||||
width: '180px',
|
||||
field: (row: Row) => unix_to_short_date(row.created_at_time),
|
||||
title: <Trans id="TransactionTable.date">Date</Trans>,
|
||||
},
|
||||
{
|
||||
minWidth: '180px',
|
||||
field: (row: Row) => {
|
||||
return row.confirmed
|
||||
? (
|
||||
<Trans id="TransactionTable.confirmedAtHeight">
|
||||
Confirmed at height {row.confirmed_at_height}
|
||||
</Trans>
|
||||
) : <Trans id="TransactionTable.pending">Pending</Trans>;
|
||||
},
|
||||
title: <Trans id="TransactionTable.status">Status</Trans>,
|
||||
},
|
||||
{
|
||||
minWidth: '130px',
|
||||
field: (row: Row) => mojo_to_chia_string(row.amount),
|
||||
title: <Trans id="TransactionTable.amount">Amount</Trans>,
|
||||
},
|
||||
{
|
||||
minWidth: '130px',
|
||||
field: (row: Row) => mojo_to_chia_string(row.fee_amount),
|
||||
title: <Trans id="TransactionTable.fee">Fee</Trans>,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
type Props = {
|
||||
walletId: number;
|
||||
};
|
||||
|
||||
export default function WalletHistory(props: Props) {
|
||||
const { walletId } = props;
|
||||
const transactions = useSelector(
|
||||
(state: RootState) => state.wallet_state.wallets[walletId].transactions,
|
||||
);
|
||||
|
||||
return (
|
||||
<Card
|
||||
title={<Trans id="WalletHistory.title">History</Trans>}
|
||||
>
|
||||
{transactions?.length ? (
|
||||
<Table
|
||||
cols={cols}
|
||||
rows={transactions}
|
||||
rowsPerPageOptions={[10, 25, 100]}
|
||||
rowsPerPage={10}
|
||||
pages
|
||||
/>
|
||||
) : (
|
||||
<Typography id="WalletHistory.noPreviousTransactions" variant="body2">
|
||||
No previous transactions
|
||||
</Typography>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
@ -14,11 +14,6 @@ import {
|
||||
Typography,
|
||||
Button,
|
||||
TextField,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from '@material-ui/core';
|
||||
import {
|
||||
ExpandMore as ExpandMoreIcon,
|
||||
@ -30,13 +25,11 @@ import {
|
||||
farm_block,
|
||||
} from '../../../modules/message';
|
||||
import { mojo_to_chia_string, chia_to_mojo } from '../../../util/chia';
|
||||
import { unix_to_short_date } from '../../../util/utils';
|
||||
import { openDialog } from '../../../modules/dialog';
|
||||
import { get_transaction_result } from '../../../util/transaction_result';
|
||||
import config from '../../../config/config';
|
||||
import type { RootState } from '../../../modules/rootReducer';
|
||||
import Transaction from '../../../types/Transaction';
|
||||
import TransactionType from '../../../constants/TransactionType';
|
||||
import WalletHistory from '../WalletHistory';
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
@ -602,133 +595,6 @@ function SendCard(props: SendCardProps) {
|
||||
);
|
||||
}
|
||||
|
||||
type TransactionTableProps = {
|
||||
wallet_id: number;
|
||||
};
|
||||
|
||||
function TransactionTable(props: TransactionTableProps) {
|
||||
const classes = useStyles();
|
||||
const id = props.wallet_id;
|
||||
const transactions = useSelector(
|
||||
(state: RootState) => state.wallet_state.wallets[id].transactions,
|
||||
);
|
||||
|
||||
if (transactions.length === 0) {
|
||||
return <div style={{ margin: '30px' }}>No previous transactions</div>;
|
||||
}
|
||||
|
||||
const incoming_string = (type: TransactionType) => {
|
||||
const isOutgoing = [
|
||||
TransactionType.OUTGOING,
|
||||
TransactionType.OUTGOING_TRADE,
|
||||
].includes(type);
|
||||
|
||||
return isOutgoing
|
||||
? <Trans id="TransactionTable.outgoing">Outgoing</Trans>
|
||||
: <Trans id="TransactionTable.incoming">Incoming</Trans>;
|
||||
};
|
||||
|
||||
const confirmed_to_string = (tx: Transaction) => {
|
||||
return tx.confirmed ? (
|
||||
<Trans id="TransactionTable.confirmedAtHeight">
|
||||
Confirmed at height {tx.confirmed_at_index}
|
||||
</Trans>
|
||||
) : (
|
||||
<Trans id="TransactionTable.pending">Pending</Trans>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper className={classes.table_root}>
|
||||
<Table stickyHeader className={classes.table}>
|
||||
<TableHead>
|
||||
<TableRow className={classes.row}>
|
||||
<TableCell className={classes.cell_short}>
|
||||
<Trans id="TransactionTable.type">Type</Trans>
|
||||
</TableCell>
|
||||
<TableCell className={classes.cell_short}>
|
||||
<Trans id="TransactionTable.to">To</Trans>
|
||||
</TableCell>
|
||||
<TableCell className={classes.cell_short}>
|
||||
<Trans id="TransactionTable.date">Date</Trans>
|
||||
</TableCell>
|
||||
<TableCell className={classes.cell_short}>
|
||||
<Trans id="TransactionTable.status">Status</Trans>
|
||||
</TableCell>
|
||||
<TableCell className={classes.cell_short}>
|
||||
<Trans id="TransactionTable.amount">Amount</Trans>
|
||||
</TableCell>
|
||||
<TableCell className={classes.cell_short}>
|
||||
<Trans id="TransactionTable.fee">Fee</Trans>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody className={classes.tableBody}>
|
||||
{transactions.map((tx) => (
|
||||
<TableRow
|
||||
className={classes.row}
|
||||
key={
|
||||
tx.to_address +
|
||||
tx.created_at_time +
|
||||
tx.amount +
|
||||
// @ts-ignore
|
||||
(tx.removals.length > 0 ? tx.removals[0].parent_coin_info : '')
|
||||
}
|
||||
>
|
||||
<TableCell className={classes.cell_short}>
|
||||
{incoming_string(tx.type)}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
style={{ maxWidth: '150px' }}
|
||||
className={classes.cell_short}
|
||||
>
|
||||
{tx.to_address}
|
||||
</TableCell>
|
||||
<TableCell className={classes.cell_short}>
|
||||
{unix_to_short_date(tx.created_at_time)}
|
||||
</TableCell>
|
||||
<TableCell className={classes.cell_short}>
|
||||
{confirmed_to_string(tx)}
|
||||
</TableCell>
|
||||
<TableCell className={classes.cell_short}>
|
||||
{mojo_to_chia_string(tx.amount)}
|
||||
</TableCell>
|
||||
<TableCell className={classes.cell_short}>
|
||||
{mojo_to_chia_string(tx.fee_amount)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
type HistoryCardProps = {
|
||||
wallet_id: number;
|
||||
};
|
||||
|
||||
function HistoryCard(props: HistoryCardProps) {
|
||||
const id = props.wallet_id;
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<Paper className={classes.paper}>
|
||||
<Grid container spacing={0}>
|
||||
<Grid item xs={12}>
|
||||
<div className={classes.cardTitle}>
|
||||
<Typography component="h6" variant="h6">
|
||||
<Trans id="HistoryCard.title">History</Trans>
|
||||
</Typography>
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TransactionTable wallet_id={id} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
type AddressCardProps = {
|
||||
wallet_id: number;
|
||||
};
|
||||
@ -822,7 +688,8 @@ export default function StandardWallet(props: StandardWalletProps) {
|
||||
<BalanceCard wallet_id={id} />
|
||||
<SendCard wallet_id={id} />
|
||||
<AddressCard wallet_id={id} />
|
||||
<HistoryCard wallet_id={id} />
|
||||
<br />
|
||||
<WalletHistory walletId={id} />
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user