0

I am currently building a React Dapp that connects to ethereum using the web3 library but when I attempt to make any API calls nothing is rendered to the screen or browser console. I have attached the projects source code also.

What am I doing wrong?

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Web3 from 'web3';

class Wallet extends Component {
    constructor(props) {
        super(props);
        this.accounts = this.props._accounts;
        this.account_len = this.props.length;
        this.defKeyName = this.props.defaultKeyName;
    }

    render() {
        return (
            <div className="container1">
                <h1> Wallet Data </h1>
                <p>{this.props._accounts} </p>
            </div>
        );
    }
}
class App extends Component {
    componentDidMount() {
        this.loadBlockchainData()
    }

    async loadBlockchainData() {
        var wallet = await this.state.web3.eth.accounts.wallet;
        this.setState({wallet: wallet});
    }

    async createAccount() {
        var account = await this.state.web3.eth.accounts
        this.setState({account: account[0]});
    }


    constructor(props) {
        super(props);
        this.createAccount = this.createAccount.bind(this)
        this.state = { 
            web3: new Web3(new Web3.providers.HttpProvider("HTTP://127.0.0.1:7545")),
            wallet: '',
        };
    }

    render() {
        return (
            <div className="container">
                <h1>Hello, World!</h1>
                <Wallet props={this.state.wallet}/>
                <button type="button" onClick={this.createAccount}>Create account
                </button>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"))

export default App;

0
import React, { Component } from 'react';
import './index.css';
import Web3 from 'web3';

class Wallet extends Component {
    render() {
        return (
            <div className="container1">
                <h1> Wallet Data </h1>
                <p>{this.props.account} </p>
            </div>
        );
    }
}

class App extends Component {
    async createAccount() {
        var account = await this.state.web3.eth.getAccounts();
        this.setState({account: account[0]});
    }


    constructor(props) {
        super(props);
        this.createAccount = this.createAccount.bind(this)
        this.state = { 
            web3: new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545")),
            account: '',
        };
    }

    render() {
        return (
            <div className="container">
                <h1>Hello, World!</h1>
                <Wallet account={this.state.account}/>
                <button type="button" onClick={this.createAccount}>Create account
                </button>
            </div>
        );
    }
}

export default App;

This will print the account when you click on the create account button. if you wish to see entire code gist, click here

0
0

Based on your current set up, call this inside componentDidMount to get the provider:

componentDidMount(){
 const loadProvider = async () => {
      let provider;
      if (window.ethereum) {
        provider = window.ethereum;

        try {
          await provider.request({ method: "eth_requestAccounts" });
        } catch {
          console.error("User denied account access");
        }
      } else if (window.web3) {
        provider = window.web3.currentProvider;
      } else if (!process.env.production) {
        provider = new Web3.providers.HttpProvider("http://localhost:7545");
      }
      // set the web3
      this.setState({
        web3: new Web3(provider),
        provider,
      });
    };

    loadProvider();
}

Alternatively, you could detect provider with @metamask/detect-provider

componentDidMount(){
  const loadProvider = async () => {
    const provider = await detectEthereumProvider();
    if (provider) {
      provider.request({ method: "eth_requestAccounts" });
      this.setState({
        web3: new Web3(provider),
        provider,
      });

    } else {
      console.error("please install metamask");
    }}
     loadProvider();
 }

Get the accounts

async createAccount() {
    var account = await this.state.web3.eth.getAccounts()
    this.setState({account: account[0]});
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy