Improve encrypt/decrypt flow

Made encrypt/decrypt a "fully functional" flow, so the test dapp can actually be used as an encrypted messenger. Fixes #124
MetaMask · Sep 4, 2021 · 7ff26e1 · 7ff26e1
1 parent c5c3bf5
commit 7ff26e1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 29 deletions.
diff --git a/src/index.html b/src/index.html
@@ -258,12 +258,17 @@ <h4 class="card-title">
                 <button
                   class="btn btn-primary btn-lg btn-block mb-3"
                   id="getEncryptionKeyButton"
-                  disabled
                 >
-                  Get Encryption Key
+                  Get Public Encryption Key
                 </button>
 
+                <p class="info-text alert alert-secondary">
+                  Public Encryption key: <span id="encryptionKeyDisplay"></span>
+                </p>
                 <hr />
+                <h5 class="card-title">
+                  Encrypt
+                </h5>
 
                 <div id="encrypt-message-form">
                   <input
@@ -272,33 +277,45 @@ <h4 class="card-title">
                     placeholder="Message to encrypt"
                     id="encryptMessageInput"
                   />
+                  <input
+                    class="form-control"
+                    type="text"
+                    placeholder="Recipient's Public Encryption Key"
+                    id="publicKeyInput"
+                  />
 
                   <button
                     class="btn btn-primary btn-lg btn-block mb-3"
                     id="encryptButton"
-                    disabled
                   >
                     Encrypt
                   </button>
+
+                  <p class="info-text alert alert-secondary">
+                    Ciphertext: <span id="ciphertextDisplay"></span>
+                  </p>
                 </div>
 
                 <hr />
+                <h5 class="card-title">
+                  Decrypt 
+                </h5>
+
+
+                <input
+                  class="form-control"
+                  type="text"
+                  placeholder="Encrypted Message"
+                  id="encryptedMessageInput"
+                />
 
                 <button
                   class="btn btn-primary btn-lg btn-block mb-3"
                   id="decryptButton"
-                  disabled
                 >
                   Decrypt
                 </button>
 
-                <p class="info-text alert alert-secondary">
-                  Encryption key: <span id="encryptionKeyDisplay"></span>
-                </p>
-
-                <p class="info-text text-truncate alert alert-secondary">
-                  Ciphertext: <span id="ciphertextDisplay"></span>
-                </p>
 
                 <p class="info-text alert alert-secondary">
                   Cleartext: <span id="cleartextDisplay"></span>

diff --git a/src/index.js b/src/index.js
@@ -6,6 +6,7 @@ import {
   recoverTypedSignatureLegacy,
   recoverTypedSignature,
   recoverTypedSignature_v4 as recoverTypedSignatureV4,
+  decrypt,
 } from 'eth-sig-util';
 import { ethers } from 'ethers';
 import { toChecksumAddress } from 'ethereumjs-util';
@@ -69,6 +70,8 @@ const getEncryptionKeyButton = document.getElementById(
   'getEncryptionKeyButton',
 );
 const encryptMessageInput = document.getElementById('encryptMessageInput');
+const publicKeyInput = document.getElementById('publicKeyInput');
+const encryptedMessageInput = document.getElementById('encryptedMessageInput');
 const encryptButton = document.getElementById('encryptButton');
 const decryptButton = document.getElementById('decryptButton');
 const encryptionKeyDisplay = document.getElementById('encryptionKeyDisplay');
@@ -204,17 +207,21 @@ const initialize = async () => {
       createToken.disabled = false;
       personalSign.disabled = false;
       signTypedData.disabled = false;
-      getEncryptionKeyButton.disabled = false;
       ethSign.disabled = false;
       personalSign.disabled = false;
       signTypedData.disabled = false;
       signTypedDataV3.disabled = false;
       signTypedDataV4.disabled = false;
+      getEncryptionKeyButton.disabled = false;
+      encryptButton.disabled = false;
+      decryptButton.disabled = false;
     }
 
     if (isMetaMaskInstalled()) {
       addEthereumChain.disabled = false;
       switchEthereumChain.disabled = false;
+      encryptMessageInput.disabled = false;
+      encryptedMessageInput.disabled = false;
     } else {
       onboardButton.innerText = 'Click here to install MetaMask!';
       onboardButton.onclick = onClickInstall;
@@ -511,32 +518,17 @@ const initialize = async () => {
       }
     };
 
-    encryptMessageInput.onkeyup = () => {
-      if (
-        !getEncryptionKeyButton.disabled &&
-        encryptMessageInput.value.length > 0
-      ) {
-        if (encryptButton.disabled) {
-          encryptButton.disabled = false;
-        }
-      } else if (!encryptButton.disabled) {
-        encryptButton.disabled = true;
-      }
-    };
-
     encryptButton.onclick = () => {
       try {
         ciphertextDisplay.innerText = stringifiableToHex(
           encrypt(
-            encryptionKeyDisplay.innerText,
+            publicKeyInput.value,
             { data: encryptMessageInput.value },
             'x25519-xsalsa20-poly1305',
           ),
         );
-        decryptButton.disabled = false;
       } catch (error) {
         ciphertextDisplay.innerText = `Error: ${error.message}`;
-        decryptButton.disabled = true;
       }
     };
 
@@ -585,7 +577,6 @@ const initialize = async () => {
         params: [msg, from, 'Example password'],
       });
       personalSignResult.innerHTML = sign;
-      personalSignVerify.disabled = false;
     } catch (err) {
       console.error(err);
       personalSign.innerHTML = `Error: ${err.message}`;