[SOLVED] Web3 DEX - useSendTransaction wagmi type error `0x${string}`

[Shamz]

Hey guys, I’ve been following this tutorial for building web3 DEX https://www.youtube.com/watch?v=t8U7GRrlYW8&ab_channel=MoralisWeb3 but implementing it to my own project, so had to do few adjustments. I build my app in NextJS with Typescript and when running the useSendTransaction() from wagmi I get TS error and I cannot figure out what it is. I went through all the docs and nothing works properly, and ChatGPT doesn’t know either.
Anyone more experienced who could help me solve it please? I’m not so proficient in TS so have no clue what to do next.
Cannot deploy my app like that, cause npm run build gives me error. When running in dev mode it works, still notifies me about the error, but it works.
Thank you!

code snippet:

   const [txDetails, setTxDetails] = useState({
        to: null,
        data: null,
        value: null,
    })

    const { address, isConnected } = useAccount();
    const { data, sendTransaction } = useSendTransaction({
        account: address,
        to: String(txDetails.to),
        data: String(txDetails.data),
        value: String(txDetails.value),
    });

and the errors I’m getting are for the data and value.

[johnversus]

Hi @Shamz

@Shamz

const { data, sendTransaction } = useSendTransaction({
        account: address,
        to: String(txDetails.to),
        data: String(txDetails.data),
        value: String(txDetails.value),
    });

Looks like it just an typescript error. Try assigning the type like below to fix the error.

const { data, sendTransaction } = useSendTransaction({
        account: address,
        to: txDetails.to as `0x${string}`,
        data: txDetails.data as `0x${string}`,
        value: txDetails.value as `0x${string}`,
    });

[Shamz]

doesn’t work, but thank you!
this is what I get:
“Conversion of type ‘null’ to type ‘0x${string}’ may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to ‘unknown’ first.”

[johnversus]

So typescript is suggesting like this?

const { data, sendTransaction } = useSendTransaction({
        account: address,
        to: txDetails.to as unknown as `0x${string}`,
        data: txDetails.data as unknown as `0x${string}`,
        value: txDetails.value as unknown as `0x${string}`,
    });

[Shamz]

@johnversus

        value: txDetails.value as unknown as `0x${string}`,

Thank you, that seems to be working!
Had to do the value like this tho:
value: BigInt(0x${txDetails.value}),

Thank you, John!