Update AmountIn.js

packages/react-app/src/components/AmountIn.js

@@ -1,69 +1,67 @@
 import React, { useState, useEffect, useRef } from "react";
 
-import { chevronDown } from "../assets"; // icon
+import { chevronDown } from "../assets";
-import { useOnClickOutside } from "../utils"; //helps to close menu bar
+import { useOnClickOutside } from "../utils";
 import styles from "../styles";
 
-const AmountIn = () => {
+const AmountIn = ({ value, onChange, currencyValue, onSelect, currencies, isSwapping }) => {
-    const [showList, setShowList] = useState(false);
+  const [showList, setShowList] = useState(false);
-    const [activeCurrency, setActiveCurrency] = useState("Select");
+  const [activeCurrency, setActiveCurrency] = useState("Select");
-    const ref = useRef()
+  const ref = useRef()
 
-    useOnClickOutside(ref, () => setShowList(false))
+  useOnClickOutside(ref, () => setShowList(false))
 
-    useEffect(() => {
+  useEffect(() => {
-        if (Object.keys(currencies).includes(currencyValue))
+    if (Object.keys(currencies).includes(currencyValue))
-            setActiveCurrency(currencies[currencyValue]);
+      setActiveCurrency(currencies[currencyValue]);
-        else setActiveCurrency("Select");
+    else setActiveCurrency("Select");
-    }, [currencies, currencyValue]);
+  }, [currencies, currencyValue]);
 
-    return(
+  return (
-        <div className={styles.amountContainer}>
+    <div className={styles.amountContainer}>
-        <input
+      <input
-          placeholder="0.0"
+        placeholder="0.0"
-          type="number"
+        type="number"
-          value={value}
+        value={value}
-          disabled={isSwapping}
+        disabled={isSwapping}
-          onChange={(e) => typeof onChange === "function" && onChange(e.target.value)}
+        onChange={(e) => typeof onChange === "function" && onChange(e.target.value)}
-          className={styles.amountInput}
+        className={styles.amountInput}
-        />
+      />
 
-        <div className="relative" onClick={() => setShowList(!showList)}>
+      <div className="relative" onClick={() => setShowList(!showList)}>
-          <button className={styles.currencyButton}>
+        <button className={styles.currencyButton}>
-            {activeCurrency}
+          {activeCurrency}
-            <img
+          <img
-              src={chevronDown}
+            src={chevronDown}
-              alt="cheveron-down"
+            alt="cheveron-down"
-              className={`w-4 h-4 object-contain ml-2 ${
+            className={`w-4 h-4 object-contain ml-2 ${
-                showList ? "rotate-180" : "rotate-0"
+              showList ? "rotate-180" : "rotate-0"
-              }`}
+            }`}
-            />
+          />
-          </button>
+        </button>
 
-          {showList && (
+        {showList && (
-            <ul ref={ref} className={styles.currencyList}>
+          <ul ref={ref} className={styles.currencyList}>
-              {Object.entries(currencies).map(([token, tokenName], index) => (
+            {Object.entries(currencies).map(([token, tokenName], index) => (
-                <li
+              <li
-                  key={index}
+                key={index}
-                  className={`${styles.currencyListItem} ${
+                className={`${styles.currencyListItem} ${
-                    activeCurrency === tokenName ? "bg-site-dim2" : ""
+                  activeCurrency === tokenName ? "bg-site-dim2" : ""
-                  } cursor-pointer`}
+                } cursor-pointer`}
-                  onClick={() => {
+                onClick={() => {
-                    if (typeof onSelect === "function") onSelect(token);
+                  if (typeof onSelect === "function") onSelect(token);
-                    setActiveCurrency(tokenName);
+                  setActiveCurrency(tokenName);
-                    setShowList(false);
+                  setShowList(false);
-                  }}
+                }}
-                >
+              >
-                  {tokenName}
+                {tokenName}
-                </li>
+              </li>
-              ))}
+            ))}
-            </ul>
+          </ul>
-          )}
+        )}
-        </div>
       </div>
-    )
+    </div>
-}
+  );
-
+};
-
-
 
+export default AmountIn;