79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { useNavigate } from "react-router";
|
|
import type { Tokens } from "../../api/client";
|
|
import {
|
|
Button,
|
|
Grid,
|
|
Paper,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Typography,
|
|
} from "@mui/material";
|
|
|
|
export const TokensSummary = (props: { tokens: Tokens }) => {
|
|
const { tokens } = props;
|
|
const { purchased, consumed, used, available } = tokens;
|
|
const navigate = useNavigate();
|
|
return (
|
|
<Paper
|
|
variant="outlined"
|
|
sx={{
|
|
p: 3,
|
|
bgcolor: "aliceblue",
|
|
borderRadius: 4,
|
|
}}
|
|
>
|
|
<Grid container direction="column" spacing={3} alignItems="center">
|
|
<Typography variant="h6">Your tokens summary</Typography>
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell align="center" sx={{ fontWeight: "bold" }}>
|
|
Purchased
|
|
</TableCell>
|
|
<TableCell align="center" sx={{ fontWeight: "bold" }}>
|
|
Consumed
|
|
</TableCell>
|
|
<TableCell align="center" sx={{ fontWeight: "bold" }}>
|
|
Allocated
|
|
</TableCell>
|
|
<TableCell align="center" sx={{ fontWeight: "bold" }}>
|
|
Available
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell align="center">{purchased}</TableCell>
|
|
<TableCell align="center">{consumed}</TableCell>
|
|
<TableCell align="center">{used}</TableCell>
|
|
<TableCell align="center">{available}</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
sx={{ width: "100%" }}
|
|
onClick={() => navigate("/buy")}
|
|
>
|
|
Buy tokens
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
sx={{ width: "100%" }}
|
|
onClick={() => navigate("/invoices")}
|
|
>
|
|
See all purchases
|
|
</Button>
|
|
</Grid>
|
|
</Paper>
|
|
);
|
|
};
|