fix: 7702 deployment status + initial delegation txn

aa-sdk/core/src/middleware/defaults/7702gasEstimator.ts

@@ -69,9 +69,5 @@ export const default7702GasEstimator: (
       yParity: "0x0",
     };
 
-    const estimatedUO = await gasEstimator_(struct, params);
-
-    estimatedUO.eip7702Auth = undefined; // Strip out the auth after estimation.
-
-    return estimatedUO;
+    return gasEstimator_(struct, params);
   };

aa-sdk/core/src/middleware/defaults/7702signer.ts

@@ -46,7 +46,13 @@ export const default7702UserOpSigner: (
   (userOpSigner?: ClientMiddlewareFn) => async (struct, params) => {
     const userOpSigner_ = userOpSigner ?? defaultUserOpSigner;
 
-    const uo = await userOpSigner_(struct, params);
+    const uo = await userOpSigner_(
+      {
+        ...struct,
+        eip7702Auth: undefined,
+      },
+      params
+    );
 
     const account = params.account ?? params.client.account;
     const { client } = params;

account-kit/infra/src/client/smartAccountClient.ts

@@ -15,7 +15,10 @@ import { type Chain } from "viem";
 import type { AlchemyTransport } from "../alchemyTransport.js";
 import { getDefaultUserOperationFeeOptions } from "../defaults.js";
 import { alchemyFeeEstimator } from "../middleware/feeEstimator.js";
-import { alchemyGasAndPaymasterAndDataMiddleware } from "../middleware/gasManager.js";
+import {
+  alchemyGasAndPaymasterAndDataMiddleware,
+  alchemyGasManagerMiddleware,
+} from "../middleware/gasManager.js";
 import { alchemyUserOperationSimulator } from "../middleware/userOperationSimulator.js";
 import {
   alchemyActions,
@@ -161,13 +164,19 @@ export function createAlchemySmartAccountClient({
       }
       return customMiddleware ? customMiddleware(struct, args) : struct;
     },
-    ...(policyId
+    // The `alchemy_requestGasAndPaymasterAndData` method will fail to estimate gas
+    // for 7702 accounts that haven't been delegated yet. Once it supports the
+    // dummy 7702 auth fields, we should be able to use it here even if
+    // we have a custom gasEstimator override.
+    ...(policyId && !gasEstimator
       ? alchemyGasAndPaymasterAndDataMiddleware({
           policyId,
           transport,
           gasEstimatorOverride: gasEstimator,
           feeEstimatorOverride: feeEstimator,
         })
+      : policyId
+      ? alchemyGasManagerMiddleware(policyId)
       : {}),
     userOperationSimulator: useSimulation
       ? alchemyUserOperationSimulator(transport)

examples/ui-demo/src/components/user-connection-avatar/RenderUserConnectionAvatar.tsx

@@ -3,10 +3,10 @@ import DialogMenu from "./UserConnectionMenuDialog";
 import { UserConnectionAvatar } from "./UserConnectionAvatar";
 import { UserConnectionDetails } from "./UserConnectionDetails";
 import React, { useEffect, useState } from "react";
-import { useAccount, useSigner } from "@account-kit/react";
+import { useAccount, useSigner, useSignerStatus } from "@account-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import { useConfigStore } from "@/state";
-import { createPublicClient, Hex, http } from "viem";
+import { Address, createPublicClient, Hex, http } from "viem";
 import { odysseyTestnet } from "viem/chains";
 
 type RenderAvatarMenuProps = {
@@ -16,7 +16,6 @@ type RenderAvatarMenuProps = {
 export const RenderUserConnectionAvatar = (
   props: React.HTMLAttributes<HTMLDivElement>
 ) => {
-  const [autoRefresh, setAutoRefresh] = useState(true);
   const { accountMode } = useConfigStore(({ accountMode }) => ({
     accountMode,
   }));
@@ -35,27 +34,37 @@ export const RenderUserConnectionAvatar = (
     })
   );
   const signer = useSigner();
+  const { isConnected: isSignerConnected } = useSignerStatus();
+
+  const { data: signerAddress } = useQuery({
+    queryKey: ["signerAddress"],
+    queryFn: async (): Promise<Address | null> => {
+      if (!signer || !isSignerConnected) {
+        return null;
+      }
+      return signer.getAddress();
+    },
+    enabled: !!signer && isSignerConnected,
+  });
 
   const { nftTransferred } = useConfigStore(({ nftTransferred }) => ({
     nftTransferred,
   }));
 
-  const { data: hybridAccount } = useQuery({
-    queryKey: ["deploymentStatus7702"],
+  const { data: hybridAccount, refetch: refetchHybridAccount } = useQuery({
+    queryKey: ["deploymentStatus7702", signerAddress ?? "0x"],
     queryFn: async () => {
-      const delegationAddress = signer
+      const delegationAddress = signerAddress
         ? (await publicClient.getCode({
-            address: await signer?.getAddress(),
+            address: signerAddress,
           })) ?? "0x"
         : "0x";
       const delegationStatus = delegationAddress !== "0x";
-      if (delegationStatus) setAutoRefresh(false);
       return {
         delegationAddress,
         delegationStatus,
       };
     },
-    refetchInterval: autoRefresh ? 5000 : false, // refetch every 5 seconds until delegation address becomes available
   });
 
   const { data: deploymentStatusSCA = false, refetch: refetchSCA } = useQuery({
@@ -70,10 +79,22 @@ export const RenderUserConnectionAvatar = (
   useEffect(() => {
     // Refetch the deployment status if the NFT transferred state changes.
     // Only refetch if this is a user's first NFT Transfer...
-    if (nftTransferred && !deploymentStatusSCA) {
+    if (!nftTransferred) {
+      return;
+    }
+    if (!deploymentStatusSCA) {
       refetchSCA();
     }
-  }, [nftTransferred, deploymentStatusSCA, refetchSCA]);
+    if (!hybridAccount) {
+      refetchHybridAccount();
+    }
+  }, [
+    nftTransferred,
+    deploymentStatusSCA,
+    refetchSCA,
+    hybridAccount,
+    refetchHybridAccount,
+  ]);
 
   return (
     <div className="overflow-hidden" {...props}>

examples/ui-demo/src/hooks/useMint.tsx

@@ -9,6 +9,7 @@ import {
 import { Address, Chain, encodeFunctionData } from "viem";
 import { AccountKitNftMinterABI } from "@/utils/config";
 import { MintStatus } from "@/components/small-cards/MintCard";
+import { useConfigStore } from "@/state";
 
 const initialValuePropState = {
   signing: "initial",
@@ -48,13 +49,19 @@ export const useMint = (props: {
     activeChain !== props.chain;
   const { setToast } = useToast();
 
+  const { setNftTransferred } = useConfigStore(({ setNftTransferred }) => ({
+    setNftTransferred,
+  }));
+
   const handleSuccess = () => {
     setStatus(() => ({
       batch: "success",
       gas: "success",
       signing: "success",
     }));
 
+    setNftTransferred(true);
+
     setToast({
       type: "success",
       text: (

examples/ui-demo/src/hooks/useRecurringTransactions.ts

@@ -26,6 +26,7 @@ import { SESSION_KEY_VALIDITY_TIME_SECONDS } from "./7702/constants";
 import { useToast } from "@/hooks/useToast";
 import { AlchemyTransport } from "@account-kit/infra";
 import { useModularAccountV2Client } from "./useModularAccountV2Client";
+import { useConfigStore } from "@/state";
 
 export type CardStatus = "initial" | "setup" | "active" | "done";
 
@@ -90,6 +91,10 @@ export const useRecurringTransactions = (clientOptions: {
 
   const { setToast } = useToast();
 
+  const { setNftTransferred } = useConfigStore(({ setNftTransferred }) => ({
+    setNftTransferred,
+  }));
+
   const handleError = (error: Error) => {
     console.error(error);
     setCardStatus("initial");
@@ -271,6 +276,7 @@ export const useRecurringTransactions = (clientOptions: {
       return handleError(new Error("missing batch txn hash"));
     }
 
+    setNftTransferred(true); // this triggers the deployment status updating in the UserConnectionAvatar
     setSessionKeyAdded(true);
     setCardStatus("active");