@account-kit/privy-integration 4.73.1-alpha.1 → 4.73.1-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@account-kit/privy-integration",
-  "version": "4.73.1-alpha.1",
+  "version": "4.73.1-alpha.11",
   "description": "Use Alchemy gas sponsorship, swaps and more with Privy",
   "author": "Alchemy",
   "license": "MIT",
@@ -11,9 +11,18 @@
   "types": "./dist/types/index.d.ts",
   "typings": "./dist/types/index.d.ts",
   "sideEffects": false,
+  "react-native": {
+    "main": "./dist/esm/react-native.js",
+    "./dist/esm/adapters/web.js": "./dist/esm/adapters/web.native.js",
+    "./dist/esm/providers/WebProvider.js": "./dist/esm/providers/WebProvider.native.js",
+    "./dist/esm/Provider.js": "./dist/esm/Provider.native.js",
+    "@privy-io/react-auth": false,
+    "@privy-io/react-auth/solana": false
+  },
   "files": [
     "dist",
     "src/**/*.ts",
+    "src/**/*.tsx",
     "!dist/**/*.tsbuildinfo",
     "!vitest.config.ts",
     "!.env",
@@ -23,6 +32,7 @@
   ],
   "exports": {
     ".": {
+      "react-native": "./dist/esm/react-native.js",
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
       "default": "./dist/esm/index.js"
@@ -54,8 +64,8 @@
     "typescript-template": "*"
   },
   "dependencies": {
-    "@account-kit/infra": "^4.73.1-alpha.1",
-    "@account-kit/wallet-client": "^4.73.1-alpha.1"
+    "@account-kit/infra": "^4.73.1-alpha.11",
+    "@account-kit/wallet-client": "^4.73.1-alpha.11"
   },
   "peerDependencies": {
     "@privy-io/expo": "^0.58.0",
@@ -85,5 +95,5 @@
     "url": "https://github.com/alchemyplatform/aa-sdk/issues"
   },
   "homepage": "https://github.com/alchemyplatform/aa-sdk#readme",
-  "gitHead": "03b2f5bff3d97e39f0be09eeaa6eb1f5a51631c6"
+  "gitHead": "29d8866afdb4f5019403ef0897bd13f88dcfa2b4"
 }

package/src/Provider.native.tsx

@@ -0,0 +1,18 @@
+/**
+ * React Native stub for web Provider
+ * This file prevents Metro from importing web-specific code
+ */
+
+export function AlchemyProvider() {
+  throw new Error(
+    "Web Provider is not available in React Native. " +
+      'Import from "@account-kit/privy-integration/react-native" instead.',
+  );
+}
+
+export function useAlchemyConfig() {
+  throw new Error(
+    "useAlchemyConfig from web Provider is not available in React Native. " +
+      'Import from "@account-kit/privy-integration/react-native" instead.',
+  );
+}

package/src/Provider.tsx

@@ -0,0 +1,6 @@
+/**
+ * Web-specific exports
+ * Re-exports the web provider and hooks for React applications
+ */
+export { AlchemyProvider } from "./providers/WebProvider.js";
+export { useAlchemyConfig } from "./context/AlchemyContext.js";

package/src/adapters/react-native.ts

@@ -5,6 +5,8 @@ import {
   type PrivyEmbeddedWalletProvider,
 } from "@privy-io/expo";
 import type { Authorization } from "viem";
+import { hashAuthorization } from "viem/utils";
+import { parseSignature } from "viem";
 import type { AuthorizationRequest } from "@aa-sdk/core";
 import type { PrivyAdapter, EmbeddedWallet, PrivyAuthState } from "./types.js";
 
@@ -48,82 +50,78 @@ export const reactNativeAdapter: PrivyAdapter = {
   useAuthorizationSigner() {
     const { wallets } = useEmbeddedEthereumWallet();
 
-    return useCallback(
-      async (
-        unsignedAuth: AuthorizationRequest<number>,
-      ): Promise<Authorization<number, true>> => {
-        const wallet = wallets?.[0];
-        if (!wallet) {
-          throw new Error(
-            "Privy embedded wallet not found. Please ensure the user is authenticated and has created a wallet.",
-          );
-        }
-
-        const provider = await wallet.getProvider?.();
-        if (!provider) {
-          throw new Error(
-            "Provider not available on this wallet. Ensure you're using the embedded Ethereum wallet.",
-          );
-        }
-
-        // Extract the implementation address (handle both 'address' and 'contractAddress' fields)
-        const implementationAddress =
-          unsignedAuth.address ?? unsignedAuth.contractAddress;
-
-        if (!implementationAddress) {
-          throw new Error(
-            "Implementation address is required for EIP-7702 authorization",
-          );
-        }
-
-        // EIP-7702 Authorization structure
-        const authorization = {
-          domain: {
-            name: "EIP-7702",
-            version: "1",
-            chainId: unsignedAuth.chainId,
-          },
-          types: {
-            Authorization: [
-              { name: "chainId", type: "uint256" },
-              { name: "address", type: "address" },
-              { name: "nonce", type: "uint256" },
-            ],
-          },
-          primaryType: "Authorization" as const,
-          message: {
-            chainId: unsignedAuth.chainId,
-            address: implementationAddress,
-            nonce: unsignedAuth.nonce,
-          },
-        };
-
-        const signature = (await provider.request({
-          method: "eth_signTypedData_v4",
-          params: [wallet.address, JSON.stringify(authorization)],
-        })) as `0x${string}`;
-
-        // Parse the signature into r, s, v components
-        // Signature format: 0x[r(64)][s(64)][v(2)]
-        const r = `0x${signature.slice(2, 66)}` as `0x${string}`;
-        const s = `0x${signature.slice(66, 130)}` as `0x${string}`;
-        const v = parseInt(signature.slice(130, 132), 16);
-
-        // Convert v to yParity (0 or 1)
-        // v can be 27/28 (legacy) or 0/1 (EIP-155)
-        const yParity = v >= 27 ? v - 27 : v;
-
-        return {
-          chainId: unsignedAuth.chainId,
-          address: implementationAddress,
-          nonce: unsignedAuth.nonce,
-          r,
-          s,
-          yParity,
-        };
-      },
-      [wallets],
-    );
+    // Don't memoize the callback - create it fresh each time to ensure we have the latest wallets
+    const signAuthorization = async (
+      unsignedAuth: AuthorizationRequest<number>,
+    ): Promise<Authorization<number, true>> => {
+      console.log("[RN Adapter] signAuthorization called with:", unsignedAuth);
+      console.log("[RN Adapter] Current wallets:", wallets);
+
+      const wallet = wallets?.[0];
+      if (!wallet) {
+        throw new Error(
+          "Privy embedded wallet not found. Please ensure the user is authenticated and has created a wallet.",
+        );
+      }
+
+      console.log("[RN Adapter] Using wallet:", wallet.address);
+
+      const provider = await wallet.getProvider?.();
+      if (!provider) {
+        throw new Error(
+          "Provider not available on this wallet. Ensure you're using the embedded Ethereum wallet.",
+        );
+      }
+
+      // Extract the implementation address (handle both 'address' and 'contractAddress' fields)
+      const implementationAddress =
+        unsignedAuth.address ?? unsignedAuth.contractAddress;
+
+      if (!implementationAddress) {
+        throw new Error(
+          "Implementation address is required for EIP-7702 authorization",
+        );
+      }
+
+      console.log(
+        "[RN Adapter] Signing 7702 auth for address:",
+        implementationAddress,
+      );
+
+      // Create the authorization structure (matches Privy's implementation)
+      const authorization = {
+        chainId: unsignedAuth.chainId,
+        address: implementationAddress,
+        nonce: unsignedAuth.nonce,
+      };
+
+      // Hash the authorization using viem (same as Privy does)
+      const authorizationHash = hashAuthorization(authorization);
+      console.log("[RN Adapter] Authorization hash:", authorizationHash);
+
+      // Sign the hash directly with secp256k1_sign (same as Privy)
+      const signature = (await provider.request({
+        method: "secp256k1_sign",
+        params: [authorizationHash],
+      })) as `0x${string}`;
+
+      console.log("[RN Adapter] Received signature:", signature);
+
+      // Parse the signature using viem (same as Privy)
+      const parsedSignature = parseSignature(signature);
+
+      const result = {
+        chainId: unsignedAuth.chainId,
+        address: implementationAddress,
+        nonce: unsignedAuth.nonce,
+        ...parsedSignature,
+      };
+
+      console.log("[RN Adapter] Returning authorization:", result);
+      return result;
+    };
+
+    return signAuthorization;
   },
 };
 
@@ -134,16 +132,42 @@ export const reactNativeAdapter: PrivyAdapter = {
  * @returns {EmbeddedWallet} The adapted wallet following the common interface
  */
 function adaptExpoWallet(wallet: ExpoEmbeddedWallet): EmbeddedWallet {
+  // Use closure to maintain up-to-date chain ID across chain switches
+  let cachedChainId = wallet.chainId || "1";
+
   return {
     address: wallet.address as `0x${string}`,
-    chainId: wallet.chainId || "1",
+    get chainId() {
+      return cachedChainId;
+    },
     getEthereumProvider: async () => {
       if (!wallet.getProvider) {
         throw new Error(
           "getProvider is not available on this wallet. Ensure you're using the embedded Ethereum wallet.",
         );
       }
-      return await wallet.getProvider();
+      const provider = await wallet.getProvider();
+
+      // Always fetch current chain ID when provider is accessed
+      // This ensures we have the latest chain after wallet_switchEthereumChain calls
+      try {
+        const currentChainId = (await provider.request({
+          method: "eth_chainId",
+          params: [],
+        })) as string;
+
+        // Convert hex to decimal string format (e.g., "0x1" -> "1")
+        cachedChainId = parseInt(currentChainId, 16).toString();
+        console.log("[RN Adapter] Updated chain ID to:", cachedChainId);
+      } catch (err) {
+        console.warn(
+          "[Privy Integration] Failed to fetch current chain ID:",
+          err,
+        );
+        // Fall back to cached value if fetch fails
+      }
+
+      return provider;
     },
   };
 }

package/src/adapters/web.native.ts

@@ -0,0 +1,6 @@
+/**
+ * React Native stub for web adapter
+ * This file prevents Metro from importing @privy-io/react-auth
+ */
+
+export const webAdapter = null;

package/src/context/AlchemyContext.tsx

@@ -0,0 +1,162 @@
+import {
+  type PropsWithChildren,
+  createContext,
+  useContext,
+  useRef,
+  useEffect,
+} from "react";
+import type { SmartWalletClient } from "@account-kit/wallet-client";
+import type { AlchemyProviderConfig } from "../types.js";
+import type { PrivyAdapter } from "../adapters/types.js";
+
+/**
+ * Context for Alchemy configuration
+ */
+const AlchemyConfigContext = createContext<AlchemyProviderConfig | null>(null);
+
+/**
+ * Context for the platform adapter
+ */
+const AdapterContext = createContext<PrivyAdapter | null>(null);
+
+/**
+ * Client cache stored in React tree (similar to QueryClient in React Query)
+ *
+ * @internal
+ */
+interface ClientCache {
+  client: SmartWalletClient | null;
+  cacheKey: string | null;
+}
+
+const ClientCacheContext = createContext<ClientCache | null>(null);
+
+/**
+ * Props for AlchemyContextProvider
+ */
+interface AlchemyContextProviderProps extends PropsWithChildren {
+  config: AlchemyProviderConfig;
+  adapter: PrivyAdapter;
+}
+
+/**
+ * Internal provider component that manages Alchemy context
+ * Used by both web and React Native providers
+ *
+ * @internal
+ * @param {AlchemyContextProviderProps} props - Component props
+ * @param {React.ReactNode} props.children - React children to wrap with context
+ * @param {AlchemyProviderConfig} props.config - Alchemy configuration
+ * @param {PrivyAdapter} props.adapter - Platform adapter
+ * @returns {JSX.Element} Context provider component
+ */
+export function AlchemyContextProvider({
+  children,
+  config,
+  adapter,
+}: AlchemyContextProviderProps) {
+  const { authenticated, user } = adapter.usePrivyAuth();
+
+  // Store cache in a ref - persists across renders but scoped to this component instance
+  // This makes it SSR-safe (each request gets its own cache) and React StrictMode-safe
+  const cache = useRef<ClientCache>({
+    client: null,
+    cacheKey: null,
+  });
+
+  // Track previous state to detect logout and wallet changes
+  const prevAuthenticatedRef = useRef(authenticated);
+  const prevWalletAddressRef = useRef(user?.wallet?.address);
+
+  // Automatically reset cache when user logs out or switches wallets
+  useEffect(() => {
+    const wasAuthenticated = prevAuthenticatedRef.current;
+    const prevWalletAddress = prevWalletAddressRef.current;
+    const currentWalletAddress = user?.wallet?.address;
+
+    // Reset cache on logout
+    if (wasAuthenticated && !authenticated) {
+      cache.current.client = null;
+      cache.current.cacheKey = null;
+    }
+
+    // Reset cache on wallet address change (account switching)
+    if (
+      authenticated &&
+      prevWalletAddress &&
+      currentWalletAddress &&
+      prevWalletAddress !== currentWalletAddress
+    ) {
+      cache.current.client = null;
+      cache.current.cacheKey = null;
+    }
+
+    // Update refs for next render
+    prevAuthenticatedRef.current = authenticated;
+    prevWalletAddressRef.current = currentWalletAddress;
+  }, [authenticated, user?.wallet?.address]);
+
+  return (
+    <AlchemyConfigContext.Provider value={config}>
+      <AdapterContext.Provider value={adapter}>
+        <ClientCacheContext.Provider value={cache.current}>
+          {children}
+        </ClientCacheContext.Provider>
+      </AdapterContext.Provider>
+    </AlchemyConfigContext.Provider>
+  );
+}
+
+/**
+ * Hook to access Alchemy provider configuration
+ * Must be used within an <AlchemyProvider> component
+ *
+ * @returns {AlchemyProviderConfig} The current Alchemy configuration
+ * @throws {Error} If used outside of AlchemyProvider
+ *
+ * @example
+ * ```tsx
+ * const config = useAlchemyConfig();
+ * console.log('Policy ID:', config.policyId);
+ * ```
+ */
+export function useAlchemyConfig(): AlchemyProviderConfig {
+  const context = useContext(AlchemyConfigContext);
+  if (!context) {
+    throw new Error("useAlchemyConfig must be used within <AlchemyProvider />");
+  }
+  return context;
+}
+
+/**
+ * Hook to access the platform adapter
+ * Must be used within an <AlchemyProvider> component
+ *
+ * @internal
+ * @returns {PrivyAdapter} The platform adapter
+ */
+export function useAdapter(): PrivyAdapter {
+  const context = useContext(AdapterContext);
+  if (!context) {
+    throw new Error(
+      "useAdapter must be used within <AlchemyProvider />. Make sure AlchemyProvider is nested inside PrivyProvider.",
+    );
+  }
+  return context;
+}
+
+/**
+ * Hook to access the client cache (internal use only)
+ *
+ * @internal
+ * @returns {ClientCache} The client cache object
+ */
+export function useClientCache(): ClientCache {
+  const context = useContext(ClientCacheContext);
+  if (!context) {
+    throw new Error(
+      "useClientCache must be used within <AlchemyProvider />. Make sure AlchemyProvider is nested inside PrivyProvider.",
+    );
+  }
+  return context;
+}

package/src/hooks/useAlchemyClient.ts

@@ -34,10 +34,16 @@ export function useAlchemyClient() {
   const cache = useClientCache();
   const getEmbeddedWallet = useEmbeddedWallet();
 
-  const getEmbeddedWalletChain = useCallback(() => {
-    const embedded = getEmbeddedWallet();
+  const getClient = useCallback(async (): Promise<SmartWalletClient> => {
+    const embeddedWallet = getEmbeddedWallet();
+
+    // IMPORTANT: Get provider FIRST to ensure chain ID is updated
+    // The provider fetch triggers chain ID update in the adapter
+    const provider = await embeddedWallet.getEthereumProvider();
+
+    // NOW get the chain from the SAME wallet instance with updated chain ID
     // Handle CAIP-2 format like "eip155:1"
-    const chainIdStr = embedded.chainId?.toString();
+    const chainIdStr = embeddedWallet.chainId?.toString();
 
     if (!chainIdStr) {
       throw new Error(
@@ -57,14 +63,10 @@ export function useAlchemyClient() {
       );
     }
 
-    return getChain(parsedChainId);
-  }, [getEmbeddedWallet]);
-
-  const getClient = useCallback(async (): Promise<SmartWalletClient> => {
-    const embeddedWallet = getEmbeddedWallet();
-    const chain = getEmbeddedWalletChain();
+    const chain = getChain(parsedChainId);
 
     // Generate a cache key based on configuration and wallet address
+    // IMPORTANT: Include whether authorization signer is available in cache key
     const currentCacheKey = JSON.stringify({
       address: embeddedWallet.address,
       chainId: chain.id,
@@ -72,6 +74,7 @@ export function useAlchemyClient() {
       jwt: config.jwt,
       rpcUrl: config.rpcUrl,
       policyId: config.policyId,
+      hasAuthSigner: !!signAuthorizationFn,
     });
 
     // Return cached client if configuration hasn't changed
@@ -80,7 +83,6 @@ export function useAlchemyClient() {
     }
 
     // Configuration changed or no cache exists, create new client
-    const provider = await embeddedWallet.getEthereumProvider();
 
     // Create base signer from Privy wallet
     const baseSigner = new WalletClientSigner(
@@ -100,6 +102,11 @@ export function useAlchemyClient() {
         }
       : baseSigner;
 
+    console.log(
+      "[useAlchemyClient] Created signer with authorization support:",
+      !!signAuthorizationFn,
+    );
+
     // Determine transport configuration using schema validation
     // This properly handles combinations like rpcUrl + jwt together
     const transportConfig = ConnectionConfigSchema.parse({
@@ -132,7 +139,6 @@ export function useAlchemyClient() {
     return cache.client;
   }, [
     getEmbeddedWallet,
-    getEmbeddedWalletChain,
     signAuthorizationFn,
     config.apiKey,
     config.jwt,

package/src/hooks/useAlchemySendTransaction.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import { type Address, type Hex, isHex } from "viem";
 import { useAlchemyClient } from "./useAlchemyClient.js";
-import { useAlchemyConfig } from "../Provider.js";
+import { useAlchemyConfig } from "../context/AlchemyContext.js";
 import { useEmbeddedWallet } from "./internal/useEmbeddedWallet.js";
 import type {
   UnsignedTransactionRequest,

package/src/hooks/useAlchemySolanaTransaction.ts

@@ -7,7 +7,7 @@ import {
   TransactionInstruction,
   VersionedTransaction,
 } from "@solana/web3.js";
-import { useAlchemyConfig } from "../Provider.js";
+import { useAlchemyConfig } from "../context/AlchemyContext.js";
 import { createSolanaSponsoredTransaction } from "../util/createSolanaSponsoredTransaction.js";
 import { useSignTransaction, useWallets } from "@privy-io/react-auth/solana";
 import { createSolanaTransaction } from "../util/createSolanaTransaction.js";

package/src/providers/ReactNativeProvider.tsx

@@ -0,0 +1,45 @@
+import type { PropsWithChildren } from "react";
+import { AlchemyContextProvider } from "../context/AlchemyContext.js";
+import { reactNativeAdapter } from "../adapters/react-native.js";
+import type { AlchemyProviderConfig } from "../types.js";
+
+/**
+ * Provider component for React Native (Expo) applications
+ * Must be nested INSIDE PrivyProvider from @privy-io/expo
+ *
+ * @param {PropsWithChildren<AlchemyProviderConfig>} props - Component props
+ * @param {React.ReactNode} props.children - React children to wrap with Alchemy configuration
+ * @param {string} [props.apiKey] - Your Alchemy API key
+ * @param {string} [props.jwt] - JWT token for authentication
+ * @param {string} [props.rpcUrl] - Custom RPC URL for EVM chains
+ * @param {string} [props.solanaRpcUrl] - Custom RPC URL for Solana
+ * @param {string | string[]} [props.policyId] - Gas Manager policy ID(s) for EVM chains
+ * @param {string | string[]} [props.solanaPolicyId] - Gas Manager policy ID(s) for Solana
+ * @param {boolean} [props.disableSponsorship] - Set to true to disable sponsorship by default (default: false)
+ * @returns {JSX.Element} Provider component
+ *
+ * @example
+ * ```tsx
+ * import { PrivyProvider } from '@privy-io/expo';
+ * import { AlchemyProvider } from '@account-kit/privy-integration/react-native';
+ *
+ * <PrivyProvider appId="..." clientId="...">
+ *   <AlchemyProvider
+ *     apiKey="your-alchemy-api-key"
+ *     policyId="your-gas-policy-id"
+ *   >
+ *     <YourApp />
+ *   </AlchemyProvider>
+ * </PrivyProvider>
+ * ```
+ */
+export function AlchemyProvider({
+  children,
+  ...config
+}: PropsWithChildren<AlchemyProviderConfig>) {
+  return (
+    <AlchemyContextProvider config={config} adapter={reactNativeAdapter}>
+      {children}
+    </AlchemyContextProvider>
+  );
+}

package/src/providers/WebProvider.native.tsx

@@ -0,0 +1,11 @@
+/**
+ * React Native stub for WebProvider
+ * This file prevents Metro from importing web-specific code
+ */
+
+export function AlchemyProvider() {
+  throw new Error(
+    "WebProvider is not available in React Native. " +
+      'Import from "@account-kit/privy-integration/react-native" instead.',
+  );
+}

package/src/providers/WebProvider.tsx

@@ -0,0 +1,45 @@
+import type { PropsWithChildren } from "react";
+import { AlchemyContextProvider } from "../context/AlchemyContext.js";
+import { webAdapter } from "../adapters/web.js";
+import type { AlchemyProviderConfig } from "../types.js";
+
+/**
+ * Provider component for React web applications
+ * Must be nested INSIDE PrivyProvider from @privy-io/react-auth
+ *
+ * @param {PropsWithChildren<AlchemyProviderConfig>} props - Component props
+ * @param {React.ReactNode} props.children - React children to wrap with Alchemy configuration
+ * @param {string} [props.apiKey] - Your Alchemy API key
+ * @param {string} [props.jwt] - JWT token for authentication
+ * @param {string} [props.rpcUrl] - Custom RPC URL for EVM chains
+ * @param {string} [props.solanaRpcUrl] - Custom RPC URL for Solana
+ * @param {string | string[]} [props.policyId] - Gas Manager policy ID(s) for EVM chains
+ * @param {string | string[]} [props.solanaPolicyId] - Gas Manager policy ID(s) for Solana
+ * @param {boolean} [props.disableSponsorship] - Set to true to disable sponsorship by default (default: false)
+ * @returns {JSX.Element} Provider component
+ *
+ * @example
+ * ```tsx
+ * import { PrivyProvider } from '@privy-io/react-auth';
+ * import { AlchemyProvider } from '@account-kit/privy-integration';
+ *
+ * <PrivyProvider appId="...">
+ *   <AlchemyProvider
+ *     apiKey="your-alchemy-api-key"
+ *     policyId="your-gas-policy-id"
+ *   >
+ *     <YourApp />
+ *   </AlchemyProvider>
+ * </PrivyProvider>
+ * ```
+ */
+export function AlchemyProvider({
+  children,
+  ...config
+}: PropsWithChildren<AlchemyProviderConfig>) {
+  return (
+    <AlchemyContextProvider config={config} adapter={webAdapter}>
+      {children}
+    </AlchemyContextProvider>
+  );
+}

package/src/version.ts

@@ -1,3 +1,3 @@
 // This file is autogenerated by inject-version.ts. Any changes will be
 // overwritten on commit!
-export const VERSION = "4.73.1-alpha.1";
+export const VERSION = "4.73.1-alpha.11";