feat: add EIP-5792 section (#388)

Author: matthewwalsh0

src/components/transactions/eip5792/getCallsStatus.js

@@ -0,0 +1,59 @@
+import globalContext from '../../..';
+
+export function getCallsStatusComponent(parentContainer) {
+  parentContainer.insertAdjacentHTML(
+    'beforeend',
+    `<div class="form-group">
+        <label>Request ID</label>
+        <input
+            class="form-control"
+            type="text"
+            id="eip5792RequestIdInput"
+        />
+    </div>
+
+    <button
+        class="btn btn-primary btn-lg btn-block mb-3"
+        id="eip5792GetCallsStatusButton"
+        disabled
+    >
+        Get Calls Status
+    </button>
+
+    <p class="info-text alert alert-success">
+        <span class="wrap" id="eip5792GetCallsStatusResult">Status</span>
+    </p>`,
+  );
+
+  const requestIdInput = document.getElementById('eip5792RequestIdInput');
+
+  const getCallsStatusButton = document.getElementById(
+    'eip5792GetCallsStatusButton',
+  );
+
+  const resultOutput = document.getElementById('eip5792GetCallsStatusResult');
+
+  document.addEventListener('globalConnectionChange', function (e) {
+    if (e.detail.connected) {
+      getCallsStatusButton.disabled = false;
+    }
+  });
+
+  document.addEventListener('disableAndClear', function () {
+    getCallsStatusButton.disabled = true;
+  });
+
+  getCallsStatusButton.onclick = async () => {
+    try {
+      const result = await globalContext.provider.request({
+        method: 'wallet_getCallsStatus',
+        params: [requestIdInput.value],
+      });
+
+      resultOutput.innerHTML = JSON.stringify(result, null, 2);
+    } catch (error) {
+      console.error(error);
+      resultOutput.innerHTML = `Error: ${error.message}`;
+    }
+  };
+}

src/components/transactions/eip5792/getCapabilities.js

@@ -0,0 +1,60 @@
+import globalContext from '../../..';
+
+export function getCapabilitiesComponent(parentContainer) {
+  parentContainer.insertAdjacentHTML(
+    'beforeend',
+    `<div class="form-group">
+        <label>Account</label>
+        <input
+            class="form-control"
+            type="text"
+            id="eip5792AccountInput"
+        />
+    </div>
+
+    <button
+        class="btn btn-primary btn-lg btn-block mb-3"
+        id="eip5792GetCapabilitiesButton"
+        disabled
+    >
+        Get Capabilities
+    </button>
+
+    <p class="info-text alert alert-success">
+        <span class="wrap" id="eip5792GetCapabilitiesResult">Status</span>
+    </p>`,
+  );
+
+  const accountInput = document.getElementById('eip5792AccountInput');
+  const getCapabilitiesButton = document.getElementById(
+    'eip5792GetCapabilitiesButton',
+  );
+  const resultOutput = document.getElementById('eip5792GetCapabilitiesResult');
+
+  document.addEventListener('globalConnectionChange', function (e) {
+    if (e.detail.connected) {
+      accountInput.value = '';
+      getCapabilitiesButton.disabled = false;
+      accountInput.value = globalContext.accounts[0];
+    }
+  });
+
+  document.addEventListener('disableAndClear', function () {
+    accountInput.value = '';
+    getCapabilitiesButton.disabled = true;
+  });
+
+  getCapabilitiesButton.onclick = async () => {
+    try {
+      const result = await globalContext.provider.request({
+        method: 'wallet_getCapabilities',
+        params: [accountInput.value],
+      });
+
+      resultOutput.innerHTML = JSON.stringify(result, null, 2);
+    } catch (error) {
+      console.error(error);
+      resultOutput.innerHTML = `Error: ${error.message}`;
+    }
+  };
+}

src/components/transactions/eip5792/index.js

@@ -0,0 +1,27 @@
+import { getCallsStatusComponent } from './getCallsStatus';
+import { getCapabilitiesComponent } from './getCapabilities';
+import { sendCallsComponent } from './sendCalls';
+
+export function eip5792Component(parentContainer) {
+  parentContainer.insertAdjacentHTML(
+    'beforeend',
+    `<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch">
+        <div class="card full-width">
+            <div class="card-body eip5792">
+                <h4 class="card-title">
+                    EIP 5792
+                </h4>
+                <div id="eip5792SendCalls"></div>
+                <hr/>
+                <div id="eip5792GetCallsStatus"></div>
+                <hr/>
+                <div id="eip5792GetCapabilities"></div>
+            </div>
+        </div>
+    </div`,
+  );
+
+  sendCallsComponent(document.getElementById('eip5792SendCalls'));
+  getCallsStatusComponent(document.getElementById('eip5792GetCallsStatus'));
+  getCapabilitiesComponent(document.getElementById('eip5792GetCapabilities'));
+}