@coinbase/cdp-wagmi 0.0.23 → 0.0.25

package/README.md

@@ -45,7 +45,7 @@ the CDP Frontend SDK. The `providerConfig` must be provided and is responsible f
 configuring the EIP-1193 provider's transports which are used to broadcast non-Base
 transactions.
 
-```tsx
+```tsx lines
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './App'; // Your main App component
@@ -107,7 +107,7 @@ After using any of these methods, the CDP embedded wallet's connector should aut
 
 Now, your application should be able to successfully call Wagmi hooks. For example:
 
-```tsx
+```tsx lines
 import { useState } from "react";
 import { parseEther } from "viem";
 import { useAccount, useSendTransaction, useWaitForTransactionReceipt } from "wagmi";
@@ -234,4 +234,163 @@ export default function WagmiTransaction() {
     </div>
   );
 }
+```
+
+### Smart Accounts
+
+This package has Smart Account support for the Wagmi `useSendCalls`, `useCallsStatus` and `useCapabilities` hooks. It requires a different CDP Config than for EOA wallets:
+
+```tsx lines
+const cdpConfig: Config = {
+  projectId: "your-project-id", // Copy your Project ID here.
+  createAccountOnLogin: "evm-smart" // Create a smart account by default when a user logs in and does not yet have one
+}
+```
+
+After signing in, you can send a User Operation using Wagmi hooks:
+
+```tsx lines
+import { useState } from "react";
+import { parseEther } from "viem";
+import { useAccount, useSendCalls, useSendCalls, useCallsStatus, useCapabilities } from "wagmi";
+
+/**
+ * The burn address (0x0000000000000000000000000000000000000000)
+ */
+const BURN_ADDRESS = "0x0000000000000000000000000000000000000000" as const;
+
+/**
+ * The amount to send in ETH (0.00001 ETH)
+ */
+const AMOUNT_TO_SEND = "0.00001";
+
+/**
+ * SendCalls component that allows users with Smart Accounts to send ETH to the burn address
+ *
+ * @returns JSX element with transaction sending functionality
+ */
+export function WagmiSendCalls() {
+  const { address, isConnected } = useAccount();
+  const { data: userOpHash, sendCalls, isPending, error } = useSendCalls();
+  // Check the status of a sent user operation
+  const { isLoading: isConfirming, isSuccess } = useCallsStatus({
+    id: userOpHash as Hex,
+    query: {
+      enabled: !!userOpHash,
+    },
+  });
+  const chainId = useChainId();
+  const { data: walletCapabilities } = useCapabilities({
+    chainId,
+  });
+
+  // Check the capabilities of the wallet to determine if you can use user operations
+  const isSendCallsSupported = useMemo(() => {
+    return walletCapabilities?.atomic?.status === "supported";
+  }, [walletCapabilities]);
+
+  const handleSendCalls = async () => {
+    if (!isConnected || !address) return;
+
+    try {
+      sendCalls(
+        {
+          calls: [
+            {
+              to: BURN_ADDRESS,
+              value: parseEther(AMOUNT_TO_SEND),
+            },
+          ],
+        }
+      );
+    } catch (err) {
+      console.log("Failed to send user operation: ", err)
+    }
+  };
+
+  if (!isSendCallsSupported) {
+    return (
+      <div>
+        <p>
+          This wallet does not support sending calls on chain {chainId}. Ensure your wallet has a
+          smart account, and is on a supported chain.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div>
+        <p>
+          ⚠️ Warning: This will send {AMOUNT_TO_SEND} ETH to the burn address (0x0000...0000). 
+          This operation cannot be reversed and the ETH will be permanently lost.
+        </p>
+      </div>
+
+      <div>
+        <div>
+          <div>Amount: {AMOUNT_TO_SEND} ETH</div>
+          <div>To (Burn Address): {BURN_ADDRESS.slice(0, 6)}...{BURN_ADDRESS.slice(-4)}</div>
+          <div>From: {address?.slice(0, 6)}...{address?.slice(-4)}</div>
+        </div>
+      </div>
+
+      {error && (
+        <div>
+          <strong>Error:</strong> {error.message}
+        </div>
+      )}
+
+      {!userOpHash && !isPending && (
+        <button disabled={!address} onClick={handleSendCalls}>
+          Send {AMOUNT_TO_SEND} ETH to Burn Address
+        </button>
+      )}
+
+      {(isPending || isConfirming) && (
+        <div>
+          <div>Sending transaction...</div>
+          {hash && (
+            <div>
+              Hash: {hash.slice(0, 10)}...{hash.slice(-8)}
+            </div>
+          )}
+        </div>
+      )}
+
+      {isSuccess && userOpHash && (
+        <div>
+          <div>
+            <div>✅</div>
+          </div>
+
+          <div>
+            <div>Operation Sent!</div>
+            <div>Your operation has been successfully sent to the burn address</div>
+          </div>
+
+          <div>
+            <div>Amount: {AMOUNT_TO_SEND} ETH</div>
+            <div>To: {BURN_ADDRESS.slice(0, 6)}...{BURN_ADDRESS.slice(-4)}</div>
+            <div>
+              Block Explorer:{" "}
+              <a
+                href={`https://sepolia.basescan.org/tx/${userOpHash}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {hash.slice(0, 10)}...{hash.slice(-8)}
+              </a>
+            </div>
+          </div>
+
+          <button onClick={handleReset}>
+            Send Another Operation →
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-wagmi",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "type": "module",
   "files": [
     "dist/**",
@@ -18,7 +18,7 @@
     "react": ">=18.2.0",
     "viem": "^2.33.0",
     "wagmi": "^2.16.0",
-    "@coinbase/cdp-core": "^0.0.23"
+    "@coinbase/cdp-core": "^0.0.25"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.0.0",
@@ -34,7 +34,7 @@
     "@size-limit/webpack": "^11.2.0",
     "@size-limit/webpack-why": "^11.2.0",
     "size-limit": "^11.2.0",
-    "@coinbase/cdp-core": "^0.0.23"
+    "@coinbase/cdp-core": "^0.0.25"
   },
   "size-limit": [
     {