Setup EIP-7702 Smart Account Clients

import { useState, useEffect, useRef } from "react";
import { useViemAccount } from "@getpara/react-sdk/evm";
import { createZeroDevPaymasterClient } from "@zerodev/sdk";
import { getEntryPoint, KERNEL_V3_3 } from "@zerodev/sdk/constants";
import { create7702KernelAccount, create7702KernelAccountClient } from "@zerodev/ecdsa-validator";
import { createPublicClient, http, type Address } from "viem";
import { sepolia } from "viem/chains";
import type { KernelAccountClient } from "@zerodev/sdk";

const ZERODEV_PROJECT_ID = process.env.NEXT_PUBLIC_ZERODEV_PROJECT_ID!;
const CHAIN = sepolia;
const CHAIN_ID = CHAIN.id;
const BUNDLER_RPC = `https://rpc.zerodev.app/api/v3/${ZERODEV_PROJECT_ID}/chain/${CHAIN_ID}`;
const PAYMASTER_RPC = `https://rpc.zerodev.app/api/v3/${ZERODEV_PROJECT_ID}/chain/${CHAIN_ID}`;
const PUBLIC_RPC = "https://ethereum-sepolia-rpc.publicnode.com";
const ENTRY_POINT = getEntryPoint("0.7");
const KERNEL_VERSION = KERNEL_V3_3;

export function useSmartAccountClient() {
  const { viemAccount, isLoading: isViemLoading } = useViemAccount();
  const [client, setClient] = useState<KernelAccountClient | null>(null);
  const [address, setAddress] = useState<Address | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  const initializedForAddress = useRef<string | null>(null);

  useEffect(() => {
    if (!viemAccount || isViemLoading) return;
    if (initializedForAddress.current === viemAccount.address) return;

    const initializeClient = async () => {
      setIsLoading(true);
      setError(null);

      try {
        const publicClient = createPublicClient({
          chain: CHAIN,
          transport: http(PUBLIC_RPC),
        });

        const kernelAccount = await create7702KernelAccount(publicClient, {
          signer: viemAccount,
          entryPoint: ENTRY_POINT,
          kernelVersion: KERNEL_VERSION,
        });

        const paymasterClient = createZeroDevPaymasterClient({
          chain: CHAIN,
          transport: http(PAYMASTER_RPC),
        });

        const kernelClient = create7702KernelAccountClient({
          account: kernelAccount,
          chain: CHAIN,
          bundlerTransport: http(BUNDLER_RPC),
          paymaster: paymasterClient,
          client: publicClient,
        });

        setClient(kernelClient as KernelAccountClient);
        setAddress(kernelAccount.address);
        initializedForAddress.current = viemAccount.address;
      } catch (err) {
        setError(err instanceof Error ? err : new Error("Failed to initialize 7702 account"));
      } finally {
        setIsLoading(false);
      }
    };

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

  return { client, address, isLoading: isLoading || isViemLoading, error };
}

import { useState, useEffect, useRef } from "react";
import { useViemAccount } from "@getpara/react-sdk/evm";
import { gelato } from "@gelatonetwork/smartwallet/accounts";
import { createGelatoSmartWalletClient } from "@gelatonetwork/smartwallet";
import { createWalletClient, createPublicClient, http, type Address } from "viem";
import { sepolia } from "viem/chains";
import type { GelatoSmartWalletClient } from "@gelatonetwork/smartwallet";

const GELATO_API_KEY = process.env.NEXT_PUBLIC_GELATO_API_KEY!;
const CHAIN = sepolia;

export function useSmartAccountClient() {
  const { viemAccount, isLoading: isViemLoading } = useViemAccount();
  const [client, setClient] = useState<GelatoSmartWalletClient | null>(null);
  const [address, setAddress] = useState<Address | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  const initializedForAddress = useRef<string | null>(null);

  useEffect(() => {
    if (!viemAccount || isViemLoading || !GELATO_API_KEY) return;
    if (initializedForAddress.current === viemAccount.address) return;

    const initializeClient = async () => {
      setIsLoading(true);
      setError(null);

      try {
        const publicClient = createPublicClient({
          chain: CHAIN,
          transport: http(),
        });

        const smartAccount = await gelato({
          owner: viemAccount,
          client: publicClient,
        });

        const walletClient = createWalletClient({
          account: smartAccount,
          chain: CHAIN,
          transport: http(),
        });

        const smartWalletClient = await createGelatoSmartWalletClient(walletClient, {
          apiKey: GELATO_API_KEY,
        });

        setClient(smartWalletClient);
        setAddress(smartAccount.address);
        initializedForAddress.current = viemAccount.address;
      } catch (err) {
        setError(err instanceof Error ? err : new Error("Failed to initialize"));
      } finally {
        setIsLoading(false);
      }
    };

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

  return { client, address, isLoading: isLoading || isViemLoading, error };
}

import { useState, useCallback, useMemo, useEffect } from "react";
import { useViemAccount } from "@getpara/react-sdk/evm";
import { useAccount } from "@getpara/react-sdk";
import { Chains } from "porto";
import { Account, Key, RelayActions } from "porto/viem";
import { createClient, http, type Hex } from "viem";

export function usePortoAccount() {
  const { viemAccount, isLoading: isViemLoading } = useViemAccount();
  const { isConnected } = useAccount();
  const [portoAccount, setPortoAccount] = useState<any>(null);
  const [isUpgrading, setIsUpgrading] = useState(false);
  const [isCheckingStatus, setIsCheckingStatus] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const portoClient = useMemo(
    () =>
      createClient({
        chain: Chains.baseSepolia,
        transport: http("https://rpc.porto.sh"),
      }),
    []
  );

  const signRawHash = useCallback(
    async (hash: Hex): Promise<Hex> => {
      if (!viemAccount?.sign) throw new Error("Viem account not available");
      return viemAccount.sign({ hash });
    },
    [viemAccount]
  );

  useEffect(() => {
    async function checkPortoStatus() {
      if (!viemAccount?.address || !isConnected) return;

      setIsCheckingStatus(true);
      try {
        const tempAccount = Account.from({ address: viemAccount.address });
        const keys = await RelayActions.getKeys(portoClient, { account: tempAccount });

        if (keys.length > 0) {
          const account = Account.from({
            address: viemAccount.address,
            keys: [...keys],
            async sign({ hash }) {
              return signRawHash(hash as Hex);
            },
          });
          setPortoAccount(account);
        }
      } catch {
        // Account not upgraded yet
      } finally {
        setIsCheckingStatus(false);
      }
    }

    checkPortoStatus();
  }, [viemAccount?.address, isConnected, portoClient, signRawHash]);

  const upgradeToPorto = useCallback(async () => {
    if (!viemAccount || !isConnected) {
      setError("Wallet not connected");
      return;
    }

    setIsUpgrading(true);
    setError(null);

    try {
      const customAccount = Account.from({
        address: viemAccount.address,
        async sign({ hash }) {
          return signRawHash(hash as Hex);
        },
      });

      const adminKey = Key.createSecp256k1({ role: "admin" });

      const prepared = await RelayActions.prepareUpgradeAccount(portoClient, {
        address: customAccount.address,
        authorizeKeys: [adminKey],
      });

      const signatures = {
        auth: await signRawHash(prepared.digests.auth as Hex),
        exec: await signRawHash(prepared.digests.exec as Hex),
      };

      const upgradedAccount = await RelayActions.upgradeAccount(portoClient, {
        ...prepared,
        signatures,
      });

      setPortoAccount(upgradedAccount);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Upgrade failed");
    } finally {
      setIsUpgrading(false);
    }
  }, [viemAccount, isConnected, portoClient, signRawHash]);

  return {
    viemAccount,
    portoAccount,
    address: viemAccount?.address,
    isViemLoading,
    isUpgrading,
    isCheckingStatus,
    error,
    upgradeToPorto,
    isConnected,
  };
}