Allow user to skip if wifi is configured

src/features/hotspot-onboarding/screens/iot/ConnectViaBluetoothScreen.tsx

@@ -25,6 +25,7 @@ const ConnectViaBluetoothScreen = () => {
   const contentContainerStyle = useMemo(() => {
     return {
       padding: spacing['2xl'],
+      paddingBottom: spacing['4xl'],
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
@@ -33,30 +34,35 @@ const ConnectViaBluetoothScreen = () => {
   }, [spacing])
 
   return (
-    <ScrollBox
-      contentContainerStyle={contentContainerStyle as StyleProp<ViewStyle>}
-    >
-      <BluetoothIcon />
-      <Text variant="displayMdSemibold" color="primaryText" textAlign="center">
-        {t('ConnectViaBluetoothScreen.title')}
-      </Text>
-      <Text
-        variant="textLgRegular"
-        color="text.quaternary-500"
-        textAlign="center"
+    <>
+      <ScrollBox
+        contentContainerStyle={contentContainerStyle as StyleProp<ViewStyle>}
       >
-        {t('ConnectViaBluetoothScreen.subtitle')}
-      </Text>
-      <Text
-        variant="textLgSemibold"
-        color="primaryText"
-        textAlign="center"
-        mt="2xl"
-        marginHorizontal="2xl"
-      >
-        {t('ConnectViaBluetoothScreen.body')}
-      </Text>
-
+        <BluetoothIcon />
+        <Text
+          variant="displayMdSemibold"
+          color="primaryText"
+          textAlign="center"
+        >
+          {t('ConnectViaBluetoothScreen.title')}
+        </Text>
+        <Text
+          variant="textLgRegular"
+          color="text.quaternary-500"
+          textAlign="center"
+        >
+          {t('ConnectViaBluetoothScreen.subtitle')}
+        </Text>
+        <Text
+          variant="textLgSemibold"
+          color="primaryText"
+          textAlign="center"
+          mt="2xl"
+          marginHorizontal="2xl"
+        >
+          {t('ConnectViaBluetoothScreen.body')}
+        </Text>
+      </ScrollBox>
       <ReAnimatedBox
         entering={FadeIn}
         exiting={FadeOut}
@@ -92,7 +98,7 @@ const ConnectViaBluetoothScreen = () => {
           </Box>
         </TouchableContainer>
       </ReAnimatedBox>
-    </ScrollBox>
+    </>
   )
 }
 

src/features/hotspot-onboarding/screens/iot/WifiSettings.tsx

@@ -1,23 +1,20 @@
 import Text from '@components/Text'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
 import { useHotspotBle } from '@helium/react-native-sdk'
+import { Keypair } from '@solana/web3.js'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useAsyncCallback } from 'react-async-hook'
 import { useTranslation } from 'react-i18next'
-import {
-  Alert,
-  FlatList,
-  RefreshControl,
-  StyleProp,
-  ViewStyle,
-} from 'react-native'
+import { FlatList, RefreshControl, StyleProp, ViewStyle } from 'react-native'
 import ScrollBox from '@components/ScrollBox'
 import { useColors, useSpacing } from '@config/theme/themeHooks'
 import Box from '@components/Box'
 import RightArrow from '@assets/svgs/rightArrow.svg'
+import Checkmark from '@assets/svgs/checkmark.svg'
 import TouchableContainer from '@components/TouchableContainer'
 import CarotRight from '@assets/svgs/carot-right.svg'
 import Config from 'react-native-config'
+import animalName from 'angry-purple-tiger'
 import { useHotspotOnboarding } from '../../OnboardingSheet'
 
 const MOCK = Config.MOCK_IOT === 'true'
@@ -30,7 +27,7 @@ const WifiSettings = () => {
   const [configuredNetworks, setConfiguredNetworks] = useState<string[]>()
   const [connected, setConnected] = useState(false)
 
-  const { isConnected, readWifiNetworks, removeConfiguredWifi } =
+  const { isConnected, readWifiNetworks, getOnboardingAddress } =
     useHotspotBle()
   const { carouselRef, setOnboardDetails } = useHotspotOnboarding()
 
@@ -81,38 +78,23 @@ const WifiSettings = () => {
           }))
           carouselRef?.current?.snapToNext()
         } else {
-          Alert.alert(
-            t('hotspotOnboarding.wifiSettings.title'),
-            t('hotspotOnboarding.wifiSettings.remove', { network }),
-            [
-              {
-                text: t('generic.cancel'),
-                style: 'default',
-              },
-              {
-                text: t('generic.remove'),
-                style: 'destructive',
-                onPress: async () => {
-                  setConfiguredNetworks(
-                    configuredNetworks?.filter((n) => n !== network),
-                  )
-                  await removeConfiguredWifi(network)
-                  readWifiNetworks(true).then(setConfiguredNetworks)
-                  readWifiNetworks(false).then(setNetworks)
-                },
-              },
-            ],
-          )
+          // DO something
+          const onboardingAddress = MOCK
+            ? Keypair.generate().publicKey.toBase58()
+            : await getOnboardingAddress()
+          setOnboardDetails((o) => ({
+            ...o,
+            iotDetails: {
+              ...o.iotDetails,
+              onboardingAddress,
+              network,
+              animalName: animalName(onboardingAddress),
+            },
+          }))
+          carouselRef?.current?.snapToItem(5)
         }
       },
-    [
-      configuredNetworks,
-      readWifiNetworks,
-      removeConfiguredWifi,
-      t,
-      carouselRef,
-      setOnboardDetails,
-    ],
+    [carouselRef, setOnboardDetails, getOnboardingAddress],
   )
 
   const data = useMemo(
@@ -135,6 +117,8 @@ const WifiSettings = () => {
       const borderBottomEndRadius = last ? '2xl' : 'none'
       const borderTopEndRadius = first ? '2xl' : 'none'
 
+      const isConfigured = configuredNetworks?.includes(network)
+
       return (
         <TouchableContainer
           alignItems="center"
@@ -157,7 +141,10 @@ const WifiSettings = () => {
           <Text color="secondaryText" variant="textMdSemibold" flex={1}>
             {network}
           </Text>
-          <CarotRight color={colors['text.quaternary-500']} />
+          {!isConfigured && (
+            <CarotRight color={colors['text.quaternary-500']} />
+          )}
+          {isConfigured && <Checkmark color={colors['success.500']} />}
         </TouchableContainer>
       )
     },

src/features/hotspot-onboarding/screens/iot/WifiSetup.tsx

@@ -42,12 +42,27 @@ const WifiSetup = () => {
   }, [secureTextEntry])
 
   const handleSetWifi = useCallback(async () => {
+    if (MOCK) {
+      setLoading(true)
+
+      // wait 2 seconds
+      setTimeout(() => {
+        setLoading(false)
+      }, 2000)
+
+      const onboardingAddress = Keypair.generate().publicKey.toBase58()
+      setOnboardDetails((o) => ({
+        ...o,
+        iotDetails: { ...o.iotDetails, onboardingAddress },
+      }))
+      carouselRef?.current?.snapToNext()
+      return
+    }
+
     setLoading(true)
     try {
       await setWifi(network, password)
-      const onboardingAddress = MOCK
-        ? Keypair.generate().publicKey.toBase58()
-        : await getOnboardingAddress()
+      const onboardingAddress = await getOnboardingAddress()
       setOnboardDetails((o) => ({
         ...o,
         iotDetails: {

src/features/hotspots/ModifyWifiScreen.tsx

@@ -35,6 +35,7 @@ import Visibility from '@assets/svgs/visibility.svg'
 import VisibilityOff from '@assets/svgs/visibilityOff.svg'
 import { useNavigation } from '@react-navigation/native'
 import Config from 'react-native-config'
+import Checkmark from '@assets/svgs/checkmark.svg'
 
 const MOCK = Config.MOCK_IOT === 'true'
 const MOCK_DEVICES = [
@@ -190,6 +191,11 @@ const ScanHotspots = ({
     return true
   }
 
+  const navNext = useCallback(
+    () => carouselRef?.current?.snapToNext(),
+    [carouselRef],
+  )
+
   const handleScanPress = useCallback(async () => {
     const shouldScan = !scanning
     setScanning(shouldScan)
@@ -224,16 +230,16 @@ const ScanHotspots = ({
         stopScan()
       }
     }
-  }, [scannedDevices.length, scanning, startScan, stopScan])
-
-  const navNext = useCallback(
-    () => carouselRef?.current?.snapToNext(),
-    [carouselRef],
-  )
+  }, [scannedDevices, scanning, startScan, stopScan])
 
   const [connecting, setConnecting] = useState(false)
   const connectDevice = useCallback(
     (d: Device) => async () => {
+      if (MOCK) {
+        navNext()
+        return
+      }
+
       try {
         setConnecting(true)
         await connect(d)
@@ -261,6 +267,7 @@ const ScanHotspots = ({
       const borderTopEndRadius = first ? '2xl' : 'none'
       const borderBottomStartRadius = last ? '2xl' : 'none'
       const borderBottomEndRadius = last ? '2xl' : 'none'
+
       return (
         <TouchableContainer
           onPress={connectDevice(item)}
@@ -499,6 +506,8 @@ const WifiSettings = ({
       const borderBottomEndRadius = last ? '2xl' : 'none'
       const borderTopEndRadius = first ? '2xl' : 'none'
 
+      const isConfigured = configuredNetworks?.includes(network)
+
       return (
         <TouchableContainer
           alignItems="center"
@@ -521,7 +530,10 @@ const WifiSettings = ({
           <Text color="secondaryText" variant="textMdSemibold" flex={1}>
             {network}
           </Text>
-          <CarotRight color={colors['text.quaternary-500']} />
+          {!isConfigured && (
+            <CarotRight color={colors['text.quaternary-500']} />
+          )}
+          {isConfigured && <Checkmark color={colors['success.500']} />}
         </TouchableContainer>
       )
     },