add qr scanner as a standalone page in balancestacknav

app/components/BarCodeScanner.tsx

@@ -0,0 +1,61 @@
+import { StackScreenProps } from '@react-navigation/stack'
+import { BarCodeScanner as DefaultBarCodeScanner } from 'expo-barcode-scanner'
+import React, { useEffect, useState } from 'react'
+import { Text } from 'react-native'
+import tailwind from 'tailwind-rn'
+import { View } from '.'
+import { Logging } from '../api/logging'
+import { BalanceParamList } from '../screens/AppNavigator/screens/Balances/BalancesNavigator'
+import { translate } from '../translations'
+
+type Props = StackScreenProps<BalanceParamList, 'BarCodeScanner'>
+
+export function BarCodeScanner ({ route, navigation }: Props): JSX.Element {
+  // null => undetermined
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null)
+  const [value, setValue] = useState<string>()
+
+  // to ensure callback only can be fired once as value change
+  useEffect(() => {
+    if (value !== undefined) {
+      route.params.onQrScanned(value)
+      navigation.pop()
+    }
+  }, [value])
+
+  useEffect(() => {
+    DefaultBarCodeScanner.requestPermissionsAsync()
+      .then(({ status }) => {
+        switch (status) {
+          case 'granted': setHasPermission(true); break
+          case 'denied': setHasPermission(false); break
+        }
+      })
+      .catch(e => Logging.error(e))
+  }, [])
+
+  if (hasPermission === null) {
+    return (
+      <View style={tailwind('flex-col flex-1 justify-center items-center')}>
+        <Text>{translate('components/BarCodeScanner', 'Requesting for camera permission')}</Text>
+      </View>
+    )
+  }
+  if (!hasPermission) {
+    return (
+      <View style={tailwind('flex-col flex-1 justify-center items-center')}>
+        <Text>{translate('components/BarCodeScanner', 'You have denied the permission request to use your camera')}</Text>
+      </View>
+    )
+  }
+
+  return (
+    <DefaultBarCodeScanner
+      style={tailwind('flex-1')}
+      barCodeTypes={[DefaultBarCodeScanner.Constants.BarCodeType.qr]}
+      onBarCodeScanned={(e) => {
+        setValue(e.data)
+      }}
+    />
+  )
+}

app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import { View } from 'react-native'
 import tailwind from 'tailwind-rn'
 import { Text } from '../../../../components'
+import { BarCodeScanner } from '../../../../components/BarCodeScanner'
 import { getTokenIcon } from '../../../../components/icons/tokens/_index'
 import { WalletToken } from '../../../../store/wallet'
 import { translate } from '../../../../translations'
@@ -18,6 +19,7 @@ export interface BalanceParamList {
   SendScreen: { token: WalletToken }
   TokenDetailScreen: { token: WalletToken }
   ConvertScreen: { mode: ConversionMode }
+  BarCodeScanner: { onQrScanned: (value: string) => void }
 
   [key: string]: undefined | object
 }
@@ -76,6 +78,14 @@ export function BalancesNavigator (): JSX.Element {
           headerBackTitleVisible: false
         }}
       />
+      <BalanceStack.Screen
+        name='BarCodeScanner'
+        component={BarCodeScanner}
+        options={{
+          headerTitle: translate('screens/ConvertScreen', 'Scan recipient QR'),
+          headerBackTitleVisible: false
+        }}
+      />
     </BalanceStack.Navigator>
   )
 }

app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx

@@ -2,6 +2,7 @@ import { DeFiAddress } from '@defichain/jellyfish-address'
 import { NetworkName } from '@defichain/jellyfish-network'
 import { CTransactionSegWit, TransactionSegWit } from '@defichain/jellyfish-transaction'
 import { AddressToken } from '@defichain/whale-api-client/dist/api/address'
+import { MaterialIcons } from '@expo/vector-icons'
 import { StackScreenProps } from '@react-navigation/stack'
 import BigNumber from 'bignumber.js'
 import React, { useEffect, useState } from 'react'
@@ -17,7 +18,7 @@ import { Text, TextInput } from '../../../../../components'
 import { getTokenIcon } from '../../../../../components/icons/tokens/_index'
 import { PrimaryButton } from '../../../../../components/PrimaryButton'
 import { SectionTitle } from '../../../../../components/SectionTitle'
-import { PrimaryColorStyle } from '../../../../../constants/Theme'
+import { PrimaryColor, PrimaryColorStyle } from '../../../../../constants/Theme'
 import { useNetworkContext } from '../../../../../contexts/NetworkContext'
 import { useWallet } from '../../../../../contexts/WalletContext'
 import { useWhaleApiClient } from '../../../../../contexts/WhaleContext'
@@ -72,7 +73,7 @@ async function send ({
 
 type Props = StackScreenProps<BalanceParamList, 'SendScreen'>
 
-export function SendScreen ({ route }: Props): JSX.Element {
+export function SendScreen ({ route, navigation }: Props): JSX.Element {
   const { networkName } = useNetworkContext()
   const wallet = useWallet()
   const client = useWhaleApiClient()
@@ -101,7 +102,13 @@ export function SendScreen ({ route }: Props): JSX.Element {
 
   return (
     <ScrollView style={tailwind('bg-gray-100')}>
-      <AddressRow control={control} networkName={networkName} />
+      <AddressRow
+        control={control}
+        networkName={networkName}
+        onQrButtonPress={() => navigation.navigate('BarCodeScanner', {
+          onQrScanned: value => setValue('address', value)
+        })}
+      />
       <AmountRow
         fee={fee}
         token={token} control={control} onMaxPress={async (amount) => {
@@ -129,7 +136,7 @@ export function SendScreen ({ route }: Props): JSX.Element {
   )
 }
 
-function AddressRow ({ control, networkName }: { control: Control, networkName: NetworkName }): JSX.Element {
+function AddressRow ({ control, networkName, onQrButtonPress }: { control: Control, networkName: NetworkName, onQrButtonPress: () => void }): JSX.Element {
   return (
     <>
       <SectionTitle
@@ -154,11 +161,12 @@ function AddressRow ({ control, networkName }: { control: Control, networkName:
               onChangeText={onChange}
               placeholder={translate('screens/SendScreen', 'Enter an address')}
             />
-            {/* <TouchableOpacity
-              style={tailwind('p-4 bg-white')}
+            <TouchableOpacity
+              style={tailwind('w-14 p-4 bg-white')}
+              onPress={onQrButtonPress}
             >
               <MaterialIcons name='qr-code-scanner' size={24} color={PrimaryColor} />
-            </TouchableOpacity> */}
+            </TouchableOpacity>
           </View>
         )}
         name='address'
@@ -177,7 +185,8 @@ interface AmountForm {
 
 function AmountRow ({ token, control, onMaxPress, fee }: AmountForm): JSX.Element {
   const Icon = getTokenIcon(token.avatarSymbol)
-  const maxAmount = token.symbol === 'DFI' ? new BigNumber(token.amount).minus(fee).toFixed(8) : token.amount
+  let maxAmount = token.symbol === 'DFI' ? new BigNumber(token.amount).minus(fee).toFixed(8) : token.amount
+  maxAmount = BigNumber.max(maxAmount, 0).toFixed(8)
   return (
     <>
       <SectionTitle

package.json

@@ -40,6 +40,7 @@
     "buffer": "^6.0.3",
     "expo": "^42.0.0",
     "expo-asset": "~8.3.2",
+    "expo-barcode-scanner": "^10.2.2",
     "expo-cli": "^4.8.1",
     "expo-clipboard": "~1.1.0",
     "expo-constants": "~11.0.1",