feature: Comprehensive-error-handling and multi-language support (#138)

* feature: Comprehensive-error-handling and multi-language support

* fix: filing ci

* fix: lint

* format

Author: anonfedora

mobileapp/.detoxrc.json

@@ -18,9 +18,7 @@
       "type": "android.apk",
       "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
       "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug",
-      "reversePorts": [
-        8081
-      ]
+      "reversePorts": [8081]
     }
   },
   "devices": {

mobileapp/.eslintrc.js

@@ -25,4 +25,19 @@ module.exports = {
     "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
   },
   ignorePatterns: ["node_modules/", "dist/", ".expo/"],
+  overrides: [
+    {
+      files: ["e2e/**/*.js"],
+      env: {
+        jest: true,
+      },
+      globals: {
+        beforeAll: true,
+        beforeEach: true,
+        describe: true,
+        it: true,
+        device: true,
+      },
+    },
+  ],
 };

mobileapp/app/_layout.tsx

@@ -9,6 +9,27 @@ import {
   Outfit_500Medium,
   Outfit_700Bold,
 } from "@expo-google-fonts/outfit";
+import { ErrorBoundary } from "../src/components/ErrorBoundary";
+import { ToastManager } from "../src/components/Toast";
+import { useOfflineDetection } from "../src/hooks/useNetworkStatus";
+import "../src/locales/i18n"; // Initialize i18n
+
+function LayoutContent() {
+  useOfflineDetection();
+
+  return (
+    <View style={{ flex: 1 }}>
+      <StatusBar style="auto" />
+      <Stack
+        screenOptions={{
+          headerShown: false,
+          contentStyle: { backgroundColor: COLORS.white },
+        }}
+      />
+      <ToastManager />
+    </View>
+  );
+}
 
 export default function Layout() {
   const [fontsLoaded] = useFonts({
@@ -23,14 +44,8 @@ export default function Layout() {
   }
 
   return (
-    <View style={{ flex: 1 }}>
-      <StatusBar style="auto" />
-      <Stack
-        screenOptions={{
-          headerShown: false,
-          contentStyle: { backgroundColor: COLORS.white },
-        }}
-      />
-    </View>
+    <ErrorBoundary>
+      <LayoutContent />
+    </ErrorBoundary>
   );
 }

mobileapp/e2e/jest.config.js

@@ -1,17 +1,22 @@
 /** @type {import('@jest/types').Config.InitialOptions} */
 module.exports = {
-  preset: 'jest-expo',
-  setupFilesAfterEnv: ['<rootDir>/setup.js'],
-  testEnvironment: 'detox/runners/jest/testEnvironment',
-  testMatch: ['<rootDir>/**/*.test.js'],
+  preset: "jest-expo",
+  setupFilesAfterEnv: ["<rootDir>/setup.js"],
+  testEnvironment: "detox/runners/jest/testEnvironment",
+  testMatch: ["<rootDir>/**/*.test.js"],
   testTimeout: 120000,
   maxWorkers: 1,
-  globalSetup: 'detox/runners/jest/globalSetup',
-  globalTeardown: 'detox/runners/jest/globalTeardown',
-  reporters: ['detox/runners/jest/reporter'],
+  globalSetup: "detox/runners/jest/globalSetup",
+  globalTeardown: "detox/runners/jest/globalTeardown",
+  reporters: ["detox/runners/jest/reporter"],
   testEnvironmentOptions: {
-    eventListeners: [
-      'detox/runners/jest/listeners/allure',
-    ],
+    eventListeners: ["detox/runners/jest/listeners/allure"],
+  },
+  globals: {
+    beforeAll: true,
+    beforeEach: true,
+    describe: true,
+    it: true,
+    device: true,
   },
 };

mobileapp/e2e/setup.js

@@ -1,4 +1,4 @@
-const { device } = require('detox');
+const { device } = require("detox");
 
 beforeAll(async () => {
   await device.launchApp();

mobileapp/e2e/starter.test.js

@@ -1,4 +1,4 @@
-describe('App Boot', () => {
+describe("App Boot", () => {
   beforeAll(async () => {
     await device.launchApp();
   });
@@ -7,17 +7,17 @@ describe('App Boot', () => {
     await device.reloadReactNative();
   });
 
-  it('should show welcome screen', async () => {
+  it("should show welcome screen", async () => {
     // Modify these expectations based on your actual welcome screen testID
     // await expect(element(by.id('welcome-screen'))).toBeVisible();
   });
 
-  it('should navigate to wallet creation', async () => {
+  it("should navigate to wallet creation", async () => {
     // await element(by.id('create-wallet-button')).tap();
     // await expect(element(by.id('wallet-setup-screen'))).toBeVisible();
   });
 
-  it('should navigate to merchant dashboard', async () => {
+  it("should navigate to merchant dashboard", async () => {
     // await element(by.id('merchant-login-button')).tap();
     // await expect(element(by.id('merchant-dashboard-screen'))).toBeVisible();
   });

mobileapp/package-lock.json

@@ -18,17 +18,22 @@
     "@expo-google-fonts/outfit": "^0.4.3",
     "@expo/metro-runtime": "~6.1.2",
     "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "^2.0.0",
+    "@react-native-community/netinfo": "^11.3.1",
     "expo": "~54.0.32",
     "expo-constants": "^18.0.13",
     "expo-font": "~14.0.11",
     "expo-haptics": "^15.0.8",
     "expo-linking": "^8.0.11",
     "expo-router": "^6.0.22",
     "expo-status-bar": "~3.0.9",
+    "i18next": "^23.7.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-i18next": "^13.5.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
+    "react-native-localize": "^3.0.2",
     "react-native-qrcode-svg": "^6.3.21",
     "react-native-safe-area-context": "^5.6.2",
     "react-native-screens": "~4.16.0",