Reorganize mobile app /src and /tests folders (#1357)

* Refactor mobile app utilities into new modules

* prettier

* update lock, feedback from codex

* fix path

* keep some files in utils

* fix tests

* update paths

* remove old docs

* cr feedback

* flatten inefficient paths

* better structure

* update test folder structure

* migrate images

* fix import

* fix Sentry path

* update ignore

* save wip migration

* more updates

* standardize component names

* rename assets

* fix linting

* add barrel exports. final refactor commit

* fix formatting

* fix nav bar

* reduce bundle size

* remove dupe license

* fix test

* fix merge issues

* add refactor doc so we can track what was imporoved

* cr feedback

* feedback

app/src/components/Disclosures.tsx

@@ -9,9 +9,9 @@ import type { Country3LetterCode } from '@selfxyz/common/constants';
 import { countryCodes } from '@selfxyz/common/constants';
 import type { SelfAppDisclosureConfig } from '@selfxyz/common/utils';
 import { BodyText } from '@selfxyz/mobile-sdk-alpha/components';
+import { slate200, slate500 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
-import CheckMark from '@/images/icons/checkmark.svg';
-import { slate200, slate500 } from '@/utils/colors';
+import CheckMark from '@/assets/icons/checkmark.svg';
 
 interface DisclosureProps {
   disclosures: SelfAppDisclosureConfig;

app/src/components/ErrorBoundary.tsx

@@ -6,8 +6,8 @@ import type { ErrorInfo } from 'react';
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 
-import { captureException } from '@/Sentry';
-import { flushAllAnalytics, trackNfcEvent } from '@/utils/analytics';
+import { captureException } from '@/config/sentry';
+import { flushAllAnalytics, trackNfcEvent } from '@/services/analytics';
 
 interface Props {
   children: React.ReactNode;

app/src/components/FeedbackModal.tsx

@@ -7,9 +7,14 @@ import { Alert, Modal, StyleSheet, Text, TextInput, View } from 'react-native';
 import { Button, XStack, YStack } from 'tamagui';
 
 import { Caption } from '@selfxyz/mobile-sdk-alpha/components';
-
-import { black, slate400, white, zinc800, zinc900 } from '@/utils/colors';
-import { advercase, dinot } from '@/utils/fonts';
+import {
+  black,
+  slate400,
+  white,
+  zinc800,
+  zinc900,
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { advercase, dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
 
 interface FeedbackModalProps {
   visible: boolean;

app/src/components/FeedbackModalScreen.tsx

@@ -12,11 +12,11 @@ import {
   SecondaryButton,
   Title,
 } from '@selfxyz/mobile-sdk-alpha/components';
+import { white } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
-import ModalClose from '@/images/icons/modal_close.svg';
-import LogoInversed from '@/images/logo_inversed.svg';
-import { white } from '@/utils/colors';
-import { confirmTap, impactLight } from '@/utils/haptic';
+import ModalClose from '@/assets/icons/modal_close.svg';
+import LogoInversed from '@/assets/images/logo_inversed.svg';
+import { confirmTap, impactLight } from '@/integrations/haptics';
 
 const ModalBackDrop = styled(View, {
   display: 'flex',

app/src/components/LoadingUI.tsx

@@ -8,9 +8,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Text, View, XStack, YStack } from 'tamagui';
 
 import { DelayedLottieView } from '@selfxyz/mobile-sdk-alpha';
-
-import CloseWarningIcon from '@/images/icons/close-warning.svg';
-import Plus from '@/images/icons/plus_slate600.svg';
 import {
   black,
   cyan300,
@@ -19,9 +16,12 @@ import {
   white,
   zinc500,
   zinc900,
-} from '@/utils/colors';
-import { extraYPadding } from '@/utils/constants';
-import { advercase, dinot } from '@/utils/fonts';
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { advercase, dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+import CloseWarningIcon from '@/assets/icons/close_warning.svg';
+import Plus from '@/assets/icons/plus_slate600.svg';
+import { extraYPadding } from '@/utils/styleUtils';
 
 interface LoadingUIProps {
   animationSource: LottieView['props']['source'];

app/src/components/Mnemonic.tsx

@@ -6,7 +6,6 @@ import React, { useCallback, useState } from 'react';
 import { Button, Text, XStack, YStack } from 'tamagui';
 import Clipboard from '@react-native-clipboard/clipboard';
 
-import { useSettingStore } from '@/stores/settingStore';
 import {
   black,
   slate50,
@@ -15,8 +14,10 @@ import {
   slate500,
   teal500,
   white,
-} from '@/utils/colors';
-import { confirmTap } from '@/utils/haptic';
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+
+import { confirmTap } from '@/integrations/haptics';
+import { useSettingStore } from '@/stores/settingStore';
 
 interface MnemonicProps {
   words?: string[];

app/src/components/NavBar/index.ts

@@ -1,8 +0,0 @@
-// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
-// SPDX-License-Identifier: BUSL-1.1
-// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
-
-export { AadhaarNavBar } from '@/components/NavBar/AadhaarNavBar';
-export { DefaultNavBar } from '@/components/NavBar/DefaultNavBar';
-export { HomeNavBar } from '@/components/NavBar/HomeNavBar';
-export { IdDetailsNavBar } from '@/components/NavBar/IdDetailsNavBar';

app/src/components/PointHistoryList.tsx

@@ -13,10 +13,6 @@ import { Card, Text, View, XStack, YStack } from 'tamagui';
 
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { PointEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
-
-import HeartIcon from '@/images/icons/heart.svg';
-import StarBlackIcon from '@/images/icons/star_black.svg';
-import { usePointEventStore } from '@/stores/pointEventStore';
 import {
   black,
   blue600,
@@ -26,9 +22,13 @@ import {
   slate400,
   slate500,
   white,
-} from '@/utils/colors';
-import { dinot, plexMono } from '@/utils/fonts';
-import type { PointEvent } from '@/utils/points';
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot, plexMono } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+import HeartIcon from '@/assets/icons/heart.svg';
+import StarBlackIcon from '@/assets/icons/star_black.svg';
+import type { PointEvent } from '@/services/points';
+import { usePointEventStore } from '@/stores/pointEventStore';
 
 type Section = {
   title: string;

app/src/components/Tips.tsx

@@ -6,8 +6,7 @@ import React from 'react';
 import { Text, View } from 'tamagui';
 
 import { Caption } from '@selfxyz/mobile-sdk-alpha/components';
-
-import { slate500 } from '@/utils/colors';
+import { slate500 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
 export interface TipProps {
   title: string;

app/src/components/WebViewFooter.tsx

@@ -6,9 +6,13 @@ import React from 'react';
 import { ArrowLeft, ArrowRight, RotateCcw } from '@tamagui/lucide-icons';
 
 import { Button, XStack, YStack } from '@selfxyz/mobile-sdk-alpha/components';
+import {
+  black,
+  slate50,
+  slate400,
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
-import { black, slate50, slate400 } from '@/utils/colors';
-import { buttonTap } from '@/utils/haptic';
+import { buttonTap } from '@/integrations/haptics';
 
 export interface WebViewFooterProps {
   canGoBack: boolean;

app/src/components/homescreen/IdCard.tsx

@@ -14,11 +14,6 @@ import {
 } from '@selfxyz/common/constants';
 import type { PassportData } from '@selfxyz/common/types/passport';
 import { isAadhaarDocument, isMRZDocument } from '@selfxyz/common/utils/types';
-import AadhaarIcon from '@selfxyz/mobile-sdk-alpha/svgs/icons/aadhaar.svg';
-import EPassport from '@selfxyz/mobile-sdk-alpha/svgs/icons/epassport.svg';
-
-import { SvgXml } from '@/components/homeScreen/SvgXmlWrapper';
-import LogoGray from '@/images/logo_gray.svg';
 import {
   black,
   slate100,
@@ -26,8 +21,13 @@ import {
   slate400,
   slate500,
   white,
-} from '@/utils/colors';
-import { dinot, plexMono } from '@/utils/fonts';
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot, plexMono } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+import AadhaarIcon from '@selfxyz/mobile-sdk-alpha/svgs/icons/aadhaar.svg';
+import EPassport from '@selfxyz/mobile-sdk-alpha/svgs/icons/epassport.svg';
+
+import LogoGray from '@/assets/images/logo_gray.svg';
+import { SvgXml } from '@/components/homescreen/SvgXmlWrapper';
 
 // Import the logo SVG as a string
 const logoSvg = `<svg width="47" height="46" viewBox="0 0 47 46" fill="none" xmlns="http://www.w3.org/2000/svg">

app/src/components/homescreen/SvgXmlWrapper.tsx

@@ -4,5 +4,5 @@
 
 // Re-export from the native version - Metro resolver will automatically
 // pick the appropriate platform-specific file (.web.tsx or .native.tsx)
-export { SvgXml } from '@/components/homeScreen/SvgXmlWrapper.native';
-export { default } from '@/components/homeScreen/SvgXmlWrapper.native';
+export { SvgXml } from '@/components/homescreen/SvgXmlWrapper.native';
+export { default } from '@/components/homescreen/SvgXmlWrapper.native';

app/src/components/navbar/AadhaarNavBar.tsx

@@ -8,12 +8,16 @@ import type { NativeStackHeaderProps } from '@react-navigation/native-stack';
 import { ChevronLeft, HelpCircle } from '@tamagui/lucide-icons';
 
 import { Button, XStack, YStack } from '@selfxyz/mobile-sdk-alpha/components';
+import {
+  black,
+  slate100,
+  slate300,
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
 
-import { NavBar } from '@/components/NavBar/BaseNavBar';
-import { black, slate100, slate300 } from '@/utils/colors';
-import { extraYPadding } from '@/utils/constants';
-import { dinot } from '@/utils/fonts';
-import { buttonTap } from '@/utils/haptic';
+import { NavBar } from '@/components/navbar/BaseNavBar';
+import { buttonTap } from '@/integrations/haptics';
+import { extraYPadding } from '@/utils/styleUtils';
 
 export const AadhaarNavBar = (props: NativeStackHeaderProps) => {
   const insets = useSafeAreaInsets();

app/src/components/navbar/DefaultNavBar.tsx

@@ -7,10 +7,11 @@ import type { TextStyle, ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { NativeStackHeaderProps } from '@react-navigation/native-stack';
 
-import { NavBar } from '@/components/NavBar/BaseNavBar';
-import { white } from '@/utils/colors';
-import { extraYPadding } from '@/utils/constants';
-import { buttonTap } from '@/utils/haptic';
+import { white } from '@selfxyz/mobile-sdk-alpha/constants/colors';
+
+import { NavBar } from '@/components/navbar/BaseNavBar';
+import { buttonTap } from '@/integrations/haptics';
+import { extraYPadding } from '@/utils/styleUtils';
 
 export const DefaultNavBar = (props: NativeStackHeaderProps) => {
   const { goBack, canGoBack } = props.navigation;

app/src/components/navbar/DocumentFlowNavBar.tsx

@@ -7,9 +7,10 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useNavigation } from '@react-navigation/native';
 import { HelpCircle } from '@tamagui/lucide-icons';
 
-import { NavBar } from '@/components/NavBar/BaseNavBar';
-import { slate100 } from '@/utils/colors';
-import { dinot } from '@/utils/fonts';
+import { slate100 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+import { NavBar } from '@/components/navbar/BaseNavBar';
 
 export const DocumentFlowNavBar = ({
   title,

app/src/components/navbar/HomeNavBar.tsx

@@ -11,14 +11,18 @@ import { Clipboard as ClipboardIcon } from '@tamagui/lucide-icons';
 
 import type { SelfApp } from '@selfxyz/common/utils/appType';
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
+import {
+  black,
+  charcoal,
+  slate50,
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
-import { NavBar } from '@/components/NavBar/BaseNavBar';
-import CogHollowIcon from '@/images/icons/cog_hollow.svg';
-import PlusCircleIcon from '@/images/icons/plus_circle.svg';
-import ScanIcon from '@/images/icons/qr_scan.svg';
-import { black, charcoal, slate50 } from '@/utils/colors';
-import { extraYPadding } from '@/utils/constants';
-import { buttonTap } from '@/utils/haptic';
+import CogHollowIcon from '@/assets/icons/cog_hollow.svg';
+import PlusCircleIcon from '@/assets/icons/plus_circle.svg';
+import ScanIcon from '@/assets/icons/qr_scan.svg';
+import { NavBar } from '@/components/navbar/BaseNavBar';
+import { buttonTap } from '@/integrations/haptics';
+import { extraYPadding } from '@/utils/styleUtils';
 
 export const HomeNavBar = (props: NativeStackHeaderProps) => {
   const selfClient = useSelfClient();

app/src/components/navbar/IdDetailsNavBar.tsx

@@ -7,11 +7,15 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { NativeStackHeaderProps } from '@react-navigation/native-stack';
 
 import { Button, Text, View } from '@selfxyz/mobile-sdk-alpha/components';
+import {
+  black,
+  charcoal,
+  slate50,
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
-import { NavBar } from '@/components/NavBar/BaseNavBar';
-import { black, charcoal, slate50 } from '@/utils/colors';
-import { extraYPadding } from '@/utils/constants';
-import { buttonTap } from '@/utils/haptic';
+import { NavBar } from '@/components/navbar/BaseNavBar';
+import { buttonTap } from '@/integrations/haptics';
+import { extraYPadding } from '@/utils/styleUtils';
 
 export const IdDetailsNavBar = (props: NativeStackHeaderProps) => {
   const insets = useSafeAreaInsets();

app/src/components/navbar/Points.tsx

@@ -12,20 +12,6 @@ import { HelpCircle } from '@tamagui/lucide-icons';
 
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { PointEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
-
-import { PointHistoryList } from '@/components/PointHistoryList';
-import { useIncomingPoints, usePoints } from '@/hooks/usePoints';
-import { usePointsGuardrail } from '@/hooks/usePointsGuardrail';
-import BellWhiteIcon from '@/images/icons/bell_white.svg';
-import ClockIcon from '@/images/icons/clock.svg';
-import LockWhiteIcon from '@/images/icons/lock_white.svg';
-import StarBlackIcon from '@/images/icons/star_black.svg';
-import LogoInversed from '@/images/logo_inversed.svg';
-import MajongImage from '@/images/majong.png';
-import type { RootStackParamList } from '@/navigation';
-import { usePointEventStore } from '@/stores/pointEventStore';
-import { useSettingStore } from '@/stores/settingStore';
-import analytics from '@/utils/analytics';
 import {
   black,
   blue600,
@@ -33,20 +19,34 @@ import {
   slate200,
   slate500,
   white,
-} from '@/utils/colors';
-import { dinot } from '@/utils/fonts';
-import { registerModalCallbacks } from '@/utils/modalCallbackRegistry';
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+import BellWhiteIcon from '@/assets/icons/bell_white.svg';
+import ClockIcon from '@/assets/icons/clock.svg';
+import LockWhiteIcon from '@/assets/icons/lock_white.svg';
+import StarBlackIcon from '@/assets/icons/star_black.svg';
+import LogoInversed from '@/assets/images/logo_inversed.svg';
+import MajongImage from '@/assets/images/majong.png';
+import { PointHistoryList } from '@/components/PointHistoryList';
+import { useIncomingPoints, usePoints } from '@/hooks/usePoints';
+import { usePointsGuardrail } from '@/hooks/usePointsGuardrail';
+import type { RootStackParamList } from '@/navigation';
+import analytics from '@/services/analytics';
 import {
   isTopicSubscribed,
   requestNotificationPermission,
   subscribeToTopics,
-} from '@/utils/notifications/notificationService';
+} from '@/services/notifications/notificationService';
 import {
   formatTimeUntilDate,
+  POINT_VALUES,
   recordBackupPointEvent,
   recordNotificationPointEvent,
-} from '@/utils/points';
-import { POINT_VALUES } from '@/utils/points/types';
+} from '@/services/points';
+import { usePointEventStore } from '@/stores/pointEventStore';
+import { useSettingStore } from '@/stores/settingStore';
+import { registerModalCallbacks } from '@/utils/modalCallbackRegistry';
 
 const Points: React.FC = () => {
   const selfClient = useSelfClient();

app/src/components/navbar/PointsNavBar.tsx

@@ -7,11 +7,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { NativeStackHeaderProps } from '@react-navigation/native-stack';
 
 import { Text, View } from '@selfxyz/mobile-sdk-alpha/components';
+import { black, slate50 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
-import { NavBar } from '@/components/NavBar/BaseNavBar';
-import { black, slate50 } from '@/utils/colors';
-import { extraYPadding } from '@/utils/constants';
-import { buttonTap } from '@/utils/haptic';
+import { NavBar } from '@/components/navbar/BaseNavBar';
+import { buttonTap } from '@/integrations/haptics';
+import { extraYPadding } from '@/utils/styleUtils';
 
 export const PointsNavBar = (props: NativeStackHeaderProps) => {
   const insets = useSafeAreaInsets();

app/src/components/navbar/WebViewNavBar.tsx

@@ -8,10 +8,10 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ExternalLink, X } from '@tamagui/lucide-icons';
 
 import { Button, XStack } from '@selfxyz/mobile-sdk-alpha/components';
+import { black } from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
 
-import { black } from '@/utils/colors';
-import { dinot } from '@/utils/fonts';
-import { buttonTap } from '@/utils/haptic';
+import { buttonTap } from '@/integrations/haptics';
 
 export interface WebViewNavBarProps {
   title?: string;

app/src/components/navbar/index.ts

@@ -0,0 +1,8 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+export { AadhaarNavBar } from '@/components/navbar/AadhaarNavBar';
+export { DefaultNavBar } from '@/components/navbar/DefaultNavBar';
+export { HomeNavBar } from '@/components/navbar/HomeNavBar';
+export { IdDetailsNavBar } from '@/components/navbar/IdDetailsNavBar';

app/src/components/referral/CopyReferralButton.tsx

@@ -8,10 +8,14 @@ import Clipboard from '@react-native-clipboard/clipboard';
 
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { PointEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
+import {
+  black,
+  green500,
+  white,
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
 
-import CopyToClipboard from '@/images/icons/copy_to_clipboard.svg';
-import { black, green500, white } from '@/utils/colors';
-import { dinot } from '@/utils/fonts';
+import CopyToClipboard from '@/assets/icons/copy_to_clipboard.svg';
 
 export interface CopyReferralButtonProps {
   referralLink: string;

app/src/components/referral/ReferralHeader.tsx

@@ -8,8 +8,9 @@ import { Image, Pressable } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Text, View } from 'tamagui';
 
-import ArrowLeft from '@/images/icons/arrow_left.svg';
-import { black, white } from '@/utils/colors';
+import { black, white } from '@selfxyz/mobile-sdk-alpha/constants/colors';
+
+import ArrowLeft from '@/assets/icons/arrow_left.svg';
 
 export interface ReferralHeaderProps {
   imageSource: ImageSourcePropType;

app/src/components/referral/ReferralInfo.tsx

@@ -6,8 +6,12 @@ import React from 'react';
 import { Pressable } from 'react-native';
 import { Text, YStack } from 'tamagui';
 
-import { black, blue600, slate500 } from '@/utils/colors';
-import { dinot } from '@/utils/fonts';
+import {
+  black,
+  blue600,
+  slate500,
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
 
 export interface ReferralInfoProps {
   title: string;

app/src/components/referral/ShareButton.tsx

@@ -6,8 +6,8 @@ import React from 'react';
 import { Pressable } from 'react-native';
 import { Text, View, YStack } from 'tamagui';
 
-import { slate800 } from '@/utils/colors';
-import { dinot } from '@/utils/fonts';
+import { slate800 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
 
 export interface ShareButtonProps {
   icon: React.ReactNode;