feat(modals): 💄 SendCoin used rn-sm

#99

modals/wallets/components/atoms/Header.tsx

@@ -1,6 +1,7 @@
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native"
 import { observer } from "mobx-react-lite"
 import { useTheme } from "hooks"
+import { vs } from "react-native-size-matters"
 
 type Props = {
 	title: string
@@ -32,17 +33,17 @@ const styles = StyleSheet.create({
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 21,
+		fontSize: vs(21),
 		// lineHeight: 27,
 	},
 	caption: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "400",
-		fontSize: 16,
+		fontSize: vs(16),
 		// lineHeight: 18,
 
-		marginTop: 8,
+		marginTop: vs(8),
 	},
 	left: {},
 	right: {},

modals/wallets/components/moleculs/CardSelectCoin.tsx

@@ -4,6 +4,7 @@ import { Coin } from "classes"
 import { useTheme } from "hooks"
 import { COLOR, hexAlpha } from "utils"
 import { Card, Icon2 } from "components/atoms"
+import { mvs, s, vs } from "react-native-size-matters"
 
 type Props = {
 	coin?: Coin | null
@@ -37,9 +38,9 @@ export default observer<Props>(function CardWallet({ coin, style }) {
 const styles = StyleSheet.create({
 	card: {
 		backgroundColor: COLOR.Dark3,
-		height: 70,
+		height: vs(70),
 		alignItems: "center",
-		padding: 23,
+		padding: vs(23),
 		flexDirection: "row",
 		justifyContent: "space-between",
 	},
@@ -49,22 +50,22 @@ const styles = StyleSheet.create({
 		alignItems: "center",
 		justifyContent: "space-between",
 
-		marginRight: 16,
+		marginRight: s(16),
 	},
 	image: {
-		width: 27,
-		height: 27,
-		marginLeft: 16,
+		width: s(27),
+		height: s(27),
+		marginLeft: s(16),
 		tintColor: hexAlpha(COLOR.White, 20),
 	},
 	title: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 15,
-		lineHeight: 19,
+		fontSize: vs(15),
+		lineHeight: vs(19),
 
-		marginRight: 17,
+		marginRight: vs(17),
 	},
 	balance: {
 		color: COLOR.RoyalBlue,

modals/wallets/components/templates/InsertImport.tsx

@@ -3,12 +3,14 @@ import { TouchableOpacity } from "react-native-gesture-handler"
 import { observer } from "mobx-react-lite"
 import { COLOR } from "utils"
 import { useStore, useTheme } from "hooks"
-import { Button, Icon2 } from "components/atoms"
+import { Button, FOOTER_HEIGHT, Icon2 } from "components/atoms"
 import { Numpad } from "components/moleculs"
 import { SendController } from "../../controllers"
 import { CardSelectCoin } from "../moleculs"
 import { TransactionCreater } from "classes/Transaction"
 import { StyleProp } from "react-native"
+import { mvs, vs } from "react-native-size-matters"
+import { BottomSheetView } from "@gorhom/bottom-sheet"
 
 type Props = {
 	controller: SendController
@@ -23,7 +25,7 @@ export default observer<Props>(function InsertImport({ controller, onPressSelect
 	const fiatSymbol = settings.currency?.symbol
 
 	return (
-		<View style={style}>
+		<BottomSheetView style={[styles.container, style]}>
 			<View style={styles.row}>
 				<Text style={[styles.usd, theme.text.primary]}>
 					{controller.readableInput}{" "}
@@ -57,51 +59,51 @@ export default observer<Props>(function InsertImport({ controller, onPressSelect
 				onPressRemove={controller.removeNumber}
 				style={styles.numpad}
 			/>
-		</View>
+		</BottomSheetView>
 	)
 })
 
 const styles = StyleSheet.create({
+	container: {},
 	row: {
 		flexDirection: "row",
 		justifyContent: "space-between",
 		alignItems: "center",
-		marginTop: 24,
+		marginTop: mvs(24, 1.5),
 	},
 	usd: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 42,
-		lineHeight: 53,
+		fontSize: mvs(42, 1.5),
+		lineHeight: mvs(53, 1.5),
 	},
 	coin: {
 		flexDirection: "row",
 		justifyContent: "space-between",
 		alignItems: "center",
-		marginTop: 8,
+		marginTop: mvs(8, 0.1),
 	},
 
 	coinBalance: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 21,
-		lineHeight: 27,
+		fontSize: mvs(21, 1.5),
+		lineHeight: mvs(27, 1.5),
 		color: COLOR.RoyalBlue,
 	},
 	select: {
-		marginTop: 39,
+		marginTop: mvs(39, 1.5),
 	},
 
 	maxButtonContent: {
-		paddingHorizontal: 8,
-		paddingVertical: 8,
+		paddingHorizontal: mvs(8, 1.5),
+		paddingVertical: mvs(8, 1.5),
 	},
 
 	numpad: {
-		flexGrow: 1,
-		justifyContent: "space-around",
-		padding: 15,
+		marginBottom: FOOTER_HEIGHT + 1000,
+		// backgroundColor: "red",
 	},
 })

modals/wallets/constants.ts

@@ -1 +1,3 @@
-export const HORIZONTAL_WRAPPER = 30
+import { s } from "react-native-size-matters"
+
+export const HORIZONTAL_WRAPPER = s(30)

modals/wallets/modals/SendModal.tsx

@@ -14,6 +14,7 @@ import { isValidAddress } from "core/utils/Address"
 import { useKeyboard } from "@react-native-community/hooks"
 import { useStore } from "hooks"
 import { toJS } from "mobx"
+import { s, vs } from "react-native-size-matters"
 
 type Props = {
 	controller: SendController
@@ -152,7 +153,7 @@ export const FooterSendModal = observer(
 )
 
 const styles = StyleSheet.create({
-	container: { flex: 1 },
+	container: { flexGrow: 1 },
 	wrapper: {
 		// marginHorizontal: 30,
 		flex: 1,
@@ -164,33 +165,34 @@ const styles = StyleSheet.create({
 		alignItems: "center",
 	},
 	header: {
-		marginTop: 10,
+		marginTop: vs(10),
 		marginHorizontal: HORIZONTAL_WRAPPER,
 	},
 	//
 	selectCoin: { marginTop: 15 },
 	insertImport: {
-		flex: 1,
+		// flexGrow: 1,
 		marginHorizontal: HORIZONTAL_WRAPPER,
-		marginBottom: FOOTER_HEIGHT,
+		// marginBottom: FOOTER_HEIGHT + 100,
+		backgroundColor: "orange",
 	},
 	selectReceiver: { flex: 1 },
 
 	// footer
 	buttonText: {
-		fontSize: 16,
-		lineHeight: 20,
+		fontSize: s(16),
+		lineHeight: s(20),
 	},
 	buttonContinue: {
-		paddingHorizontal: 24,
-		paddingVertical: 18,
+		paddingHorizontal: s(24),
+		paddingVertical: s(18),
 	},
 	buttonPreviewSend: {
-		paddingHorizontal: 40,
-		paddingVertical: 18,
+		paddingHorizontal: s(40),
+		paddingVertical: s(18),
 	},
 	buttonSend: {
-		paddingHorizontal: 46,
-		paddingVertical: 18,
+		paddingHorizontal: s(46),
+		paddingVertical: s(18),
 	},
 })