feat(screen): 💄 ValidatorList + rn-sm

#99
bitsongofficial · Sep 16, 2022 · f59e5e3 · f59e5e3
1 parent 707272b
commit f59e5e3
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 78 deletions.
diff --git a/screens/ValidatorsListScreen/ValidatorsListScreen.tsx b/screens/ValidatorsListScreen/ValidatorsListScreen.tsx
@@ -21,6 +21,8 @@ import { useAnimateFlatlist, useGlobalBottomsheet, useStore } from "hooks"
 import { Shadow } from "components/atoms"
 import { Validator as ValidatorItem } from "components/organisms"
 import { Title, Toolbar } from "./components"
+import { vs } from "react-native-size-matters"
+import { HORIZONTAL_WRAPPER } from "utils/constants"
 
 type Props = CompositeScreenProps<
 	NativeStackScreenProps<RootStackParamList>,
@@ -62,45 +64,48 @@ export default observer<Props>(function ValidatorsListScreen({ navigation }) {
 		})
 
 	const gbs = useGlobalBottomsheet()
-	const openBottomSheet = useCallback((validator: Validator) => {
-		gbs.setProps({
-			snapPoints: [254],
-			children: () => (
-				<Toolbar
-					style={{ marginHorizontal: 30 }}
-					onPressClaim={
-						validators.CanStake && validators.validatorReward(validator) > 0 ?
-						(() => {openClaimModal(validator)})
-						: undefined
-					}
-					onPressStake={
-						validators.CanStake ?
-						() => {openDelegateWithValidator(validator, navigation)}
-						: undefined
-					}
-					onPressUnstake={
-						validators.CanStake && validators.validatorDelegations(validator) > 0 ?
-						() => (openUndelegateWithValidator(validator, navigation))
-						: undefined
-					}
-					onPressRestake={
-						validators.CanStake && validators.validatorDelegations(validator) > 0 ?
-						() => (openRedelegateWithValidator(validator, navigation))
-						: undefined
-					}
-				/>
-			),
-		})
-		requestAnimationFrame(() => gbs.snapToIndex(0))
-	}, [validators.CanStake])
+	const openBottomSheet = useCallback(
+		(validator: Validator) => {
+			gbs.setProps({
+				snapPoints: [vs(254)],
+				children: () => (
+					<Toolbar
+						style={{ marginHorizontal: HORIZONTAL_WRAPPER }}
+						onPressClaim={
+							validators.CanStake && validators.validatorReward(validator) > 0
+								? () => openClaimModal(validator)
+								: undefined
+						}
+						onPressStake={
+							validators.CanStake
+								? () => openDelegateWithValidator(validator, navigation)
+								: undefined
+						}
+						onPressUnstake={
+							validators.CanStake && validators.validatorDelegations(validator) > 0
+								? () => openUndelegateWithValidator(validator, navigation)
+								: undefined
+						}
+						onPressRestake={
+							validators.CanStake && validators.validatorDelegations(validator) > 0
+								? () => openRedelegateWithValidator(validator, navigation)
+								: undefined
+						}
+					/>
+				),
+			})
+			requestAnimationFrame(() => gbs.snapToIndex(0))
+		},
+		[validators.CanStake],
+	)
 
 	// -------------- Styles --------------
 
 	const flatlistContentStyle = useMemo<ViewStyle>(
 		() => ({
-			paddingTop: 23,
-			paddingHorizontal: 30,
-			paddingBottom: 100,
+			paddingTop: vs(23),
+			paddingHorizontal: HORIZONTAL_WRAPPER,
+			paddingBottom: vs(100),
 		}),
 		[],
 	)
@@ -155,9 +160,10 @@ export default observer<Props>(function ValidatorsListScreen({ navigation }) {
 
 const styles = StyleSheet.create({
 	background: { backgroundColor: COLOR.Dark3 },
-	title: { marginBottom: 24 },
-	validator: { marginBottom: 20 },
+	title: { marginBottom: vs(24) },
+	validator: { marginBottom: vs(20) },
 })
+
 const mock: Validator[] = [
 	{
 		id: "1",

diff --git a/screens/ValidatorsListScreen/components/Title.tsx b/screens/ValidatorsListScreen/components/Title.tsx
@@ -1,5 +1,6 @@
 import { StyleProp, StyleSheet, Text, TextStyle } from "react-native"
 import { useTheme } from "hooks"
+import { s } from "react-native-size-matters"
 
 type Props = {
 	text?: string
@@ -17,7 +18,7 @@ const styles = StyleSheet.create({
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 18,
-		lineHeight: 23,
+		fontSize: s(18),
+		lineHeight: s(23),
 	},
 })
diff --git a/screens/ValidatorsListScreen/components/Toolbar.tsx b/screens/ValidatorsListScreen/components/Toolbar.tsx
@@ -1,8 +1,8 @@
-import { StyleSheet, View, ViewStyle } from "react-native"
+import { StyleSheet, View, ViewStyle, StyleProp } from "react-native"
+import { s } from "react-native-size-matters"
 import { COLOR } from "utils"
 import { ToolbarAction } from "components/organisms"
 import { Icon2 } from "components/atoms"
-import { StyleProp } from "react-native"
 import Title from "./Title"
 
 type ToolbarProps = {
@@ -19,51 +19,48 @@ export default ({
 	onPressStake,
 	onPressUnstake,
 	style,
-}: ToolbarProps) => {
-	return (
-		<View style={style}>
-			<Title>Quick actions</Title>
-			<View style={styles.row}>
-				<ToolbarAction
-					onPress={onPressClaim}
-					title="Claim"
-					mode="gradient"
-					Icon={<Icon2 size={18} stroke={COLOR.White} name="arrow_down" />}
-					size={65}
-				/>
-				<ToolbarAction
-					backgroundStyle={styles.actionBackground}
-					title="Stake"
-					onPress={onPressStake}
-					Icon={<Icon2 size={18} stroke={COLOR.White} name="stake" />}
-					size={65}
-				/>
-				<ToolbarAction
-					onPress={onPressUnstake}
-					backgroundStyle={styles.actionBackground}
-					title="Unstake"
-					Icon={<Icon2 size={18} stroke={COLOR.White} name="unstake" />}
-					size={65}
-				/>
-				<ToolbarAction
-					backgroundStyle={styles.actionBackground}
-					title="Restake"
-					onPress={onPressRestake}
-					Icon={<Icon2 size={18} stroke={COLOR.White} name="restake" />}
-					size={65}
-				/>
-			</View>
+}: ToolbarProps) => (
+	<View style={style}>
+		<Title>Quick actions</Title>
+		<View style={styles.row}>
+			<ToolbarAction
+				onPress={onPressClaim}
+				title="Claim"
+				mode="gradient"
+				Icon={<Icon2 size={18} stroke={COLOR.White} name="arrow_down" />}
+				size={65}
+			/>
+			<ToolbarAction
+				backgroundStyle={styles.actionBackground}
+				title="Stake"
+				onPress={onPressStake}
+				Icon={<Icon2 size={18} stroke={COLOR.White} name="stake" />}
+				size={65}
+			/>
+			<ToolbarAction
+				onPress={onPressUnstake}
+				backgroundStyle={styles.actionBackground}
+				title="Unstake"
+				Icon={<Icon2 size={18} stroke={COLOR.White} name="unstake" />}
+				size={65}
+			/>
+			<ToolbarAction
+				backgroundStyle={styles.actionBackground}
+				title="Restake"
+				onPress={onPressRestake}
+				Icon={<Icon2 size={18} stroke={COLOR.White} name="restake" />}
+				size={65}
+			/>
 		</View>
-	)
-}
+	</View>
+)
 
 const styles = StyleSheet.create({
 	row: {
 		flexDirection: "row",
 		justifyContent: "space-between",
-		marginTop: 38,
+		marginTop: s(38),
 	},
-
 	actionBackground: {
 		backgroundColor: COLOR.Dark3,
 	},