20230228: Started to work on Orderbook UI

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 SwapTool",
 } as { [key: string]: string };
 
 export const useStyles = makeStyles((theme: Theme) =>

src/components/Dashboard/index.tsx

@@ -15,8 +15,7 @@ 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/index.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from "react";
+import { IState  } from "../../ptypes";
+
+const JoySwapTool = (props: IState) => {
+	const {} = props
+
+	console.log(`joyswaptool screen`)
+
+  return (
+		<>
+			hello world
+		</>
+	)
+}
+
+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/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[];
 }