feat: add example Tempo batch tx (#427)

Author: maxime-oe

src/components/tempo-transactions/tempo-transactions.js

@@ -0,0 +1,131 @@
+import globalContext from '../..';
+
+// Tempo Transactions
+
+// ERC20 TST token created and owned by shared account 0x13b7e6EBcd40777099E4c45d407745aB2de1D1F8
+const defaultErc20TokenAddress = '0x86fA047df5b69df0CBD6dF566F1468756dCF339D';
+const defaultChainId = '0x89'; // Forcing to Polygon PoS for now since EIP7702 not available on Tempo
+const defaultFeeToken = '0x3c499c542cef5e3811e1192ce70d8cc03d5c3359'; // USDC Coin (PoS) for Polygon Mainnet testing
+
+export function tempoTransactionsComponent(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">
+          <h4>
+            Tempo Transactions
+          </h4>
+          <div class="mb-3">
+            <label for="tempoChainIdInput" class="form-label">Chain ID</label>
+            <input
+              type="text"
+              class="form-control"
+              id="tempoChainIdInput"
+              value="${defaultChainId}"
+              placeholder="${defaultChainId}"
+            />
+          </div>
+
+          <div class="mb-3">
+            <label for="tempoErc20TokenAddressInput" class="form-label">ERC20 Token Address</label>
+            <input
+              type="text"
+              class="form-control"
+              id="tempoErc20TokenAddressInput"
+              value="${defaultErc20TokenAddress}"
+              placeholder="${defaultErc20TokenAddress}"
+            />
+          </div>
+
+          <div class="mb-3">
+            <label for="tempoFeeTokenInput" class="form-label">Fee Token Address</label>
+            <input
+              type="text"
+              class="form-control"
+              id="tempoFeeTokenInput"
+              value="${defaultFeeToken}"
+              placeholder="${defaultFeeToken}"
+            />
+          </div>
+          <button
+            class="btn btn-primary btn-lg btn-block mb-3"
+            id="sendTempoBatchTx"
+            disabled
+          >
+          Send Tempo (0x76) Batch Transaction
+          </button>
+          <p>Sends a minimalistic 0x76 batch with 2 ERC20 transfers on chain [chainId] (hex) for initial testing:</p>
+          <ul>
+            <li>0.01 [erc20Token] to 0x2367e6eca6e1fcc2d112133c896e3bddad375aff</li>
+            <li>0.01 [erc20Token] to 0x1e3abc74428056924cEeE2F45f060879c3F063ed</li>
+          </ul>
+          <p class="info-text alert alert-warning">
+            Result:
+            <span id="sendTempoBatchTxResult"></span>
+          </p>
+        </div>
+      </div>
+    </div>`,
+  );
+
+  const sendTempoBatchTx = document.getElementById('sendTempoBatchTx');
+
+  const sendTempoBatchTxResult = document.getElementById(
+    'sendTempoBatchTxResult',
+  );
+
+  document.addEventListener('globalConnectionChange', function (e) {
+    if (e.detail.connected) {
+      sendTempoBatchTx.disabled = false;
+    }
+  });
+
+  document.addEventListener('disableAndClear', function () {
+    sendTempoBatchTx.disabled = true;
+  });
+
+  /**
+   * Send as would be sent by Viem Tempo implementation for dApps
+   */
+  sendTempoBatchTx.onclick = async () => {
+    try {
+      const from = globalContext.accounts[0];
+      const erc20TokenAddress = document.getElementById(
+        'tempoErc20TokenAddressInput',
+      ).value;
+      const chainId = document.getElementById('tempoChainIdInput').value;
+      const feeToken = document.getElementById('tempoFeeTokenInput').value;
+      // As sent by some Tempo example dapps
+      const send = await globalContext.provider.request({
+        method: 'eth_sendTransaction',
+        params: [
+          {
+            calls: [
+              {
+                data: '0xa9059cbb0000000000000000000000002367e6eca6e1fcc2d112133c896e3bddad375aff000000000000000000000000000000000000000000000000002386f26fc10000',
+                to: erc20TokenAddress,
+                value: '0x',
+              },
+              {
+                data: '0xa9059cbb0000000000000000000000001e3abc74428056924ceee2f45f060879c3f063ed000000000000000000000000000000000000000000000000002386f26fc10000',
+                to: erc20TokenAddress,
+                value: '0x',
+              },
+            ],
+            chainId,
+            feeToken,
+            from,
+            type: '0x76', // Tempo in-house tx type.
+          },
+        ],
+      });
+      sendTempoBatchTxResult.innerHTML = send;
+    } catch (err) {
+      console.error(err);
+      sendTempoBatchTxResult.innerHTML = `Error: ${err.message}`;
+    }
+  };
+}

src/index.js

@@ -53,6 +53,7 @@ import {
   updateCurrentNetworkDisplay,
   updateActiveNetworkInModal,
 } from './components/connections/networks-helpers';
+import { tempoTransactionsComponent } from './components/tempo-transactions/tempo-transactions';
 
 const {
   hstBytecode,
@@ -218,6 +219,7 @@ signTypedDataVariantsComponent(signaturesRow);
 siweComponent(signaturesRow);
 malformedSignaturesComponent(signaturesRow);
 malformedTransactionsComponent(signaturesRow);
+tempoTransactionsComponent(signaturesRow);
 
 const interactionsSection = document.createElement('section');
 mainContainer.appendChild(interactionsSection);