feat: tour de soul ranking

src/v2/components/TourDeSol/Cards/index.jsx

@@ -70,7 +70,7 @@ const Cards = () => {
     title: string,
     value: string | (() => React$Node),
     changes?: string,
-  }) => <Card title={title} value={value} changes={changes} />;
+  }) => <Card key={title} title={title} value={value} changes={changes} />;
 
   return <div className={classes.cards}>{map(renderStats)(cards)}</div>;
 };

src/v2/components/TourDeSol/Cards/styles.js

@@ -1,9 +1,9 @@
 import {makeStyles} from '@material-ui/core';
 
-export default makeStyles(() => ({
+export default makeStyles({
   cards: {
     '& div:not(:last-child)': {
       marginBottom: 20,
     },
   },
-}));
+});

src/v2/components/TourDeSol/Ranking/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {observer} from 'mobx-react-lite';
-import {map} from 'lodash/fp';
+import {get, map, maxBy, compose} from 'lodash/fp';
 import HelpLink from 'v2/components/HelpLink';
 import NodesStore from 'v2/stores/nodes';
 import {ReactComponent as BicycleIcon} from 'v2/assets/icons/bicycle.svg';
@@ -10,31 +10,40 @@ import useStyles from './styles';
 const Ranking = () => {
   const classes = useStyles();
   const {
-    cluster: {nodes},
+    cluster: {voting},
   } = NodesStore;
 
-  const renderNode = node => (
-    <li className={classes.item}>
-      <div className={classes.name}>{node.pubkey}</div>
-      <div className={classes.bar}>
-        <div className={classes.icon}>
-          <BicycleIcon />
+  const maxVal = compose(
+    get('stake'),
+    maxBy('stake'),
+  )(voting);
+
+  const renderNode = node => {
+    const position = (node.stake * 100) / maxVal;
+    return (
+      <li key={node.nodePubkey} className={classes.item}>
+        <div className={classes.name}>{node.nodePubkey}</div>
+        <div className={classes.bar}>
+          <div
+            className={classes.icon}
+            style={{left: `calc(${position}% - 26px)`}}
+          >
+            <BicycleIcon />
+          </div>
         </div>
-      </div>
-    </li>
-  );
+      </li>
+    );
+  };
 
   return (
     <div className={classes.root}>
       <div className={classes.header}>
         Top Validator Ranking
         <HelpLink text="" term="" />
       </div>
-      <ul className={classes.list}>{map(renderNode)(nodes)}</ul>
+      <ul className={classes.list}>{map(renderNode)(voting)}</ul>
     </div>
   );
 };
 
-Ranking.propTypes = {};
-
 export default observer(Ranking);

src/v2/components/TourDeSol/Ranking/styles.js

@@ -46,5 +46,6 @@ export default makeStyles(theme => ({
     position: 'absolute',
     top: '50%',
     transform: 'translateY(-50%)',
+    transition: 'left .15s ease-in-out',
   },
 }));