Decode transaction input params

[milaabl]

I'm trying to decode the transaction's input data to further display it with React. The transaction is OpenZeppelin ERC20's transfer(address to, uint256 amount) function.

I need it to display the amount of transferred tokens when the transaction is finished. I cannot get this from state because of some requirements for specific reasons.

My current code results in an error:

transactionData.logs[0].data && String(decodeAbiParameters(transferAbiParams, transactionData.logs[0].data)

const {data : transactionData, isLoading : isTransactionDataLoading } = useWaitForTransaction({
        hash: transactionHash ? transactionHash : _transactionHash,
        onSuccess: () => {
        },
        enabled: !!(transactionHash || _transactionHash)
    });

useWaitForTransaction is from the wagmi hooks package.

From the console I can see that the transactionData is valid and the status is success.

Data size of 32 bytes is too small for given parameters. Params: (address to, uint256 amount)

Which property of the transactionData object I should reference to get the input data of the particular transaction? The transaction explorer: https://sepolia.etherscan.io/tx/0x6656c41de44bd4f1893237662f0cc7dbead4c8a11528b8fc3d053a26cfd06514

Please advice!

[milaabl]

OK, figured it out :)

For the recepient ("to") I had to reference

decodeAbiParameters([{
            type: 'uint256',
            name: 'amount'
        }], transactionData.logs[0].topics[2]))

and for "amount"

decodeAbiParameters([{
            type: 'uint256',
            name: 'amount'
        }], transactionData.logs[0].data)

Hope it helps someone else!

[Schrammel]

This is the best way that I found to decode the transaction

import { decodeFunctionData } from "viem"

const transaction = await client.getTransaction({
  hash: transactionHash,
})

const { args } = decodeFunctionData({
  abi: erc20ABI,
  data: transaction.input,
})
  
console.log(args)