[Feature]: Ability to inject Connect Modal in dom without modal

[omarsy]

Is your request related to a problem?

Actually when we want to click connect to a wallet a modal is opened with Connection Component

What I want is ability to inject the Connection Component in my dom element without a modal behaviour

Feature Description

I think in the

export interface InitOptions {
    /**
     * Wallet modules to be initialized and added to wallet selection modal
     */
    wallets: WalletInit[];
    /**
     * The chains that your app works with
     */
    chains: Chain[] | ChainWithDecimalId[];
    /**
     * Additional metadata about your app to be displayed in the Onboard UI
     */
    appMetadata?: AppMetadata;
    /**
     * Define custom copy for the 'en' locale or add locales to i18n your app
     */
    i18n?: i18nOptions;
    /**
     * Customize the connect modal
     */
    connect?: ConnectModalOptions;
    /**
     * Customize the account center UI
     */
    accountCenter?: AccountCenterOptions;
    /**
     * Opt in to Blocknative value add services (transaction updates) by providing
     * your Blocknative API key, head to https://explorer.blocknative.com/account
     */
    apiKey?: string;
    /**
     * Transaction notification options
     */
    notify?: Partial<NotifyOptions> | Partial<Notify>;
    /** Gas module */
    gas?: typeof gas;
    /**
     * Object mapping for W3O components with the key being the DOM element to mount
     * the component to, this defines the DOM container element for svelte to attach the component
     */
    containerElements?: Partial<ContainerElements>;
} 

in

type ConnectModalOptions = {
    showSidebar?: boolean;
};

we should have a something like this

type ConnectComponentOptions = {
    modal?: boolean;
    showSidebar?: boolean;
};

Alternative Solutions

No response

Anything else?

No response

[Adamj1232]

@omarsy thank you for submitting. For clarity, are you wanting to append the connect modal to a custom dom element that you control?

[omarsy]

@omarsy thank you for submitting. For clarity, are you wanting to append the connect modal to a custom dom element that you control? Yes without the position fixed in the "modal"

[Adamj1232]

@omarsy got it. We do something similar with the Account Center where we allow a containerElement(html element ID) to be passed as a property and then we append the Account Center component to that element giving control over display and positioning. Would this approach fit your request?

[omarsy]

@Adamj1232 Would this approach fit your request? Yes that's what I want

[omarsy]

@Adamj1232 Do you know when I can have this feature, Sorry for asking just to know if i am going to develop a workaround or not ?

[Adamj1232]

@omarsy with holidays and the current backlog I imagine it will be a couple weeks out. If you would like to create a PR feel free as that could get support in more quickly.

Interesting feature, I also need that too. Looking forward to an updated

Definitely a must when you want to create a login landing page. +1

[Adamj1232]

PR to address this issue: #1452
This feature will be available with the latest alpha versions packages of core(2.13.1-alpha.1), react(2.5.5-alpha.1) & vue(2.4.5-alpha.1)
A public release we be available shortly after a live round of testing. Thanks again for commenting and using Web3-Onboard!

[Adamj1232]

This has been released with the latest core/react/vue along with HW wallet packages if your project supports hardware wallets on mobile. Thanks for all the comments on this new feature!