Merge branch 'compare_coin_selection' into 'develop'

Add ability to select two cryptocurrencies for comparison

See merge request !10

src/cryptometrics/components/button/ToggleButton.js

+import React from "react";
+import classNames from "classnames";
+
+export function ToggleButton({ children, setActive, active, id }) {
+  return (
+    <button
+      className={classNames(" px-3 py-2 rounded-md font-light", {
+        "dark:bg-white dark:text-gray-800": active === id,
+        "dark:bg-black dark:text-gray-400": active !== id,
+      })}
+      onClick={() => setActive(id)}
+    >
+      {children}
+    </button>
+  );
+}

src/cryptometrics/components/charts/CompareChart.js

-import classNames from "classnames";
 import React, { useState, useRef } from "react";
 import ReactECharts from "echarts-for-react";
-import { useCryptoTimeSeriesRangeData } from "../../queries";
+import { useCryptoList, useCryptoTimeSeriesRangeData } from "../../queries";
 import moment from "moment";
+import { ToggleButton } from "../button/ToggleButton";
+import Dropdown from "../dropdown/Dropdown";
+import { ChevronDoubleRightIcon } from "@heroicons/react/outline";
 
 const unixNow = () => {
   return moment().unix();
@@ -15,13 +17,16 @@ const unixSubtractId = (id) => {
 function CompareChart() {
   const [timerange, setTimerange] = useState("6month");
   const chartRef = useRef(null);
+  const listOfCoins = useCryptoList("usd", 21, false);
+  const [firstCrypto, setFirstCrypto] = useState("solana");
+  const [secondCrypto, setSecondCrypto] = useState("ethereum");
   const cryptoQuery = useCryptoTimeSeriesRangeData(
-    "solana",
+    firstCrypto,
     unixSubtractId(timerange),
     unixNow()
   );
   const cryptoQuery2 = useCryptoTimeSeriesRangeData(
-    "avalanche-2",
+    secondCrypto,
     unixSubtractId(timerange),
     unixNow()
   );
@@ -67,7 +72,7 @@ function CompareChart() {
       {
         type: "line",
         data: cryptoQuery.data?.prices,
-        name: "Solana",
+        name: firstCrypto,
         smooth: true,
         symbol: "none",
         lineStyle: {
@@ -82,7 +87,7 @@ function CompareChart() {
       {
         type: "line",
         data: cryptoQuery2.data?.prices,
-        name: "Avalanche",
+        name: secondCrypto,
         smooth: true,
         symbol: "none",
         lineStyle: {
@@ -118,6 +123,24 @@ function CompareChart() {
         <ToggleButton id="1year" active={timerange} setActive={setTimerange}>
           1Y
         </ToggleButton>
+
+        <div className="flex-1">{/* Space Fillter */}</div>
+
+        <div className="flex flex-row space-x-5 items-center">
+          <Dropdown
+            list={listOfCoins.isLoading ? [] : listOfCoins.data}
+            value={firstCrypto}
+            setValue={setFirstCrypto}
+            disabled={[secondCrypto]}
+          />
+          <ChevronDoubleRightIcon className="w-5 h-5 dark:text-gray-300" />
+          <Dropdown
+            list={listOfCoins.isLoading ? [] : listOfCoins.data}
+            value={secondCrypto}
+            setValue={setSecondCrypto}
+            disabled={[firstCrypto]}
+          />
+        </div>
       </div>
       <div className="h-[600px] mt-10">
         <ReactECharts
@@ -132,18 +155,4 @@ function CompareChart() {
   );
 }
 
-function ToggleButton({ children, setActive, active, id }) {
-  return (
-    <button
-      className={classNames(" px-3 py-2 rounded-md font-light", {
-        "dark:bg-white dark:text-gray-800": active === id,
-        "dark:bg-black dark:text-gray-400": active !== id,
-      })}
-      onClick={() => setActive(id)}
-    >
-      {children}
-    </button>
-  );
-}
-
 export default CompareChart;

src/cryptometrics/components/dropdown/Dropdown.js

+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { ChevronDownIcon } from "@heroicons/react/outline";
+
+function getCoin(list, id) {
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].id == id) {
+      return list[i];
+    }
+  }
+  return null;
+}
+
+function Dropdown({ list, value, setValue, disabled }) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    setOpen(false);
+  }, [value]);
+
+  return (
+    <div className="relative">
+      <button
+        className={classNames(" px-3 py-2 rounded-md font-light", {
+          "dark:bg-white dark:text-gray-800": false,
+          "dark:bg-black dark:text-gray-400": true,
+        })}
+        onClick={() => setOpen(!open)}
+      >
+        <div className="flex flex-row items-center space-x-2">
+          <p>{getCoin(list, value)?.name}</p>
+          <ChevronDownIcon className="h-5 w-5" />
+        </div>
+      </button>
+      {open && (
+        <div className="absolute h-fit max-h-52 min-w-[9rem] w-fit bg-dark-900 top-12 right-0 rounded-xl z-50 overflow-y-scroll">
+          <div className="my-2">
+            {list.map((coin, index) => {
+              return (
+                <DropdownItem
+                  onClick={() => setValue(coin.id)}
+                  key={index}
+                  selected={coin.id === value}
+                  disabled={disabled.includes(coin.id)}
+                >
+                  {coin.name}
+                </DropdownItem>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DropdownItem({ children, onClick, selected, disabled }) {
+  return (
+    <div
+      className={classNames("py-2 px-4 rounded-xl mx-2", {
+        "opacity-75 dark:text-gray-500": disabled,
+        "bg-white dark:text-black": selected,
+        "hover:bg-dark-600 dark:text-white cursor-pointer":
+          !disabled && !selected,
+      })}
+      onClick={selected || disabled ? undefined : onClick}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Dropdown;