Update AmountIn.js

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

@@ -19,49 +19,48 @@ const AmountIn = () => {
 
     return(
         <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)}>
+          <button className={styles.currencyButton}>
+            {activeCurrency}
+            <img
+              src={chevronDown}
+              alt="cheveron-down"
+              className={`w-4 h-4 object-contain ml-2 ${
+                showList ? "rotate-180" : "rotate-0"
+              }`}
             />
-            <div className="relative" onClick={() => setShowList(!showList)}>
+          </button>
-                <button className={styles.currencyButton}>
+  
-                    {"FHT"}
+          {showList && (
-                    <img
+            <ul ref={ref} className={styles.currencyList}>
-                        src={chevronDown}
+              {Object.entries(currencies).map(([token, tokenName], index) => (
-                        alt="cheveron-down"
+                <li
-                        className={`w-4 h-4 object-contain ml-2 ${
+                  key={index}
-                            showList ? "rotate-180" : "rotate-0"
+                  className={`${styles.currencyListItem} ${
-                        }`}
+                    activeCurrency === tokenName ? "bg-site-dim2" : ""
-                    />
+                  } cursor-pointer`}
-                </button>
+                  onClick={() => {
-
+                    if (typeof onSelect === "function") onSelect(token);
-                {showList && (
+                    setActiveCurrency(tokenName);
-                    <ul ref={ref} className={styles.currencyList}>
+                    setShowList(false);
-                        {Object.entries(currencies).map(([token, tokenName], index) => (
+                  }}
-                            <li
+                >
-                                key={index}
+                  {tokenName}
-                                className={`${styles.currencyListItem} ${
+                </li>
-                                    activeCurrency === tokenName ? "bg-site-dim2" : ""
+              ))}
-                                } cursor-pointer`}
+            </ul>
-                                onClick={() => {
+          )}
-                                    if (typeof onSelect === "function") onSelect(token);
-                                    setActiveCurrency(tokenName);
-                                    setShowList(false);
-                                }}
-                            >
-                                {tokenName}
-                            </li>
-                        ))}
-                    </ul>
-                )}
-
-
-            </div>
         </div>
+      </div>
     )
 }