feat: add batch approval button (#410)

Author: matthewwalsh0

src/components/transactions/eip5792/sendCalls.js

@@ -15,6 +15,47 @@ export const DEFAULT_CALLS = [
   },
 ];
 
+const ERC20_USDC = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48';
+const ERC20_USDT = '0xdAC17F958D2ee523a2206206994597C13D831ec7';
+const ERC721_BORED_APE = '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d';
+const ERC1155_OPENSTORE = '0x495f947276749ce646f68ac8c248420045cb7b5e';
+const PERMIT2 = '0x000000000022D473030F116dDEE9F6B43aC78BA3';
+
+const CALL_APPROVAL_ERC20_LEGACY = {
+  data: '0x095ea7b30000000000000000000000000c54FcCd2e384b4BB6f2E405Bf5Cbc15a017AaFb0000000000000000000000000000000000000000000000000000000000459480',
+  to: ERC20_USDC,
+};
+
+const CALL_APPROVAL_ERC20_PERMIT_2 = {
+  data: '0x87517c45000000000000000000000000a0b86991c6218b36c1d19d4a2e9eb0ce3606eb480000000000000000000000000c54FcCd2e384b4BB6f2E405Bf5Cbc15a017AaFb000000000000000000000000000000000000000000000000000000000012C4B00000000000000000000000000000000000000000000000000000000068437af0',
+  to: PERMIT2,
+};
+
+const CALL_APPROVAL_ERC20_INCREASE_ALLOWANCE = {
+  data: '0x395093510000000000000000000000000c54FcCd2e384b4BB6f2E405Bf5Cbc15a017AaFb0000000000000000000000000000000000000000000000000000000000786450',
+  to: ERC20_USDC,
+};
+
+const CALL_APPROVAL_ERC20_LEGACY_UNLIMITED = {
+  data: '0x095ea7b30000000000000000000000000c54FcCd2e384b4BB6f2E405Bf5Cbc15a017AaFb0000000000000000000000000000000000000000000FFFFFFFFFFFFFFFFFFFFF',
+  to: ERC20_USDT,
+};
+
+const CALL_APPROVAL_ERC721_APPROVE = {
+  data: '0x095ea7b30000000000000000000000000c54FcCd2e384b4BB6f2E405Bf5Cbc15a017AaFb00000000000000000000000000000000000000000000000000000000000020F0',
+  to: ERC721_BORED_APE,
+};
+
+const CALL_APPROVAL_ERC721_APPROVE_ALL = {
+  data: '0xa22cb4650000000000000000000000000c54FcCd2e384b4BB6f2E405Bf5Cbc15a017AaFb0000000000000000000000000000000000000000000000000000000000000001',
+  to: ERC721_BORED_APE,
+};
+
+const CALL_APPROVAL_ERC1155_APPROVE_ALL = {
+  data: '0xa22cb4650000000000000000000000000c54FcCd2e384b4BB6f2E405Bf5Cbc15a017AaFb0000000000000000000000000000000000000000000000000000000000000001',
+  to: ERC1155_OPENSTORE,
+};
+
 export function sendCallsComponent(parentContainer) {
   parentContainer.insertAdjacentHTML(
     'beforeend',
@@ -63,6 +104,14 @@ export function sendCallsComponent(parentContainer) {
         Send Calls
     </button>
 
+     <button
+        class="btn btn-primary btn-lg btn-block mb-3"
+        id="eip5792SendCallsApprovalButton"
+        disabled
+    >
+        Send Calls - Multiple Approvals
+    </button>
+
     <p class="info-text alert alert-warning" id="eip5792SendCallsErrorContainer" hidden>
         <span class="wrap" id="eip5792SendCallsError"></span>
     </p>`,
@@ -76,6 +125,9 @@ export function sendCallsComponent(parentContainer) {
   const callsContainer = document.getElementById('eip5792Calls');
   const addCallButton = document.getElementById('eip5792AddCall');
   const sendCallsButton = document.getElementById('eip5792SendCallsButton');
+  const sendCallsApprovalButton = document.getElementById(
+    'eip5792SendCallsApprovalButton',
+  );
   const errorContainer = document.getElementById(
     'eip5792SendCallsErrorContainer',
   );
@@ -86,13 +138,15 @@ export function sendCallsComponent(parentContainer) {
       editButton.disabled = false;
       addCallButton.disabled = false;
       sendCallsButton.disabled = false;
+      sendCallsApprovalButton.disabled = false;
     }
   });
 
   document.addEventListener('disableAndClear', function () {
     editButton.disabled = true;
     addCallButton.disabled = true;
     sendCallsButton.disabled = true;
+    sendCallsApprovalButton.disabled = true;
   });
 
   editButton.onclick = async () => {
@@ -122,10 +176,31 @@ export function sendCallsComponent(parentContainer) {
   };
 
   sendCallsButton.onclick = async () => {
+    submitRequest();
+  };
+
+  sendCallsApprovalButton.onclick = () => {
+    submitRequest([
+      CALL_APPROVAL_ERC20_LEGACY,
+      CALL_APPROVAL_ERC20_PERMIT_2,
+      CALL_APPROVAL_ERC20_INCREASE_ALLOWANCE,
+      CALL_APPROVAL_ERC20_LEGACY_UNLIMITED,
+      CALL_APPROVAL_ERC721_APPROVE,
+      CALL_APPROVAL_ERC721_APPROVE_ALL,
+      CALL_APPROVAL_ERC1155_APPROVE_ALL,
+    ]);
+  };
+
+  async function submitRequest(calls) {
     try {
       const result = await globalContext.provider.request({
         method: 'wallet_sendCalls',
-        params: [getParams()],
+        params: [
+          {
+            ...getParams(),
+            ...(calls ? { calls } : {}),
+          },
+        ],
       });
 
       document.getElementById('eip5792RequestIdInput').value = result.id;
@@ -136,7 +211,7 @@ export function sendCallsComponent(parentContainer) {
       errorContainer.hidden = false;
       errorOutput.innerHTML = `Error: ${error.message}`;
     }
-  };
+  }
 
   function getParams() {
     const useInputs = isCustom();