如何防止弹出元掩码？

Question

我在 youtube 上学习了关于如何创建一个按钮来连接 metamask 和我的 Dapp 的教程，我遇到了一个问题，当我启动 Dapp metamask 弹出窗口时，甚至在我点击按钮连接它之前，我试图从 app.js 中删除 web3.js 代码，因为我知道是“web3 = new Web3(window.ethereum);”谁让 metamask 弹出，但我在 App.js.

中遇到了另一个问题

Index.js代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Web3ReactProvider } from '@web3-react/core';
import Web3 from "web3";

// get and inject web3 provider
const getLibrary = (provider) => {
    return new Web3(provider)
};


ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
    <App />
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

App.js代码

 import web3 from './web3';
    import { useWeb3React } from "@web3-react/core";
    import { injected } from "./components/Wallet/connector";
    
    
    const { active, account, library, connector, activate, deactivate } = useWeb3React();
    
    
      // Connect to metamask
      const Connect = async () => {
        try {
         await activate(injected);
         
        } catch(err) {
          console.log(err)
        }
      }

const winnerHandler = async () => {
    // get the accounts
    const account = await web3.eth.getAccounts();

  
    // Call the pickWinner function from the contract
    await lottery.methods.pickWinner().send({
      from: account[0]
    });

 
  }
    
    <main>
        <Navbar>
            <Left>
              <Logo>LTR</Logo>
            </Left>
              <Right>
              {active ? <Button widthBtn hightBtn >{account.substring(0,13)}...</Button> :
               <Button widthBtn hightBtn  onClick={Connect}>Connect MetaMask</Button>} 
              </Right>
          </Navbar>
    </main>

web3.js代码

import Web3 from "web3";

let web3;

if (window.ethereum && window.ethereum.isMetaMask) {
    console.log('MetaMask Here!');
    web3 = new Web3(window.ethereum);

    window.ethereum.request({ method: 'eth_requestAccounts'})
    
} else {
    console.log('Need to install MetaMask');
    window.Error('Please install MetaMask browser extension to interact');
}

export default web3;

Answer 1

我今天刚遇到这个问题。您需要更改 app.js

上的 onClick 中的功能

发件人：

 <Button widthBtn hightBtn  onClick={Connect}>Connect MetaMask</Button>}

收件人：

<Button widthBtn hightBtn  onClick={()=>Connect}>Connect MetaMask</Button>}

如何防止弹出元掩码？

How can I prevent metamask from popping up?

reactjs

web3