Search code examples
javascriptsmartcontractsweb3jsmetamask

I have a problem with Web 3 capability and Meta Mask In Front End

I have designed a user interface on the web page(in html/java script) to display my smart contract values.

When other users access the web page through other browsers, they will not be able to receive Web 3 services due to the lack of a digital wallet. Because they did not installed the wallet on their web Browser .How can I put Web 3 services and capabilities in my web page without the user having to install a wallet?

The codes I used before are shown below:

this.web3 = new Web3(this.provider);
 //***********
const web3 = new Web3(new Web3.providers.HttpProvider(ethereumUrl))
  //****************
new Web3.providers.HttpProvider('https://ropsten.infura.io/' + yourInfuraEndPointKey)
);
//*******************
const web3 = new Web3(provider);
//******
const web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'))

and a lot of code tested. I can't find any answer here. please one help me. and this is my last Web3 Connection Code:

/*this codes in head of web page ant totali it work*/
/*but i want to work in browser that dont install metamask*/
<script src="https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js"></script>
    
<script src="https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/web3@latest/dist/web3.min.js"></script>

<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 contractH;
const accountsH = ethereum.request({ method: 'eth_requestAccounts' });
const accountH = accountsH[0];
const showAccountH = document.querySelector('.showAccount');
web333 = new Web3(web3.currentProvider); 
//window.web333 = new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/<APIKEY>"));
var addressH = "0x624/*My Contract Address*/4135E7a";
var abiH =[/*My ABI*/];
contractH = new web333.eth.Contract(abiH, addressH); 


    /*and the other code*/  
      
      
      
</script>

and when I Run Web Page in Other Browser I see This Error:enter image description here

and I Before Check and Test detail about this pages : this page information

and this page

and this page

and this page

and this page

and every pages that in Stack overflow and other sites

Solution

  • I Have to Use Infura:

    web3 = new Web3(new Web3.providers.HttpProvider("https://ropsten.infura.io/v3/3c68e/*your ID*/301753"));

    and check this page and this is infura web page for creating Project at the first time