feature:[FE-001] Implement Social Feed screen tab UI

Readme.md

@@ -24,6 +24,34 @@ Zaps is a high-speed, interactive social payments platform built on the Stellar
 
 ## 🛠️ Getting Started
 
+### 📱 Mobile App (Expo)
+```bash
+cd mobileapp# Zaps: Social Payments on Stellar ⚡
+
+Zaps is a high-speed, interactive social payments platform built on the Stellar blockchain with Soroban smart contracts. It transforms standard financial transactions into peer-to-peer social interactions—allowing users to pay friends, add comments, toggle likes, and share payments publicly or privately, similar to Venmo and Cash App.
+
+---
+
+## 🚀 Key Features
+
+1. **Social Payments Feed**: Share peer-to-peer payments (e.g. *"John paid ₦5,000 to Doe for Lunch"*) with interactive liking and commenting.
+2. **Fiat Settlement via Stellar Anchors**: Seamlessly deposit and withdraw fiat currencies (including Naira ₦) with automated conversion and settlement handled directly through regulated Stellar Anchors (SEP-24 / SEP-38).
+3. **Cross-Chain Bridge Funding**: Fund your Stellar wallet from other major blockchains (Ethereum, Solana, BNB Chain, Polygon) using our Allbridge Core integration.
+4. **Soroban Smart Contracts**: High-speed, secure, and gas-efficient execution of payments and social graphs on-chain.
+
+---
+
+## 📁 Repository Architecture
+
+- **`mobileapp/`**: React Native (Expo) app for social payment interactions, profile management, and Allbridge cross-chain funding.
+- **`backend/`**: Axum Rust server. Manages off-chain social logs (likes, comments, friends lists) and indices Stellar ledger events.
+- **`contracts/`**: Soroban smart contracts workspace handling user registries, social payments, and graph relationships.
+- **`dashboard/`**: Next.js web application for monitoring social statistics, Naira transaction volume, and bridging queues.
+
+---
+
+## 🛠️ Getting Started
+
 ### 📱 Mobile App (Expo)
 ```bash
 cd mobileapp
@@ -47,5 +75,28 @@ cargo test
 ---
 
 
+### 5. DevOps & Infrastructure (`/issues/devops/`)
+- `[DO-001]` to `[DO-005]`: Docker configurations, compilation pipelines, deployment templates, and OpenAPI endpoints documentation.
+
+npm install
+npm start
+```
+
+### 🦀 Backend API (Rust)
+```bash
+cd backend
+cargo run
+```
+
+### ⛓️ Smart Contracts (Soroban)
+```bash
+cd contracts
+cargo build --target wasm32-unknown-unknown --release
+cargo test
+```
+
+---
+
+
 ### 5. DevOps & Infrastructure (`/issues/devops/`)
 - `[DO-001]` to `[DO-005]`: Docker configurations, compilation pipelines, deployment templates, and OpenAPI endpoints documentation.

mobileapp/app/(personal)/home.tsx

@@ -12,6 +12,7 @@
   Switch,
   ViewStyle,
   StyleProp,
+  LayoutChangeEvent,
 } from "react-native";
 import Svg, {
   Defs,
@@ -51,6 +52,13 @@
   explanation: string;
 }
 
+interface Comment {
+  id: string;
+  user: string;
+  text: string;
+  time: string;
+}
+
 interface MonthlyEarningPoint {
   month: string;
   amount: number;
@@ -115,9 +123,9 @@
   const [activeTab, setActiveTab] = useState<"public" | "friends">("public");
   const [feed, setFeed] = useState<FeedItem[]>(INITIAL_FEED);
   const [availableBalance] = useState("₦32,450.00");
   const [currentApy] = useState("8.75%");
   const [totalYieldEarned] = useState("₦3,280.45");
   const [balance] = useState("₦32,450.00");
   const [yieldData, setYieldData] = useState<YieldSnapshot | null>(null);
   const [yieldStatus, setYieldStatus] = useState<"loading" | "success" | "error">(
     "loading"
@@ -149,9 +157,7 @@
   const [commentsModalVisible, setCommentsModalVisible] = useState(false);
   const [selectedItem, setSelectedItem] = useState<FeedItem | null>(null);
   const [commentText, setCommentText] = useState("");
-  const [commentsList, setCommentsList] = useState<
-    { id: string; user: string; text: string; time: string }[]
-  >([]);
+  const [commentsList, setCommentsList] = useState<Comment[]>([]);
 
   const FEED_CACHE_KEY = "feed_items_cache";
   const YIELD_REQUEST_TIMEOUT_MS = 4500;
@@ -376,7 +382,7 @@
         duration: 200,
         useNativeDriver: true,
       }),
-    ]).start(({ finished }) => {
+    ]).start(({ finished }: { finished: boolean }) => {
       if (finished) {
         setEarningsModalVisible(false);
       }
@@ -624,14 +630,16 @@
 
         {/* Social Feed Section */}
         <View style={styles.feedContainer}>
-          {/* Feed Header tabs */}
+          <Text style={styles.feedSectionTitle}>Activity</Text>
+          {/* Feed Tabs — Segment Control */}
           <View style={styles.tabBar}>
             <TouchableOpacity
               style={[
                 styles.tabItem,
                 activeTab === "public" && styles.tabItemActive,
               ]}
               onPress={() => setActiveTab("public")}
+              activeOpacity={0.85}
             >
               <Text
                 style={[
@@ -648,6 +656,7 @@
                 activeTab === "friends" && styles.tabItemActive,
               ]}
               onPress={() => setActiveTab("friends")}
+              activeOpacity={0.85}
             >
               <Text
                 style={[
@@ -830,7 +839,7 @@
 
                 <View
                   style={styles.earningsChartSection}
-                  onLayout={(event) =>
+                  onLayout={(event: LayoutChangeEvent) =>
                     setChartWidth(event.nativeEvent.layout.width - 24)
                   }
                 >
@@ -968,11 +977,11 @@
               </TouchableOpacity>
             </View>
 
-            <FlatList
+            <FlatList<Comment>
               data={commentsList}
-              keyExtractor={(item) => item.id}
+              keyExtractor={(item: Comment) => item.id}
               contentContainerStyle={{ paddingVertical: 12 }}
-              renderItem={({ item }) => (
+              renderItem={({ item }: { item: Comment }) => (
                 <View style={styles.commentItem}>
                   <View style={styles.commentAvatar}>
                     <Text style={styles.avatarText}>{item.user[0]}</Text>
@@ -1160,7 +1169,13 @@
     fontFamily: "Outfit_600SemiBold",
   },
   feedContainer: {
-    marginTop: 12,
+    marginTop: 16,
+  },
+  feedSectionTitle: {
+    fontSize: 18,
+    fontFamily: "Outfit_700Bold",
+    color: "#111827",
+    marginBottom: 14,
   },
   earningBalanceCard: {
     backgroundColor: "#0F3D2E",
@@ -1469,26 +1484,32 @@
   },
   tabBar: {
     flexDirection: "row",
-    borderBottomWidth: 1,
-    borderBottomColor: "#F0F0F0",
-    marginBottom: 16,
+    backgroundColor: "#EDEDED",
+    borderRadius: 14,
+    padding: 4,
+    marginBottom: 20,
   },
   tabItem: {
     flex: 1,
-    paddingVertical: 12,
+    paddingVertical: 10,
     alignItems: "center",
+    borderRadius: 10,
   },
   tabItemActive: {
-    borderBottomWidth: 2,
-    borderBottomColor: COLORS.primary,
+    backgroundColor: "#0F3D2E",
+    shadowColor: "#0F3D2E",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.18,
+    shadowRadius: 4,
+    elevation: 2,
   },
   tabLabel: {
-    fontSize: 15,
-    fontFamily: "Outfit_500Medium",
-    color: "#888",
+    fontSize: 14,
+    fontFamily: "Outfit_600SemiBold",
+    color: "#7A8A7A",
   },
   tabLabelActive: {
-    color: COLORS.primary,
+    color: "#FFFFFF",
     fontFamily: "Outfit_700Bold",
   },
   feedCard: {