|
@@ -0,0 +1,136 @@
|
|
|
+import React, { useEffect, useState } from "react";
|
|
|
+import { IState } from "../../types";
|
|
|
+import SubBlock from "../ui/SubBlock";
|
|
|
+
|
|
|
+import Table from "@material-ui/core/Table";
|
|
|
+import TableBody from "@material-ui/core/TableBody";
|
|
|
+import TableCell from "@material-ui/core/TableCell";
|
|
|
+import TableContainer from "@material-ui/core/TableContainer";
|
|
|
+import TableHead from "@material-ui/core/TableHead";
|
|
|
+import TableRow from "@material-ui/core/TableRow";
|
|
|
+import TableFooter from '@material-ui/core/TableFooter';
|
|
|
+import TablePagination from '@material-ui/core/TablePagination';
|
|
|
+import TablePaginationActions from '../ui/TablePaginationActions';
|
|
|
+import { Button, makeStyles, Typography } from "@material-ui/core";
|
|
|
+import BuyOrderDialog from './components/BuyOrderDialog';
|
|
|
+
|
|
|
+export interface ISeller {
|
|
|
+ seller: string,
|
|
|
+ price: number,
|
|
|
+ amount: number,
|
|
|
+ address?: string
|
|
|
+}
|
|
|
+
|
|
|
+function Seller (props: { seller: ISeller, onHandleBuy: any }) {
|
|
|
+ const { seller, onHandleBuy } = props
|
|
|
+
|
|
|
+ return (
|
|
|
+ <TableRow key={seller.seller}>
|
|
|
+ <TableCell>{seller.seller}</TableCell>
|
|
|
+ <TableCell><i>{Number.isNaN(seller.price) ? "-" : seller.price}</i></TableCell>
|
|
|
+ <TableCell><i>{seller.amount}</i></TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Button variant="outlined" onClick={() => onHandleBuy(seller)}>Buy</Button>
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const useStyles = makeStyles({
|
|
|
+ table: {
|
|
|
+ },
|
|
|
+ desc: { flexGrow: 1, backgroundColor: "#4038FF", boxShadow: "none", paddingLeft:"16px" },
|
|
|
+})
|
|
|
+
|
|
|
+const sellerGroups: ISeller[] = [
|
|
|
+ {seller: "mkblockchaindev", price: 0.06, amount: 100000},
|
|
|
+ {seller: "xxxxxxxx", price: 0.05623, amount: 40000},
|
|
|
+ {seller: "yyyyyyy", price: 0.05975, amount: 40000},
|
|
|
+ {seller: "aaaaaa", price: 0.05975, amount: 40000},
|
|
|
+ {seller: "bbbbb", price: 0.05975, amount: 40000},
|
|
|
+ {seller: "zzzzz", price: 0.05623, amount: 40000},
|
|
|
+]
|
|
|
+
|
|
|
+const SellerList = (props: IState) => {
|
|
|
+ const {} = props
|
|
|
+
|
|
|
+ const classes = useStyles()
|
|
|
+ const [page, setPage] = React.useState(0);
|
|
|
+ const [rowsPerPage, setRowsPerPage] = React.useState(4);
|
|
|
+ const [isShowBuy, setIsShowBuy] = useState(false);
|
|
|
+ const [selectedSeller, setSelectedSeller] = useState<ISeller | undefined>();
|
|
|
+
|
|
|
+ const onHandleBuy = (seller: ISeller) => {
|
|
|
+ console.log(`onhandleBuy: `, seller)
|
|
|
+ setIsShowBuy(true)
|
|
|
+ setSelectedSeller(seller)
|
|
|
+ }
|
|
|
+
|
|
|
+ const onHandleClose = () => {
|
|
|
+ setIsShowBuy(false)
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleChangePage = (event: unknown, newPage: number) => {
|
|
|
+ setPage(newPage);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+ setRowsPerPage(parseInt(event.target.value, 10));
|
|
|
+ setPage(0);
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <SubBlock title="$JOY Token Sellers" stretch={8} >
|
|
|
+ <>
|
|
|
+ <Typography variant="h6" className={classes.desc}>
|
|
|
+ The normal JOY price is $0.06 USD. This tool can help people to purchase/buy JOY tokens around that price before DEX listing.
|
|
|
+ </Typography>
|
|
|
+ <Button variant="outlined" style={{marginTop: 20}}>Auto Buy</Button>
|
|
|
+ <TableContainer style={{ padding: 10 }}>
|
|
|
+ <Table className={classes.table} aria-label="sell-order table">
|
|
|
+ <TableHead>
|
|
|
+ <TableRow>
|
|
|
+ <TableCell>Seller</TableCell>
|
|
|
+ <TableCell>Price</TableCell>
|
|
|
+ <TableCell>Amount</TableCell>
|
|
|
+ <TableCell>Action</TableCell>
|
|
|
+ </TableRow>
|
|
|
+ </TableHead>
|
|
|
+ {sellerGroups && (
|
|
|
+ <TableBody>
|
|
|
+ { rowsPerPage > 0 ?
|
|
|
+ sellerGroups.slice(page * rowsPerPage, page *rowsPerPage + rowsPerPage)
|
|
|
+ .map((seller) => <Seller key={seller.seller} seller={seller} onHandleBuy={onHandleBuy} />)
|
|
|
+ : sellerGroups.map((seller) => <Seller key={seller.seller} seller={seller} onHandleBuy={onHandleBuy}/>)
|
|
|
+ }
|
|
|
+ </TableBody>
|
|
|
+ )}
|
|
|
+ <TableFooter>
|
|
|
+ <TableRow>
|
|
|
+ <TablePagination
|
|
|
+ rowsPerPageOptions={[4]}
|
|
|
+ colSpan={4}
|
|
|
+ count={sellerGroups ? sellerGroups.length : 0}
|
|
|
+ rowsPerPage={rowsPerPage}
|
|
|
+ page={page}
|
|
|
+ onPageChange={handleChangePage}
|
|
|
+ SelectProps={{
|
|
|
+ inputProps: { 'aria-label': 'rows per page' },
|
|
|
+ native: true,
|
|
|
+ }}
|
|
|
+ onRowsPerPageChange={handleChangeRowsPerPage}
|
|
|
+ ActionsComponent={TablePaginationActions}
|
|
|
+ />
|
|
|
+ </TableRow>
|
|
|
+ </TableFooter>
|
|
|
+ </Table>
|
|
|
+ </TableContainer>
|
|
|
+ </>
|
|
|
+ <div>
|
|
|
+ <BuyOrderDialog open={isShowBuy} handleClose={onHandleClose} seller={selectedSeller} />
|
|
|
+ </div>
|
|
|
+ </SubBlock>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+export default SellerList;
|