Access to edit and use the rainbow avatar

[peterferguson]

A few things I think would improve the consistency of the avatar experience:

• Exposing the Avatar component
  • Provided this is exposed, the (awesome) Rainbow avatar picker could be integrated
• Exposing the imageUrl parameter of the ConnectButton so that a sites avatar usage can be consistent
• Allowing for an override of the Avatar component, it is not as simple as creating a custom ConnectButton since the avatar is also used in the modals

[peduarte]

Hey, thanks kicking this off!

I'm curious to understand a bit more about your use case. Since rainbowkit uses wagmi, if you wanted you could use its useEnsAvatar hook and render it yourself.

Or is there some specific functionality of the Avatar that you think it's too much to re-create?

Provided this is exposed, the (awesome) Rainbow avatar picker could be integrated
Open to chatting about this, but I think this may be beyond the scope of Rainbowkit

... sites avatar usage can be consistent
The avatar that is displayed is based on the ENS avatar text record of the connected wallet - not the site itself. I believe this is what you meant though, just clarifying

Looking forward to hearing other thoughts about this 🚀

[peterferguson]

Hey, thanks for building out RainbowKit & engaging with my idea 👍

I'm curious to understand a bit more about your use case.

My main use case is for chains that do not support ENS (e.g. Avalanche) or simply for users who do not have their ENS pfp set.

Or is there some specific functionality of the Avatar that you think it's too much to re-create?

It is not that I think it is too difficult to recreate. It is more that exposing the Avatar allows developers to have an identity management solution out of the gate (for all users not just those with ENS).

Think of it as with social logins, they usually provide a displayUrl regardless of whether or not a user has set a pfp on that service. Since RainbowKit is for any EVM compatible chain, IMO it makes sense to expose the Avatar component in a similar vein to displayUrl

Dapps integrating RainbowKit on these chains have the following options to integrate avatars for their users:

• Create their own custom ConnectButton and their own Avatar components
  • Basically back down the rabbit hole of making your own wallet management UI minus the modals
  • Admittedly something most are going to end up doing, but having the initial option to kick off development with the Avatar component already being used just not exposed would definitely make the DX better IMO.
• Retain the standard (awesome looking) ConnectButton and use accountStatus='address' losing the nicety of the integrated Avatar. Then creating their own.
• (My chosen method so far) Patch RainbowKit to expose the Avatar and use throughout the application to make the users' avatar experience consistent beyond the ConnectButton component.

... I think this may be beyond the scope of Rainbowkit

As (what will no doubt be) the default wallet management solution for web3, I think that identity management should be included in some form for all users. Including those who do not have access to or are priced out of ENS.

P.s. Sorry for the rant 😆

[serhanguney]

Can I ask for some help in understanding this please?

I'm not sure I get it right. As far as I understand there must be a purchased ens name for useEnsAvatar hook to be used. Rainbow kit displays random avatars every time a wallet is connected and there seems to be no way of accessing that avatar. I went ahead and implemented a custom avatar but as @peterferguson described I'm running into inconsistencies when the user opens the account modal and sees a Rainbow kit's avatar there.

Is there no way to keep avatars consistent ?

[magiziz]

You would need to purchase an ENS name and upload an avatar in order for it to show in RainbowKit. Avatars right now are randomly generated, but you can always create your own ConnectButton if you'd like to have custom avatar. Feel free to check the docs here.

[magiziz]

For the account modal that's not possible unfortunately :/