如何使用metamask正确更新和检索帐户信息

k2fxgqgv  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(438)

我正在开发一个按钮组件,用于将用户连接到metamask钱包。其想法是,如果用户的钱包尚未连接,则按钮将显示“连接钱包”,一旦用户单击按钮并连接钱包,按钮的文本将更改,而显示其帐户地址“0x323..”。
到目前为止,我遇到的唯一问题是更改accounts变量的状态并尝试从中检索地址。到目前为止,我所能做的就是登录到metamask,但一旦连接,地址就不会显示,因为它没有检测到accounts变量的状态已更改。我尝试了不同的方法来更新帐户状态,但似乎没有任何效果。我的代码中是否有需要更改或包含的内容?

let ethereum = window.ethereum;
let accounts = [];

// Renders a Button to handle the Metamask Connection
class WalletConnector extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      // set state of account to empty if not connected to a wallet
      accounts: ''
    }
  }

  handleClick(){
    try{
      // prompts to connect to metamask
      ethereum.request({ method: 'eth_requestAccounts' });

      // * this did not work * 
      //this.setState({accounts: ethereum.request({ method: 'eth_requestAccounts' })});

    }
    catch(error){
      // if user cancels metamask request 
      if (error.code === 4001){
        console.log('Metamask Connection Cancelled');
      }
      else {
        // if unable to requst account prompt to install metamask
        alert('Install Metamask to Connect');
      }
    }
  }

  render(){
    return(
      <div>
        <button onClick={this.handleClick}> 

          {/* if account is connected display address else ask to connect */}
          {this.state.accounts === '' ? 'Connect Wallet' : this.state.accounts} 

        </button>
      </div>
    );
  }

}
hc8w905p

hc8w905p1#

您需要使用async/await。 ethereum.request 我会回报你一个承诺。

async function handleClick() {
  try {
    // prompts to connect to metamask
    await ethereum.request({ method: "eth_requestAccounts" });

    this.setState({
      accounts: await ethereum.request({ method: "eth_requestAccounts" }),
    });
  } catch (error) {
    // if user cancels metamask request
    if (error.code === 4001) {
      console.log("Metamask Connection Cancelled");
    } else {
      // if unable to requst account prompt to install metamask
      alert("Install Metamask to Connect");
    }
  }
}

相关问题