20230301: Adjust main screen for swap tool

src/components/JoySwapTool/ConnectWallet.tsx

@@ -1,11 +1,91 @@
 import React, { useEffect, useState } from "react";
 import { IState  } from "../../ptypes";
 import SubBlock from "../ui/SubBlock";
+import { Button, Container } from "@material-ui/core";
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+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";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+    },
+    heading: {
+      fontSize: theme.typography.pxToRem(15),
+    },
+    section: {
+      margin:'10px !important', 
+      background:'bottom', 
+      border: '1px solid black', 
+      borderRadius: '10px' 
+    }
+  }),
+);
+
 
 export const ConnectWallet = (props: IState) => {  
-    return (
-      <SubBlock title="My Wallet">
 
-      </SubBlock>
-    );
+  const classes = useStyles();
+
+  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>
+        </div>
+        <Accordion className={classes.section}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+          >
+            <Typography className={classes.heading}>Polkadot DOT Wallet</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <div style={{width:'100%'}}>
+              <Line content={"Address"} value={"XXXXXXXXXXXXXXXXXXXXX"} />
+              <Line content={"Balance"} value={"YYYYYYYYYYYYYYYYYYYYY"} />
+            </div>
+          </AccordionDetails>
+        </Accordion>
+        <Accordion className={classes.section}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel2a-content"
+            id="panel2a-header"
+          >
+            <Typography className={classes.heading}>Joystream Wallet</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <div style={{width:'100%'}}>
+              <Line content={"Address"} value={"XXXXXXXXXXXXXXXXXXXXX"} />
+              <Line content={"Balance"} value={"YYYYYYYYYYYYYYYYYYYYY"} />
+            </div>
+          </AccordionDetails>
+        </Accordion>
+        <Accordion className={classes.section}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel2a-content"
+            id="panel2a-header"
+          >
+            <Typography className={classes.heading}>Transactions</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <div style={{width:'100%'}}>
+              <Line content={"Buy"} value={"6 DOT => 1000 JOY "} />
+              <Line content={"Sell"} value={"200 JOY => 1.5 DOT"} />
+            </div>
+          </AccordionDetails>
+        </Accordion>
+      </div>
+    </SubBlock>
+  );
 }

src/components/JoySwapTool/SellerList.tsx

@@ -72,7 +72,7 @@ const SellerList = (props: IState) => {
                     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>
+                <TableContainer style={{ padding: 10 }}>
                     <Table className={classes.table} aria-label="sell-order table">
                         <TableHead>
                             <TableRow>
@@ -86,8 +86,8 @@ const SellerList = (props: IState) => {
                             <TableBody>
                                 { rowsPerPage > 0 ? 
                                         sellerGroups.slice(page * rowsPerPage, page *rowsPerPage + rowsPerPage)
-                                            .map((seller) => <Seller seller={seller} />)
-                                    : sellerGroups.map((seller) => <Seller seller={seller} />)
+                                            .map((seller) => <Seller key={seller.seller} seller={seller} />)
+                                    : sellerGroups.map((seller) => <Seller key={seller.seller} seller={seller} />)
                                 }
                             </TableBody>
                         )}

src/components/ui/Line.tsx

@@ -5,7 +5,7 @@ import {
 
 const Line = (props: {
     content: String,
-    value: Number
+    value: any
 }) => {
   const { 
     content,