Merge pull request #14 from faranak-cs/gh10-wip

final

contracts/VerifySignature.sol

@@ -2,6 +2,7 @@
 pragma solidity ^0.8.24;
 
 contract VerifySignature {
+    // message hash
     function getMessageHash(
         address _to,
         uint _amount,
@@ -11,6 +12,7 @@ contract VerifySignature {
         return keccak256(abi.encodePacked(_to, _amount, _message, _nonce));
     }
 
+    // Ethereum message hash
     function getEthSignedMessageHash(
         bytes32 _messageHash
     ) public pure returns (bytes32) {
@@ -23,6 +25,7 @@ contract VerifySignature {
             );
     }
 
+    // verify signature
     function verify(
         address _signer,
         address _to,
@@ -37,6 +40,7 @@ contract VerifySignature {
         return recoverSigner(ethSignedMessageHash, signature) == _signer;
     }
 
+    // get original signer
     function recoverSigner(
         bytes32 _ethSignedMessageHash,
         bytes memory _signature
@@ -46,6 +50,7 @@ contract VerifySignature {
         return ecrecover(_ethSignedMessageHash, v, r, s);
     }
 
+    // take out [r, s, v] values from signature
     function splitSignature(
         bytes memory sig
     ) public pure returns (bytes32 r, bytes32 s, uint8 v) {

frontend/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "bootstrap": "^5.3.3",
+    "dotenv": "^16.4.5",
     "ethers": "^6.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend/src/App.jsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
 
 import Nav from "./Nav";
-import MainMenu from "./MainMenu";
+import Home from "./Home";
 import Deposit from "./Deposit";
 import Mint from "./Mint";
 import Transfer from "./Transfer";
@@ -19,7 +19,7 @@ function App() {
         <div className="App">
           <Nav />
           <Switch>
-            <Route path="/" exact component={MainMenu} />
+            <Route path="/" exact component={Home} />
             <Route path="/deposit" component={Deposit} />
             <Route path="/mint" component={Mint} />
             <Route path="/transfer" component={Transfer} />

frontend/src/Deposit.jsx

@@ -1,24 +1,118 @@
+import { ethers, Contract } from "ethers";
+import OurToken from "./artifacts/contracts/OurToken.sol/OurToken.json";
+
 import { useState } from "react";
 
 function Deposit() {
+  const [msg, setMsg] = useState("");
   const [sig, setSig] = useState("");
+  const [value, setValue] = useState(0);
+  const [spender, setSpender] = useState("");
+
+  const handleDeposit = async () => {
+    if (typeof window.ethereum !== "undefined") {
+      // connect ethers ✅
+      const provider = new ethers.BrowserProvider(window.ethereum);
+      const signer = await provider.getSigner();
+
+      // contract address ✅
+      // contract ABI ✅
+      // signer ✅
+      const tokenAddress = "0x5FbDB2315678afecb367f032d93F642f64180aa3";
+      const token = new ethers.Contract(tokenAddress, OurToken.abi, signer);
+
+      // set values for signature ✅
+      const [nonce, name, version, chainId] = [0, "OurToken", "1", 31337];
+      const deadline = ethers.MaxUint256;
 
-  const handleDeposit = () => {
-    setSig("0xuxyz");
+      try {
+        // mint tokens to owner address ✅
+        await token.mint(signer.address, value);
+
+        // generate signature to access tokens ✅
+        const sig = await signer.signTypedData(
+          {
+            name,
+            version,
+            chainId,
+            verifyingContract: tokenAddress,
+          },
+          {
+            Permit: [
+              {
+                name: "owner",
+                type: "address",
+              },
+              {
+                name: "spender",
+                type: "address",
+              },
+              {
+                name: "value",
+                type: "uint256",
+              },
+              {
+                name: "nonce",
+                type: "uint256",
+              },
+              {
+                name: "deadline",
+                type: "uint256",
+              },
+            ],
+          },
+          {
+            owner: signer.address,
+            spender,
+            value,
+            nonce,
+            deadline,
+          }
+        );
+
+        // set signature
+        setSig(sig);
+
+        // set message
+        setMsg("Deposit successfully!");
+      } catch (error) {
+        console.log(error);
+        setMsg("Deposit unsuccessful!");
+      }
+    } else {
+      setMsg("Install MetaMask first!");
+    }
   };
 
   return (
     <div>
       <h1>Deposit Fiat Currency</h1>
       <div className="form-group">
         <label htmlFor="deposit_amount" className="form-label">
-          Enter the amount ($):
+          Enter the amount:
         </label>
         <input
           type="number"
           name="deposit_amount"
           id="deposit_amount"
           className="form-control"
+          onKeyUp={(e) => {
+            setValue(e.target.value);
+          }}
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="wallet_address" className="form-label">
+          Enter the wallet address:
+        </label>
+        <input
+          type="text"
+          name="wallet_address"
+          id="wallet_address"
+          className="form-control"
+          onKeyUp={(e) => {
+            setSpender(e.target.value);
+          }}
         />
       </div>
 
@@ -38,8 +132,11 @@ function Deposit() {
           id="signature"
           className="form-control"
           value={sig}
+          readOnly
         />
       </div>
+      <hr />
+      <label className="form-label">{msg}</label>
     </div>
   );
 }

frontend/src/Home.jsx

@@ -0,0 +1,76 @@
+import { ethers, Contract, toNumber } from "ethers";
+import OurToken from "./artifacts/contracts/OurToken.sol/OurToken.json";
+
+import { useState } from "react";
+
+function Home() {
+  const [account, setAccount] = useState("");
+  const [tokenAmount, setTokenAmount] = useState(0);
+
+  const handleCheck = async () => {
+    if (typeof window.ethereum !== "undefined") {
+      // connect ethers ✅
+      const provider = new ethers.BrowserProvider(window.ethereum);
+      const signer = await provider.getSigner();
+
+      // contract address ✅
+      // contract ABI ✅
+      // signer ✅
+      const tokenAddress = "0x5FbDB2315678afecb367f032d93F642f64180aa3";
+      const token = new ethers.Contract(tokenAddress, OurToken.abi, signer);
+
+      try {
+        setTokenAmount(toNumber(await token.balanceOf(account)));
+      } catch (error) {
+        console.log(error);
+        setTokenAmount(-1);
+      }
+    } else {
+      setTokenAmount(-1);
+    }
+  };
+
+  return (
+    <div>
+      <h1>CBDC Token System</h1>
+      <p>User details ...</p>
+
+      <div className="form-group">
+        <label htmlFor="wallet_address" className="form-label">
+          Enter the wallet address:
+        </label>
+        <input
+          type="text"
+          name="wallet_address"
+          id="wallet_address"
+          className="form-control"
+          onChange={(e) => {
+            setAccount(e.target.value);
+          }}
+        />
+      </div>
+
+      <br />
+      <button className="btn btn-primary" onClick={handleCheck}>
+        Check
+      </button>
+      <hr />
+
+      <div className="form-group">
+        <label htmlFor="tokens" className="form-label">
+          Available Tokens:
+        </label>
+        <input
+          type="number"
+          name="tokens"
+          id="tokens"
+          className="form-control"
+          value={tokenAmount}
+          readOnly
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Home;