revert change

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";
 
@@ -29,7 +29,7 @@ const App = () => {
                     <div className="green_gradient" />
                     <div className={styles.exchange}>
                         {account ? (
-                            loading ? (
+                            poolsLoading ? (
                                 <Loader title="Loading pools, please wait!" />
                             ) : <Exchange pools = {pools}/>
                         ) : <Loader title="Please connect your wallet!"/>}

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

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useRef } from "react";
 
-import { chevronDown } from "../assets"; // icon
-import { useOnClickOutside } from "../utils"; //helps to close menu bar
+import { chevronDown } from "../assets";
+import { useOnClickOutside } from "../utils";
 import styles from "../styles";
 
-const AmountIn = () => {
+const AmountIn = ({ value, onChange, currencyValue, onSelect, currencies, isSwapping }) => {
   const [showList, setShowList] = useState(false);
   const [activeCurrency, setActiveCurrency] = useState("Select");
   const ref = useRef()
@@ -17,7 +17,7 @@ const AmountIn = () => {
     else setActiveCurrency("Select");
   }, [currencies, currencyValue]);
 
-    return(
+  return (
     <div className={styles.amountContainer}>
       <input
         placeholder="0.0"
@@ -61,9 +61,7 @@ const AmountIn = () => {
         )}
       </div>
     </div>
-    )
-}
-
-
-
+  );
+};
 
+export default AmountIn;

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

@@ -28,8 +28,8 @@ const AmountOut = ({ fromToken, toToken, amountIn, pairContract, currencyValue,
         placeholder="0.0"
         type="number"
         value={formatUnits(amountOut)}
-                disabled
         className={styles.amountInput}
+        disabled
       />
 
       <div className="relative" onClick={() => setShowList(!showList)}>

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

@@ -7,39 +7,97 @@ import { parseUnits } from "ethers/lib/utils";
 
 import  { getAvailableTokens, getCounterpartTokens, findPoolByTokens, isOperationPending, getFailureMessage, getSuccessMessage } from '../utils';
 import { ROUTER_ADDRESS } from "../config";
-import AmountIn from "./";
-import AmountOut from "./";
-import Balance from "./";
+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);
+  const [fromToken, setFromToken] = useState(pools[0].token0Address); // initialFromToken
   const [toToken, setToToken] = useState("");
   const [resetState, setResetState] = useState(false)
 
-    const fromValueBigNumber = parseUnits(fromValue || "0"); 
-    const availableTokens = getAvailableTokens(pools);                                  //What tokens can we swap from?
-    const counterpartTokens = getCounterpartTokens(pools, fromToken);                   //What tokens can we swap to?
-    const pairAddress = findPoolByTokens(pools, fromToken, toToken)?.address ?? "";     //find a pair address ot that liquidity pair
+  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 ?? "";
 
-    //Get contract addresses
   const routerContract = new Contract(ROUTER_ADDRESS, abis.router02);
   const fromTokenContract = new Contract(fromToken, ERC20.abi);
-    const fromTokenBalance = useTokenBalance(fromToken, account);   //Know balance of "from Token"
-    const toTokenBalance = useTokenBalance(toToken, account);       //Know balance of "to Token"
+  const fromTokenBalance = useTokenBalance(fromToken, account);
+  const toTokenBalance = useTokenBalance(toToken, account);
   const tokenAllowance = useTokenAllowance(fromToken, account, ROUTER_ADDRESS) || parseUnits("0");
-    const approvedNeeded = fromValueBigNumber.gt(tokenAllowance);   //We need to approve to make the swap
-    const formValueIsGreaterThan0 = fromValueBigNumber.gt(parseUnits("0")); //has to be greater than 0
-    const hasEnoughBalance = fromValueBigNumber.lte(fromTokenBalance ?? parseUnits("0")); //lte = lower than or equal to
+  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 className="flex flex-col w-full items-center">
       <div className="mb-8">
@@ -104,6 +162,6 @@ const Exchange = ({ pools }) => {
       )}
     </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/config.js

@@ -1,6 +1,6 @@
 import { Goerli } from "@usedapp/core";
 
-export const ROUTER_ADDRESS = "[YOUR ADDRESS HERE]"; 
+export const ROUTER_ADDRESS = "0x73135EBE79A1Af0D757a3F5218ED29c1Ff7F332B";
 
 export const DAPP_CONFIG = {
   readOnlyChainId: Goerli.chainId,