ERC721 setApprovalForAll approves the account.address instead of account.publicKey or user.address

[DWboutin]

Hi!

We are trying to implement Alchemy's AA in our React.js/Next.js application. We want to use the gas manager to pay for the gas fees of our users.

Right now we are at the proof of concept to know how to make it work correct.

For the login I have this React component managing the login with an hardcoded email. When we click on the button, it sends the email to the email address and when clicking on the email's button it redirects correctly to our website and connects the user.

export const HeaderAlchemy = () => {
  const user = useUser()
  const { status } = useSignerStatus()
  const { authenticate } = useAuthenticate()
  const setWalletAddress = useUserStore(state => state.setWalletAddress)

  const isAwaitingEmail = status === "AWAITING_EMAIL_AUTH"

  const login = () => {
    authenticate({ type: "email", email: "[email protected]" })
  }

  useEffect(() => {
    console.log(user?.address)
    if (user?.address) {
      setWalletAddress(user.address)
    }
  }, [user])

  return (
    <button
      onClick={login}
      className="h-10 rounded-full btn-primary hover:btn-primary-focus px-8 focus:outline-none focus-visible:ring focus-visible:ring-white focus:ring-opacity-20"
      data-test="connect-wallet-button"
      data-testid="header-connect-wallet-btn"
    >
      {!isAwaitingEmail ? "Connect wallet" : "Check email"}
    </button>
  )
}

After we are logged in, we try to transfer an NFT from the account, but before we need to approve the the transfer.

  const {
    sendUserOperationAsync,
    sendUserOperationResult,
    isSendingUserOperation,
    error: isSendUserOperationError,
  } = useSendUserOperation({
    client,
    waitForTxn: true,
    onSuccess: ({ hash, request }) => {
      console.log("ON SUCCESS", { hash, request })
      // [optional] Do something with the hash and request
    },
    onError: error => {
      console.log("ON ERROR", { error })
      // [optional] Do something with the error
    },
  })

  const handleNftTransfer = () => {
    const ethersProvider = new ethers.BrowserProvider(window.ethereum)
    const approvalContract = await initContract(
      contractsInfo.voxiesNftItems.address,
      contractsInfo.voxiesNftItems.abi,
      ethersProvider
    )

    const approval = await approvalContract.isApprovedForAll(
      user?.address?.toLowerCase(),
      contractsInfo[contractInfoName].address
    )

    if (approval === false) {
      const approvalData = encodeFunctionData({
        abi: contractsInfo.voxiesNftItems.abi,
        functionName: "setApprovalForAll",
        args: [contractsInfo[contractInfoName].address, true],
      } as any)

      const { hash } = await sendUserOperationAsync({
        uo: {
          target: contractsInfo.voxiesNftItems.address as any,
          data: approvalData,
        },
        account,
      })

      console.log({ hash })
    }
    
    ...rest of the transfer transaction
  }

The setApprovalForAll transaction launches correctly, but it don't approves the user.address but it approves the account.address instead.

So when we launch a transferFrom transaction, it gives a "ERC721: transfer caller is not owner nor approved" exception.

How can we approve the user address correctly and make this work while using the gas sponsoring feature?

Thank you

[moldy530]

ah so the user?.address?.toLowerCase() returns the underlying signer address. the account.address is the address for the NFT itself.

It's rare that you would actually use the user.address and should be using the account.address as the account is where data is stored. the user.address is the owner of the account, but that wallet is just a traditional EOA and doesn't hold any of the assets

[DWboutin]

Damn, I was so close and so far at the same time 😅

Thank you very much