CP-5551 Add QR scan feature to Add contact form (#686)

ava-labs · May 22, 2023 · b96f551 · b96f551
1 parent 15971b7
commit b96f551
Showing 1 changed file with 60 additions and 1 deletion.
diff --git a/app/screens/drawer/addressBook/components/ContactInput.tsx b/app/screens/drawer/addressBook/components/ContactInput.tsx
@@ -2,10 +2,13 @@ import React, { useEffect, useState } from 'react'
 import AvaText from 'components/AvaText'
 import InputText from 'components/InputText'
 import { Space } from 'components/Space'
-import { View } from 'react-native'
+import { Modal, StyleSheet, View } from 'react-native'
 import { useApplicationContext } from 'contexts/ApplicationContext'
 import { isAddress } from '@ethersproject/address'
 import { isBech32Address } from '@avalabs/bridge-sdk'
+import AvaButton from 'components/AvaButton'
+import QRScanSVG from 'components/svg/QRScanSVG'
+import QrScannerAva from 'components/QrScannerAva'
 
 const ContactInput = ({
   name,
@@ -25,6 +28,8 @@ const ContactInput = ({
   const { theme } = useApplicationContext()
   const [addressError, setAddressError] = useState('')
   const [btcAddressError, setBtcAddressError] = useState('')
+  const [showCChainQRScan, setShowCChainQRScan] = useState(false)
+  const [showBtcQRScan, setShowBtcQRScan] = useState(false)
 
   useEffect(validateInputs, [address, addressBtc])
 
@@ -37,6 +42,19 @@ const ContactInput = ({
     )
   }
 
+  function onCChainScanQR() {
+    setShowCChainQRScan(true)
+  }
+
+  function onBtcScanQR() {
+    setShowBtcQRScan(true)
+  }
+
+  function clearQRSCan() {
+    setShowBtcQRScan(false)
+    setShowCChainQRScan(false)
+  }
+
   return (
     <>
       <AvaText.Body2 textStyle={{ color: theme.colorText1 }}>
@@ -61,6 +79,13 @@ const ContactInput = ({
           text={address}
           onChangeText={onAddressChange}
         />
+        {!address && (
+          <View style={styles.qrScan}>
+            <AvaButton.Icon onPress={onCChainScanQR}>
+              <QRScanSVG />
+            </AvaButton.Icon>
+          </View>
+        )}
       </View>
       <Space y={24} />
       <AvaText.Body2 textStyle={{ color: theme.colorText1 }}>
@@ -74,9 +99,43 @@ const ContactInput = ({
           text={addressBtc}
           onChangeText={onAddressBtcChange}
         />
+        {!addressBtc && (
+          <View style={styles.qrScan}>
+            <AvaButton.Icon onPress={onBtcScanQR}>
+              <QRScanSVG />
+            </AvaButton.Icon>
+          </View>
+        )}
       </View>
+
+      <Modal
+        animationType="slide"
+        transparent={true}
+        onRequestClose={clearQRSCan}
+        visible={showBtcQRScan || showCChainQRScan}>
+        <QrScannerAva
+          onSuccess={data => {
+            if (showCChainQRScan) {
+              onAddressChange(data)
+            } else if (showBtcQRScan) {
+              onAddressBtcChange(data)
+            }
+            clearQRSCan()
+          }}
+          onCancel={clearQRSCan}
+        />
+      </Modal>
     </>
   )
 }
 
+const styles = StyleSheet.create({
+  qrScan: {
+    position: 'absolute',
+    right: 16,
+    justifyContent: 'center',
+    height: '100%'
+  }
+})
+
 export default ContactInput