title: MetaMask - RPC Error: Error: [ethjs-rpc] rpc error with payload {"id":6553471421858,"jsonrpc":"2.0","params":
body: <p>Been following the examples from <a href="https://github.com/dappuniversity/starter_kit" rel="nofollow noreferrer">https://github.com/dappuniversity/starter_kit</a> but when I tried to buy tokens the MetaMask Error comes out.</p>
  <p>$ truffle version
  Truffle v5.1.14 (core: 5.1.14)
  Solidity v0.5.16 (solc-js)
  Node v12.18.3
  Web3.js v1.2.1
  Ganache</p>
  <p>Locally running Custom RPC</p>
  <p>I tried to increase the GAS but that didn't work. All the test on the project passed and all the contracts compile but I can't seem to get it to work. Any help will be apprecaited.
  Thanks</p>
  <p>Main.js</p>
  <pre><code>import React, { Component } from 'react';
  import BuyForm from './BuyForm'
  import SellForm from './SellForm'
  
  
  class Main extends Component {
  constructor(props) {
  super(props)
  this.state = {
    currentForm: 'buy'
  }
  }
  
  render() {
    let content
    if(this.state.currentForm === 'buy'){
      content = &lt;BuyForm
        ethBalance={this.props.ethBalance}
        tokenBalance={this.props.tokenBalance}
        buyTokens={this.props.buyTokens}
        /&gt;
    }else{
      content = &lt;SellForm
      ethBalance={this.props.ethBalance}
      tokenBalance={this.props.tokenBalance}
      sellTokens={this.props.sellTokens}
       /&gt;
    }
  return (
    &lt;div id=&quot;content&quot; className=&quot;mt-3&quot;&gt;
  
      &lt;div className=&quot;d-flex justify-content-between mb-3&quot;&gt;
        &lt;button
        className=&quot;btn btn-light&quot;
        onClick={(event) =&gt; {
          this.setState({ currentForm: 'buy'})
        }}
        &gt;
          Buy
        &lt;/button&gt;
        &lt;span className=&quot;text-muted&quot;&gt;&amp;lt; &amp;nbsp; &amp;gt;&lt;/span&gt;
        &lt;button className=&quot;btn btn-light&quot;
        onClick={(event) =&gt; {
          this.setState({ currentForm: 'sell'})
        }}
        &gt;
        Sell
        &lt;/button&gt;
        &lt;/div&gt;
  
      &lt;div className=&quot;card mb-4&quot;&gt;
        &lt;div className=&quot;card-body&quot;&gt;
          {content}
  
  
        &lt;/div&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
  );
  }
  }
  
    export default Main;
  </code></pre>
  <p>App.js</p>
  <pre><code>import React, { Component } from 'react';
  import Web3 from 'web3';
  import Token from '../abis/Token.json'
  import EthSwap from '../abis/EthSwap.json'
  import Navbar from './Navbar'
  import Main from './Main'
  import './App.css';
  
  class App extends Component {
  async componentWillMount() {
  await this.loadWeb3()
  await this.loadBlockchainData()
  }
  
  async loadBlockchainData(){
    const web3 = window.web3
  
    const accounts = await web3.eth.getAccounts()
    this.setState({ account: accounts[0] })
  
    const ethBalance = await web3.eth.getBalance(this.state.account)
    this.setState({ ethBalance })
  
    //Load Token
  const networkId = await web3.eth.net.getId()
  const tokenData = Token.networks[networkId]
  if(tokenData){
    const token = new web3.eth.Contract(Token.abi, tokenData.address)
    this.setState({token})
    let tokenBalance = await token.methods.balanceOf(this.state.account).call()
    this.setState({tokenBalance: tokenBalance.toString() })
  }
   else {
   window.alert('Token contract not deployed to detected network')
   }
  
  
  
   //Load EthSwap
     const ethSwapData = EthSwap.networks[networkId]
     if(ethSwapData){
     const ethSwap = new web3.eth.Contract(EthSwap.abi, tokenData.address)
     this.setState({ethSwap})
     }
     else {
     window.alert('EthSwap contract not deployed to detected network')
       }
       this.setState({loading: false})
        }
  
       async loadWeb3() {
       if (window.ethereum) {
        window.web3 = new Web3(window.ethereum)
        await window.ethereum.enable()
      }
      else if (window.web3) {
        window.web3 = new Web3(window.web3.currentProvider)
        }
      else {
        window.alert('Non-Ethereum browser detected. You should consider trying MetaMask')
      }
  }
  
  buyTokens = (etherAmount) =&gt; {
    this.setState({ loading: true})
    this.state.ethSwap.methods.buyTokens().send({value: etherAmount, from: this.state.account}).on('transactionHash', (hash) =&gt; {
    this.setState({loading: false})
  })
  }
  
  sellTokens = (tokenAmount) =&gt; {
    this.setState({ loading: true})
    this.state.token.methods.approve(this.state.ethSwap.address, tokenAmount)
    .send({ from: this.state.account}).on('transactionHash', (hash) =&gt; {
      this.state.ethSwap.methods.sellTokens(tokenAmount).send({ from: 
       this.state.account}).on('transactionHash',(hash) =&gt;{
      this.setState({loading: false})
  
   })
   })
    }
  
  constructor(props) {
  super(props)
  this.state = {
   account:'',
   token: {},
   ethSwap: {},
   ethBalance:'0',
   tokenBalance:'0',
   loading: false
   }
   }
  
    render() {
     let content
     if(this.state.loading){
      content = &lt;p id=&quot;loader&quot; className=&quot;text-center&quot;&gt;Loading...&lt;/p&gt;
  }else {
    content = &lt;Main
      ethBalance={this.state.ethBalance}
      tokenBalance={this.state.tokenBalance}
      buyTokens= {this.buyTokens}
      sellTokens={this.sellTokens}
    /&gt;
  
  }
  return (
    &lt;div&gt;
    &lt;Navbar account={this.state.account} /&gt;
      &lt;div className=&quot;container-fluid mt-5&quot;&gt;
        &lt;div className=&quot;row&quot;&gt;
          &lt;main role=&quot;main&quot; className=&quot;col-lg-12 ml-auto mr-auto&quot; style={{maxWidth: '600px'}}&gt;
            &lt;div className=&quot;content mr-auto ml-auto&quot;&gt;
              &lt;a
                href=&quot;http://www.dappuniversity.com/bootcamp&quot;
                target=&quot;_blank&quot;
                rel=&quot;noopener noreferrer&quot;
              &gt;
  
              &lt;/a&gt;
              {content}
  
            &lt;/div&gt;
          &lt;/main&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  }
  }
  
  export default App;
  </code></pre>
  <p>Contracts:</p>
  <p>EthSwap.sol</p>
  <pre><code>pragma solidity ^0.5.0;
  
  import &quot;./Token.sol&quot;;
  
  contract EthSwap {
    string public name = &quot;EthSwap Instant Exchange&quot;;
    Token public token;
    uint public rate = 100;
  
    event TokensPurchased(
      address account,
      address token,
      uint  amount,
      uint  rate
      );
  
      event TokensSold(
        address account,
        address token,
        uint  amount,
        uint  rate
        );
  
    constructor(Token _token) public {
      token = _token;
    }
  
    function buyTokens() public payable {
      //Calculate the number of tokens to buy
      uint tokenAmount = msg.value * rate;
  
      //Require that EthSwap has enough tokens
      require(token.balanceOf(address(this)) &gt;= tokenAmount);
  
      //Transer tokens to the user
      token.transfer(msg.sender, tokenAmount);
  
      //Emit on event
      emit TokensPurchased(msg.sender, address(token), tokenAmount, rate);
    }
  
      function sellTokens(uint _amount) public {
      //Uswer can't sell more tokens than they have
      require(token.balanceOf(msg.sender) &gt;= _amount);
  
      // Calculate the amount of Ether to redeem
      uint etherAmount = _amount / rate;
  
      //Require that EthSwap has enough ether
      require(address(this).balance &gt;= etherAmount);
  
      //Perform sale
      token.transferFrom(msg.sender, address(this), _amount);
      msg.sender.transfer(etherAmount);
  
      //Emit on event
      emit TokensSold(msg.sender, address(token), _amount, rate);
  
      }
  }
  </code></pre>
  <p>Token.sol</p>
  <pre><code>pragma solidity ^0.5.0;
  
  contract Token {
      string  public name = &quot;DApp Token&quot;;
      string  public symbol = &quot;DAPP&quot;;
      uint256 public totalSupply = 1000000000000000000000000; // 1 million tokens
      uint8   public decimals = 18;
  
      event Transfer(
          address indexed _from,
          address indexed _to,
          uint256 _value
      );
  
      event Approval(
          address indexed _owner,
          address indexed _spender,
          uint256 _value
      );
  
      mapping(address =&gt; uint256) public balanceOf;
      mapping(address =&gt; mapping(address =&gt; uint256)) public allowance;
  
      constructor() public {
          balanceOf[msg.sender] = totalSupply;
      }
  
      function transfer(address _to, uint256 _value) public returns (bool success) {
          require(balanceOf[msg.sender] &gt;= _value);
          balanceOf[msg.sender] -= _value;
          balanceOf[_to] += _value;
          emit Transfer(msg.sender, _to, _value);
          return true;
      }
  
      function approve(address _spender, uint256 _value) public returns (bool success) {
          allowance[msg.sender][_spender] = _value;
          emit Approval(msg.sender, _spender, _value);
          return true;
      }
  
      function transferFrom(address _from, address _to, uint256 _value) public returns (bool success) {
          require(_value &lt;= balanceOf[_from]);
          require(_value &lt;= allowance[_from][msg.sender]);
          balanceOf[_from] -= _value;
          balanceOf[_to] += _value;
          allowance[_from][msg.sender] -= _value;
          emit Transfer(_from, _to, _value);
          return true;
      }
  }
  </code></pre>