Turn Off Drizzle MetaMask Detection

[hackingbeauty]

When I try to use Drizzle, the MetaMask "connect" modal automatically gets displayed when my users first come to my dApp.

I don't like this UX and I'd like to have full control regarding when the MetaMask "connect" modal appears.

How do I turn this off in Drizzle?

[jklepatch]

I dont know how to turn it off directly, but you could have a parent component outside of Drizzle provider that welcome your user, and when they click something then the child components, wrapped with DrizzleProvider will load and trigger the modal

[OnlyOneJMJQ]

This occurs because account fetching triggers after web3 is connected. We could separate these to allow greater control over when the popup appears.

@hackingbeauty Can you describe or link to the dapp for us? I'm guessing this is a situation where users land on a marketing page or something where you wouldn't want the popup immediately?

[hackingbeauty]

Hi Josh,

I haven't deployed my dapp yet, but I can't use drizzle because of this issue. It's not a situation where there is a marketing page. I just don't want the MetaMask modal to pop up when a user first comes to my dapp. That is very obtrusive UX...

On Fri, Mar 8, 2019 at 8:20 AM Josh Quintal notifications@github.com wrote:

This occurs because account fetching triggers after web3 is connected. We could separate these to allow greater control over when the popup appears.

@hackingbeauty https://github.com/hackingbeauty Can you describe or link to the dapp for us? I'm guessing this is a situation where users land on a marketing page or something where you wouldn't want the popup immediately?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/trufflesuite/drizzle/issues/188#issuecomment-470986565, or mute the thread https://github.com/notifications/unsubscribe-auth/AABOn6dDnjSx8ZcbxEIO22ZD279kU04Cks5vUo3lgaJpZM4bOwfa .

-- Mark M. Muskardin

[cds-amal]

This EIP might be relevant to the discussion. https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[adrianmcli]

We should provide a way to opt-out of the dialog and allow dapp developers to call window.ethereum.enable() when they feel like it.

[tranchien2002]

As i know, when you implement drizzle package for your project, u will need to create a new instance of Drizzle ( new Drizzle(params...) ). After call this constructor, metamask is opened automatically. => Action opening metamask has to be called in constructor of Drizzle

If you dived into drizzle's source code, you will see an action dispatch: 'DRIZZLE_INITIALIZING'. In drizzleStatusSaga.js, u can find a generator function called drizzleStatusSaga, it will call initializeDrizzle after DRIZZLE_INITIALIZING was dispatched completely (u can search takeLatest in redux-saga to know) . In initializeDrizzle, initializeWeb3 will be called (this is a function that we need to pay attention) . Finally, in initializeWeb3 u can know how to web3 was initialized, firstly, this function check current web3 (if (options && options.web3 && options.web3.customProvider)) before calling ethereum.enable . yield call(ethereum.enable) will open metamask. Hope that my answer make u feel better

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been closed, but can be re-opened if further comments indicate that the problem persists. Feel free to tag maintainers if there is no reply to further comments.

[JasoonS]

I've created a little component that can switch which web3 provider is being used on the fly. I use this as the custom web3 provider, and then switch it/call enabled etc. as I choose. Maybe this can be useful for someone: https://github.com/wild-cards/experimental-ui/blob/master/src/helpers/web3/web3ProvideSwitcher.js

[cds-amal]

Thanks for sharing this @JasoonS !

[alanarvelo]

I also found myself in a position where I wanted to delay the MetaMask pop-up until users clicked a button. There should be a way to implement @adrianmcli suggestion by passing a flag in drizzleOptions to prevent initializeWeb3 from being called and providing developers with a function that would trigger initializeWeb3.

I am probably oversimplifying it. Thoughts?

[adrianmcli]

@alanarvelo I think that's a good workaround. Happy to see a PR if you have the time.

[bitfede]

Any more updates on this issue? Do we have a proper way to delay metamask activation until a user clicks a "Connect" or "login" button?

[swkim109]

@bitfede No updates yet. But some alternatives exist since opened this issue. Drizzle is combination of react, react-redux, redux-saga. Maybe you can add web3Modal with them.

[bitfede]

Thanks for your reply @swkim109 What I did for now is to have a different root-level component that render depending if someone clicked login or not (state tracks if loggedin is true or false), this is the component that wraps the app after the user clicks "login":

//this component is a web3 wrapper for the app, when user is logged in with metamask
import { drizzleReactHooks } from '@drizzle/react-plugin';
import { Drizzle } from '@drizzle/store';
import drizzleOptions from './drizzleOptions';

const Web3Container = (props) => {

    //connect to metamask
    const drizzle = new Drizzle(drizzleOptions);

    return (
        <drizzleReactHooks.DrizzleProvider drizzle={drizzle}>
        {props.children}
        </drizzleReactHooks.DrizzleProvider>
    )
}

export default Web3Container;

If the user is logged out the app renders without this component wrapping it.

Or should I switch to https://github.com/NoahZinsmeister/web3-react/ ? Does this other framework make it easier to implement login/logout?

[swkim109]

It seems like many people use web3-react. I have heard of another dapp framework: https://medium.com/ethworks/introducing-usedapp-framework-for-rapid-dapp-development-4959361f242a https://github.com/EthWorks/useDApp

[bitfede]

Hey @swkim109 good to see you again, I ended up following this example https://github.com/mirshko/next-web3-boilerplate where mr @mirshko did a great job implementing a "Connect with metamask" button, and then the web3 react hook's variables can be used to check at render time if the user is connected or not to render different UI components.

Thank you for sharing the article!!!! useDapp seems super user friendly and with good docs!

[bitfede]

I found useDapp to be the best and easiest framework as of now. Discard Drizzle until their dev team decides to wake up, and try this out instead! https://usedapp.readthedocs.io/en/latest/getting-started.html#example . These guys helped me with a bug fix over the weekend in 2 days, totally a more professional framework and developer team to work with.

AND there is a login/logout with metamask feature which can be implemented super easy

[swkim109]

@bitfede I love Drizzle anyway. 😂

[charles2k16]

So this issue was not solved. I have to neglect using Drizzle all together