Search code examples
javascriptbrowserfrontendcontract

How Can Connect Smart Contract In All Browsers?

I create Front End Web Page For Ether Smart Contract. I before Used Web3 Library And Meta Mask. Now My Web Page is Work. But When I Upload Site On Host For Using Others, When I Test My Web Page In Other Systems And Other Browsers That Don't Used/Installed Meta Mask Extensions, I'm Getting An Error. Please Some One Help Me How Do I Connect A Web Page To A Contract?

I Before Used This Code For Connecting :

     <script >
            if (typeof window.ethereum !== 'undefined') 
            {
                console.log('MetaMask is installed!');
            }else{
                console.log('MetaMask not installed!');
                alert("Please install Metamsk wallet first, then try again");
                 }                     
            const accounts = ethereum.request({ method: 'eth_requestAccounts' });
            const account = accounts[0];
            const showAccount = document.querySelector('.showAccount');
                

            var contract;
            const accounts = ethereum.request({ method: 'eth_requestAccounts' });
            const account = accountsH[0];
            const showAccount = document.querySelector('.showAccount');
                web3 = new Web3(web3.currentProvider);
                var address = "0x6246.../* My Contract Address */...5E7a";
                var abi =[/* My ABI */];
                        contract = new web3.eth.Contract(abi, address);
     </script>

And It Work. But In Other Browsers That Meta Mask Is Inactive Or Not Installed, I See Error. I Use Html And Java Scripts For Front End Programming. enter image description here

Solution

  • I found the answers to my questions. I have to use infura

    check this page

    and at first create project at site. and get ID

    use this code

    web3 = new Web3(new Web3.providers.HttpProvider("https://ropsten.infura.io/v3/3c6/*Your Own ID*/01753"));