From ebc1a7914aa3b5d5da7262a2c66539f4ca3dcb3a Mon Sep 17 00:00:00 2001
From: Daniel <wi20b014@technikum-wien.at>
Date: Sat, 5 Nov 2022 13:02:18 +0100
Subject: [PATCH] Update AmountIn.js

---
 packages/react-app/src/components/AmountIn.js | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/react-app/src/components/AmountIn.js b/packages/react-app/src/components/AmountIn.js
index 03f2109..aeca9d6 100644
--- a/packages/react-app/src/components/AmountIn.js
+++ b/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>