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

2 Answers 2

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.

1
  • 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, 2018 at 23:49
2

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

5
  • not sure what I am supposed to be seeing here - can you elaborate please
    – dubirl
    Nov 6, 2018 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, 2018 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, 2018 at 0:19
  • Just of out curiosity how did it go?
    – GrandFleet
    Nov 8, 2018 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, 2018 at 23:19

Your Answer

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

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