Assert UX improvements, load device list from server

src/components/index.tsx

@@ -0,0 +1,30 @@
+import { ReAnimatedBlurBox, ReAnimatedBox } from '@components/AnimatedBox'
+import BackScreen from '@components/BackScreen'
+import Box from '@components/Box'
+import ButtonPressable from '@components/ButtonPressable'
+import CircleLoader from '@components/CircleLoader'
+import FabButton from '@components/FabButton'
+import FadeInOut, { DelayedFadeIn, FadeInFast } from '@components/FadeInOut'
+import ImageBox from '@components/ImageBox'
+import SafeAreaBox from '@components/SafeAreaBox'
+import SearchInput from '@components/SearchInput'
+import Text from '@components/Text'
+import TextInput from '@components/TextInput'
+
+export {
+  ReAnimatedBlurBox,
+  ReAnimatedBox,
+  BackScreen,
+  Box,
+  ButtonPressable,
+  CircleLoader,
+  FabButton,
+  FadeInOut,
+  DelayedFadeIn,
+  FadeInFast,
+  ImageBox,
+  SafeAreaBox,
+  SearchInput,
+  Text,
+  TextInput,
+}

src/features/collectables/AssertLocationScreen.tsx

@@ -1,16 +1,22 @@
 import MapPin from '@assets/images/mapPin.svg'
-import { ReAnimatedBlurBox, ReAnimatedBox } from '@components/AnimatedBox'
-import BackScreen from '@components/BackScreen'
-import Box from '@components/Box'
-import ButtonPressable from '@components/ButtonPressable'
-import CircleLoader from '@components/CircleLoader'
-import FabButton from '@components/FabButton'
-import { DelayedFadeIn, FadeInFast } from '@components/FadeInOut'
-import ImageBox from '@components/ImageBox'
-import SafeAreaBox from '@components/SafeAreaBox'
-import SearchInput from '@components/SearchInput'
-import Text from '@components/Text'
-import TextInput from '@components/TextInput'
+import {
+  BackScreen,
+  Box,
+  ButtonPressable,
+  CircleLoader,
+  DelayedFadeIn,
+  FabButton,
+  FadeInFast,
+  FadeInOut,
+  ImageBox,
+  ReAnimatedBlurBox,
+  ReAnimatedBox,
+  SafeAreaBox,
+  SearchInput,
+  Text,
+  TextInput,
+} from '@components'
+import TouchableOpacityBox from '@components/TouchableOpacityBox'
 import { HotspotType } from '@helium/onboarding'
 import useAlert from '@hooks/useAlert'
 import { useEntityKey } from '@hooks/useEntityKey'
@@ -23,6 +29,10 @@ import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import MapboxGL from '@rnmapbox/maps'
 import turfBbox from '@turf/bbox'
 import { points } from '@turf/helpers'
+import { parseH3BNLocation } from '@utils/h3'
+import { removeDashAndCapitalize } from '@utils/hotspotNftsUtils'
+import * as Logger from '@utils/logger'
+import { MAX_MAP_ZOOM, MIN_MAP_ZOOM } from '@utils/mapbox'
 import debounce from 'lodash/debounce'
 import React, {
   memo,
@@ -42,17 +52,15 @@ import {
 import { Config } from 'react-native-config'
 import { Edge } from 'react-native-safe-area-context'
 import 'text-encoding-polyfill'
-import { parseH3BNLocation } from '../../utils/h3'
-import { removeDashAndCapitalize } from '../../utils/hotspotNftsUtils'
-import * as Logger from '../../utils/logger'
-import { MAX_MAP_ZOOM, MIN_MAP_ZOOM } from '../../utils/mapbox'
+import { useDebounce } from 'use-debounce'
 import {
   CollectableNavigationProp,
   CollectableStackParamList,
 } from './collectablesTypes'
 
 const BUTTON_HEIGHT = 65
 type Route = RouteProp<CollectableStackParamList, 'AssertLocationScreen'>
+
 const AssertLocationScreen = () => {
   const { t } = useTranslation()
   const route = useRoute<Route>()
@@ -241,26 +249,31 @@ const AssertLocationScreen = () => {
 
   const assertLocation = useCallback(
     async (type: HotspotType) => {
-      if (mapCenter && entityKey) {
-        setTransactionError(undefined)
-        setAsserting(true)
-        try {
-          hideElevGain()
-          await submitUpdateEntityInfo({
-            type,
-            entityKey,
-            lng: mapCenter[0],
-            lat: mapCenter[1],
-            elevation,
-            decimalGain: gain,
-          })
-          setAsserting(false)
-          collectNav.navigate('HotspotDetailsScreen', { collectable })
-        } catch (error) {
-          setAsserting(false)
-          Logger.error(error)
-          setTransactionError((error as Error).message)
-        }
+      if (!mapCenter || !entityKey) return
+
+      setTransactionError(undefined)
+      setAsserting(true)
+      try {
+        hideElevGain()
+        await submitUpdateEntityInfo({
+          type,
+          entityKey,
+          lng: mapCenter[0],
+          lat: mapCenter[1],
+          elevation,
+          decimalGain: gain,
+        })
+        setAsserting(false)
+
+        await showOKAlert({
+          title: t('assertLocationScreen.success.title'),
+          message: t('assertLocationScreen.success.message'),
+        })
+        collectNav.navigate('HotspotDetailsScreen', { collectable })
+      } catch (error) {
+        setAsserting(false)
+        Logger.error(error)
+        setTransactionError((error as Error).message)
       }
     },
     [
@@ -270,6 +283,8 @@ const AssertLocationScreen = () => {
       submitUpdateEntityInfo,
       elevation,
       gain,
+      showOKAlert,
+      t,
       collectNav,
       collectable,
     ],
@@ -306,13 +321,20 @@ const AssertLocationScreen = () => {
     if (transactionError) return transactionError
   }, [transactionError])
 
+  const disabled = useMemo(
+    () => !mapCenter || reverseGeo.loading || asserting,
+    [asserting, mapCenter, reverseGeo.loading],
+  )
+  const [debouncedDisabled] = useDebounce(disabled, 300)
+  const [reverseGeoLoading] = useDebounce(reverseGeo.loading, 300)
+
   return (
     <ReAnimatedBox entering={DelayedFadeIn} flex={1}>
       <BackScreen
         headerTopMargin="l"
         padding="none"
         title={t('assertLocationScreen.title')}
-        backgroundImageUri={collectable.content?.metadata?.image || ''}
+        backgroundImageUri={metadata?.image || ''}
         edges={backEdges}
       >
         <SafeAreaBox
@@ -528,7 +550,7 @@ const AssertLocationScreen = () => {
             marginVertical="s"
             minHeight={40}
           >
-            {reverseGeo.loading && (
+            {reverseGeoLoading && (
               <CircleLoader loaderSize={20} color="white" />
             )}
             {showError && (
@@ -537,35 +559,36 @@ const AssertLocationScreen = () => {
               </Text>
             )}
             {!reverseGeo.loading && !showError && (
-              <Text variant="body3Medium" color="grey600">
-                {reverseGeo.result}
-              </Text>
+              <FadeInOut>
+                <Text variant="body3Medium" color="grey600">
+                  {reverseGeo.result}
+                </Text>
+              </FadeInOut>
             )}
           </Box>
           <Box>
-            <ButtonPressable
-              height={BUTTON_HEIGHT}
-              flexGrow={1}
+            <TouchableOpacityBox
+              backgroundColor="surfaceContrast"
               borderRadius="round"
-              backgroundColor="white"
-              backgroundColorOpacityPressed={0.7}
-              backgroundColorDisabled="white"
-              backgroundColorDisabledOpacity={0.0}
-              titleColorDisabled="grey600"
-              title={asserting ? '' : t('assertLocationScreen.title')}
-              titleColor="black"
-              disabled={!mapCenter || reverseGeo.loading || asserting}
-              onPress={
-                reverseGeo.loading || forwardGeo.loading
-                  ? undefined
-                  : handleAssertLocationPress
-              }
-              TrailingComponent={
-                asserting ? (
-                  <CircleLoader loaderSize={20} color="black" />
-                ) : undefined
-              }
-            />
+              paddingVertical="lm"
+              disabled={disabled}
+              height={65}
+              alignItems="center"
+              justifyContent="center"
+              onPress={handleAssertLocationPress}
+            >
+              {debouncedDisabled || asserting ? (
+                <CircleLoader loaderSize={19} color="black" />
+              ) : (
+                <Text
+                  variant="subtitle2"
+                  marginHorizontal="xs"
+                  color="surfaceContrastText"
+                >
+                  {t('assertLocationScreen.title')}
+                </Text>
+              )}
+            </TouchableOpacityBox>
           </Box>
         </SafeAreaBox>
       </BackScreen>

src/features/hotspot-onboarding/SelectDevice.tsx

@@ -1,36 +1,16 @@
 import BackScreen from '@components/BackScreen'
+import CircleLoader from '@components/CircleLoader'
 import ImageBox from '@components/ImageBox'
 import Text from '@components/Text'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
 import { useNavigation } from '@react-navigation/native'
+import { getOnboardingDevices } from '@utils/walletApiV2'
 import React from 'react'
+import { useAsync } from 'react-async-hook'
 import { useTranslation } from 'react-i18next'
 import { FlatList } from 'react-native'
 import { OnboardableDevice, OnboardingNavProp } from './navTypes'
 
-const data: OnboardableDevice[] = [
-  {
-    name: 'Rak V2',
-    type: 'IotBle',
-    image:
-      'https://cdn.shopify.com/s/files/1/0177/8784/6756/t/58/assets/pf-0b98ac45--pfa8f02b76untitled106.png?v=1611822325',
-    options: {
-      bleInstructions:
-        'Power on your hotspot. Then press the button on the side of the hotspot to enable BLE.',
-    },
-  },
-  {
-    name: 'Generic Bluetooth Enabled Hotspot',
-    type: 'IotBle',
-    image:
-      'https://shdw-drive.genesysgo.net/6tcnBSybPG7piEDShBcrVtYJDPSvGrDbVvXmXKpzBvWP/hotspot.png',
-    options: {
-      bleInstructions:
-        'Power on your hotspot. Depending on your hotspot, there is either a button to enable BLE, or BLE will be enabled for the first 5 minutes after powering on.',
-    },
-  },
-]
-
 const SelectOnboardableDevice = () => {
   const { t } = useTranslation()
   const navigation = useNavigation<OnboardingNavProp>()
@@ -66,6 +46,7 @@ const SelectOnboardableDevice = () => {
     },
     [navigation],
   )
+  const { result: data, loading } = useAsync(() => getOnboardingDevices(), [])
 
   const keyExtractor = React.useCallback(
     ({ name }: OnboardableDevice) => name,
@@ -82,8 +63,9 @@ const SelectOnboardableDevice = () => {
       >
         {t('hotspotOnboarding.selectDevice.subtitle')}
       </Text>
+      {loading && <CircleLoader />}
       <FlatList
-        data={data}
+        data={data || []}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
       />

src/utils/walletApiV2.ts

@@ -6,6 +6,7 @@ import { getSecureItem } from '../storage/secureStorage'
 import { AccountBalance, Prices } from '../types/balance'
 import makeApiToken from './makeApiToken'
 import { CSAccount } from '../storage/cloudStorage'
+import { OnboardableDevice } from '../features/hotspot-onboarding/navTypes'
 
 export type Notification = {
   title: string
@@ -131,6 +132,15 @@ export const getRecommendedDapps = async () => {
   return data
 }
 
+export const getOnboardingDevices = async () => {
+  const { data, ...rest } = await axiosInstance.get<OnboardableDevice[]>(
+    '/onboardingDevices',
+  )
+  console.log("rest", rest)
+
+  return data
+}
+
 export const getSessionKey = async () => {
   const { data } = await axiosInstance.get<{ sessionKey: string }>(
     '/sessionKey',

tsconfig.json

@@ -19,6 +19,7 @@
       "@assets": ["./src/assets"],
       "@components/*": ["./src/components/*"],
       "@constants/*": ["./src/constants/*"],
+      "@components": ["src/components/index"],
       "@hooks/*": ["./src/hooks/*"],
       "@theme/*": ["./src/theme/*"],
       "@utils/*": ["./src/utils/*"],