Merge pull request #20 from fluencelabs/fix-template-and-adjust

Fix template and adjust

web/.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+.idea
 .DS_Store
 .env.local
 .env.development.local

web/package.json

@@ -4,39 +4,33 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.5.6",
     "@auth0/auth0-react": "^1.8.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@walletconnect/web3-provider": "^1.6.6",
-    "axios": "^0.24.0",
+    "asn1.js": "^5.4.1",
+    "bn.js": "^4.0.0",
     "date-fns": "^2.28.0",
+    "ethereumjs-util": "^7.0.7",
     "ethers": "^5.5.1",
     "github-username-regex": "^1.0.0",
-    "graphql": "^16.1.0",
     "keccak256": "^1.0.6",
     "merkletreejs": "^0.2.27",
+    "nanoid": "^5.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "react-toastify": "^8.1.0",
     "redux": "^4.1.2",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.0",
-    "thegraph-react": "^1.0.0-alpha.1",
-    "walletlink": "^2.2.8",
-    "web-vitals": "^1.0.1",
-    "web3": "^1.6.1",
-    "web3-react": "^5.0.5",
-    "web3modal": "^1.9.4",
-
     "safer-buffer": "^2.1.0",
-    "bn.js": "^4.0.0",
-    "asn1.js": "^5.4.1",
-    "ethereumjs-util": "^7.0.7"
+    "web-vitals": "^1.0.1",
+    "web3": "^4.5.0",
+    "web3modal": "^1.9.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -65,6 +59,15 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^3.2.3"
+    "assert": "^2.1.0",
+    "buffer": "^6.0.3",
+    "crypto": "npm:crypto-browserify@^3.12.0",
+    "gh-pages": "^3.2.3",
+    "http": "npm:stream-http@^3.2.0",
+    "https": "npm:https-browserify@^1.0.0",
+    "os": "npm:os-browserify@^0.3.0",
+    "stream": "npm:stream-browserify@^3.0.0",
+    "url": "^0.11.3",
+    "utils": "^0.3.1"
   }
 }

web/src/components/App/App.js

@@ -1,55 +1,43 @@
-import { Routes, Route, useLocation, useNavigate, Navigate } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import { useEffect, useMemo, useState, memo } from 'react';
-import {
-  Chains,
-  TheGraphProvider,
-  useCreateSubgraph
-} from "thegraph-react";
+import { memo, useEffect, useState } from 'react';
 
 import './App.css';
 import 'react-toastify/dist/ReactToastify.css';
 
 import PageBegin from '../../pages/begin-page/begin-page';
 import FirstStepPage from '../../pages/step1-page/step1-page';
 import ProofPage from '../../pages/proof-page/proof-page';
-import DelegationPage from '../../pages/delegation-page/delegation-page';
 import DonePage from '../../pages/done-page/done-page';
 import ClaimedPage from '../../pages/claimed-page/claimed-page';
 import AccountNotFound from '../../pages/not-found-account-page/not-found-account-page';
-import LandingPage from '../../pages/landing-page/landing-page';
 import FinishPage from '../../pages/finish-page/finish-page';
 import ConnectWallet from '../ConnectWallet/ConnectWallet';
-import { getNetworkName } from '../../store/actions/wallet';
-import { ToastContainer, toast } from 'react-toastify';
+import { toast, ToastContainer } from 'react-toastify';
 import { useWeb3Connection } from '../../hooks/useWeb3Connection';
-import { theGraphEndpoints } from '../../constants/endpoints';
 import { reduxCleanup } from '../../store/actions/common';
 import {
-  ROUTE_FLUENCE,
-  ROUTE_INDEX,
-  ROUTE_WALLET,
+  ROUTE_CLAIMED,
   ROUTE_CONNECT,
-  ROUTE_PROOF,
-  ROUTE_DELEGATION,
   ROUTE_DONE,
   ROUTE_FINISH,
+  ROUTE_INDEX,
   ROUTE_NOT_FOUND,
-  ROUTE_CLAIMED
+  ROUTE_PROOF,
+  ROUTE_WALLET
 } from '../../constants/routes'
 import { catchError } from '../../utils';
-import { setFluenceSubgraph, setDistributorSubgraph } from '../../store/actions/graph';
 import { setCurrentRoute } from '../../store/actions/routes';
 import { fetchCurrentAward, fetchMerkleRoot, fetchNextHalvePeriod } from '../../store/actions/distributor';
 import { useVh } from '../../hooks/useVh';
 
 function App() {
-  const { web3Provider } = useWeb3Connection()
+  const { network, address } = useWeb3Connection()
 
   const dispatch = useDispatch()
   const navigate = useNavigate()
   const { error } = useSelector(state => state.error)
-  const { network, address, prevAddress } = useSelector(state => state.wallet)
+  const [prevAddress, setPrevAddress] = useState(null);
   const { username } = useSelector(state => state.user)
   const { currentRoute } = useSelector(state => state.routes)
   const location = useLocation()
@@ -68,76 +56,58 @@ function App() {
   }, [currentRoute])
 
   useEffect(() => {
-    console.log("nerwork: " + network)
-    if (!merkleRootFetched && network) {
-      dispatch(fetchMerkleRoot(network))
-      dispatch(fetchCurrentAward(network))
-      dispatch(fetchNextHalvePeriod(network))
+    console.log("nerwork: " + network.name)
+    if (!merkleRootFetched && network?.name && network.name !== "unknown") {
+      dispatch(fetchMerkleRoot(network.name))
+      dispatch(fetchCurrentAward(network.name))
+      dispatch(fetchNextHalvePeriod(network.name))
       setMerkleRootFetched(true)
     } 
   }, [network])
-  
+
   useEffect(() => {
-    if (address && prevAddress && (address !== prevAddress)) {
-      dispatch(reduxCleanup())
-      navigate(ROUTE_INDEX)
-      dispatch(setCurrentRoute(ROUTE_INDEX))
-    } else if (!address && !web3Provider && username) {
-      navigate(ROUTE_WALLET)
+    if (address) {
+      if (prevAddress && address !== prevAddress) {
+        dispatch(reduxCleanup())
+        navigate(ROUTE_INDEX)
+        dispatch(setCurrentRoute(ROUTE_INDEX))
+      } else if (!address && username) {
+        navigate(ROUTE_WALLET);
+      } else {
+        setPrevAddress(address);
+      }
     }
-  }, [address])
-
-  const fluence = useCreateSubgraph({
-    [Chains.KOVAN]: theGraphEndpoints.fluence['kovan'],
-  });
-
-  const distributor = useCreateSubgraph({
-    [Chains.KOVAN]: theGraphEndpoints.distributor['kovan'],
-  });
-
-  const subgraphs = useMemo(() => {
-    dispatch(setFluenceSubgraph(fluence))
-    dispatch(setDistributorSubgraph(distributor))
-    return [fluence, distributor];
-  }, [fluence, distributor]);
+  }, [address, prevAddress]);
 
   useEffect(() => {
     window.scrollTo(0, 0)
     dispatch(setCurrentRoute(location.pathname))
   }, [location]);
 
-  useEffect(() => {
-    web3Provider && dispatch(getNetworkName(web3Provider))
-  },[web3Provider])
-
   useEffect(() => {
     if (error) {
       toast(catchError(error, true))
     }
   }, [error])
 
   return (
-    <TheGraphProvider chain={Chains.KOVAN} subgraphs={subgraphs}>
       <div className="App">
         <ToastContainer autoClose={false}/>
         <Routes>
-          <Route exact path={ROUTE_FLUENCE} element={<LandingPage />} />
-          <Route exact path={ROUTE_INDEX} element={<PageBegin/>} />
-          <Route exact path={ROUTE_WALLET} element={<FirstStepPage/>} />
-          <Route exact path={ROUTE_CONNECT} element={<ConnectWallet />} />
-          <Route exact path={ROUTE_PROOF} element={<ProofPage/>} />
-          <Route exact path={ROUTE_DELEGATION} element={<DelegationPage/>} />
-          <Route exact path={ROUTE_DONE} element={<DonePage/>} />
-          <Route exact path={ROUTE_FINISH} element={<FinishPage />} />
-          <Route exact path={ROUTE_NOT_FOUND} element={<AccountNotFound />} />
-          <Route exact path={ROUTE_CLAIMED} element={<ClaimedPage />} />
+          <Route exact path={ROUTE_INDEX} element={<PageBegin/>}/>
+          <Route exact path={ROUTE_WALLET} element={<FirstStepPage/>}/>
+          <Route exact path={ROUTE_CONNECT} element={<ConnectWallet/>}/>
+          <Route exact path={ROUTE_PROOF} element={<ProofPage/>}/>
+          <Route exact path={ROUTE_DONE} element={<DonePage/>}/>
+          <Route exact path={ROUTE_FINISH} element={<FinishPage/>}/>
+          <Route exact path={ROUTE_NOT_FOUND} element={<AccountNotFound/>}/>
+          <Route exact path={ROUTE_CLAIMED} element={<ClaimedPage/>}/>
           <Route
               path="*"
-              element={<Navigate to="/" />}
+              element={<Navigate to="/"/>}
           />
         </Routes>
       </div>
-    </TheGraphProvider>
   );
 }
 

web/src/components/ConnectWallet/ConnectWallet.js

@@ -4,11 +4,11 @@ import { useWeb3Connection } from '../../hooks/useWeb3Connection'
 
 const ConnectWallet = () => {
 
-    const { connect, disconnect, web3Provider } = useWeb3Connection()
+    const { connect, disconnect, address } = useWeb3Connection()
 
     return (
         <>
-            {web3Provider ? (
+            {address ? (
                 <Button callback={disconnect} text='Disconnect'/>
             ) : (
                 <Button callback={connect} text='Connect a wallet'/>

web/src/components/Footer/Footer.js

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 import Title from '../Title/Title';

web/src/components/Header/Header.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 import MainNavigation from '../MainNavigation/MainNavigation';

web/src/components/MainNavigation/MainNavigation.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { NavLink, Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 
 import Button from '../Button/Button';
 

web/src/components/RatingRange/RatingRange.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback }  from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 
 import { roundNumber } from '../../utils/utils';