0

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:

https://github.com/isofttechn/staking-dapp/blob/main/src/components/Home/index.js

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>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy