Merge pull request #374 from Greenstand/feat/balance-card

feat: create balance card

apps/native/app/(auth)/login.tsx

@@ -6,17 +6,28 @@ import {
   Platform,
   ScrollView,
 } from "react-native";
+import { router } from "expo-router";
 import CustomTextInput from "@/components/ui/common/CustomTextInput";
 import CustomTitle from "@/components/ui/common/CustomTitle";
 import CustomSubmitButton from "@/components/ui/common/CustomSubmitButton";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 const LoginScreen = () => {
   const [email, setEmail] = useState("");
+  const [isAuth, setAuth] = useState(false);
   const [password, setPassword] = useState("");
   const isLoginEnabled = email.length > 0 && password.length > 0;
   console.log(isLoginEnabled);
 
-  const handleLogIn = () => {};
+  const handleLogIn = () => {
+    setAuth(true);
+    if (isAuth) {
+      router.push("/(tabs)/home");
+
+      AsyncStorage.setItem("isAuth", `${isAuth}`);
+    }
+    console.log("login....");
+  };
 
   return (
     <KeyboardAvoidingView
@@ -47,10 +58,10 @@ const LoginScreen = () => {
             title="log in"
             onPress={handleLogIn}
             disabled={isLoginEnabled}
-            style={
-              (isLoginEnabled ? styles.buttonActive : styles.buttonDisabled,
-              [{ textTransform: "uppercase" }])
-            }
+            style={[
+              isLoginEnabled ? styles.buttonActive : styles.buttonDisabled,
+              { textTransform: "uppercase" },
+            ]}
           />
         </View>
       </ScrollView>

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

@@ -1,41 +1,47 @@
 import React from "react";
-import { StyleSheet, Text } from "react-native";
+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 { ThemedView } from "@/components/ThemedView";
-import { ThemedStatusBar } from "@/components/ThemedStatusBar";
-import { ThemedSafeAreaView } from "@/components/ThemeSafeArea";
+const data = [
+  { value: "1000", label: "Tokens" },
+  { value: "2", label: "Wallets" },
+];
+
+const iconMapping = {
+  Tokens: <MaterialIcons name="toll" size={24} color="#2E7D32" />,
+  Wallets: (
+    <MaterialIcons name="account-balance-wallet" size={24} color="#1A237E" />
+  ),
+};
 
 export default function Home() {
   return (
-    <ThemedSafeAreaView style={styles.safeArea}>
-      <ThemedStatusBar />
-      <ThemedView style={[styles.container]}>
-        <Text style={[styles.commonText, styles.description]}>Home</Text>
-      </ThemedView>
-    </ThemedSafeAreaView>
+    <View style={styles.container}>
+      <View style={[styles.row, { gap: WIDTH * 0.05 }]}>
+        {data.map((item, index) => (
+          <BalanceCard
+            key={index}
+            value={item.value}
+            icon={iconMapping[item.label]}
+            label={item.label}
+          />
+        ))}
+      </View>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    backgroundColor: "#f5f5f5",
-  },
   container: {
     flex: 1,
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: 32,
+    paddingHorizontal: 20,
     backgroundColor: "#f5f5f5",
   },
-  content: {
-    marginTop: 32,
-  },
-  commonText: {
-    textAlign: "center",
-    color: "#222629DE",
-  },
-  description: {
-    fontSize: 20,
+  row: {
+    flexDirection: "row",
+    justifyContent: "center",
+    flexWrap: "wrap",
   },
 });

apps/native/app/index.tsx

@@ -9,9 +9,12 @@ export default function InitialRoute() {
   useEffect(() => {
     const verifyAppLaunchStatus = async () => {
       const hasCompletedOnboarding = await AsyncStorage.getItem("hasLaunched");
+      const isAuthenticated = await AsyncStorage.getItem("isAuth");
 
       if (hasCompletedOnboarding === null) {
         setShouldShowOnboarding(true);
+      } else if (isAuthenticated && hasCompletedOnboarding === "true") {
+        router.push("/(tabs)/home");
       } else {
         router.replace("/(auth)/login");
       }

apps/native/components/ui/BalanceCard.tsx

@@ -0,0 +1,63 @@
+import { View, Text, StyleSheet } from "react-native";
+import React from "react";
+
+import { WIDTH } from "../../utils/dimensions";
+
+interface BalanceCardProps {
+  icon: any;
+  label: string;
+  value: string;
+}
+
+export default function BalanceCard({ icon, label, value }: BalanceCardProps) {
+  return (
+    <View style={styles.card}>
+      <View style={styles.row}>
+        <View style={styles.iconContainer}>{icon}</View>
+        <Text style={styles.label}>{label}</Text>
+      </View>
+      <View style={styles.valueContainer}>
+        <Text style={styles.value}>{value}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    width: WIDTH / 2 - 30,
+    height: WIDTH / 2 - 80,
+    maxWidth: 400,
+    backgroundColor: "#fff",
+    paddingVertical: WIDTH * 0.02,
+    paddingHorizontal: WIDTH * 0.04,
+    borderRadius: 4,
+    alignSelf: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  row: {
+    flexDirection: "row",
+    gap: WIDTH * 0.02,
+    alignItems: "center",
+    justifyContent: "center",
+    margin: 10,
+  },
+  iconContainer: {
+    alignSelf: "flex-end",
+  },
+  label: {
+    fontSize: WIDTH * 0.04,
+  },
+  valueContainer: {
+    alignItems: "flex-end",
+    marginTop: 8,
+    flexDirection: "row",
+    width: "100%",
+  },
+  value: {
+    fontSize: 34,
+    textAlign: "right",
+    flex: 1,
+  },
+});

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

@@ -13,16 +13,14 @@ interface CustomSubmitButtonProps {
 const CustomSubmitButton: React.FC<CustomSubmitButtonProps> = ({
   onPress,
   title,
-  loading = false,
   disabled = false,
   style = {},
 }) => {
-  const isDisabled = disabled || loading;
-
+  const isDisabled = disabled;
   return (
     <Pressable
-      onPress={isDisabled ? undefined : onPress}
-      disabled={isDisabled}
+      onPress={!isDisabled ? null : onPress}
+      disabled={!isDisabled}
       style={[styles.button, !isDisabled && styles.buttonDisabled, style]}>
       <Text
         style={[styles.buttonText, !isDisabled && styles.buttonTextDisabled]}>

apps/native/utils/dimensions.ts

@@ -0,0 +1,5 @@
+import { Dimensions } from "react-native";
+
+const { width: WIDTH, height: HEIGHT } = Dimensions.get("screen");
+
+export { WIDTH, HEIGHT };