3

I am trying to integrate a react app with go-ethereum using web3js.

an event Onsubmit will do the following: 1. Create an account. 2. Open the account. 3. Approve a smart contract with the created account.

Here is my code

import React, { Component } from 'react'; import './App.css'; import web3 from './web3';

....

class App extends Component { constructor(props){ super(props); this.state = {requester : '', receiver:'', balance: '', message:''}; } async componentDidMount(){ const requester = await auth.methods.requester().call(); const receiver = await auth.methods.receiver().call(); const approvers = await auth.methods.approvers(0).call(); const balance = await web3.eth.getBalance(auth.options.address); this.setState({requester,receiver,balance}); } onSubmit = async (event)=>{ event.preventDefault(); console.log('Approving the smart contract ..... Mining in process ! '); var pass = "xxxxxxx" var newaccount = web3.eth.personal.newAccount(pass); var promise1 = Promise.resolve(newaccount); promise1.then(function(value) { var accountnumber = value; console.log(accountnumber); web3.eth.personal.unlockAccount(accountnumber,pass, 1500); auth.methods.approve().send({gas: '1000000',from: accountnumber}); console.log('Smart Contract approved ! '); }); };

The account is getting created but while doing the transaction I am receiving the following error.

Approving the smart contract ..... Mining in process ! App.js:57

0x98f76b2673d545F55c0ff1e961f15EF0a7DfBaD3

App.js:71 Smart Contract

approved ! errors.js:29 Uncaught (in promise) Error: Returned error: authentication needed: password or unlock at Object.ErrorResponse (errors.js:29) at index.js:125 at XMLHttpRequest.request.onreadystatechange (index.js:103) at XMLHttpRequestEventTarget.dispatchEvent (xml-http-request-event-target.js:50) at XMLHttpRequest._setReadyState (xml-http-request.js:288) at XMLHttpRequest._onHttpResponseEnd (xml-http-request.js:459) at push../node_modules/stream-http/lib/response.js.exports.IncomingMessage. (xml-http-request.js:413) at push../node_modules/stream-http/lib/response.js.exports.IncomingMessage.emit (events.js:139) at endReadableNT (_stream_readable.js:1030) at afterTickTwo (index.js:31) at Item.push../node_modules/process/browser.js.Item.run (browser.js:167) at drainQueue (browser.js:131) ErrorResponse @ errors.js:29 (anonymous) @ index.js:125 request.onreadystatechange @ index.js:103 XMLHttpRequestEventTarget.dispatchEvent @ xml-http-request-event-target.js:50 XMLHttpRequest._setReadyState @ xml-http-request.js:288 XMLHttpRequest._onHttpResponseEnd @ xml-http-request.js:459 (anonymous) @ xml-http-request.js:413 emit @ events.js:139 endReadableNT @ _stream_readable.js:1030 afterTickTwo @ index.js:31 push../node_modules/process/browser.js.Item.run @ browser.js:167 drainQueue @ browser.js:131 setTimeout (async) _fireError @ index.js:72 sendTxCallback @ index.js:465 (anonymous) @ index.js:125 request.onreadystatechange @ index.js:103 XMLHttpRequestEventTarget.dispatchEvent @ xml-http-request-event-target.js:50 XMLHttpRequest._setReadyState @ xml-http-request.js:288 XMLHttpRequest._onHttpResponseEnd @ xml-http-request.js:459 (anonymous) @ xml-http-request.js:413 emit @ events.js:139 endReadableNT @ _stream_readable.js:1030 afterTickTwo @ index.js:31 push../node_modules/process/browser.js.Item.run @ browser.js:167 drainQueue @ browser.js:131 setTimeout (async) runTimeout @ browser.js:43 push../node_modules/process/browser.js.process.nextTick @ browser.js:156 nextTick @ index.js:30 maybeReadMore @ _stream_readable.js:521 addChunk @ _stream_readable.js:300 readableAddChunk @ _stream_readable.js:278 push../node_modules/readable-stream/lib/_stream_readable.js.Readable.push @ _stream_readable.js:242 (anonymous) @ response.js:47 write @ response.js:44

Edit: Changed the code to catch the errors

web3.eth.personal.unlockAccount(accountnumber,pass, 1500, function(err, result){ if(err){ alert("Error"+ err); return;} alert("Account Opening: "+ result);});

......

auth.methods.approve().send({gas: '1000000',from: accountnumber}, function(err, result){ if(err){ alert("Error"+ err); return;} alert("Account address: "+ result); console.log('Smart Contract approved ! ');});

The web3.eth.personal.unlockAccount is returning "true" but the still the auth.methods.approve is giving me the error.

Improve this question

1 Answer 1

Reset to default
1

So, after some major changes in the code, I am able to do the following with an onSubmit event in a react app.

  1. Create a new account.
  2. Transfer some gas to it.
  3. Open the account.
  4. Approving a smart contract with the account.

Here is the code

onSubmit = async (event)=>{ event.preventDefault(); console.log('Approving the smart contract ..... Mining in process ! '); var pass = "passsword1" var newaccount = web3.eth.personal.newAccount(pass); var promise1 = Promise.resolve(newaccount); promise1.then(function(value) { var accountnumber = value; console.log(accountnumber); web3.eth.personal.unlockAccount('0x197022acd263e8be0f6b65b10d1e5cdbaa244c17',"*****", 1500, function(err, result){ if(err){ alert("Error"+ err); return; }else { alert("Parent Opening: "+ result); web3.eth.sendTransaction({ from: "0x197022acd263e8be0f6b65b10d1e5cdbaa244c17", to: accountnumber, value: '100000000000000000', }, function(err, transactionHash) { if (err) { console.log(err); } else { web3.eth.personal.unlockAccount(accountnumber,pass, 1500, function(err, result){ if(err){ alert("Error"+ err); return; }else{ console.log(web3.eth.getBalance(accountnumber)); alert("Child Opening: "+ result); auth.methods.approve().send({gas: '20000000',from: accountnumber}, function(err, result){ if(err){ alert("Error"+ err); return; }else{ console.log("Account address: "+ result); console.log('Smart Contract approved ! '); } }); } }); } }); } }); };
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.