txs: add pending tx indicator (#5529)

* txs: add pending tx indicator * tweaks * fix * move out of comp * fix flash * rm bg color (i was wrong) --------- Co-authored-by: Ben Goldberg <[email protected]>
rainbow-me · Mar 19, 2024 · 2689b40 · 2689b40
1 parent 67212d3
commit 2689b40
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 15 deletions.
diff --git a/src/hooks/usePendingTransactions.ts b/src/hooks/usePendingTransactions.ts
@@ -17,5 +17,6 @@ export default function usePendingTransactions() {
 
   return {
     getPendingTransactionByHash,
+    pendingTransactions,
   };
 }
diff --git a/src/navigation/SwipeNavigator.tsx b/src/navigation/SwipeNavigator.tsx
@@ -1,37 +1,38 @@
-import { BlurView } from '@react-native-community/blur';
-import { createMaterialTopTabNavigator, MaterialTopTabNavigationEventMap } from '@react-navigation/material-top-tabs';
-import { MaterialTopTabDescriptorMap } from '@react-navigation/material-top-tabs/lib/typescript/src/types';
-import { NavigationHelpers, ParamListBase, RouteProp } from '@react-navigation/native';
-import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
-import { InteractionManager, View } from 'react-native';
-import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { LIGHT_SEPARATOR_COLOR } from '@/__swaps__/screens/Swap/constants';
 import { ButtonPressAnimation } from '@/components/animations';
 import { TabBarIcon } from '@/components/icons/TabBarIcon';
 import { FlexItem } from '@/components/layout';
 import { TestnetToast } from '@/components/toasts';
-import { useExperimentalFlag, DAPP_BROWSER, POINTS } from '@/config';
-import { Box, Columns, Stack, globalColors, useForegroundColor } from '@/design-system';
+import { DAPP_BROWSER, POINTS, useExperimentalFlag } from '@/config';
+import { Box, Columns, globalColors, Stack, useForegroundColor, Text, AccentColorProvider, Cover, Inset } from '@/design-system';
 import { IS_ANDROID, IS_IOS, IS_TEST } from '@/env';
 import { web3Provider } from '@/handlers/web3';
 import { isUsingButtonNavigation } from '@/helpers/statusBarHelper';
-import { useAccountAccentColor, useAccountSettings, useCoinListEdited, useDimensions } from '@/hooks';
+import { useAccountAccentColor, useAccountSettings, useCoinListEdited, useDimensions, usePendingTransactions } from '@/hooks';
 import { useRemoteConfig } from '@/model/remoteConfig';
 import RecyclerListViewScrollToTopProvider, {
   useRecyclerListViewScrollToTopContext,
 } from '@/navigation/RecyclerListViewScrollToTopContext';
-import WalletScreen from '@/screens/WalletScreen';
 import DappBrowserScreen from '@/screens/dapp-browser/DappBrowserScreen';
 import { discoverOpenSearchFnRef } from '@/screens/discover/components/DiscoverSearchContainer';
 import PointsScreen from '@/screens/points/PointsScreen';
-import { LIGHT_SEPARATOR_COLOR } from '@/__swaps__/screens/Swap/constants';
+import WalletScreen from '@/screens/WalletScreen';
 import { useTheme } from '@/theme';
 import { deviceUtils } from '@/utils';
+import { BlurView } from '@react-native-community/blur';
+import { createMaterialTopTabNavigator, MaterialTopTabNavigationEventMap } from '@react-navigation/material-top-tabs';
+import { MaterialTopTabDescriptorMap } from '@react-navigation/material-top-tabs/lib/typescript/src/types';
+import { NavigationHelpers, ParamListBase, RouteProp } from '@react-navigation/native';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { InteractionManager, View } from 'react-native';
+import Animated, { Easing, interpolate, SharedValue, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
-import ProfileScreen from '../screens/ProfileScreen';
+import { AnimatedSpinner } from '@/__swaps__/components/animations/AnimatedSpinner';
 import DiscoverScreen, { discoverScrollToTopFnRef } from '../screens/discover/DiscoverScreen';
+import ProfileScreen from '../screens/ProfileScreen';
+import Routes from './routesNames';
 import { ScrollPositionContext } from './ScrollPositionContext';
 import SectionListScrollToTopProvider, { useSectionListScrollToTopContext } from './SectionListScrollToTopContext';
-import Routes from './routesNames';
 
 export const TAB_BAR_HEIGHT = getTabBarHeight();
 
@@ -52,6 +53,38 @@ const fadeConfig = { duration: 300, easing: Easing.bezier(0.22, 1, 0.36, 1) };
 
 const Swipe = createMaterialTopTabNavigator();
 
+// eslint-disable-next-line react/display-name
+const ActivityTabIcon = React.memo(
+  ({
+    accentColor,
+    tabBarIcon,
+    index,
+    reanimatedPosition,
+  }: {
+    accentColor: string;
+    tabBarIcon: string;
+    index: number;
+    reanimatedPosition: SharedValue<number>;
+  }) => {
+    const { pendingTransactions } = usePendingTransactions();
+
+    return pendingTransactions.length > 0 ? (
+      <Box width={{ custom: 32 }} height={{ custom: 32 }} alignItems="center" justifyContent="center">
+        <AnimatedSpinner isLoading={true} color={accentColor} size={28} />
+        <Cover>
+          <Box width="full" height="full" padding={{ custom: 7 }} alignItems="center" justifyContent="center">
+            <Text color={{ custom: accentColor }} size="13pt" weight="heavy" align="center">
+              {pendingTransactions.length}
+            </Text>
+          </Box>
+        </Cover>
+      </Box>
+    ) : (
+      <TabBarIcon accentColor={accentColor} icon={tabBarIcon} index={index} reanimatedPosition={reanimatedPosition} />
+    );
+  }
+);
+
 interface TabBarProps {
   descriptors: MaterialTopTabDescriptorMap;
   jumpTo: (key: string) => void;
@@ -225,7 +258,16 @@ const TabBar = ({ descriptors, jumpTo, navigation, state }: TabBarProps) => {
             >
               <Stack alignHorizontal="center">
                 <Box alignItems="center" borderRadius={20} height="36px" justifyContent="center">
-                  <TabBarIcon accentColor={accentColor} icon={tabBarIcon} index={index} reanimatedPosition={reanimatedPosition} />
+                  {tabBarIcon === 'tabActivity' ? (
+                    <ActivityTabIcon
+                      accentColor={accentColor}
+                      tabBarIcon={tabBarIcon}
+                      index={index}
+                      reanimatedPosition={reanimatedPosition}
+                    />
+                  ) : (
+                    <TabBarIcon accentColor={accentColor} icon={tabBarIcon} index={index} reanimatedPosition={reanimatedPosition} />
+                  )}
                 </Box>
               </Stack>
             </ButtonPressAnimation>