Update AmountIn.js

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

@@ -6,7 +6,16 @@ import styles from "../styles";
 
 const AmountIn = () => {
     const [showList, setShowList] = useState(false);
+    const [activeCurrency, setActiveCurrency] = useState("Select");
+    const ref = useRef()
     
+    useOnClickOutside(ref, () => setShowList(false))
+
+    useEffect(() => {
+        if (Object.keys(currencies).includes(currencyValue))
+            setActiveCurrency(currencies[currencyValue]);
+        else setActiveCurrency("Select");
+    }, [currencies, currencyValue]);
 
     return(
         <div className={styles.amountContainer}>
@@ -31,6 +40,24 @@ const AmountIn = () => {
                 </button>
 
                 {showList && (
+                    <ul ref={ref} className={styles.currencyList}>
+                        {Object.entries(currencies).map(([token, tokenName], index) => (
+                            <li
+                                key={index}
+                                className={`${styles.currencyListItem} ${
+                                    activeCurrency === tokenName ? "bg-site-dim2" : ""
+                                } cursor-pointer`}
+                                onClick={() => {
+                                    if (typeof onSelect === "function") onSelect(token);
+                                    setActiveCurrency(tokenName);
+                                    setShowList(false);
+                                }}
+                            >
+                                {tokenName}
+                            </li>
+                        ))}
+                    </ul>
+                )}
 
 
             </div>