wagmi next feedback

[tmm]

Edit: It's out! Thanks for all the feedback everyone.

Some exciting changes are coming to wagmi: Caching, finite states, abstracted client for Vanilla JS, etc.!

You can download [email protected].* and check it out. Docs are at next.wagmi.sh. Drop feedback here.

[zkSoju]

Ready for it 😄 !

[flatmapeth]

I installed and started migrating code over and immediately hit connector.getSigner is not a function errors when using useContractWrite and TypeError: client.connector.disconnect is not a function when calling disconnect.

I migrated code according to the examples I found in examples/playground and my _app looks like this:

// Chains for connectors to support
const chains = defaultChains;

// @ts-ignore
const connectors: any = ({ chainId }) => {
  const rpcUrl =
    chains.find((x) => x.id === chainId)?.rpcUrls?.[0] ??
    chain.mainnet.rpcUrls[0];
  return [
    new InjectedConnector({
      chains,
      options: { shimDisconnect: true },
    }),
    new WalletConnectConnector({
      options: {
        infuraId,
        qrcode: true,
      },
    }),
    new CoinbaseWalletConnector({
      options: {
        appName: "App",
        jsonRpcUrl: `${rpcUrl}/${infuraId}`,
      },
    }),
  ];
};

const client = createClient({ autoConnect: false, connectors });

...
App = () => {
  return (
    <Provider client={client}>
      ...
    </Provider>
  )
}

Still hacking but though I might post this sooner rather than later. Using 0.3.0-next.4. Not using useSigner anywhere, and wasn't before.

Let me know if you see an obvious derp or if you need more info.

[jxom]

@flatmapeth – looks like we were accidently persisting account data (useAccount data) when autoConnect was falsy. Can you try update now and confirm it's fixed?

[flatmapeth]

@jxom it works now – thanks

I plan to port the rest over the weekend and I'll post updates here

[jxom]

Thank you for testing!!! 🙏🤝

[flatmapeth]

For some good feedback, the API changes are a game changer to me.

It's so easy to make a nice user experience with everything cached.

When there are complex interaction through multiple contracts I just write const thisItem = useContractRead(...), const thatItem = useContractRead(...), const stake = useContractWrite(...) and the code just feels great.

I'll have more feedback next week for sure as I complete porting over to 0.3 but I'm loving it so far.

[eshlox]

@jxom It works now, the call revert exception no longer occurs.

I noticed that it's not possible to import useWaitForTransaction because of missing export: #284

[michaeljohnbennett]

Are you going to make the provider hooks typed? Would be really good to be able to specify the type other than BaseProvider if I wanted to specifically use the Web3 variant to use .send etc without resorting to any types.

[tmm]

Yup! To the degree that this is possible with React Context. If you use the client instance instead of the useProvider hook, this type will be inferred correctly:

const client = createClient({
  provider(config) {
    return new providers.AlchemyProvider(config.chainId, 'Your Alchemy ID')
  },
})

// type is AlchemyProvider
client.provider

useProvider also supports a generic slot if that's more your speed.

[eshlox]

It seems that setting watch to true does not refresh the value (in the previous version, it queried Infura on each new block). I will try to check why it does not work.

  const balance = useBalance({
    addressOrName: '0x...',
    watch: true,
  })

BTW, is there any reason why the refetchInterval is not implemented? IMO it would be a good option to set the refresh interval. Example: we could refresh the token balance every N seconds to decrease the number of queries to Infura. (related: #258)

[jxom]

@eshlox – Setting watch to true seems to work for me. If you can't get it to work, can you upload your repo or a codesandbox? Thanks.

Yes, refetchInterval is also a good idea!

[eshlox]

Maybe it's my fault. 🤔 Everything works when I use the playground example. I also noticed that the MetaMask connector does not open the MetaMask window (in my app) when I want to connect. It might be related. I will check it.

Could someone release the newest changes to NPM? The latest version (0.3.0-next.9) was released 3 days ago.

[eshlox]

OK, I think I know where is the issue. I use Polygon (Mumbai) and Infura. The watch option works on all networks except Polygon. When I switch the playground example to Infura (the latest version use Alchemy by default) and set Polygon as a default network (it requires a network add-on), it also does not work. What's interesting, it works when I use Alchemy instead of Infura. Maybe it's time to switch to Alchemy. 🤔

@tmm Would you mind publishing the latest changes to npm? It would be easier to test it.

[tmm]

Yup! Will do shortly and let you know.

[tmm]

@eshlox 0.3.0-next.10 is out

[tmm]

Should update Error types to allow for accessing ethers-related error info #233

[eshlox]

There is a small bug in useWaitForTransaction hook: #296

[flatmapeth]

I'm getting this error, which is probably my fault, but I have no idea where to start looking to fix the problem:

Any way to make this clearer for the end user?

[flatmapeth]

@tmm does the codesandbox help? do you need more information from me?

[tmm]

Haven't had a chance to look yet, although it looks like @jxom fixed in 4426c45.

[flatmapeth]

Awesome, I'm ready to test whenever

[jxom]

@flatmapeth – update to .16 and try again? I introduced some changes to improve useContractRead caching.

[flatmapeth]

@jxom as far as I can tell this version fixes the caching issue I've been having 🎉

[flatmapeth]

Is this documentation still valid?

https://next.wagmi.sh/docs/hooks/useContractRead#configuration-1

Do we still need useMemo?

[tmm]

Nope, should be good. Will remove from the docs.

[bigint]

Finally moved my app to wagmi 0.3.0 it was smooth, it took around 5 hours for me to migrate cuz a lot of breaking changes, faced some bugs will report it in this thread ASAP 🤗

Finally, the bundle size became 340kb from 510kb 🚀

https://gitlab.com/lenster/lenster/-/merge_requests/90

[bigint]

Getting this error in 0.3.0-next.16 🤔

cc @tmm

[bigint]

@tmm It's still there 😕, I even cleaned node_modules and yarn.lock and installed again, still same issue 🙇🏻

[tmm]

What version of React are you using?

[bigint]

@tmm I'm using react 18.0.0

[tmm]

@bigint just set up fresh projects with [email protected] and [email protected] with Next.js and Vite, and both worked fine.

Can you share a minimal reproducible example? Also, happy to take a look at the code you are working with (MRE is most useful though).

[bigint]

@tmm this is fine now 🙈, it only got fixed after deleting .next folder

[bigint]

Getting connector not found sometimes 😕 it was fine in 0.2.0

Also difficult to reproduce, its happening once in 100 times

cc @tmm

[tmm]

What wallet are you using when this happens? A code snippet or reproducible example would be helpful!

[bigint]

It's causing when metamask wallet is locked, but I figured a way to check it 🙏🏻

if (!activeConnector) {
      disconnect()
    }

[tmm]

Check out 0.3.0-next.17. Would love to look at some code that you have if this is still happening.

[albertpurnama]

dude am I shipping too slow or are you shipping too fast? or both?

sorry for non-discussion reply