2

Since November the 4th - In order for MetaMask to interact with your webpage dapps, you need to implement the windows.ethereum.enable as part of your scripts

I have run through the pet shop tutorial - https://truffleframework.com/tutorials/pet-shop - everything works as expected

but metamask is no longer working - can anyone assist as to how i would implement the code change above into the existing script for the pet shop tutorial

code change is this: enter image description here

Details of the code required are on this link below -

https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8 - To integrate the new window.ethereum.enable() feature

I have 3 js file loading on startup with the webpage for the pet shop dapp - which one should that code go into ?

thanking in advance DubIrl

enter image description here

3

Thanks for bringing this to our attention. This was due to a change in Metamask for security purposes, and there is more discussion in the issue here: https://github.com/trufflesuite/trufflesuite.com/issues/218

The pet shop tutorial code and instructions have been updated to reflect this change, so you should be able to proceed with the tutorial. Just putting this comment here in case anyone else stumbles across this issue.

  • What is the best way to test this now ? should I pull down all the files again from github repo as I can see suttle changes to js and json files - I thought it may have only been the app.js – dubirl Nov 6 '18 at 23:49
1

Honestly, I would dump it in index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Pete's Pet Shop</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-push-2">
          <h1 class="text-center">Pete's Pet Shop</h1>
          <hr/>
          <br/>
        </div>
      </div>

      <div id="petsRow" class="row">
        <!-- PETS LOAD HERE -->
      </div>
    </div>

    <div id="petTemplate" style="display: none;">
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="panel panel-default panel-pet">
          <div class="panel-heading">
            <h3 class="panel-title">Scrappy</h3>
          </div>
          <div class="panel-body">
            <img alt="140x140" data-src="holder.js/140x140" class="img-rounded img-center" style="width: 100%;" src="https://animalso.com/wp-content/uploads/2017/01/Golden-Retriever_6.jpg" data-holder-rendered="true">
            <br/><br/>
            <strong>Breed</strong>: <span class="pet-breed">Golden Retriever</span><br/>
            <strong>Age</strong>: <span class="pet-age">3</span><br/>
            <strong>Location</strong>: <span class="pet-location">Warren, MI</span><br/><br/>
            <button class="btn btn-default btn-adopt" type="button" data-id="0">Adopt</button>
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/web3.min.js"></script>
    <script src="js/truffle-contract.js"></script>
    <script src="js/app.js"></script>

    <script>
    window.addEventListener('load', async () => {
        // Modern dapp browsers...
        if (window.ethereum) {
            window.web3 = new Web3(ethereum);
            try {
                // Request account access if needed
                await ethereum.enable();
                // Acccounts now exposed
                web3.eth.sendTransaction({/* ... */});
            } catch (error) {
                // User denied account access...
            }
        }
        // Legacy dapp browsers...
        else if (window.web3) {
            window.web3 = new Web3(web3.currentProvider);
            // Acccounts always exposed
            web3.eth.sendTransaction({/* ... */});
        }
        // Non-dapp browsers...
        else {
            console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
        }
    })
    </script>

  </body>
</html>

Please let me know if that doesn't work. You can use good old es5 for this.

Just add

    <script>
    window.addEventListener('load', async () => {
        // Modern dapp browsers...
        if (window.ethereum) {
            window.web3 = new Web3(ethereum);
            try {
                // Request account access if needed
                await ethereum.enable();
                // Acccounts now exposed
                web3.eth.sendTransaction({/* ... */});
            } catch (error) {
                // User denied account access...
            }
        }
        // Legacy dapp browsers...
        else if (window.web3) {
            window.web3 = new Web3(web3.currentProvider);
            // Acccounts always exposed
            web3.eth.sendTransaction({/* ... */});
        }
        // Non-dapp browsers...
        else {
            console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
        }
    })
    </script>

somewhere in the index.html file

  • not sure what I am supposed to be seeing here - can you elaborate please – dubirl Nov 6 '18 at 23:51
  • Adding the code to let metamask login near the end, at the bottom of the index.html tag. Also, you can check out the new changes to the pet shop app. – GrandFleet Nov 6 '18 at 23:52
  • Ok will give that a go tommorrow and see - otherwise I think I will pull the whole lot down again from scratch as there was a number of changes - thx – dubirl Nov 7 '18 at 0:19
  • Just of out curiosity how did it go? – GrandFleet Nov 8 '18 at 5:08
  • @ grandfleet - I tried your suggestion of adding the code changes into the index.html but it made no difference. So I rebuilt it again with the code added to the app.js and updated Meta Mask to V 5.0 and it now appears to be working correctly. thanks for the suggestions and assistance no doubt I will have more questions in the coming weeks – dubirl Nov 11 '18 at 23:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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