prettier

src/App.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './index.css';
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./index.css";
 import { Dashboard, Loading } from "./components";
 //import { withRouter } from "react-router-dom";
 import moment from "moment";
@@ -45,9 +45,9 @@ const initialState = {
     current: 0,
     last: 0,
     active: [],
-    executing: []
+    executing: [],
   },
-  domain
+  domain,
 };
 
 class App extends React.Component<IProps, IState> {
@@ -86,23 +86,25 @@ class App extends React.Component<IProps, IState> {
 
     this.setState({ channels, proposals, posts, categories, threads });
 
-    const council = await api.query.council.activeCouncil()
+    const council = await api.query.council.activeCouncil();
 
-        // count nominators and validators
-        const nominatorsEntries: NominatorsEntries = await api.query.staking.nominators.entries();
-        //nominators = nominatorsEntries.map(array=> array[0].map(c=> String.fromCharCode(c)).join());
-        const validatorEntries = await api.query.session.validators()
-	const validators = validatorEntries.map(v=>String(v))
-	const nominatorEntries = await api.query.staking.nominators.entries(validators[0])
-	const nominators = nominatorEntries.map(n=> String(n[0]))
+    // count nominators and validators
+    const nominatorsEntries: NominatorsEntries = await api.query.staking.nominators.entries();
+    //nominators = nominatorsEntries.map(array=> array[0].map(c=> String.fromCharCode(c)).join());
+    const validatorEntries = await api.query.session.validators();
+    const validators = validatorEntries.map((v) => String(v));
+    const nominatorEntries = await api.query.staking.nominators.entries(
+      validators[0]
+    );
+    const nominators = nominatorEntries.map((n) => String(n[0]));
 
-     this.setState({ council, nominators, validators, loading:false });
+    this.setState({ council, nominators, validators, loading: false });
 
     api.rpc.chain.subscribeNewHeads(
       async (header: Header): Promise<void> => {
         // current block
         const id = header.number.toNumber();
-        if (blocks.find(b=>b.id === id)) return;
+        if (blocks.find((b) => b.id === id)) return;
         const timestamp = (await api.query.timestamp.now()).toNumber();
         const duration = timestamp - lastBlock.timestamp;
         const block: Block = { id, timestamp, duration };

src/components/Dashboard/Blocks.tsx

@@ -2,13 +2,15 @@ import { Block } from "../../types";
 import moment from "moment";
 
 const Blocks = (props: { blocks: Block[] }) => {
-  const blocks: Block[] = Array.from(new Set(props.blocks)).sort((a: Block, b: Block) => b.id - a.id).slice(0,5)
- 
+  const blocks: Block[] = Array.from(new Set(props.blocks))
+    .sort((a: Block, b: Block) => b.id - a.id)
+    .slice(0, 5);
+
   return (
-    <div className='box overflow-hidden' style={{height: '13em'}}>
+    <div className="box overflow-hidden" style={{ height: "13em" }}>
       <h3>previous blocks</h3>
       <div>
-        {blocks.map(b => (
+        {blocks.map((b) => (
           <div key={b.id}>
             {moment(b.timestamp).format("DD/MM/YYYY HH:mm:ss")}: {b.id}
           </div>

src/components/Dashboard/Nominators.tsx

@@ -1,27 +1,27 @@
-import React from "react"
-import User from "../User"
+import React from "react";
+import User from "../User";
 
 const Nominators = (props: { nominators: string[] }) => {
-  const {nominators} = props
-  const half = Math.floor(nominators.length/2) +1
-  
+  const { nominators } = props;
+  const half = Math.floor(nominators.length / 2) + 1;
+
   return (
-    <div className='box'>
+    <div className="box">
       <h3>Nominators</h3>
-      <div className='d-flex flex-row'>
-      <div className='mx-1'>
-        {nominators.slice(0,half).map((nominator: string) => (
-          <User key={nominator} id={nominator} />
-        ))}
-      </div>
-      <div className='mx-1'>
-        {nominators.slice(half).map((nominator: string) => (
-          <User key={nominator} id={nominator} />
-        ))}
-      </div>
+      <div className="d-flex flex-row">
+        <div className="mx-1">
+          {nominators.slice(0, half).map((nominator: string) => (
+            <User key={nominator} id={nominator} />
+          ))}
+        </div>
+        <div className="mx-1">
+          {nominators.slice(half).map((nominator: string) => (
+            <User key={nominator} id={nominator} />
+          ))}
+        </div>
       </div>
     </div>
   );
 };
 
-export default Nominators;
+export default Nominators;

src/components/Dashboard/Validators.tsx

@@ -1,31 +1,31 @@
-import React from "react"
-import User from "../User"
+import React from "react";
+import User from "../User";
 
 const Validators = (props: { validators: string[] }) => {
-  const {validators} = props
-  const third = Math.floor(validators.length / 3)+1 
-  
+  const { validators } = props;
+  const third = Math.floor(validators.length / 3) + 1;
+
   return (
-   <div className='box'>
-    <h3>Validators</h3>
-     <div className='d-flex flex-row'>
-      <div className='mx-1'>
-        {validators.slice(0,third).map((validator: string) => (
-          <User key={validator} id={validator} />
-        ))}
+    <div className="box">
+      <h3>Validators</h3>
+      <div className="d-flex flex-row">
+        <div className="mx-1">
+          {validators.slice(0, third).map((validator: string) => (
+            <User key={validator} id={validator} />
+          ))}
+        </div>
+        <div className="mx-1">
+          {validators.slice(third, third * 2).map((validator: string) => (
+            <User key={validator} id={validator} />
+          ))}
+        </div>
+        <div className="mx-1">
+          {validators.slice(third * 2).map((validator: string) => (
+            <User key={validator} id={validator} />
+          ))}
+        </div>
       </div>
-      <div className='mx-1'>
-        {validators.slice(third,third*2).map((validator: string) => (
-          <User key={validator} id={validator} />
-        ))}
-      </div>	
-      <div className='mx-1'>
-        {validators.slice(third*2).map((validator: string) => (
-          <User key={validator} id={validator} />
-        ))}
-     </div>	
     </div>
-   </div>
   );
 };
 

src/components/Dashboard/index.tsx

@@ -15,20 +15,33 @@ interface IProps {
 }
 
 const Dashboard = (props: IProps) => {
-  const { domain, block, blocks, council, nominators, validators } = props;
-  
+  const {
+    domain,
+    block,
+    blocks,
+    council,
+    nominators,
+    validators,
+    proposals,
+  } = props;
+
   return (
     <div className="w-100 flex-grow-1 d-flex align-items-center justify-content-center d-flex flex-column">
-    <div className="title"><h1><a href={`${domain}`}>Joystream</a></h1></div>
-      <div className='box mt-3'>
+      <div className="title">
+        <h1>
+          <a href={`${domain}`}>Joystream</a>
+        </h1>
+      </div>
+      <Proposals proposals={proposals} />
+      <div className="box mt-3">
         <h3>latest block</h3>
         {block}
       </div>
       <Blocks blocks={blocks} />
       <Council council={council} />
       <div className="d-flex flex-row">
-      <Validators validators={validators} />
-      <Nominators nominators={nominators} />
+        <Validators validators={validators} />
+        <Nominators nominators={nominators} />
       </div>
     </div>
   );

src/components/Loading.tsx

@@ -4,7 +4,11 @@ import { Spinner } from "react-bootstrap";
 const Loading = () => {
   return (
     <div className="h-100 bg-dark d-flex flex-column flex-grow-1 align-items-center justify-content-center">
-      <Spinner animation="grow" variant="light" title="Connecting to Websocket" />
+      <Spinner
+        animation="grow"
+        variant="light"
+        title="Connecting to Websocket"
+      />
     </div>
   );
 };

src/components/index.ts

@@ -1,4 +1,4 @@
 export { default as Council } from "./Council"
 export { default as Dashboard } from "./Dashboard";
 export { default as Loading } from "./Loading";
-export { default as User } from "./User";
+export { default as User } from "./User";

src/config.ts

@@ -1,4 +1,4 @@
 //export const wsLocation = 'wss://joystreamstats.live:9944/'
-export const domain = 'https://testnet.joystream.org'
+export const domain = "https://testnet.joystream.org";
 
-export const wsLocation = 'wss://rome-rpc-endpoint.joystream.org:9944/'
+export const wsLocation = "wss://rome-rpc-endpoint.joystream.org:9944/";