Allow Dapp to initiate connection to Web3

[jklepatch]

Currently, when Drizzle is loaded, it automatically tries to connect to Web3.

What we should do is allow Dapp developer to specify when Drizzle should try to connect to Web3.

More specifically, when we create the drizzle object, it doesn't kickstart the connection process. Instead, it waits for a start() method to be executed.

[cds-amal]

This is definitely a better UX @jklepatch. Let's spec it out.

[DiscRisknBisque]

For optimal UX we could consider a read-only connection as the default so the dApp UI will populate, assuming it's only calls.

Take Ethlance for example: ideally users could view job postings without having to connect a wallet. Then, only if they want to actually bid on or post a job (make a state change), is wallet access requested.

[cds-amal]

The motivation for this issue was the UX interruption caused by automatically connecting to the wallet. @DiscRiskandBisque's suggestion solves this and allows for content to be read from the blockchain which may be necessary to present a view to the client.

[jklepatch]

Here is my proposal, taking @DiscRiskandBisque suggestion into consideration:

1. Let Drizzle initialize automatically when Drizzle is instantiated
2. Remove the call to enable() in the DRIZZLE_INITIALIZING saga
3. Replace the single drizzle status ready to 2 statuses: [DRIZZLE_READ_READY, DRIZZLE_WRITE_READY]. Any attempt to send a transaction before we have DRIZZLE_WRITE_READY will throw
4. Add a method askWalletWriteAccess() (not super happy of the verbose name :( any shorter ideas?) connected to a saga that calls the window.ethereum.enable() method ONLY if it exist

The workflow will be like this:

...
const drizzle = new Drizzle();
// Can do read-only operations
...
...
//Once user asks for write-level operation:
try {
  `await drizzle.askWalletWriteAccess()`
   
} catch(e) {
  //User refused access :(
}
//User granted access, we can allow transactions, yeah!

[DiscRisknBisque]

LGTM @jklepatch thank you!

Potential method names: connectWallet(), requestWallet().

[alanarvelo]

Hi @jklepatch @cds-amal @DiscRiskandBisque,

Thanks for the above discussion and plan for this feature. I made some progress stopping the enable() with a flag passed via drizzleOptions.web3, see it in this PR.

However, I am not sure how to allow read-only access to contracts when web3 is undefined. Web3 is used to get the networkId and accounts, see below the initializeDrizzle function from the drizzleStatusSaga.js file:

if (web3) {
      const networkId = yield call(getNetworkId, { web3 })

      // Check whether network is allowed
      const networkWhitelist = options.networkWhitelist
      if (networkWhitelist.length &&
          networkId !== NETWORK_IDS.ganache &&
          !networkWhitelist.includes(networkId)) {
        yield put({ type: NETWORK_MISMATCH, networkId })
      } else {
        // Get initial accounts list and balances.
        yield call(getAccounts, { web3 })
        yield call(getAccountBalances, { web3 })

The networkId is needed to know which deployed address to use for each contract (in the case a contract is deployed in various networks) and the accounts are needed to be the from or sender of the cacheCall()s. Any suggestions on how to go about this. My apologies if I am missing something.

[SalahAdDin]

@alanarvelo How is it going on?

[bitfede]

Very, very horrible UX the fact that as soon as drizzle loads the metamask popup comes up and asks to connect... Users should be able to click a "login" or "connect" button which then makes drizzle connect to metamask.

Anything has been done for this? I really cannot use Drizzle if this problem persists :(

[PXLFuSSeL]

To fetch Data from the blockchain, you need a web3 Connection, so the only way to implement this, is to Stop drizzle initialize web3 Connection, even i think the whole drizzle initialize, and when Data is need to be fetched from the Network Just Show a Button with a hint, that "You now need to Connect" or Something Like that.
@alanarvelo
Please correct me If am am wrong