diff --git a/src/hooks/usePendingTransactions.ts b/src/hooks/usePendingTransactions.ts index 43151480cc8..e4bb522f86b 100644 --- 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 index 9b8a8b83dc6..c56949755fa 100644 --- 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; + }) => { + const { pendingTransactions } = usePendingTransactions(); + + return pendingTransactions.length > 0 ? ( + + + + + + {pendingTransactions.length} + + + + + ) : ( + + ); + } +); + interface TabBarProps { descriptors: MaterialTopTabDescriptorMap; jumpTo: (key: string) => void; @@ -225,7 +258,16 @@ const TabBar = ({ descriptors, jumpTo, navigation, state }: TabBarProps) => { > - + {tabBarIcon === 'tabActivity' ? ( + + ) : ( + + )}