Weird question, so I have created a smart contract, verified that it works, even deployed it using Web3, Metamask and HTML/Javascript. I understand that worked.
Now I am trying to integrate it into some front end a group member made. The problem is that I cannot call the function. I have verified that Web3 is injected into my code, since I can see my Metamask address in the log, I am just unable to actually call the function or prompt Metamask. I am at a loss since previously, I was calling the function through a script, which occurred on button click. But on this workflow, things are rendered back to back without a click. I just need some guidance on where I can put my contract script.
import React, { Component } from "react";
import {
FormGroup,
FormControl,
ControlLabel
} from "react-bootstrap";
import LoaderButton from "../components/LoaderButton";
import "./Sub.css";
import Web3 from 'web3';
import Web3Provider from 'react-web3-provider';
export default class BugSub extends Component {
constructor(props) {
const web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
web3.eth.getAccounts().then(console.log); //this here prints out my primary MetaMask address
super(props);
this.state = {
sum: "",
fullissue: "",
images: "",
matrix: "",
newSub: null
};
}
validateForm() {
return (
this.state.company.length > 0 &&
this.state.images.length > 0 &&
this.state.images === this.state.matrix
);
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
handleSubmit = async event => {
event.preventDefault();
this.setState({ isLoading: true });
this.setState({ newSub: "test" });
this.setState({ isLoading: false });
}
handleSubmissionSubmit = async event => {
event.preventDefault();
this.setState({ isLoading: true });
var senderAccount;
web3.eth.getAccounts((error, accounts) => (senderAccount = accounts[0]));
console.log(senderAccount);
var Contract = new web3.eth.Contract(ABI, '0x0982008ea0509fb05283eeba2ff161a5964a67b0', {
from: senderAccount});
window.contractInstance = Contract;
window.contractInstance.methods.actualContractMethod("value a", "valueb").send({from: senderAccount}).on('transactionHash', function(hash){ console.log("Hash: " + hash);
}
renderSubmissionForm() {
return (
<form onSubmit={this.handleSubmissionSubmit}>
<LoaderButton
block
bsSize="large"
type="submit"
isLoading={this.state.isLoading}
text="Return home"
loadingText="Thank you…"
/>
</form>
);
}
renderForm() {
return (
<form onSubmit={this.handleSubmit}>
<FormGroup controlId="company" bsSize="large">
<ControlLabel> Company</ControlLabel>
<FormControl
autoFocus
type="company"
value={this.state.company}
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup controlId="sum" bsSize="large">
<ControlLabel>Summary</ControlLabel>
<FormControl
autoFocus
type="sum"
value={this.state.sum}
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup controlId="fullissue" bsSize="large">
<ControlLabel> Statement </ControlLabel>
<FormControl as="textarea" rows="10" type="fullissue" value={this.state.fullissue} onChange={this.handleChange}
/>
</FormGroup>
<FormGroup controlId="images" bsSize="large">
<ControlLabel>Images</ControlLabel>
<FormControl
value={this.state.images}
onChange={this.handleChange}
type="images"
/>
</FormGroup>
<FormGroup controlId="matrix" bsSize="large">
<ControlLabel> Intensity</ControlLabel>
<FormControl
value={this.state.matrix}
onChange={this.handleChange}
type="matrix"
/>
</FormGroup>
<LoaderButton
onclick="activate()"
block
bsSize="large"
disabled={!this.validateForm()}
type="submit"
isLoading={this.state.isLoading}
text="Submit"
loadingText="Submitting..."
/>
</form>
);
}
render() {
return (
<div className="Submission">
{this.state.newSub === null
? this.renderForm()
: this.renderSubmissionForm()}
</div>
);
}
}
My previous script that called prompted Metamask and deployed the contract was the following
<script>
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:8545"));
}
var senderAccount;
web3.eth.getAccounts((error, accounts) => (senderAccount = accounts[0]));
var Contract = new web3.eth.Contract(ABI, 'contractAddress', {from: senderAccount});
window.contractInstance = Contract;
//activate() was the button
async function activate() {
window.contractInstance.methods.actualContractMethod("value a", "valueb").send({from: senderAccount}).on('transactionHash', function(hash){ console.log("Hash: " + hash);
});
}
</script>
The second script worked and prompted MetaMask because the function was invoked on a button click.
There is no button click on the React code, just events. I tried to force the code under the HandleSubmissionSubmit function, but does not run. Metamask is never prompted. Any pointer in the right direction would be very helpful. I have tried everything I know trying to get this to work.
Some quick additional info, the contract should be created when the Loaderbutton is clicked. But the Loaderbutton is clicked twice to change views, once to submit and once to show a Submit loading screen,which is confusing me even more. But that doesn't really matter, I just want to invoke Metamask correctly. I can figure that out myself.
HandleSubmissionSubmit
does not contain any code to interact with smart contract.