Major feature release: Contacts, Price, SPV wiring, 9 phases complete

Phase 1 - Contacts / Address Book:
- Contacts table in SQLite with full CRUD
- Contacts screen (search, add, edit, delete with emoji avatars)
- ContactPicker modal integrated in send screen
- Recent recipients tracking + quick-select in send screen
- Save-to-contacts prompt after sending

Phase 2 - Price Display:
- Price service polling explorer.fairco.in/api/price every 60s
- USD equivalent shown on home screen and send screen
- 24h price change indicator (green/red)

Phase 3 - SPV Client Wiring:
- SocketProvider implementations (native TCP, Electron IPC, fallback)
- HeaderStore adapter (SQLite <-> SPV client)
- SPV client started on wallet initialization (peer discovery, header sync)
- Bloom filter loaded with wallet addresses
- Real sendTransaction: buildTransaction -> signInput -> serialize -> broadcast
- Explorer API fallback when SPV unavailable

Phase 4 - Transaction Details:
- Full tx detail screen with type badge, amount, timestamp, confirmations
- Editable transaction notes (persisted to SQLite)
- Copy txid, view on explorer, add to contacts
- TransactionItem is now tappable (navigates to detail)

Phase 5 - Explorer APIs (separate repo):
- Price API with admin-set prices and history (GET/POST /api/price)
- Address balance/UTXOs/txs via RPC (GET /api/address/:addr)
- Transaction broadcast (POST /api/tx/broadcast)
- Fee estimation (GET /api/fee-estimate)

Phase 6 - UX Polish:
- Auto-lock timer (configurable 1-30 min, tracks AppState)
- Share payment request via system share sheet
- Currency selector (USD/EUR/BTC) in settings
- Address labels and transaction notes tables

Phase 7 - Security:
- BIP38 encrypted key export UI (PIN-protected)
- Wallet metadata backup export/import (JSON, no private keys)

Phase 8 - Advanced:
- Network switching (mainnet <-> testnet) with SPV restart
- Watch-only wallets (import xpub, view-only)
- Coin control (select specific UTXOs for transactions)

Phase 9 - i18n:
- English + Spanish translations (~60 keys)
- Device locale auto-detection
- Applied to web tabs, home screen, receive screen

Author: NateIsern

app/(tabs)/_layout.tsx

@@ -2,6 +2,12 @@
  * Tab layout for Android and iOS using native system tab bar.
  * Uses NativeTabs from expo-router for platform-native look and feel.
  * Material symbols (md) for Android, SF Symbols (sf) for iOS.
+ *
+ * Note: NativeTabs labels are static strings set at render time.
+ * For full i18n support, these would need to use translated values
+ * from the i18n system. The web tab layout (_layout.web.tsx) already
+ * uses t() for translated labels. NativeTabs i18n requires passing
+ * the translated strings directly to <NativeTabs.Trigger.Label>.
  */
 
 import { ThemeProvider, DarkTheme } from "@react-navigation/native";

app/(tabs)/_layout.web.tsx

@@ -2,11 +2,13 @@
  * Tab layout for Web (Electron desktop).
  * Uses headless tabs from expo-router/ui with custom styling.
  * NativeTabs is not available on web, so we use the JS-based approach.
+ * Tab labels use the i18n system for translation.
  */
 
 import { Tabs, TabList, TabTrigger, TabSlot } from "expo-router/ui";
 import { View, Text, StyleSheet } from "react-native";
 import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import { t } from "../../src/i18n";
 
 interface WebTabProps {
   name: string;
@@ -32,10 +34,10 @@ export default function TabLayout() {
           <TabSlot />
         </View>
         <TabList style={styles.tabList}>
-          <WebTab name="index" href="/(tabs)" icon="wallet" label="Wallet" />
-          <WebTab name="send" href="/(tabs)/send" icon="arrow-up-bold" label="Send" />
-          <WebTab name="receive" href="/(tabs)/receive" icon="arrow-down-bold" label="Receive" />
-          <WebTab name="settings" href="/(tabs)/settings" icon="cog" label="Settings" />
+          <WebTab name="index" href="/(tabs)" icon="wallet" label={t("wallet.title")} />
+          <WebTab name="send" href="/(tabs)/send" icon="arrow-up-bold" label={t("wallet.send")} />
+          <WebTab name="receive" href="/(tabs)/receive" icon="arrow-down-bold" label={t("wallet.receive")} />
+          <WebTab name="settings" href="/(tabs)/settings" icon="cog" label={t("wallet.settings")} />
         </TabList>
       </Tabs>
     </View>

app/(tabs)/index.tsx

@@ -3,12 +3,20 @@
  * Displays balance, sync status, and recent transactions.
  */
 
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { View, Text, ScrollView, RefreshControl } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { useFocusEffect } from "expo-router";
 import { useWalletStore } from "../../src/wallet/wallet-store";
 import { SyncStatus } from "../../src/ui/components/SyncStatus";
 import { TransactionItem } from "../../src/ui/components/TransactionItem";
+import {
+  startPricePolling,
+  stopPricePolling,
+  getCachedPrice,
+  type PriceData,
+} from "../../src/services/price";
+import { t } from "../../src/i18n";
 
 /** Format satoshis (bigint) to FAIR display string */
 function formatBalance(sats: bigint): string {
@@ -18,6 +26,26 @@ function formatBalance(sats: bigint): string {
   return `${whole.toString()}.${fracStr}`;
 }
 
+/** Format a FAIR amount (from bigint sats) to a fiat value string */
+function formatFiat(sats: bigint, rate: number): string {
+  const fair = Number(sats) / 100_000_000;
+  return (fair * rate).toFixed(2);
+}
+
+/** Format 24h change percentage with sign and color class */
+function formatChange(change: number | null): {
+  text: string;
+  colorClass: string;
+} {
+  if (change === null) {
+    return { text: "", colorClass: "text-fair-muted" };
+  }
+  const sign = change >= 0 ? "+" : "";
+  const text = `${sign}${change.toFixed(1)}%`;
+  const colorClass = change >= 0 ? "text-green-400" : "text-red-400";
+  return { text, colorClass };
+}
+
 export default function HomeScreen() {
   const balance = useWalletStore((s) => s.balance);
   const isSyncing = useWalletStore((s) => s.isSyncing);
@@ -29,14 +57,31 @@ export default function HomeScreen() {
   const refreshBalance = useWalletStore((s) => s.refreshBalance);
   const loading = useWalletStore((s) => s.loading);
 
+  const [price, setPrice] = useState<PriceData | null>(getCachedPrice);
+
   const displayBalance = formatBalance(balance);
 
+  // Start/stop price polling when tab is focused
+  useFocusEffect(
+    useCallback(() => {
+      startPricePolling((updated) => {
+        setPrice(updated);
+      });
+      return () => {
+        stopPricePolling();
+      };
+    }, []),
+  );
+
   const handleRefresh = useCallback(() => {
     refreshBalance();
   }, [refreshBalance]);
 
   const recentTransactions = transactions.slice(0, 5);
 
+  const usdValue = price ? formatFiat(balance, price.usd) : null;
+  const change = price ? formatChange(price.change24h) : null;
+
   return (
     <SafeAreaView className="flex-1 bg-fair-dark" edges={["top", "left", "right"]}>
       <ScrollView
@@ -63,11 +108,25 @@ export default function HomeScreen() {
 
         {/* Balance */}
         <View className="items-center px-6 pt-8 pb-6">
-          <Text className="text-fair-muted text-sm mb-2">Total Balance</Text>
+          <Text className="text-fair-muted text-sm mb-2">{t("wallet.balance")}</Text>
           <Text className="text-white text-4xl font-bold tracking-tight">
             {displayBalance}
           </Text>
           <Text className="text-fair-green text-lg mt-1">FAIR</Text>
+
+          {/* USD equivalent and 24h change */}
+          {usdValue !== null ? (
+            <View className="flex-row items-center mt-2 gap-2">
+              <Text className="text-fair-muted text-sm">
+                {"\u2248"} ${usdValue} USD
+              </Text>
+              {change?.text ? (
+                <Text className={`text-sm font-medium ${change.colorClass}`}>
+                  {change.text}
+                </Text>
+              ) : null}
+            </View>
+          ) : null}
         </View>
 
         {/* Sync status */}
@@ -100,6 +159,7 @@ export default function HomeScreen() {
               {recentTransactions.map((tx) => (
                 <TransactionItem
                   key={tx.txid}
+                  txid={tx.txid}
                   type={tx.type}
                   amount={formatBalance(tx.amount < 0n ? -tx.amount : tx.amount)}
                   address={tx.address}

app/(tabs)/receive.tsx

@@ -13,12 +13,14 @@ import {
   ActivityIndicator,
   ScrollView,
   FlatList,
+  Share,
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import * as Clipboard from "expo-clipboard";
 import QRCode from "react-native-qrcode-svg";
 import { useWalletStore } from "../../src/wallet/wallet-store";
 import { Button } from "../../src/ui/components/Button";
+import { t } from "../../src/i18n";
 
 function truncateAddress(address: string): string {
   if (address.length <= 16) return address;
@@ -43,6 +45,14 @@ export default function ReceiveScreen() {
     setSelectedAddress(addr);
   }, [getNewAddress]);
 
+  const handleShare = useCallback(async () => {
+    const uri = `faircoin:${displayAddress}`;
+    await Share.share({
+      message: `Pay me with FairCoin:\n${uri}`,
+      title: "FairCoin Payment Request",
+    });
+  }, [displayAddress]);
+
   const handleSelectAddress = useCallback(
     (address: string) => {
       setSelectedAddress(address);
@@ -76,7 +86,7 @@ export default function ReceiveScreen() {
       >
         {/* Title */}
         <Text className="text-white text-xl font-bold mb-1 text-center">
-          Receive FAIR
+          {t("receive.title")}
         </Text>
         <Text className="text-fair-muted text-sm mb-6 text-center">
           Share this address to receive FairCoin
@@ -110,12 +120,17 @@ export default function ReceiveScreen() {
         {/* Actions */}
         <View className="w-full gap-3 mb-8">
           <Button
-            title="Copy Address"
+            title={t("receive.copy")}
             onPress={handleCopy}
             variant="primary"
           />
           <Button
-            title="New Address"
+            title={t("receive.share")}
+            onPress={handleShare}
+            variant="outline"
+          />
+          <Button
+            title={t("receive.new_address")}
             onPress={handleNewAddress}
             variant="outline"
           />