frontend connects with metamask on 8545. ui updates

lorem-ipsumm · Jan 26, 2021 · ea90be4 · ea90be4
1 parent ddb79cf
commit ea90be4
Show file tree

Hide file tree

Showing 6 changed files with 212 additions and 52 deletions.
diff --git a/frontend/src/components/Creator.tsx b/frontend/src/components/Creator.tsx
@@ -2,34 +2,78 @@ import React, { useState, useEffect } from 'react';
 // import DeckPreview from '../components/DeckPreview';
 import Loading from './Loading';
 import "../css/creator.css";
+import { ethers } from "ethers";
+import PoolAritfact from "../contracts/Pool.json";
+import contractAddress from "../contracts/contract-address.json";
 
 /**
  * Home page that contains a grid of decks, a search bar,
  * and a filter button
  */
-function Creator() {
+function Creator(props: {poolFactory: ethers.Contract, 
+                         provider: ethers.providers.Web3Provider,
+                         connectedAddress: string}) {
 
     const[creatorLoaded, setCreatorLoaded] = useState(false);
+    const[walletBalance, setWalletBalance] = useState<number>(0);
+    const[inputAmount, setInputAmount] = useState<number>(0);
+
+    async function initialize() {
+
+        // exit if not ready
+        if (props.provider === undefined || props.poolFactory === undefined || props.connectedAddress === undefined)
+            return;
+
+        // get wallet balance in bigint format
+        let bal = await props.provider.getBalance(props.connectedAddress);
+
+        // convert to ETH and float then update state
+        setWalletBalance(parseFloat(ethers.utils.formatEther(bal)));
+
+
+
+    }
 
     // run on load
     useEffect(() => {
 
         // get decks
         // getDecks();
 
+        initialize(); 
+
+        setCreatorLoaded(true);
+
     }, []);
 
 
-    if (!creatorLoaded) {
+    async function depositClicked () {
+
+        let poolAddress = (await props.poolFactory.getPools())[0];
+
+        const poolContract = new ethers.Contract(
+            poolAddress,
+            PoolAritfact.abi,
+            props.provider.getSigner(0)
+        );
+
+        const value = ethers.utils.parseEther(inputAmount.toString());
+
+        await poolContract.deposit({value});
+
+    }
+
+
+    if (props.connectedAddress !== undefined) {
         return (
             <div className="page-wrapper">
                 <div className="creator-wrapper">
                     <div className="creator-header">
                         <span className="pool-balance">Money Pooled: $3,032</span>
-                        <a href="" className="register">Become a creator to start earning money</a>
+                        <a href="localhost:3000" className="register">Become a creator to start earning money</a>
                     </div>    
                     <div className="creator-profile">
-                        <img src="https://boredhumans.b-cdn.net/faces2/13.jpg"></img>
+                        <img alt="profile" src="https://boredhumans.b-cdn.net/faces2/13.jpg"></img>
                         <div className="creator-info">
                             <div className="info-top">
                                 <span className="creator-name">John Doe</span>
@@ -44,15 +88,7 @@ function Creator() {
                             <h2>MY LINKS</h2>
                             <div className="middle-text">
                                 <ul>
-                                    <li><a href="">youtube.com/JohnDoeTV</a></li>
-                                    <li><a href="">youtube.com/JohnDoeTV</a></li>
-                                    <li><a href="">youtube.com/JohnDoeTV</a></li>
-                                    <li><a href="">youtube.com/JohnDoeTV</a></li>
-                                    <li><a href="">youtube.com/JohnDoeTV</a></li>
-                                    <li><a href="">youtube.com/JohnDoeTV</a></li>
-                                    <li><a href="">youtube.com/JohnDoeTV</a></li>
-                                    <li><a href="">youtube.com/JohnDoeTV</a></li>
-                                    <li><a href="">youtube.com/JohnDoeTV</a></li>
+                                    <li><a href="https://youtube.com">youtube.com/JohnDoeTV</a></li>
                                 </ul>
                             </div>
                         </div>
@@ -61,19 +97,21 @@ function Creator() {
                             <div className="middle-text">
                                 <span>
                                     <b>Lump.Finance</b> is a platform that allows fans to financially support their 
-                                    favorite creators without spending any money. Through the magic of <a href="">Ethereum</a> and <a href=""> AAVE's Lending Pools</a>, fans 
+                                    favorite creators without spending any money. Through the magic of <a href="https://ethereum.org/en/">Ethereum</a> and <a href="https://aave.com/"> AAVE's Lending Pools</a>, fans 
                                     can deposit funds into a pool which generates interest to be collected by the creator. At any point fans can withdraw nearly 100% of their deposit (some is lost from Ethereum transaction fees)
                                     and creators can withdraw the accrued interest whenever needed.
                                 </span>
                             </div>
                         </div>
                     </div>
                     <div className="creator-actions">
-                        <input type="number" className="input-amount" placeholder="$0.00"></input>
-                        <span className="balance-amount">Your Balance: $123.45</span>
+                        <div className="input-wrapper">
+                            <input type="number" className="input-amount" placeholder="Insert Amount in ETH" onChange={(e) => {setInputAmount(parseFloat(e.target.value))}}></input>
+                            <span className="balance-amount">Wallet Balance: {walletBalance} ETH</span>
+                        </div>
                         <div className="button-wrapper">
-                        <button className="btn-deposit">Deposit</button>
-                        <button className="btn-withdraw">Withdraw</button>
+                            <button className="btn-deposit" onClick={depositClicked}>Deposit</button>
+                            <button className="btn-withdraw">Withdraw</button>
                         </div>
                     </div>
                 </div>

diff --git a/frontend/src/components/Dapp.tsx b/frontend/src/components/Dapp.tsx
@@ -6,6 +6,18 @@ import "../css/resize.css";
 import Creator from './Creator';
 import Loading from './Loading';
 import Particles from 'react-particles-js';
+import { ethers } from "ethers";
+import contractAddress from "../contracts/contract-address.json";
+import PoolFactoryArtifact from "../contracts/PoolFactory.json";
+import PoolAritfact from "../contracts/Pool.json";
+
+
+// ethereum.window fix
+declare global {
+    interface Window {
+        ethereum:any;
+    }
+}
 
 /**
  * Home page that contains a grid of decks, a search bar,
@@ -14,6 +26,13 @@ import Particles from 'react-particles-js';
 export function Dapp() {
 
     const[creatorLoaded, setCreatorLoaded] = useState(false);
+    const[connectedAddress, setConnectedAddress] = useState<string>("");
+    const[initialized, setInitialized] = useState<boolean>(false);
+    const[provider, setProvider] = useState<any>(undefined);
+    const[poolFactory, setPoolFactory] = useState<ethers.Contract>(new ethers.Contract(
+        contractAddress.PoolFactory,
+        PoolFactoryArtifact.abi
+    ));
 
     // parameters for particles
     const params = {
@@ -36,20 +55,99 @@ export function Dapp() {
 	            }
 	        }
 	    }
-	}
+    }
+
+    // set dappp data
+    async function initialize(userAddress: string) {
+
+        setConnectedAddress(userAddress);
+
+        const web3Provider = new ethers.providers.Web3Provider(window.ethereum);
+
+        // initialize provider
+        setProvider(web3Provider);
+
+        // setup PoolFactory contract
+        const contract = new ethers.Contract(
+            contractAddress.PoolFactory,
+            PoolFactoryArtifact.abi,
+            web3Provider.getSigner(0)
+        );
+
+        // When, we initialize the contract using that provider and the token's
+        // artifact. You can do this same thing with your contracts.
+        setPoolFactory(contract);
+
+        let pools = await contract.getPools();
+        // console.log(pools);
+
+        let balance = await web3Provider.getBalance(userAddress);
+        // console.log(ethers.utils.formatEther(balance.toString()) + " " + ethers.constants.EtherSymbol);
+
+        // console.log(userAddress);
+        setInitialized(true);
+    }
+
+    // check if the dapp is ready
+    function dappReady() {
+        return(false);
+    }
+
+    // connect to the users wallet
+    async function connectWallet() {
+
+        // To connect to the user's wallet, we have to run this method.
+        // It returns a promise that will resolve to the user's address.
+        const [selectedAddress] = await window.ethereum.enable();
+
+        // Once we have the address, we can initialize the application.
+
+        // First we check the network
+        // if (!this._checkNetwork()) {
+        // return;
+        // }
+
+        // setup vars
+        await initialize(selectedAddress);
+
+
+        // listen for wallet account changes to update dapp vars
+        window.ethereum.on("accountsChanged", ([newAddress]: string[]) => {
+
+            // initialize with new address
+            if (newAddress !== undefined)
+                initialize(newAddress);
+
+        });
+
+        // We reset the dapp state if the network is changed
+        window.ethereum.on("networkChanged", ([networkId]: string[]) => {
+            console.log("network changed to: ", networkId);
+        });
+
+    }
+
 
     // run on load
     useEffect(() => {
 
-        // get decks
-        // getDecks();
+        // check for wallet
+        if (window.ethereum === undefined){
+            ;
+        }
+
+
+        if (connectedAddress === "") {
+            connectWallet();
+        } else {
+            setInitialized(true);
+        }
 
-        setCreatorLoaded(true);
 
-    }, []);
+    }, [connectedAddress]);
 
 
-   if (!creatorLoaded) {
+   if (!initialized) {
        return(
             <div className="page-wrapper">
                 <Loading/>
@@ -59,7 +157,7 @@ export function Dapp() {
         return(
             <div className="page-wrapper">
                 <Particles params={params}/>
-                <Creator/>
+                <Creator poolFactory={poolFactory} provider={provider} connectedAddress={connectedAddress}/>
             </div>
         );
     }

diff --git a/frontend/src/components/Dapp_template.jsx b/frontend/src/components/Dapp_template.jsx
@@ -75,7 +75,6 @@ export class Dapp extends React.Component {
     //
     // Note that we pass it a callback that is going to be called when the user
     // clicks a button. This callback just calls the _connectWallet method.
-    /*
     if (!this.state.selectedAddress) {
       return (
         <ConnectWallet 
@@ -91,7 +90,6 @@ export class Dapp extends React.Component {
     if (!this.state.tokenData || !this.state.balance) {
       return <Loading />;
     }
-    */
 
     // If everything is loaded, we render the application.
     return (

diff --git a/frontend/src/css/creator.css b/frontend/src/css/creator.css