update react navigation 6 (#584)

* updates * updates * update tests * update price * update test
BirthdayResearch · Aug 15, 2021 · 3899c33 · 3899c33
1 parent a4b7c4a
commit 3899c33
Show file tree

Hide file tree

Showing 27 changed files with 297 additions and 186 deletions.
diff --git a/app/screens/AppNavigator/AppNavigator.tsx b/app/screens/AppNavigator/AppNavigator.tsx
@@ -27,7 +27,7 @@ export function AppNavigator (): JSX.Element {
   )
 }
 
-const LinkingConfiguration: LinkingOptions = {
+const LinkingConfiguration: LinkingOptions<ReactNavigation.RootParamList> = {
   prefixes: [Linking.makeUrl('/')],
   config: {
     screens: {

diff --git a/app/screens/AppNavigator/BottomTabNavigator.tsx b/app/screens/AppNavigator/BottomTabNavigator.tsx
@@ -1,6 +1,5 @@
 import { MaterialIcons } from '@expo/vector-icons'
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
-import { PathConfigMap } from '@react-navigation/core'
 import * as React from 'react'
 import { OceanInterface } from '../../components/OceanInterface/OceanInterface'
 import { tailwind } from '../../tailwind'
@@ -28,7 +27,7 @@ export function BottomTabNavigator (): JSX.Element {
       <OceanInterface />
       <BottomTab.Navigator
         initialRouteName='Balances'
-        tabBarOptions={{ adaptive: false, labelStyle: tailwind('font-medium text-xs') }}
+        screenOptions={{ headerShown: false, tabBarLabelPosition: 'below-icon', tabBarLabelStyle: tailwind('font-medium text-xs') }}
       >
         <BottomTab.Screen
           name={translate('BottomTabNavigator', 'Balances')}
@@ -67,7 +66,7 @@ export function BottomTabNavigator (): JSX.Element {
   )
 }
 
-export const AppLinking: PathConfigMap = {
+export const AppLinking = {
   Balances: {
     screens: {
       BalancesScreen: 'balances'

diff --git a/app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx b/app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx
@@ -1,5 +1,5 @@
 import { MaterialIcons } from '@expo/vector-icons'
-import { useNavigation } from '@react-navigation/native'
+import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
 import BigNumber from 'bignumber.js'
 import * as React from 'react'
@@ -78,7 +78,7 @@ function BalanceActionButton (props: {
 const BalanceStack = createStackNavigator<BalanceParamList>()
 
 export function BalancesNavigator (): JSX.Element {
-  const navigation = useNavigation()
+  const navigation = useNavigation<NavigationProp<BalanceParamList>>()
   return (
     <BalanceStack.Navigator>
       <BalanceStack.Screen

diff --git a/app/screens/AppNavigator/screens/Balances/BalancesScreen.tsx b/app/screens/AppNavigator/screens/Balances/BalancesScreen.tsx
@@ -49,7 +49,7 @@ export function BalancesScreen ({ navigation }: Props): JSX.Element {
       renderItem={({ item }) =>
         <BalanceItemRow
           token={item} key={item.symbol}
-          onPress={() => navigation.navigate('TokenDetail', { token: item })}
+          onPress={() => navigation.navigate({ name: 'TokenDetail', params: { token: item }, merge: true })}
         />}
       ItemSeparatorComponent={() => <View style={tailwind('h-px bg-gray-100')} />}
       ListHeaderComponent={(

diff --git a/app/screens/AppNavigator/screens/Balances/screens/ConvertConfirmationScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/ConvertConfirmationScreen.tsx
@@ -1,6 +1,6 @@
 import { CTransactionSegWit, TransactionSegWit } from '@defichain/jellyfish-transaction/dist'
 import { WhaleWalletAccount } from '@defichain/whale-api-wallet'
-import { StackActions, useNavigation } from '@react-navigation/native'
+import { NavigationProp, StackActions, useNavigation } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack'
 import BigNumber from 'bignumber.js'
 import React, { Dispatch, useEffect, useState } from 'react'
@@ -28,7 +28,7 @@ export function ConvertConfirmationScreen ({ route }: Props): JSX.Element {
   const hasPendingJob = useSelector((state: RootState) => hasTxQueued(state.transactionQueue))
   const dispatch = useDispatch()
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const navigation = useNavigation()
+  const navigation = useNavigation<NavigationProp<BalanceParamList>>()
   const [isOnPage, setIsOnPage] = useState<boolean>(true)
   const postAction = (): void => {
     if (isOnPage) {
@@ -54,7 +54,13 @@ export function ConvertConfirmationScreen ({ route }: Props): JSX.Element {
 
   function onCancel (): void {
     if (!isSubmitting) {
-      navigation.navigate('Convert')
+      navigation.navigate({
+        name: 'Convert',
+        params: {
+          mode
+        },
+        merge: true
+      })
     }
   }
 

diff --git a/app/screens/AppNavigator/screens/Balances/screens/ConvertScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/ConvertScreen.tsx
@@ -1,6 +1,6 @@
 import { AddressToken } from '@defichain/whale-api-client/dist/api/address'
 import { MaterialIcons } from '@expo/vector-icons'
-import { useNavigation } from '@react-navigation/native'
+import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack'
 import BigNumber from 'bignumber.js'
 import * as React from 'react'
@@ -36,7 +36,7 @@ export function ConvertScreen (props: Props): JSX.Element {
   // global state
   const tokens = useTokensAPI()
   const hasPendingJob = useSelector((state: RootState) => hasTxQueued(state.transactionQueue))
-  const navigation = useNavigation()
+  const navigation = useNavigation<NavigationProp<BalanceParamList>>()
   const [mode, setMode] = useState(props.route.params.mode)
   const [sourceToken, setSourceToken] = useState<ConversionIO>()
   const [targetToken, setTargetToken] = useState<ConversionIO>()
@@ -67,14 +67,18 @@ export function ConvertScreen (props: Props): JSX.Element {
     if (hasPendingJob) {
       return
     }
-    navigation.navigate('ConvertConfirmationScreen', {
-      sourceUnit: sourceToken.unit,
-      sourceBalance: BigNumber.maximum(new BigNumber(sourceToken.amount).minus(convAmount), 0),
-      targetUnit: targetToken.unit,
-      targetBalance: BigNumber.maximum(new BigNumber(targetToken.amount).plus(convAmount), 0),
-      mode,
-      amount: new BigNumber(amount),
-      fee
+    navigation.navigate({
+      name: 'ConvertConfirmationScreen',
+      params: {
+        sourceUnit: sourceToken.unit,
+        sourceBalance: BigNumber.maximum(new BigNumber(sourceToken.amount).minus(convAmount), 0),
+        targetUnit: targetToken.unit,
+        targetBalance: BigNumber.maximum(new BigNumber(targetToken.amount).plus(convAmount), 0),
+        mode,
+        amount: new BigNumber(amount),
+        fee
+      },
+      merge: true
     })
   }
 
@@ -212,7 +216,7 @@ function ToggleModeButton (props: { onPress: () => void }): JSX.Element {
 }
 
 function TokenVsUtxosInfo (): JSX.Element {
-  const navigation = useNavigation()
+  const navigation = useNavigation<NavigationProp<BalanceParamList>>()
   return (
     <TouchableOpacity
       style={tailwind('flex-row px-4 py-2 my-2 items-center justify-start')}

diff --git a/app/screens/AppNavigator/screens/Balances/screens/SendConfirmationScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/SendConfirmationScreen.tsx
@@ -3,7 +3,7 @@ import { NetworkName } from '@defichain/jellyfish-network'
 import { CTransactionSegWit, TransactionSegWit } from '@defichain/jellyfish-transaction/dist'
 import { AddressToken } from '@defichain/whale-api-client/dist/api/address'
 import { WhaleWalletAccount } from '@defichain/whale-api-wallet'
-import { StackActions, useNavigation } from '@react-navigation/native'
+import { NavigationProp, StackActions, useNavigation } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack'
 import BigNumber from 'bignumber.js'
 import React, { Dispatch, useEffect, useState } from 'react'
@@ -30,7 +30,7 @@ export function SendConfirmationScreen ({ route }: Props): JSX.Element {
   const hasPendingJob = useSelector((state: RootState) => hasTxQueued(state.transactionQueue))
   const dispatch = useDispatch()
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const navigation = useNavigation()
+  const navigation = useNavigation<NavigationProp<BalanceParamList>>()
   const [isOnPage, setIsOnPage] = useState<boolean>(true)
   const postAction = (): void => {
     if (isOnPage) {
@@ -61,7 +61,13 @@ export function SendConfirmationScreen ({ route }: Props): JSX.Element {
 
   function onCancel (): void {
     if (!isSubmitting) {
-      navigation.navigate('Send')
+      navigation.navigate({
+        name: 'Send',
+        params: {
+          token
+        },
+        merge: true
+      })
     }
   }
 

diff --git a/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx
@@ -56,11 +56,15 @@ export function SendScreen ({ route, navigation }: Props): JSX.Element {
     }
     if (isValid) {
       const values = getValues()
-      navigation.navigate('SendConfirmationScreen', {
-        destination: values.address,
-        token,
-        amount: new BigNumber(values.amount),
-        fee
+      navigation.navigate({
+        name: 'SendConfirmationScreen',
+        params: {
+          destination: values.address,
+          token,
+          amount: new BigNumber(values.amount),
+          fee
+        },
+        merge: true
       })
     }
   }
@@ -70,11 +74,15 @@ export function SendScreen ({ route, navigation }: Props): JSX.Element {
       <AddressRow
         control={control}
         networkName={networkName}
-        onQrButtonPress={() => navigation.navigate('BarCodeScanner', {
-          onQrScanned: async (value) => {
-            setValue('address', value)
-            await trigger('address')
-          }
+        onQrButtonPress={() => navigation.navigate({
+          name: 'BarCodeScanner',
+          params: {
+            onQrScanned: async (value) => {
+              setValue('address', value)
+              await trigger('address')
+            }
+          },
+          merge: true
         })}
       />
       <AmountRow

diff --git a/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.tsx
@@ -47,7 +47,7 @@ export function TokenDetailScreen ({ route, navigation }: Props): JSX.Element {
             <TokenActionRow
               testID='send_button'
               title={translate('screens/TokenDetailScreen', 'Send to other wallet')} icon='arrow-upward'
-              onPress={() => navigation.navigate('Send', { token })}
+              onPress={() => navigation.navigate({ name: 'Send', params: { token }, merge: true })}
             />
             <TokenActionRow
               testID='receive_button'
@@ -65,7 +65,7 @@ export function TokenDetailScreen ({ route, navigation }: Props): JSX.Element {
             title={`${translate('screens/TokenDetailScreen', `Convert to ${token.id === '0_utxo' ? 'Token' : 'UTXO'}`)}`}
             icon='swap-vert' onPress={() => {
               const mode: ConversionMode = token.id === '0_utxo' ? 'utxosToAccount' : 'accountToUtxos'
-              navigation.navigate('Convert', { mode })
+              navigation.navigate({ name: 'Convert', params: { mode }, merge: true })
             }}
           />
         )

diff --git a/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx b/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx
@@ -120,14 +120,18 @@ export function AddLiquidityScreen (props: Props): JSX.Element {
       <ContinueButton
         enabled={canContinue}
         onPress={() => {
-          navigation.navigate('ConfirmAddLiquidity', {
-            summary: {
-              ...pair,
-              fee: new BigNumber(0.0001),
-              tokenAAmount: new BigNumber(tokenAAmount),
-              tokenBAmount: new BigNumber(tokenBAmount),
-              percentage: sharePercentage
-            }
+          navigation.navigate({
+            name: 'ConfirmAddLiquidity',
+            params: {
+              summary: {
+                ...pair,
+                fee: new BigNumber(0.0001),
+                tokenAAmount: new BigNumber(tokenAAmount),
+                tokenBAmount: new BigNumber(tokenBAmount),
+                percentage: sharePercentage
+              }
+            },
+            merge: true
           })
         }}
       />

diff --git a/app/screens/AppNavigator/screens/Dex/DexScreen.tsx b/app/screens/AppNavigator/screens/Dex/DexScreen.tsx
@@ -26,11 +26,11 @@ export function DexScreen (): JSX.Element {
   })))
 
   const onAdd = (data: PoolPairData): void => {
-    navigation.navigate('AddLiquidity', { pair: data })
+    navigation.navigate({ name: 'AddLiquidity', params: { pair: data }, merge: true })
   }
 
   const onRemove = (data: PoolPairData): void => {
-    navigation.navigate('RemoveLiquidity', { pair: data })
+    navigation.navigate({ name: 'RemoveLiquidity', params: { pair: data }, merge: true })
   }
 
   return (
@@ -59,7 +59,7 @@ export function DexScreen (): JSX.Element {
           case 'available':
             return PoolPairRowAvailable(item.data,
               () => onAdd(item.data),
-              () => navigation.navigate('PoolSwap', { poolpair: item.data })
+              () => navigation.navigate({ name: 'PoolSwap', params: { poolpair: item.data }, merge: true })
             )
         }
       }}

diff --git a/app/screens/AppNavigator/screens/Dex/PoolSwap/ConfirmPoolSwapScreen.tsx b/app/screens/AppNavigator/screens/Dex/PoolSwap/ConfirmPoolSwapScreen.tsx
@@ -1,6 +1,6 @@
 import { CTransactionSegWit, PoolSwap } from '@defichain/jellyfish-transaction/dist'
 import { WhaleWalletAccount } from '@defichain/whale-api-wallet'
-import { StackActions, useNavigation } from '@react-navigation/native'
+import { NavigationProp, StackActions, useNavigation } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack'
 import BigNumber from 'bignumber.js'
 import React, { Dispatch, useEffect, useState } from 'react'
@@ -34,7 +34,7 @@ export function ConfirmPoolSwapScreen ({ route }: Props): JSX.Element {
   const hasPendingJob = useSelector((state: RootState) => hasTxQueued(state.transactionQueue))
   const dispatch = useDispatch()
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const navigation = useNavigation()
+  const navigation = useNavigation<NavigationProp<DexParamList>>()
   const [isOnPage, setIsOnPage] = useState<boolean>(true)
   const { account } = useWalletContext()
   const postAction = (): void => {

diff --git a/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx b/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx
@@ -1,6 +1,6 @@
 import { PoolPairData } from '@defichain/whale-api-client/dist/api/poolpairs'
 import { MaterialIcons } from '@expo/vector-icons'
-import { useNavigation } from '@react-navigation/native'
+import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack'
 import BigNumber from 'bignumber.js'
 import React, { useCallback, useEffect, useState } from 'react'
@@ -42,7 +42,7 @@ export function PoolSwapScreen ({ route }: Props): JSX.Element {
   const tokens = useTokensAPI()
   const hasPendingJob = useSelector((state: RootState) => hasTxQueued(state.transactionQueue))
   const [tokenAForm, tokenBForm] = ['tokenA', 'tokenB']
-  const navigation = useNavigation()
+  const navigation = useNavigation<NavigationProp<DexParamList>>()
 
   useEffect(() => {
     client.fee.estimate()

diff --git a/app/screens/AppNavigator/screens/Settings/SettingsNavigator.tsx b/app/screens/AppNavigator/screens/Settings/SettingsNavigator.tsx
@@ -1,5 +1,5 @@
 import { MaterialIcons } from '@expo/vector-icons'
-import { useNavigation } from '@react-navigation/native'
+import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
 import * as React from 'react'
 import { TouchableOpacity } from 'react-native'
@@ -27,7 +27,7 @@ export interface SettingsParamList {
 const SettingsStack = createStackNavigator<SettingsParamList>()
 
 export function SettingsNavigator (): JSX.Element {
-  const navigation = useNavigation()
+  const navigation = useNavigation<NavigationProp<SettingsParamList>>()
 
   return (
     <SettingsStack.Navigator screenOptions={{ headerTitleStyle: HeaderFont }}>

diff --git a/app/screens/AppNavigator/screens/Settings/SettingsScreen.tsx b/app/screens/AppNavigator/screens/Settings/SettingsScreen.tsx
@@ -1,5 +1,5 @@
 import { MaterialIcons } from '@expo/vector-icons'
-import { useNavigation } from '@react-navigation/native'
+import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -36,7 +36,7 @@ export function SettingsScreen ({ navigation }: Props): JSX.Element {
       message: translate('screens/Setting', 'To continue downloading your recovery words, we need you to enter your passcode.'),
       consume: async passphrase => await MnemonicWords.decrypt(passphrase),
       onAuthenticated: async (words) => {
-        navigation.navigate('RecoveryWordsScreen', { words })
+        navigation.navigate({ name: 'RecoveryWordsScreen', params: { words }, merge: true })
       },
       onError: e => Logging.error(e)
     }
@@ -52,7 +52,9 @@ export function SettingsScreen ({ navigation }: Props): JSX.Element {
       message: translate('screens/Setting', 'To update your passcode, we need you to enter your current passcode.'),
       consume: async passphrase => await MnemonicWords.decrypt(passphrase),
       onAuthenticated: async words => {
-        navigation.navigate('ChangePinScreen', { words, pinLength: 6 })
+        navigation.navigate({
+          name: 'ChangePinScreen', params: { words, pinLength: 6 }, merge: true
+        })
       },
       onError: (e) => {
         dispatch(ocean.actions.setError(e))
@@ -82,7 +84,7 @@ export function SettingsScreen ({ navigation }: Props): JSX.Element {
 }
 
 function RowNetworkItem (props: { network: EnvironmentNetwork }): JSX.Element {
-  const navigation = useNavigation()
+  const navigation = useNavigation<NavigationProp<SettingsParamList>>()
   const { network, updateNetwork } = useNetworkContext()
 
   const onPress = useCallback(async () => {
@@ -160,7 +162,7 @@ function RowExitWalletItem (): JSX.Element {
   )
 }
 
-function SecurityRow ({ testID, label, onPress }: { testID: string, label: string, onPress: () => void}): JSX.Element {
+function SecurityRow ({ testID, label, onPress }: { testID: string, label: string, onPress: () => void }): JSX.Element {
   return (
     <TouchableOpacity
       testID={testID}
@@ -180,7 +182,7 @@ function SecurityRow ({ testID, label, onPress }: { testID: string, label: strin
 }
 
 function RowNavigateItem ({ pageName, title }: { pageName: string, title: string }): JSX.Element {
-  const navigation = useNavigation()
+  const navigation = useNavigation<NavigationProp<SettingsParamList>>()
   return (
     <TouchableOpacity
       testID={`setting_navigate_${title}`}