Fix lint and fix app structure

babel.config.js

@@ -20,16 +20,14 @@ const baseConfig = {
           '@helium/crypto': './node_modules/@helium/crypto-react-native',
           '@assets': './src/assets',
           '@components': './src/components',
-          '@constants': './src/constants',
           '@hooks': './src/hooks',
-          '@theme': './src/theme',
           '@utils': './src/utils',
-          '@storage': './src/storage',
+          '@config': './src/config',
           '@types': './src/types',
           '@features': './src/features',
-          '@services': './src/services',
+          '@services': './src/app/services',
           '@store': './src/store',
-          '@/solana': './src/solana',
+          '@app': './src/app',
         },
         extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
         root: ['./src'],

index.js

@@ -8,12 +8,12 @@ import 'react-native-url-polyfill/auto'
 import { Provider as ReduxProvider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react'
 import { name as appName } from './app.json'
-import App from './src/App'
+import App from './src/app/App'
 import { GlobalError } from './src/components/GlobalError'
-import AccountStorageProvider from './src/storage/AccountStorageProvider'
-import AppStorageProvider from './src/storage/AppStorageProvider'
-import LanguageProvider from './src/storage/LanguageProvider'
-import NotificationStorageProvider from './src/storage/NotificationStorageProvider'
+import AccountStorageProvider from './src/config/storage/AccountStorageProvider'
+import AppStorageProvider from './src/config/storage/AppStorageProvider'
+import LanguageProvider from './src/config/storage/LanguageProvider'
+import NotificationStorageProvider from './src/config/storage/NotificationStorageProvider'
 import { persistor } from './src/store/persistence'
 import store from './src/store/store'
 import './src/utils/i18n'

project-structure.md

@@ -0,0 +1,69 @@
+# 🗄️ Project Structure
+
+Most of the code lives in the `src` folder and looks something like this:
+
+```sh
+src
+|
++-- app               # application layer containing:
+|   |                 # this folder might differ based on the meta framework used
+|   +-- services      # application services. The super app top level navigation is defined as a set of services
+|   +-- RootNavigator.tsx # Main navigator for the app that determines the initial route. Either app onboarding UI or the top level service navigator
+|   +-- App.tsx       # main application component
++-- assets            # assets folder can contain all the static files such as images, fonts, etc.
+|
++-- components        # shared components used across the entire application
+|
++-- config            # global configurations, exported env variables etc.
+|
++-- features          # feature based modules
+|
++-- hooks             # shared hooks used across the entire application
+|
++-- lib               # reusable libraries preconfigured for the application
+|
++-- stores            # global state stores
+|
++-- testing           # test utilities and mocks
+|
++-- types             # shared types used across the application
+|
++-- utils             # shared utility functions
+```
+
+A service could have the following structure:
+
+```sh
+src/services/srcful
+|
++-- pages         # pages scoped to a specific service
+|
++-- index.tsx     # service entry point
+```
+
+For easy scalability and maintenance, organize most of the code within the features folder. Each feature folder should contain code specific to that feature, keeping things neatly separated. This approach helps prevent mixing feature-related code with shared components, making it simpler to manage and maintain the codebase compared to having many files in a flat folder structure. By adopting this method, you can enhance collaboration, readability, and scalability in the application's architecture.
+
+A feature could have the following structure:
+
+```sh
+src/features/awesome-feature
+|
++-- api         # exported API request declarations and api hooks related to a specific feature
+|
++-- assets      # assets folder can contain all the static files for a specific feature
+|
++-- components  # components scoped to a specific feature
+|
++-- hooks       # hooks scoped to a specific feature
+|
++-- stores      # state stores for a specific feature
+|
++-- types       # typescript types used within the feature
+|
++-- utils       # utility functions for a specific feature
+```
+
+NOTE: You don't need all of these folders for every feature. Only include the ones that are necessary for the feature.
+
+By following these practices, you can ensure that your codebase is well-organized, scalable, and maintainable. This will help you and your team to work more efficiently and effectively on the project.
+This approach can also make it easier to apply similar architecture to apps built with Next.js, Remix or React Native.

src/App.tsx → src/app/App.tsx

@@ -4,11 +4,11 @@ import { PortalProvider } from '@gorhom/portal'
 import { OnboardingProvider as HotspotOnboardingProvider } from '@helium/react-native-sdk'
 import { DarkTheme, NavigationContainer } from '@react-navigation/native'
 import { ThemeProvider } from '@shopify/restyle'
-import { ModalProvider } from '@storage/ModalsProvider'
-import TokensProvider from '@storage/TokensProvider'
+import { ModalProvider } from '@config/storage/ModalsProvider'
+import TokensProvider from '@config/storage/TokensProvider'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import globalStyles from '@theme/globalStyles'
-import { darkTheme } from '@theme/theme'
+import globalStyles from '@config/theme/globalStyles'
+import { darkTheme } from '@config/theme/theme'
 import * as SplashLib from 'expo-splash-screen'
 import React, { useMemo } from 'react'
 import Mapbox from '@rnmapbox/maps'
@@ -19,24 +19,24 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { OneSignal } from 'react-native-onesignal'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import 'text-encoding-polyfill'
-import SplashScreen from './components/SplashScreen'
-import WalletConnectProvider from './features/dappLogin/WalletConnectProvider'
-import LockScreen from './features/lock/LockScreen'
-import InsufficientSolConversionModal from './features/modals/InsufficientSolConversionModal'
-import WalletOnboardingProvider from './features/onboarding/OnboardingProvider'
-import SecurityScreen from './features/security/SecurityScreen'
-import useMount from './hooks/useMount'
-import { navigationRef } from './navigation/NavigationHelper'
-import RootNavigator from './navigation/RootNavigator'
-import './polyfill'
-import SolanaProvider from './solana/SolanaProvider'
-import WalletSignProvider from './solana/WalletSignProvider'
-import { useAccountStorage } from './storage/AccountStorageProvider'
-import { GovernanceProvider } from './storage/GovernanceProvider'
-import { useNotificationStorage } from './storage/NotificationStorageProvider'
-import { BalanceProvider } from './utils/Balance'
-import { useDeepLinking } from './utils/linking'
-import KeystoneOnboardingProvider from './features/keystone/KeystoneOnboardingProvider'
+import SolanaProvider from '@features/solana/SolanaProvider'
+import WalletSignProvider from '@features/solana/WalletSignProvider'
+import { useAccountStorage } from '@config/storage/AccountStorageProvider'
+import { GovernanceProvider } from '@config/storage/GovernanceProvider'
+import { useNotificationStorage } from '@config/storage/NotificationStorageProvider'
+import { BalanceProvider } from '@utils/Balance'
+import { useDeepLinking } from '@utils/linking'
+import KeystoneOnboardingProvider from '@features/keystone/KeystoneOnboardingProvider'
+import SplashScreen from '../components/SplashScreen'
+import WalletConnectProvider from '../features/dappLogin/WalletConnectProvider'
+import LockScreen from '../features/lock/LockScreen'
+import InsufficientSolConversionModal from '../features/modals/InsufficientSolConversionModal'
+import WalletOnboardingProvider from '../features/onboarding/OnboardingProvider'
+import SecurityScreen from '../features/security/SecurityScreen'
+import useMount from '../hooks/useMount'
+import { navigationRef } from './NavigationHelper'
+import RootNavigator from './RootNavigator'
+import '../polyfill'
 
 SplashLib.preventAutoHideAsync().catch(() => {
   /* reloading the app might trigger some race conditions, ignore them */

src/navigation/NavigationHelper.ts → src/app/NavigationHelper.ts

@@ -1,5 +1,5 @@
 import { createNavigationContainerRef } from '@react-navigation/native'
-import { AccountsServiceStackParamList } from '@services/AccountsService'
+import { AccountsServiceStackParamList } from 'src/app/services/AccountsService'
 import { RootStackParamList } from './rootTypes'
 
 export const navigationRef = createNavigationContainerRef<RootStackParamList>()

src/navigation/RootNavigator.tsx → src/app/RootNavigator.tsx

@@ -2,19 +2,19 @@ import {
   StackNavigationOptions,
   createStackNavigator,
 } from '@react-navigation/stack'
-import { useColors } from '@theme/themeHooks'
+import { useColors } from '@config/theme/themeHooks'
 import React, { memo, useEffect, useMemo } from 'react'
 import changeNavigationBarColor from 'react-native-navigation-bar-color'
 import ServiceSheetNavigator from '@services/ServiceSheetNavigator'
-import { useAccountStorage } from '@storage/AccountStorageProvider'
-import ScanQrCodeScreen from '../features/keystone/ScanQrCodeScreen'
-import SelectKeystoneAccountsScreen from '../features/keystone/SelectKeystoneAccountsScreen'
-import DappLoginScreen from '../features/dappLogin/DappLoginScreen'
-import OnboardingNavigator from '../features/onboarding/OnboardingNavigator'
-import ImportPrivateKey from '../features/onboarding/import/ImportPrivateKey'
-import PaymentScreen from '../features/payment/PaymentScreen'
-import LinkWallet from '../features/txnDelegation/LinkWallet'
-import SignHotspot from '../features/txnDelegation/SignHotspot'
+import { useAccountStorage } from '@config/storage/AccountStorageProvider'
+import ScanQrCodeScreen from '@features/keystone/ScanQrCodeScreen'
+import SelectKeystoneAccountsScreen from '@features/keystone/SelectKeystoneAccountsScreen'
+import DappLoginScreen from '@features/dappLogin/DappLoginScreen'
+import OnboardingNavigator from '@features/onboarding/OnboardingNavigator'
+import ImportPrivateKey from '@features/onboarding/import/ImportPrivateKey'
+import PaymentScreen from '@features/payment/PaymentScreen'
+import LinkWallet from '@features/txnDelegation/LinkWallet'
+import SignHotspot from '@features/txnDelegation/SignHotspot'
 import { RootStackParamList } from './rootTypes'
 
 const screenOptions = { headerShown: false } as StackNavigationOptions

src/navigation/rootTypes.ts → src/app/rootTypes.ts

@@ -1,7 +1,7 @@
 import { LinkWalletRequest, SignHotspotRequest } from '@helium/wallet-link'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { KeystoneAccountType } from 'src/features/keystone/SelectKeystoneAccountsScreen'
-import { PaymentRouteParam } from '@services/WalletService'
+import { PaymentRouteParam } from 'src/app/services/WalletService'
 
 export type RootStackParamList = {
   OnboardingNavigator: undefined

src/services/AccountsService/index.tsx → src/app/services/AccountsService/index.tsx

@@ -4,7 +4,7 @@ import {
   StackNavigationProp,
   createStackNavigator,
 } from '@react-navigation/stack'
-import { useColors } from '@theme/themeHooks'
+import { useColors } from '@config/theme/themeHooks'
 import AddNewAccountNavigator from '@features/home/addNewAccount/AddNewAccountNavigator'
 import AccountAssignScreen from '@features/onboarding/AccountAssignScreen'
 import { RouteAccount } from '@features/onboarding/create/createAccountNavTypes'

src/services/AccountsService/pages/YourWalletsPage.tsx → src/app/services/AccountsService/pages/YourWalletsPage.tsx

@@ -5,30 +5,30 @@ import { ReAnimatedBox } from '@components/AnimatedBox'
 import { FadeIn } from 'react-native-reanimated'
 import Box from '@components/Box'
 import { Image, SectionList } from 'react-native'
-import { useAccountStorage } from '@storage/AccountStorageProvider'
+import { useAccountStorage } from '@config/storage/AccountStorageProvider'
 import { NetTypes } from '@helium/address'
-import { CSAccount } from '@storage/cloudStorage'
+import { CSAccount } from '@config/storage/cloudStorage'
 import TouchableContainer from '@components/TouchableContainer'
 import AccountIcon from '@components/AccountIcon'
 import { ellipsizeAddress } from '@utils/accountUtils'
-import { useColors, useSpacing } from '@theme/themeHooks'
-import SmallAdd from '@assets/images/smallAdd.svg'
-import BigAdd from '@assets/images/bigAdd.svg'
-import Checkmark from '@assets/images/checkmark.svg'
+import { useColors, useSpacing } from '@config/theme/themeHooks'
+import SmallAdd from '@assets/svgs/smallAdd.svg'
+import BigAdd from '@assets/svgs/bigAdd.svg'
+import Checkmark from '@assets/svgs/checkmark.svg'
 import { useNavigation } from '@react-navigation/native'
 import {
   HELIUM_DERIVATION,
   keypairFromSeed,
   solanaDerivation,
 } from '@hooks/useDerivationAccounts'
-import { getSecureAccount } from '@storage/secureStorage'
+import { getSecureAccount } from '@config/storage/secureStorage'
 import * as bip39 from 'bip39'
 import { useOnboarding } from '@features/onboarding/OnboardingProvider'
 import Toast from 'react-native-simple-toast'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
 import useLayoutHeight from '@hooks/useLayoutHeight'
-import { ServiceSheetNavigationProp } from '@services/serviceSheetTypes'
+import { ServiceSheetNavigationProp } from 'src/app/services/serviceSheetTypes'
 import CircleLoader from '@components/CircleLoader'
 import ScrollBox from '@components/ScrollBox'
 import { AccountsServiceNavigationProp } from '../accountServiceTypes'

src/services/HotspotService/index.tsx → src/app/services/HotspotService/index.tsx

@@ -1,19 +1,19 @@
 import React, { useMemo } from 'react'
-import Hotspot from '@assets/images/hotspot.svg'
-import Map from '@assets/images/map.svg'
-import Add from '@assets/images/add.svg'
-import Coin from '@assets/images/coin.svg'
+import Hotspot from '@assets/svgs/hotspot.svg'
+import Map from '@assets/svgs/map.svg'
+import Add from '@assets/svgs/add.svg'
+import Coin from '@assets/svgs/coin.svg'
 import ServiceSheetPage, {
   ServiceNavBarOption,
 } from '@components/ServiceSheetPage'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { PortalHost } from '@gorhom/portal'
 import Box from '@components/Box'
-import { HotspotWithPendingRewards } from '../../types/solana'
-import HotspotPage from './HotspotPage'
-import ExplorerPage from './ExplorerPage'
-import AddHotspotPage from './AddHotspotPage'
-import ClaimTokensPage from './ClaimTokensPage'
+import { HotspotWithPendingRewards } from '../../../types/solana'
+import HotspotPage from './pages/HotspotPage'
+import ExplorerPage from './pages/ExplorerPage'
+import AddHotspotPage from './pages/AddHotspotPage'
+import ClaimTokensPage from './pages/ClaimTokensPage'
 
 export type HotspotServiceStackParamList = {
   Hotspot: {

src/services/HotspotService/AddHotspotPage/index.tsx → src/app/services/HotspotService/pages/AddHotspotPage.tsx

@@ -4,13 +4,16 @@ import Text from '@components/Text'
 import React, { useCallback, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Image } from 'react-native'
-import Add from '@assets/images/add.svg'
-import { useColors, useSpacing } from '@theme/themeHooks'
-import RightArrow from '@assets/images/rightArrow.svg'
+import Add from '@assets/svgs/add.svg'
+import { useColors, useSpacing } from '@config/theme/themeHooks'
+import RightArrow from '@assets/svgs/rightArrow.svg'
 import ScrollBox from '@components/ScrollBox'
 import { NavBarHeight } from '@components/ServiceNavBar'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import OnboardingSheet, { OnboardingSheetRef } from './OnboardingSheet'
+import {
+  OnboardingSheetWrapper,
+  OnboardingSheetRef,
+} from '@features/hotspot-onboarding/OnboardingSheet'
 
 const AddHotspotPage = () => {
   const { t } = useTranslation()
@@ -95,7 +98,7 @@ const AddHotspotPage = () => {
           </Box>
         </Box>
       </ScrollBox>
-      <OnboardingSheet ref={onboardingSheetRef} />
+      <OnboardingSheetWrapper ref={onboardingSheetRef} />
     </>
   )
 }

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

@@ -2,12 +2,12 @@ import Box from '@components/Box'
 import ButtonPressable from '@components/ButtonPressable'
 import ScrollBox from '@components/ScrollBox'
 import Text from '@components/Text'
-import { useColors, useSpacing } from '@theme/themeHooks'
+import { useColors, useSpacing } from '@config/theme/themeHooks'
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Image, RefreshControl } from 'react-native'
-import MobileIcon from '@assets/images/mobileIconNew.svg'
-import IotIcon from '@assets/images/iotIconNew.svg'
+import MobileIcon from '@assets/svgs/mobileIconNew.svg'
+import IotIcon from '@assets/svgs/iotIconNew.svg'
 import TouchableContainer from '@components/TouchableContainer'
 import BalanceText from '@components/BalanceText'
 import useHotspots from '@hooks/useHotspots'
@@ -22,7 +22,7 @@ import { useBN } from '@hooks/useBN'
 import { useSolOwnedAmount } from '@helium/helium-react-hooks'
 import { useCurrentWallet } from '@hooks/useCurrentWallet'
 import { BN } from 'bn.js'
-import { useModal } from '@storage/ModalsProvider'
+import { useModal } from '@config/storage/ModalsProvider'
 import ProgressBar from '@components/ProgressBar'
 import { ReAnimatedBox } from '@components/AnimatedBox'
 import { FadeIn, FadeOut } from 'react-native-reanimated'

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

@@ -10,8 +10,8 @@ import {
   UserLocation,
 } from '@rnmapbox/maps'
 import React, { useCallback, useState } from 'react'
-import TotalHotspotPuck from '@assets/images/totalHotspotPuck.svg'
-import { useSpacing } from '@theme/themeHooks'
+import TotalHotspotPuck from '@assets/svgs/totalHotspotPuck.svg'
+import { useSpacing } from '@config/theme/themeHooks'
 import Text from '@components/Text'
 import { ReAnimatedBox } from '@components/AnimatedBox'
 import { FadeIn, FadeOut } from 'react-native-reanimated'