Request: add ConnectKitOptions.{hideWhatIsAWallet,beforeConnectorsElement,afterConnectorsElement}

[ryanberckmans]

Hi, for mass-market users, I need an email input field directly in the wallet selection modal to let the user login with an embedded wallet as one of the "connectors".

Here is what my mobile modal looks like today:

Here's what I would like it to look like:

I don't need connectkit to support logging in with an email. Instead, I only need minimal help to plug in my own custom components as modal content:

I believe this may be accomplished with three new ConnectKitOptions:

const connectKitOptions: ConnectKitOptions = {
  // New option to hide "What's a wallet?":
  hideWhatIsAWallet: true, 
  
  // New option of element to display before connectors.
  // Should be in a max-width, auto-height container div
  // with no separators or visual indicators-- clients can
  // render separators as needed:
  beforeConnectorsElement: <EmailLogin/>,

  // New option, twin of beforeConnect, but displayed after
  // the list of connectors instead of before. Unused in my
  // example here:
  // afterConnectorsElement?: JSX.Element;
};

Note that in my <EmailLogin/> component, I'll use useModal to close the modal programmatically when a user submits their email for login.

[lochie]

Hey @ryanberckmans, the hideWhatIsAWallet flag is a good idea, but the beforeConnectorsElement is too niche of a feature for us to support, but since we're open-source you're always welcome to fork the repo and create your own variation of ConnectKit.

To be more helpful, I'm aware that there is a forked version that supports MagicLink, though we haven't audited that repo's changes so DYOR.

And I believe there is a forked version that supports custom email login, though I don't recall where to find that one.

[ryanberckmans]

Hey @lochie, thanks for your response. Ok, if you guys are able to add the hideWhatIsAWallet flag, I'll eventually build beforeConnectorsElement and, at that point, open a PR with some screenshots and then you guys can decide if you'd like to merge the PR or not.