added state management and web3 integration

.gitignore

@@ -23,3 +23,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/src/typechain/

.prettierrc

@@ -0,0 +1,9 @@
+{
+    "arrowParens": "avoid",
+    "bracketSpacing": true,
+    "printWidth": 120,
+    "singleQuote": false,
+    "tabWidth": 2,
+    "trailingComma": "all"
+  }
+

package.json

@@ -9,6 +9,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
+    "@reduxjs/toolkit": "^1.7.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -42,6 +43,7 @@
     "react-bootstrap": "^2.0.3",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
+    "react-redux": "^7.2.6",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "react-toastify": "^8.1.0",
@@ -52,7 +54,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "typechain:build": "yarn run typechain --target ethers-v5 --out-dir src/typechain src/contracts/abis/*.json",
+    "postinstall": "yarn typechain:build"
   },
   "eslintConfig": {
     "extends": [
@@ -73,12 +77,14 @@
     ]
   },
   "devDependencies": {
+    "@typechain/ethers-v5": "^8.0.5",
     "@typescript-eslint/eslint-plugin": "4.0.1",
     "@typescript-eslint/parser": "4.0.1",
     "eslint-config-airbnb": "^19.0.2",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0"
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "typechain": "^6.1.0"
   }
 }

src/App.tsx

@@ -1,12 +1,13 @@
-import React from "react";
-import {
-  BrowserRouter as Router,
-  Routes,
-  Route
-} from "react-router-dom";
+import React, { useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { useWeb3React } from "@web3-react/core";
+import { StaticJsonRpcProvider, Web3Provider } from "@ethersproject/providers";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";
+import { ToastContainer } from "react-toastify";
+import { loadApp } from "./state/appState";
+import { loadAccount } from "./state/accountState";
 import "./assets/scss/styles.scss";
 import "react-toastify/dist/ReactToastify.css";
 
@@ -16,13 +17,32 @@ import Swap from "./pages/Swap";
 import Farm from "./pages/Farm";
 import useEagerConnect from "./hooks/useEagerConnect";
 import Bootstrap from "./pages/Bootstrap/Bootstrap";
-import { ToastContainer } from "react-toastify";
+import { useDispatch } from "react-redux";
 
 // add fontawesome icons
 library.add(fas);
 
 export default function App(): JSX.Element {
   useEagerConnect();
+  const dispatch = useDispatch();
+  const { chainId, account, active, library } = useWeb3React();
+
+  useEffect(() => {
+    if (!chainId) return;
+    if (!library) return;
+    const castedLibrary = library as Web3Provider;
+
+    dispatch(loadApp({ chainId, provider: castedLibrary }));
+  }, []);
+
+  useEffect(() => {
+    if (!chainId) return;
+    if (!account) return;
+    if (!active) return;
+    const castedLibrary = library as Web3Provider;
+
+    dispatch(loadAccount({ chainId, provider: castedLibrary, account }));
+  }, [active]);
 
   return (
     <>

src/Providers.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { Web3ReactProvider } from "@web3-react/core";
+import { Provider } from "react-redux";
 import { Web3Provider } from "@ethersproject/providers";
 import { POLLING_INTERVAL } from "./constants/connectors";
+import store from "./state/store";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getLibrary(provider: any): Web3Provider {
@@ -17,7 +19,11 @@ interface Props {
 export default function Providers(props: Props): JSX.Element {
   return (
     <>
-      <Web3ReactProvider getLibrary={getLibrary}>{props?.children}</Web3ReactProvider>
+      <Web3ReactProvider getLibrary={getLibrary}>
+        <Provider store={store}>
+          {props?.children}
+        </Provider>
+      </Web3ReactProvider>
     </>
   );
 }

src/components/TokenAmountInput/TokenAmountInput.tsx

@@ -1,76 +1,84 @@
 import React from "react";
-import { TokenData } from "../../interfaces/TokenData";
-import { BigNumber } from "ethers";
+import { BigNumber, ethers } from "ethers";
 import { Dropdown, DropdownButton } from "react-bootstrap";
-import { Token } from "@uniswap/sdk";
-import TOKENS from "../../data/tokens";
+import { ITokenData } from "../../interfaces/TokenData";
+import { useAppSelector } from "../../hooks";
 
 interface Props {
-  token: TokenData | null
-  setToken(token: TokenData | null): void
-  placeholder?: string
+  token: ITokenData | null;
+  setToken(token: ITokenData | null): void;
+  amount: BigNumber;
+  setAmount(amount: BigNumber): void; // temporary state for value
+  placeholder?: string;
 }
 
 export default function TokenAmountInput(props: Props): JSX.Element {
+  // State
+  const { token, setToken, amount, setAmount, placeholder } = props;
+  const tokens = useAppSelector(state => state.account.tokens);
 
-  const { token, setToken, placeholder } = props;
+  // State Mutators
+  const _setAmount = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!event.target.value.length) return;
 
-  // TODO: Move to a token list
-  const tokens = TOKENS;
+    let bigNumberAmount = ethers.utils.parseEther(event.target.value);
+    if (bigNumberAmount.lte(0)) {
+      bigNumberAmount = BigNumber.from(0);
+    }
+    setAmount(bigNumberAmount);
+  };
+
+  const _setMax = () => {
+    if (!token) return;
+    if (!token.balance) return;
+    setAmount(token.balance);
+  };
+
+  const _setToken = (newToken: ITokenData) => {
+    return function (event: React.MouseEvent<HTMLElement, MouseEvent>) {
+      event.currentTarget.blur();
+      event.preventDefault();
+
+      setToken(newToken);
+    };
+  };
+
+  const balance = token?.balance;
+  let displayBalance = "0";
+  if (balance) {
+    displayBalance = ethers.utils.formatEther(balance).substring(0, 5);
+  }
+
+  const displayAmount = ethers.utils.formatEther(amount);
 
   return (
-  	<>
+    <>
       <div className="token-amount form-group">
         <div className="controls">
-          <div
-            className="input-group"
-          >
+          <div className="input-group">
             <input
-              type="text"
+              type="number"
               id={"inputAmount"}
               placeholder={placeholder || "0"}
-              onChange={(event) => {
-                setToken({
-                  ...token,
-                  ...{
-                    amount: event.target.value.length ? BigNumber.from(event.target.value) : undefined,
-                  }
-                });
-              }}
+              onChange={_setAmount}
               className="form-control"
+              value={displayAmount}
             />
-            <DropdownButton
-              title={(token?.token?.symbol || "Select")}
-              variant={"light"}
-            >
-              {tokens.map((tokenItem: Token, index: number) => (
-                <Dropdown.Item
-                  key={index}
-                  onClick={(event) => {
-                    event.currentTarget.blur();
-                    event.preventDefault();
-
-                    setToken({
-                      ...token,
-                      ...{
-                        token: tokenItem
-                      }
-                    });
-                  }}
-                >{tokenItem.symbol}</Dropdown.Item>
-              ))}
+            <DropdownButton title={token?.symbol || "Select"} variant={"light"}>
+              {!tokens && <Dropdown.Header>Connect your wallet</Dropdown.Header>}
+              {tokens &&
+                Array.from(tokens.values()).map((tokenItem: ITokenData, index: number) => (
+                  <Dropdown.Item key={index} onClick={_setToken(tokenItem)}>
+                    {tokenItem && tokenItem.symbol}
+                  </Dropdown.Item>
+                ))}
             </DropdownButton>
           </div>
           {token?.balance && (
             <p className="max-input text-end small">
-              <span
-				  onClick={(event) => ({
-					  ...token,
-					  ...{
-						  amount: token?.balance
-					  }
-				  })}
-              >Max: {token.balance.toString()} {token.token?.symbol || ""}</span>
+              <span onClick={_setMax}>
+                Max: {displayBalance} {token?.symbol || ""}
+              </span>
             </p>
           )}
         </div>

src/constants/chains.ts

@@ -1,6 +1,8 @@
+import { ChainId } from "@uniswap/sdk";
+
 export enum SupportedChainId {
-  MAINNET = 1,
-  RINKEBY = 4,
+  MAINNET = ChainId.MAINNET,
+  RINKEBY = ChainId.RINKEBY,
 }
 
 export const connectorConfig = {