FAQ

src/App.tsx

@@ -19,6 +19,7 @@ const version = 6;
 const initialState = {
   assets: [],
   connected: false,
+  faq: [],
   fetching: "",
   tasks: 0,
   blocks: [],
@@ -288,6 +289,15 @@ class App extends React.Component<IProps, IState> {
     this.save("members", data);
   }
 
+  async fetchFAQ() {
+    const { data } = await axios.get(
+      `https://joystreamstats.live/static/faq.json`
+    );
+    if (!data || data.error) return console.error(`failed to fetch from API`);
+    console.debug(`faq`, data);
+    this.save("faq", data);
+  }
+
   addOrReplace(array, item) {
     return array.filter((i) => i.id !== item.id).concat(item);
   }
@@ -546,6 +556,7 @@ class App extends React.Component<IProps, IState> {
     this.fetchFromApi();
     this.fetchStorageProviders();
     this.fetchAssets();
+    this.fetchFAQ();
     setTimeout(() => this.fetchTokenomics(), 30000);
     //this.initializeSocket();
   }

src/components/AppBar/config.ts

@@ -10,6 +10,7 @@ export const routes = {
   transactions: "Transfers",
   burners: "Top Burners",
   mint: "Mints",
+  faq: "FAQ",
 };
 
 export const css = {

src/components/FAQ/index.tsx

@@ -0,0 +1,64 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  createStyles,
+  Grid,
+  makeStyles,
+  Theme,
+  Typography,
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import { useEffect } from "react";
+import { useState } from "react";
+import { FAQItem } from "../../types";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      textAlign: "center",
+      backgroundColor: "#000",
+      color: "#fff",
+    },
+    acc: {
+      color: "#fff",
+      backgroundColor: "#4138ff",
+    },
+    heading: {
+      fontSize: theme.typography.pxToRem(15),
+      fontWeight: theme.typography.fontWeightRegular,
+    },
+  })
+);
+
+const FAQ = (props: { faq: FAQItem[] }) => {
+  const classes = useStyles();
+  const { faq } = props;
+  return (
+    <Grid className={classes.root} item lg={12}>
+      <Typography variant="h2" className="mb-3">
+        FAQ
+      </Typography>
+      {faq.map((item: FAQItem, index: number) => {
+        return (
+          <Accordion className={classes.acc} key={index}>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon style={{ color: "#fff" }} />}
+              aria-controls={`${index}-content`}
+              id={`${index}-header`}
+            >
+              <Typography className={classes.heading}>
+                {item.question}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Typography>{item.answer}</Typography>
+            </AccordionDetails>
+          </Accordion>
+        );
+      })}
+    </Grid>
+  );
+};
+
+export default FAQ;

src/components/Routes/index.tsx

@@ -23,6 +23,7 @@ const Transactions = React.lazy(() => import("../Transactions"));
 const Bounties = React.lazy(() => import("../Bounties"));
 const Burners = React.lazy(() => import("../Burners"));
 const ValidatorReport = React.lazy(() => import("../ValidatorReport"));
+const FAQ = React.lazy(() => import("../FAQ"));
 
 interface IProps extends IState {
   toggleStar: (a: string) => void;
@@ -30,7 +31,7 @@ interface IProps extends IState {
 }
 
 const Routes = (props: IProps) => {
-  const { reports, tokenomics } = props;
+  const { faq, reports, tokenomics } = props;
 
   return (
     <div>
@@ -108,9 +109,7 @@ const Routes = (props: IProps) => {
               />
               <Route
                 path="/validator-report"
-                render={(routeprops) => (
-                  <ValidatorReport {...routeprops} {...props} />
-                )}
+                render={(routeprops) => <ValidatorReport />}
               />
               <Route
                 path="/storage"
@@ -130,6 +129,8 @@ const Routes = (props: IProps) => {
                 path="/burners"
                 render={(routeprops) => <Burners {...routeprops} {...props} />}
               />
+              <Route path="/faq" render={(routeprops) => <FAQ faq={faq} />} />
+
               <Route path="/" render={() => <Dashboard {...props} />} />
             </Switch>
           </Suspense>

src/components/index.ts

@@ -31,6 +31,7 @@ export { default as Transactions } from "./Transactions";
 export { default as Burners } from "./Burners";
 export { default as Validators } from "./Validators";
 export { default as ValidatorReport } from "./ValidatorReport";
+export { default as FAQ } from "./FAQ";
 export { default as Timeline } from "./Timeline";
 export { default as TableFromObject } from "./TableFromObject";
 

src/types.ts

@@ -73,11 +73,17 @@ export interface Status {
   startTime: number;
 }
 
+export interface FAQItem {
+  question: string;
+  answer: string;
+}
+
 export interface IState {
   assets: string[];
   connecting: boolean;
   loading: string;
   processingTasks: number;
+  faq: FAQItem[];
   fetching: string;
   providers: any[];
   status: Status;