Setup Smart Account Libraries

import { type WalletClient, http, createWalletClient } from "viem";
import { sepolia } from "viem/chains";
import { useViemAccount } from "@getpara/react-sdk";
import { WalletClientSigner } from "@aa-sdk/core";
import { createModularAccountAlchemyClient } from "@account-kit/smart-contracts";
import { alchemy } from "@account-kit/infra";
import { useState, useEffect } from "react";

// Configuration constants - Replace with your values
const CHAIN = sepolia; // Target chain
const ALCHEMY_RPC_URL = "https://eth-sepolia.g.alchemy.com/v2/YOUR_ALCHEMY_API_KEY"; // Replace with your Alchemy RPC URL
const GAS_POLICY_ID = "YOUR_ALCHEMY_GAS_POLICY_ID"; // Replace with your Alchemy gas policy ID
const salt = "YOUR_SALT"; // Used for account creation.

export const useAlchemySmartAccount = () => {
  const { viemAccount, isLoading: accountLoading } = useViemAccount();
  const [client, setClient] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const initializeClient = async () => {
      if (!viemAccount || accountLoading) return;

      try {
        // Create a Viem WalletClient with the Para account
        const walletClient: WalletClient = createWalletClient({
          account: viemAccount,
          chain: CHAIN,
          transport: http(ALCHEMY_RPC_URL)
        });

        // Create WalletClientSigner from the Viem WalletClient
        const walletClientSigner = new WalletClientSigner(walletClient, "wallet");

        // Create modular account Alchemy client with the WalletClientSigner
        const alchemyClient = await createModularAccountAlchemyClient({
          transport: alchemy({ rpcUrl: ALCHEMY_RPC_URL }),
          chain: CHAIN,
          signer: walletClientSigner,
          policyId: GAS_POLICY_ID,
          salt,
        });

        setClient(alchemyClient);
      } catch (error) {
        console.error("Failed to initialize Alchemy client:", error);
      } finally {
        setIsLoading(false);
      }
    };

    initializeClient();
  }, [viemAccount, accountLoading]);

  return { client, isLoading: isLoading || accountLoading };
};