[Feature Request]: Custom Account Modal

[webthethird]

Similar to <ConnectButton.Custom>, I'd like a way to tell openAccountModal to open a custom AccountModal.

I am working on an app for farmers and foodies, using Scaffold-ETH 2 plus Web3Auth to make the the on-boarding process feel less like a crypto app. I was able to use the custom connect button to display the user's name and profile pic (instead of their ETH address and a Blockie/ENS avatar, as seen in most SE-2 apps), but when the user clicks the button post-login, the account modal is still pretty crypto-ish, with just an address, balance and Blockie). I realize the alternative is to just make my own account modal and not use openAccountModal, but a custom AccountModal seems like it would be a nice feature for RainbowKit in general, and I could still use the built-in "Copy Address" and "Disconnect" buttons.

[DanielSinclair]

@webthethird What would you like to see in a custom account modal? Can you describe an example or show a mockup and share what the expected API could look like? We likely couldn't support arbitrary UI injection, but maybe could expose props to hide/show elements. In most cases, building custom UI will better serve your needs. RainbowKit shares states with Wagmi, so you could recreate the copy address and disconnect behavior with these hooks:

const { address } = useAccount()
const { disconnect } = useDisconnect()

[webthethird]

I think in my case a custom UI will be best, as you said, so thank you for the tips.

In any case, here are some ideas off the top of my head that could be useful:

• A place for a custom logo
• Custom header and secondary description text
• Replacing the Blockie/ENS avatar with a different user image
• An option to display some other "user name" in place of the address/ENS name
• An option to display the balance in another currency, i.e., USD
• An option to display the balance of some other token as well, i.e., the token associated with the app and//or USDC
• A "view my account on Etherscan" button

Perhaps the API would look something like this:

openAccountModal: ({
  logo?: string,
  userImage?: string,
  headerText?: string,
  secondaryText?: string,
  username?: string,
  displayBalanceInUSD?: bool,
  displayTokenBalances?: Address[],
  displayEtherscanButton?: bool,
}) => void

[DanielSinclair]

Thank you! We'll start to have a look at some of these options

[mubarakone]

I think in my case a custom UI will be best, as you said, so thank you for the tips.

In any case, here are some ideas off the top of my head that could be useful:

• A place for a custom logo
• Custom header and secondary description text
• Replacing the Blockie/ENS avatar with a different user image
• An option to display some other "user name" in place of the address/ENS name
• An option to display the balance in another currency, i.e., USD
• An option to display the balance of some other token as well, i.e., the token associated with the app and//or USDC
• A "view my account on Etherscan" button

Perhaps the API would look something like this:

openAccountModal: ({
  logo?: string,
  userImage?: string,
  headerText?: string,
  secondaryText?: string,
  username?: string,
  displayBalanceInUSD?: bool,
  displayTokenBalances?: Address[],
  displayEtherscanButton?: bool,
}) => void

That is a great start

[mubarakone]

I was having the same idea, we could provide more options for UI components after the user connects. I am using a zerodev/wagmi/rainbowkit account abstraction solution to onboard more casual users who aren't crypto native. I would like to see more features that will help non-crypto users navigate their wallets.

To add to the list of possible features...
A fiat to crypto onboard option/integration. Allow users to purchase tokens with their credit/debit cards and transfer them directly to the wallet address they connected with (Coinbase Pay SDK, etc...).

[shreyanshxyz]

Hello, are there any updates on this? For creating a custom modal, I looked through the documentation but sadly couldn't find anything convenient.

[DanielSinclair]

@shreyanshxyz Not possible yet. What kind of features or improvements are you hoping to see in the Account Modal? We are revisiting this very soon and may be able to accommodate or include it for free on our end.

[shreyanshxyz]

Amazing! Glad to hear that.

Something similar to what we have in <ConnectButton.Custom />.
Like if I have to list down some feature's which I expect to have in a customizable modal, just off the top of my head, they'd be:

• Customization of the header of the modal.
• Customization of the loading page while the wallet connection is in progress.
• Customization of the wallet connect buttons (like having custom logos for a wallet i.e. Metamask/Bitget/Phantom/etc..
• Option to have a custom logo while connecting the wallet.

Overall something similar to the modal which pops up on the RainbowKit website when connecting a wallet but with the feature to have everything customizable, from a UI point of view.