fix(wallet-mobile): history tx flicker in android (#3659)

apps/wallet-mobile/src/WalletNavigator.tsx

@@ -199,7 +199,6 @@ const WalletTabNavigator = () => {
                 ),
               tabBarLabel: strings.menuTabBarLabel,
               tabBarTestID: 'menuTabBarButton',
-              headerTitle: ({children}) => <NetworkTag>{children}</NetworkTag>,
             }}
           />
         </Tab.Navigator>

apps/wallet-mobile/src/features/Transactions/TxHistoryNavigator.tsx

@@ -9,10 +9,10 @@ import {ThemedPalette, useTheme} from '@yoroi/theme'
 import {Resolver} from '@yoroi/types'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
-import {StyleSheet, View, ViewProps} from 'react-native'
+import {TouchableOpacity} from 'react-native'
 
 import {Boundary} from '../../components/Boundary/Boundary'
-import {Spacer} from '../../components/Spacer/Spacer'
+import {Icon} from '../../components/Icon'
 import {unstoppableApiKey} from '../../kernel/env'
 import {
   BackButton,
@@ -28,7 +28,6 @@ import {ReceiveProvider} from '../Receive/common/ReceiveProvider'
 import {DescribeSelectedAddressScreen} from '../Receive/useCases/DescribeSelectedAddressScreen'
 import {ListMultipleAddressesScreen} from '../Receive/useCases/ListMultipleAddressesScreen'
 import {RequestSpecificAmountScreen} from '../Receive/useCases/RequestSpecificAmountScreen'
-import {CodeScannerButton} from '../Scan/common/CodeScannerButton'
 import {ScanCodeScreen} from '../Scan/useCases/ScanCodeScreen'
 import {ShowCameraPermissionDeniedScreen} from '../Scan/useCases/ShowCameraPermissionDeniedScreen/ShowCameraPermissionDeniedScreen'
 import {ConfirmTxScreen} from '../Send/useCases/ConfirmTx/ConfirmTxScreen'
@@ -87,9 +86,6 @@ export const TxHistoryNavigator = () => {
     })
   }, [wallet.externalAddresses, wallet.networkManager.tokenManager, wallet.portfolioPrimaryTokenInfo])
 
-  // navigator components
-  const headerRightHistory = React.useCallback(() => <HeaderRightHistory />, [])
-
   // exchange
   const exchangeManager = React.useMemo(() => {
     const api = exchangeApiMaker({
@@ -130,7 +126,7 @@ export const TxHistoryNavigator = () => {
                 options={{
                   title: meta.name,
                   headerTransparent: true,
-                  headerRight: headerRightHistory,
+                  ...(!meta.isReadOnly && {headerRight: () => <HeaderRightHistory />}),
                 }}
               />
 
@@ -538,45 +534,18 @@ const useStrings = () => {
 }
 
 const HeaderRightHistory = React.memo(() => {
-  const {meta} = useSelectedWallet()
   const navigation = useNavigation<TxHistoryRouteNavigation>()
-  const {styles, colors} = useStyles()
+  const {color} = useTheme()
 
   return (
-    <Row style={styles.row}>
-      {!meta.isReadOnly && (
-        <>
-          <CodeScannerButton
-            onPress={() => navigation.navigate('scan-start', {insideFeature: 'scan'})}
-            color={colors.gray}
-          />
-
-          <Spacer width={10} />
-        </>
-      )}
-    </Row>
+    <TouchableOpacity
+      onPress={() => navigation.navigate('scan-start', {insideFeature: 'scan'})}
+      style={{paddingRight: 8}}
+    >
+      <Icon.Qr color={color.gray_max} />
+    </TouchableOpacity>
   )
 })
-const Row = ({children, style, ...rest}: ViewProps) => (
-  <View style={[style, {flexDirection: 'row'}]} {...rest}>
-    {children}
-  </View>
-)
-
-const useStyles = () => {
-  const {color} = useTheme()
-
-  const styles = StyleSheet.create({
-    row: {
-      paddingStart: 8,
-    },
-  })
-
-  return {
-    styles,
-    colors: {gray: color.gray_max},
-  } as const
-}
 
 const sendOptions = (navigationOptions: StackNavigationOptions, color: ThemedPalette) => ({
   ...navigationOptions,

apps/wallet-mobile/src/hooks/useStatusBar.ts

@@ -6,7 +6,6 @@ import {Platform, StatusBar, StatusBarStyle} from 'react-native'
 type StatusBarColor = {
   bgColorAndroid: Color
   statusBarStyle: StatusBarStyle | undefined
-  translucent: boolean
 }
 export const useStatusBar = (currentRouteName: string | undefined) => {
   const {color, isDark} = useTheme()
@@ -22,8 +21,8 @@ export const useStatusBar = (currentRouteName: string | undefined) => {
       const style = getStatusBarStyleByRoute({currentRouteName, isDark, color})
       statusBarStyleByRoute.current = style
       if (Platform.OS === 'android') {
-        StatusBar.setBackgroundColor(style.bgColorAndroid, true)
-        StatusBar.setTranslucent(style.translucent)
+        StatusBar.setBackgroundColor(style.bgColorAndroid)
+        StatusBar.setTranslucent(true)
       }
       style.statusBarStyle !== undefined && StatusBar.setBarStyle(style.statusBarStyle, true)
     }
@@ -44,27 +43,23 @@ const getStatusBarStyleByRoute = ({
   if (currentRouteName) {
     if (currentRouteName === 'history-list') {
       return {
-        translucent: true,
         bgColorAndroid: 'rgba(0,0,0,0)', // transparent
         statusBarStyle: undefined,
       }
     } else if (oldBlueRoutes.includes(currentRouteName)) {
       return {
-        translucent: false,
         // old blue, not present in the current theming
         bgColorAndroid: '#254BC9',
         statusBarStyle: 'light-content',
       }
     } else if (currentRouteName === 'scan-start') {
       return {
-        translucent: false,
-        bgColorAndroid: color.white_static,
+        bgColorAndroid: color.black_static,
         statusBarStyle: 'dark-content',
       }
     }
   }
   return {
-    translucent: false,
     bgColorAndroid: isDark ? color.bg_color_max : color.white_static,
     statusBarStyle: isDark ? 'light-content' : 'dark-content',
   }

apps/wallet-mobile/src/kernel/navigation.tsx

@@ -107,7 +107,6 @@ export const defaultMaterialTopTabNavigationOptions = (
 // ROUTES
 export type WalletTabRoutes = {
   history: NavigatorScreenParams<TxHistoryRoutes>
-  'staking-dashboard': NavigatorScreenParams<DashboardRoutes>
   portfolio: NavigatorScreenParams<Portfolio2Routes>
   discover: NavigatorScreenParams<DiscoverRoutes>
   menu: NavigatorScreenParams<MenuRoutes>
@@ -625,7 +624,6 @@ const routesWithTabBar: Record<keyof WalletTabRoutes, string[]> = {
   portfolio: ['dashboard-portfolio'],
   discover: ['discover-select-dapp-from-list'],
   menu: ['_menu'],
-  'staking-dashboard': ['staking-dashboard-main'],
 }
 
 const getFocusedRouteName = (state: Partial<NavigationState> | NavigationState['routes'][0]['state']): string[] => {

apps/wallet-mobile/src/legacy/Dashboard/DashboardNavigator.tsx

@@ -27,6 +27,7 @@ export const DashboardNavigator = () => {
       <Stack.Navigator
         screenOptions={{
           ...defaultStackNavigationOptions(atoms, color),
+          title: strings.title,
           headerTitle: ({children}) => <NetworkTag>{children}</NetworkTag>,
         }}
       >
@@ -35,27 +36,17 @@ export const DashboardNavigator = () => {
           component={Dashboard}
           options={{
             title: meta.name,
-            headerTitle: ({children}) => <NetworkTag>{children}</NetworkTag>,
           }}
         />
 
         <Stack.Screen //
           name="staking-center"
           component={StakingCenter}
-          options={{title: strings.title, headerTitle: ({children}) => <NetworkTag>{children}</NetworkTag>}}
         />
 
-        <Stack.Screen
-          name="delegation-confirmation"
-          component={DelegationConfirmation}
-          options={{title: strings.title, headerTitle: ({children}) => <NetworkTag>{children}</NetworkTag>}}
-        />
+        <Stack.Screen name="delegation-confirmation" component={DelegationConfirmation} />
 
-        <Stack.Screen
-          name="delegation-failed-tx"
-          component={FailedTxScreen}
-          options={{title: strings.title, headerTitle: ({children}) => <NetworkTag>{children}</NetworkTag>}}
-        />
+        <Stack.Screen name="delegation-failed-tx" component={FailedTxScreen} />
       </Stack.Navigator>
     </GovernanceProvider>
   )