feat: upgrade viem to support heterogeneous calls (#1527)

Co-authored-by: Alissa Crane <alissa.crane@coinbase.com>
coinbase · Nov 20, 2024 · 3e7c9ad · 3e7c9ad
1 parent 56ca67d
commit 3e7c9ad
Show file tree

Hide file tree

Showing 25 changed files with 478 additions and 671 deletions.
diff --git a/package.json b/package.json
@@ -41,10 +41,9 @@
     "clsx": "^2.1.1",
     "graphql": "^14 || ^15 || ^16",
     "graphql-request": "^6.1.0",
-    "permissionless": "^0.1.29",
     "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 +72,6 @@
     "graphql-request": "^6.1.0",
     "jsdom": "^24.1.0",
     "packemon": "3.3.1",
-    "permissionless": "^0.1.29",
     "react": "^18",
     "react-dom": "^18",
     "rimraf": "^5.0.5",

diff --git a/playground/nextjs-app-router/bun.lockb b/playground/nextjs-app-router/bun.lockb
diff --git a/playground/nextjs-app-router/components/demo/Transaction.tsx b/playground/nextjs-app-router/components/demo/Transaction.tsx
@@ -1,4 +1,8 @@
-import { clickCalls, clickContracts } from '@/lib/transactions';
+import {
+  clickCalls,
+  clickContracts,
+  heterogeneousClickCalls,
+} from '@/lib/transactions';
 import type { Call } from '@/onchainkit/esm/transaction/types';
 import type { LifecycleStatus } from '@/onchainkit/src/transaction';
 import { TransactionTypes } from '@/types/onchainkit';
@@ -66,6 +70,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;
@@ -75,31 +85,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,
@@ -115,9 +115,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}
       >
         <TransactionButton
           text="Click"

diff --git a/playground/nextjs-app-router/components/demo/TransactionDefault.tsx b/playground/nextjs-app-router/components/demo/TransactionDefault.tsx
@@ -1,7 +1,10 @@
 import { useCapabilities } from '@/lib/hooks';
 import { clickCalls, clickContracts } from '@/lib/transactions';
 import { TransactionTypes } from '@/types/onchainkit';
-import { TransactionDefault } from '@coinbase/onchainkit/transaction';
+import {
+  type LifecycleStatus,
+  TransactionDefault,
+} from '@coinbase/onchainkit/transaction';
 import { useCallback, useContext, useEffect } from 'react';
 import { AppContext } from '../AppProvider';
 
@@ -13,7 +16,7 @@ export default function TransactionDefaultDemo() {
   useEffect(() => {
     console.log('Playground.Transaction.chainId:', chainId);
   }, [chainId]);
-  const handleOnStatus = useCallback((status) => {
+  const handleOnStatus = useCallback((status: LifecycleStatus) => {
     console.log('Playground.Transaction.onStatus:', status);
   }, []);
 
@@ -32,7 +35,7 @@ export default function TransactionDefaultDemo() {
         chainId={chainId ?? 84532} // something breaks if we don't have default network?
         {...(transactionType === TransactionTypes.Calls
           ? { calls }
-          : { contracts })}
+          : { calls: contracts })}
         capabilities={capabilities}
         onStatus={handleOnStatus}
         disabled={!chainId && !transactionType}

diff --git a/playground/nextjs-app-router/components/form/transaction-options.tsx b/playground/nextjs-app-router/components/form/transaction-options.tsx
@@ -40,6 +40,9 @@ export function TransactionOptions() {
           <SelectItem value={TransactionTypes.ContractsCallback}>
             Contracts Callback
           </SelectItem>
+          <SelectItem value={TransactionTypes.ContractsAndCalls}>
+            Contracts and Calls
+          </SelectItem>
         </SelectContent>
       </Select>
     </div>

diff --git a/playground/nextjs-app-router/lib/transactions.ts b/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: [],
+  },
+];
diff --git a/playground/nextjs-app-router/package.json b/playground/nextjs-app-router/package.json
@@ -35,13 +35,12 @@
     "graphql-request": "^6.1.0",
     "lucide-react": "^0.416.0",
     "next": "^14.2.5",
-    "permissionless": "^0.1.29",
     "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",

diff --git a/playground/nextjs-app-router/types/onchainkit.ts b/playground/nextjs-app-router/types/onchainkit.ts
@@ -22,6 +22,7 @@ export enum TransactionTypes {
   ContractsPromise = 'contractsPromise',
   CallsCallback = 'callsCallback',
   ContractsCallback = 'contractsCallback',
+  ContractsAndCalls = 'contractsAndCalls',
 }
 
 export type Paymaster = {

diff --git a/src/transaction/components/TransactionDefault.tsx b/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}