Install nodemon

client/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "ethereum-cryptography": "^1.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

client/src/App.jsx

@@ -6,16 +6,21 @@ import { useState } from "react";
 function App() {
   const [balance, setBalance] = useState(0);
   const [address, setAddress] = useState("");
-
+  const [privateKey,setPrivateKey] = useState("");
+  const [signature, setSignature] = useState("");
   return (
     <div className="app">
       <Wallet
         balance={balance}
+        privateKey = {privateKey}
+        setPrivateKey = {setPrivateKey}
         setBalance={setBalance}
         address={address}
         setAddress={setAddress}
+        signature = {signature}
+        setSignature = {setSignature}
       />
-      <Transfer setBalance={setBalance} address={address} />
+      <Transfer setBalance={setBalance} address={address} privateKey={privateKey} />
     </div>
   );
 }

client/src/Transfer.jsx

@@ -1,15 +1,34 @@
 import { useState } from "react";
 import server from "./server";
+import * as secp from "ethereum-cryptography/secp256k1"
+import { keccak256 } from "ethereum-cryptography/keccak";
+import { toHex, utf8ToBytes } from "ethereum-cryptography/utils";
 
-function Transfer({ address, setBalance }) {
+function Transfer({ address, setBalance, privateKey }) {
   const [sendAmount, setSendAmount] = useState("");
   const [recipient, setRecipient] = useState("");
+  const [signature, setSignature] = useState("");
+  const [recoveryBit, setRecoveryBit] = useState("");
 
   const setValue = (setter) => (evt) => setter(evt.target.value);
-
+  function hashMessage(message){
+    return toHex(keccak256(utf8ToBytes(message)));
+  }
   async function transfer(evt) {
     evt.preventDefault();
 
+    const message = {
+      address, sendAmount, recipient,
+    };
+
+    const hash = hashMessage(JSON.stringify(message));
+    const [sig, recoveryBit] = await secp.sign(hash, privateKey, {recovered: true});
+    message.sign = toHex(sig);
+    message.recoveryBit = recoveryBit;
+    setSignature(toHex(sig));
+    setRecoveryBit(recoveryBit);
+    console.log('request:', message);
+
     try {
       const {
         data: { balance },
@@ -45,7 +64,12 @@ function Transfer({ address, setBalance }) {
           onChange={setValue(setRecipient)}
         ></input>
       </label>
-
+      <div>
+        Signature: {signature}
+      </div>
+      <div>
+        Recovery Bit: {recoveryBit}
+      </div>
       <input type="submit" className="button" value="Transfer" />
     </form>
   );

client/src/Wallet.jsx

@@ -1,8 +1,13 @@
+import * as secp from "ethereum-cryptography/secp256k1"
+import {toHex} from "ethereum-cryptography/utils"
+import {keccak256} from "ethereum-cryptography/keccak"
 import server from "./server";
 
-function Wallet({ address, setAddress, balance, setBalance }) {
+function Wallet({ address, setAddress, balance, setBalance, privateKey, setPrivateKey }) {
   async function onChange(evt) {
-    const address = evt.target.value;
+    const privateKey = evt.target.value;
+    setPrivateKey(privateKey);
+    const address = toHex(keccak256((secp.getPublicKey(privateKey)).slice(1)).slice(-20));
     setAddress(address);
     if (address) {
       const {
@@ -19,10 +24,12 @@ function Wallet({ address, setAddress, balance, setBalance }) {
       <h1>Your Wallet</h1>
 
       <label>
-        Wallet Address
-        <input placeholder="Type an address, for example: 0x1" value={address} onChange={onChange}></input>
+        Private Key
+        <input placeholder="Type an address, for example: 0x1" value={privateKey} onChange={onChange}></input>
       </label>
-
+      <div>
+        Address: {address}
+      </div>
       <div className="balance">Balance: {balance}</div>
     </div>
   );

client/src/crypto.js

@@ -0,0 +1,24 @@
+// const secp = require("ethereum-cryptography/secp256k1");
+import secp from 'ethereum-cryptography/secp256k1';
+import { keccak256 } from 'ethereum-cryptography/keccak';
+import { utf8ToBytes } from 'ethereum-cryptography/utils'
+// const { keccak256 } = require("ethereum-cryptography/keccak");
+// const { utf8ToBytes } = require("ethereum-cryptography/utils");
+
+function hashMessage(message) {
+  return keccak256(utf8ToBytes(message));
+}
+
+function signMessage(message, privateKey) {
+  const hash = hashMessage(message);
+  const signature = secp.sign(hash, privateKey, { recovered: true });
+  return signature;
+}
+
+function recoverKey(message, signature, recoveryBit) {
+  const hash = hashMessage(message);
+  const publicKey = secp.recoverPublicKey(hash, signature, recoveryBit);
+  return publicKey;
+}
+
+export { hashMessage, signMessage, recoverKey };