Claim bug fix

src/components/asset-list/RecyclerAssetList2/core/RawRecyclerList.tsx

@@ -1,4 +1,4 @@
-import React, { LegacyRef, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import React, { LegacyRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { LayoutChangeEvent } from 'react-native';
 import { SetterOrUpdater } from 'recoil';
 import { DataProvider, RecyclerListView } from 'recyclerlistview';
@@ -22,7 +22,7 @@ import { remoteCardsStore } from '@/state/remoteCards/remoteCards';
 import { useRoute } from '@react-navigation/native';
 import Routes from '@/navigation/routesNames';
 import { useRemoteConfig } from '@/model/remoteConfig';
-import { RainbowContext } from '@/helpers/RainbowContext';
+import { useExperimentalConfig } from '@/config/experimentalHooks';
 
 const dataProvider = new DataProvider((r1, r2) => {
   return r1.uid !== r2.uid;
@@ -57,7 +57,7 @@ const RawMemoRecyclerAssetList = React.memo(function RawRecyclerAssetList({
   type?: AssetListType;
 }) {
   const remoteConfig = useRemoteConfig();
-  const experimentalConfig = useContext(RainbowContext).config;
+  const experimentalConfig = useExperimentalConfig();
   const currentDataProvider = useMemoOne(() => dataProvider.cloneWithRows(briefSectionsData), [briefSectionsData]);
   const { isCoinListEdited, setIsCoinListEdited } = useCoinListEdited();
   const y = useRecyclerAssetListPosition()!;

src/config/experimentalHooks.ts

@@ -12,6 +12,15 @@ const useExperimentalFlag = (name: any) => {
     return defaultConfig[name].value;
   }
 };
+
+export const useExperimentalConfig = () => {
+  if (IS_DEV || isTestFlight) {
+    return useContext(RainbowContext).config;
+  } else {
+    return defaultConfig;
+  }
+};
+
 export default useExperimentalFlag;
 
 export * from './experimental';

src/hooks/useWalletSectionsData.ts

@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import useAccountSettings from './useAccountSettings';
 import useCoinListEditOptions from './useCoinListEditOptions';
 import useCoinListEdited from './useCoinListEdited';
@@ -13,9 +13,9 @@ import { useLegacyNFTs } from '@/resources/nfts';
 import useNftSort from './useNFTsSortBy';
 import useWalletsWithBalancesAndNames from './useWalletsWithBalancesAndNames';
 import { useRemoteConfig } from '@/model/remoteConfig';
-import { RainbowContext } from '@/helpers/RainbowContext';
 import { usePositions } from '@/resources/defi/PositionsQuery';
 import { useClaimables } from '@/resources/addys/claimables/query';
+import { useExperimentalConfig } from '@/config/experimentalHooks';
 
 export default function useWalletSectionsData({
   type,
@@ -50,7 +50,7 @@ export default function useWalletSectionsData({
   const { hiddenTokens } = useHiddenTokens();
 
   const remoteConfig = useRemoteConfig();
-  const experimentalConfig = useContext(RainbowContext).config;
+  const experimentalConfig = useExperimentalConfig();
 
   const { hiddenCoinsObj: hiddenCoins, pinnedCoinsObj: pinnedCoins } = useCoinListEditOptions();
 

src/resources/addys/claimables/query.ts

@@ -79,6 +79,7 @@ export function useClaimables(
     ...config,
     enabled: !!address && (remoteFlag || localFlag) && !IS_TEST,
     staleTime: 1000 * 60 * 2,
+    refetchInterval: 1000 * 60 * 2,
     cacheTime: 1000 * 60 * 60 * 24,
   });
 }

src/screens/claimables/ClaimingClaimableSharedUI.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { AccentColorProvider, Bleed, Box, Inline, Text, TextShadow, globalColors, useColorMode } from '@/design-system';
 import * as i18n from '@/languages';
 import { ListHeader, Panel, TapToDismiss, controlPanelStyles } from '@/components/SmoothPager/ListPanel';
-import { deviceUtils, haptics, safeAreaInsetValues, watchingAlert } from '@/utils';
+import { deviceUtils, safeAreaInsetValues, watchingAlert } from '@/utils';
 import { View } from 'react-native';
 import { IS_IOS } from '@/env';
 import { ButtonPressAnimation, ShimmerAnimation } from '@/components/animations';
@@ -14,7 +14,7 @@ import { chainsLabel } from '@/chains';
 import { useNavigation } from '@/navigation';
 import { TextColor } from '@/design-system/color/palettes';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
-import { convertAmountToNativeDisplayWorklet, handleSignificantDecimalsWithThreshold } from '@/__swaps__/utils/numbers';
+import { convertAmountToNativeDisplayWorklet } from '@/__swaps__/utils/numbers';
 import { useAccountSettings, useWallets } from '@/hooks';
 import { enableActionsOnReadOnlyWallet } from '@/config';
 import { debounce } from 'lodash';

src/screens/claimables/ClaimingSponsoredClaimable.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ClaimResponse, SponsoredClaimable } from '@/resources/addys/claimables/types';
+import { Claimable, ClaimResponse, SponsoredClaimable } from '@/resources/addys/claimables/types';
 import { ClaimingClaimableSharedUI, ClaimStatus } from './ClaimingClaimableSharedUI';
 import { logger, RainbowError } from '@/logger';
 import { queryClient } from '@/react-query';
@@ -9,12 +9,15 @@ import { useMutation } from '@tanstack/react-query';
 import { getProvider } from '@/handlers/web3';
 import { useAccountSettings } from '@/hooks';
 import { haptics } from '@/utils';
+import { delay } from 'lodash';
 
 export const ClaimingSponsoredClaimable = ({ claimable }: { claimable: SponsoredClaimable }) => {
   const { accountAddress, nativeCurrency } = useAccountSettings();
 
   const [claimStatus, setClaimStatus] = useState<ClaimStatus>('idle');
 
+  const queryKey = claimablesQueryKey({ address: accountAddress, currency: nativeCurrency });
+
   const { mutate: claimClaimable } = useMutation({
     mutationFn: async () => {
       const provider = getProvider({ chainId: claimable.chainId });
@@ -59,15 +62,16 @@ export const ClaimingSponsoredClaimable = ({ claimable }: { claimable: Sponsored
         setClaimStatus('error');
         logger.error(new RainbowError('[ClaimSponsoredClaimable]: sponsored claim api call returned unsuccessful response'));
       } else {
+        haptics.notificationSuccess();
+
         if (response.data.payload.claim_transaction_status?.transaction_hash) {
-          haptics.notificationSuccess();
           setClaimStatus('success');
         } else {
-          haptics.notificationSuccess();
           setClaimStatus('pending');
         }
-        // Clear and refresh claimables data
-        queryClient.invalidateQueries(claimablesQueryKey({ address: accountAddress, currency: nativeCurrency }));
+
+        // Immediately remove the claimable from cached data
+        queryClient.setQueryData(queryKey, (oldData: Claimable[] | undefined) => oldData?.filter(c => c.uniqueId !== claimable.uniqueId));
       }
     },
     onError: e => {
@@ -86,6 +90,10 @@ export const ClaimingSponsoredClaimable = ({ claimable }: { claimable: Sponsored
         );
       }
     },
+    onSettled: () => {
+      // Clear and refresh claimables data 20s after claim button is pressed, regardless of success or failure
+      delay(() => queryClient.invalidateQueries(queryKey), 20_000);
+    },
   });
 
   return (

src/screens/claimables/ClaimingTransactionClaimable.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAccountSettings, useGas } from '@/hooks';
 import { ethereumUtils, haptics } from '@/utils';
-import { TransactionClaimable } from '@/resources/addys/claimables/types';
+import { Claimable, TransactionClaimable } from '@/resources/addys/claimables/types';
 import { estimateGasWithPadding, getProvider } from '@/handlers/web3';
 import { parseGasParamsForTransaction } from '@/parsers';
 import { getNextNonce } from '@/state/nonces';
@@ -15,6 +15,7 @@ import { loadWallet } from '@/model/wallet';
 import { walletExecuteRap } from '@/rapsV2/execute';
 import { claimablesQueryKey } from '@/resources/addys/claimables/query';
 import { queryClient } from '@/react-query';
+import { delay } from 'lodash';
 
 // supports legacy and new gas types
 export type TransactionClaimableTxPayload = TransactionRequest &
@@ -52,6 +53,8 @@ export const ClaimingTransactionClaimable = ({ claimable }: { claimable: Transac
   const [txPayload, setTxPayload] = useState<TransactionClaimableTxPayload | undefined>();
   const [claimStatus, setClaimStatus] = useState<ClaimStatus>('idle');
 
+  const queryKey = claimablesQueryKey({ address: accountAddress, currency: nativeCurrency });
+
   const provider = useMemo(() => getProvider({ chainId: claimable.chainId }), [claimable.chainId]);
 
   const buildTxPayload = useCallback(async () => {
@@ -174,8 +177,9 @@ export const ClaimingTransactionClaimable = ({ claimable }: { claimable: Transac
       } else {
         haptics.notificationSuccess();
         setClaimStatus('success');
-        // Clear and refresh claimables data
-        queryClient.invalidateQueries(claimablesQueryKey({ address: accountAddress, currency: nativeCurrency }));
+
+        // Immediately remove the claimable from cached data
+        queryClient.setQueryData(queryKey, (oldData: Claimable[] | undefined) => oldData?.filter(c => c.uniqueId !== claimable.uniqueId));
       }
     },
     onError: e => {
@@ -194,6 +198,10 @@ export const ClaimingTransactionClaimable = ({ claimable }: { claimable: Transac
         );
       }
     },
+    onSettled: () => {
+      // Clear and refresh claimables data 20s after claim button is pressed, regardless of success or failure
+      delay(() => queryClient.invalidateQueries(queryKey), 20_000);
+    },
   });
 
   return (