Merge branch 'main' of https://github.com/functionland/fx-components

Author: ehsan6sha

apps/box/package.json

@@ -81,7 +81,10 @@
     "react-native-permissions": "*",
     "base-64": "*",
     "react-native-syntax-highlighter": "*",
-    "react-syntax-highlighter": "*"
+    "react-syntax-highlighter": "*",
+    "i18next": "*",
+    "react-i18next": "*",
+    "i18next-resources-to-backend": "*"
   },
   "devDependencies": {
     "@types/react-native-background-timer": "^2.0.2"

apps/box/src/app/App.tsx

@@ -5,6 +5,7 @@ import {
   SDKConfigProvider,
   useSDKConfig,
 } from '@metamask/sdk-react';
+import '../i18n';
 
 import { ThemeProvider } from '@shopify/restyle';
 import {

apps/box/src/components/LanguageSelector.tsx

@@ -0,0 +1,105 @@
+// components/LanguageSelector.tsx
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { FxBox, FxText, useFxTheme } from '@functionland/component-library';
+import { useTranslation } from 'react-i18next';
+
+interface Language {
+  code: string;
+  label: string;
+}
+
+interface LanguageSelectorProps {
+  style?: ViewStyle | Array<ViewStyle | { [key: string]: string | number }>;
+}
+
+const LANGUAGES: Language[] = [
+  { code: 'en', label: 'EN' },
+  { code: 'zh', label: '中' }
+];
+
+const LanguageSelector: React.FC<LanguageSelectorProps> = ({ style }) => {
+  const { i18n } = useTranslation();
+  const { colors } = useFxTheme();
+  const [showDropdown, setShowDropdown] = useState(false);
+  
+  const toggleDropdown = () => {
+    setShowDropdown(!showDropdown);
+  };
+  
+  const selectLanguage = (langCode: string) => {
+    i18n.changeLanguage(langCode);
+    setShowDropdown(false);
+  };
+  
+  // Find current language display label
+  const currentLang = LANGUAGES.find(lang => lang.code === i18n.language) || LANGUAGES[0];
+  
+  return (
+    <View style={[styles.container, style]}>
+      <TouchableOpacity 
+        onPress={toggleDropdown}
+        style={[styles.selector]}
+      >
+        <FxText variant="bodySmallSemibold">{currentLang.label}</FxText>
+      </TouchableOpacity>
+      
+      {showDropdown && (
+        <FxBox style={[styles.dropdown, { backgroundColor: colors.backgroundSecondary }]}>
+          {LANGUAGES.map(lang => (
+            <TouchableOpacity
+              key={lang.code}
+              style={[styles.languageOption]}
+              onPress={() => selectLanguage(lang.code)}
+            >
+              <FxText 
+                variant="bodySmallRegular"
+                color={lang.code === i18n.language ? 'primary' : 'content1'}
+              >
+                {lang.label}
+              </FxText>
+            </TouchableOpacity>
+          ))}
+        </FxBox>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    zIndex: 10,
+  },
+  selector: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 38,
+  },
+  selectorButton: {
+    padding: 8,
+    borderRadius: 8,
+    width: '100%',
+    alignItems: 'center',
+  },
+  dropdown: {
+    position: 'absolute',
+    top: 40,
+    right: 0,
+    borderRadius: 8,
+    padding: 8,
+    marginTop:8,
+    minWidth: 60,
+    width: '100%',
+  },
+  languageOption: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+  }
+});
+
+export default LanguageSelector;

apps/box/src/i18n/index.ts

@@ -0,0 +1,86 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { getLocales } from 'react-native-localize';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// Import translations directly
+import enTranslation from './locales/en/translation.json';
+import zhTranslation from './locales/zh/translation.json';
+
+// Default language
+const FALLBACK_LANGUAGE = 'en';
+
+// Resources object with all translations
+const resources = {
+  en: {
+    translation: enTranslation
+  },
+  zh: {
+    translation: zhTranslation
+  }
+};
+
+// Detect the device language
+const getDeviceLanguage = () => {
+  try {
+    const locales = getLocales();
+    return locales[0]?.languageCode || FALLBACK_LANGUAGE;
+  } catch (error) {
+    console.error('Error getting device language:', error);
+    return FALLBACK_LANGUAGE;
+  }
+};
+
+// Initialize i18next with a basic configuration first
+i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: FALLBACK_LANGUAGE, // Start with fallback, will be updated after storage check
+    fallbackLng: FALLBACK_LANGUAGE,
+    supportedLngs: ['en', 'zh'],
+    interpolation: {
+      escapeValue: false,
+    },
+    react: {
+      useSuspense: false,
+    },
+  });
+
+// Create a language change function that also updates storage
+export const changeLanguage = async (language: string) => {
+  try {
+    await AsyncStorage.setItem('userLanguage', language);
+    await i18n.changeLanguage(language);
+    console.log(`Language changed and saved to storage: ${language}`);
+    return true;
+  } catch (error) {
+    console.error('Failed to set language:', error);
+    return false;
+  }
+};
+
+// Immediately invoked async function to load the stored language
+(async () => {
+  try {
+    // First check storage
+    const storedLanguage = await AsyncStorage.getItem('userLanguage');
+    
+    if (storedLanguage && ['en', 'zh'].includes(storedLanguage)) {
+      console.log(`Loaded language from storage: ${storedLanguage}`);
+      await i18n.changeLanguage(storedLanguage);
+    } else {
+      // If no stored language, use device language and save it
+      const deviceLang = getDeviceLanguage();
+      console.log(`No stored language, using device language: ${deviceLang}`);
+      await AsyncStorage.setItem('userLanguage', deviceLang);
+      await i18n.changeLanguage(deviceLang);
+    }
+  } catch (error) {
+    console.error('Error loading language:', error);
+    // Fall back to device language on error
+    i18n.changeLanguage(getDeviceLanguage());
+  }
+})();
+
+export default i18n;

apps/box/src/i18n/locales/en/translation.json

@@ -0,0 +1,138 @@
+{
+    "welcome": {
+      "title": "Hello Functionlander!",
+      "appTitle": "Blox App",
+      "disclaimer": "By using this product you agree to the terms and conditions at fx.land/terms, and would not hold Functionland liable for data loss.",
+      "termsButton": "Terms & Conditions",
+      "setupButton": "Agree & Setup my Blox"
+    },
+    "connectToWallet": {
+      "title": "Connect To Wallet",
+      "description": "App needs notification permission to connect your wallet and perform data sync. Tap allow in the next prompt.",
+      "allowButton": "Allow Notifications"
+    },
+    "linkPassword": {
+      "title": "Set Identity",
+      "yourIdentity": "Your Identity",
+      "password": "Password",
+      "signature": "Signature",
+      "warning": "Make sure to safeguard this password and the chain you used, it's the key to decrypt your data from new devices",
+      "passwordRisk": "I understand the risk of losing my password",
+      "metamaskOpen": "I already opened Metamask app before clicking Sign",
+      "connectingWallet": "Connecting Wallet...",
+      "walletConnectionInProgress": "Wallet connection in progress, click to move back to the app",
+      "error": "Error",
+      "unableToSignWallet": "Unable to sign the wallet address!",
+      "signWithMetamask": "Sign with MetaMask",
+      "cancel": "Cancel",
+      "signManually": "Sign Manually",
+      "submit": "Submit",
+      "connectToBlox": "Connect to Blox",
+      "reconnectExisting": "Reconnect to existing blox",
+      "bluetoothCommands": "Bluetooth commands",
+      "skipManualSetup": "Skip to manual setup"
+    },
+    "connectToBlox": {
+      "title": "Connect to Blox",
+      "checking": "Checking connection...",
+      "connected": "Connected",
+      "failed": "Unable to connect to Hotspot",
+      "notConnected": "Not Connected",
+      "bleConnecting": "Searching for Blox device...",
+      "bleConnected": "Connected to Blox via Bluetooth",
+      "bleFailed": "Unable to connect via Bluetooth, trying WiFi...",
+      "hotspotInstructions": "- Please turn your Blox on and connect your phone to the Blox's hotspot manually, and turn off mobile data.",
+      "formatInstructions": "- Make sure you have internal or external storage attached and format is either 'ext4' or 'vFat'.",
+      "waitForBlueLight": "After first boot please wait for 10 minutes until Blox flashes 'light-blue'",
+      "connectedMessage": "Now you are connected to Blox. Please wait...",
+      "back": "Back",
+      "continue": "Continue"
+    },
+    "connectToWifi": {
+      "title": "Connect to Wi-Fi",
+      "manualEntry": "Manually Enter Wifi Name",
+      "showNetworks": "Show Network Names",
+      "enterWifiName": "Enter Wifi Name",
+      "enterPasswordFor": "Enter Password for",
+      "searching": "Searching Wi-Fi Network",
+      "selectNetwork": "Select Wi-Fi Network",
+      "back": "Back",
+      "next": "Next"
+    },
+    "setBloxAuthorizer": {
+      "title": "Set Blox Owner",
+      "description": "Adding the Blox App Peer ID as an owner on the Blox",
+      "networkError": "In some cases you need to turn the mobile data off, please make sure the phone is connected to the Blox's Hotspot and mobile data/VPN is off, Then press back and try again please",
+      "updateNeeded": "An update is awaiting a manual restart to be applied. You should unplug and plug back your blox to restart it and then try again.",
+      "backendUpdate": "You should update your blox backend, Please press 'Skip' button and connect it to your Wifi network.",
+      "storageNeeded": "To proceed successfully you need to attach an external storage to the Blox!",
+      "appPeerId": "The Blox App Peer ID",
+      "generating": "Generating the app peerId...",
+      "bloxPeerId": "Your Blox Peer ID",
+      "enterBloxPeerId": "Enter Your Blox Peer ID",
+      "setBloxName": "Set Blox name",
+      "hardDisk": "Hard Disk",
+      "bloxSetUp": "Blox Set Up",
+      "formatDisk": "Format Disk",
+      "skip": "Skip",
+      "skipAuthorization": "Skip Authorization",
+      "skipDescription": "The Skip is only intended when you are instructed to do so by the support team. Please enter the code given to you:",
+      "cancel": "Cancel",
+      "invalidCode": "Invalid Code",
+      "invalidCodeMessage": "The code you entered is incorrect. Please contact support if you need assistance.",
+      "confirm": "Confirm",
+      "back": "Back",
+      "setAuthorizer": "Set Authorizer",
+      "next": "Next",
+      "bloxUnitPrefix": "Blox Unit",
+      "noBleDevicesConnected": "No BLE devices connected",
+      "unableToGetProperties": "Unable to get the blox properties!",
+      "bloxPeerIdInvalid": "Blox peerId is invalid!"
+    },
+    "setupComplete": {
+      "completing": "Completing setup",
+      "connectPhone": "Connect your phone to internet (wifi) to proceed now...",
+      "reachingBlox": "Reaching Blox #{{number}}...",
+      "greenLed": "Is you blox LED 'green' but you see this message?",
+      "internetReminder": "Make sure your phone is connected to the internet and then try again",
+      "lightBlueLed": "Is you blox flashing 'light-blue'? You probably entered wrong wifi password",
+      "notReachable": "Your Blox is not reachable, seems it is not connected to the internet! Please turn your blox off and then turn it on and make sure it is on Hotspot mode, then try to reconnect the blox to the Wi-Fi",
+      "updating": "Your blox is updating. Please wait for an hour for the update to complete.",
+      "disconnectHotspot": "Meanwhile, feel free to disconnect your phone from FxBlox hotspot.",
+      "homeScreen": "Home Screen",
+      "congratulations": "Congratulations",
+      "setupComplete": "Setup Complete",
+      "home": "Home",
+      "checkInternet": "Check internet connectivity",
+      "wrongPassword": "Entered Wrong Password? Go Back",
+      "checkConnection": "Check Connection Again",
+      "cyanFlashing": "If Blox is flashing 'Cyan', it probably means you have entered the wrong password for your wifi. Connect to 'FxBlox' Wifi again and retry.",
+      "back": "Back",
+      "reconnectWifi": "Reconnect Blox to Wi-Fi",
+      "notConnectedToHotspot": "It seems you are no longer connected to Hotspot, check if FxBlox hotspot is still available, if not, blox is already connected to internet and you can go to Home",
+      "unableToInitialize": "Unable to initialize the fula network! error: {{error}} for fulaIsReady={{fulaIsReady}}"
+    },
+    "connectToExistingBlox": {
+        "title": "Bloxs in your network",
+        "selectBloxs": "Select bloxs you want to add",
+        "bloxUnitPrefix": "Blox unit",
+        "ip": "IP",
+        "peerId": "PEER ID",
+        "hardwareId": "HARDWARE ID",
+        "authorized": "Authorized",
+        "notAuthorized": "Not Authorized",
+        "checking": "Checking...",
+        "alreadyExist": "Already exist",
+        "addSelectedBloxs": "Add selected blox(s)",
+        "generateAppPeerIdError": "ConnectToExistingBloxScreen:generateAppPeerId: "
+    },
+    "checkConnection": {
+      "verifyingConnectionWith": "Verifying connection with {{ssid}}",
+      "successfullyConnected": "Successfully connected to {{ssid}}.",
+      "verifyingConnection": "Verifying connection...",
+      "couldntConnect": "Couldn't connect with {{ssid}}.",
+      "couldntConnectTryAgain": "Couldn't connect with {{ssid}}. Please try again.",
+      "connectingWith": "Connecting with {{ssid}}...",
+      "allDone": "All done\nYour device is connected with success!"
+    }
+  }