How to Create a Signature Generator DApp

1
import { useEffect, useState } from "react";
2
import "./styles/WalletButton.css";
3
4
const WalletButton = ({ setError }) => {
5
  const [walletAddress, setWallet] = useState("");
6
7
  const connectWallet = async () => {
8
		// Code goes here...
9
  };
10
  
11
  const getConnectedWallet = async () => {
12
		// Code goes here...
13
  };
14
15
  const walletConnectHandler = async () => {
16
		// Code goes here...
17
  };
18
19
  const addWalletListener = () => {
20
		// Code goes here...
21
  };
22
23
  const load = async () => {
24
		// Code goes here...
25
  };
26
27
  return (
28
    <div>
29
      <button className="wallet-button" onClick={walletConnectHandler}>
30
        {walletAddress.length > 0 ? (
31
          String(walletAddress).substring(0, 6) +
32
          "..." +
33
          String(walletAddress).substring(38)
34
        ) : (
35
          <span>Connect Wallet</span>
36
        )}
37
      </button>
38
    </div>
39
  );
40
};
41
42
export default WalletButton;

1
const connectWallet = async () => {
2
    if (window.ethereum) {
3
      // Checks if MetaMask is installed in the browser
4
      try {
5
        const addressArray = await window.ethereum.request({
6
          method: "eth_requestAccounts",
7
	      // Requests an array of account addresses from the connect MetaMask wallet 
8
        });
9
        const obj = {
10
          address: addressArray[0],
11
	      // Grabs the first address in the array
12
        };
13
        return obj;
14
      } catch (err) {
15
        throw err;
16
      }
17
    } else {
18
      throw new Error(
19
        "You must install MetaMask, a virtual Ethereum wallet, in your browser."
20
      // If MetaMask is not installed, the function will throw an error and tell the user they first need to install Metamask
21
      );
22
    }
23
  };

1
const getConnectedWallet = async () => {
2
    if (window.ethereum) {
3
      try {
4
        const addressArray = await window.ethereum.request({
5
          method: "eth_accounts",
6
	// Requests an array of account addresses from the connected MetaMask wallet
7
        });
8
        if (addressArray.length > 0) {
9
          return {
10
            address: addressArray[0],
11
	// First, we make sure atleast one address is avaiable and then return the first address in the array
12
          };
13
        } else {
14
          throw new Error("Connect to MetaMask using the connect wallet button.");
15
	// If there are no addresses in the array, this means MetaMask is installed but the user has not connected their account yet.
16
        }
17
      } catch (err) {
18
        throw err;
19
      }
20
    } else {
21
      throw new Error(
22
        "You must install MetaMask, a virtual Ethereum wallet, in your browser."
23
      );
24
    }
25
  };

1
const walletConnectHandler = async () => {
2
    try {
3
      const walletResponse = await connectWallet();
4
      // We create a variable to await the returned promise of our connectWallet function
5
      setWallet(walletResponse.address);
6
      // Now we set the walletAddress state with the response so we can render this change in our wallet button
7
      setError(null);
8
      // The SetError state is managed in App.js and is passed in as a prop to our wallet button
9
      // The state is set to null because we did not encounter an error while connecting to the wallet
10
    } catch (e) {
11
      setError(e.message);
12
      // Otherwise, we set the error state with the encountered error
13
    }
14
  };

1
const addWalletListener = () => {
2
    if (window.ethereum) {
3
      window.ethereum.on("accountsChanged", (accounts) => {
4
	// First, we listen for an account change event from Metamask
5
        if (accounts.length > 0) {
6
          setWallet(accounts[0]);
7
	// Then, we set our walletAddress state to the new account address
8
          setError(null);
9
        } else {
10
          setWallet("");
11
        }
12
      });
13
    } else {
14
      throw Error(
15
        "You must install Metamask, a virtual Ethereum wallet, in your browser."
16
      );
17
    }
18
  };

1
const load = async () => {
2
    try {
3
      const address = await getConnectedWallet();
4
      setWallet(address);
5
      addWalletListener();
6
    } catch (e) {
7
      setError(e.message);
8
    }
9
  };

1
useEffect(() => {
2
    load();
3
  }, []);

1
import "./styles/SignMessage.css";
2
const { ethers } = require("ethers");
3
4
const SignMessage = (props) => {
5
  const messageToSign = async ({ message, setError }) => {
6
	   // Code goes here...
7
  };
8
9
  const signMessageHandler = async (e) => {
10
  	   // Code goes here...
11
  };
12
13
  return (
14
    <div className="card1">
15
      <div className="banner-sign">
16
        <span>Sign Messages</span>
17
      </div>
18
      <form
19
	//Add a pointer to our messageHandler function when a message is submitted
20
        className="sign-form"
21
        id="form-submit"
22
      >
23
        <div className="form-title-message">
24
          <span>Message to sign</span>
25
        </div>
26
        <textarea
27
          className="message-input"
28
          type="text"
29
          name="message"
30
          placeholder="Enter a message here..."
31
        ></textarea>
32
      </form>
33
      <div className="alert-div">
34
        <button
35
          className="sign-message-button"
36
          form="form-submit"
37
          type="submit"
38
        >
39
          <span>Sign Message</span>
40
        </button>
41
      </div>
42
    </div>
43
  );
44
};
45
46
export default SignMessage;

1
const messageToSign = async ({ message, setError }) => {
2
    try {
3
      if (!window.ethereum)
4
        setError("Please connect your wallet before signing a message!");
5
      const provider = new ethers.providers.Web3Provider(window.ethereum);
6
	// First, lets create an Ethers provider instance so we can interact with MetaMask
7
      const signer = provider.getSigner();
8
	// Then, we retrieve our signer from MetaMask
9
      const signatureHash = await signer.signMessage(message);
10
	// Generate a unique signature hash from the message we passed in from our form submission and the signer's MetaMask
11
      const address = await signer.getAddress();
12
	// Also lets grab our signer's Address 
13
      return {
14
        message,
15
        signatureHash,
16
        address
17
      };
18
	// Finally, we return an object with the message, signature hash, and address
19
    } catch (err) {
20
      console.log(err.message);
21
    }
22
  };

1
const messageToSign = async ({ message, setError }) => {
2
    try {
3
      if (!window.ethereum)
4
        setError("Please connect your wallet before signing a message!");
5
      const provider = new ethers.providers.Web3Provider(window.ethereum);
6
      const signer = provider.getSigner();
7
      const signatureHash = await signer.signMessage(message);
8
      const date = new Date();
9
	//creates new date object
10
      const minutes = date.getMinutes();
11
      const minutedigit = minutes <= 9 ? '0' + minutes : minutes;
12
      const seconds = date.getSeconds();
13
      const seconddigit = seconds <= 9 ? '0' + seconds : seconds;
14
	// Here, we format the minutes seconds so that they are always 2-digits
15
      const dateFormat =
16
        date.toDateString().slice(4) +
17
        " " +
18
        date.getHours() +
19
        ":" +
20
        minutedigit +
21
        ":" +
22
        seconddigit;
23
      const timestamp = dateFormat.toString();
24
	// We create a timestamp variable and convert it to a string
25
      const address = await signer.getAddress();
26
27
      return {
28
        message,
29
        signatureHash,
30
        address,
31
        timestamp,
32
	// Then, the timestamp can be added to the returned object
33
      };
34
    } catch (err) {
35
      console.log(err.message);
36
    }
37
  };

1
const signMessageHandler = async (e) => {
2
    e.preventDefault();
3
    const entry = new FormData(e.target);
4
      // first we create a new FormData object which takes the target, or in this case, form entry of the passed in event 
5
    const sig = await messageToSign({
6
      message: entry.get("message"),
7
    });
8
      // Next we await the promise of our messageToSign function and pass in our form entry message.
9
    if (sig) {
10
      // Finally, if the signature object is created we use the passed in props to send it over to our generated signatures component
11
      props.onSubmit(sig);
12
    }
13
	   
14
  };

1
import "./styles/SignMessage.css";
2
const { ethers } = require("ethers");
3
4
const SignMessage = (props) => {
5
  const messageToSign = async ({ message, setError }) => {
6
    try {
7
      if (!window.ethereum)
8
        setError("Please connect your wallet before signing a message!");
9
      const provider = new ethers.providers.Web3Provider(window.ethereum);
10
      const signer = provider.getSigner();
11
      const signatureHash = await signer.signMessage(message);
12
      const date = new Date();
13
      const minutes = date.getMinutes();
14
      const minutedigit = minutes <= 9 ? '0' + minutes : minutes;
15
      const seconds = date.getSeconds();
16
      const seconddigit = seconds <= 9 ? '0' + seconds : seconds;
17
      const dateFormat =
18
        date.toDateString().slice(4) +
19
        " " +
20
        date.getHours() +
21
        ":" +
22
        minutedigit +
23
        ":" +
24
        seconddigit;
25
      const timestamp = dateFormat.toString();
26
      const address = await signer.getAddress();
27
28
      return {
29
        message,
30
        signatureHash,
31
        address,
32
        timestamp,
33
      };
34
    } catch (err) {
35
      console.log(err.message);
36
    }
37
  };
38
39
  const signMessageHandler = async (e) => {
40
    e.preventDefault();
41
    const entry = new FormData(e.target);
42
    const sig = await messageToSign({
43
      message: entry.get("message"),
44
    });
45
    if (sig) {
46
      props.onSubmit(sig);
47
    }
48
  };
49
50
  return (
51
    <div className="card1">
52
      <div className="banner-sign">
53
        <span>Sign Messages</span>
54
      </div>
55
      <form
56
        onSubmit={signMessageHandler} // <--- add pointer here
57
        className="sign-form"
58
        id="form-submit"
59
      >
60
        <div className="form-title-message">
61
          <span>Message to sign</span>
62
        </div>
63
        <textarea
64
          className="message-input"
65
          type="text"
66
          name="message"
67
          placeholder="Enter a message here..."
68
        ></textarea>
69
      </form>
70
      <div className="alert-div">
71
        <button
72
          className="sign-message-button"
73
          form="form-submit"
74
          type="submit"
75
        >
76
          <span>Sign Message</span>
77
        </button>
78
      </div>
79
    </div>
80
  );
81
};
82
83
export default SignMessage;

1
import "./styles/VerifySignature.css";
2
import SuccessMessage from "./SuccessMessage";
3
import ErrorMessage from "./ErrorMessage";
4
import { useState } from "react";
5
const { ethers } = require("ethers");
6
const { hashMessage } = require("@ethersproject/hash");
7
8
const VerifyMessage = () => {
9
  const [error, setError] = useState();
10
  const [success, setSuccess] = useState();
11
12
  const signatureToVerify = async ({ address, message, signature }) => {
13
		// Code goes here...
14
  };
15
  const verifySignatureHandler = async (e) => {
16
		// Code goes here...
17
18
  };
19
  return (
20
    <div className="card1">
21
      <div className="banner-sign">
22
        <span>Verify Signatures</span>
23
      </div>
24
      <form
25
        className="verify-form"
26
        id="form-submit2"
27
	// Add a pointer to our verifySignatureHandler function when a message is submitted
28
      >
29
        <div className="form-title-message">
30
          <span>Address</span>
31
        </div>
32
        <input
33
          className="address-input"
34
          type="text"
35
          name="address"
36
          placeholder="0x..."
37
        ></input>
38
        <div className="form-title-message">
39
          <span>Message</span>
40
        </div>
41
42
        <textarea
43
          className="message-input2"
44
          type="text"
45
          name="message"
46
          placeholder="Enter a message here..."
47
        ></textarea>
48
        <div className="form-title-message">
49
          <span>Signature</span>
50
        </div>
51
        <input
52
          className="signature-input2"
53
          type="text"
54
          name="signature"
55
        ></input>
56
      </form>
57
      <div className="alert-div">
58
        <SuccessMessage message={success}></SuccessMessage>
59
        <ErrorMessage message={error}></ErrorMessage>
60
        <button
61
          className="sign-message-button"
62
          type="submit"
63
          form="form-submit2"
64
        >
65
          <span>Verify Signature</span>
66
        </button>
67
      </div>
68
    </div>
69
  );
70
};
71
72
export default VerifyMessage;

1
const signatureToVerify = async ({ address, message, signature }) => {
2
    try {
3
      const signerAddr = ethers.utils.recoverAddress(
4
        hashMessage(message),
5
        signature
6
      );
7
	// Takes the passed in signatureand message value and returns the signer address
8
      console.log(signerAddr);
9
      if (signerAddr !== address) {
10
        return false;
11
	// If the signer address is different from the entered address the function will return false
12
      }
13
      return true;
14
	// Else, the signer address matches the entered address and the signature is valid
15
    } catch (err) {
16
      console.log(err);
17
      return false;
18
    }
19
  };

1
const verifySignatureHandler = async (e) => {
2
    e.preventDefault();
3
    const entry = new FormData(e.target);
4
    setSuccess();
5
    setError();
6
    const verify = await signatureToVerify({
7
      address: entry.get("address"),
8
      message: entry.get("message"),
9
      signature: entry.get("signature"),
10
    });
11
  // Passes data from our form to the 
12
13
    if (verify) {
14
      setSuccess("Valid signature!");
15
    } else {
16
      setError("Invalid signature!");
17
    }
18
  //Awaits the promise of the signatureToVerify function and sets the correct state
19
  };

1
import "./styles/VerifySignature.css";
2
import SuccessMessage from "./SuccessMessage";
3
import ErrorMessage from "./ErrorMessage";
4
import { useState } from "react";
5
const { ethers } = require("ethers");
6
const { hashMessage } = require("@ethersproject/hash");
7
8
const VerifyMessage = () => {
9
  const [error, setError] = useState();
10
  const [success, setSuccess] = useState();
11
12
  const signatureToVerify = async ({ address, message, signature }) => {
13
    try {
14
      const signerAddr = ethers.utils.recoverAddress(
15
        hashMessage(message),
16
        signature
17
      );
18
      console.log(signerAddr);
19
      if (signerAddr !== address) {
20
        return false;
21
      }
22
      return true;
23
    } catch (err) {
24
      console.log(err);
25
      return false;
26
    }
27
  };
28
  const verifySignatureHandler = async (e) => {
29
   const verifySignatureHandler = async (e) => {
30
    e.preventDefault();
31
    const entry = new FormData(e.target);
32
    setSuccess();
33
    setError();
34
    const verify = await signatureToVerify({
35
      address: entry.get("address"),
36
      message: entry.get("message"),
37
      signature: entry.get("signature"),
38
    });
39
40
    if (verify) {
41
      setSuccess("Valid signature!");
42
    } else {
43
      setError("Invalid signature!");
44
    }
45
	
46
  };
47
48
  };
49
  return (
50
    <div className="card1">
51
      <div className="banner-sign">
52
        <span>Verify Signatures</span>
53
      </div>
54
      <form
55
        className="verify-form"
56
        id="form-submit2"
57
	onSubmit={verifySignatureHandler} // <--- add pointer here
58
      >
59
        <div className="form-title-message">
60
          <span>Address</span>
61
        </div>
62
        <input
63
          className="address-input"
64
          type="text"
65
          name="address"
66
          placeholder="0x..."
67
        ></input>
68
        <div className="form-title-message">
69
          <span>Message</span>
70
        </div>
71
72
        <textarea
73
          className="message-input2"
74
          type="text"
75
          name="message"
76
          placeholder="Enter a message here..."
77
        ></textarea>
78
        <div className="form-title-message">
79
          <span>Signature</span>
80
        </div>
81
        <input
82
          className="signature-input2"
83
          type="text"
84
          name="signature"
85
        ></input>
86
      </form>
87
      <div className="alert-div">
88
        <SuccessMessage message={success}></SuccessMessage>
89
        <ErrorMessage message={error}></ErrorMessage>
90
        <button
91
          className="sign-message-button"
92
          type="submit"
93
          form="form-submit2"
94
        >
95
          <span>Verify Signature</span>
96
        </button>
97
      </div>
98
    </div>
99
  );
100
};
101
102
export default VerifyMessage;