Merge branch 'develop' into 'main'

Merge develop into main

See merge request !17

src/cryptometrics/.gitignore

@@ -32,3 +32,9 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# parcel
+.parcel-cache
+
+# docs
+docs

src/cryptometrics/.postcssrc

+{
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
\ No newline at end of file

src/cryptometrics/components/button/Button.js

-import classNames from "classnames";
 import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
 
-export default function Button({ children, className, onClick }) {
+/**
+ * Custom button component
+ *
+ * @component
+ * @example
+ * return (
+ *   <Button className="bg-indigo-500 text-white" onClick={() => console.log("Button pressed")}>
+ *      Hello!
+ *   </Button>
+ * )
+ */
+function Button({ children, className, onClick, type, disabled }) {
   return (
     <button
-      className={classNames("py-2 px-5 rounded-xl", className)}
-      onClick={onClick}
+      className={classNames("py-2 px-5 rounded-xl", className, {
+        "brightness-50 cursor-default": disabled,
+      })}
+      onClick={disabled ? undefined : onClick}
+      type={type ? type : "button"}
     >
       {children}
     </button>
   );
 }
+
+Button.propTypes = {
+  /**
+   * The content inside the button
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Additional CSS classes for the button (optional)
+   */
+  className: PropTypes.string,
+  /**
+   * The function to run when button is pressed
+   */
+  onClick: PropTypes.func,
+  /**
+   * The type of button
+   */
+  type: PropTypes.string,
+  /**
+   * Whether the button is disabled
+   */
+  disabled: PropTypes.bool,
+};
+
+Button.defaultProps = {
+  type: "button",
+};
+
+export default Button;

src/cryptometrics/components/button/FilterButton.js

+import React from "react";
+import Button from "./Button";
+
+export default function FilterButton({ icon, onClick }) {
+  return (
+    <Button
+      className="mx-1 mt-2 font-sans font-normal bg-dark-600 rounded-lg dark:text-neutral-200 dark:hover:text-indigo-600 inline-flex h-10 w-10 justify-center items-center whitespace-nowrap"
+      onClick={onClick}
+    >
+      <span className="text-white">{icon}</span>
+    </Button>
+  );
+}

src/cryptometrics/components/button/ToggleButton.js

+import React from "react";
+import classNames from "classnames";
+import Button from "./Button";
+import PropTypes from "prop-types";
+
+/**
+ * Button component for toggling items on/off
+ *
+ * @component
+ * @example
+ * return (
+ *   <ToggleButton id={"demo"} active={"demo2"} setActive={() => console.log("active!")}>
+ *      Demo
+ *   </ToggleButton>
+ * )
+ */
+function ToggleButton({ children, setActive, active, id, className }) {
+  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,
+        },
+        className
+      )}
+      onClick={() => setActive(id)}
+    >
+      {children}
+    </Button>
+  );
+}
+
+ToggleButton.propTypes = {
+  /**
+   * The content inside the button
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Additional CSS classes for the button (optional)
+   */
+  className: PropTypes.string,
+  /**
+   * The id of the currently active button
+   */
+  active: PropTypes.string.isRequired,
+  /**
+   * The function to run to make button active
+   */
+  setActive: PropTypes.func.isRequired,
+  /**
+   * Unique identifier for the button
+   */
+  id: PropTypes.string.isRequired,
+};
+
+export default ToggleButton;

src/cryptometrics/components/button/index.js

+import ToggleButton from "./ToggleButton";
+import Button from "./Button";
+import FilterButton from "./FilterButton";
+
+export { Button, ToggleButton, FilterButton };

src/cryptometrics/components/cards/CryptoChartCard.js

@@ -5,9 +5,15 @@ import classNames from "classnames";
 import Image from "next/image";
 import Link from "next/link";
 import { useCryptoTimeSeriesData } from "../../queries";
+import PropTypes from "prop-types";
 
 const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
+/**
+ * Card component with an embedded chart for Crypto
+ *
+ * @component
+ */
 function CryptoChartCard({
   currencyName,
   currencyId,
@@ -103,4 +109,43 @@ function CryptoChartCard({
   );
 }
 
+CryptoChartCard.propTypes = {
+  /**
+   * The name of the cryptocurrency
+   */
+  currencyName: PropTypes.string.isRequired,
+  /**
+   * The id of the cryptocurrency
+   */
+  currencyId: PropTypes.string.isRequired,
+  /**
+   * The symbol of the cryptocurrency
+   */
+  symbol: PropTypes.string.isRequired,
+  /**
+   * The icon for the cryptocurrency
+   */
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  /**
+   * Any specific info for the cryptocurrency
+   */
+  info: PropTypes.string.isRequired,
+  /**
+   * The specific detail for the cryptocurrency
+   */
+  detail: PropTypes.string.isRequired,
+  /**
+   * A color for the detail text
+   */
+  detailColor: PropTypes.string.isRequired,
+  /**
+   * The options for the embedded chart
+   */
+  options: PropTypes.object.isRequired,
+  /**
+   * The type of the chart
+   */
+  type: PropTypes.string.isRequired,
+};
+
 export default CryptoChartCard;

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";
+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("avalanche-2");
   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, useRef, useCallback } from "react";
+import classNames from "classnames";
+import { ChevronDownIcon } from "@heroicons/react/outline";
+import { useOnClickOutside } from "../../hooks";
+import DropdownItem from "./DropdownItem";
+
+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);
+  const ref = useRef(null);
+  const callbackDropdownClose = useCallback(() => setOpen(false), []);
+  useOnClickOutside(ref, callbackDropdownClose);
+
+  useEffect(() => {
+    setOpen(false);
+  }, [value]);
+
+  return (
+    <div className="relative" ref={ref}>
+      <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>
+  );
+}
+
+export default Dropdown;

src/cryptometrics/components/dropdown/DropdownItem.js

+import classNames from "classnames";
+import React from "react";
+
+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 DropdownItem;

src/cryptometrics/components/dropdown/FilterDropdown.js

-import { ArrowRightIcon } from "@heroicons/react/outline";
-import classNames from "classnames";
-import React, { useState, useEffect } from "react";
-import Button from "../button/Button";
-import { RadioInputForm } from "../radio/RadioForm";
+import React, { useState, useEffect, useRef } from "react";
 import { CSSTransition } from "react-transition-group";
+import FilterDropdownItem from "./FilterDropdownItem";
+import SecondaryFilterDropdown from "./SecondaryFilterDropdown";
+import classNames from "classnames";
 
-export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
+export function FilterDropdown({
+  filterOptions,
+  setOpen,
+  addFilter,
+  dropdownRef,
+}) {
   const [selectedFilter, setSelectedFilter] = useState(null);
-
   const [radioValue, setRadioValue] = useState("is");
   const [inputValue, setInputValue] = useState("");
+  const secondaryDropdownRef = useRef(null);
 
   useEffect(() => {
     if (selectedFilter) {
-      setRadioValue(
-        filterOptions[selectedFilter].options[
-          Object.keys(filterOptions[selectedFilter].options)[0]
-        ].name
-      );
+      setRadioValue(Object.keys(filterOptions[selectedFilter].options)[0]);
     }
   }, [filterOptions, selectedFilter]);
 
@@ -35,7 +35,7 @@ export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
 
   const onFilterAdd = () => {
     addFilter({
-      subject: filterOptions[selectedFilter].name,
+      subject: selectedFilter,
       condition: radioValue,
       value: inputValue,
     });
@@ -43,33 +43,38 @@ export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
   };
 
   return (
-    <div className="absolute flex flex-row z-50">
+    <div className="absolute flex flex-row z-50" ref={dropdownRef}>
       <div
         className={classNames(
           "dark:bg-dark-600 w-56 h-max max-h-72 rounded-xl mt-2 transition-all duration-100 p-1 overflow-y-scroll shadow-lg shadow-dark-600"
         )}
       >
-        {Object.keys(filterOptions).map((key) => {
-          return (
-            <FilterDropdownItem
-              key={"primary_option_" + key}
-              selected={selectedFilter === key}
-              id={key}
-              onClick={onSelectedFilterChange}
-            >
-              {filterOptions[key].name}
-            </FilterDropdownItem>
-          );
-        })}
+        {Object.keys(filterOptions).length > 0 ? (
+          Object.keys(filterOptions).map((key) => {
+            return (
+              <FilterDropdownItem
+                key={"primary_option_" + key}
+                selected={selectedFilter === key}
+                id={key}
+                onClick={onSelectedFilterChange}
+              >
+                {filterOptions[key].name}
+              </FilterDropdownItem>
+            );
+          })
+        ) : (
+          <FilterDropdownItem disabled>No options available</FilterDropdownItem>
+        )}
       </div>
       <CSSTransition
-        in={selectedFilter}
+        in={selectedFilter !== null}
         classNames="secondary-dropdown"
         timeout={300}
         unmountOnExit
+        nodeRef={secondaryDropdownRef}
       >
         {selectedFilter ? (
-          <span className="ml-3">
+          <span className="ml-3" ref={secondaryDropdownRef}>
             <SecondaryFilterDropdown
               open={true}
               onSelectedFilterChange={onSelectedFilterChange}
@@ -79,82 +84,17 @@ export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
               inputValue={inputValue}
               onInputChange={onInputChange}
               onFilterAdd={onFilterAdd}
+              inputLeftSymbol={filterOptions[selectedFilter]?.symbol_left}
+              inputRightSymbol={filterOptions[selectedFilter]?.symbol_right}
+              inputType={filterOptions[selectedFilter]?.input_type}
             />
           </span>
         ) : (
-          <div></div>
+          <div ref={secondaryDropdownRef}></div>
         )}
       </CSSTransition>
     </div>
   );
 }
 
-export function SecondaryFilterDropdown({
-  open,
-  onSelectedFilterChange,
-  radioOptions,
-  radioValue,
-  onRadioChange,
-  inputValue,
-  onInputChange,
-  onFilterAdd,
-}) {
-  return (
-    <div
-      className={classNames(
-        "dark:bg-dark-600 w-72 max-h-72 rounded-xl mt-2 transition-all duration-100 px-5 py-2 overflow-y-scroll shadow-lg shadow-dark-600",
-        {
-          block: open,
-          hidden: !open,
-        }
-      )}
-    >
-      <RadioInputForm
-        options={radioOptions}
-        radioValue={radioValue}
-        onRadioChange={onRadioChange}
-        inputValue={inputValue}
-        onInputChange={onInputChange}
-      />
-      <div className="flex flex-row space-x-2 mb-2">
-        <Button
-          className="bg-neutral-100 text-gray-700 font-semibold"
-          onClick={() => onSelectedFilterChange(null)}
-        >
-          Cancel
-        </Button>
-        <Button
-          className="bg-indigo-600 text-white font-semibold w-full"
-          onClick={onFilterAdd}
-        >
-          Filter
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-// selected: boolean
-function FilterDropdownItem({ children, selected, onClick, id }) {
-  return (
-    <div
-      className={classNames(
-        "py-3 px-4 rounded-xl dark:text-neutral-100 hover:bg-dark-800 border-1 transition-all duration-100 cursor-pointer",
-        {
-          "border-transparent": !selected,
-          "bg-dark-800  border-indigo-600 font-semibold": selected,
-        }
-      )}
-      onClick={() => onClick(id)}
-    >
-      <div className="flex flex-row items-center">
-        {children}
-        {selected && (
-          <span className="ml-auto">
-            <ArrowRightIcon className="w-4 h-4" />
-          </span>
-        )}
-      </div>
-    </div>
-  );
-}
+export default FilterDropdown;

src/cryptometrics/components/dropdown/FilterDropdownItem.js

+import React from "react";
+import classNames from "classnames";
+import { ArrowRightIcon } from "@heroicons/react/outline";
+
+// selected: boolean
+function FilterDropdownItem({
+  children,
+  selected,
+  onClick,
+  id,
+  disabled = false,
+}) {
+  return (
+    <div
+      className={classNames(
+        "py-3 px-4 rounded-xl dark:text-neutral-100 border-1 transition-all duration-100 cursor-pointer",
+        {
+          "border-transparent": !selected,
+          "bg-dark-800  border-indigo-600 font-semibold": selected,
+          "hover:bg-dark-800": !disabled,
+        }
+      )}
+      onClick={disabled || !onClick ? undefined : () => onClick(id)}
+    >
+      <div className="flex flex-row items-center">
+        {children}
+        {selected && (
+          <span className="ml-auto">
+            <ArrowRightIcon className="w-4 h-4" />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default FilterDropdownItem;

src/cryptometrics/components/dropdown/SecondaryFilterDropdown.js

+import React from "react";
+import { Button } from "../button";
+import RadioInputForm from "../radio/RadioForm";
+import classNames from "classnames";
+
+export function SecondaryFilterDropdown({
+  open,
+  onSelectedFilterChange,
+  radioOptions,
+  radioValue,
+  onRadioChange,
+  inputValue,
+  onInputChange,
+  onFilterAdd,
+  inputLeftSymbol,
+  inputRightSymbol,
+  inputType,
+}) {
+  return (
+    <div
+      className={classNames(
+        "dark:bg-dark-600 w-72 max-h-72 rounded-xl mt-2 transition-all duration-100 px-5 py-2 overflow-y-scroll shadow-lg shadow-dark-600",
+        {
+          block: open,
+          hidden: !open,
+        }
+      )}
+    >
+      <RadioInputForm
+        options={radioOptions}
+        radioValue={radioValue}
+        onRadioChange={onRadioChange}
+        inputValue={inputValue}
+        onInputChange={onInputChange}
+        inputLeftSymbol={inputLeftSymbol}
+        inputRightSymbol={inputRightSymbol}
+        inputType={inputType}
+        onSubmit={onFilterAdd}
+      />
+      <div className="flex flex-row space-x-2 mb-2">
+        <Button
+          className="bg-neutral-100 text-gray-700 font-semibold"
+          onClick={() => onSelectedFilterChange(null)}
+        >
+          Cancel
+        </Button>
+        <Button
+          className="bg-indigo-600 text-white font-semibold w-full"
+          onClick={onFilterAdd}
+          type="submit"
+          disabled={inputValue === ""}
+        >
+          Filter
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default SecondaryFilterDropdown;

src/cryptometrics/components/filters/Filter.js

 import React from "react";
+import Button from "../button/Button";
 
-export function Filter({
+function Filter({
   subject,
   condition,
   value,
+  symbolLeft,
+  symbolRight,
   buttonIcon,
   onButtonClick,
 }) {
@@ -14,33 +17,22 @@ export function Filter({
         <span className="font-light dark:text-neutral-300">
           {condition}&nbsp;
         </span>
-        <span>{value}</span>
+        <span>
+          {symbolLeft}
+          {value}
+          {symbolRight}
+        </span>
       </div>
 
       {/* Button */}
-      <button
+      <Button
         onClick={onButtonClick}
-        className="mr-2 p-2 bg-dark-600 hover:dark:bg-dark-800 rounded-r-lg justify-center items-center h-10 w-10 inline-flex font-thin text-white"
+        className="mr-2 p-2 bg-dark-600 hover:dark:bg-dark-800 rounded-r-lg rounded-l-none justify-center items-center h-10 w-10 inline-flex font-thin text-white"
       >
         <span>{buttonIcon}</span>
-      </button>
+      </Button>
     </div>
   );
 }
 
-export function FilterButton({ icon, onClick }) {
-  return (
-    <button
-      className="mx-1 mt-2 font-sans font-normal bg-dark-600 rounded-lg dark:text-neutral-200 dark:hover:text-indigo-600 inline-flex h-10 w-10 justify-center items-center whitespace-nowrap"
-      onClick={onClick}
-    >
-      {icon}
-    </button>
-  );
-}
-
-export function Filters({ children }) {
-  return (
-    <div className="flex flex-wrap justify-start items-center">{children}</div>
-  );
-}
+export default Filter;

src/cryptometrics/components/filters/Filters.js

+import React from "react";
+
+function Filters({ children }) {
+  return (
+    <div className="flex flex-wrap justify-start items-center">{children}</div>
+  );
+}
+
+export default Filters;

src/cryptometrics/components/filters/index.js

+import Filter from "./Filter";
+import Filters from "./Filters";
+
+export { Filter, Filters };

src/cryptometrics/components/inputs/Input.js

+import classNames from "classnames";
 import React from "react";
 
-function Input({ placeholder, type, onChange, initialValue }) {
+function Input({
+  className,
+  placeholder,
+  type,
+  onChange,
+  initialValue,
+  symbolLeft,
+  symbolRight,
+}) {
   return (
-    <input
-      className="w-full h-12 text-base focus:ring-indigo-500 focus:border-indigo-500 border-1 border-transparent font-semibold outline-none dark:text-white px-3 pr-3 rounded-2xl bg-dark-800"
-      placeholder={placeholder}
-      type={type ? type : "text"}
-      onChange={onChange}
-      defaultValue={initialValue || ""}
-    ></input>
+    <span className="relative flex w-full flex-wrap items-stretch mb-3">
+      {symbolLeft && (
+        <span className="absolute left-3 w-5 text-center items-center justify-center h-full z-10 py-3">
+          <p className="dark:text-white align-top font-extralight">
+            {symbolLeft}
+          </p>
+        </span>
+      )}
+      <input
+        className={classNames(
+          "relative w-full h-12 text-base focus:ring-indigo-500 focus:border-indigo-500 border-1 border-transparent font-semibold outline-none dark:text-white rounded-2xl bg-dark-800",
+          {
+            "pr-3": !symbolRight,
+            "pr-8": symbolRight,
+            "pl-3": !symbolLeft,
+            "pl-8": symbolLeft,
+          },
+          className
+        )}
+        placeholder={placeholder}
+        type={type ? type : "text"}
+        onChange={onChange}
+        defaultValue={initialValue || ""}
+      ></input>
+      {symbolRight && (
+        <span className="absolute right-3 w-5 text-center items-center justify-center h-full z-10 py-3">
+          <p className="dark:text-white align-top font-extralight">
+            {symbolRight}
+          </p>
+        </span>
+      )}
+    </span>
   );
 }
 

src/cryptometrics/components/inputs/SearchInput.js

 import React from "react";
 import { SearchIcon } from "@heroicons/react/outline";
+import Input from "./Input";
 
 function SearchInput({ onChange }) {
   return (
     <div className="relative">
-      <input
+      <Input
         className="w-52 h-12 text-base font-semibold outline-none dark:text-white px-3 pr-10 rounded-2xl bg-dark-700"
         placeholder="Search"
         type="text"
         onChange={onChange}
-      ></input>
-      <button className="absolute top-0 right-3 bottom-0 w-6">
-        <SearchIcon className="w-6 h-6 dark:text-white" />
-      </button>
+        symbolRight={<SearchIcon className="w-6 h-6 dark:text-white" />}
+      ></Input>
     </div>
   );
 }

src/cryptometrics/components/radio/Radio.js

+import React from "react";
+import classNames from "classnames";
+
+function Radio({ selected, radioValue, radioLabel, onChange }) {
+  return (
+    <label className="inline-flex items-center w-full">
+      <input
+        type="radio"
+        className="form-radio h-4 w-4 accent-indigo-600 hover:accent-indigo-700"
+        value={radioValue}
+        checked={selected === radioValue}
+        onChange={onChange}
+      />
+      <span
+        className={classNames("font-poppins ml-2 text-base", {
+          "dark:text-white font-extralight": selected !== radioValue,
+          "dark:text-indigo-500": selected === radioValue,
+        })}
+      >
+        {radioLabel}
+      </span>
+    </label>
+  );
+}
+export default Radio;

src/cryptometrics/components/radio/RadioForm.js

-import classNames from "classnames";
 import React from "react";
 import Input from "../inputs/Input";
+import Radio from "./Radio";
 
-export function RadioInputForm({
+function RadioInputForm({
+  inputLeftSymbol,
+  inputRightSymbol,
+  inputType,
   options,
   radioValue,
   onRadioChange,
   inputValue,
   onInputChange,
+  onSubmit,
 }) {
   return (
-    <div>
+    <form onSubmit={onSubmit}>
       <div className="flex flex-col py-2 space-y-2">
         {Object.keys(options).map((key) => {
           return (
-            <div key={"radio_option_" + options[key].id}>
+            <div key={"radio_option_" + key}>
               <Radio
                 selected={radioValue}
-                radioValue={options[key].name}
-                id={options[key].id}
+                radioValue={key}
+                radioLabel={options[key].name}
+                id={key}
                 onChange={onRadioChange}
               />
               <div className="my-1">
-                {options[key].name === radioValue && (
+                {key === radioValue && (
                   <Input
-                    type="text"
                     placeholder="Enter a value here..."
                     initialValue={inputValue}
                     onChange={onInputChange}
+                    symbolLeft={inputLeftSymbol}
+                    symbolRight={inputRightSymbol}
+                    type={inputType}
                   />
                 )}
               </div>
@@ -35,28 +42,8 @@ export function RadioInputForm({
           );
         })}
       </div>
-    </div>
+    </form>
   );
 }
 
-export function Radio({ selected, radioValue, onChange }) {
-  return (
-    <label className="inline-flex items-center w-full">
-      <input
-        type="radio"
-        className="form-radio h-4 w-4 accent-indigo-600 hover:accent-indigo-700"
-        value={radioValue}
-        checked={selected === radioValue}
-        onChange={onChange}
-      />{" "}
-      <span
-        className={classNames("font-poppins ml-2 text-base", {
-          "dark:text-white font-extralight": selected !== radioValue,
-          "dark:text-indigo-500": selected === radioValue,
-        })}
-      >
-        {radioValue}
-      </span>
-    </label>
-  );
-}
+export default RadioInputForm;