[release] Kintsugi 2.30.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interbtc-ui",
-  "version": "2.30.2",
+  "version": "2.30.5",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.1.1",

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

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { useErrorHandler, withErrorBoundary } from 'react-error-boundary';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 
 import { StoreType } from '@/common/types/util.types';
@@ -119,12 +119,14 @@ const Staking = (): JSX.Element => {
   const { data: balances, isLoading: isBalancesLoading } = useGetBalances();
   const governanceTokenBalance = balances?.[GOVERNANCE_TOKEN.ticker];
 
+  const queryClient = useQueryClient();
+
   const {
     register,
     handleSubmit,
     watch,
     reset,
-    formState: { errors, isDirty, isValid },
+    formState: { errors, isValid, isValidating },
     trigger,
     setValue
   } = useForm<StakingFormData>({
@@ -151,8 +153,7 @@ const Staking = (): JSX.Element => {
     isIdle: voteGovernanceTokenBalanceIdle,
     isLoading: voteGovernanceTokenBalanceLoading,
     data: voteGovernanceTokenBalance,
-    error: voteGovernanceTokenBalanceError,
-    refetch: voteGovernanceTokenBalanceRefetch
+    error: voteGovernanceTokenBalanceError
   } = useQuery<VoteGovernanceTokenMonetaryAmount, Error>(
     [GENERIC_FETCHER, 'escrow', 'votingBalance', selectedAccountAddress],
     genericFetcher<VoteGovernanceTokenMonetaryAmount>(),
@@ -167,8 +168,7 @@ const Staking = (): JSX.Element => {
     isIdle: claimableRewardAmountIdle,
     isLoading: claimableRewardAmountLoading,
     data: claimableRewardAmount,
-    error: claimableRewardAmountError,
-    refetch: claimableRewardAmountRefetch
+    error: claimableRewardAmountError
   } = useQuery<GovernanceTokenMonetaryAmount, Error>(
     [GENERIC_FETCHER, 'escrow', 'getRewards', selectedAccountAddress],
     genericFetcher<GovernanceTokenMonetaryAmount>(),
@@ -183,8 +183,7 @@ const Staking = (): JSX.Element => {
     isIdle: projectedRewardAmountAndAPYIdle,
     isLoading: projectedRewardAmountAndAPYLoading,
     data: projectedRewardAmountAndAPY,
-    error: rewardAmountAndAPYError,
-    refetch: rewardAmountAndAPYRefetch
+    error: rewardAmountAndAPYError
   } = useQuery<EstimatedRewardAmountAndAPY, Error>(
     [GENERIC_FETCHER, 'escrow', 'getRewardEstimate', selectedAccountAddress],
     genericFetcher<EstimatedRewardAmountAndAPY>(),
@@ -197,7 +196,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,19 +217,11 @@ 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,
     data: stakedAmountAndEndBlock,
-    error: stakedAmountAndEndBlockError,
-    refetch: stakedAmountAndEndBlockRefetch
+    error: stakedAmountAndEndBlockError
   } = useQuery<StakedAmountAndEndBlock, Error>(
     [GENERIC_FETCHER, 'escrow', 'getStakedBalance', selectedAccountAddress],
     genericFetcher<StakedAmountAndEndBlock>(),
@@ -266,10 +256,7 @@ const Staking = (): JSX.Element => {
     },
     {
       onSuccess: () => {
-        voteGovernanceTokenBalanceRefetch();
-        stakedAmountAndEndBlockRefetch();
-        claimableRewardAmountRefetch();
-        rewardAmountAndAPYRefetch();
+        queryClient.invalidateQueries({ queryKey: [GENERIC_FETCHER, 'escrow'] });
         reset({
           [LOCKING_AMOUNT]: '0.0',
           [LOCK_TIME]: '0'
@@ -307,10 +294,7 @@ const Staking = (): JSX.Element => {
     },
     {
       onSuccess: () => {
-        voteGovernanceTokenBalanceRefetch();
-        stakedAmountAndEndBlockRefetch();
-        claimableRewardAmountRefetch();
-        rewardAmountAndAPYRefetch();
+        queryClient.invalidateQueries({ queryKey: [GENERIC_FETCHER, 'escrow'] });
         reset({
           [LOCKING_AMOUNT]: '0.0',
           [LOCK_TIME]: '0'
@@ -319,6 +303,13 @@ const Staking = (): JSX.Element => {
     }
   );
 
+  React.useEffect(() => {
+    if (isValidating || !isValid || !estimatedRewardAmountAndAPYRefetch) return;
+
+    estimatedRewardAmountAndAPYRefetch();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isValid, isValidating, lockTime, lockingAmount, estimatedRewardAmountAndAPYRefetch]);
+
   React.useEffect(() => {
     if (!lockTime) return;
     if (!currentBlockNumber) return;
@@ -331,10 +322,12 @@ const Staking = (): JSX.Element => {
   }, [currentBlockNumber, lockTime, stakedAmountAndEndBlock]);
 
   React.useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: [GENERIC_FETCHER, 'escrow'] });
     reset({
       [LOCKING_AMOUNT]: '',
       [LOCK_TIME]: ''
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedAccount, reset]);
 
   const votingBalanceGreaterThanZero = voteGovernanceTokenBalance?.gt(ZERO_VOTE_GOVERNANCE_TOKEN_AMOUNT);
@@ -583,7 +576,7 @@ const Staking = (): JSX.Element => {
 
   const renderNewVoteGovernanceTokenGainedLabel = () => {
     const newTotalStakeAmount = getNewTotalStake();
-    if (voteGovernanceTokenBalance === undefined || newTotalStakeAmount === undefined) {
+    if (voteGovernanceTokenBalance === undefined || newTotalStakeAmount === undefined || !isValid) {
       return '-';
     }
 
@@ -595,7 +588,7 @@ const Staking = (): JSX.Element => {
   };
 
   const getNewTotalStake = () => {
-    if (remainingBlockNumbersToUnstake === undefined || stakedAmount === undefined) {
+    if (remainingBlockNumbersToUnstake === undefined || stakedAmount === undefined || !isValid) {
       return undefined;
     }
 
@@ -633,31 +626,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 +707,6 @@ const Staking = (): JSX.Element => {
     claimableRewardAmountLoading ||
     projectedRewardAmountAndAPYIdle ||
     projectedRewardAmountAndAPYLoading ||
-    estimatedRewardAmountAndAPYIdle ||
     estimatedRewardAmountAndAPYLoading ||
     stakedAmountAndEndBlockIdle ||
     stakedAmountAndEndBlockLoading;