I created a simple dapp with react/truffle/web3 that allows users to enter a number of tokens and submit it to stake it, the problem that I got is that when clicked on submit button, Metamask popup to confirm the transaction(approuve) but I don't get the second popup to confirm stakeTokens function, hence, no transaction history displayed.
Dapp link: https://doxa-staking.netlify.app.
The stake smart contract code deployed on rinkeby: https://rinkeby.etherscan.io/address/0xAD015a006755b389d8e5BC2680cc5081dc1d0abd#code
The reactjs web3 code in github:
My Stake Approval Function
approval = async () => {
const { web3, token, address } = this.props.wallet;
const tokenAmount = web3.utils.toWei("99999999", "ether");
const stakingContractAddress = process.env.REACT_APP_DOXACONTRACT_ADDRESS;
const approval = await token.methods
.approve(stakingContractAddress, tokenAmount)
.send({ from: address });
console.log(approval);
this.setState({ isApproved: true });
await this.checkAllowance();
};
My Stake Function:
stakeAZO = async () => {
this.setState({ stakeloading: true });
let type;
if (this.state.stakeType) {
type = 1;
} else type = 0;
if (this.state.stakeValue > 0 && this.state.yearsValue > 0) {
const { web3, staking, token, address } = this.props.wallet;
const tokenAmount = web3.utils.toWei(
this.state.stakeValue.toString(),
"ether"
);
var time = Date.now();
console.log("address", [
address,
process.env.REACT_APP_DOXACONTRACT_ADDRESS,
tokenAmount,
type,
this.state.yearsValue,
time,
]);
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
userAddress: address,
contractAddress: process.env.REACT_APP_DOXACONTRACT_ADDRESS,
amount: tokenAmount,
id: type,
noOfDays: this.state.yearsValue,
timestamp: time,
}),
};
const response1 = await fetch(
process.env.REACT_APP_API_URL + "/getsignature",
requestOptions
);
const data1 = await response1.json();
var signaturelkn = data1.result;
var sigtuplelkn = [
address,
process.env.REACT_APP_DOXACONTRACT_ADDRESS,
tokenAmount,
type,
this.state.yearsValue,
time,
signaturelkn,
];
try {
const stake = await staking.methods
.stake(tokenAmount, this.state.yearsValue, sigtuplelkn)
.send({ from: address });
this.setState({ stakeloading: false });
} catch (err) {
console.log(err);
this.setState({ stakeloading: false });
}
// console.log(stake);
this.getStakeRecords();
if (this.state.stakeType) {
this.getTokenBalance();
this.setState({ stakeloading: false });
}
} else {
this.setState({ stakeloading: false });
alert("Amount of AZO or days should be more than 0!");
}
};
How I rendered it:
<div className="d-block d-md-flex bottom-btn-cont">
{!this.state.isApproved && (
<button
className="btn-btn stake-btn"
onClick={() =>
this.props.wallet.connected
? this.approval()
: alert("Connect to wallet!")
}
>
Approve AZO
</button>
)}
<button
className="btn-btn stake-btn"
style={{
backgroundColor: this.state.isApproved
? "#002365"
: "#e2e2e2",
}}
disabled={!this.state.isApproved}
onClick={() =>
this.state.isApproved
? this.stakeAZO()
: alert("Approve tokens before staking!")
}
>
STAKE AZO{" "}
{this.state.stakeloading ? (
<img
style={{ width: "20px", height: "20px" }}
src={buyLoader}
></img>
) : null}
</button>
</div>