20230303: added dialogs for swap tool main screen

src/components/JoySwapTool/ConnectWallet.tsx

@@ -10,6 +10,7 @@ import AccordionDetails from '@material-ui/core/AccordionDetails';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Line from "../ui/Line";
+import SellOrderDialog from './components/SellOrderDialog';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -32,13 +33,22 @@ const useStyles = makeStyles((theme: Theme) =>
 export const ConnectWallet = (props: IState) => {  
 
   const classes = useStyles();
+  const [isShowSell, setIsShowSell] = useState(false);
+
+  const onHandleSell = () => {
+    setIsShowSell(true)
+  }
+
+  const onHandleClose = () => {
+    setIsShowSell(false)
+  }
 
   return (
     <SubBlock title="My Wallet">
       <div className={classes.root}>
         <div style={{display: 'flex', justifyContent: 'space-evenly', margin: '10px' }} >
           <Button variant="outlined">Connect Wallet</Button>
-          <Button variant="outlined">Sell</Button>
+          <Button variant="outlined" onClick={onHandleSell} >Sell</Button>
         </div>
         <Accordion className={classes.section}>
           <AccordionSummary
@@ -86,6 +96,9 @@ export const ConnectWallet = (props: IState) => {
           </AccordionDetails>
         </Accordion>
       </div>
+      <div>
+        <SellOrderDialog open={isShowSell} handleClose={onHandleClose} />
+      </div>
     </SubBlock>
   );
 }

src/components/JoySwapTool/SellerList.tsx

@@ -12,15 +12,17 @@ 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
+    amount: number,
+    address?: string
 }
 
-function Seller (props: { seller: ISeller }) {
-    const { seller } = props
+function Seller (props: { seller: ISeller, onHandleBuy: any }) {
+    const { seller, onHandleBuy } = props
 
 	return (
 		<TableRow key={seller.seller}>
@@ -28,7 +30,7 @@ function Seller (props: { seller: ISeller }) {
 			<TableCell><i>{Number.isNaN(seller.price) ? "-" : seller.price}</i></TableCell>
 			<TableCell><i>{seller.amount}</i></TableCell>
 			<TableCell>
-                <Button variant="outlined">Buy</Button>
+                <Button variant="outlined" onClick={() => onHandleBuy(seller)}>Buy</Button>
             </TableCell>
 		</TableRow>
 	);
@@ -52,68 +54,83 @@ const sellerGroups: ISeller[] = [
 const SellerList = (props: IState) => {
 	const {} = props	
 
-    const classes = useStyles()
+	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 handleChangePage = (event: unknown, newPage: number) => {
-        setPage(newPage);
-    };
+	const onHandleBuy = (seller: ISeller) => {        
+		console.log(`onhandleBuy: `, seller) 
+		setIsShowBuy(true)
+		setSelectedSeller(seller)
+	}
 
-    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} />)
-                                    : sellerGroups.map((seller) => <Seller key={seller.seller} seller={seller} />)
-                                }
-                            </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>
-            </>
-        </SubBlock>
-    );
+	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;

src/components/JoySwapTool/components/BuyOrderDialog.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import MuiDialogTitle from '@material-ui/core/DialogTitle';
+import MuiDialogContent from '@material-ui/core/DialogContent';
+import MuiDialogActions from '@material-ui/core/DialogActions';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+import TextField from '@material-ui/core/TextField';
+
+import { ISeller } from '../SellerList'
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      margin: 0,
+      padding: theme.spacing(2),
+      background: "dodgerblue",
+    },
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500],
+    },
+  });
+
+export interface DialogTitleProps extends WithStyles<typeof styles> {
+  id: string;
+  children: React.ReactNode;
+  onClose: () => void;
+}
+
+const DialogTitle = withStyles(styles)((props: DialogTitleProps) => {
+  const { children, classes, onClose, ...other } = props;
+  return (
+    <MuiDialogTitle disableTypography className={classes.root} {...other}>
+      <Typography variant="h6">{children}</Typography>
+      {onClose ? (
+        <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </MuiDialogTitle>
+  );
+});
+
+const DialogContent = withStyles((theme: Theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}))(MuiDialogContent);
+
+const DialogActions = withStyles((theme: Theme) => ({
+  root: {
+    margin: 0,
+    padding: theme.spacing(1),
+  },
+}))(MuiDialogActions);
+
+const BuyOrderDialog = (props: {open: boolean, handleClose: any, seller: ISeller}) => {
+  const { open, handleClose, seller} = props
+
+  console.log(`seller: `, seller) 
+
+  return (
+      <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>
+        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
+          Buy
+        </DialogTitle>
+        <DialogContent dividers style={{background:"dodgerblue"}}>
+          <div style={{display:'flex', flexDirection:'column', gap:16}} >
+            <TextField
+              required
+              id="outlined-required"
+              label="Seller"
+              defaultValue={seller && seller.seller}
+              inputProps={{
+                readOnly: true,
+              }}
+              variant="outlined"
+            />
+            <TextField
+              required
+              id="outlined-required"
+              label="JOY PRICE"
+              defaultValue="0.06"
+              inputProps={{
+                readOnly: true,
+              }}
+              variant="outlined"
+            />
+            <TextField
+              required
+              id="outlined-required"
+              label="JOY AMOUNT"
+              defaultValue="1000"
+              variant="outlined"
+            />
+          </div>
+        </DialogContent>
+        <DialogActions style={{background:"dodgerblue"}}>
+          <Button autoFocus onClick={handleClose} color="primary">
+            Order
+          </Button>
+        </DialogActions>
+      </Dialog>
+  );
+}
+
+export default BuyOrderDialog;

src/components/JoySwapTool/components/SellOrderDialog.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import MuiDialogTitle from '@material-ui/core/DialogTitle';
+import MuiDialogContent from '@material-ui/core/DialogContent';
+import MuiDialogActions from '@material-ui/core/DialogActions';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+import TextField from '@material-ui/core/TextField';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      margin: 0,
+      padding: theme.spacing(2),
+      background: "dodgerblue",
+    },
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500],
+    },
+  });
+
+export interface DialogTitleProps extends WithStyles<typeof styles> {
+  id: string;
+  children: React.ReactNode;
+  onClose: () => void;
+}
+
+const DialogTitle = withStyles(styles)((props: DialogTitleProps) => {
+  const { children, classes, onClose, ...other } = props;
+  return (
+    <MuiDialogTitle disableTypography className={classes.root} {...other}>
+      <Typography variant="h6">{children}</Typography>
+      {onClose ? (
+        <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </MuiDialogTitle>
+  );
+});
+
+const DialogContent = withStyles((theme: Theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}))(MuiDialogContent);
+
+const DialogActions = withStyles((theme: Theme) => ({
+  root: {
+    margin: 0,
+    padding: theme.spacing(1),
+  },
+}))(MuiDialogActions);
+
+const SellOrderDialog = ({open, handleClose}) => {
+  return (
+      <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>
+        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
+          Sell
+        </DialogTitle>
+        <DialogContent dividers style={{background:"dodgerblue"}}>
+          <div style={{display:'flex', flexDirection:'column', gap:16}} >
+            <TextField
+              required
+              id="outlined-required"
+              label="JOY PRICE"
+              defaultValue="0.06"
+              variant="outlined"
+            />
+            <TextField
+              required
+              id="outlined-required"
+              label="JOY AMOUNT"
+              defaultValue="1000"
+              variant="outlined"
+            />
+          </div>
+        </DialogContent>
+        <DialogActions style={{background:"dodgerblue"}}>
+          <Button autoFocus onClick={handleClose} color="primary">
+            Order
+          </Button>
+        </DialogActions>
+      </Dialog>
+  );
+}
+
+export default SellOrderDialog;