feat: 🧬 upd. CardAddress. + error message

#65
bitsongofficial · Sep 9, 2022 · f59bc6c · f59bc6c
1 parent 0afae2c
commit f59bc6c
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 72 deletions.
diff --git a/modals/wallets/components/moleculs/CardAddress.tsx b/modals/wallets/components/moleculs/CardAddress.tsx
@@ -1,69 +1,64 @@
-import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
-import { observer } from "mobx-react-lite";
-import { Card, Icon2 } from "components/atoms";
-import { useTheme } from "hooks";
-import { TextInput, TouchableOpacity } from "react-native-gesture-handler";
-import { COLOR, InputHandler } from "utils";
-import { useMemo } from "react";
-import { trimAddress } from "utils/string";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native"
+import { observer } from "mobx-react-lite"
+import { Icon2, Input } from "components/atoms"
+import { useTheme } from "hooks"
+import { TouchableOpacity } from "react-native-gesture-handler"
+import { COLOR, InputHandler } from "utils"
+import { useMemo } from "react"
+import { trimAddress } from "utils/string"
 
 type Props = {
-  input: InputHandler;
-  onPressQR(): void;
-  style?: StyleProp<ViewStyle>;
-};
+	input: InputHandler
+	onPressQR(): void
+	style?: StyleProp<ViewStyle>
+	isError?: boolean
+}
 
-export default observer<Props>(function CardWallet({
-  onPressQR,
-  input,
-  style,
-}: Props) {
-  const theme = useTheme();
-  const value = useMemo(() => {
-    const text = input.value;
-    if (input.isFocused || text.length < 25) return text;
-    return trimAddress(text);
-  }, [input.isFocused, input.value]);
+export default observer<Props>(function CardWallet({ onPressQR, input, style, isError }: Props) {
+	const theme = useTheme()
 
-  return (
-    <Card style={[styles.container, style]}>
-      <TextInput
-        style={[theme.text.primary, styles.input]}
-        placeholder="Public Address"
-        onChangeText={input.set}
-        onFocus={input.focusON}
-        onBlur={input.focusOFF}
-        placeholderTextColor={theme.input.placeholder}
-        value={value}
-      />
-      <View style={styles.buttonContainer}>
-        <TouchableOpacity onPress={onPressQR} style={styles.touchable}>
-          <Icon2 name="scan" stroke={COLOR.RoyalBlue} size={18} />
-        </TouchableOpacity>
-      </View>
-    </Card>
-  );
-});
+	const value = useMemo(() => {
+		const text = input.value
+		if (input.isFocused || text.length < 25) return text
+		return trimAddress(text)
+	}, [input.isFocused, input.value])
+
+	return (
+		<Input
+			bottomsheet
+			style={[theme.text.primary, styles.container, style]}
+			inputStyle={styles.input}
+			placeholder="Public Address"
+			onChangeText={input.set}
+			onFocus={input.focusON}
+			onBlur={input.focusOFF}
+			placeholderTextColor={theme.input.placeholder}
+			value={value}
+			errorMessage={isError && "Invalid address"}
+			errorStyle={styles.error}
+			Right={
+				<View style={styles.buttonContainer}>
+					<TouchableOpacity onPress={onPressQR} style={styles.touchable}>
+						<Icon2 name="scan" stroke={COLOR.RoyalBlue} size={18} />
+					</TouchableOpacity>
+				</View>
+			}
+		/>
+	)
+})
 
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: COLOR.Dark3,
-    height: 70,
-    justifyContent: "space-between",
-    flexDirection: "row",
-    overflow: "hidden",
-  },
-  input: {
-    paddingLeft: 26,
-    flex: 1,
-  },
-  touchable: {
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 40,
-    padding: 26,
-  },
-  buttonContainer: {
-    justifyContent: "center",
-  },
-});
+	container: {
+		backgroundColor: COLOR.Dark3,
+		borderRadius: 20,
+	},
+	input: { height: 70 },
+	error: { left: 0 },
+	touchable: {
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: 40,
+		padding: 26,
+	},
+	buttonContainer: { justifyContent: "center" },
+})
diff --git a/modals/wallets/components/templates/SelectReceiver.tsx b/modals/wallets/components/templates/SelectReceiver.tsx
@@ -66,12 +66,19 @@ export default observer(function SelectReceiver({
 
 	return (
 		<View style={style}>
-			<BottomSheetScrollView style={{ flexGrow: 1 }}>
-				<CardAddress
-					input={addressInput}
-					onPressQR={onPressScanner}
-					style={[styles.input, styles.wrapper]}
-				/>
+			<BottomSheetScrollView style={{ flexGrow: 1 }} scrollEnabled={!addressInput.isFocused}>
+				<View style={styles.wrapper}>
+					<CardAddress
+						input={addressInput}
+						onPressQR={onPressScanner}
+						style={styles.input}
+						isError={
+							addressInput.value != "" &&
+							!addressInput.isFocused &&
+							!isValidAddress(addressInput.value)
+						}
+					/>
+				</View>
 
 				<animated.View style={hidden}>
 					{contactsStore.contacts.length > 0 && (
@@ -115,7 +122,7 @@ const styles = StyleSheet.create({
 	wrapper: { marginHorizontal: HORIZONTAL_WRAPPER },
 	input: {
 		marginTop: 31,
-		marginBottom: 26,
+		marginBottom: 40,
 	},
 	hidden: { opacity: 0.1 },
 	self: { marginTop: 21 },
@@ -136,7 +143,7 @@ const styles = StyleSheet.create({
 
 	touchContact: { marginRight: 22 },
 	contacts: { marginBottom: 32 },
-	contactList: { marginTop: 24 },
+	contactList: { marginTop: 18 },
 	contactListContent: {
 		paddingHorizontal: HORIZONTAL_WRAPPER,
 		paddingBottom: 8,

diff --git a/modals/wallets/openSend.tsx b/modals/wallets/openSend.tsx
@@ -1,7 +1,7 @@
 import { SupportedCoins } from "constants/Coins"
 import { gbs } from "modals"
 import { navigate } from "navigation/utils"
-import { StyleProp, ViewStyle } from "react-native"
+import { Keyboard, StyleProp, ViewStyle } from "react-native"
 import { SendController } from "./controllers"
 import { SendModal } from "./modals"
 import { store } from "stores/Store"
@@ -38,6 +38,7 @@ export default function openSendModal(style: StyleProp<ViewStyle>) {
 	}
 
 	const close = () => {
+		Keyboard.dismiss()
 		gbs.close()
 		controller.clear()
 	}