Блог

Я работаю над компонентом кнопки, который обрабатывает подключение пользователя к его кошельку Metamask. Идея заключается в том, что если кошелек пользователя еще не подключен, то на кнопке отобразится «Подключить кошелек», как только они нажмут на кнопку и подключат свой кошелек, текст кнопки изменится и вместо этого отобразится адрес их учетной записи » 0x323..».

Единственное, с чем у меня пока возникают проблемы, — это изменение состояния переменной учетных записей и попытка извлечь из нее адрес. На данный момент все, что я могу сделать, это войти в Metamask, но после подключения адрес не отображается, потому что он не заметил, что состояние переменной учетных записей изменилось. Я пробовал разные варианты, пытаясь обновить состояние учетных записей, но, похоже, ничего не сработало. Есть ли что-то, что я должен изменить или включить в свой код?

 
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>
    );
  }

}
 

Вам нужно использовать асинхронное/ожидание. 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");
    }
  }
}