20230301: Started to add Joy Seller UI

src/components/AppBar/config.ts

@@ -18,7 +18,7 @@ export const routes = {
   issues: "Issues",
   calendar: "Calendar",
   timeline: "Timeline",
-  swap: "Joy SwapTool",
+  swap: "JOY OrderBook",
 } as { [key: string]: string };
 
 export const useStyles = makeStyles((theme: Theme) =>

src/components/Dashboard/Channels.tsx

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

src/components/Dashboard/Election.tsx

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

src/components/Dashboard/Forum.tsx

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

src/components/Dashboard/Memberships.tsx

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

src/components/Dashboard/Proposals.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SubBlock from "./ui/SubBlock";
+import SubBlock from "../ui/SubBlock";
 import { ElectedCouncil } from "@/queries";
 import { useProposals } from '@/hooks';
 import { Proposal, WorkingGroup } from "../../types";

src/components/Dashboard/Validation.tsx

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

src/components/Dashboard/Videos.tsx

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

src/components/Dashboard/Workgroup.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SubBlock from "./ui/SubBlock";
+import SubBlock from "../ui/SubBlock";
 import { ElectedCouncil } from "@/queries";
 import { useWorkingGroups, useWorker } from '@/hooks';
 import { WorkingGroup } from "../../types";

src/components/Dashboard/index.tsx

@@ -9,7 +9,7 @@ import Election from "./Election";
 import Validation from "./Validation";
 import WorkGroup from './Workgroup';
 
-import Banner from "./ui/Banner";
+import Banner from "../ui/Banner";
 import { useElectedCouncils } from '@/hooks';
 import { ElectedCouncil } from "@/types";
 import Proposals from "./Proposals";

src/components/JoySwapTool/ConnectWallet.tsx

@@ -0,0 +1,11 @@
+import React, { useEffect, useState } from "react";
+import { IState  } from "../../ptypes";
+import SubBlock from "../ui/SubBlock";
+
+export const ConnectWallet = (props: IState) => {  
+    return (
+      <SubBlock title="My Wallet">
+
+      </SubBlock>
+    );
+}

src/components/JoySwapTool/SellerList.tsx

@@ -0,0 +1,20 @@
+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";
+
+const SellerList = (props: IState) => {
+	const {} = props	
+
+	console.log(`joyswaptool screen`)
+
+    return (
+        <SubBlock title="$JOY Token Sellers" stretch={8}>
+            Sell Order List
+        </SubBlock>
+    );
+}
+
+export default SellerList;

src/components/JoySwapTool/index.tsx

@@ -1,16 +1,26 @@
 import React, { useEffect, useState } from "react";
 import { IState  } from "../../ptypes";
+import { Container, Grid, TableContainer } from "@material-ui/core";
+import { ConnectWallet } from './ConnectWallet'
+import SellerList from './SellerList'
+import Banner from "../ui/Banner";
+import SubBlock from "../ui/SubBlock";
 
 const JoySwapTool = (props: IState) => {
-	const {} = props
+	const {} = props	
 
 	console.log(`joyswaptool screen`)
 
   return (
-		<>
-			hello world
-		</>
-	)
+    <div style={{ flexGrow: 1 }}>
+      <Container maxWidth="xl">
+        <Grid container spacing={3}>
+          <ConnectWallet {...props} />
+					<SellerList {...props} />
+        </Grid>
+      </Container>
+    </div>
+  );
 }
 
 export default JoySwapTool;

src/components/Dashboard/ui/Banner.tsx → src/components/ui/Banner.tsx

@@ -9,7 +9,6 @@ import {
   Typography,
   AppBar,
 } from "@material-ui/core";
-import { IState } from "../../../types";
 import Line from "./Line";
 
 const useStyles = makeStyles((theme: Theme) =>

src/components/Dashboard/ui/SubBlock.tsx → src/components/ui/SubBlock.tsx

@@ -9,7 +9,6 @@ import {
   Typography,
   AppBar,
 } from "@material-ui/core";
-import { IState } from "../../../types";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -32,7 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 const SubBlock = (props: {
   title: string,
-  stretch: number,
+  stretch?: number,
   children: any
 }) => { 
   const {