More hooks

[21e8]

Is your feature request related to a problem? Please describe. It would be nice to have hooks with getters for the most common things like balances and whatever else the connection object allows. This is inspired by the wagmi package

Describe the solution you'd like Actually I am willing to implement these myself, I have some code ready to go, I just need instructions on how to build so I can test. (typescript dependency seems to be absent from the react package) EDIT: I got them to build. See https://github.com/anza-xyz/wallet-adapter/pull/997 I needed to disable a test and add typescript to the dependencies to get it to build (I haven't commited those changes as I probably am just too dumb to build right)

Also would love to have a discussion on whether these hooks should come with this package (I think so) or separately.

Describe alternatives you've considered

Additional context As mentioned it would be nice if someone could point me to some instructions on how to best build the react package.

[glitch-txs]

Wagmi also wraps low level functions with React Query which can be pretty handy for caching

[21e8]

I wanted to avoid needing React Query as a dependency so I am rebuilding the most basic things about it. And I guess that's what's up for discussion here, whether we do something basic and integrate it with the base package or do something fancy in another package:

https://github.com/anza-xyz/wallet-adapter/pull/997

[glitch-txs]

We are working on something similar to the Wallet Adapter at WalletConnect. If it's an external package it would be great if it could support both

[mcintyre94]

Thanks for the suggestion, and for your work on implementing some of it. However, I don't think we should add this to the wallet-adapter library.

Wallet-adapter aims to be un-opinionated about how an app is built, while Wagmi as mentioned wraps Tanstack Query and builds these features on top of it. I don't think we can build these in a useful way without wrapping something like Tanstack Query, and I don't think we should do that in wallet-adapter.

Apps that use some data fetching library (React/Tanstack Query, or anything else) will want it to be used for this - because they'll have their own configuration/caching logic etc that makes sense for them. So I wouldn't want to implement this with its own data fetching, because that makes things harder for apps.

These features also don't really fit well with wallet-adapter IMO. For example, useBalance in Wagmi is for an arbitrary address, not the connected wallet. That makes it more useful, but it also means there's no reason to integrate it with the library that knows about connected wallets. It could be built on top of web3.js directly.

IMO the best way to build this would be as a community maintained package that builds on top of web3.js tech preview (mostly because it's much lighter weight and less opinionated) + Tanstack Query. I'd definitely be keen to see what that could look like!

[mcintyre94]

I've been doing some experimenting with how a web3js-based library could work and I think I've come up with a pretty cool pattern! You can use a JS Proxy (this is how the new web3js RPC methods work) and some typescript trickery to turn every RPC method into a hook. This is really nice because it means your bundle is tiny, you don't have to have actual implementations of a wrapper of every function. The new web3js RPC is also extensible, so if eg Helius publish types for it then you'd automatically get hooks for all of them too.

Example replit here: https://replit.com/@mcintyre94/SolanaHooks?v=1 (all the magic is 50ish lines in hooks.ts)

Some notes:

• Everything is typed, so Hooks.useGetAccountInfo( will show you the params that RPC method expects, and return you a useQuery response
• You want to use eg Hooks.useGetBalance rather than hooks.useGetBalance so the react hooks linter picks them up correctly
• I add queryOptions as an optional last param on each function. So you can do anything you can do with useQuery

Ultimately I don't think we as Anza would want to publish this because it's more opinionated than we like to be about how apps are built. You should only use this createReactQueryHooks version if you're using react-query in your app.

But if you'd be interested in running with it, that'd be awesome! I'd be happy to help out, and the Replit code is Apache 2.0 licensed (same as this repo).