Alchemy Account Abstraction

const lightAccountFactoryAddress = getDefaultLightAccountFactoryAddress(chain)

const magicSigner: SmartAccountSigner | undefined = useMemo(() => {
  if (!magic) return

  const client = createWalletClient({
    transport: custom(magic.rpcProvider),
  })

  return new WalletClientSigner(client as any, "magic")
}, [magic])

provider.connect((provider) => {
  return new LightSmartContractAccount({
    rpcClient: provider,
    owner: magicSigner,
    chain,
    entryPointAddress,
    factoryAddress: lightAccountFactoryAddress,
  })
})

import {
  getDefaultLightAccountFactoryAddress,
  LightSmartContractAccount,
} from "@alchemy/aa-accounts"
import { SmartAccountSigner, WalletClientSigner } from "@alchemy/aa-core"
import { AlchemyProvider } from "@alchemy/aa-alchemy"
import { sepolia } from "viem/chains"
import { createWalletClient, custom, WalletClient } from "viem"
import { useCallback, useEffect, useMemo, useState } from "react"
import { useMagic } from "../magic/MagicProvider"

// Initializes the useAlchemyProvider hook for managing AlchemyProvider in a React component.
export const useAlchemyProvider = () => {
  const chain = sepolia
  const lightAccountFactoryAddress = getDefaultLightAccountFactoryAddress(chain)
  const entryPointAddress = useMemo(
    () => "0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789",
    []
  )
  const { magic } = useMagic()
  const [provider, setProvider] = useState<AlchemyProvider>(
    new AlchemyProvider({
      chain,
      entryPointAddress,
      rpcUrl: process.env.NEXT_PUBLIC_SEPOLIA_RPC!,
    })
  )

  const magicSigner: SmartAccountSigner | undefined = useMemo(() => {
    if (!magic) return

    const client = createWalletClient({
      transport: custom(magic.rpcProvider),
    })

    return new WalletClientSigner(client as any, "magic")
  }, [magic])

  useEffect(() => {
    if (magic?.user.isLoggedIn) {
      connectToSmartContractAccount()
    } else {
      disconnectFromSmartContractAccount()
    }
  }, [magic?.user.isLoggedIn])

  // Connects the AlchemyProvider to a Smart Account using the LightSmartContractAccount class.
  // Sets the owner as the Magic account wallet
  const connectToSmartContractAccount = useCallback(() => {
    if (!magicSigner) return

    // This is where Magic is associated as the owner of the smart contract account
    const connectedProvider = provider.connect((provider) => {
      return new LightSmartContractAccount({
        rpcClient: provider,
        owner: magicSigner,
        chain,
        entryPointAddress,
        factoryAddress: lightAccountFactoryAddress,
      })
    })

    setProvider(connectedProvider)
    return connectedProvider
  }, [entryPointAddress, provider])

  // Disconnects the AlchemyProvider from the current account.
  const disconnectFromSmartContractAccount = useCallback(() => {
    const disconnectedProvider = provider.disconnect()
    setProvider(disconnectedProvider)
    return disconnectedProvider
  }, [provider])

  // Returns the AlchemyProvider for use in components.
  return {
    provider,
  }
}

// Change this
const [balance, setBalance] = useState("...")
const [publicAddress] = useState(
  localStorage.getItem("user")
)

// To this
const [magicBalance, setMagicBalance] = useState<string>("...")
const [scaBalance, setScaBalance] = useState<string>("...")
const [magicAddress] = useState(
  localStorage.getItem("user")
)
const [scaAddress, setScaAddress] = useState<string>("")

const getBalance = useCallback(async () => {
  if (magicAddress && web3) {
    const magicBalance = await web3.eth.getBalance(magicAddress)
    if (magicBalance == BigInt(0)) {
      setMagicBalance("0")
    } else {
      setMagicBalance(web3.utils.fromWei(magicBalance, "ether"))
    }
  }
  if (scaAddress && web3) {
    const aaBalance = await web3.eth.getBalance(scaAddress)
    if (aaBalance == BigInt(0)) {
      setScaBalance("0")
    } else {
      setScaBalance(web3.utils.fromWei(aaBalance, "ether"))
    }
  }
}, [web3, magicAddress, scaAddress])

<div className="flex flex-col gap-2">
  <div className="code">
    Magic: {magicBalance.substring(0, 7)} {getNetworkToken()}
  </div>
  <div className="code">
    AA: {scaBalance.substring(0, 7)} {getNetworkToken()}
  </div>
</div>

// Change this
useEffect(() => {
  setBalance('...');
}, [magic]);

// To this
useEffect(() => {
  setMagicBalance("...")
  setScaBalance("...")
}, [magic])

const { provider } = useAlchemyProvider()

const getSmartContractAccount = useCallback(async () => {
  const aaAccount = await provider.account?.getAddress()
  setScaAddress(aaAccount as `0x${string}`)
}, [provider])

useEffect(() => {
  getSmartContractAccount()
}, [provider, provider.account, getSmartContractAccount])

<CardLabel
  leftHeader="Addresses"
  rightAction={
    !magicAddress ? <Spinner /> : <div onClick={copy}>{copied}</div>
  }
/>
<div className="flex flex-col gap-2">
  <div className="code">
    Magic:{" "}
    {magicAddress?.length == 0 ? "Fetching address..." : magicAddress}
  </div>
  <div className="code">
    Smart Contract Account:{" "}
    {scaAddress?.length == 0 ? "Fetching address..." : scaAddress}
  </div>
</div>

const sendTransaction = useCallback(async () => {
    if (!web3?.utils.isAddress(toAddress)) {
      return setToAddressError(true);
    }
    if (isNaN(Number(amount))) {
      return setAmountError(true);
    }
    setDisabled(true);

    const result = await provider.sendUserOperation({
      target: toAddress as `0x${string}`,
      data: "0x",
      value: web3.utils.toWei(amount, 'ether'),
    });

    const txHash = await provider.waitForUserOperationTransaction(result.hash)
      .then((receipt) => {
        showToast({
          message: `Transaction Successful. TX Hash: ${receipt}`,
          type: 'success',
        });
        setHash(receipt);
        setToAddress('');
        setAmount('');
        console.log('Transaction receipt:', receipt);
      })

    console.log(txHash);
    setDisabled(false);
  }, [web3, amount, publicAddress, toAddress]);