proposal tooltip

src/components/Proposals/Active.tsx

@@ -2,9 +2,12 @@ import React from "react";
 import Proposal from "./ProposalOverlay";
 
 const ActiveProposals = (props: any) => {
-  const active = props.proposals.filter((p: any) => p.stage === "Active");
+  const { block, proposals } = props;
+  const active = proposals.filter((p: any) => p.stage === "Active");
   if (!active.length) return <div className="box">No active proposals.</div>;
-  return active.map((p: any, key: number) => <Proposal key={key} {...p} />);
+  return active.map((p: any, key: number) => (
+    <Proposal key={key} block={block} {...p} />
+  ));
 };
 
 export default ActiveProposals;

src/components/Proposals/ProposalOverlay.tsx

@@ -3,21 +3,32 @@ import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import htmr from "htmr";
 
 const ProposalOverlay = (props: any) => {
+  const { block, createdAt, parameters } = props;
+
+  const remainingBlocks = +createdAt + +parameters.votingPeriod - block;
+  const remainingTime = remainingBlocks * 6;
+  const days = Math.floor(remainingTime / 86400);
+  const hours = Math.floor((remainingTime - days * 86400) / 3600);
+
   return (
     <OverlayTrigger
       placement="right"
+      delay={{ show: 250, hide: 400 }}
       overlay={
         <Tooltip id={props.title}>
-          <div className="text-left">
+          <div>
+            Time to vote: {remainingBlocks} blocks ({days}d {hours}h)
+          </div>
+          <div className="my-2 text-left">
             {htmr(props.message.replace(/\n/, "<br/>"))}
           </div>
+          {props.description}
         </Tooltip>
       }
     >
       <div>
-        {props.title}{" "}
         <a href={`https://pioneer.joystreamstats.live/#/proposals/${props.id}`}>
-          &rsaquo;
+          {props.title}
         </a>
       </div>
     </OverlayTrigger>

src/lib/getters.ts

@@ -116,7 +116,7 @@ export const proposalDetail = async (
     : "Pending";
   const exec = proposalStatus ? proposalStatus["Approved"] : null;
 
-  const { parameters, proposerId } = proposal;
+  const { description, parameters, proposerId } = proposal;
   const author: string = await memberHandle(api, proposerId);
   const title: string = proposal.title.toString();
   const type: string = await getProposalType(api, id);
@@ -133,6 +133,7 @@ export const proposalDetail = async (
     stage,
     result,
     exec,
+    description,
   };
 };
 

src/types.ts

@@ -33,6 +33,7 @@ export interface ProposalDetail {
   exec: any;
   id: number;
   title: string;
+  description: any;
 }
 
 export type ProposalArray = number[];