Tokenomics: show WG salaries in $ on hover

src/components/Tokenomics/Groups.tsx

@@ -5,27 +5,43 @@ import Loading from "../Loading";
 const mintTags = [``, ``, `Storage`, `Content`, `Operations`];
 const mJoy = (joy: number) => (joy ? (joy / 1000000).toFixed(3) : ``);
 
-const Groups = (props: { workers: {}; mints: number[] }) => {
-  const { mints, workers } = props;
+const Groups = (props: { price: nubmer; workers: {}; mints: number[] }) => {
+  const { mints, workers, price } = props;
   if (!mints?.length) return <div />;
   return (
     <div className="mt-3">
       <h2 className="m-3 text-center">Working Groups</h2>
       <div className="d-flex flex-wrap">
-        <Group workers={workers?.storage} mint={mints[2]} tag={mintTags[2]} />
-        <Group workers={workers?.content} mint={mints[3]} tag={mintTags[3]} />
+        <Group
+          workers={workers?.storage}
+          mint={mints[2]}
+          tag={mintTags[2]}
+          price={price}
+        />
+        <Group
+          workers={workers?.content}
+          mint={mints[3]}
+          tag={mintTags[3]}
+          price={price}
+        />
         <Group
           workers={workers?.operations}
           mint={mints[4]}
           tag={mintTags[4]}
+          price={price}
         />
       </div>
     </div>
   );
 };
 
-const Group = (props: { workers: any[]; mint: {}; tag: string }) => {
-  const { workers, mint, tag } = props;
+const Group = (props: {
+  price: number;
+  workers: any[];
+  mint: {};
+  tag: string;
+}) => {
+  const { workers, mint, tag, price } = props;
   if (!workers)
     return (
       <div className=" p-3 col-lg-4">
@@ -43,6 +59,10 @@ const Group = (props: { workers: any[]; mint: {}; tag: string }) => {
   );
   const stakes = workers.reduce((sum, { stake }) => sum + (stake || 0), 0);
 
+  const td = (joy: number) => (
+    <td title={`$` + (joy * price).toFixed(2)}>{mJoy(joy)}</td>
+  );
+
   return (
     <div className="p-3 col-lg-4">
       <h2 className="m-3 text-center">
@@ -62,9 +82,9 @@ const Group = (props: { workers: any[]; mint: {}; tag: string }) => {
           <tr className="font-weight-bold">
             <td></td>
             <td>Total</td>
-            <td>{mJoy(rewards * 28)}</td>
-            <td>{mJoy(mint.total_minted)}</td>
-            <td>{mJoy(stakes)}</td>
+            {td(rewards * 28)}
+            {td(mint.total_minted)}
+            {td(stakes)}
           </tr>
 
           {workers.map((w) => (
@@ -75,9 +95,9 @@ const Group = (props: { workers: any[]; mint: {}; tag: string }) => {
                   {w.handle}
                 </Link>
               </td>
-              <td>{mJoy(w.reward?.amount_per_payout * 28)}</td>
-              <td>{mJoy(w.reward?.total_reward_received)}</td>
-              <td>{mJoy(w.stake)}</td>
+              {td(w.reward?.amount_per_payout * 28)}
+              {td(w.reward?.total_reward_received)}
+              {td(w.stake)}
             </tr>
           ))}
         </tbody>

src/components/Tokenomics/index.tsx

@@ -29,7 +29,7 @@ const TokenStats = (props: IProps) => {
       <h1 className="m-3 text-center">Tokenomics</h1>
       <Overview groups={groups} tokenomics={tokenomics} />
       <Spending groups={groups} price={tokenomics.price} />
-      <Groups mints={mints} workers={workers} />
+      <Groups mints={mints} workers={workers} price={tokenomics.price} />
       <Burns
         exchanges={exchanges}
         extecutedBurnsAmount={extecutedBurnsAmount}