feat: Add transaction batch button

src/components/transactions/transaction-batch/index.js

@@ -0,0 +1,19 @@
+import { transactionBatchButtonsComponent } from "./transactionBatchButtonsComponent";
+
+export function transactionBatchComponent(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">
+                    Transaction Batch
+                </h4>
+                <div id="transactionBatchButtons"></div>
+            </div>
+        </div>
+    </div`,
+  );
+
+  transactionBatchButtonsComponent(document.getElementById('transactionBatchButtons'));
+}

src/components/transactions/transaction-batch/transactionBatchButtonsComponent.js

@@ -0,0 +1,76 @@
+import globalContext from '../../..';
+
+export const VERSION = '2.0.0';
+
+export function transactionBatchButtonsComponent(parentContainer) {
+  parentContainer.insertAdjacentHTML(
+    'beforeend',
+    `<button
+        class="btn btn-primary btn-lg btn-block mb-3"
+        id="transactionBatchSendRequest"
+        disabled
+    >
+        Send Transaction Batch Request
+    </button>
+    `,
+  );
+
+  const sendRequestButton = document.getElementById('transactionBatchSendRequest');
+
+  document.addEventListener('globalConnectionChange', function (e) {
+    if (e.detail.connected) {
+      sendRequestButton.disabled = false;
+    }
+  });
+
+  document.addEventListener('disableAndClear', function () {
+    sendRequestButton.disabled = true;
+  });
+
+  const calls = [
+    {
+      // Transfer DAI
+      data: "0xa9059cbb000000000000000000000000dc47789de4ceff0e8fe9d15d728af7f17550c164000000000000000000000000000000000000000000000001158e460913d00000",
+      to: "0x6b175474e89094c44da98b954eedeac495271d0f",
+      value: "0x0",
+    },
+    {
+      // Transfer DAI
+      data: "0xa9059cbb000000000000000000000000dc47789de4ceff0e8fe9d15d728af7f17550c164000000000000000000000000000000000000000000000001158e460913d00000",
+      to: "0x6b175474e89094c44da98b954eedeac495271d0f",
+      value: "0x0",
+    },
+  ];
+
+  function getDefaultChainId() {
+    return `0x${globalContext.chainIdInt.toString(16)}`;
+  }
+
+  function getDefaultFrom() {
+    return globalContext.accounts[0];
+  }
+
+  function getParams() {
+    const from = getDefaultFrom();
+    const chainId = getDefaultChainId();;
+
+    return {
+      version: VERSION,
+      from,
+      chainId,
+      atomicRequired: true,
+      calls,
+    };
+  }
+
+  sendRequestButton.onclick = async () => {
+    try {
+      await globalContext.provider.request({
+        method: 'wallet_sendCalls',
+        params: [getParams()],
+      });
+    } catch (error) {
+      console.error(error.message);
+    }
+  };
+}

src/index.js

@@ -46,6 +46,7 @@ import {
 } from './components/interactions';
 import { sendFormComponent } from './components/forms/send-form';
 import { eip5792Component } from './components/transactions/eip5792';
+import { transactionBatchComponent } from './components/transactions/transaction-batch';
 
 const {
   hstBytecode,
@@ -178,6 +179,7 @@ erc721Component(transactionsRow);
 erc1155Component(transactionsRow);
 eip747Component(transactionsRow);
 eip5792Component(transactionsRow);
+transactionBatchComponent(transactionsRow);
 
 const ppomSection = document.createElement('section');
 mainContainer.appendChild(ppomSection);