AmountIn/Out/Balance

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

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, useRef } from "react";
+import { formatUnits } from "ethers/lib/utils";
+
+import { chevronDown } from "../assets";
+import { useAmountsOut, useOnClickOutside } from "../utils";
+import styles from "../styles";
+
+const AmountOut = ({ fromToken, toToken, amountIn, pairContract, currencyValue, onSelect, currencies }) => {
+    const [showList, setShowList] = useState(false);
+    const [activeCurrency, setActiveCurrency] = useState("Select");
+    const ref = useRef()
+
+    const amountOut = useAmountsOut(pairContract, amountIn, fromToken, toToken) ?? 0;
+
+    useOnClickOutside(ref, () => setShowList(false))
+
+    useEffect(() => {
+        if (Object.keys(currencies).includes(currencyValue)) {
+            setActiveCurrency(currencies[currencyValue]);
+        } else {
+            setActiveCurrency("Select")
+        }
+    }, [currencyValue, currencies]);
+
+    return (
+        <div className={styles.amountContainer}>
+            <input
+                placeholder="0.0"
+                type="number"
+                value={formatUnits(amountOut)}
+                disabled
+                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"}`}
+                    />
+                </button>
+
+                {showList && (
+                    <ul ref={ref} className={styles.currencyList}>
+                        {Object.entries(currencies).map(([token, tokenName], index) => (
+                            <li
+                                key={index}
+                                className={styles.currencyListItem}
+                                onClick={() => {
+                                    if (typeof onSelect === "function") onSelect(token);
+                                    setActiveCurrency(tokenName);
+                                    setShowList(false);
+                                }}
+                            >
+                                {tokenName}
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default AmountOut;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { formatUnits, parseUnits } from "ethers/lib/utils";
+
+import styles from "../styles";
+
+const Balance = ({ tokenBalance }) => {
+
+    return (
+        <div className={styles.balance}>
+            <p className={styles.balanceText}>
+                {tokenBalance ? (
+                    <>
+                        <span className={styles.balanceBold}>Balance: </span>
+                        {formatUnits(tokenBalance ?? parseUnits("0"))}
+                    </>
+                ) : (
+                    ""
+                )}
+            </p>
+        </div>
+    );
+};
+
+export default Balance;