✨ Pair daily price chart, refs #9

src/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 
 ## [Unreleased]
-  - Fetch raw price feed of a pair, refs #9
+  - Pair price chart page, refs #9
 
 ## [2020.10.24]
   - Autodeploy on merge, refs #1

src/components/Pair.jsx

@@ -22,7 +22,7 @@ EtherscanTokenLink.defaultProps = {
 };
 
 const PairDetailsLink = ({ onClick }) => (
-  <Button type="link" onClick={onClick}>Details 1</Button>
+  <Button type="link" onClick={onClick}>Details</Button>
 );
 PairDetailsLink.propTypes = {
   onClick: PropTypes.func.isRequired,
@@ -46,8 +46,10 @@ const Pair = ({ address, pairDict }) => {
         />
       </td>
       <td>
-        $
-        { pairDict.token_price.toFixed(decimalPlace) }
+        <Link to={`/pairs/${pairDict.contract_address}`}>
+          $
+          { pairDict.token_price.toFixed(decimalPlace) }
+        </Link>
       </td>
       <td>
         { pairDict.share.toFixed(decimalPlace) }
@@ -73,10 +75,6 @@ const Pair = ({ address, pairDict }) => {
       <td>
         <PairDetails pairDict={pairDict} show={showDetails} onHide={() => setShowDetails(false)} />
         <PairDetailsLink onClick={() => setShowDetails(true)} />
-        {' '}
-        <Link to={`/pairs/${pairDict.contract_address}`}>
-          <Button type="link">Details 2</Button>
-        </Link>
       </td>
     </tr>
   );

src/components/Pool.jsx

@@ -1,21 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Line } from 'react-chartjs-2';
+import Title from './Title';
 
 const TokenDaily = {
   date: PropTypes.instanceOf(Date).isRequired,
   price_usd: PropTypes.number.isRequired,
 };
 
+const PoolPropTypes = {
+  pairDailyList: PropTypes.arrayOf(TokenDaily).isRequired,
+};
+
+const LineChart = ({ pairDailyList }) => {
+  const sortedPairDailyList = pairDailyList.sort(
+    (a, b) => new Date(b.date) - new Date(a.date),
+  );
+  const labels = sortedPairDailyList.map((pairDaily) => pairDaily.date);
+  const datasetsData = sortedPairDailyList.map((pairDaily) => pairDaily.price_usd);
+  const data = {
+    labels,
+    datasets: [{
+      label: 'Price USD',
+      data: datasetsData,
+    }],
+  };
+  return <Line data={data} />;
+};
+LineChart.propTypes = PoolPropTypes;
+
 const Pool = ({ pairDailyList }) => (
   <>
-    <p>Pool page</p>
-    <pre>
-      {JSON.stringify(pairDailyList, null, 2)}
-    </pre>
+    <Title title="Pair" />
+    <LineChart pairDailyList={pairDailyList} />
   </>
 );
-Pool.propTypes = {
-  pairDailyList: PropTypes.arrayOf(TokenDaily).isRequired,
-};
+Pool.propTypes = PoolPropTypes;
 
 export default Pool;