feat: ✨ upd. SelectCoin. restyle, fix coin list

#65
bitsongofficial · Sep 9, 2022 · 52f29f2 · 52f29f2
1 parent ccc804c
commit 52f29f2
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 66 deletions.
diff --git a/modals/wallets/components/templates/SelectCoin.tsx b/modals/wallets/components/templates/SelectCoin.tsx
@@ -1,18 +1,24 @@
 import { useCallback } from "react"
-import { StyleSheet, Text, View } from "react-native"
+import { ListRenderItem, StyleSheet, Text, ViewStyle, StyleProp } from "react-native"
 import { useStore, useTheme } from "hooks"
 import { ButtonBack } from "components/atoms"
-import { ButtonCoinSelect } from "../moleculs"
-import { SendController } from "../../controllers"
 import { SupportedCoins } from "constants/Coins"
 import { Coin } from "classes"
+import { COLOR } from "utils"
+import { FlatList } from "react-native-gesture-handler"
+import { BottomSheetView } from "@gorhom/bottom-sheet"
+import { SendController } from "../../controllers"
+import { ButtonCoinSelect } from "../moleculs"
 
 type Props = {
 	controller: SendController
 	onBack(): void
+	style?: StyleProp<ViewStyle>
 }
 
-export default function SelectCoin({ controller, onBack }: Props) {
+const HORISONTAL_WRAPPER = 30
+
+export default function SelectCoin({ controller, onBack, style }: Props) {
 	const theme = useTheme()
 	const { coin } = useStore()
 
@@ -26,35 +32,65 @@ export default function SelectCoin({ controller, onBack }: Props) {
 	const coinsFromSupported = Object.values(SupportedCoins).map((sc) => coin.findAssetWithCoin(sc))
 	const availableCoins = coinsFromSupported.filter((c) => c != undefined) as Coin[]
 
+	const renderCoin = useCallback<ListRenderItem<Coin>>(
+		({ item }) => <ButtonCoinSelect key={item?.info._id} coin={item} onPress={selectCoin} />,
+		[],
+	)
+
 	return (
-		<View style={styles.container}>
-			<ButtonBack onPress={onBack} />
-			<Text style={[styles.title, theme.text.primary]}>Select Coin</Text>
-			<Text style={[styles.subtitle, theme.text.secondary]}>
-				Select also the chain where your coin come from
+		<BottomSheetView style={[styles.container, style]}>
+			<ButtonBack onPress={onBack} style={styles.back} />
+			<Text style={[styles.title, theme.text.primary]}>Select coin</Text>
+			<Text style={styles.caption}>
+				Select also the chain where your coin{"\n"}
+				come from
 			</Text>
 
-			{availableCoins.map((c) => (
-				<ButtonCoinSelect key={c?.info._id} coin={c} onPress={selectCoin} />
-			))}
-		</View>
+			<FlatList
+				renderItem={renderCoin}
+				data={availableCoins}
+				style={styles.flatList}
+				contentContainerStyle={styles.flatlistContent}
+			/>
+		</BottomSheetView>
 	)
 }
 
 const styles = StyleSheet.create({
-	container: {
-		marginTop: 15,
+	container: { flexGrow: 1 },
+
+	back: {
+		marginBottom: 24,
+		marginHorizontal: HORISONTAL_WRAPPER,
 	},
 	title: {
-		fontSize: 18,
-		lineHeight: 23,
+		fontFamily: "CircularStd",
+		fontStyle: "normal",
+		fontWeight: "500",
+		fontSize: 20,
+		lineHeight: 25,
+
+		textAlign: "center",
+		marginBottom: 8,
+	},
+
+	caption: {
+		fontFamily: "CircularStd",
+		fontStyle: "normal",
+		fontWeight: "500",
+		fontSize: 16,
+		lineHeight: 20,
+
+		color: COLOR.Marengo,
+		textAlign: "center",
+	},
 
-		marginTop: 24,
+	flatList: {
+		marginHorizontal: HORISONTAL_WRAPPER / 2,
+		flex: 1,
 	},
-	subtitle: {
-		fontSize: 14,
-		lineHeight: 18,
-		marginTop: 10,
-		width: "80%",
+	flatlistContent: {
+		paddingBottom: 40,
+		paddingHorizontal: HORISONTAL_WRAPPER / 2,
 	},
 })
diff --git a/modals/wallets/index.ts b/modals/wallets/index.ts
@@ -1 +1,2 @@
 export { default as openSend } from "./openSend"
+export { default as openSendRecap } from "./openSendRecap"
diff --git a/modals/wallets/modals/SendModal.tsx b/modals/wallets/modals/SendModal.tsx
@@ -73,55 +73,53 @@ export default observer<Props>(function SendModal({ close, controller, onPressSc
 
 	return (
 		<BottomSheetView style={[styles.container]}>
-			<View style={styles.wrapper}>
-				{isShowHeader && (
-					<Header
-						title={title}
-						subtitle={subtitle}
-						Pagination={<Pagination acitveIndex={steps.active} count={3} />}
-						style={styles.header}
-					/>
-				)}
-				{hasCoins && (
-					<>
-						{steps.title === "Insert Import" && (
-							<InsertImport
-								controller={controller}
-								onPressNext={() => steps.goTo("Select Receiver")}
-								onPressBack={close}
-								onPressSelectCoin={() => steps.goTo("Select coin")}
-							/>
-						)}
-						{steps.title === "Select Receiver" && (
-							<SelectReceiver
-								controller={controller}
-								onPressBack={goBack}
-								onPressRecap={() => steps.goTo("Send Recap")}
-								onPressScanner={onPressScanQRReciver}
-							/>
-						)}
-						{steps.title === "Send Recap" && (
-							<SendRecap controller={controller} onPressBack={goBack} onPressSend={send} />
-						)}
-						{steps.title === "Select coin" && (
-							<SelectCoin controller={controller} onBack={goBack} />
-						)}
-					</>
-				)}
-				{!hasCoins && (
-					<View style={styles.verticallyCentered}>
-						<Text style={{ color: COLOR.White }}>No assets available to send</Text>
-					</View>
-				)}
-			</View>
+			{/* <View style={styles.wrapper}> */}
+			{isShowHeader && (
+				<Header
+					title={title}
+					subtitle={subtitle}
+					Pagination={<Pagination acitveIndex={steps.active} count={3} />}
+					style={styles.header}
+				/>
+			)}
+			{hasCoins && (
+				<>
+					{steps.title === "Insert Import" && (
+						<InsertImport
+							controller={controller}
+							onPressNext={() => steps.goTo("Select Receiver")}
+							onPressBack={close}
+							onPressSelectCoin={() => steps.goTo("Select coin")}
+						/>
+					)}
+					{steps.title === "Select Receiver" && (
+						<SelectReceiver
+							controller={controller}
+							onPressBack={goBack}
+							onPressRecap={() => steps.goTo("Send Recap")}
+							onPressScanner={onPressScanQRReciver}
+						/>
+					)}
+					{steps.title === "Send Recap" && (
+						<SendRecap controller={controller} onPressBack={goBack} onPressSend={send} />
+					)}
+					{steps.title === "Select coin" && <SelectCoin controller={controller} onBack={goBack} />}
+				</>
+			)}
+			{!hasCoins && (
+				<View style={styles.verticallyCentered}>
+					<Text style={{ color: COLOR.White }}>No assets available to send</Text>
+				</View>
+			)}
+			{/* </View> */}
 		</BottomSheetView>
 	)
 })
 
 const styles = StyleSheet.create({
-	container: { flexGrow: 1 },
+	container: { flex: 1 },
 	wrapper: {
-		marginHorizontal: 30,
+		// marginHorizontal: 30,
 		flex: 1,
 	},
 	verticallyCentered: {
@@ -131,4 +129,7 @@ const styles = StyleSheet.create({
 		alignItems: "center",
 	},
 	header: { marginTop: 10 },
+
+	//
+	selectCoin: { marginTop: 15 },
 })
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default as openSend } from "./openSend"
		export { default as openSendRecap } from "./openSendRecap"