@embarkai/ui-kit 0.4.18 → 0.4.20

package/README.md

@@ -471,6 +471,42 @@ function DirectTransactionExample() {
 - ✅ Use `useSendTransaction()` hook for React components (automatic session management)
 - ✅ Use `sendUserOperation()` function for custom logic, utility functions, or non-React code
 
+### sendBatchUserOperation - Atomic Multi-Call Submission
+
+Use `sendBatchUserOperation()` when you need multiple smart-account calls to execute atomically in a single UserOperation.
+
+```tsx
+import { sendBatchUserOperation, useAccountSession } from '@embarkai/ui-kit'
+
+function BatchTransactionExample() {
+  const session = useAccountSession()
+
+  const handleSend = async () => {
+    if (!session) return
+
+    const userOpHash = await sendBatchUserOperation(session, {
+      operations: [
+        {
+          to: '0xTokenAddress',
+          value: '0',
+          data: '0xa9059cbb...' // ERC20 transfer calldata
+        },
+        {
+          to: '0xTargetContract',
+          value: '0',
+          data: '0xabcdef12...' // Contract call calldata
+        }
+      ],
+      feeType: 'standard'
+    })
+
+    console.log('Batch transaction submitted:', userOpHash)
+  }
+
+  return <button onClick={handleSend}>Send Batch Transaction</button>
+}
+```
+
 ### deployAccount - Deploy Smart Account (Optional)
 
 Deploy the smart account contract immediately after registration. This is **optional** - accounts are automatically deployed on first transaction.
@@ -723,6 +759,36 @@ return {
 }
 ```
 
+### prepareBatchUserOperation - Prepare Atomic Multi-Call for Backend Submission
+
+```tsx
+import { prepareBatchUserOperation, useAccountSession } from '@embarkai/ui-kit'
+
+function PrepareBatchExample() {
+  const session = useAccountSession()
+
+  const handlePrepare = async () => {
+    if (!session) return
+
+    const { userOp, userOpHash } = await prepareBatchUserOperation(session, {
+      operations: [
+        { to: '0xTokenAddress', value: '0', data: '0xa9059cbb...' },
+        { to: '0xAnotherContract', value: '0', data: '0x12345678...' }
+      ],
+      feeType: 'standard'
+    })
+
+    await fetch('/api/submit-batch', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ userOp, userOpHash, ownerAddress: session.ownerAddress })
+    })
+  }
+
+  return <button onClick={handlePrepare}>Prepare Batch</button>
+}
+```
+
 ### useOpenPage - Programmatic EmbarkAI Dialog Control
 
 Control the EmbarkAI dialog programmatically.

package/dist/iframe/index.html

@@ -15,7 +15,7 @@
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <title>EmbarkAI Secure Wallet - iframe version 0.4.18</title>
+    <title>EmbarkAI Secure Wallet - iframe version 0.4.20</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -1516,8 +1516,10 @@ function buildConfirmTxTemplateData(project, origin, transaction, risk, metadata
   const userName = userProfile?.displayName || "EmbarkAI Wallet";
   const domainStatusClass = isVerifiedOrigin ? "verified" : "unverified";
   const domainStatusText = isVerifiedOrigin ? "\u2705" : "\u26A0\uFE0F";
+  const batchOperations = transaction.userOpDetails?.operations || [];
+  const isBatchUserOp = isUserOp && batchOperations.length > 0;
   const fromAddressFull = transaction.userOpDetails?.sender || "";
-  const toAddressFull = transaction.userOpDetails?.callTarget || transaction.to || "";
+  const toAddressFull = transaction.userOpDetails?.callTarget || batchOperations[0]?.to || transaction.to || "";
   const fromAddress = formatAddress(fromAddressFull);
   const toAddress = formatAddress(toAddressFull);
   const baseExplorerUrl = explorerUrl || DEFAULT_EXPLORER_URL;
@@ -1537,16 +1539,18 @@ function buildConfirmTxTemplateData(project, origin, transaction, risk, metadata
       return "0";
     }
   };
-  const transactionValue = transaction.value || "0";
+  const transactionValue = isBatchUserOp ? batchOperations.reduce((total, operation) => total + BigInt(operation.value || "0"), 0n).toString() : transaction.value || "0";
   const formattedValue = formatValue(transactionValue);
   const hasValue = BigInt(transactionValue) > 0n;
   const callData = transaction.userOpDetails?.callData || transaction.data || "";
   const innerCallData = extractInnerCallData(callData);
   const effectiveCallData = innerCallData || callData;
   const hasContractCall = !!effectiveCallData && effectiveCallData !== "0x" && effectiveCallData.length > 2;
-  const showContractInteraction = isUserOp ? hasContractCall : !!callData && callData !== "0x";
+  const showContractInteraction = isBatchUserOp || (isUserOp ? hasContractCall : !!callData && callData !== "0x");
   let actionDescription = "Contract Interaction";
-  if (showContractInteraction) {
+  if (isBatchUserOp) {
+    actionDescription = `Batch transaction (${batchOperations.length} operations)`;
+  } else if (showContractInteraction) {
     const approveData = parseERC20Approve(callData);
     if (approveData) {
       if (approveData.amount === 0n) {
@@ -6262,7 +6266,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "0.4.18";
+var IFRAME_VERSION = "0.4.20";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));