Refactor: Move all components to separate files

.gitignore

@@ -3,3 +3,4 @@ node_modules
 .vscode
 dist
 .eslintcache
+.DS_Store

src/components/connections/connections.js

@@ -0,0 +1,73 @@
+/* import { walletConnect } from "../../connections"; */
+import globalContext from '../..';
+
+export function connectionsComponent(parentContainer) {
+  parentContainer.insertAdjacentHTML(
+    'beforeend',
+    `<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
+      <div class="card">
+        <div class="card-body">
+          <h4 class="card-title">
+            Connect Actions
+          </h4>
+
+          <button
+            class="btn btn-primary btn-lg btn-block mb-3"
+            id="connectButton"
+            disabled
+          >
+            Connect
+          </button>
+
+          <button
+            class="btn btn-primary btn-lg btn-block mb-3"
+            id="walletConnect"
+          >
+          Wallet Connect
+          </button>
+          <button
+            class="btn btn-primary btn-lg btn-block mb-3"
+            id="sdkConnect"
+          >
+          SDK Connect
+          </button>
+          <hr />
+          <button
+            class="btn btn-primary btn-lg btn-block mb-3"
+            id="getAccounts"
+          >
+            eth_accounts
+          </button>
+
+          <p class="info-text alert alert-secondary">
+            eth_accounts result: <span id="getAccountsResult"></span>
+          </p>
+        </div>
+      </div>
+    </div>`,
+  );
+
+  /*
+  const onboardButton = document.getElementById('connectButton');
+  const walletConnectBtn = document.getElementById('walletConnect');
+  const sdkConnectBtn = document.getElementById('sdkConnect');
+  */
+  const getAccounts = document.getElementById('getAccounts');
+  const getAccountsResult = document.getElementById('getAccountsResult');
+
+  document.addEventListener('disableAndClear', function () {
+    getAccountsResult.innerText = '';
+  });
+
+  getAccounts.onclick = async () => {
+    try {
+      const _accounts = await globalContext.provider.request({
+        method: 'eth_accounts',
+      });
+      getAccountsResult.innerHTML = _accounts || 'Not able to get accounts';
+    } catch (err) {
+      console.error(err);
+      getAccountsResult.innerHTML = `Error: ${err.message}`;
+    }
+  };
+}

src/components/connections/index.js

@@ -0,0 +1,2 @@
+export * from './connections';
+export * from './permissions';

src/components/connections/permissions.js

@@ -0,0 +1,94 @@
+import { getPermissionsDisplayString } from '../../utils';
+import globalContext from '../..';
+
+export function permissionsComponent(parentContainer) {
+  parentContainer.insertAdjacentHTML(
+    'beforeend',
+    `<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
+      <div class="card">
+        <div class="card-body">
+          <h4 class="card-title">
+            Permissions Actions
+          </h4>
+
+          <button
+            class="btn btn-primary btn-lg btn-block mb-3"
+            id="requestPermissions"
+          >
+            Request Permissions
+          </button>
+
+          <button
+            class="btn btn-primary btn-lg btn-block mb-3"
+            id="getPermissions"
+          >
+            Get Permissions
+          </button>
+          <button
+            class="btn btn-primary btn-lg btn-block mb-3"
+            id="revokeAccountsPermission"
+          >
+            Revoke Accounts Permission
+          </button>
+
+          <p class="info-text alert alert-secondary">
+            Permissions result: <span id="permissionsResult"></span>
+          </p>
+        </div>
+      </div>
+    </div>`,
+  );
+
+  const requestPermissions = document.getElementById('requestPermissions');
+  const getPermissions = document.getElementById('getPermissions');
+  const revokeAccountsPermission = document.getElementById(
+    'revokeAccountsPermission',
+  );
+  const permissionsResult = document.getElementById('permissionsResult');
+
+  document.addEventListener('disableAndClear', function () {
+    permissionsResult.innerText = '';
+  });
+
+  requestPermissions.onclick = async () => {
+    try {
+      const permissionsArray = await globalContext.provider.request({
+        method: 'wallet_requestPermissions',
+        params: [{ eth_accounts: {} }],
+      });
+      permissionsResult.innerHTML =
+        getPermissionsDisplayString(permissionsArray);
+    } catch (err) {
+      console.error(err);
+      permissionsResult.innerHTML = `Error: ${err.message}`;
+    }
+  };
+
+  getPermissions.onclick = async () => {
+    try {
+      const permissionsArray = await globalContext.provider.request({
+        method: 'wallet_getPermissions',
+      });
+      permissionsResult.innerHTML =
+        getPermissionsDisplayString(permissionsArray);
+    } catch (err) {
+      console.error(err);
+      permissionsResult.innerHTML = `Error: ${err.message}`;
+    }
+  };
+
+  revokeAccountsPermission.onclick = async () => {
+    try {
+      await globalContext.provider.request({
+        method: 'wallet_revokePermissions',
+        params: [
+          {
+            eth_accounts: {},
+          },
+        ],
+      });
+    } catch (err) {
+      permissionsResult.innerHTML = `${err.message}`;
+    }
+  };
+}

src/components/encryption/encrypt-decrypt.js

@@ -0,0 +1,156 @@
+import { encrypt } from '@metamask/eth-sig-util';
+import { stringifiableToHex } from '../../utils';
+import globalContext from '../..';
+
+export function encryptDecryptComponent(parentContainer) {
+  parentContainer.insertAdjacentHTML(
+    'beforeend',
+    `<div class="row d-flex justify-content-center">
+      <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
+        <div class="card">
+          <div class="card-body">
+            <h4 class="card-title">
+              Encrypt / Decrypt
+            </h4>
+
+            <button
+              class="btn btn-primary btn-lg btn-block mb-3"
+              id="getEncryptionKeyButton"
+              disabled
+            >
+              Get Encryption Key
+            </button>
+
+            <hr />
+
+            <div id="encrypt-message-form">
+              <input
+                class="form-control"
+                type="text"
+                placeholder="Message to encrypt"
+                id="encryptMessageInput"
+              />
+
+              <button
+                class="btn btn-primary btn-lg btn-block mb-3"
+                id="encryptButton"
+                disabled
+              >
+                Encrypt
+              </button>
+            </div>
+
+            <hr />
+
+            <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>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>`,
+  );
+
+  const getEncryptionKeyButton = document.getElementById(
+    'getEncryptionKeyButton',
+  );
+  const encryptMessageInput = document.getElementById('encryptMessageInput');
+  const encryptButton = document.getElementById('encryptButton');
+  const decryptButton = document.getElementById('decryptButton');
+  const encryptionKeyDisplay = document.getElementById('encryptionKeyDisplay');
+  const ciphertextDisplay = document.getElementById('ciphertextDisplay');
+  const cleartextDisplay = document.getElementById('cleartextDisplay');
+
+  document.addEventListener('globalConnectionChange', function (e) {
+    if (e.detail.connected) {
+      // MetaMask is connected, enable the button
+      getEncryptionKeyButton.disabled = false;
+    }
+  });
+
+  document.addEventListener('disableAndClear', function () {
+    getEncryptionKeyButton.disabled = true;
+    encryptMessageInput.disabled = true;
+    encryptButton.disabled = true;
+    decryptButton.disabled = true;
+    encryptionKeyDisplay.innerText = '';
+    encryptMessageInput.value = '';
+    ciphertextDisplay.innerText = '';
+    cleartextDisplay.innerText = '';
+  });
+
+  /**
+   * Encrypt / Decrypt
+   */
+
+  getEncryptionKeyButton.onclick = async () => {
+    try {
+      encryptionKeyDisplay.innerText = await globalContext.provider.request({
+        method: 'eth_getEncryptionPublicKey',
+        params: [globalContext.accounts[0]],
+      });
+      encryptMessageInput.disabled = false;
+    } catch (error) {
+      encryptionKeyDisplay.innerText = `Error: ${error.message}`;
+      encryptMessageInput.disabled = true;
+      encryptButton.disabled = true;
+      decryptButton.disabled = true;
+    }
+  };
+
+  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({
+          publicKey: encryptionKeyDisplay.innerText,
+          data: encryptMessageInput.value,
+          version: 'x25519-xsalsa20-poly1305',
+        }),
+      );
+      decryptButton.disabled = false;
+    } catch (error) {
+      ciphertextDisplay.innerText = `Error: ${error.message}`;
+      decryptButton.disabled = true;
+    }
+  };
+
+  decryptButton.onclick = async () => {
+    try {
+      cleartextDisplay.innerText = await globalContext.provider.request({
+        method: 'eth_decrypt',
+        params: [ciphertextDisplay.innerText, globalContext.accounts[0]],
+      });
+    } catch (error) {
+      cleartextDisplay.innerText = `Error: ${error.message}`;
+    }
+  };
+}