Revert "Feat/recent activity component"

Author: pierrelstan

apps/native/app/(tabs)/_layout.tsx

@@ -6,6 +6,7 @@ export default function Layout() {
   return (
     <Tabs
       screenOptions={{
+        headerShown: false,
         tabBarShowLabel: false,
         tabBarStyle: {
           backgroundColor: "#fff",

apps/native/app/(tabs)/home.tsx

@@ -1,91 +1,38 @@
-import React, { useState, useEffect } from "react";
-import { Image, StyleSheet, Text, View } from "react-native";
-import { FlashList } from "@shopify/flash-list";
+import React from "react";
+import { StyleSheet, View } from "react-native";
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import BalanceCard from "@/components/ui/BalanceCard";
 import { WIDTH } from "../../utils/dimensions";
-import useWalletList from "wallet_state/src/hooks/wallet";
-import { Colors } from "@/constants/Colors";
-import Title from "@/components/ui/common/Title";
 
-const balanceData = [
-  { value: "1000", label: "Tokens", icon: "toll", color: "#2E7D32" },
-  {
-    value: "2",
-    label: "Wallets",
-    icon: "account-balance-wallet",
-    color: "#1A237E",
-  },
+const data = [
+  { value: "1000", label: "Tokens" },
+  { value: "2", label: "Wallets" },
 ];
 
-type ItemProps = {
-  id: string;
-  logo: string;
-  name: string;
-  status: string;
-  balance: number;
+const iconMapping = {
+  Tokens: <MaterialIcons name="toll" size={24} color="#2E7D32" />,
+  Wallets: (
+    <MaterialIcons name="account-balance-wallet" size={24} color="#1A237E" />
+  ),
 };
 
 export default function Home() {
-  const [user, setUser] = useState<{ userId: string }>({
-    userId: "default-user",
-  });
-
-  const walletList = useWalletList(user?.userId);
-
   return (
     <View style={styles.container}>
-      <View style={[styles.row, { gap: WIDTH * 0.05, marginTop: 30 }]}>
-        {balanceData.map(item => (
+      <View style={[styles.row, { gap: WIDTH * 0.05 }]}>
+        {data.map((item, index) => (
           <BalanceCard
-            key={item.label}
+            key={index}
             value={item.value}
-            icon={
-              <MaterialIcons name={item.icon} size={24} color={item.color} />
-            }
+            icon={iconMapping[item.label]}
             label={item.label}
           />
         ))}
       </View>
-
-      <View style={styles.activityContainer}>
-        <View style={styles.activityHeader}>
-          <Title title="Recent activity" />
-          <Text style={styles.activityLink}>View all</Text>
-        </View>
-      </View>
-      <FlashList
-        data={walletList?.list || []}
-        keyExtractor={item => item.id}
-        renderItem={({ item }) => <ActivityItem item={item} />}
-        estimatedItemSize={50}
-      />
     </View>
   );
 }
 
-const ActivityItem = ({ item }: { item: ItemProps }) => (
-  <View style={styles.itemContainer}>
-    <View style={styles.leftColumn}>
-      <Image source={{ uri: item.logo }} style={styles.icon} />
-      <View>
-        <Text style={styles.title}>{item.name}</Text>
-        <Text style={styles.status}>{item.status}</Text>
-      </View>
-    </View>
-    <Text
-      style={[
-        styles.value,
-        {
-          color:
-            item.status === "Received" ? Colors.green : Colors.blackOverlay,
-        },
-      ]}>
-      {item.balance}
-    </Text>
-  </View>
-);
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -97,55 +44,4 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     flexWrap: "wrap",
   },
-  activityContainer: {
-    marginTop: 30,
-    marginVertical: 8,
-    paddingTop: 24,
-  },
-  activityHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "100%",
-  },
-  activityTitle: {
-    fontSize: 20,
-    color: "black",
-    fontWeight: "bold",
-  },
-  activityLink: {
-    fontSize: 16,
-    color: Colors.green,
-    textDecorationLine: "underline",
-  },
-  itemContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: "#ddd",
-    backgroundColor: "#fff",
-  },
-  leftColumn: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-  },
-  icon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: "500",
-  },
-  status: {
-    fontSize: 14,
-    color: Colors.darkGray,
-  },
-  value: {
-    fontSize: 18,
-    fontWeight: "bold",
-  },
 });

apps/native/components/ui/common/Title.tsx

@@ -46,7 +46,7 @@
     "react-native-svg": "15.8.0",
     "react-native-svg-transformer": "^1.5.0",
     "react-native-web": "~0.19.10",
-    "core": "1.0.0"
+    "wallet_state": "1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",