(dApp) 我的 dapp 不與 MetaMask 交互

Question

App = {
  web3Provider: null,
  contracts: {},

  init: function() {
   $.getJSON('../real-estate.json', function(data) {
    var list = $('#list');
    var template = $('#template');

    for (i = 0; i < data.length; i++) {
      template.find('img').attr('src', data[i].picture);
      template.find('.id').text(data[i].id);
      template.find('.type').text(data[i].type);
      template.find('.area').text(data[i].area);
      template.find('.price').text(data[i].price);

      list.append(template.html());
    }

   })

   return App.initWeb3();
  },

  initWeb3: function() {
    if (typeof web3 !== 'undefined') {
      App.web3Provider = web3.currentProvider;
      web3 = new Web3(web3.currentProvider);
    } else {
      App.web3Provider = new web3.providers.HttpProvider('http://localhost:8545');
      web3 = new Web3(App.web3Provider);
    }

    return App.initContract();

  },

  initContract: function() {
    // Contracts
    $.getJSON('Contracts.json', function(data) {

      App.contracts.Contracts = TruffleContract(data);

      App.contracts.Contracts.setProvider(App.web3Provider);
    })
  },

  buyRealEstate: function() {
    var id = $('#id').val();
    var name = $('#name').val();
    var price = $('#price').val();
    var age = $('#age').val();

    web3.eth.getAccounts(function(error, accounts) {
      if (error) {
        console.log(error);
      }

      var account = accounts[0];
      App.contracts.Contracts.deployed().then(function(instance) {
        var nameUtf8Encoded = utf8.encode(name);

        return instance.buyRealEstate(id, web3.toHex(nameUtf8Encoded), age, { from: account, value: price });
      }).then(function() {

        $('#name').val('');
        $('#age').val('');
        $('#buyModal').modal('hide');
        return App.loadRealEstates();
      }).catch(function(err) {
        console.log(err.message);
      });
    });

  },

  loadRealEstates: function() {

  },

  listenToEvents: function() {

  }
};

$(function() {
  $(window).load(function() {
    App.init();
  });

  $('#buyModal').on('show.bs.modal', function(e) {
    var id = $(e.relatedTarget).parent().find('.id').text();
    var price = web3.toWei(parseFloat($(e.relatedTarget).parent().find('.price').text() || 0), "ether");

    $(e.currentTarget).find('#id').val(id);
    $(e.currentTarget).find('#price').val(price);
  });
});

這段代碼是 app.js。

我目前正在研究 dapp，同時從事一個過去一段時間的項目。

我面臨的問題是，當我通過我設置的代碼按下按鈕時，我必須與元掩碼進行交互，但我不能。

我認為這是版本兼容性的問題。

有沒有人解決過這個問題或知道如何解決？

我是 dapp 初學者。 我向所有人求求。 (˘･_･˘)在此處輸入圖片描述

Answer 1

這是我使用它的方式（松露項目）

const getWeb3 = () =>
  new Promise((resolve, reject) => {
    // Wait for loading completion to avoid race conditions with web3 injection timing.
    window.addEventListener("load", async () => {
      // Modern dapp browsers...
      if (window.ethereum) {
        const web3 = new Web3(window.ethereum);
        try {
          // Request account access if needed
          await window.ethereum.enable();
          // Accounts now exposed
          resolve(web3);
        } catch (error) {
          reject(error);
        }
      }
      // Legacy dapp browsers...
      else if (window.web3) {
        // Use Mist/MetaMask's provider.
        const web3 = window.web3;
        console.log("Injected web3 detected.");
        resolve(web3);
      }
      // Fallback to localhost; use dev console port by default...
      else {
        const provider = new Web3.providers.HttpProvider(
          "http://127.0.0.1:8545"
        );
        const web3 = new Web3(provider);
        console.log("No web3 instance injected, using Local web3.");
        resolve(web3);
      }
    });
  });

並將 web 設置為：

const web3 = await getWeb3();