0

I've made a solidity contract which was deployed perfectly. Now, when I'm connecting with it my react Dapp after getting the ABI and address and trying to render it, it renders nothing.

my web3.js file

import Web3 from 'web3';

const web3 = new Web3(window.ethereum);
window.ethereum.enable();


export default web3;

my address(on which contract was deployed) and ABI

import web3 from './web3';

const address = '0x6D4ee9C2084FAe71562B5dcbe481F60B9aF61e4d';

const ABI = [
{
  inputs: [],
  stateMutability: 'nonpayable',
  type: 'constructor',
  constant: undefined,
  payable: undefined,
  signature: 'constructor'
},
{
  inputs: [],
  name: 'enter',
  outputs: [],
  stateMutability: 'payable',
  type: 'function',
  constant: undefined,
  payable: true,
  signature: '0xe97dcb62'
},
{
  inputs: [],
  name: 'getPlayers',
  outputs: [ [Object] ],
  stateMutability: 'view',
  type: 'function',
  constant: true,
  payable: undefined,
  signature: '0x8b5b9ccc'
},
{
  inputs: [],
  name: 'manager',
  outputs: [ [Object] ],
  stateMutability: 'view',
  type: 'function',
  constant: true,
  payable: undefined,
  signature: '0x481c6a75'
},
{
  inputs: [],
  name: 'pickWinner',
  outputs: [],
  stateMutability: 'nonpayable',
  type: 'function',
  constant: undefined,
  payable: undefined,
  signature: '0x5d495aea'
},
{
  inputs: [ [Object] ],
  name: 'players',
  outputs: [ [Object] ],
  stateMutability: 'view',
  type: 'function',
  constant: true,
  payable: undefined,
  signature: '0xf71d96cb'
}
];
export default new web3.eth.Contract(ABI, address);

and finally, my react app

import web3 from './web3';
import lottery from './lottery';
import { Component } from 'react';

class App extends Component {

  state = {
    manager: ''
  }

  async componentDidMount(){
    const manager = await lottery.methods.manager().call();
    this.setState({ manager });
    console.log(manager) //can't understand the problem so console it. 
  }
  
  render(){
    return (
      <div>
        <h2>LOTTERY CONTRACT</h2>
        <p>This contract is managed by {this.state.manager}</p>
      </div>
    );
  }
}

export default App;

After console.log(manager) I got this empty array with no address.

enter image description here

1
  • Btw, my metamask is also connected with my react app on port 3000
    – Adil Nehal
    Commented Dec 1, 2021 at 11:06

1 Answer 1

2

Before deploying to the test network, stringify your abi and then copy the output into the react file. example: console.log('Contract ABI', JSON.stringify(abi)). this will give you a different output compared to the one you have.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.