Merge pull request #1164 from interlay/tom/fix/staking-rewards-edge-case

Tom/fix/staking rewards edge case

src/config/relay-chains.tsx

@@ -149,7 +149,7 @@ switch (process.env.REACT_APP_RELAY_CHAIN_NAME) {
     CROWDLOAN_LINK = INTERLAY_CROWDLOAN_LINK;
     OPEN_GRAPH_IMAGE_FILE_NAME = 'interlay-meta-image.jpg';
     STAKE_LOCK_TIME = {
-      MIN: 0,
+      MIN: 1,
       MAX: 192
     };
     // TODO: temporary
@@ -191,7 +191,7 @@ switch (process.env.REACT_APP_RELAY_CHAIN_NAME) {
     CROWDLOAN_LINK = KINTSUGI_CROWDLOAN_LINK;
     OPEN_GRAPH_IMAGE_FILE_NAME = 'kintsugi-meta-image.jpg';
     STAKE_LOCK_TIME = {
-      MIN: 0,
+      MIN: 1,
       MAX: 96
     };
     // TODO: temporary

src/pages/Staking/index.tsx

@@ -124,7 +124,7 @@ const Staking = (): JSX.Element => {
     handleSubmit,
     watch,
     reset,
-    formState: { errors, isDirty, isValid },
+    formState: { errors, isValid },
     trigger,
     setValue
   } = useForm<StakingFormData>({
@@ -197,7 +197,6 @@ const Staking = (): JSX.Element => {
   // Estimated governance token Rewards & APY
   const monetaryLockingAmount = newMonetaryAmount(lockingAmount, GOVERNANCE_TOKEN, true);
   const {
-    isIdle: estimatedRewardAmountAndAPYIdle,
     isLoading: estimatedRewardAmountAndAPYLoading,
     data: estimatedRewardAmountAndAPY,
     error: estimatedRewardAmountAndAPYError,
@@ -219,13 +218,6 @@ const Staking = (): JSX.Element => {
   );
   useErrorHandler(estimatedRewardAmountAndAPYError);
 
-  // MEMO: This is being set outside of a useEffect because of
-  // an race condition. This is a underlying issue with the
-  // component and can't be easily fixed.
-  if (isValid || !isDirty) {
-    estimatedRewardAmountAndAPYRefetch();
-  }
-
   const {
     isIdle: stakedAmountAndEndBlockIdle,
     isLoading: stakedAmountAndEndBlockLoading,
@@ -319,6 +311,13 @@ const Staking = (): JSX.Element => {
     }
   );
 
+  React.useEffect(() => {
+    if (!isValid) return;
+    if (!estimatedRewardAmountAndAPYRefetch) return;
+
+    estimatedRewardAmountAndAPYRefetch();
+  }, [isValid, monetaryLockingAmount, blockLockTimeExtension, estimatedRewardAmountAndAPYRefetch]);
+
   React.useEffect(() => {
     if (!lockTime) return;
     if (!currentBlockNumber) return;
@@ -583,7 +582,7 @@ const Staking = (): JSX.Element => {
 
   const renderNewVoteGovernanceTokenGainedLabel = () => {
     const newTotalStakeAmount = getNewTotalStake();
-    if (voteGovernanceTokenBalance === undefined || newTotalStakeAmount === undefined) {
+    if (voteGovernanceTokenBalance === undefined || newTotalStakeAmount === undefined || !isValid) {
       return '-';
     }
 
@@ -595,7 +594,7 @@ const Staking = (): JSX.Element => {
   };
 
   const getNewTotalStake = () => {
-    if (remainingBlockNumbersToUnstake === undefined || stakedAmount === undefined) {
+    if (remainingBlockNumbersToUnstake === undefined || stakedAmount === undefined || !isValid) {
       return undefined;
     }
 
@@ -633,31 +632,31 @@ const Staking = (): JSX.Element => {
 
   const renderEstimatedAPYLabel = () => {
     if (
-      estimatedRewardAmountAndAPYIdle ||
       estimatedRewardAmountAndAPYLoading ||
+      !projectedRewardAmountAndAPY ||
       errors[LOCK_TIME] ||
       errors[LOCKING_AMOUNT]
     ) {
       return '-';
     }
     if (estimatedRewardAmountAndAPY === undefined) {
-      throw new Error('Something went wrong!');
+      return formatPercentage(projectedRewardAmountAndAPY.apy.toNumber());
     }
 
     return formatPercentage(estimatedRewardAmountAndAPY.apy.toNumber());
   };
 
   const renderEstimatedRewardAmountLabel = () => {
     if (
-      estimatedRewardAmountAndAPYIdle ||
       estimatedRewardAmountAndAPYLoading ||
+      !projectedRewardAmountAndAPY ||
       errors[LOCK_TIME] ||
       errors[LOCKING_AMOUNT]
     ) {
       return '-';
     }
     if (estimatedRewardAmountAndAPY === undefined) {
-      throw new Error('Something went wrong!');
+      return `${displayMonetaryAmount(projectedRewardAmountAndAPY.amount)} ${GOVERNANCE_TOKEN_SYMBOL}`;
     }
 
     return `${displayMonetaryAmount(estimatedRewardAmountAndAPY.amount)} ${GOVERNANCE_TOKEN_SYMBOL}`;
@@ -714,7 +713,6 @@ const Staking = (): JSX.Element => {
     claimableRewardAmountLoading ||
     projectedRewardAmountAndAPYIdle ||
     projectedRewardAmountAndAPYLoading ||
-    estimatedRewardAmountAndAPYIdle ||
     estimatedRewardAmountAndAPYLoading ||
     stakedAmountAndEndBlockIdle ||
     stakedAmountAndEndBlockLoading;