Argent Webwallet not working with starknet-react

[jisensee]

I am trying to add support for the webwallet to my application and am running into an issue when using contract writes. My setup:

• NextJS
• starknet-react
• starknetkit

Connecting the webwallet and getting the address works fine. However, as soon as there is a useContractWrite invocation on the page, the app crashes with an error in starknetkit:

Call Stack

Unhandled Runtime Error TypeError: t[i] is not a function Call Stack Pn/

I could easily reproduce this issue by setting up a new app with create-starknetkit-app and adding the following component:

'use client'

import { useContractWrite, useContract } from "@starknet-react/core"
import swayAbi from './sway.json'

export const Test = () => {
  const contract = useContract({
    abi: swayAbi,
    address: '0x004878d1148318a31829523ee9c6a5ee563af6cd87f90a30809e5b0d27db8a9b'
  }).contract

  const r = useContractWrite({
    calls: [contract?.populateTransaction?.['increase_allowance']?.(
'0x004878d1148318a31829523ee9c6a5ee563af6cd87f90a30809e5b0d27db8a9b',1_000_000
    )]
  })

  return <div>
    {r.status}
    </div>
}

This issue only happens with the webwallet as far as I can tell. In my app I have a lot of write contract calls and it's all fine with ArgentX. Just as soon as the webwallet is connected, everything breaks down.

I think I am doing everything right here, if not I would be thankful for advice on how to get this working. Happy to provide more infos or a deployed test app if needed, just let me know.

[bluecco]

hi @jisensee if you could provide starknetkit and starknet-react version would be great!

meanwhile, you could find a code example here of starknetkit v1 + starknet-react v2 https://github.com/argentlabs/starknetkit-example-dapp/blob/develop/src/components/Actions/TransferWithStarknetReact.tsx#L33

[jisensee]

Hey @bluecco, thanks for the response! I checked out the example dapp and it seems like it has the same issue. If you go to https://dapp-argentlabs.vercel.app/withStarknetReactLatest and connect the web wallet you will see that the app crashes immediately. In the console I see the same error that I also get locally. So I guess you have an easy reproduction there already.

[bluecco]

I see, at the moment a fix on dapp side is required (due to a trpc bug) another dapp had the same issue, and they removed polyfiill for async

the fix for trpc is in this merged pr https://github.com/trpc/trpc/pull/5629/files waiting for them to release and update starknetkit (rn, it's released with @next tag only, waiting for a public release)

will work to fix on our example dapp too

[jisensee]

Thanks, good to know. Given the last trpc release has been months ago, I guess we shouldn't expect a short term fix there...
I am not sure what you mean with removing polyfill for async, don't think I have anything like that in my code. But I'll just see how you fix it in the example dapp and go from there.

[bluecco]

also made a fix on trpc (that causes the issue when used with starknet-react) on their repo it's in their RC, as soon as it's a final release it will be included in starknetkit v2