feat: upgrade viem to support heterogeneous calls

package.json

@@ -41,10 +41,10 @@
     "clsx": "^2.1.1",
     "graphql": "^14 || ^15 || ^16",
     "graphql-request": "^6.1.0",
-    "permissionless": "^0.1.29",
+    "permissionless": "^0.2.10",
     "tailwind-merge": "^2.3.0",
-    "viem": "^2.17.4",
-    "wagmi": "^2.11.0"
+    "viem": "^2.21.33",
+    "wagmi": "^2.12.24"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
@@ -73,7 +73,7 @@
     "graphql-request": "^6.1.0",
     "jsdom": "^24.1.0",
     "packemon": "3.3.1",
-    "permissionless": "^0.1.29",
+    "permissionless": "^0.2.10",
     "react": "^18",
     "react-dom": "^18",
     "rimraf": "^5.0.5",

playground/nextjs-app-router/components/AppProvider.tsx

@@ -31,6 +31,7 @@ export enum TransactionTypes {
   ContractsPromise = 'contractsPromise',
   CallsCallback = 'callsCallback',
   ContractsCallback = 'contractsCallback',
+  ContractsAndCalls = 'contractsAndCalls',
 }
 
 export type Paymaster = {

playground/nextjs-app-router/components/demo/Transaction.tsx

@@ -1,5 +1,9 @@
-import { clickCalls, clickContracts } from '@/lib/transactions';
-import type { Call } from '@/onchainkit/esm/transaction/types';
+import {
+  clickCalls,
+  clickContracts,
+  heterogeneousClickCalls,
+} from '@/lib/transactions';
+import type { Call, Calls } from '@/onchainkit/esm/transaction/types';
 import type { LifecycleStatus } from '@/onchainkit/src/transaction';
 import {
   Transaction,
@@ -65,6 +69,12 @@ function TransactionDemo() {
       case TransactionTypes.Contracts:
         console.log('Playground.Transaction.contracts:', contracts);
         break;
+      case TransactionTypes.ContractsAndCalls:
+        console.log(
+          'Playground.Transaction.contractsAndCalls:',
+          heterogeneousClickCalls,
+        );
+        break;
       default:
         console.log(`Playground.Transaction.${transactionType}`);
         break;
@@ -74,31 +84,21 @@ function TransactionDemo() {
   const transactions = useMemo(() => {
     switch (transactionType) {
       case TransactionTypes.Calls:
-        return {
-          calls,
-          contracts: undefined,
-        };
+        return calls;
       case TransactionTypes.Contracts:
-        return {
-          calls: undefined,
-          contracts,
-        };
+        return contracts;
       case TransactionTypes.CallsPromise:
-        return {
-          calls: promiseCalls,
-          contracts: undefined,
-        };
+        return promiseCalls;
       case TransactionTypes.ContractsPromise:
-        return {
-          contracts: promiseContracts,
-          calls: undefined,
-        };
+        return promiseContracts;
       case TransactionTypes.CallsCallback:
-        return { calls: callsCallback, contracts: undefined };
+        return callsCallback;
       case TransactionTypes.ContractsCallback:
-        return { calls: undefined, contracts: contractsCallback };
+        return contractsCallback;
+      case TransactionTypes.ContractsAndCalls:
+        return heterogeneousClickCalls;
       default:
-        return { calls, contracts: undefined };
+        return calls;
     }
   }, [
     calls,
@@ -114,9 +114,9 @@ function TransactionDemo() {
     <div className="mx-auto grid w-1/2 gap-8">
       <Transaction
         chainId={chainId ?? 84532} // something breaks if we don't have default network?
-        {...transactions}
         isSponsored={isSponsored}
         onStatus={handleOnStatus}
+        calls={transactions as Calls}
       >
         <TransactionButton
           text="Click"

playground/nextjs-app-router/components/form/transaction-options.tsx

@@ -48,6 +48,9 @@ export function TransactionOptions() {
             <SelectItem value={TransactionTypes.ContractsCallback}>
               Contracts Callback
             </SelectItem>
+            <SelectItem value={TransactionTypes.ContractsAndCalls}>
+              Contracts and Calls
+            </SelectItem>
           </SelectContent>
         </Select>
       </div>

playground/nextjs-app-router/lib/transactions.ts

@@ -35,3 +35,26 @@ export const clickCalls = [
     to: deployedContracts[85432].click,
   },
 ];
+
+export const heterogeneousClickCalls = [
+  {
+    data: encodeFunctionData({
+      abi: clickAbi,
+      functionName: 'click',
+      args: [],
+    }),
+    to: deployedContracts[85432].click,
+  },
+  {
+    address: deployedContracts[85432].click,
+    abi: clickAbi,
+    functionName: 'click',
+    args: [],
+  },
+  {
+    address: deployedContracts[85432].click,
+    abi: clickAbi,
+    functionName: 'click',
+    args: [],
+  },
+];

playground/nextjs-app-router/package.json

@@ -35,13 +35,13 @@
     "graphql-request": "^6.1.0",
     "lucide-react": "^0.416.0",
     "next": "^14.2.5",
-    "permissionless": "^0.1.29",
+    "permissionless": "^0.2.10",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
-    "viem": "^2.17.4",
-    "wagmi": "^2.11.0"
+    "viem": "^2.21.33",
+    "wagmi": "^2.12.24"
   },
   "devDependencies": {
     "@types/node": "^20",

src/transaction/components/Transaction.tsx

@@ -11,7 +11,6 @@ export function Transaction({
   chainId,
   className,
   children,
-  contracts,
   isSponsored,
   onError,
   onStatus,
@@ -35,7 +34,6 @@ export function Transaction({
       calls={calls}
       capabilities={capabilities}
       chainId={accountChainId}
-      contracts={contracts}
       isSponsored={isSponsored}
       onError={onError}
       onStatus={onStatus}

src/transaction/components/TransactionDefault.tsx

@@ -11,7 +11,6 @@ export function TransactionDefault({
   capabilities,
   chainId,
   className,
-  contracts,
   disabled,
   onError,
   onStatus,
@@ -23,7 +22,6 @@ export function TransactionDefault({
       capabilities={capabilities}
       chainId={chainId}
       className={className}
-      contracts={contracts}
       onError={onError}
       onStatus={onStatus}
       onSuccess={onSuccess}