fixed approval

Author: mennatnaga

client/src/App.css

@@ -43,13 +43,13 @@
   border-width: 1mm;
 
 }
-body { 
 
-  background: url(images/wallpaper.jpg); 
-  /* -webkit-background-size: cover; */
-  /* -moz-background-size: cover; */
-  /* -o-background-size: cover; */
-  /* background-size: cover; */
+body { 
+  background: url(images/wallpaper.jpg) no-repeat center center fixed; 
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
 }
 
 .navbar-custom {

client/src/App.js

@@ -38,6 +38,7 @@ class App extends Component {
       console.log("TLoading web3 and connected accounts");
       // Get network provider and web3 instance.
       const web3 = await getWeb3();
+      console.log("web3 = ", web3);
       this.setState({web3});
 
       // Use web3 to get the user's accounts.
@@ -53,7 +54,7 @@ class App extends Component {
       if(networkId === 4){
         console.log("CORRECT NETWORK");
         this.setState({oncorrectNetwork:true});
-        await this.connectWallet();
+        // await this.connectWallet();
       }else{
         this.setState({oncorrectNetwork:false})
      }
@@ -139,25 +140,23 @@ class App extends Component {
   render() {
     let content;
     if (!this.state.web3) {
-      return <div>Loading Web3, accounts, and contracts...</div>;
-    }
-
-    if((this.state.oncorrectNetwork === false) && (this.state.web3)){
-      return (
-              
-                <div className="App">
-                  <p >Hi There! </p>
-                  <p>Please Connect To Rinkeby Testnet Then Connect Your Wallet To Start Buying/Selling Tokens</p>
-                  <button   type="button" class="btn btn-outline-primary btn-lg" 
-                            onClick={async() => {await this.connectWallet();}}>
-                    Connect Your Wallet</button>
+      content =  (<div>Loading Web3, accounts, and contracts...</div>);
+    }else if (this.state.web3 && (!this.state.tokenA_contract)){
+      content =  (
 
-                </div>
+                  <div className="App">
+                    <p >Hi There! </p>
+                    <p>Please Connect To Rinkeby Testnet Then Connect Your Wallet To Start Buying/Selling Tokens</p>
+                    <button   type="button" className="btn btn-outline-primary btn-lg" 
+                              onClick={async() => {await this.connectWallet();}}>
+                      Connect Your Wallet</button>
+                
+                  </div>
 
 
-             );
-    }else{
-         content = (<div>
+                );
+      }else{
+          content =  (<div>
                       <Navbar connectedAccount={this.state.connectedAccount}/>
                       <Form
                         web3={this.state.web3}
@@ -171,6 +170,7 @@ class App extends Component {
                     </div>
                     );
 
+
     }
 
     return (

client/src/Form.js

@@ -72,46 +72,71 @@ class Form extends Component {
 
   async handleSubmit(event) {
     event.preventDefault();
-    // alert("Hi!");
-    // alert(event.target.value);
-    // alert(event.submit.name);
-    // alert(this.state.clicked_button);
+  
     if(this.state.clicked_button === "buy"){
-        let call_value = this.props.web3.utils.toWei((this.state.eth_amount).toString());
+        let call_value = await (this.props.web3.utils.toWei((this.state.eth_amount).toString()));
+        console.log("this.state.eth_amount = ", this.state.eth_amount);
+        console.log("this.state.eth_balance = ", this.state.eth_balance);
         console.log("call_value = ", call_value);
-        if(this.state.selected_token === "A"){
-            // console.log("eth_amount = ", eth_amount);
+        
+        if((this.state.eth_balance < call_value)){
+            alert("You don't have enough ETH to buy Tokens.");
+        }else{
+            if(this.state.selected_token === "A"){
+                await this.props.swapTokens_contract.methods.buyTokensA().send({value:call_value, from:this.props.connectedAccount});
+    
+                let tokenA_balance = await this.props.tokenA_contract.methods.balanceOf(this.props.connectedAccount).call();
+                console.log("Token A Balance after buying tokens= ", this.props.web3.utils.fromWei(tokenA_balance));
+                this.setState({tokenA_balance});
+    
+            }else if(this.state.selected_token === "B"){
+               
+                
+                await this.props.swapTokens_contract.methods.buyTokensB().send({value:call_value, from:this.props.connectedAccount});
+                let tokenB_balance = await this.props.tokenB_contract.methods.balanceOf(this.props.connectedAccount).call();
+                console.log("Token B Balance after buying tokens= ", this.props.web3.utils.fromWei(tokenB_balance));
+                this.setState({tokenB_balance});
+    
+            }else{
+                alert("ERROR in selected_token");
+            }
 
-            await this.props.swapTokens_contract.methods.buyTokensA().send({value:call_value, from:this.props.connectedAccount});
-
-            let tokenA_balance = await this.props.tokenA_contract.methods.balanceOf(this.props.connectedAccount).call();
-            console.log("Token A Balance after buying tokens= ", this.props.web3.utils.fromWei(tokenA_balance));
-            this.setState({tokenA_balance});
 
-        }else if(this.state.selected_token === "B"){
-            await this.props.swapTokens_contract.methods.buyTokensB().send({value:call_value, from:this.props.connectedAccount});
-            let tokenB_balance = await this.props.tokenB_contract.methods.balanceOf(this.props.connectedAccount).call();
-            console.log("Token B Balance after buying tokens= ", this.props.web3.utils.fromWei(tokenB_balance));
-            this.setState({tokenB_balance});
-
-        }else{
-            alert("ERROR in selected_token");
         }
 
 
     }else if(this.state.clicked_button === "sell"){
         let call_amount = this.props.web3.utils.toWei((this.state.token_amount).toString());
+        console.log("call amount = ", call_amount);
+        console.log("this.state.token_amount = ", this.state.token_amount);
+        console.log("this.state.tokenA_balance = ", this.state.tokenA_balance);
+        console.log("this.state.tokenB_balance = ", this.state.tokenB_balance);
+
         if(this.state.selected_token === "A"){
-            await this.props.swapTokens_contract.methods.sellTokensA(call_amount).send({from:this.props.connectedAccount});
-            let tokenA_balance = await this.props.tokenA_contract.methods.balanceOf(this.props.connectedAccount).call();
-            console.log("Token A Balance after selling tokens= ", this.props.web3.utils.fromWei(tokenA_balance));
-            this.setState({tokenA_balance});
+            if(call_amount > this.state.tokenA_balance){
+                alert("You don't have enough Tokens to be sold.")
+            }else{
+                await this.props.tokenA_contract.methods.approve(this.props.swapContract_address, call_amount).send({from:this.props.connectedAccount});
+                await this.props.swapTokens_contract.methods.sellTokensA(call_amount).send({from:this.props.connectedAccount});
+                let tokenA_balance = await this.props.tokenA_contract.methods.balanceOf(this.props.connectedAccount).call();
+                console.log("Token A Balance after selling tokens= ", this.props.web3.utils.fromWei(tokenA_balance));
+                this.setState({tokenA_balance});
+    
 
+            }
+          
         }else if(this.state.selected_token === "B"){
-            await this.props.swapTokens_contract.methods.sellTokensB(call_amount).send({from:this.props.connectedAccount});
-            let tokenB_balance = await this.props.tokenA_contract.methods.balanceOf(this.props.connectedAccount).call();
-            console.log("Token A Balance after selling tokens= ", this.props.web3.utils.fromWei(tokenB_balance));
-            this.setState({tokenB_balance});
+            if(call_amount > this.state.tokenB_balance){
+                alert("You don't have enough Tokens to be sold.")
+            }else{
+                await this.props.tokenB_contract.methods.approve(this.props.swapContract_address, call_amount).send({from:this.props.connectedAccount});
+                await this.props.swapTokens_contract.methods.sellTokensB(call_amount).send({from:this.props.connectedAccount});
+                let tokenB_balance = await this.props.tokenB_contract.methods.balanceOf(this.props.connectedAccount).call();
+                console.log("Token A Balance after selling tokens= ", this.props.web3.utils.fromWei(tokenB_balance));
+                this.setState({tokenB_balance});
+
+                }
+                
 
         }else{
             alert("ERROR in selected_token");
@@ -173,7 +198,7 @@ class Form extends Component {
 
     const eth_usd_rinkeby_proxy_address = "0x8A753747A1Fa494EC906cE90E9f37563A8AF630e";
     const priceFeed = new this.props.web3.eth.Contract(aggregatorV3InterfaceABI, eth_usd_rinkeby_proxy_address);
-    console.log(priceFeed);
+    console.log("price feed = ",priceFeed);
 
     let decimals = 0;
     decimals = await priceFeed.methods.decimals().call();

client/src/contracts/Migrations.json

@@ -1736,18 +1736,18 @@
     "4": {
       "events": {},
       "links": {},
-      "address": "0x233937ADdE8e3B644fc41AEFEd9ccc1609f9E7A3",
-      "transactionHash": "0xf0fceaeb06bfba569ec210f9322e9f77a4d1132baff35363308a0a9ce2912937"
+      "address": "0xeb79Cc12E1DBE1272452E117a9825cF92EAFA98b",
+      "transactionHash": "0xd5ed0c11b893a8b07f2af6e4e6610fb834a3c5731dedf8b71b451c719531ee4c"
     },
     "5777": {
       "events": {},
       "links": {},
-      "address": "0x4f56C379B4aa4628ab687F2a6a728ab34Ef8D784",
-      "transactionHash": "0x0705665bc173131aa7719f73cff13d43b09ade031aebd4bf54982377563e68a0"
+      "address": "0x0f4f1a8030652c84Baf744eaca62b3AA65a5a2D5",
+      "transactionHash": "0x6f17a97ad01640196759cb020b60c5b00e027348edb31c627a665fe7efb871c3"
     }
   },
   "schemaVersion": "3.4.3",
-  "updatedAt": "2021-11-24T19:10:40.825Z",
+  "updatedAt": "2021-11-25T21:13:18.087Z",
   "networkType": "ethereum",
   "devdoc": {
     "kind": "dev",

client/src/contracts/SwapTokens.json

@@ -10452,8 +10452,8 @@
         }
       },
       "links": {},
-      "address": "0xb6409B711d511A7db64cCBDa2Eca452AAad58ee2",
-      "transactionHash": "0x4e5e2d1f696f6bba826ba18d18a5733d57e8c20a492b9d5630ce91b73f79e64b"
+      "address": "0xd6054a80ba19E9d34FF09186178903E8D0789189",
+      "transactionHash": "0x50fcd578ed256411dae1117c02e6aed041ff06f3529bc02cf5edec119e64e0c9"
     },
     "5777": {
       "events": {
@@ -10509,12 +10509,12 @@
         }
       },
       "links": {},
-      "address": "0x8374AB864d5329977B3c82c6D7d51D5EF2E8b875",
-      "transactionHash": "0x5a83813ea51943d2331f67ca8eaca6c0e5ca9785bc8b8205141fbe1a1ce1cc0c"
+      "address": "0x01f63c9123bE3C588848E01734a1780ffA94D32a",
+      "transactionHash": "0xa3da8f8eff175fd8744978816d614a7ffb903183b8a5d43e7c5dd6f545fe0757"
     }
   },
   "schemaVersion": "3.4.3",
-  "updatedAt": "2021-11-24T19:10:40.796Z",
+  "updatedAt": "2021-11-25T21:13:18.064Z",
   "networkType": "ethereum",
   "devdoc": {
     "kind": "dev",

client/src/contracts/TokenA.json

@@ -10452,8 +10452,8 @@
         }
       },
       "links": {},
-      "address": "0x817E0B7b325Dd3b4EC40bF5895d4f51b01800Da1",
-      "transactionHash": "0x436936dab1de7fa9eb02bff866b7e44e7f019d87819d3b00c98ebdf4b96d44fc"
+      "address": "0xf71847456f40809cacf991c222A98f1b3F628240",
+      "transactionHash": "0xee812b3097ec80bb3162de21e9ff90ea67573af983bd0f01888cf92439520422"
     },
     "5777": {
       "events": {
@@ -10509,12 +10509,12 @@
         }
       },
       "links": {},
-      "address": "0x1df09c98652F0A30A65dD5E1cd7229c0B8B03405",
-      "transactionHash": "0x6be34c333fffc15b6c330d64b4f84e370853c52d8d4292ab7b6a2de2139d924d"
+      "address": "0x438342Af6561D769C094f46A6aE5506c1EE4D6a7",
+      "transactionHash": "0xb935589a26346e275a980015b2cf3017222c5c792ff598d78f58be01a8ad1901"
     }
   },
   "schemaVersion": "3.4.3",
-  "updatedAt": "2021-11-24T19:10:40.806Z",
+  "updatedAt": "2021-11-25T21:13:18.072Z",
   "networkType": "ethereum",
   "devdoc": {
     "kind": "dev",

client/src/contracts/TokenB.json

@@ -12,8 +12,8 @@ import "./TokenB.sol";
 contract SwapTokens{
 
   string public name = "SwapTokens Instant Exchange";
-  TokenA public token1;
-  TokenB public token2;
+  TokenA token1;
+  TokenB token2;
   uint public rate1 = 100; // 1 TKNA = 0.01 ETH
   uint public rate2 = 200; // 1 TKNB = 0.005 ETH
   address public owner;
@@ -56,9 +56,9 @@ contract SwapTokens{
   event Log(uint gas);
 
 
-  constructor(TokenA _token1, TokenB _token2) {
-    token1 = _token1;
-    token2 = _token2;
+  constructor(address _token1_address, address _token2_address) {
+    token1 = TokenA(_token1_address);
+    token2 = TokenB(_token2_address);
     owner = msg.sender; // owner is the deployer
 
   } 
@@ -88,7 +88,8 @@ contract SwapTokens{
     require(token1.balanceOf(address(this)) >= tokenAmount);
 
     // Transfer tokens to the user
-    token1.transfer(msg.sender, tokenAmount);
+    token1.transfer(msg.sender, tokenAmount); // swapTokens transfers tokenA to the msg.sender, becaue it has the allowance to do so.
+    
 
     // Emit an event
     emit TokensPurchased(msg.sender, address(token1), tokenAmount, rate1);
@@ -130,8 +131,10 @@ contract SwapTokens{
 
     // Require that SwapTokens has enough Eth
     require(address(this).balance >= etherAmount);
+    require(token1.allowance(msg.sender, address(this)) >= _amount);
 
     // Sell tokens
+
     token1.transferFrom(msg.sender, address(this), _amount);
     payable(msg.sender).transfer(etherAmount);
 
@@ -154,7 +157,7 @@ contract SwapTokens{
 
     // Require that SwapTokens has enough Ether
     require(address(this).balance >= etherAmount);
-
+    require(token2.allowance(msg.sender, address(this)) >= _amount);
     // Perform sale
     token2.transferFrom(msg.sender, address(this), _amount);
     payable(msg.sender).transfer(etherAmount);

contracts/SwapTokens.sol

@@ -1,7 +1,7 @@
 Testnet: Rinkeby
-SwapTokens Contract Address: 0x2522B1aAeA8a12cFe82E65CF7B07cc61eFD893DC
-TokenA Contract Address: 0xb6409B711d511A7db64cCBDa2Eca452AAad58ee2
-TokenB Contract Address: 0x817E0B7b325Dd3b4EC40bF5895d4f51b01800Da1
-Migrations Contract Address: 0x233937ADdE8e3B644fc41AEFEd9ccc1609f9E7A3
+SwapTokens Contract Address: 0xc485d33d8Da714701ac25De2aAdcCC00A0f70d7B
+TokenA Contract Address: 0xd6054a80ba19E9d34FF09186178903E8D0789189
+TokenB Contract Address: 0xf71847456f40809cacf991c222A98f1b3F628240
+Migrations Contract Address: 0xeb79Cc12E1DBE1272452E117a9825cF92EAFA98b
 Deployer Public Address: 0x4bb52fF3e053d127265A8A8dDf9Dc291fcF04aF0
-Final cost: 0.00967614254761444 ETH
+Final cost: 0.009489310034161516 ETH

deployed_address.txt

@@ -0,0 +1,39 @@
+https://github.com/mennat1/blockchain-developer-bootcamp-final-project
+
+Please answer the following questions. Does your project:
+
+1. Follow this naming format: https://github.com/YOUR_GITHUB_USERNAME_HERE/blockchain-developer-bootcamp-final-project? YES
+
+2. Contain a README.md file which describes the project, describes the directory structure, and where the frontend project can be accessed? And has your public Ethereum address if you'd like your certification as an NFT (optional)? YES
+
+3. Contain smart contract(s) which:
+--Are commented to the specs described by NatSpec Solidity documentation
+--Use at least two design patterns from the "Smart Contracts" section
+--Protect against two attack vectors from the "Smart Contracts" section with its the SWC number
+--Inherits from at least one library or interface
+--Can be easily compiled, migrated and tested? YES
+
+4. Contain a Markdown file named design_pattern_decisions.md and avoiding_common_attacks.md? YES
+
+5. Have at least five smart contract unit tests that pass? YES
+
+6. Contain a `deployed_address.txt` file which contains the testnet address and network where your contract(s) have been deployed? YES
+
+7. Have a frontend interface built with a framework like React or HTML/CSS/JS that:
+--Detects the presence of MetaMask
+--Connects to the current account
+--Displays information from your smart contract
+--Allows a user to submit a transaction to update smart contract state
+--Updates the frontend if the transaction is successful or not? YES
+
+8. Hosted on Github Pages, Heroku, Netlify, Fleek, or some other free frontend service that gives users a public interface to your decentralized application? (That address should be in your README.md document) YES
+
+9. Have clear instructions for: 
+1) Installing dependencies for your project 
+2) Accessing or—if your project needs a server (not required)—running your project
+3) Running your smart contract unit tests and which port a local testnet should be running on. YES
+
+10. A screencast of you walking through your project? YES
+
+
+Congratulations on finishing your final project!