Merge pull request #699 from kaohenry9287/feat/692-wallet-creation-ui

pierrelstan · web-flow · commit 34f14298b2ea · 2026-02-19T13:37:51.000-05:00
feat(native)t: implement wallet creation component
diff --git a/apps/native/app/(tabs)/wallet/index.tsx b/apps/native/app/(tabs)/wallet/index.tsx
@@ -1,8 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import { StyleSheet, SafeAreaView, ScrollView } from "react-native";
 import { useRouter } from "expo-router";
 import { WalletList } from "../../../components/wallet/WalletList";
 import { CreateWallet } from "../../../components/wallet/CreateWalletButton";
+import { WalletCreateDrawer } from "../../../components/wallet/WalletCreateDrawer";
+import { Colors } from "../../../constants/Colors";
 
 const mockWallets = [
   { id: "1", name: "Wallet 2", balance: 1000, date: "May 22, 2024" },
@@ -11,9 +13,11 @@ const mockWallets = [
 
 export default function Wallet() {
   const router = useRouter();
+  const [isCreatingWallet, setIsCreatingWallet] = useState(false);
+  const [showDiscardModal, setShowDiscardModal] = useState(false);
 
   const handleWalletPress = (walletId: string) => {
-    const selectedWallet = mockWallets.find(wallet => wallet.id === walletId);
+    const selectedWallet = mockWallets.find((wallet) => wallet.id === walletId);
 
     router.push({
       pathname: "/(tabs)/wallet/[walletId]",
@@ -27,18 +31,56 @@ export default function Wallet() {
   };
 
   // Handle create wallet button press
-  const handleCreateWallet = () => {
-    console.log("Create Wallet pressed");
-    // later this can call an API to actually create a wallet
+  const handleCreateWalletToggle = () => {
+    setIsCreatingWallet(true);
+  };
+
+  const handleDrawerRequestClose = (isDirty: boolean) => {
+    console.log("handleDrawerRequestClose called, isDirty:", isDirty);
+    if (isDirty) {
+      console.log("Showing discard modal");
+      setShowDiscardModal(true);
+    } else {
+      console.log("Closing drawer directly");
+      setIsCreatingWallet(false);
+    }
+  };
+
+  const handleDiscard = () => {
+    setShowDiscardModal(false);
+    setIsCreatingWallet(false);
+  };
+
+  const handleKeep = () => {
+    setShowDiscardModal(false);
+  };
+
+  const handleFormSubmit = (data: { name: string; description: string }) => {
+    console.log("Creating wallet with:", data);
+    // TODO: Call API to create wallet
+    setIsCreatingWallet(false);
   };
 
   return (
     <SafeAreaView style={styles.safeArea}>
       <ScrollView
         style={styles.scrollView}
-        showsVerticalScrollIndicator={false}>
+        showsVerticalScrollIndicator={false}
+      >
         {/* Create Wallet Button Component */}
-        <CreateWallet onPress={handleCreateWallet} />
+        <CreateWallet
+          onPress={handleCreateWalletToggle}
+          isActive={isCreatingWallet}
+        />
+        <WalletCreateDrawer
+          visible={isCreatingWallet}
+          onRequestClose={handleDrawerRequestClose}
+          onSubmit={handleFormSubmit}
+          existingWalletNames={mockWallets.map((w) => w.name)}
+          showDiscardPrompt={showDiscardModal}
+          onDiscardConfirm={handleDiscard}
+          onDiscardCancel={handleKeep}
+        />
 
         <WalletList wallets={mockWallets} onWalletPress={handleWalletPress} />
       </ScrollView>
@@ -50,10 +92,10 @@ export default function Wallet() {
 const styles = StyleSheet.create({
   safeArea: {
     flex: 1,
-    backgroundColor: "#f5f5f5",
+    backgroundColor: Colors.lightGray,
   },
   scrollView: {
     flex: 1,
-    backgroundColor: "#f5f5f5",
+    backgroundColor: Colors.lightGray,
   },
 });
diff --git a/apps/native/components/ui/common/CustomTextInput.tsx b/apps/native/components/ui/common/CustomTextInput.tsx
@@ -19,6 +19,7 @@ interface CustomTextInputProps {
   keyboardType?: "default" | "email-address" | "numeric" | "phone-pad";
   helperText?: string;
   error?: boolean;
+  multiline?: boolean;
 }
 
 const CustomTextInput: React.FC<CustomTextInputProps> = ({
@@ -30,10 +31,13 @@ const CustomTextInput: React.FC<CustomTextInputProps> = ({
   keyboardType = "default",
   helperText,
   error = false,
+  multiline = false,
 }) => {
   const [isSecure, setIsSecure] = useState(secureTextEntry);
   const [isFocused, setIsFocused] = useState(false);
-  const labelAnim = useRef(new Animated.Value(value ? 1 : 0)).current;
+  const labelAnim = useRef(
+    new Animated.Value(value || multiline ? 1 : 0),
+  ).current;
 
   const handleFocus = () => {
     setIsFocused(true);
@@ -46,7 +50,8 @@ const CustomTextInput: React.FC<CustomTextInputProps> = ({
 
   const handleBlur = () => {
     setIsFocused(false);
-    if (!value) {
+    // multiline do not need label animation
+    if (!value && !multiline) {
       Animated.timing(labelAnim, {
         toValue: 0,
         duration: 150,
@@ -71,7 +76,8 @@ const CustomTextInput: React.FC<CustomTextInputProps> = ({
             }),
             color: error ? Colors.red : isFocused ? Colors.green : "#777",
           },
-        ]}>
+        ]}
+      >
         {label}
       </Animated.Text>
 
@@ -80,14 +86,28 @@ const CustomTextInput: React.FC<CustomTextInputProps> = ({
           styles.inputContainer,
           error && styles.inputError,
           isFocused && styles.inputFocused,
-        ]}>
+          multiline && {
+            height: "auto",
+            alignItems: "flex-start",
+            paddingBottom: 12,
+          },
+        ]}
+      >
         <TextInput
-          placeholder={isFocused ? placeholder : ""}
+          placeholder={isFocused || multiline ? placeholder : ""}
           secureTextEntry={isSecure}
           onChangeText={onChangeText}
           value={value}
           keyboardType={keyboardType}
-          style={styles.input}
+          multiline={multiline}
+          style={[
+            styles.input,
+            multiline && {
+              textAlignVertical: "bottom",
+              paddingTop: 14,
+              maxHeight: 70,
+            },
+          ]}
           placeholderTextColor={Colors.darkGray}
           onFocus={handleFocus}
           onBlur={handleBlur}
@@ -101,8 +121,9 @@ const CustomTextInput: React.FC<CustomTextInputProps> = ({
           />
         ) : value.length > 0 && secureTextEntry ? (
           <TouchableOpacity
-            onPress={() => setIsSecure(prev => !prev)}
-            style={styles.icon}>
+            onPress={() => setIsSecure((prev) => !prev)}
+            style={styles.icon}
+          >
             <MaterialCommunityIcons
               name={isSecure ? "eye-off" : "eye"}
               size={24}
@@ -112,7 +133,8 @@ const CustomTextInput: React.FC<CustomTextInputProps> = ({
         ) : value.length > 0 ? (
           <TouchableOpacity
             onPress={() => onChangeText("")}
-            style={styles.icon}>
+            style={styles.icon}
+          >
             <MaterialCommunityIcons
               name="close-circle"
               size={24}
@@ -152,6 +174,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     backgroundColor: Colors.lightGray,
     paddingHorizontal: 14,
+    paddingTop: 12,
     height: 60,
     borderBottomWidth: 2,
     borderBottomColor: "#BDBDBD",
diff --git a/apps/native/components/wallet/CreateWalletButton.tsx b/apps/native/components/wallet/CreateWalletButton.tsx
@@ -1,13 +1,18 @@
 import React from "react";
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { Colors } from "@/constants/Colors";
 
 // Component for rendering the "Create Wallet" button with info icon
 interface CreateWalletProps {
   onPress: () => void; // callback when button is pressed
+  isActive?: boolean;
 }
 
-export const CreateWallet: React.FC<CreateWalletProps> = ({ onPress }) => {
+export const CreateWallet: React.FC<CreateWalletProps> = ({
+  onPress,
+  isActive = false,
+}) => {
   // Placeholder for info icon functionality (can show tooltip or modal later)
   const handleInfoPress = () => {
     console.log("Info icon pressed"); // placeholder for now
@@ -20,10 +25,12 @@ export const CreateWallet: React.FC<CreateWalletProps> = ({ onPress }) => {
         <Ionicons
           name="add"
           size={20}
-          color="#666"
+          color={isActive ? Colors.green : "#999"}
           style={{ marginRight: 6 }}
         />
-        <Text style={styles.text}>CREATE WALLET</Text>
+        <Text style={[styles.text, isActive && styles.activeText]}>
+          CREATE WALLET
+        </Text>
       </TouchableOpacity>
 
       {/* Small info circle beside the button */}
@@ -61,6 +68,9 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     letterSpacing: 0.5,
   },
+  activeText: {
+    color: Colors.green,
+  },
   infoCircle: {
     width: 26,
     height: 26,
diff --git a/apps/native/components/wallet/DiscardChangesModal.tsx b/apps/native/components/wallet/DiscardChangesModal.tsx
@@ -0,0 +1,88 @@
+import { Colors } from "@constants/Colors";
+import React from "react";
+import {
+  Modal,
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Pressable,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+
+interface Props {
+  visible: boolean;
+  onKeep: () => void;
+  onDiscard: () => void;
+}
+
+export const DiscardChangesModal: React.FC<Props> = ({
+  visible,
+  onKeep,
+  onDiscard,
+}) => {
+  return (
+    <Modal transparent visible={visible} animationType="fade">
+      <Pressable style={styles.overlay} onPress={onKeep} />
+      <View style={styles.center}>
+        <View style={styles.card}>
+          <View style={styles.header}>
+            <Text style={styles.title}>Discard changes?</Text>
+            <TouchableOpacity onPress={onKeep}>
+              <Ionicons name="close" size={24} color={Colors.darkGray} />
+            </TouchableOpacity>
+          </View>
+          <Text style={styles.message}>
+            Are you sure you want to discard the new wallet?
+          </Text>
+
+          <View style={styles.actions}>
+            <TouchableOpacity onPress={onKeep} style={styles.keepBtn}>
+              <Text style={styles.keep}>KEEP CHANGES</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={onDiscard} style={styles.discardBtn}>
+              <Text style={styles.discard}>DISCARD</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: Colors.blackOverlay,
+  },
+  center: { flex: 1, justifyContent: "center", alignItems: "center" },
+  card: {
+    width: "85%",
+    backgroundColor: Colors.white,
+    borderRadius: 8,
+    padding: 24,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  title: { fontSize: 20, fontWeight: "600", color: Colors.light.text },
+  message: { fontSize: 16, color: Colors.darkGray, marginBottom: 28 },
+  actions: { flexDirection: "row", justifyContent: "flex-end", gap: 8 },
+  keepBtn: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  keep: { color: Colors.charcoal, fontWeight: "600" },
+  discardBtn: {
+    borderWidth: 1,
+    borderColor: Colors.red,
+    borderRadius: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  discard: { color: Colors.red, fontWeight: "600" },
+});
diff --git a/apps/native/components/wallet/WalletCreateDrawer.tsx b/apps/native/components/wallet/WalletCreateDrawer.tsx
