No confirmation dialogue popups appear with Dapps

[mesqueeb]

1. Expected Behavior
   I have a problem with testing dapps on local networks. I tried the pet shop tutorial of Truffle and several other tutorials building dapps together.
   There should be a "confirmation dialogue popup" upon calling contract functions that make a transaction.

2. Actual Behavior
   Only once it worked with a confirmation popup from Metamask. But ever since then, probably after resetting Ganache even just once, I don't get any confirmation dialogue popups anymore to confirm a transaction.
   e.g. with the pet-shop it goes straight to "success". In Ganache I can see a contract call, but it has "value 0".

3. Browser Used
   Chrome 64.0.3282.140

4. Operating System Used
   macOS 10.13.3

5. I checked/tried:

• Ganache server, port & metamask. All in order.
• Metamask account address all correct and in sync with Ganache.
• I get no console log errors.
• No transactions are being logged in MetaMask but are logged in the Ganache transaction history.
• I can send ether from one account to the other through the meta mask extension without problem.
• When I send ether from one account to the other through meta mask the transaction does show up.
• Tried switching to the main net and then back to my private network and reload the page
• Tried disabling the MetaMask extension and re-enable it
• Tried switching to the main net, then back to my private network and then restarting my browser entirely

Whatever I do, I cannot get any MetaMask popup anymore...
I first thought issue #2393 was related, however after much testing, events seem to work fine for me.

• One thing that might be related to this issue is if I do in console:

web3.eth.getCoinbase(function (err, account) {
  console.log(account)
})

I should see the account that's selected in MetaMask. However, this always stays on the top account in Ganache, and not the selected account in MetaMask. This creates a problem that when I make any transaction in my Dapp, this is always made with the top account in Ganache, and not the selected account in MetaMask.

I have a fairly simple App.js build for e.g. the pet-shop:

    App = {
      web3Provider: null,
      contracts: {},
    
      init: function() {
        // Load pets.
        $.getJSON('../pets.json', function(data) {
          var petsRow = $('#petsRow');
          var petTemplate = $('#petTemplate');
    
          for (i = 0; i < data.length; i ++) {
            petTemplate.find('.panel-title').text(data[i].name);
            petTemplate.find('img').attr('src', data[i].picture);
            petTemplate.find('.pet-breed').text(data[i].breed);
            petTemplate.find('.pet-age').text(data[i].age);
            petTemplate.find('.pet-location').text(data[i].location);
            petTemplate.find('.btn-adopt').attr('data-id', data[i].id);
    
            petsRow.append(petTemplate.html());
          }
        });
    
        return App.initWeb3();
      },
    
      initWeb3: function() {
        // Is there an injected web3 instance?
        if (typeof web3 !== 'undefined') {
          App.web3Provider = web3.currentProvider;
        } else {
          // If no injected web3 instance is detected, fall back to Ganache
          App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
        }
        web3 = new Web3(App.web3Provider);
    
        return App.initContract();
      },
    
      initContract: function() {
        $.getJSON('Adoption.json', function(data) {
          // Get the necessary contract artifact file and instantiate it with truffle-contract
          var AdoptionArtifact = data;
          App.contracts.Adoption = TruffleContract(AdoptionArtifact);
    
          // Set the provider for our contract
          App.contracts.Adoption.setProvider(App.web3Provider);
    
          // Use our contract to retrieve and mark the adopted pets
          return App.markAdopted();
        });
        return App.bindEvents();
      },
    
      bindEvents: function() {
        $(document).on('click', '.btn-adopt', App.handleAdopt);
      },
    
      markAdopted: function(adopters, account) {
        var adoptionInstance;
    
        App.contracts.Adoption.deployed().then(function(instance) {
          adoptionInstance = instance;
    
          return adoptionInstance.getAdopters.call();
        }).then(function(adopters) {
          for (i = 0; i < adopters.length; i++) {
            if (adopters[i] !== '0x0000000000000000000000000000000000000000') {
              $('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true);
            }
          }
        }).catch(function(err) {
          console.log(err.message);
        });
      },
    
      handleAdopt: function(event) {
        event.preventDefault();
    
        var petId = parseInt($(event.target).data('id'));
    
        var adoptionInstance;
        web3.eth.getAccounts(function(error, accounts) {
          if (error) {
            console.log(error);
          }
    
          var account = accounts[0];
    
          App.contracts.Adoption.deployed().then(function(instance) {
            adoptionInstance = instance;
    
            // Execute adopt as a transaction by sending account
            return adoptionInstance.adopt(petId, {from: account});
          }).then(function(result) {
            return App.markAdopted();
          }).catch(function(err) {
            console.log(err.message);
          });
        });
      }
    };
    
    $(function() {
      $(window).load(function() {
        App.init();
      });
    });

[mesqueeb]

I've had this bug for 3 days, and after trying many things I found out the method to restore your Metamask functionality without fail:

1. First of all, make sure you don't have any other node than Ganache running in the background, no private node, no other Geth.
2. Go to the directory of your truffle project and delete the build directory of that directory.
3. Open a fresh Ganache instance and in your terminal truffle migrate --reset --compile-all in your truffle project directory.
4. In your browser open Metamask, switch your network to the Main Ethereum Network and then switch back to your private network where your Ganache is running.
5. Then just to be safe completely quit and restart the browser, open your Metamask with your password, check if you are still on your private network, and everything should be fixed!

[2-am-zzz]

Apologies, can you clarify if there is an additional ask here in terms of fixing something within MetaMask

[mesqueeb]

@Zanibas I’m fine with just resetting the way I described. I’m not sure about the others.

[bdresser]

Closing this issue due to inactivity - please let me know if you're still having trouble!

[tamnorris94]

Hi. I am having similar issues. Followed the above but still no joy. I created my project with the truffle unbox drizzle command. Metamask seems to be correctly synced to Ganache accounts as correct account and ether balance are shown in Metamask but transactions are not shown in history nor is confirmation required in Metamask.

[stephen-eades]

@ChuckNor94 did you ever find a solution to this? I'm currently dealing with the same scenario to no avail.

[alone-as-a-god]

@ChuckNor94 did you ever find a solution to this? I'm currently dealing with the same scenario to no avail.

Where you able to solve this in the meantime, same issue here

[francochau]

@ChuckNor94 did you ever find a solution to this? I'm currently dealing with the same scenario to no avail.

Same problem, any solution?

[francochau]

Just figured out the problem may caused by Metamask not injecting web3.

changed
const web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:7545'))

to
const web3 = new Web3(window.ethereum)

I would also like to know is the problem occurred in non testing environment, skipping the confirmation seems extremely unsafe.

[omago123]

@francochau
Thank you for you comment. Thanks to you I could fixed my issue