Can I retrieve data from smart contract to my local webpage without using metamask?

by Fariha Abbasi   Last Updated May 22, 2020 22:28 PM

I am creating a DApp where I want to show the public variable's information from the contract. I want my users who don't have metamask to see this information also. Is there a way I can do that?

If I use the DApp without using metamask then it returns that 'web3' is not defined.

Here is my code snippet of app.js when page loads [throws error at line 3]:

$(document).ready(function() {
// Ropsten:
var contractAddress = "0x208122Dc624EF89fD1960B060775439494FAa9ab";

var version = web3.version; // throws error at this line.
console.log(version);
// Modern dapp browsers...
if (window.ethereum) {
    window.web3 = new Web3(ethereum);
    try {
        // Request account access if needed
        ethereum.enable();
    } catch (error) {
        // User denied account access...
        console.log(error);
    }
}
// Legacy dapp browsers...
else if (window.web3) {
    window.web3 = new Web3(web3.currentProvider);
}
// Non-dapp browsers...
else {
    console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
}

window.ethereum.on('accountsChanged', function(accounts) {
    updateDetails(accounts[0]);

});

Contract = new web3.eth.Contract(abi, contractAddress);
console.log(Contract);
});

Error:

Uncaught ReferenceError: web3 is not defined at HTMLDocument. (app.js:6) at i (jquery-2.2.4.min.js:2) at Object.fireWith [as resolveWith] (jquery-2.2.4.min.js:2) at Function.ready (jquery-2.2.4.min.js:2) at HTMLDocument.J (jquery-2.2.4.min.js:2)



Answers 1


In the case you like to use web3 without Metamask you have to include web3.js for the browser and connect with a provider (here ganache on localhost):

    <!DOCTYPE html>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <html>
    <head>
        <title>Using web3 API with MetaMask</title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
        <script>
            window.addEventListener('load', function () {
                if (!window.ethereum) {
                    window.web3 = new Web3(new Web3.providers.HttpProvider('http://127.0.0.1:8545'));
                    window.web3.eth.getAccounts(function (err, acc) {
                        if (err != null) {
                            self.setStatus("There was an error fetching your accounts");
                            return;
                        }
                        if (acc.length > 0) {
                            console.log(acc);
                        }
                    });
                }
            });
        </script>
    </head>
    </html>

Expected console output of browser is:

enter image description here

msp
msp
January 01, 2020 19:12 PM

Related Questions




Access to a Dapp on a private network from mobile

Updated April 27, 2018 09:28 AM


Is it possible to set my geth web3 API version

Updated May 16, 2018 05:28 AM