Revert "Show hotspot location in list and detail screen. (#467)" (#473)

This reverts commit 6c17427.

src/features/collectables/AntennaSetupScreen.tsx

@@ -49,7 +49,7 @@ const AntennaSetupScreen = () => {
       return undefined
     }
 
-    return parseH3BNLocation(iotInfoAcc.info.location)?.reverse()
+    return parseH3BNLocation(iotInfoAcc.info.location).reverse()
   }, [iotInfoAcc])
 
   useEffect(() => {

src/features/collectables/AssertLocationScreen.tsx

@@ -84,15 +84,15 @@ const AssertLocationScreen = () => {
       return undefined
     }
 
-    return parseH3BNLocation(iotInfoAcc.info.location)?.reverse()
+    return parseH3BNLocation(iotInfoAcc.info.location).reverse()
   }, [iotInfoAcc])
 
   const mobileLocation = useMemo(() => {
     if (!mobileInfoAcc?.info?.location) {
       return undefined
     }
 
-    return parseH3BNLocation(mobileInfoAcc.info.location)?.reverse()
+    return parseH3BNLocation(mobileInfoAcc.info.location).reverse()
   }, [mobileInfoAcc])
 
   const sameLocation = useMemo(() => {

src/features/collectables/HotspotCompressedListItem.tsx

@@ -17,7 +17,6 @@ import { useMint } from '@helium/helium-react-hooks'
 import { Mints } from '../../utils/constants'
 import { removeDashAndCapitalize } from '../../utils/hotspotNftsUtils'
 import { HotspotWithPendingRewards } from '../../types/solana'
-import useHotspotLocation from '../../hooks/useHotspotLocation'
 
 export type HotspotListItemProps = {
   hotspot: HotspotWithPendingRewards
@@ -33,17 +32,6 @@ const HotspotListItem = ({
     content: { metadata },
   } = hotspot
 
-  const eccCompact = useMemo(() => {
-    if (!metadata || !metadata?.attributes?.length) {
-      return undefined
-    }
-
-    return metadata.attributes.find((attr) => attr.trait_type === 'ecc_compact')
-      ?.value
-  }, [metadata])
-
-  const streetAddress = useHotspotLocation(eccCompact)
-
   const { info: iotMint } = useMint(IOT_MINT)
   const { info: mobileMint } = useMint(MOBILE_MINT)
 
@@ -77,6 +65,15 @@ const HotspotListItem = ({
     return formatLargeNumber(new BigNumber(num))
   }, [hotspot, mobileMint])
 
+  const eccCompact = useMemo(() => {
+    if (!metadata || !metadata?.attributes?.length) {
+      return undefined
+    }
+
+    return metadata.attributes.find((attr) => attr.trait_type === 'ecc_compact')
+      ?.value
+  }, [metadata])
+
   const hasIotRewards = useMemo(
     () => pendingIotRewards && pendingIotRewards.gt(new BN(0)),
     [pendingIotRewards],
@@ -105,39 +102,22 @@ const HotspotListItem = ({
             cache: 'force-cache',
           }}
         />
-        <Box
-          marginStart="m"
-          marginVertical="s"
-          flex={1}
-          justifyContent="center"
-        >
+        <Box marginStart="m" marginVertical="s" flex={1}>
           {metadata?.name && (
-            <Text
-              textAlign="left"
-              variant="subtitle2"
-              numberOfLines={1}
-              adjustsFontSizeToFit
-            >
+            <Text textAlign="left" variant="subtitle2" adjustsFontSizeToFit>
               {removeDashAndCapitalize(metadata.name)}
             </Text>
           )}
 
-          {streetAddress && (
-            <Text variant="body2" numberOfLines={1} adjustsFontSizeToFit>
-              {streetAddress}
-            </Text>
-          )}
+          <Box flexGrow={1} />
 
-          <Text
-            variant="subtitle3"
-            color="secondaryText"
-            numberOfLines={1}
-            adjustsFontSizeToFit
-          >
-            {eccCompact ? ellipsizeAddress(eccCompact) : ''}
-          </Text>
+          <Box flexDirection="row" marginEnd="s" alignItems="flex-end">
+            <Text variant="subtitle3" color="secondaryText">
+              {eccCompact ? ellipsizeAddress(eccCompact) : ''}
+            </Text>
+          </Box>
         </Box>
-        <Box marginVertical="s" marginHorizontal="s">
+        <Box marginVertical="s" marginEnd="s">
           {!!hasMobileRewards && (
             <Box
               marginBottom="s"

src/features/collectables/HotspotDetailsScreen.tsx

@@ -23,8 +23,6 @@ import { ellipsizeAddress } from '@utils/accountUtils'
 import { toNumber } from '@helium/spl-utils'
 import { useEntityKey } from '@hooks/useEntityKey'
 import { useIotInfo } from '@hooks/useIotInfo'
-import { FadeIn } from 'react-native-reanimated'
-import useHotspotLocation from '@hooks/useHotspotLocation'
 import { ww } from '../../utils/layout'
 import {
   CollectableNavigationProp,
@@ -49,7 +47,6 @@ const HotspotDetailsScreen = () => {
   const { collectable } = route.params
   const entityKey = useEntityKey(collectable)
   const iotInfoAcc = useIotInfo(entityKey)
-  const streetAddress = useHotspotLocation(entityKey)
 
   const pendingIotRewards =
     collectable &&
@@ -214,19 +211,7 @@ const HotspotDetailsScreen = () => {
                 }}
               />
             </Box>
-            {streetAddress && (
-              <ReAnimatedBox entering={FadeIn}>
-                <Text variant="body1" marginTop="l" textAlign="center">
-                  {streetAddress || ' '}
-                </Text>
-              </ReAnimatedBox>
-            )}
-            {!streetAddress && (
-              <Text variant="body1" marginTop="l" textAlign="center">
-                {' '}
-              </Text>
-            )}
-            <Box marginTop="m">
+            <Box marginTop="l" marginBottom="m">
               <Text variant="body1" marginBottom="ms">
                 {t('collectablesScreen.hotspots.pendingRewardsTitle')}
               </Text>

src/features/collectables/HotspotList.tsx

@@ -29,10 +29,9 @@ import { formatLargeNumber } from '../../utils/accountUtils'
 import HotspotCompressedListItem from './HotspotCompressedListItem'
 import HotspotListItem from './HotspotListItem'
 import { NFTSkeleton } from './NftListItem'
-import {
-  CollectableNavigationProp,
-  DEFAULT_PAGE_AMOUNT,
-} from './collectablesTypes'
+import { CollectableNavigationProp } from './collectablesTypes'
+
+export const DEFAULT_PAGE_AMOUNT = 20
 
 function RewardItem({
   mint,
@@ -302,7 +301,7 @@ const HotspotList = () => {
             hotspot={item}
             onPress={handleNavigateToCollectable}
             key={item.id}
-            marginBottom="s"
+            marginBottom="xs"
           />
         )
       }

src/features/collectables/collectablesTypes.ts

@@ -51,5 +51,3 @@ export type CollectableStackParamList = {
 
 export type CollectableNavigationProp =
   StackNavigationProp<CollectableStackParamList>
-
-export const DEFAULT_PAGE_AMOUNT = 20

src/hooks/useReverseGeo.ts

@@ -4,8 +4,11 @@ import { useAsync } from 'react-async-hook'
 
 export const useReverseGeo = (coords: number[] | undefined) =>
   useAsync(async () => {
-    const response = await reverseGeoCode(coords)
-    if (!response) return ''
+    if (!coords) return ''
+
+    const response = await axios.get(
+      `https://api.mapbox.com/geocoding/v5/mapbox.places/${coords[0]},${coords[1]}.json?access_token=${Config.MAPBOX_ACCESS_TOKEN}`,
+    )
 
     const placeName = response.data.features[0].place_name
     const parts = placeName.split(',')
@@ -15,53 +18,3 @@ export const useReverseGeo = (coords: number[] | undefined) =>
 
     return `${address}, ${city}, ${state}`
   }, [coords])
-
-export const reverseGeoCode = async (coords: number[] | undefined) => {
-  if (!coords) return
-
-  return axios.get<undefined, { data: Geo }>(
-    `https://api.mapbox.com/geocoding/v5/mapbox.places/${coords[0]},${coords[1]}.json?access_token=${Config.MAPBOX_ACCESS_TOKEN}`,
-  )
-}
-
-export interface Geo {
-  type: string
-  query: number[]
-  features: Feature[]
-  attribution: string
-}
-
-export interface Feature {
-  id: string
-  type: string
-  place_type: string[]
-  relevance: number
-  properties: Properties
-  text: string
-  place_name: string
-  center: number[]
-  geometry: Geometry
-  address?: string
-  context?: Context[]
-  bbox?: number[]
-}
-
-export interface Properties {
-  accuracy?: string
-  mapbox_id: string
-  wikidata?: string
-  short_code?: string
-}
-
-export interface Geometry {
-  type: string
-  coordinates: number[]
-}
-
-export interface Context {
-  id: string
-  mapbox_id: string
-  text: string
-  wikidata?: string
-  short_code?: string
-}

src/store/rootReducer.ts

@@ -20,9 +20,6 @@ import authReducer, { name as authSliceName } from './slices/authSlice'
 import hotspotReducer, {
   name as hotspotSliceName,
 } from './slices/hotspotsSlice'
-import locationReducer, {
-  name as locationSliceName,
-} from './slices/locationSlice'
 import browserReducer, { name as browserSliceName } from './slices/browserSlice'
 
 const solanaConfig = {
@@ -56,7 +53,6 @@ const reducer = combineReducers({
   [appSliceName]: appReducer,
   [hotspotSliceName]: hotspotReducer,
   [browserSliceName]: browserReducer,
-  [locationSliceName]: locationReducer,
 })
 
 export const rootReducer = (state: RootState, action: AnyAction) => {

src/store/slices/hotspotsSlice.ts

@@ -2,9 +2,9 @@ import { AnchorProvider } from '@coral-xyz/anchor'
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { Cluster, PublicKey } from '@solana/web3.js'
 import { CompressedNFT, HotspotWithPendingRewards } from 'src/types/solana'
+import { DEFAULT_PAGE_AMOUNT } from '../../features/collectables/HotspotList'
 import { CSAccount } from '../../storage/cloudStorage'
 import * as solUtils from '../../utils/solanaUtils'
-import { DEFAULT_PAGE_AMOUNT } from '../../features/collectables/collectablesTypes'
 
 export type WalletHotspots = {
   hotspots: CompressedNFT[]