feat(modals): 💄 ChangeWallet components + rn-sm

#99

modals/profile/components/atoms/StyledInput.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet } from "react-native"
 import { COLOR, hexAlpha } from "utils"
 import { Input, InputProps } from "components/atoms"
+import { s } from "react-native-size-matters"
 
 type Props = InputProps & { isFocus?: boolean }
 
@@ -18,14 +19,14 @@ export default ({ style, bottomsheet = true, isFocus, ...props }: Props) => (
 const styles = StyleSheet.create({
 	container: {
 		backgroundColor: hexAlpha(COLOR.Lavender, 10),
-		borderRadius: 20,
+		borderRadius: s(20),
 	},
 	container_focused: {
 		borderWidth: 2,
 		borderColor: COLOR.Marengo,
 	},
 	input: {
-		height: 62,
+		height: s(62),
 		color: COLOR.White,
 	},
 })

modals/profile/components/atoms/Title.tsx

@@ -1,6 +1,7 @@
 import { StyleProp, StyleSheet, Text, TextStyle } from "react-native"
 import { useTheme } from "hooks"
 import { animated } from "@react-spring/native"
+import { s } from "react-native-size-matters"
 
 type Props = {
 	text?: string
@@ -22,7 +23,7 @@ const styles = StyleSheet.create({
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 28,
-		lineHeight: 35,
+		fontSize: s(28),
+		lineHeight: s(35),
 	},
 })

modals/profile/components/moleculs/AddAccount/ImportStep.tsx

@@ -5,71 +5,68 @@ import { COLOR } from "utils"
 import { Button } from "components/atoms"
 import { PhraseHorisontal } from "components/moleculs"
 import { Title } from "../../atoms"
-import { useStore } from "hooks"
+import { s, vs } from "react-native-size-matters"
 
 type CreateStepProps = {
 	onPressPaste(): void
 	phrase: Phrase
 }
 
-export default observer(({ phrase, onPressPaste }: CreateStepProps) => {
-	return (
-		<>
-			<View style={styles.wrapper}>
-				<Title style={styles.title}>Import Mnemonics</Title>
-				<Text style={styles.caption}>
-					This is the only way you will be able to{"\n"}
-					recover your account.Please store it {"\n"}
-					somewhere safe!
-				</Text>
+export default observer(({ phrase, onPressPaste }: CreateStepProps) => (
+	<>
+		<View style={styles.wrapper}>
+			<Title style={styles.title}>Import Mnemonics</Title>
+			<Text style={styles.caption}>
+				This is the only way you will be able to recover your account. Please store it somewhere
+				safe!
+			</Text>
+		</View>
+		{phrase.words.length > 0 ? (
+			<PhraseHorisontal phrase={phrase} contentContainerStyle={styles.phrase} />
+		) : (
+			<View style={{ alignItems: "center" }}>
+				<Button
+					text="Paste"
+					onPress={onPressPaste}
+					textStyle={styles.buttonText}
+					contentContainerStyle={styles.buttonContent}
+				/>
 			</View>
-			{phrase.words.length > 0 ? (
-				<PhraseHorisontal phrase={phrase} contentContainerStyle={styles.phrase} />
-			) : (
-				<View style={{ alignItems: "center" }}>
-					<Button
-						text="Paste"
-						onPress={onPressPaste}
-						textStyle={styles.buttonText}
-						contentContainerStyle={styles.buttonContent}
-					/>
-				</View>
-			)}
-		</>
-	)
-})
+		)}
+	</>
+))
 
 const styles = StyleSheet.create({
 	wrapper: {
-		marginTop: 15,
-		marginHorizontal: 26,
+		marginTop: vs(15),
+		marginHorizontal: s(26),
 	},
 	title: {
-		fontSize: 16,
-		lineHeight: 20,
+		fontSize: s(16),
+		lineHeight: s(20),
 		textAlign: "center",
 
-		marginBottom: 30,
+		marginBottom: vs(30),
 	},
 	caption: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 14,
-		lineHeight: 18,
+		fontSize: s(14),
+		lineHeight: s(18),
 
 		textAlign: "center",
 		color: COLOR.Marengo,
-		marginBottom: 26,
+		marginBottom: vs(20),
 	},
 	phrase: {
-		paddingHorizontal: 26,
+		// paddingHorizontal: s(26),
 	},
 	buttonText: {
-		fontSize: 12,
+		fontSize: s(12),
 	},
 	buttonContent: {
-		paddingHorizontal: 16,
-		paddingVertical: 8,
+		paddingHorizontal: s(16),
+		paddingVertical: s(8),
 	},
 })

modals/profile/components/moleculs/AddAccount/InputNameStep.tsx

@@ -2,6 +2,7 @@ import { StyleSheet, Text } from "react-native"
 import { observer } from "mobx-react-lite"
 import { COLOR, InputHandler } from "utils"
 import { StyledInput, Subtitle, Title } from "../../atoms"
+import { s, vs } from "react-native-size-matters"
 
 type InputNameStepProps = {
 	input: InputHandler
@@ -11,9 +12,7 @@ export default observer(({ input }: InputNameStepProps) => (
 	<>
 		<Title style={styles.title}>Name your Wallet</Title>
 		<Text style={styles.caption}>
-			This is the only way you will be able to{"\n"}
-			recover your account.Please onPressAddstore it {"\n"}
-			somewhere safe!
+			This is the only way you will be able to recover your account. Please store it somewhere safe!
 		</Text>
 		<StyledInput
 			value={input.value}
@@ -23,40 +22,41 @@ export default observer(({ input }: InputNameStepProps) => (
 			isFocus={input.isFocused}
 			onFocus={input.focusON}
 			onBlur={input.focusOFF}
-			style={{ marginBottom: 24 }}
+			style={styles.input}
 			keyboardAppearance="dark"
 		/>
 		<Subtitle style={styles.subtitle}>
-			Access VIP experiences, exclusive previews,{"\n"}
-			finance your own music projects and have your say.
+			Access VIP experiences, exclusive previews, finance your own music projects and have your say.
 		</Subtitle>
 	</>
 ))
 
 const styles = StyleSheet.create({
 	title: {
-		fontSize: 16,
-		lineHeight: 20,
+		fontSize: s(16),
+		lineHeight: s(20),
 		textAlign: "center",
 
-		marginBottom: 30,
+		marginBottom: vs(30),
 	},
 	subtitle: {
-		fontSize: 14,
-		lineHeight: 18,
+		fontSize: s(14),
+		lineHeight: s(18),
 		textAlign: "center",
 		opacity: 0.3,
 	},
 
+	input: { marginBottom: vs(24) },
+
 	caption: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 14,
-		lineHeight: 18,
+		fontSize: s(14),
+		lineHeight: s(18),
 
 		textAlign: "center",
 		color: COLOR.Marengo,
-		marginBottom: 26,
+		marginBottom: vs(26),
 	},
 })

modals/profile/components/moleculs/CurrencyItem.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from "react"
 import { StyleSheet, Text, View } from "react-native"
 import { TouchableWithoutFeedback } from "react-native-gesture-handler"
+import { s, vs } from "react-native-size-matters"
 import { ICurrency } from "screens/Profile/type"
 import { COLOR, hexAlpha } from "utils"
 import { RadioButton } from "../atoms"
@@ -26,10 +27,10 @@ export default ({ value, isActive, onPress }: Props) => {
 
 const styles = StyleSheet.create({
 	container: {
-		height: 55,
+		height: vs(55),
 		marginBottom: 4,
-		paddingLeft: 25,
-		paddingRight: 15,
+		paddingLeft: s(25),
+		paddingRight: s(15),
 		alignItems: "center",
 		flexDirection: "row",
 		justifyContent: "space-between",
@@ -39,20 +40,20 @@ const styles = StyleSheet.create({
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 13,
-		lineHeight: 50,
+		fontSize: s(13),
+		lineHeight: s(50),
 		color: COLOR.RoyalBlue3,
 	},
 
 	title: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "400",
-		fontSize: 15,
-		lineHeight: 50,
+		fontSize: s(15),
+		lineHeight: s(50),
 		color: hexAlpha(COLOR.White, 40),
 		flex: 1,
-		marginLeft: 42,
+		marginLeft: s(42),
 	},
 	text_active: {
 		color: COLOR.White,

modals/profile/components/organisms/AddAccount.tsx

@@ -8,10 +8,9 @@ import { InputWord } from "components/moleculs"
 import { BottomSheetFooter, BottomSheetFooterProps } from "@gorhom/bottom-sheet"
 import { ChooseStep, CreateStep, ImportStep, InputNameStep } from "../moleculs/AddAccount"
 import { ControllerAddAccount } from "modals/profile/controllers"
+import { s, vs } from "react-native-size-matters"
 
-type Props = {
-	controller: ControllerAddAccount
-}
+type Props = { controller: ControllerAddAccount }
 
 export default observer<Props>(({ controller }) => {
 	const { phrase, steps, nameInput } = controller
@@ -20,7 +19,6 @@ export default observer<Props>(({ controller }) => {
 	const openImport = useCallback(() => steps.goTo("Import"), [])
 
 	// --------- Phrase ----------
-
 	const [isHidden, setHidden] = useState(true)
 	const toggle = useCallback(() => setHidden((value) => !value), [])
 
@@ -78,7 +76,7 @@ export const Footer = observer(
 								bottomsheet
 								onSubmitEditing={() => {
 									phrase.inputSubmit()
-									phrase.isValid && steps.goTo("Name") // TODO: need upd. isValid
+									// phrase.isValid && steps.goTo("Name") // TODO: need upd. isValid
 								}}
 								phrase={phrase}
 							/>
@@ -119,32 +117,32 @@ export const Footer = observer(
 
 const styles = StyleSheet.create({
 	wrapper: {
-		marginTop: 15,
-		marginHorizontal: 26,
+		marginTop: vs(15),
+		marginHorizontal: s(26),
 		flex: 1,
 	},
 	title: {
-		fontSize: 16,
-		lineHeight: 20,
+		fontSize: s(16),
+		lineHeight: s(20),
 		textAlign: "center",
-		marginBottom: 30,
+		marginBottom: vs(30),
 	},
 	subtitle: {
-		fontSize: 14,
-		lineHeight: 18,
+		fontSize: s(14),
+		lineHeight: s(18),
 		textAlign: "center",
 		opacity: 0.3,
 	},
 	caption: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 14,
-		lineHeight: 18,
+		fontSize: s(14),
+		lineHeight: s(18),
 
 		textAlign: "center",
 		color: COLOR.Marengo,
-		marginBottom: 26,
+		marginBottom: vs(26),
 	},
 	// ------ Footer -----
 
@@ -154,11 +152,11 @@ const styles = StyleSheet.create({
 		alignItems: "center",
 	},
 	buttonContinueContent: {
-		paddingHorizontal: 40,
-		paddingVertical: 18,
+		paddingHorizontal: s(40),
+		paddingVertical: s(18),
 	},
 	buttonContinueText: {
-		fontSize: 14,
-		lineHeight: 18,
+		fontSize: s(14),
+		lineHeight: s(18),
 	},
 })