Add claim modal and fix bugs

src/app/services/HotspotService/pages/ClaimTokensPage.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next'
 import { Image, RefreshControl } from 'react-native'
 import MobileIcon from '@assets/svgs/mobileIconNew.svg'
 import IotIcon from '@assets/svgs/iotIconNew.svg'
-import HntIcon from '@assets/svgs/hnt.svg'
+import HntIcon from '@assets/svgs/hntIconNew.svg'
 import TouchableContainer from '@components/TouchableContainer'
 import BalanceText from '@components/BalanceText'
 import useHotspots from '@hooks/useHotspots'
@@ -30,6 +30,7 @@ import { ReAnimatedBox } from '@components/AnimatedBox'
 import { FadeIn, FadeOut } from 'react-native-reanimated'
 import { RootState } from '@store/rootReducer'
 import { useSelector } from 'react-redux'
+import { useBottomSpacing } from '@hooks/useBottomSpacing'
 
 const ClaimTokensPage = () => {
   const { t } = useTranslation()
@@ -39,6 +40,7 @@ const ClaimTokensPage = () => {
   const { showModal } = useModal()
   const solBalance = useBN(useSolOwnedAmount(wallet).amount)
   const colors = useColors()
+  const bottomSpacing = useBottomSpacing()
 
   const hasEnoughSol = useMemo(() => {
     return (solBalance || new BN(0)).gt(new BN(MIN_BALANCE_THRESHOLD))
@@ -57,8 +59,9 @@ const ClaimTokensPage = () => {
   const contentContainerStyle = useMemo(() => {
     return {
       padding: spacing['2xl'],
+      paddingBottom: bottomSpacing,
     }
-  }, [spacing])
+  }, [spacing, bottomSpacing])
 
   const totalPendingIot = useMemo(() => {
     if (!pendingIotRewards) return 0
@@ -67,7 +70,7 @@ const ClaimTokensPage = () => {
 
   const totalPendingHnt = useMemo(() => {
     if (!pendingHntRewards) return 0
-    return toNumber(pendingHntRewards, 6)
+    return toNumber(pendingHntRewards, 8)
   }, [pendingHntRewards])
 
   const totalPendingMobile = useMemo(() => {
@@ -164,12 +167,31 @@ const ClaimTokensPage = () => {
         {t('ClaimTokensPage.subtitle')}
       </Text>
       <Box
-        flexDirection="row"
+        flexDirection="column"
         borderRadius="4xl"
         overflow="hidden"
         gap="1"
         marginTop="4xl"
       >
+        <TouchableContainer
+          padding="xl"
+          gap="2.5"
+          backgroundColor="purple.100"
+          backgroundColorPressed="purple.200"
+          pressableStyles={{
+            flex: 1,
+          }}
+        >
+          <Box flexDirection="row" gap="2.5" alignItems="center">
+            <HntIcon width={50} height={50} />
+            <Box flexDirection="column">
+              <BalanceText amount={totalPendingHnt} />
+              <Text variant="textXsMedium" color="purple.600">
+                HNT
+              </Text>
+            </Box>
+          </Box>
+        </TouchableContainer>
         {totalPendingMobile > 0 && (
           <TouchableContainer
             padding="xl"
@@ -212,25 +234,6 @@ const ClaimTokensPage = () => {
             </Box>
           </TouchableContainer>
         )}
-        <TouchableContainer
-          padding="xl"
-          gap="2.5"
-          backgroundColor="bg.success-primary"
-          backgroundColorPressed="success.100"
-          pressableStyles={{
-            flex: 1,
-          }}
-        >
-          <Box flexDirection="row" gap="2.5" alignItems="center">
-            <HntIcon width={50} height={50} />
-            <Box flexDirection="column">
-              <BalanceText amount={totalPendingHnt} />
-              <Text variant="textXsMedium" color="success.500">
-                HNT
-              </Text>
-            </Box>
-          </Box>
-        </TouchableContainer>
       </Box>
       <ButtonPressable
         marginTop="2xl"

src/app/services/HotspotService/pages/ExplorerPage.tsx

@@ -20,10 +20,11 @@ import { useEntityKey } from '@hooks/useEntityKey'
 import { useIotInfo } from '@hooks/useIotInfo'
 import { useMobileInfo } from '@hooks/useMobileInfo'
 import { parseH3BNLocation } from '@utils/h3'
+import CircleLoader from '@components/CircleLoader'
 import { HotspotWithPendingRewards } from '../../../../types/solana'
 
 const ExplorerPage = () => {
-  const { hotspotsWithMeta } = useHotspots()
+  const { hotspotsWithMeta, loading } = useHotspots()
   const spacing = useSpacing()
   const [userLocation, setUserLocation] = useState<Location>()
   const [showTotalHotspotPuck, setShowTotalHotspotPuck] = useState(false)
@@ -67,12 +68,21 @@ const ExplorerPage = () => {
     )
   }, [showTotalHotspotPuck, hotspotsWithMeta, spacing])
 
+  if (loading) {
+    return (
+      <Box flex={1} justifyContent="center" alignItems="center">
+        <CircleLoader type="blue" loaderSize={60} />
+      </Box>
+    )
+  }
+
   return (
     <Box flex={1}>
       <TotalHotspotPuckContainer />
       <Map onCameraChanged={handleCameraChanged}>
         <Camera
-          minZoomLevel={1}
+          zoomLevel={0}
+          minZoomLevel={0}
           maxZoomLevel={22}
           pitch={0}
           centerCoordinate={[
@@ -117,7 +127,7 @@ const HotspotMarker = ({ hotspot }: { hotspot: HotspotWithPendingRewards }) => {
     if (mobileInfoAcc) {
       return parseH3BNLocation(mobileInfoAcc.info.location).reverse()
     }
-  }, [hotspot])
+  }, [iotInfoAcc?.info?.location, mobileInfoAcc?.info?.location])
 
   if (!result) return null
 

src/app/services/ServiceSheet.tsx

@@ -40,6 +40,7 @@ import { RootState } from '@store/rootReducer'
 import StickersPage from '@features/stickers/StickersPage'
 import { StickerProvider } from '@features/stickers/StickerContext'
 import { useSwipe } from '@hooks/useSwipe'
+import useHaptic from '@hooks/useHaptic'
 import { ServiceSheetNavigationProp } from './serviceSheetTypes'
 
 type ServiceSheetProps = {
@@ -62,14 +63,15 @@ const ServiceSheet = ({
   const spacing = useSpacing()
   const bottomSheetStyle = useBackgroundStyle('primaryText')
   const borderRadii = useBorderRadii()
+  const { triggerImpact } = useHaptic()
 
   const { rootSheetPosition } = useSelector((state: RootState) => state.app)
 
   const onSwipeRight = useCallback((_: GestureResponderEvent) => {
     setIsExpanded(true)
   }, [])
 
-  const { onTouchStart, onTouchEnd } = useSwipe(undefined, onSwipeRight, 6)
+  const { onTouchStart, onTouchEnd } = useSwipe(undefined, onSwipeRight, 2.5)
 
   const onRoute = useCallback(
     (value: string) => {
@@ -108,13 +110,14 @@ const ServiceSheet = ({
   )
 
   const onDrawerPress = useCallback(() => {
+    triggerImpact('light')
     setIsExpanded((s) => !s)
     changeNavigationBarColor(
       isExpanded ? colors.primaryText : colors.primaryBackground,
       undefined,
       true,
     )
-  }, [colors, isExpanded])
+  }, [colors, isExpanded, triggerImpact])
 
   const onWalletIconPress = useCallback(() => {
     if (currentService === 'wallets' && bottomSheetOpen) {
@@ -123,9 +126,16 @@ const ServiceSheet = ({
       return
     }
 
+    triggerImpact('light')
     serviceNav.replace('AccountsService')
     bottomSheetRef.current?.expand()
-  }, [currentService, serviceNav, bottomSheetRef, bottomSheetOpen])
+  }, [
+    currentService,
+    serviceNav,
+    bottomSheetRef,
+    bottomSheetOpen,
+    triggerImpact,
+  ])
 
   const onCloseSheet = useCallback(() => {
     // if (currentService === '') return

src/components/BalanceText.tsx

@@ -12,22 +12,17 @@ const BalanceText = ({
 }) => {
   const integral = useMemo(() => Math.floor(amount || 0), [amount])
 
-  const firstFractional = useMemo(() => {
+  const fractional = useMemo(() => {
     if (amount === undefined) return 0
     const decimal = amount - integral
-    const fraction = decimal.toString().split('.')[1]
-    // Fraction with max length of decimals
-    const fractionWithMaxDecimals = fraction?.slice(0, 1)
-    return fraction ? Number(fractionWithMaxDecimals) : 0
-  }, [amount, integral])
-
-  const secondFractional = useMemo(() => {
-    if (amount === undefined) return 0
-    const decimal = amount - integral
-    const fraction = decimal.toString().split('.')[1]
-    // Fraction with max length of decimals
-    const fractionWithMaxDecimals = fraction?.slice(1, 2)
-    return fraction ? Number(fractionWithMaxDecimals) : 0
+    const decimalFixed = decimal.toFixed(9)
+    const fraction = decimalFixed.toString().split('.')[1]
+    const decimalWithoutTrailingZeroes = decimalFixed.replace(/0+$/, '')
+    const decimalsLength = decimalWithoutTrailingZeroes
+      .toString()
+      .split('.')[1].length
+    const fractionWithMaxDecimals = fraction?.slice(1, decimalsLength)
+    return fraction ? fractionWithMaxDecimals : 0
   }, [amount, integral])
 
   return (
@@ -37,7 +32,7 @@ const BalanceText = ({
           {`${integral.toLocaleString()}`}
         </Text>
         <Text adjustsFontSizeToFit variant={variant} color="text.placeholder">
-          {`.${firstFractional}${secondFractional}`}
+          {`.${fractional}`}
         </Text>
       </Box>
     </Box>

src/components/SegmentedControl.tsx

@@ -13,6 +13,7 @@ import { GestureResponderEvent, LayoutChangeEvent } from 'react-native'
 import { SvgProps } from 'react-native-svg'
 import { useColors } from '@config/theme/themeHooks'
 import { useAnimatedStyle, withTiming } from 'react-native-reanimated'
+import useHaptic from '@hooks/useHaptic'
 import { Theme } from '../config/theme/theme'
 import { Box, ReAnimatedBox, Text } from '.'
 import TouchableOpacityBox from './TouchableOpacityBox'
@@ -119,6 +120,7 @@ const SegmentedControl = forwardRef(
   ) => {
     const [selectedIndex, setSelectedIndex] = useState(0)
     const [hasTouched, setHasTouched] = useState(false)
+    const { triggerImpact } = useHaptic()
 
     useImperativeHandle(ref, () => ({ selectedIndex }))
 
@@ -133,11 +135,12 @@ const SegmentedControl = forwardRef(
 
     const handleItemSelected = useCallback(
       (index: number) => () => {
+        triggerImpact('light')
         setHasTouched(true)
         setSelectedIndex(index)
         onItemSelected(index)
       },
-      [onItemSelected],
+      [onItemSelected, triggerImpact],
     )
 
     const leftPosition = useMemo(() => {

src/components/ServiceNavBar.tsx

@@ -14,6 +14,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import { SvgProps } from 'react-native-svg'
 import { useColors, useVerticalHitSlop } from '@config/theme/themeHooks'
+import useHaptic from '@hooks/useHaptic'
 import Box from './Box'
 import TouchableOpacityBox, {
   TouchableOpacityBoxProps,
@@ -118,6 +119,7 @@ const NavServiceNavBar = ({
 }: NavServiceBarProps) => {
   const hitSlop = useVerticalHitSlop('6')
   const [itemRects, setItemRects] = useState<Record<string, LayoutRectangle>>()
+  const { triggerImpact } = useHaptic()
 
   const offset = useSharedValue<number | null>(null)
 
@@ -132,9 +134,10 @@ const NavServiceNavBar = ({
 
   const handlePress = useCallback(
     (value: string) => () => {
+      triggerImpact('light')
       onItemSelected(value)
     },
-    [onItemSelected],
+    [onItemSelected, triggerImpact],
   )
 
   const handleLongPress = useCallback(

src/components/SideDrawer.tsx

@@ -6,6 +6,7 @@ import {
   withTiming,
 } from 'react-native-reanimated'
 import { ww } from '@utils/layout'
+import useHaptic from '@hooks/useHaptic'
 import TouchableOpacityBox from './TouchableOpacityBox'
 import { Box, ReAnimatedBox, SafeAreaBox, Text } from '.'
 import MenuButton from './MenuButton'
@@ -18,6 +19,7 @@ type SideDrawerProps = {
 
 const SideDrawer = ({ isExpanded, onRoute, onClose }: SideDrawerProps) => {
   const { t } = useTranslation()
+  const { triggerImpact } = useHaptic()
 
   const routes: { title: string; value: string }[] = useMemo(
     () =>
@@ -42,9 +44,10 @@ const SideDrawer = ({ isExpanded, onRoute, onClose }: SideDrawerProps) => {
 
   const onRoutePressed = useCallback(
     (route: string) => () => {
+      triggerImpact('light')
       onRoute(route)
     },
-    [onRoute],
+    [onRoute, triggerImpact],
   )
 
   return (

src/config/locales/en.ts

@@ -1753,4 +1753,7 @@ export default {
     subtitle:
       'There was an error with the app attempting to deep link. Please contact the app provider.',
   },
+  UnclaimedRewardsBanner: {
+    title: 'You have rewards to claim.',
+  },
 }

src/config/storage/AppStorageProvider.tsx

@@ -33,9 +33,7 @@ const useAppStorageHook = () => {
   )
   const [currency, setCurrency] = useState('USD')
   const [explorer, setExplorer] = useState<string | undefined>(undefined)
-  const [enableHaptic, setEnableHaptic] = useState<boolean | undefined>(
-    undefined,
-  )
+  const [enableHaptic, setEnableHaptic] = useState<boolean | undefined>(true)
   const [locked, setLocked] = useState<boolean>()
   const [convertToCurrency, setConvertToCurrency] = useState(false)
   const [enableTestnet, setEnableTestnet] = useState(false)

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

@@ -6,7 +6,7 @@ import { useHotspotOnboarding } from '@features/hotspot-onboarding/OnboardingShe
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import RightArrow from '@assets/svgs/rightArrow.svg'
-import BluetoothIcon from '@assets/svgs/bluetooth.svg'
+import BluetoothIcon from '@assets/svgs/bluetoothOnboard.svg'
 import { useColors, useSpacing } from '@config/theme/themeHooks'
 import { FadeIn, FadeOut } from 'react-native-reanimated'
 import { ReAnimatedBox } from '@components/AnimatedBox'
@@ -38,7 +38,7 @@ const ConnectViaBluetoothScreen = () => {
       <ScrollBox
         contentContainerStyle={contentContainerStyle as StyleProp<ViewStyle>}
       >
-        <BluetoothIcon />
+        <BluetoothIcon color="#0A3D91" />
         <Text
           variant="displayMdSemibold"
           color="primaryText"