chore(wallet-mobile): avoid some renders and dropping RNP slowly

apps/wallet-mobile/src/AppNavigator.tsx

@@ -48,7 +48,7 @@ export const AppNavigator = () => {
   })
 
   const firstAction = useFirstAction()
-  const onReady = () => {
+  const onReady = React.useCallback(() => {
     if (isLoggedIn) return
 
     // try first OS auth before navigating to os login screen
@@ -69,12 +69,12 @@ export const AppNavigator = () => {
     } else {
       RNBootSplash.hide({fade: true})
     }
-  }
+  }, [authWithOs, firstAction, isLoggedIn])
 
-  const handleStateChange = () => {
+  const handleStateChange = React.useCallback(() => {
     const currentRouteName = navRef.current?.getCurrentRoute()?.name
     setRouteName(currentRouteName)
-  }
+  }, [])
 
   return (
     <NavigationContainer

apps/wallet-mobile/src/TxHistory/BalanceBanner.tsx

@@ -1,4 +1,4 @@
-import {balanceFormatter} from '@yoroi/portfolio'
+import {amountFormatter} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
 import {Portfolio} from '@yoroi/types'
 import React from 'react'
@@ -10,6 +10,7 @@ import {PairedBalance} from '../components/PairedBalance/PairedBalance'
 import {usePrimaryBalance} from '../features/Portfolio/common/hooks/usePrimaryBalance'
 import {usePrivacyMode} from '../features/Settings/PrivacyMode/PrivacyMode'
 import {useSelectedWallet} from '../features/WalletManager/Context'
+import {asQuantity} from '../yoroi-wallets/utils'
 
 export const BalanceBanner = React.forwardRef<ResetErrorRef>((_, ref) => {
   const wallet = useSelectedWallet()
@@ -29,28 +30,35 @@ export const BalanceBanner = React.forwardRef<ResetErrorRef>((_, ref) => {
 
       <TouchableOpacity onPress={() => togglePrivacyMode()} style={styles.button}>
         <CenteredRow>
-          <Balance
+          <PrimaryBalance
             isPrivacyOff={isPrivacyOff}
             primaryBalance={primaryBalance}
             privacyPlaceholder={privacyPlaceholder}
           />
         </CenteredRow>
 
         <CenteredRow>
-          <PairedBalance isPrivacyOff={isPrivacyOff} amount={primaryAmount} ref={ref} />
+          <PairedBalance
+            isPrivacyOff={isPrivacyOff}
+            amount={{
+              quantity: asQuantity(primaryBalance.quantity.toString()),
+              tokenId: primaryBalance.info.id,
+            }}
+            ref={ref}
+          />
         </CenteredRow>
       </TouchableOpacity>
     </View>
   )
 })
 
-type BalanceProps = {isPrivacyOff: boolean; primaryBalance: Portfolio.Token.Balance; privacyPlaceholder: string}
-const Balance = ({isPrivacyOff, primaryBalance, privacyPlaceholder}: BalanceProps) => {
+type PrimaryBalanceProps = {isPrivacyOff: boolean; primaryBalance: Portfolio.Token.Amount; privacyPlaceholder: string}
+const PrimaryBalance = ({isPrivacyOff, primaryBalance, privacyPlaceholder}: PrimaryBalanceProps) => {
   const styles = useStyles()
 
   const balance = isPrivacyOff
-    ? balanceFormatter({template: '{{value}} {{symbol}}'})(primaryBalance)
-    : balanceFormatter({template: `${privacyPlaceholder} {{symbol}}`})(primaryBalance)
+    ? amountFormatter({template: '{{value}} {{symbol}}'})(primaryBalance)
+    : amountFormatter({template: `${privacyPlaceholder} {{symbol}}`})(primaryBalance)
 
   return (
     <CenteredRow>

apps/wallet-mobile/src/TxHistory/TxHistory.tsx

@@ -4,7 +4,7 @@ import {defineMessages, useIntl} from 'react-intl'
 import {LayoutAnimation, StyleSheet, View} from 'react-native'
 
 import infoIcon from '../assets/img/icon/info-light-green.png'
-import {Boundary, ResetErrorRef, Spacer} from '../components'
+import {Boundary, Spacer} from '../components'
 import {Tab, TabPanel, TabPanels, Tabs} from '../components/Tabs'
 import {useSelectedWallet} from '../features/WalletManager/Context'
 import {assetMessages, txLabels} from '../i18n/global-messages'
@@ -23,7 +23,6 @@ import {WarningBanner} from './WarningBanner'
 type Tab = 'transactions' | 'assets'
 
 export const TxHistory = () => {
-  const resetErrorRef = React.useRef<null | ResetErrorRef>(null)
   const strings = useStrings()
   const styles = useStyles()
   const wallet = useSelectedWallet()
@@ -46,15 +45,12 @@ export const TxHistory = () => {
     onScrollDown: () => setExpanded(false),
   })
 
-  const onRefresh = () => {
-    resetErrorRef.current?.reset()
-    sync()
-  }
+  const handleOnRefresh = () => sync()
 
   return (
     <View style={styles.scrollView}>
       <CollapsibleHeader expanded={expanded}>
-        <BalanceBanner ref={resetErrorRef} />
+        <BalanceBanner />
 
         <ActionsBanner disabled={isLoading} />
       </CollapsibleHeader>
@@ -105,12 +101,12 @@ export const TxHistory = () => {
             />
           )}
 
-          <TxHistoryList onScroll={onScroll} refreshing={isLoading} onRefresh={onRefresh} />
+          <TxHistoryList onScroll={onScroll} refreshing={isLoading} onRefresh={handleOnRefresh} />
         </TabPanel>
 
         <TabPanel active={activeTab === 'assets'}>
           <Boundary loading={{size: 'full'}}>
-            <AssetList onScroll={onScroll} refreshing={isLoading} onRefresh={onRefresh} />
+            <AssetList onScroll={onScroll} refreshing={isLoading} onRefresh={handleOnRefresh} />
           </Boundary>
         </TabPanel>
       </TabPanels>

apps/wallet-mobile/src/YoroiApp.tsx

@@ -6,7 +6,7 @@ import React from 'react'
 import {LogBox, Platform, StyleSheet, UIManager} from 'react-native'
 import Config from 'react-native-config'
 import * as RNP from 'react-native-paper'
-import {SafeAreaProvider} from 'react-native-safe-area-context'
+import {initialWindowMetrics, SafeAreaProvider} from 'react-native-safe-area-context'
 import {enableFreeze, enableScreens} from 'react-native-screens'
 import {QueryClient, QueryClientProvider} from 'react-query'
 
@@ -61,7 +61,7 @@ export const YoroiApp = () => {
                 <LoadingBoundary style={StyleSheet.absoluteFill}>
                   <LanguageProvider>
                     <CurrencyProvider>
-                      <SafeAreaProvider>
+                      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
                         <RNP.Provider>
                           <AuthProvider>
                             <SelectedWalletMetaProvider>

apps/wallet-mobile/src/auth/AuthProvider.tsx

@@ -1,27 +1,21 @@
-import React, {createContext, ReactNode, useCallback, useContext, useState} from 'react'
-
-const AuthContext = createContext<undefined | (AuthContextState & AuthContextActions)>(undefined)
-export const AuthProvider = ({children}: {children: ReactNode}) => {
-  const [state, setState] = useState<AuthContextState>(initialState)
-
-  const actions = {
-    login: useCallback(() => setState(loggedInState), []),
-    logout: useCallback(() => setState(loggedOutState), []),
-  }
-
-  return (
-    <AuthContext.Provider
-      value={{
-        ...state,
-        ...actions,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
+import * as React from 'react'
+
+const AuthContext = React.createContext<undefined | (AuthContextState & AuthContextActions)>(undefined)
+export const AuthProvider = ({children}: {children: React.ReactNode}) => {
+  const [state, setState] = React.useState<AuthContextState>(initialState)
+
+  const value = React.useMemo(
+    () => ({
+      ...state,
+      login: () => setState(loggedInState),
+      logout: () => setState(loggedOutState),
+    }),
+    [state],
   )
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
 }
 
-export const useAuth = () => useContext(AuthContext) || missingProvider()
+export const useAuth = () => React.useContext(AuthContext) || missingProvider()
 
 const missingProvider = () => {
   throw new Error('AuthProvider is missing')

apps/wallet-mobile/src/components/Boundary/Boundary.stories.tsx

@@ -1,7 +1,6 @@
 import {storiesOf} from '@storybook/react-native'
 import React from 'react'
-import {Button, StyleSheet, Text, View} from 'react-native'
-import {ActivityIndicator} from 'react-native-paper'
+import {ActivityIndicator, Button, StyleSheet, Text, View} from 'react-native'
 import {useQuery} from 'react-query'
 
 import {QueryProvider} from '../../../.storybook/decorators'

apps/wallet-mobile/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,6 +1,5 @@
 import React, {Component, ErrorInfo, ReactNode} from 'react'
 import {BackHandler, Image, Platform, ScrollView, StyleSheet, Text, View, ViewProps} from 'react-native'
-import {Divider} from 'react-native-paper'
 
 import errorImage from '../../assets/img/error.png'
 import {Logger} from '../../legacy/logging'
@@ -52,8 +51,6 @@ export class ErrorBoundary extends Component<Props, State> {
               <Image source={errorImage} />
             </View>
 
-            <Divider />
-
             <Spacer height={16} />
 
             <Text style={styles.paragraph}>

apps/wallet-mobile/src/features/Settings/Currency/CurrencyContext.tsx

@@ -9,21 +9,13 @@ const CurrencyContext = React.createContext<undefined | CurrencyContext>(undefin
 export const CurrencyProvider = ({children}: {children: React.ReactNode}) => {
   const currency = useCurrency()
   const selectCurrency = useSaveCurrency()
-  const config = configCurrencies[currency]
-
-  return (
-    <CurrencyContext.Provider
-      value={{
-        currency,
-        selectCurrency,
-        supportedCurrencies,
-        configCurrencies,
-        config,
-      }}
-    >
-      {children}
-    </CurrencyContext.Provider>
+
+  const value = React.useMemo(
+    () => ({currency, selectCurrency, supportedCurrencies, configCurrencies, config: configCurrencies[currency]}),
+    [currency, selectCurrency],
   )
+
+  return <CurrencyContext.Provider value={value}>{children}</CurrencyContext.Provider>
 }
 
 export const useCurrencyContext = () => React.useContext(CurrencyContext) || missingProvider()