src/App.tsx

@@ -33,7 +33,7 @@ import { initialState } from "./state";
 import axios from "axios";
 
 // types
-import { Api, IState } from "./types";
+import { Api, IState } from "./ptypes";
 // import { types } from "@joystream/types";
 import { ApiPromise, WsProvider } from "@polkadot/api";
 import { Header } from "@polkadot/types/interfaces";
@@ -218,12 +218,12 @@ class App extends React.Component<IProps, IState> {
     this.setState({ hideFooter: !this.state.hideFooter });
   }
 
-  getMember(handle: string) {
-    const { members } = this.state;
-    const member = members.find((m) => m.handle === handle);
-    if (member) return member;
-    return members.find((m) => m.rootKey === handle);
-  }
+  // getMember(handle: string) {
+  //   const { members } = this.state;
+  //   const member = members.find((m) => m.handle === handle);
+  //   if (member) return member;
+  //   return members.find((m) => m.rootKey === handle);
+  // }
 
   render() {
     const { connected, fetching, loading, hideFooter } = this.state;
@@ -235,7 +235,7 @@ class App extends React.Component<IProps, IState> {
           toggleEditKpi={this.toggleEditKpi}
           toggleFooter={this.toggleFooter}
           toggleStar={this.toggleStar}
-          getMember={this.getMember}
+          // getMember={this.getMember}
           {...this.state}
         />
 
@@ -339,15 +339,15 @@ class App extends React.Component<IProps, IState> {
     }
   }
 
-  async loadData() {
-    console.debug(`Loading data`);
-    "status members assets providers councils council election workers categories channels proposals posts threads mints openings tokenomics transactions reports validators nominators staches stakes rewardPoints stars"
-      .split(" ")
-      .map((key) => this.load(key));
-    getTokenomics().then((tokenomics) => this.save(`tokenomics`, tokenomics));
-    bootstrap(this.save); // axios requests
-    this.updateCouncils();
-  }
+  // async loadData() {
+  //   console.debug(`Loading data`);
+  //   "status members assets providers councils council election workers categories channels proposals posts threads mints openings tokenomics transactions reports validators nominators staches stakes rewardPoints stars"
+  //     .split(" ")
+  //     .map((key) => this.load(key));
+  //   getTokenomics().then((tokenomics) => this.save(`tokenomics`, tokenomics));
+  //   bootstrap(this.save); // axios requests
+  //   this.updateCouncils();
+  // }
 
   componentDidMount() {
     // this.loadData(); // local storage + bootstrap
@@ -364,7 +364,7 @@ class App extends React.Component<IProps, IState> {
     this.toggleStar = this.toggleStar.bind(this);
     this.toggleFooter = this.toggleFooter.bind(this);
     this.toggleShowStatus = this.toggleShowStatus.bind(this);
-    this.getMember = this.getMember.bind(this);
+    // this.getMember = this.getMember.bind(this);
   }
 }
 

src/components/AppBar/config.ts

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

src/components/Dashboard/Channels.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import SubBlock from "./ui/SubBlock";
-import Line from "./ui/Line";
+import SubBlock from "../ui/SubBlock";
+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 SubBlock from "../ui/SubBlock";
+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 SubBlock from "../ui/SubBlock";
+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 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";
@@ -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 SubBlock from "../ui/SubBlock";
+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 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";
@@ -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/Dashboard/index.tsx

@@ -9,14 +9,13 @@ 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";
 
 
-interface IProps extends IState {}
-const Dashboard = (props: IProps) => {
+const Dashboard = (props) => {
   const { } = props;
   const { data } = useElectedCouncils({});
 	const [description1, setDescription1] = useState('');

src/components/JoySwapTool/ConnectWallet.tsx

@@ -0,0 +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) => {  
+
+  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

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from "react";
+import { IState  } from "../../ptypes";
+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	
+
+    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} >
+            <>
+                <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>
+    );
+}
+
+export default SellerList;

src/components/JoySwapTool/index.tsx

@@ -0,0 +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	
+
+	console.log(`joyswaptool screen`)
+
+  return (
+    <div style={{ flexGrow: 1 }}>
+      <Container maxWidth="xl">
+        <Grid container spacing={3}>
+          <ConnectWallet {...props} />
+					<SellerList {...props} />
+        </Grid>
+      </Container>
+    </div>
+  );
+}
+
+export default JoySwapTool;

src/components/Routes/index.tsx

@@ -6,7 +6,7 @@ import IssueTracker from "../IssueTracker";
 import { ElectedCouncil } from "@/types";
 
 const Calendar = React.lazy(() => import("../Calendar"));
-const { Council } = React.lazy(() => import(".."));
+// const { Council } = React.lazy(() => import(".."));
 const Councils = React.lazy(() => import("../Councils"));
 const Curation = React.lazy(() => import("../Curation"));
 const Dashboard = React.lazy(() => import("../Dashboard"));
@@ -29,15 +29,20 @@ const ValidatorReport = React.lazy(() => import("../ValidatorReport"));
 const FAQ = React.lazy(() => import("../FAQ"));
 const KPI = React.lazy(() => import("../KPI"));
 const Survey = React.lazy(() => import("../Survey"));
+const JoySwapTool = React.lazy(() => import("../JoySwapTool"));
 
 interface IProps extends IState {
-  toggleStar: (a: string) => void;
+  // toggleStar: (a: string) => void;
   toggleFooter: () => void;
-  council: ElectedCouncil
+  toggleEditKpi: (editKpi: any) => void;
+  // getMember: (handle: string) => void;
+
+  proposals: any;
+  faq: any;
 }
 
 const Routes = (props: IProps) => {
-  const { faq, proposals, toggleEditKpi } = props;
+  const { faq, proposals, toggleEditKpi, toggleFooter } = props;
 
   return (
     <div>
@@ -84,10 +89,10 @@ const Routes = (props: IProps) => {
                 path="/councils"
                 render={(routeprops) => <Councils {...routeprops} {...props} />}
               />
-              <Route
+              {/* <Route
                 path="/council"
                 render={(routeprops) => <Council {...routeprops} {...props} />}
-              />
+              /> */}
               <Route
                 path="/curation"
                 render={(routeprops) => <Curation {...routeprops} {...props} />}
@@ -172,16 +177,18 @@ const Routes = (props: IProps) => {
                   />
                 )}
               />
-              <Route
+              {/* <Route
                 path="/kpi"
                 render={(routeprops) => (
                   <KPI toggleEditKpi={toggleEditKpi} faq={faq} />
                 )}
-              />
+              /> */}
               <Route path="/issues" render={(routeprops) => <IssueTracker />} />
               <Route path="/survey" render={(routeprops) => <Survey />} />
 
-              <Route path="/" render={() => <Dashboard {...props} />} />
+              <Route exact path="/" render={(routeprops) => <Dashboard {...routeprops} {...props} />} />
+              <Route path="/dashboard" render={(routeprops) => <Dashboard {...routeprops} {...props} />} />
+              <Route path="/swap" render={(routeprops) => <JoySwapTool {...routeprops} {...props} />} />
             </Switch>
           </Suspense>
         </div>

src/components/index.ts

@@ -38,6 +38,7 @@ export { default as KPI } from "./KPI";
 export { default as IssueTracker } from "./IssueTracker";
 export { default as Timeline } from "./Timeline";
 export { default as TableFromObject } from "./TableFromObject";
+export { default as JoySwapTool } from "./JoySwapTool";
 
 export { default as Spinner } from "./Spinner";
 export { default as Modals } from "./Modals";

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/Line.tsx → src/components/ui/Line.tsx

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

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({
@@ -22,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: "#4038FF",
       color: "#fff",
       minHeight: 100,
-      maxHeight: 400,
+      // maxHeight: 400,
       overflow: "auto",
       paddingTop:"6px",
       paddingBottom:"6px"
@@ -32,7 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 const SubBlock = (props: {
   title: string,
-  stretch: number,
+  stretch?: number,
   children: any
 }) => { 
   const { 
@@ -40,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}>

src/index.tsx

@@ -6,12 +6,13 @@ import App from "./App";
 import Providers from "./Providers";
 
 import "./i18n";
+// <Router>
+{/* </Router> */}
 
 ReactDOM.render(
-  <Router>
     <Providers>
       <App />
     </Providers>
-  </Router>,
+  ,
   document.getElementById("root")
 );

src/ptypes.ts

@@ -138,7 +138,7 @@ export interface IState {
   hideFooter: boolean;
   showStatus: boolean;
   editKpi: any; // TODO
-  getMember: (m: string | number) => Member;
+  // getMember: (m: string | number) => Member;
   groups: RoleSpending[];
 }