Revert "Merge pull request BlueWallet#6718 from BlueWallet/h" (BlueWa…

…llet#6739)
Hendry5479 · Jun 22, 2024 · b1d38ed · b1d38ed
1 parent ce7a2b5
commit b1d38ed
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 73 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { StyleSheet, Text, Animated } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+
 import loc from '../loc';
 import PlusIcon from './icons/PlusIcon';
 import { useTheme } from './themes';
@@ -8,11 +9,9 @@ interface HeaderProps {
   leftText: string;
   isDrawerList?: boolean;
   onNewWalletPress?: () => void;
-  scrollY?: Animated.Value;
-  staticText?: boolean;
 }
 
-export const Header: React.FC<HeaderProps> = ({ leftText, isDrawerList, onNewWalletPress, scrollY, staticText = false }) => {
+export const Header: React.FC<HeaderProps> = ({ leftText, isDrawerList, onNewWalletPress }) => {
   const { colors } = useTheme();
   const styleWithProps = StyleSheet.create({
     root: {
@@ -25,31 +24,11 @@ export const Header: React.FC<HeaderProps> = ({ leftText, isDrawerList, onNewWal
     },
   });
 
-  const HEADER_MAX_HEIGHT = 55;
-  const HEADER_MIN_HEIGHT = 0;
-  const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;
-
-  const headerHeightAnimated = scrollY?.interpolate({
-    inputRange: [0, HEADER_SCROLL_DISTANCE],
-    outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
-    extrapolate: 'clamp',
-  });
-
-  const headerOpacity = scrollY?.interpolate({
-    inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
-    outputRange: [1, 0.5, 0],
-    extrapolate: 'clamp',
-  });
-
   return (
-    <Animated.View style={[styles.root, styleWithProps.root, !staticText && { height: headerHeightAnimated, opacity: headerOpacity }]}>
-      {staticText ? (
-        <Text style={[styles.text, styleWithProps.text]}>{leftText}</Text>
-      ) : (
-        <Animated.Text style={[styles.text, styleWithProps.text]}>{leftText}</Animated.Text>
-      )}
+    <View style={[styles.root, styleWithProps.root]}>
+      <Text style={[styles.text, styleWithProps.text]}>{leftText}</Text>
       {onNewWalletPress && <PlusIcon accessibilityRole="button" accessibilityLabel={loc.wallets.add_title} onPress={onNewWalletPress} />}
-    </Animated.View>
+    </View>
   );
 };
 

diff --git a/navigation/DetailViewScreensStack.tsx b/navigation/DetailViewScreensStack.tsx
@@ -1,10 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
-import { I18nManager } from 'react-native';
+import { I18nManager, View } from 'react-native';
 import { isDesktop } from '../blue_modules/environment';
 import HeaderRightButton from '../components/HeaderRightButton';
 import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
+import { useExtendedNavigation } from '../hooks/useExtendedNavigation';
 import loc from '../loc';
 import LdkInfo from '../screen/lnd/ldkInfo';
 import LNDViewAdditionalInvoiceInformation from '../screen/lnd/lndViewAdditionalInvoiceInformation';
@@ -63,26 +64,41 @@ import SignVerifyStackRoot from './SignVerifyStack';
 import ViewEditMultisigCosignersStackRoot from './ViewEditMultisigCosignersStack';
 import WalletExportStack from './WalletExportStack';
 import WalletXpubStackRoot from './WalletXpubStack';
+import PlusIcon from '../components/icons/PlusIcon';
 import SettingsButton from '../components/icons/SettingsButton';
 
 const DetailViewStackScreensStack = () => {
   const theme = useTheme();
+  const navigation = useExtendedNavigation();
 
   const SaveButton = useMemo(() => <HeaderRightButton testID="SaveButton" disabled={true} title={loc.wallets.details_save} />, []);
   const DetailButton = useMemo(() => <HeaderRightButton testID="DetailButton" disabled={true} title={loc.send.create_details} />, []);
 
+  const navigateToAddWallet = useCallback(() => {
+    navigation.navigate('AddWalletRoot');
+  }, [navigation]);
+
   const useWalletListScreenOptions = useMemo<NativeStackNavigationOptions>(() => {
+    const RightBarButtons = (
+      <>
+        <PlusIcon accessibilityRole="button" accessibilityLabel={loc.wallets.add_title} onPress={navigateToAddWallet} />
+        <View style={styles.width24} />
+        <SettingsButton />
+      </>
+    );
+
     return {
       title: loc.wallets.wallets,
       navigationBarColor: theme.colors.navigationBarColor,
       headerShown: !isDesktop,
+      headerLargeTitle: true,
       headerStyle: {
         backgroundColor: theme.colors.customHeader,
       },
-      headerRight: I18nManager.isRTL ? undefined : () => <SettingsButton />,
-      headerLeft: I18nManager.isRTL ? () => <SettingsButton /> : undefined,
+      headerRight: I18nManager.isRTL ? undefined : () => RightBarButtons,
+      headerLeft: I18nManager.isRTL ? () => RightBarButtons : undefined,
     };
-  }, [theme.colors.customHeader, theme.colors.navigationBarColor]);
+  }, [navigateToAddWallet, theme.colors.customHeader, theme.colors.navigationBarColor]);
 
   const walletListScreenOptions = useWalletListScreenOptions;
   return (
@@ -145,6 +161,8 @@ const DetailViewStackScreensStack = () => {
             backgroundColor: theme.colors.customHeader,
           },
           headerRight: () => DetailButton,
+          headerBackTitleStyle: { fontSize: 0 },
+          headerBackTitleVisible: true,
         })(theme)}
       />
       <DetailViewStack.Screen name="CPFP" component={CPFP} options={CPFP.navigationOptions(theme)} />
@@ -250,6 +268,9 @@ const DetailViewStackScreensStack = () => {
         options={navigationStyle({
           headerTransparent: true,
           title: loc.settings.header,
+          // workaround to deal with the flicker when headerBackTitleVisible is false
+          headerBackTitleStyle: { fontSize: 0 },
+          headerBackTitleVisible: true,
           headerShadowVisible: false,
           headerLargeTitle: true,
           animationTypeForReplace: 'push',
@@ -367,3 +388,9 @@ const DetailViewStackScreensStack = () => {
 };
 
 export default DetailViewStackScreensStack;
+
+const styles = {
+  width24: {
+    width: 24,
+  },
+};
diff --git a/screen/settings/SettingsPrivacy.tsx b/screen/settings/SettingsPrivacy.tsx
@@ -102,7 +102,7 @@ const SettingsPrivacy: React.FC = () => {
     <ScrollView style={[styles.root, styleHooks.root]} contentInsetAdjustmentBehavior="automatic" automaticallyAdjustContentInsets>
       {Platform.OS === 'android' ? (
         <View style={styles.headerContainer}>
-          <Header leftText={loc.settings.general} staticText />
+          <Header leftText={loc.settings.general} />
         </View>
       ) : null}
 

diff --git a/screen/wallets/DrawerList.tsx b/screen/wallets/DrawerList.tsx
@@ -142,7 +142,7 @@ const DrawerList: React.FC<DrawerListProps> = memo(({ navigation }) => {
       showsHorizontalScrollIndicator={false}
       showsVerticalScrollIndicator={false}
     >
-      <Header leftText={loc.wallets.list_title} onNewWalletPress={onNewWalletPress} isDrawerList staticText />
+      <Header leftText={loc.wallets.list_title} onNewWalletPress={onNewWalletPress} isDrawerList />
       <WalletsCarousel
         // @ts-ignore: refactor later
         data={state.wallets.concat(false as any)}

diff --git a/screen/wallets/WalletsList.tsx b/screen/wallets/WalletsList.tsx
@@ -1,16 +1,6 @@
-import React, { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import React, { useCallback, useEffect, useReducer, useRef } from 'react';
 import { useFocusEffect, useIsFocused, useRoute } from '@react-navigation/native';
-import {
-  findNodeHandle,
-  Image,
-  InteractionManager,
-  SectionList,
-  StyleSheet,
-  Text,
-  useWindowDimensions,
-  View,
-  Animated,
-} from 'react-native';
+import { findNodeHandle, Image, InteractionManager, SectionList, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
 import A from '../../blue_modules/analytics';
 import BlueClipboard from '../../blue_modules/clipboard';
 import { isDesktop } from '../../blue_modules/environment';
@@ -31,7 +21,6 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { DetailViewStackParamList } from '../../navigation/DetailViewStackParamList';
 import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import { useStorage } from '../../hooks/context/useStorage';
-import { Header } from '../../components/Header';
 
 const WalletsListSections = { CAROUSEL: 'CAROUSEL', TRANSACTIONS: 'TRANSACTIONS' };
 
@@ -117,15 +106,13 @@ const WalletsList: React.FC = () => {
   } = useStorage();
   const { width } = useWindowDimensions();
   const { colors, scanImage } = useTheme();
-  const { navigate, setOptions } = useExtendedNavigation<NavigationProps>();
+  const { navigate } = useExtendedNavigation<NavigationProps>();
   const isFocused = useIsFocused();
   const routeName = useRoute().name;
   const dataSource = getTransactions(undefined, 10);
   const walletsCount = useRef<number>(wallets.length);
   const walletActionButtonsRef = useRef<any>();
 
-  const scrollY = useRef(new Animated.Value(0)).current;
-
   const stylesHook = StyleSheet.create({
     walletsListWrapper: {
       backgroundColor: colors.brandingColor,
@@ -162,21 +149,6 @@ const WalletsList: React.FC = () => {
     walletsCount.current = wallets.length;
   }, [wallets]);
 
-  const HeaderTitle = useMemo(() => {
-    const titleOpacity = scrollY.interpolate({
-      inputRange: [0, 200],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    });
-    return <Animated.Text style={[styles.nativeHeaderTitle, { opacity: titleOpacity }]}>{loc.wallets.list_title}</Animated.Text>;
-  }, [scrollY]);
-
-  useEffect(() => {
-    setOptions({
-      headerTitle: () => HeaderTitle,
-    });
-  }, [HeaderTitle, scrollY, setOptions]);
-
   const verifyBalance = useCallback(() => {
     if (getBalance() !== 0) {
       A(A.ENUM.GOT_NONZERO_BALANCE);
@@ -433,7 +405,6 @@ const WalletsList: React.FC = () => {
 
   return (
     <View style={styles.root}>
-      <Header leftText={loc.wallets.list_title} onNewWalletPress={() => navigate('AddWalletRoot')} scrollY={scrollY} />
       <View style={[styles.walletsListWrapper, stylesHook.walletsListWrapper]}>
         <SectionList<any | string, SectionData>
           removeClippedSubviews
@@ -450,8 +421,6 @@ const WalletsList: React.FC = () => {
           windowSize={21}
           maxToRenderPerBatch={10}
           updateCellsBatchingPeriod={50}
-          onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: false })}
-          scrollEventThrottle={16}
         />
         {renderScanButton()}
       </View>
@@ -504,9 +473,4 @@ const styles = StyleSheet.create({
   transaction: {
     marginHorizontal: 0,
   },
-  nativeHeaderTitle: {
-    fontSize: 17,
-    fontWeight: '600',
-    color: 'black', // adjust color if necessary
-  },
 });