Setup Antenna

src/features/collectables/AntennaSetupScreen.tsx

@@ -0,0 +1,212 @@
+import React, { useEffect, useState, useMemo, useCallback, memo } from 'react'
+import BackScreen from '@components/BackScreen'
+import { ReAnimatedBlurBox } 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 { CollectableStackParamList } from './collectablesTypes'
+import { parseH3BNLocation } from '../../utils/h3'
+import * as Logger from '../../utils/logger'
+import { TabBarNavigationProp } from '../../navigation/rootTypes'
+
+const BUTTON_HEIGHT = 65
+type Route = RouteProp<CollectableStackParamList, 'AntennaSetupScreen'>
+const AntennaSetupScreen = () => {
+  const { t } = useTranslation()
+  const navigation = useNavigation<TabBarNavigationProp>()
+  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,
+        })
+        setUpdating(false)
+        navigation.reset({
+          index: 0,
+          routes: [{ name: 'Collectables' }],
+        })
+      } catch (error) {
+        setUpdating(false)
+        Logger.error(error)
+        setTransactionError((error as Error).message)
+      }
+    }
+  }, [
+    iotLocation,
+    entityKey,
+    elevation,
+    gain,
+    setUpdating,
+    setTransactionError,
+    submitUpdateEntityInfo,
+    navigation,
+  ])
+
+  const showError = useMemo(() => {
+    if (transactionError) return transactionError
+  }, [transactionError])
+
+  return (
+    <ReAnimatedBlurBox
+      flexDirection="row"
+      position="absolute"
+      height="100%"
+      width="100%"
+    >
+      <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>
+    </ReAnimatedBlurBox>
+  )
+}
+
+export default memo(AntennaSetupScreen)

src/features/collectables/AssertLocationScreen.tsx

@@ -558,7 +558,7 @@ const AssertLocationScreen = () => {
               }
               TrailingComponent={
                 asserting ? (
-                  <CircleLoader loaderSize={20} color="white" />
+                  <CircleLoader loaderSize={20} color="black" />
                 ) : undefined
               }
             />

src/features/collectables/CollectablesNavigator.tsx

@@ -19,6 +19,7 @@ import ClaimAllRewardsScreen from './ClaimAllRewardsScreen'
 import ClaimingRewardsScreen from './ClaimingRewardsScreen'
 import CollectionScreen from './CollectionScreen'
 import NftDetailsScreen from './NftDetailsScreen'
+import AntennaSetupScreen from './AntennaSetupScreen'
 
 const CollectablesStack = createStackNavigator()
 
@@ -41,6 +42,10 @@ const CollectablesStackScreen = () => {
         name="AssertLocationScreen"
         component={AssertLocationScreen}
       />
+      <CollectablesStack.Screen
+        name="AntennaSetupScreen"
+        component={AntennaSetupScreen}
+      />
       <CollectablesStack.Screen
         name="PaymentScreen"
         component={PaymentScreen}

src/features/collectables/HotspotDetailsScreen.tsx

@@ -21,6 +21,8 @@ import useHaptic from '@hooks/useHaptic'
 import useCopyText from '@hooks/useCopyText'
 import { ellipsizeAddress } from '@utils/accountUtils'
 import { toNumber } from '@helium/spl-utils'
+import { useEntityKey } from '@hooks/useEntityKey'
+import { useIotInfo } from '@hooks/useIotInfo'
 import { ww } from '../../utils/layout'
 import {
   CollectableNavigationProp,
@@ -43,6 +45,9 @@ const HotspotDetailsScreen = () => {
   const copyText = useCopyText()
 
   const { collectable } = route.params
+  const entityKey = useEntityKey(collectable)
+  const iotInfoAcc = useIotInfo(entityKey)
+
   const pendingIotRewards =
     collectable &&
     collectable.pendingRewards &&
@@ -75,6 +80,13 @@ const HotspotDetailsScreen = () => {
     })
   }, [collectable, navigation])
 
+  const handleAntennaSetup = useCallback(() => {
+    setOptionsOpen(false)
+    navigation.navigate('AntennaSetupScreen', {
+      collectable,
+    })
+  }, [collectable, navigation])
+
   const handleClaimRewards = useCallback(() => {
     navigation.navigate('ClaimRewardsScreen', {
       hotspot: collectable,
@@ -123,6 +135,15 @@ const HotspotDetailsScreen = () => {
           selected={false}
           hasPressedState={false}
         />
+        {iotInfoAcc?.info?.location && (
+          <ListItem
+            key="antennaSetup"
+            title={t('collectablesScreen.hotspots.antennaSetup')}
+            onPress={handleAntennaSetup}
+            selected={false}
+            hasPressedState={false}
+          />
+        )}
         <ListItem
           key="copyAddress"
           title={t('collectablesScreen.hotspots.copyEccCompact')}
@@ -132,7 +153,14 @@ const HotspotDetailsScreen = () => {
         />
       </>
     ),
-    [handleSend, handleAssertLocation, handleCopyAddress, t],
+    [
+      handleSend,
+      handleAssertLocation,
+      handleAntennaSetup,
+      handleCopyAddress,
+      iotInfoAcc,
+      t,
+    ],
   )
 
   return (

src/features/collectables/collectablesTypes.ts

@@ -18,6 +18,9 @@ export type CollectableStackParamList = {
   AssertLocationScreen: {
     collectable: HotspotWithPendingRewards
   }
+  AntennaSetupScreen: {
+    collectable: HotspotWithPendingRewards
+  }
   PaymentScreen: undefined | PaymentRouteParam
 
   ClaimRewardsScreen: {

src/locales/en.ts

@@ -324,6 +324,15 @@ export default {
     locationNotFound: 'Location not found, Please try again.',
     mobileTitle: 'MOBILE',
   },
+  antennaSetupScreen: {
+    title: 'Antenna Setup',
+    antennaSetup: 'Antenna Setup',
+    antennaSetupDescription:
+      'Submit gain and elevation details for your Hotspot',
+    gainPlaceholder: 'TX / RX Gain (dBi)',
+    elevationPlaceholder: 'Elevation (meters)',
+    submit: 'Update Antenna',
+  },
   swapsScreen: {
     title: 'Swap my Tokens',
     swapTokens: 'Swap Tokens',