I am working on a web3 dapp for token sale and staking platform. The connect to wallet, buying of token, fetching of token and displaying it's balance works real fine. However, I get an error staking the token and fetching the staking records, I get this error:
Unhandled Rejection (TypeError): Cannot read properties of null (reading 'methods')
It is deployed on rinkeby network and here's the link: https://doxa-staking.netlify.app/.
I don't know if the problem is from the contract. Here's the staking contract: 0xAD015a006755b389d8e5BC2680cc5081dc1d0abd
1: https://rinkeby.etherscan.io/address/0xAD015a006755b389d8e5BC2680cc5081dc1d0abd#code deployed on rinkeby network.

Here in line 73 of my code, I passed in getStakeRecords() in componentDidMount
await this.getStakeRecords();
passed in this.getStakeRecords(); in componentDidUpdate like so
this.getStakeRecords();
This is the line where I am getting the error
const totalStakeRecord = await staking.methods <<< Getting the error
The entire code:
getStakeRecords = async () => {
const { web3, staking, address } = this.props.wallet;
const totalStakeRecord = await staking.methods // Getting the error
.totalStakeRecords(address)
.call();
const stakersPromises = [];
for (let i = 0; i < totalStakeRecord; i++) {
stakersPromises.push(staking.methods.Stakers(address, i).call());
}
Promise.all(stakersPromises).then(async (res) => {
await Promise.all(
res.map(async (data, i) => {
data.balance = web3.utils.fromWei(data.balance, "ether");
let earned = await staking.methods.earned(address, i).call();
data.rewardEarned = web3.utils.fromWei(earned, "ether").split(".")[0];
data.apr = this.calculateAPR(parseInt(data.lockingPeriod));
const time = Math.floor(
Math.floor(data.maxTime - Date.now() / 1000) / 60
);
data.timeleft = time < -1 ? -1 : time;
})
);
if (res.length > 0) {
this.setState({ stakeRecords: res });
}
});
};
The stake method:
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(); **<<<<< Passed the stakerecord here**
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!");
}
};
Here is the complete source code of the staking codes:
https://github.com/isofttechn/staking-dapp/blob/main/src/components/Home/index.js