Merge pull request #2 from kenan96/Web3Logic

Web3 logic

packages/react-app/src/App.js

@@ -1,6 +1,7 @@
 import React from "react"
 import { useEthers } from "@usedapp/core";
 
+import { usePools } from "./hooks";
 import styles from './styles';
 import { fhtLogo }  from './assets';
 import { Exchange, Loader, WalletButton } from "./components";
@@ -8,7 +9,7 @@ import { Exchange, Loader, WalletButton } from "./components";
 
 const App = () => {
     const { account } = useEthers();
-    const poolsLoading = false;
+    const [poolsLoading, pools] = usePools();
 
   return (
     <div className={styles.container}>
@@ -28,9 +29,9 @@ const App = () => {
                     <div className="green_gradient" />
                     <div className={styles.exchange}>
                         {account ? (
-                            poolsLoading ? (
+                            loading ? (
                                 <Loader title="Loading pools, please wait!" />
-                            ) : <Exchange />
+                            ) : <Exchange pools = {pools}/>
                         ) : <Loader title="Please connect your wallet!"/>}
                     </div>
                     <div className="blue_gradient" />

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

@@ -1,6 +1,13 @@
-import React from 'react';
+import React, { useEffect, useState } from "react";
+import { Contract } from "@ethersproject/contracts";
+import { abis } from "@my-app/contracts";
+import { ERC20, useContractFunction, useEthers, useTokenAllowance, useTokenBalance } from "@usedapp/core";
+import { ethers } from "ethers";
+import { parseUnits } from "ethers/lib/utils";
 
-const Exchange = () => {
+import { ROUTER_ADDRESS } from "../config";
+
+const Exchange = ({ pools }) => {
     return (
         <div>Exchange</div>
     )

packages/react-app/src/config.js

@@ -5,6 +5,6 @@ export const ROUTER_ADDRESS = "[YOUR ADDRESS HERE]";
 export const DAPP_CONFIG = {
   readOnlyChainId: Goerli.chainId,
   readOnlyUrls: {
-    [Goerli.chainId]: "[YOUR URL HERE]",
+    [Goerli.chainId]: "https://eth-goerli.g.alchemy.com/v2/HTekLlXug0hrSWhUk6dumCafQztJPTQy",
   },
 };

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

@@ -0,0 +1 @@
+export { usePools } from "./usePools";

packages/react-app/src/hooks/usePools.js

@@ -0,0 +1,32 @@
+import Web3 from "web3";                            //one of the most popular packages when interacting with smart contracts
+import { useEffect, useState } from "react";
+import { useConfig } from "@usedapp/core";
+
+import { ROUTER_ADDRESS } from "../config";
+import { getFactoryInfo, getRouterInfo } from "../utils";
+
+export const loadPools = async (providerUrl) => {       //fetch liquidity pool
+    const provider = new Web3.providers.HttpProvider(providerUrl);
+    const web3 = new Web3(provider);
+    const routerInfo = await getRouterInfo(ROUTER_ADDRESS, web3);
+    const factoryInfo = await getFactoryInfo(routerInfo.factory, web3);
+    return factoryInfo.pairsInfo;
+}
+export const usePools = () => {
+    const { readOnlyChainId, readOnlyUrls } = useConfig();
+    const [loading, setLoading] = useState(true);
+    const [pools, setPools] = useState({});
+
+    useEffect(() => {
+        loadPools(readOnlyUrls[readOnlyChainId])
+            .then((pools) => {                      //callback function / asynchronous
+                setPools(pools);
+                setLoading(false);
+            });
+    }, [readOnlyUrls, readOnlyChainId]);            //dependency array
+
+    return [loading, pools];
+}
+
+
+

packages/react-app/src/utils/getFactoryInfo.js

@@ -0,0 +1,21 @@
+import { abis } from "@my-app/contracts";
+import { getPairsInfo } from "./getPairsInfo";
+
+export const getFactoryInfo = async (factoryAddress, web3) => {
+    const factory = new web3.eth.Contract(abis.factory, factoryAddress);
+
+    const factoryInfo = {
+        feeTo: await factory.methods.feeTo().call(),
+        feeToSetter: await factory.methods.feeToSetter().call(),
+        allPairsLength: await factory.methods.allPairsLength().call(),
+        allPairs: [],
+    };
+
+    for (let i = 0; i < factoryInfo.allPairsLength; i++) {
+        factoryInfo.allPairs[i] = await factory.methods.allPairs(i).call();
+    }
+
+    factoryInfo.pairsInfo = await getPairsInfo(factoryInfo.allPairs, web3);
+
+    return factoryInfo;
+}

packages/react-app/src/utils/getPairsInfo.js

@@ -0,0 +1,28 @@
+import { abis } from "@my-app/contracts";
+
+export async function getPairsInfo(pairAddresses, web3) {
+    const pairsInfo = [];
+    const pairABI = abis.pair;
+    const tokenABI = abis.erc20.abi;
+
+    for (let i = 0; i < pairAddresses.length; ++i) {
+        const pairAddress = pairAddresses[i];
+        const pair = new web3.eth.Contract(pairABI, pairAddresses[i]);
+
+        const token0Address = await pair.methods.token0().call();           //get contract
+        const token1Address = await pair.methods.token1().call();
+        const token0Contract = new web3.eth.Contract(tokenABI, token0Address); //get contract address
+        const token1Contract = new web3.eth.Contract(tokenABI, token1Address);
+        const token0Name = await token0Contract.methods.name().call();      //get contract address name
+        const token1Name = await token1Contract.methods.name().call();
+
+        pairsInfo.push({        //pass eerything we need to pairsInfo Array
+            address: pairAddress,
+            token0Address,
+            token1Address,
+            token0Name,
+            token1Name
+        });
+    }
+    return pairsInfo;
+}

packages/react-app/src/utils/getRouterInfo.js

@@ -0,0 +1,9 @@
+import { abis } from "@my-app/contracts";
+
+export const getRouterInfo = async (routerAddress, web3) => {
+    const router = new web3.eth.Contract(abis.router02, routerAddress);
+
+    return {
+        factory: await router.methods.factory().call(),
+    };
+}

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

@@ -1,3 +1,7 @@
+export { getFactoryInfo } from "./getFactoryInfo";
+export { getPairsInfo } from "./getPairsInfo";
+export { getRouterInfo } from "./getRouterInfo";
+
 export {
   getAvailableTokens,
   getCounterpartTokens,