0

I am building a React App. I built it using a truffle box. The first thing the app does is try and get Web3, I understand that this allows the app to communicate with the blockchain. This works well as long as the user has a browser extension (let's say Metamask) allowing to get web3.

What I would like to know is how can I give access to the app to users that do not have Metamask? I guess that I could re-write a different render without any blockchain-based information for these users, but that is not what I want. I would like to still display information that does not need their signature (basically call view/pure functions). Is this even possible? How do the other apps deal with this?

Thank you

Edit: here is my getweb3 function

import Web3 from "web3";

const getWeb3 = () =>
  new Promise((resolve, reject) => {
    // Wait for loading completion to avoid race conditions with web3 injection timing.
    window.addEventListener("load", async () => {
      // Modern dapp browsers...
      if (window.ethereum) {
        const web3 = new Web3(window.ethereum);
        try {
          // Request account access if needed
          await window.ethereum.enable();
          // Acccounts now exposed
          resolve(web3);
        } catch (error) {
          reject(error);
        }
      }
      // Legacy dapp browsers...
      else if (window.web3) {
        // Use Mist/MetaMask's provider.
        const web3 = window.web3;
        console.log("Injected web3 detected.");
        resolve(web3);
      }
      // Fallback to localhost; use dev console port by default...
      else {
        const provider = new Web3.providers.HttpProvider(
          "http://127.0.0.1:8545"
        );
        const web3 = new Web3(provider);
        console.log("No web3 instance injected, using Local web3.");
        resolve(web3);
      }
    });
  });

export default getWeb3;

1 Answer 1

2

To obtain blockchain information, it must be connected to a node. The role that connects to the node is Provider. Even if there is no Metamask, the Provider must exist. Local Provider or Infura Providier can be set.

The way to call view or pure function without signature is to use web3 call. Refer to the link below for using web3 call.

https://web3js.readthedocs.io/en/v1.2.11/web3-eth-contract.html#methods-mymethod-call

2
  • Thank you. When you say "Local Provider or Infura Providier can be set". is that what is supposed to happen in my getweb3 function above (under the comment // Fallback to localhost; use dev console port by default...)? Because if I launch the app that does not have metamask it just stays stuck on loading web3. Am I supposed to add anything to the getweb3 function?
    – Thomas
    Commented Feb 20, 2021 at 14:34
  • You don't need getweb3. You can set it yourself as follows. const provider = new Web3.providers.HttpProvider( "127.0.0.1:8545" ); const web3 = new Web3(provider);
    – smarteasy
    Commented Feb 20, 2021 at 14:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.