Merge pull request #7608 from BlueWallet/Carousel-on-the-main-screen-does-not-working-from-the-first-go

FIX: Carousel on the main screen does not working from the first go

components/Context/StorageProvider.tsx

@@ -246,8 +246,10 @@ export const StorageProvider = ({ children }: { children: React.ReactNode }) =>
         console.debug('[refreshAllWalletTransactions] Refresh already in progress');
         return;
       }
-      console.debug('[refreshAllWalletTransactions] Starting refreshAllWalletTransactions');
       refreshingRef.current = true;
+
+      await new Promise<void>(resolve => InteractionManager.runAfterInteractions(() => resolve()));
+
       const TIMEOUT_DURATION = 30000;
       const timeoutPromise = new Promise<never>((_resolve, reject) =>
         setTimeout(() => {
@@ -292,12 +294,11 @@ export const StorageProvider = ({ children }: { children: React.ReactNode }) =>
             console.debug('[refreshAllWalletTransactions] Saving data to disk');
             await saveToDisk();
           })(),
-
           timeoutPromise,
         ]);
         console.debug('[refreshAllWalletTransactions] Refresh completed successfully');
       } catch (error) {
-        console.error('[refreshAllWalletTransactions] Error in refreshAllWalletTransactions:', error);
+        console.error('[refreshAllWalletTransactions] Error:', error);
       } finally {
         console.debug('[refreshAllWalletTransactions] Resetting wallet transaction status and refresh lock');
         setWalletTransactionUpdateStatus(WalletTransactionsStatus.NONE);

components/WalletsCarousel.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import {
   Animated,
   FlatList,
@@ -187,32 +187,31 @@ export const WalletCarouselItem: React.FC<WalletCarouselItemProps> = React.memo(
     const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82;
     const { isLargeScreen } = useIsLargeScreen();
 
+    const springConfig = useMemo(() => ({ useNativeDriver: true, tension: 100 }), []);
+    const animateScale = useCallback(
+      (toValue: number, callback?: () => void) => {
+        Animated.spring(scaleValue, { toValue, ...springConfig }).start(callback);
+      },
+      [scaleValue, springConfig],
+    );
+
     const onPressedIn = useCallback(() => {
       if (animationsEnabled) {
-        Animated.spring(scaleValue, {
-          toValue: 0.95,
-          useNativeDriver: true,
-          tension: 100,
-        }).start();
+        animateScale(0.95);
       }
       if (onPressIn) onPressIn();
-    }, [scaleValue, animationsEnabled, onPressIn]);
+    }, [animateScale, animationsEnabled, onPressIn]);
 
     const onPressedOut = useCallback(() => {
       if (animationsEnabled) {
-        Animated.spring(scaleValue, {
-          toValue: 1.0,
-          useNativeDriver: true,
-          tension: 100,
-        }).start();
+        animateScale(1.0);
       }
       if (onPressOut) onPressOut();
-    }, [scaleValue, animationsEnabled, onPressOut]);
+    }, [animateScale, animationsEnabled, onPressOut]);
 
     const handlePress = useCallback(() => {
-      onPressedOut();
       onPress(item);
-    }, [item, onPress, onPressedOut]);
+    }, [item, onPress]);
 
     const opacity = isSelectedWallet === false ? 0.5 : 1.0;
     let image;
@@ -254,6 +253,8 @@ export const WalletCarouselItem: React.FC<WalletCarouselItemProps> = React.memo(
             if (handleLongPress) handleLongPress();
           }}
           onPress={handlePress}
+          delayHoverIn={0}
+          delayHoverOut={0}
         >
           <View style={[iStyles.shadowContainer, { backgroundColor: colors.background, shadowColor: colors.shadowColor }]}>
             <LinearGradient colors={WalletGradient.gradientsFor(item.type)} style={iStyles.grad}>
@@ -421,6 +422,7 @@ const WalletsCarousel = forwardRef<FlatListRefType, WalletsCarouselProps>((props
       showsHorizontalScrollIndicator={false}
       initialNumToRender={10}
       scrollEnabled={scrollEnabled}
+      keyboardShouldPersistTaps="handled"
       ListHeaderComponent={ListHeaderComponent}
       style={{ minHeight: sliderHeight + 12 }}
       onScrollToIndexFailed={onScrollToIndexFailed}

screen/wallets/WalletsList.tsx

@@ -122,27 +122,32 @@ const WalletsList: React.FC = () => {
     },
   });
 
-  /**
-   * Forcefully fetches TXs and balance for ALL wallets.
-   * Triggered manually by user on pull-to-refresh.
-   */
-  const refreshTransactions = useCallback(
-    async (showLoadingIndicator = true, showUpdateStatusIndicator = false) => {
-      if (isElectrumDisabled) {
-        dispatch({ type: ActionTypes.SET_LOADING, payload: false });
-        return;
-      }
+  const refreshWallets = useCallback(
+    async (index: number | undefined, showLoadingIndicator = true, showUpdateStatusIndicator = false) => {
+      if (isElectrumDisabled) return;
       dispatch({ type: ActionTypes.SET_LOADING, payload: showLoadingIndicator });
-      refreshAllWalletTransactions(undefined, showUpdateStatusIndicator).finally(() => {
+      try {
+        await refreshAllWalletTransactions(index, showUpdateStatusIndicator);
+      } catch (error) {
+        console.error(error);
+      } finally {
         dispatch({ type: ActionTypes.SET_LOADING, payload: false });
-      });
+      }
     },
     [isElectrumDisabled, refreshAllWalletTransactions],
   );
 
+  /**
+   * Forcefully fetches TXs and balance for ALL wallets.
+   * Triggered manually by user on pull-to-refresh.
+   */
+  const refreshTransactions = useCallback(() => {
+    refreshWallets(undefined, true, false);
+  }, [refreshWallets]);
+
   const onRefresh = useCallback(() => {
     console.debug('WalletsList onRefresh');
-    refreshTransactions(true, false);
+    refreshTransactions();
     // Optimized for Mac option doesn't like RN Refresh component. Menu Elements now handles it for macOS
   }, [refreshTransactions]);
 
@@ -200,7 +205,7 @@ const WalletsList: React.FC = () => {
   }, [navigation, onBarScanned, route.params?.onBarScanned]);
 
   useEffect(() => {
-    refreshTransactions(false, true);
+    refreshTransactions();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -219,10 +224,6 @@ const WalletsList: React.FC = () => {
     [navigation],
   );
 
-  const setIsLoading = useCallback((value: boolean) => {
-    dispatch({ type: ActionTypes.SET_LOADING, payload: value });
-  }, []);
-
   const onSnapToItem = useCallback(
     (e: { nativeEvent: { contentOffset: any } }) => {
       if (!isFocused) return;
@@ -233,12 +234,12 @@ const WalletsList: React.FC = () => {
       if (currentWalletIndex.current !== index) {
         console.debug('onSnapToItem', wallets.length === index ? 'NewWallet/Importing card' : index);
         if (wallets[index] && (wallets[index].timeToRefreshBalance() || wallets[index].timeToRefreshTransaction())) {
-          refreshAllWalletTransactions(index, false).finally(() => setIsLoading(false));
+          refreshWallets(index, false, false);
         }
         currentWalletIndex.current = index;
       }
     },
-    [isFocused, refreshAllWalletTransactions, setIsLoading, wallets, width],
+    [isFocused, refreshWallets, wallets, width],
   );
 
   const renderListHeaderComponent = useCallback(() => {