feat: add ConnectWalletButton component

[ByteAtATime]

Description

This component makes it easier to have a button that does something that requires the user to connect their wallet. If the wallet is not connected, instead of rendering the children, it instead opens the connection modal. I find that this is a surprisingly common use case.

I would consider this a "simple" PR. If it is accepted, I'm down to write the docs for it too.

Additional Information

• I have read the contributing docs (if this is your first contribution)
• This is not a duplicate of any existing pull request

Your ENS/address: byteatatime.eth

[damianmarti]

Thanks for the contribution @ByteAtATime !!

I tested the component and it's working well. The component should be exported in index.tsx from components/scaffold-eth too.

However, I'm not sure if this component is needed. You can get the same result by checking if the user is connected and using the RainbowKitCustomConnectButton. Maybe the RainbowKitCustomConnectButton component can receive an optional children component and show this if the user is already connected instead of the current fixed balance and address info.

I think that is better to open an issue to discuss it with the team and come up with an agreed solution.

[technophile-04]

Not sure if the api makes sense

<ConnectWalletButton className="btn btn-primary" connectText="connect to start" onClick={handleMintNFT}>
  Mint NFT
</ConnectWalletButton>

I have to attach minting logic to connect button(the component name)?

Also lets create discussion first thanks 🙌