Bugfix/gain height ux

ios/Podfile.lock

@@ -841,7 +841,7 @@ SPEC CHECKSUMS:
   BEMCheckBox: 5ba6e37ade3d3657b36caecc35c8b75c6c2b1a4e
   boost: 57d2868c099736d80fcd648bf211b4431e51a558
   BVLinearGradient: 34a999fda29036898a09c6a6b728b0b4189e1a44
-  Charts: ce0768268078eee0336f122c3c4ca248e4e204c5
+  Charts: 354f86803d11d9c35de280587fef50d1af063978
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   EXApplication: d8f53a7eee90a870a75656280e8d4b85726ea903
   EXBarCodeScanner: 8e23fae8d267dbef9f04817833a494200f1fce35
@@ -861,17 +861,17 @@ SPEC CHECKSUMS:
   FBLazyVector: f1897022b53abf1469d6ad692ee2c69f57d967f3
   FBReactNativeSpec: 627fd07f1b9d498c9fa572e76d7f1a6b1ee9a444
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  glog: 791fe035093b84822da7f0870421a25839ca7870
   helium-react-native-sdk: 32c0a7e3abc733a7f3d291013b2db31475fc6980
-  hermes-engine: 0784cadad14b011580615c496f77e0ae112eed75
+  hermes-engine: 7a53ccac09146018a08239c5425625fdb79a6162
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   MapboxCommon: fdf7fd31c90b7b607cd9c63e37797f023c01d860
   MapboxCoreMaps: 24270c7c6b8cb71819fc2f3c549db9620ee4d019
   MapboxMaps: cb76511b98d3b95c74b0771ed105bc69f30ace6b
   MapboxMobileEvents: de50b3a4de180dd129c326e09cd12c8adaaa46d6
   MultiplatformBleAdapter: 5a6a897b006764392f9cef785e4360f54fb9477d
   OneSignalXCFramework: 81ceac017a290f23793443323090cfbe888f74ea
-  RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
+  RCT-Folly: 85766c3226c7ec638f05ad7cb3cf6a268d6c4241
   RCTRequired: bd6045fbd511da5efe6db89eecb21e4e36bd7cbf
   RCTTypeSafety: c06d9f906faa69dd1c88223204c3a24767725fd8
   React: b9ea33557ef1372af247f95d110fbdea114ed3b2

src/features/collectables/AntennaSetupScreen.tsx

@@ -0,0 +1,206 @@
+import React, { useEffect, useState, useMemo, useCallback, memo } from 'react'
+import BackScreen from '@components/BackScreen'
+import { ReAnimatedBox } from '@components/AnimatedBox'
+import Box from '@components/Box'
+import ButtonPressable from '@components/ButtonPressable'
+import CircleLoader from '@components/CircleLoader'
+import SafeAreaBox from '@components/SafeAreaBox'
+import Text from '@components/Text'
+import TextInput from '@components/TextInput'
+import useSubmitTxn from '@hooks/useSubmitTxn'
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import { useTranslation } from 'react-i18next'
+import {
+  KeyboardAvoidingView,
+  Keyboard,
+  TouchableWithoutFeedback,
+} from 'react-native'
+import { useEntityKey } from '@hooks/useEntityKey'
+import { useIotInfo } from '@hooks/useIotInfo'
+import { Edge } from 'react-native-safe-area-context'
+import { DelayedFadeIn } from '@components/FadeInOut'
+import {
+  CollectableNavigationProp,
+  CollectableStackParamList,
+} from './collectablesTypes'
+import { parseH3BNLocation } from '../../utils/h3'
+import * as Logger from '../../utils/logger'
+
+const BUTTON_HEIGHT = 65
+type Route = RouteProp<CollectableStackParamList, 'AntennaSetupScreen'>
+const AntennaSetupScreen = () => {
+  const { t } = useTranslation()
+  const nav = useNavigation<CollectableNavigationProp>()
+  const route = useRoute<Route>()
+  const { collectable } = route.params
+  const entityKey = useEntityKey(collectable)
+  const iotInfoAcc = useIotInfo(entityKey)
+  const safeEdges = useMemo(() => ['bottom'] as Edge[], [])
+  const backEdges = useMemo(() => ['top'] as Edge[], [])
+  const [hasSetDefaults, setHasSetDefaults] = useState(false)
+  const [gain, setGain] = useState<string>()
+  const [elevation, setElevation] = useState<string>()
+  const [updating, setUpdating] = useState(false)
+  const [transactionError, setTransactionError] = useState<string>()
+  const { submitUpdateEntityInfo } = useSubmitTxn()
+
+  const iotLocation = useMemo(() => {
+    if (!iotInfoAcc?.info?.location) {
+      return undefined
+    }
+
+    return parseH3BNLocation(iotInfoAcc.info.location).reverse()
+  }, [iotInfoAcc])
+
+  useEffect(() => {
+    if (!hasSetDefaults && iotInfoAcc?.info) {
+      if (iotInfoAcc?.info?.gain) {
+        setGain(`${iotInfoAcc?.info?.gain / 10}`)
+      }
+
+      if (iotInfoAcc?.info?.elevation) {
+        setElevation(`${iotInfoAcc?.info?.elevation}`)
+      }
+
+      setHasSetDefaults(true)
+    }
+  }, [iotInfoAcc, setGain, setElevation, hasSetDefaults, setHasSetDefaults])
+
+  const handleUpdateElevGain = useCallback(async () => {
+    if (iotLocation && entityKey) {
+      setTransactionError(undefined)
+      setUpdating(true)
+      try {
+        await submitUpdateEntityInfo({
+          type: 'iot',
+          entityKey,
+          lng: iotLocation[0],
+          lat: iotLocation[1],
+          elevation,
+          decimalGain: gain,
+        })
+        nav.push('SettingUpAntennaScreen')
+      } catch (error) {
+        setUpdating(false)
+        Logger.error(error)
+        setTransactionError((error as Error).message)
+      }
+    }
+  }, [
+    iotLocation,
+    entityKey,
+    elevation,
+    gain,
+    setUpdating,
+    setTransactionError,
+    submitUpdateEntityInfo,
+    nav,
+  ])
+
+  const showError = useMemo(() => {
+    if (transactionError) return transactionError
+  }, [transactionError])
+
+  return (
+    <ReAnimatedBox flex={1} entering={DelayedFadeIn}>
+      <BackScreen
+        headerTopMargin="l"
+        padding="none"
+        title={t('antennaSetupScreen.title')}
+        edges={backEdges}
+        backgroundImageUri={collectable.content?.metadata?.image || ''}
+      >
+        <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+          <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
+            <SafeAreaBox
+              edges={safeEdges}
+              backgroundColor="transparent"
+              flex={1}
+              padding="m"
+              marginHorizontal="s"
+              marginVertical="xs"
+            >
+              <Box flexGrow={1} justifyContent="center">
+                <Text textAlign="left" variant="subtitle2" adjustsFontSizeToFit>
+                  {t('antennaSetupScreen.antennaSetup')}
+                </Text>
+                <Text
+                  variant="subtitle4"
+                  color="secondaryText"
+                  marginBottom="m"
+                >
+                  {t('antennaSetupScreen.antennaSetupDescription')}
+                </Text>
+                <Box
+                  width="100%"
+                  backgroundColor="secondary"
+                  borderRadius="l"
+                  paddingVertical="xs"
+                >
+                  <TextInput
+                    variant="transparent"
+                    floatingLabel={`${t('antennaSetupScreen.gainPlaceholder')}`}
+                    textInputProps={{
+                      placeholder: t('antennaSetupScreen.gainPlaceholder'),
+                      onChangeText: setGain,
+                      value: gain,
+                      keyboardType: 'decimal-pad',
+                    }}
+                  />
+                  <Box height={1} width="100%" backgroundColor="black200" />
+                  <TextInput
+                    variant="transparent"
+                    floatingLabel={`${t(
+                      'antennaSetupScreen.elevationPlaceholder',
+                    )}`}
+                    textInputProps={{
+                      placeholder: t('antennaSetupScreen.elevationPlaceholder'),
+                      onChangeText: setElevation,
+                      value: elevation,
+                      keyboardType: 'decimal-pad',
+                    }}
+                  />
+                </Box>
+              </Box>
+              <Box
+                flexDirection="row"
+                justifyContent="center"
+                alignItems="center"
+                marginVertical="s"
+                minHeight={40}
+              >
+                {showError && (
+                  <Text variant="body3Medium" color="red500">
+                    {showError}
+                  </Text>
+                )}
+              </Box>
+              <Box>
+                <ButtonPressable
+                  height={BUTTON_HEIGHT}
+                  flexGrow={1}
+                  borderRadius="round"
+                  backgroundColor="white"
+                  backgroundColorOpacityPressed={0.7}
+                  backgroundColorDisabled="white"
+                  backgroundColorDisabledOpacity={0.0}
+                  titleColorDisabled="grey600"
+                  title={updating ? '' : t('antennaSetupScreen.submit')}
+                  titleColor="black"
+                  onPress={handleUpdateElevGain}
+                  TrailingComponent={
+                    updating ? (
+                      <CircleLoader loaderSize={20} color="black" />
+                    ) : undefined
+                  }
+                />
+              </Box>
+            </SafeAreaBox>
+          </KeyboardAvoidingView>
+        </TouchableWithoutFeedback>
+      </BackScreen>
+    </ReAnimatedBox>
+  )
+}
+
+export default memo(AntennaSetupScreen)