feat(screen): 💄 Validator + rn-sm

#99

screens/ValidatorScreen/ValidatorScreen.tsx

@@ -1,33 +1,34 @@
 import { useCallback, useEffect, useMemo, useState } from "react"
-import { NativeStackScreenProps } from "@react-navigation/native-stack"
-import { StatusBar } from "expo-status-bar"
 import { observer } from "mobx-react-lite"
 import {
 	Image,
 	ListRenderItem,
 	Platform,
 	RefreshControl,
-	SafeAreaView,
 	ScrollView,
 	StyleSheet,
 	Text,
 	View,
 } from "react-native"
-import { RootStackParamList } from "types"
-import { COLOR, hexAlpha } from "utils"
-import { CardAddress, CardClaim, CardDelegation, CardInfo } from "./components/moleculs"
+import { s, vs } from "react-native-size-matters"
+import { NativeStackScreenProps } from "@react-navigation/native-stack"
+import { StatusBar } from "expo-status-bar"
 import { FlatList } from "react-native-gesture-handler"
-import moment from "moment"
-import { ButtonBack } from "components/atoms"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
-import { Stat } from "./components/atoms"
-import { openDelegateWithValidator, openRedelegateWithValidator, openClaim } from "modals/validator"
+import * as Clipboard from "expo-clipboard"
+import moment from "moment"
+import { RootStackParamList } from "types"
+import { COLOR, hexAlpha } from "utils"
 import { useStore } from "hooks"
 import { SupportedCoins } from "constants/Coins"
-import * as Clipboard from "expo-clipboard"
 import { openUndelegateWithValidator } from "modals/validator/withValidator"
-import { formatNumber } from "utils/numbers"
+import { openDelegateWithValidator, openRedelegateWithValidator, openClaim } from "modals/validator"
 import { Validator, ValidatorStatus } from "core/types/coin/cosmos/Validator"
+import { formatNumber } from "utils/numbers"
+import { HORIZONTAL_WRAPPER } from "utils/constants"
+import { ButtonBack } from "components/atoms"
+import { CardAddress, CardClaim, CardDelegation, CardInfo } from "./components/moleculs"
+import { Stat } from "./components/atoms"
 
 type Props = NativeStackScreenProps<RootStackParamList, "Validator">
 
@@ -99,7 +100,12 @@ export default observer<Props>(function ValidatorScreen({ navigation, route }) {
 
 	const renderInfo = useCallback<ListRenderItem<IData>>(
 		({ item }) => (
-			<CardInfo style={item.title !== "TOTAL STAKE" && styles.info} key={item.title} {...item} />
+			<CardInfo
+				style={item.title !== "TOTAL STAKE" && styles.info}
+				key={item.title}
+				{...item}
+				//
+			/>
 		),
 		[],
 	)
@@ -184,22 +190,18 @@ export default observer<Props>(function ValidatorScreen({ navigation, route }) {
 				<View style={styles.wrapper}>
 					<CardAddress
 						title="OPERATION ADDRESS"
-						onPress={() => {
-							Clipboard.setStringAsync(validator.operator)
-						}}
+						onPress={() => Clipboard.setStringAsync(validator.operator)}
 						value={validator.operator}
 						style={styles.address}
 					/>
 					<CardAddress
 						title="ACCOUNT ADDRESS"
-						onPress={() => {
-							Clipboard.setStringAsync(validator.operator)
-						}}
+						onPress={() => Clipboard.setStringAsync(validator.operator)}
 						value={address}
 						style={styles.address}
 					/>
 
-					<View style={{ marginHorizontal: 10, marginTop: 10 }}>
+					<View style={{ marginHorizontal: s(10), marginTop: s(10) }}>
 						{/* <Stat
 								style={styles.stat}
 								title="Uptime"
@@ -242,109 +244,109 @@ const styles = StyleSheet.create({
 		backgroundColor: COLOR.Dark3,
 	},
 	scrollviewContent: {
-		paddingTop: 28,
+		paddingTop: vs(28),
 	},
 
 	wrapper: {
-		paddingHorizontal: 30,
+		paddingHorizontal: HORIZONTAL_WRAPPER,
 	},
 	title: {
-		marginTop: Platform.OS === "ios" ? 30 : 60,
-		marginBottom: 24,
+		marginTop: Platform.OS === "ios" ? s(30) : s(60),
+		marginBottom: vs(24),
 	},
 
 	head: {
 		flexDirection: "row",
 		justifyContent: "flex-start",
 		width: "100%",
-		marginBottom: 33,
+		marginBottom: vs(33),
 	},
 
 	avatarContainer: {
-		width: 80,
-		height: 80,
-		borderRadius: 80,
+		width: s(80),
+		height: s(80),
+		borderRadius: s(80),
 
 		justifyContent: "center",
 		alignItems: "center",
 		backgroundColor: COLOR.Dark2,
 
-		marginRight: 24,
+		marginRight: s(24),
 	},
 	avatar: {
-		width: 54,
-		height: 54,
-		borderRadius: 54,
+		width: s(54),
+		height: s(54),
+		borderRadius: s(54),
 		backgroundColor: COLOR.Dark3,
 	},
 
 	validatorNameContainer: {
 		flexDirection: "row",
-		marginBottom: 10,
+		marginBottom: vs(10),
 	},
 
 	validatorName: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 20,
-		lineHeight: 25,
+		fontSize: vs(20),
+		lineHeight: vs(25),
 
 		color: COLOR.White,
-		marginRight: 12,
+		marginRight: s(12),
 	},
 
 	badge: {
 		backgroundColor: COLOR.LightGreyBlue,
-		paddingHorizontal: 12,
-		paddingVertical: 5,
-		borderRadius: 25,
+		paddingHorizontal: s(12),
+		paddingVertical: s(5),
+		borderRadius: s(25),
 		alignItems: "center",
 		justifyContent: "center",
 	},
 	badgeText: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "700",
-		fontSize: 8,
-		lineHeight: 10,
+		fontSize: s(8),
+		lineHeight: s(10),
 		color: COLOR.White,
 	},
 
 	tag: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 15,
-		lineHeight: 19,
+		fontSize: s(15),
+		lineHeight: s(19),
 		color: hexAlpha(COLOR.PaleBlue, 50),
 	},
 
-	claim: { marginBottom: 25 },
-	delegation: { marginBottom: 38 },
+	claim: { marginBottom: vs(25) },
+	delegation: { marginBottom: vs(38) },
 	titleList: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 16,
-		lineHeight: 20,
+		fontSize: s(16),
+		lineHeight: s(20),
 
 		color: COLOR.White,
-		marginBottom: 9,
-		marginLeft: 10,
+		marginBottom: vs(9),
+		marginLeft: s(10),
 	},
 
-	flatlistContent: { paddingVertical: 10 },
-	flatlist: { marginBottom: 15 },
-	info: { marginRight: 20 },
-	address: { marginBottom: 25 },
-	stat: { marginBottom: 26 },
+	flatlistContent: { paddingVertical: s(10) },
+	flatlist: { marginBottom: vs(15) },
+	info: { marginRight: s(20) },
+	address: { marginBottom: vs(25) },
+	stat: { marginBottom: vs(26) },
 
 	buttonBack: {
 		backgroundColor: COLOR.White,
-		paddingHorizontal: 24,
-		paddingVertical: 18,
-		borderRadius: 50,
+		paddingHorizontal: s(24),
+		paddingVertical: s(18),
+		borderRadius: s(50),
 	},
 })
 

screens/ValidatorScreen/components/atoms/Caption.tsx

@@ -1,4 +1,5 @@
 import { StyleProp, StyleSheet, Text, TextStyle } from "react-native"
+import { s } from "react-native-size-matters"
 import { COLOR } from "utils"
 
 type Props = {
@@ -7,17 +8,17 @@ type Props = {
 	style?: StyleProp<TextStyle>
 }
 
-export default ({ children, text, style }: Props) => {
-	return <Text style={[styles.text, style]}>{text || children}</Text>
-}
+export default ({ children, text, style }: Props) => (
+	<Text style={[styles.text, style]}>{text || children}</Text>
+)
 
 const styles = StyleSheet.create({
 	text: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 13,
-		lineHeight: 16,
+		fontSize: s(13),
+		lineHeight: s(16),
 		color: COLOR.Marengo,
 	},
 })

screens/ValidatorScreen/components/atoms/Card.tsx

@@ -1,4 +1,5 @@
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native"
+import { s } from "react-native-size-matters"
 import { COLOR } from "utils"
 
 type Props = {
@@ -12,7 +13,7 @@ export default function Card({ children, style }: Props) {
 
 const styles = StyleSheet.create({
 	container: {
-		borderRadius: 20,
+		borderRadius: s(20),
 		backgroundColor: COLOR.Dark2,
 	},
 })

screens/ValidatorScreen/components/atoms/Count.tsx

@@ -1,4 +1,5 @@
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native"
+import { s } from "react-native-size-matters"
 import { COLOR } from "utils"
 
 type Props = {
@@ -7,14 +8,12 @@ type Props = {
 	style?: StyleProp<ViewStyle>
 }
 
-export default ({ coinName, value, style }: Props) => {
-	return (
-		<View style={[styles.container, style]}>
-			<Text style={styles.count}>{value}</Text>
-			<Text style={styles.coinName}>{coinName.toUpperCase()}</Text>
-		</View>
-	)
-}
+export default ({ coinName, value, style }: Props) => (
+	<View style={[styles.container, style]}>
+		<Text style={styles.count}>{value}</Text>
+		<Text style={styles.coinName}>{coinName.toUpperCase()}</Text>
+	</View>
+)
 
 const styles = StyleSheet.create({
 	container: {
@@ -25,16 +24,16 @@ const styles = StyleSheet.create({
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 24,
+		fontSize: s(24),
 		color: COLOR.White,
 
-		marginRight: 7,
+		marginRight: s(7),
 	},
 	coinName: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 14,
+		fontSize: s(14),
 		color: COLOR.RoyalBlue5,
 	},
 })

screens/ValidatorScreen/components/atoms/Stat.tsx

@@ -1,4 +1,5 @@
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native"
+import { s } from "react-native-size-matters"
 import { COLOR } from "utils"
 import Caption from "./Caption"
 
@@ -8,30 +9,28 @@ type Props = {
 	style?: StyleProp<ViewStyle>
 }
 
-export default ({ title, value, style }: Props) => {
-	return (
-		<View style={[styles.container, style]}>
-			<Caption style={styles.count}>{title}</Caption>
-			<Text style={styles.value}>{value}</Text>
-		</View>
-	)
-}
+export default ({ title, value, style }: Props) => (
+	<View style={[styles.container, style]}>
+		<Caption style={styles.count}>{title}</Caption>
+		<Text style={styles.value}>{value}</Text>
+	</View>
+)
 
 const styles = StyleSheet.create({
 	container: {
 		flexDirection: "row",
 		justifyContent: "space-between",
 	},
 	count: {
-		fontSize: 14,
-		lineHeight: 18,
+		fontSize: s(14),
+		lineHeight: s(18),
 	},
 	value: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 16,
-		lineHeight: 20,
+		fontSize: s(16),
+		lineHeight: s(20),
 		color: COLOR.White,
 	},
 })