20230301: Added order list table on UI

src/components/Dashboard/Channels.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import SubBlock from "../ui/SubBlock";
-import Line from "./ui/Line";
+import Line from "../ui/Line";
 import { ElectedCouncil } from "@/queries";
 import { useChannels } from "@/hooks";
 

src/components/Dashboard/Election.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import SubBlock from "../ui/SubBlock";
-import Line from "./ui/Line";
+import Line from "../ui/Line";
 import { ElectedCouncil } from "@/queries";
 import { useElection } from "@/hooks";
 import { sumStakes } from "@/helpers";

src/components/Dashboard/Forum.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import SubBlock from "../ui/SubBlock";
-import Line from "./ui/Line";
+import Line from "../ui/Line";
 import { ElectedCouncil } from "@/queries";
 import { usePostTokenData, useThreadData } from "@/hooks";
 

src/components/Dashboard/Memberships.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import SubBlock from "../ui/SubBlock";
-import Line from "./ui/Line";
+import Line from "../ui/Line";
 import { ElectedCouncil } from "@/types";
 import { useMemberships } from "@/hooks";
 

src/components/Dashboard/Proposals.tsx

@@ -13,7 +13,7 @@ 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 TablePaginationActions from "../ui/TablePaginationActions";
 
 const useStyles2 = makeStyles({
 	table: {

src/components/Dashboard/Validation.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import SubBlock from "../ui/SubBlock";
-import Line from "./ui/Line";
+import Line from "../ui/Line";
 import { ElectedCouncil } from "@/queries";
 import { useValidation } from "@/hooks";
 

src/components/Dashboard/Videos.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import SubBlock from "../ui/SubBlock";
-import Line from "./ui/Line";
+import Line from "../ui/Line";
 import { ElectedCouncil } from "@/queries";
 import { useVideos } from "@/hooks";
 

src/components/Dashboard/Workgroup.tsx

@@ -13,7 +13,7 @@ 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 TablePaginationActions from '../ui/TablePaginationActions';
 
 export function GroupWorkers(props: { council: ElectedCouncil, workingGroup : WorkingGroup }) {
 

src/components/JoySwapTool/SellerList.tsx

@@ -1,18 +1,117 @@
 import React, { useEffect, useState } from "react";
 import { IState  } from "../../ptypes";
-import { Container, Grid, TableContainer } from "@material-ui/core";
-import { ConnectWallet } from './ConnectWallet'
-import Banner from "../ui/Banner";
 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";
+
+export interface ISeller {
+    seller: string,
+    price: number,
+    amount: number
+}
+
+function Seller (props: { seller: ISeller }) {
+    const { seller } = 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">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	
 
-	console.log(`joyswaptool screen`)
+    const classes = useStyles()
+	const [page, setPage] = React.useState(0);
+	const [rowsPerPage, setRowsPerPage] = React.useState(4);
+
+    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}>
-            Sell Order List
+        <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>
+                    <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 seller={seller} />)
+                                    : sellerGroups.map((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>
     );
 }

src/components/ui/SubBlock.tsx

@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: "#4038FF",
       color: "#fff",
       minHeight: 100,
-      maxHeight: 400,
+      // maxHeight: 400,
       overflow: "auto",
       paddingTop:"6px",
       paddingBottom:"6px"
@@ -39,7 +39,8 @@ const SubBlock = (props: {
     stretch,
     children,
   } = props;
-  const classes = useStyles();
+
+  let classes = useStyles();
 
   return (
     <Grid className={classes.grid} item xs={stretch? stretch: 4} md={stretch? stretch: 4} sm={12}>