Merge pull request #3 from kenan96/Exchange-Inputs-and-Balance

Exchange inputs and balance

packages/react-app/src/App.js

@@ -1,8 +1,8 @@
 import React from "react"
 import { useEthers } from "@usedapp/core";
 
-import { usePools } from "./hooks";
 import styles from './styles';
+import { usePools } from "./hooks";
 import { fhtLogo }  from './assets';
 import { Exchange, Loader, WalletButton } from "./components";
 

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

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import { chevronDown } from "../assets";
+import { useOnClickOutside } from "../utils";
+import styles from "../styles";
+
+const AmountIn = ({ value, onChange, currencyValue, onSelect, currencies, isSwapping }) => {
+  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}>
+      <input
+        placeholder="0.0"
+        type="number"
+        value={value}
+        disabled={isSwapping}
+        onChange={(e) => typeof onChange === "function" && onChange(e.target.value)}
+        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} ${
+                  activeCurrency === tokenName ? "bg-site-dim2" : ""
+                } cursor-pointer`}
+                onClick={() => {
+                  if (typeof onSelect === "function") onSelect(token);
+                  setActiveCurrency(tokenName);
+                  setShowList(false);
+                }}
+              >
+                {tokenName}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AmountIn;

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)}
+        className={styles.amountInput}
+        disabled
+      />
+
+      <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;

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

@@ -5,12 +5,163 @@ import { ERC20, useContractFunction, useEthers, useTokenAllowance, useTokenBalan
 import { ethers } from "ethers";
 import { parseUnits } from "ethers/lib/utils";
 
+import  { getAvailableTokens, getCounterpartTokens, findPoolByTokens, isOperationPending, getFailureMessage, getSuccessMessage } from '../utils';
 import { ROUTER_ADDRESS } from "../config";
+import AmountIn from "./AmountIn";
+import AmountOut from "./AmountOut";
+import Balance from "./Balance";
+import styles from "../styles";
 
 const Exchange = ({ pools }) => {
+  const { account } = useEthers();
+  const [fromValue, setFromValue] = useState("0");
+  const [fromToken, setFromToken] = useState(pools[0].token0Address); // initialFromToken
+  const [toToken, setToToken] = useState("");
+  const [resetState, setResetState] = useState(false)
+
+  const fromValueBigNumber = parseUnits(fromValue || "0"); // converse the string to bigNumber
+  const availableTokens = getAvailableTokens(pools);
+  const counterpartTokens = getCounterpartTokens(pools, fromToken);
+  const pairAddress = findPoolByTokens(pools, fromToken, toToken)?.address ?? "";
+
+  const routerContract = new Contract(ROUTER_ADDRESS, abis.router02);
+  const fromTokenContract = new Contract(fromToken, ERC20.abi);
+  const fromTokenBalance = useTokenBalance(fromToken, account);
+  const toTokenBalance = useTokenBalance(toToken, account);
+  const tokenAllowance = useTokenAllowance(fromToken, account, ROUTER_ADDRESS) || parseUnits("0");
+  const approvedNeeded = fromValueBigNumber.gt(tokenAllowance);
+  const formValueIsGreaterThan0 = fromValueBigNumber.gt(parseUnits("0"));
+  const hasEnoughBalance = fromValueBigNumber.lte(fromTokenBalance ?? parseUnits("0"));
+
+  // approve initiating a contract call (similar to use state) -> gives the state and the sender...
+  const { state: swapApproveState, send: swapApproveSend } =
+    useContractFunction(fromTokenContract, "approve", {
+      transactionName: "onApproveRequested",
+      gasLimitBufferPercentage: 10,
+    });
+  // swap initiating a contract call (similar to use state) -> gives the state and the sender...
+  const { state: swapExecuteState, send: swapExecuteSend } =
+    useContractFunction(routerContract, "swapExactTokensForTokens", {
+      transactionName: "swapExactTokensForTokens",
+      gasLimitBufferPercentage: 10,
+    });
+
+  const isApproving = isOperationPending(swapApproveState);
+  const isSwapping = isOperationPending(swapExecuteState);
+  const canApprove = !isApproving && approvedNeeded;
+  const canSwap = !approvedNeeded && !isSwapping && formValueIsGreaterThan0 && hasEnoughBalance;
+
+  const successMessage = getSuccessMessage(swapApproveState, swapExecuteState);
+  const failureMessage = getFailureMessage(swapApproveState, swapExecuteState);
+
+  const onApproveRequested = () => {
+    swapApproveSend(ROUTER_ADDRESS, ethers.constants.MaxUint256);
+  };
+
+  // https://docs.uniswap.org/protocol/V2/reference/smart-contracts/router-02#swapexacttokensfortokens
+  const onSwapRequested = () => {
+    swapExecuteSend(
+      fromValueBigNumber,
+      0,
+      [fromToken, toToken],
+      account,
+      Math.floor(Date.now() / 1000) + 60 * 20
+    ).then((_) => {
+      setFromValue("0");
+    });
+  };
+
+  const onFromValueChange = (value) => {
+    const trimmedValue = value.trim();
+
+    try {
+      trimmedValue && parseUnits(value);
+      setFromValue(value);
+    } catch (e) {}
+  };
+
+  const onFromTokenChange = (value) => {
+    setFromToken(value);
+  };
+
+  const onToTokenChange = (value) => {
+    setToToken(value);
+  };
+
+  useEffect(() => {
+    if(failureMessage || successMessage) {
+      setTimeout(() => {
+        setResetState(true)
+        setFromValue("0")
+        setToToken("")
+      }, 5000)
+    }
+  }, [failureMessage, successMessage])
+
   return (
-        <div>Exchange</div>
-    )
-}
+    <div className="flex flex-col w-full items-center">
+      <div className="mb-8">
+        <AmountIn
+          value={fromValue}
+          onChange={onFromValueChange}
+          currencyValue={fromToken}
+          onSelect={onFromTokenChange}
+          currencies={availableTokens}
+          isSwapping={isSwapping && hasEnoughBalance}
+        />
+        <Balance tokenBalance={fromTokenBalance} />
+      </div>
+
+      <div className="mb-8 w-[100%]">
+        <AmountOut
+          fromToken={fromToken}
+          toToken={toToken}
+          amountIn={fromValueBigNumber}
+          pairContract={pairAddress}
+          currencyValue={toToken}
+          onSelect={onToTokenChange}
+          currencies={counterpartTokens}
+        />
+        <Balance tokenBalance={toTokenBalance} />
+      </div>
+
+      {approvedNeeded && !isSwapping ? (
+        <button
+          disabled={!canApprove}
+          onClick={onApproveRequested}
+          className={`${
+            canApprove
+              ? "bg-site-pink text-white"
+              : "bg-site-dim2 text-site-dim2"
+          } ${styles.actionButton}`}
+        >
+          {isApproving ? "Approving..." : "Approve"}
+        </button>
+      ) : (
+        <button
+          disabled={!canSwap}
+          onClick={onSwapRequested}
+          className={`${
+            canSwap ? "bg-site-pink text-white" : "bg-site-dim2 text-site-dim2"
+          } ${styles.actionButton}`}
+        >
+          {isSwapping
+            ? "Swapping..."
+            : hasEnoughBalance
+            ? "Swap"
+            : "Insufficient balance"}
+        </button>
+      )}
+
+      {failureMessage && !resetState ? (
+        <p className={styles.message}>{failureMessage}</p>
+      ) : successMessage ? (
+        <p className={styles.message}>{successMessage}</p>
+      ) : (
+        ""
+      )}
+    </div>
+  );
+};
 
 export default Exchange;

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

@@ -6,7 +6,11 @@ import {ethereumLogo2 } from "../assets";
 const Loader = ({ title }) => {
 return (
     <div className={styles.loader}>
-      <img src={ethereumLogo2} alt="Ethereum Logo" className={styles.loaderImg} />
+      <img 
+      src={ethereumLogo2} 
+      alt="Ethereum Logo" 
+      className={styles.loaderImg}
+      />
         <p className={styles.loaderText}>{title}</p>
     </div>
 

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

@@ -1,3 +1,6 @@
 export {default as Loader} from './Loader';
 export {default as Exchange} from './Exchange';
 export {default as WalletButton} from './WalletButton';
+export { default as AmountIn } from "./AmountIn";
+export { default as AmountOut } from "./AmountOut";
+export { default as Balance } from "./Balance";