Update AmountOut.js

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

@@ -6,62 +6,62 @@ import { useAmountsOut, useOnClickOutside } from "../utils";
 import styles from "../styles";
 
 const AmountOut = ({ fromToken, toToken, amountIn, pairContract, currencyValue, onSelect, currencies }) => {
-    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()
 
-    const amountOut = useAmountsOut(pairContract, amountIn, fromToken, toToken) ?? 0;
+  const amountOut = useAmountsOut(pairContract, amountIn, fromToken, toToken) ?? 0;
 
-    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 {
+    } else {
-            setActiveCurrency("Select")
+      setActiveCurrency("Select")
-        }
+    }
-    }, [currencyValue, currencies]);
+  }, [currencyValue, currencies]);
 
-    return (
+  return (
-        <div className={styles.amountContainer}>
+    <div className={styles.amountContainer}>
-            <input
+      <input
-                placeholder="0.0"
+        placeholder="0.0"
-                type="number"
+        type="number"
-                value={formatUnits(amountOut)}
+        value={formatUnits(amountOut)}
-                disabled
+        className={styles.amountInput}
-                className={styles.amountInput}
+        disabled
-            />
+      />
 
-            <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 ${showList ? "rotate-180" : "rotate-0"}`}
+            className={`w-4 h-4 object-contain ml-2 ${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}
-                                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>
+    </div>
-    );
+  );
 };
 
 export default AmountOut;