Nominators, Validators, Council

src/App.tsx

@@ -21,6 +21,7 @@ interface IState {
   nominators: string[];
   validators: string[];
   loading: boolean;
+  council: any;
   channels: number[];
   proposals: Proposals;
   posts: number[];
@@ -37,6 +38,7 @@ const initialState = {
   validators: [],
   channels: [],
   posts: [],
+  council: [],
   categories: [],
   threads: [],
   proposals: {
@@ -53,6 +55,7 @@ class App extends React.Component<IProps, IState> {
     const provider = new WsProvider(wsLocation);
     const api = await ApiPromise.create({ provider, types });
     await api.isReady;
+    //this.setState({loading:false})
 
     // const [chain, node, version] = await Promise.all([
     //   api.rpc.system.chain(),
@@ -62,7 +65,7 @@ class App extends React.Component<IProps, IState> {
     // this.setState({ chain, node, version, loading: false });
 
     let blocks: Block[] = [];
-    let lastBlock: Block;
+    let lastBlock: Block = { id: 0, timestamp: 0, duration: 6 };
     let openingId = await get.nextOpeningId(api);
     let nextWorkerId = await get.nextWorkerId(api);
 
@@ -83,24 +86,28 @@ class App extends React.Component<IProps, IState> {
 
     this.setState({ channels, proposals, posts, categories, threads });
 
-    let nominators: number[] = [];
-    let validators: number[] = [];
+    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]))
+
+     this.setState({ council, nominators, validators, loading:false });
 
     api.rpc.chain.subscribeNewHeads(
       async (header: Header): Promise<void> => {
         // current block
         const id = header.number.toNumber();
-        if (lastBlock.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 };
         blocks = blocks.concat(block);
-
-        // count nominators and validators
-        const nominatorsEntries: NominatorsEntries = await api.query.staking.nominators.entries();
-        const currentValidators = await api.query.staking.validatorCount();
-        nominators = nominators.concat(nominatorsEntries.length);
-        validators = validators.concat(currentValidators.toNumber());
+        this.setState({ blocks, block: id });
 
         channels[1] = await get.currentChannelId(api);
         proposals.current = await get.proposalCount(api);
@@ -129,7 +136,7 @@ class App extends React.Component<IProps, IState> {
         //   const handle: string = await get.memberHandle(api, memberId);
         //   nextWorkerId = workerId;
         // }
-        this.setState({ blocks, block: header.number.toNumber() });
+
         lastBlock = block;
       }
     );

src/components/Council/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import User from "../User";
+import { Seat } from "../../types";
+import Loading from "../Loading";
+
+const Council = (props: {
+  council: Seat[];
+  handles: { [key: string]: string };
+}) => {
+  const { council, handles } = props;
+  const half = Math.floor(council.length / 2);
+
+  return (
+    <div className="box">
+      <h3>Council</h3>
+
+      {(council.length && (
+        <div className="d-flex flex-column">
+          <div className="d-flex flex-row">
+            {council.slice(0, half).map((seat: Seat) => (
+              <User
+                key={String(seat.member)}
+                id={String(seat.member)}
+                handle={handles[seat.member]}
+              />
+            ))}
+          </div>
+          <div className="d-flex flex-row">
+            {council.slice(half).map((seat: Seat) => (
+              <User
+                key={String(seat.member)}
+                id={String(seat.member)}
+                handle={handles[seat.member]}
+              />
+            ))}
+          </div>
+        </div>
+      )) || <Loading />}
+    </div>
+  );
+};
+
+export default Council;

src/components/Dashboard/Blocks.tsx

@@ -2,15 +2,14 @@ import { Block } from "../../types";
 import moment from "moment";
 
 const Blocks = (props: { blocks: Block[] }) => {
-  const blocks: Block[] = props.blocks
-    .sort((a: Block, b: Block) => b.timestamp - a.timestamp)
-    .slice(0, 10);
+  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'}}>
       <h3>previous blocks</h3>
       <div>
         {blocks.map(b => (
-          <div>
+          <div key={b.id}>
             {moment(b.timestamp).format("DD/MM/YYYY HH:mm:ss")}: {b.id}
           </div>
         ))}

src/components/Dashboard/Nominators.tsx

@@ -1,14 +1,27 @@
+import React from "react"
+import User from "../User"
+
 const Nominators = (props: { nominators: string[] }) => {
+  const {nominators} = props
+  const half = Math.floor(nominators.length/2) +1
+  
   return (
-    <div>
+    <div className='box'>
       <h3>Nominators</h3>
-      <div>
-        {props.nominators.map((n: string) => (
-          <div>{n}</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,13 +1,31 @@
+import React from "react"
+import User from "../User"
+
 const Validators = (props: { validators: string[] }) => {
+  const {validators} = props
+  const third = Math.floor(validators.length / 3)+1 
+  
   return (
-    <div>
-      <h3>Validators</h3>
-      <div>
-        {props.validators.map((v: string) => (
-          <div>{v}</div>
+   <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>
   );
 };
 

src/components/Dashboard/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Blocks from "./Blocks";
+import Council from "../Council";
 import Nominators from "./Nominators";
 import Validators from "./Validators";
 import { Block } from "../../types";
@@ -7,13 +8,14 @@ import { Block } from "../../types";
 interface IProps {
   block: number;
   blocks: Block[];
+  council: any;
   nominators: string[];
   validators: string[];
   domain: string;
 }
 
 const Dashboard = (props: IProps) => {
-  const { domain, block, blocks, nominators, validators } = props;
+  const { domain, block, blocks, council, nominators, validators } = props;
   
   return (
     <div className="w-100 h-80 position-fixed flex-grow-1 d-flex align-items-center justify-content-center d-flex flex-column">
@@ -23,8 +25,11 @@ const Dashboard = (props: IProps) => {
         {block}
       </div>
       <Blocks blocks={blocks} />
+      <Council council={council} />
+      <div className="d-flex flex-row">
       <Validators validators={validators} />
       <Nominators nominators={nominators} />
+      </div>
     </div>
   );
 };

src/components/index.ts

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