fetch handles

src/App.tsx

@@ -11,6 +11,7 @@ import { Api, Block, NominatorsEntries, Proposals } from "./types";
 import { types } from "@joystream/types";
 import { ApiPromise, WsProvider } from "@polkadot/api";
 import { Header } from "@polkadot/types/interfaces";
+import { ValidatorId } from "@polkadot/types/interfaces";
 
 interface IProps {}
 
@@ -28,6 +29,7 @@ interface IState {
   threads: number[];
   domain: string;
   proposalCount: number;
+  handles: any;
 }
 
 const initialState = {
@@ -44,6 +46,7 @@ const initialState = {
   proposals: [],
   proposalCount: 0,
   domain,
+  handles: {},
 };
 
 class App extends React.Component<IProps, IState> {
@@ -87,17 +90,24 @@ class App extends React.Component<IProps, IState> {
 
     this.setState({ channels, proposalCount, posts, categories, threads });
 
-    const council = await api.query.council.activeCouncil();
+    const council: any = await api.query.council.activeCouncil();
+    console.log(`council`, council);
+    council.map((seat: any) => this.fetchHandle(api, seat.member));
 
     // 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]));
+    const nominatorEntries = await api.query.staking.nominators.entries();
+    const validators = await validatorEntries.map((v) => {
+      this.fetchHandle(api, v.toJSON());
+      return String(v);
+    });
+    console.log(`validators`, validators);
+    const nominators = nominatorEntries.map((n) => {
+      const name = n[0].toHuman();
+      this.fetchHandle(api, `${name}`);
+      return `${name}`;
+    });
+    console.log(`nominators`, nominatorEntries);
 
     this.setState({ council, nominators, validators, loading: false });
 
@@ -151,6 +161,13 @@ class App extends React.Component<IProps, IState> {
     proposals[id] = proposal;
     this.setState({ proposals });
   }
+  async fetchHandle(api: Api, id: string) {
+    const handle = await get.memberHandleByAccount(api, id);
+    //if (handle === "") return;
+    let { handles } = this.state;
+    handles[String(id)] = handle;
+    this.setState({ handles });
+  }
 
   // async fetchData() {
   //   // inital axios requests go here
@@ -173,6 +190,7 @@ class App extends React.Component<IProps, IState> {
     super(props);
     this.state = initialState;
     this.fetchProposal = this.fetchProposal.bind(this);
+    this.fetchHandle = this.fetchHandle.bind(this);
   }
 }
 

src/components/Dashboard/Nominators.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import User from "../User";
+import { Handles } from "../../types";
 
-const Nominators = (props: { nominators: string[] }) => {
-  const { nominators } = props;
+const Nominators = (props: { nominators: string[] ,handles:Handles}) => {
+  const { nominators,handles } = props;
   //if (!nominators) return ""
   
   const half = Math.floor(nominators.length / 2) + 1;
@@ -13,12 +14,12 @@ const Nominators = (props: { nominators: string[] }) => {
       <div className="d-flex flex-row">
         <div className="mx-1">
           {nominators.slice(0, half).map((nominator: string) => (
-            <User key={nominator} id={nominator} />
+            <User key={nominator} id={nominator} handle={handles[nominator]} />
           ))}
         </div>
         <div className="mx-1">
           {nominators.slice(half).map((nominator: string) => (
-            <User key={nominator} id={nominator} />
+            <User key={nominator} id={nominator} handle={handles[nominator]}/>
           ))}
         </div>
       </div>

src/components/Dashboard/Validators.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import User from "../User";
+import { Handles } from "../../types";
 
-const Validators = (props: { validators: string[] }) => {
-  const { validators } = props;
+const Validators = (props: { validators: string[]; handles: Handles }) => {
+  const { validators, handles } = props;
   //if (!validators) return "";
 
   const third = Math.floor(validators.length / 3) + 1;
@@ -13,17 +14,17 @@ const Validators = (props: { validators: string[] }) => {
       <div className="d-flex flex-row">
         <div className="mx-1">
           {validators.slice(0, third).map((validator: string) => (
-            <User key={validator} id={validator} />
+            <User key={validator} id={validator} handle={handles[validator]} />
           ))}
         </div>
         <div className="mx-1">
           {validators.slice(third, third * 2).map((validator: string) => (
-            <User key={validator} id={validator} />
+            <User key={validator} id={validator} handle={handles[validator]} />
           ))}
         </div>
         <div className="mx-1">
           {validators.slice(third * 2).map((validator: string) => (
-            <User key={validator} id={validator} />
+            <User key={validator} id={validator} handle={handles[validator]} />
           ))}
         </div>
       </div>

src/components/Dashboard/index.tsx

@@ -1,10 +1,8 @@
 import React from "react";
-import { Link } from "react-router-dom";
-import Blocks from "./Blocks";
 import { ActiveProposals, Council } from "..";
 import Nominators from "./Nominators";
 import Validators from "./Validators";
-import { Block } from "../../types";
+import { Block, Handles } from "../../types";
 
 interface IProps {
   block: number;
@@ -15,6 +13,7 @@ interface IProps {
   proposals: any;
   proposalCount: number;
   domain: string;
+  handles: Handles;
 }
 
 const Dashboard = (props: IProps) => {
@@ -31,18 +30,12 @@ const Dashboard = (props: IProps) => {
       </div>
       <div className="box">
         <h3>Active Proposals</h3>
-        <ActiveProposals proposals={props.proposals} />
+        <ActiveProposals block={props.block} proposals={props.proposals} />
       </div>
-      <Link to={"/council"}>
-        <Council council={props.council} />
-      </Link>
+      <Council council={props.council} handles={props.handles} />
       <div className="d-flex flex-row">
-        <Link to={"/validators"}>
-          <Validators validators={props.validators} />
-        </Link>
-        <Link to={"/nominators"}>
-          <Nominators nominators={props.nominators} />
-        </Link>
+        <Validators validators={props.validators} handles={props.handles} />
+        <Nominators nominators={props.nominators} handles={props.handles} />
       </div>
     </div>
   );

src/components/User/index.tsx

@@ -8,14 +8,14 @@ const shortName = (name: string) => {
 
 const User = (props: { id: string; handle?: string }) => {
   const { id, handle } = props;
-  
+  const href = `https://pioneer.joystreamstats.live/#/members/${handle || ``}`;
   return (
     <OverlayTrigger
       placement="bottom"
       overlay={<Tooltip id={id}>{id}</Tooltip>}
     >
-      <div>
-        <a href={`${domain}`}>{handle ? handle : shortName(id)}</a>
+      <div className="user mx-1">
+        <a href={href}>{handle ? handle : shortName(id)}</a>
       </div>
     </OverlayTrigger>
   );

src/index.css

@@ -43,7 +43,11 @@ h3 {
 }
 
 .proposals {
-    position: fixed;
-    right: 10px;
-    top: 10px;
+  position: fixed;
+  right: 10px;
+  top: 10px;
+}
+
+.user {
+  min-width: 125px;
 }

src/lib/getters.ts

@@ -34,6 +34,7 @@ export const memberHandleByAccount = async (
     account
   );
   const handle: string = await memberHandle(api, id);
+  if (handle === "joystream_storage_member") return "joystream";
   return handle;
 };
 

src/types.ts

@@ -67,3 +67,7 @@ export type NominatorsEntries = [StorageKey, Option<Nominations>][];
 export interface ProviderStatus {
   [propName: string]: boolean;
 }
+
+export interface Handles {
+  [key: string]: string;
+}