Swaps: Add custom token flow - search by address and get it imported …

…to your wallet (#2729)
MetaMask · Jul 27, 2021 · feb9df0 · feb9df0
1 parent 72d6904
commit feb9df0
Show file tree

Hide file tree

Showing 11 changed files with 474 additions and 31 deletions.
diff --git a/app/components/Base/Alert.js b/app/components/Base/Alert.js
@@ -27,9 +27,9 @@ const styles = StyleSheet.create({
 		backgroundColor: colors.red000,
 		borderColor: colors.red
 	},
-	textInfo: { color: colors.blue },
-	textWarning: { color: colors.yellow700 },
-	textError: { color: colors.red },
+	textInfo: { color: colors.blue, flexShrink: 1 },
+	textWarning: { color: colors.yellow700, flexShrink: 1 },
+	textError: { color: colors.red, flexShrink: 1 },
 	textIconStyle: { marginRight: 12 },
 	iconWrapper: {
 		alignItems: 'center'

diff --git a/app/components/Base/ModalDragger.js b/app/components/Base/ModalDragger.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { StyleSheet, View } from 'react-native';
 import { colors } from '../../styles/common';
 import Device from '../../util/Device';
@@ -12,6 +13,9 @@ const styles = StyleSheet.create({
 		borderBottomWidth: StyleSheet.hairlineWidth,
 		borderColor: colors.grey100
 	},
+	borderless: {
+		borderColor: colors.transparent
+	},
 	dragger: {
 		width: 48,
 		height: 5,
@@ -21,12 +25,16 @@ const styles = StyleSheet.create({
 	}
 });
 
-function ModalDragger() {
+function ModalDragger({ borderless }) {
 	return (
-		<View style={styles.draggerWrapper}>
+		<View style={[styles.draggerWrapper, borderless && styles.borderless]}>
 			<View style={styles.dragger} />
 		</View>
 	);
 }
 
+ModalDragger.propTypes = {
+	borderless: PropTypes.bool
+};
+
 export default ModalDragger;
diff --git a/app/components/UI/Swaps/QuotesView.js b/app/components/UI/Swaps/QuotesView.js
@@ -289,14 +289,17 @@ function SwapsQuotesView({
 	const navigation = useNavigation();
 	const route = useRoute();
 	/* Get params from navigation */
-	const { sourceTokenAddress, destinationTokenAddress, sourceAmount, slippage } = useMemo(
+
+	const { sourceTokenAddress, destinationTokenAddress, sourceAmount, slippage, tokens } = useMemo(
 		() => getQuotesNavigationsParams(route),
 		[route]
 	);
 
 	/* Get tokens from the tokens list */
-	const sourceToken = swapsTokens?.find(token => toLowerCaseEquals(token.address, sourceTokenAddress));
-	const destinationToken = swapsTokens?.find(token => toLowerCaseEquals(token.address, destinationTokenAddress));
+	const sourceToken = [...swapsTokens, ...tokens].find(token => toLowerCaseEquals(token.address, sourceTokenAddress));
+	const destinationToken = [...swapsTokens, ...tokens].find(token =>
+		toLowerCaseEquals(token.address, destinationTokenAddress)
+	);
 
 	const hasConversionRate =
 		Boolean(destinationToken) &&

diff --git a/app/components/UI/Swaps/components/TokenImportModal.js b/app/components/UI/Swaps/components/TokenImportModal.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, SafeAreaView, View } from 'react-native';
+import Modal from 'react-native-modal';
+import FAIcon from 'react-native-vector-icons/FontAwesome5';
+import { colors } from '../../../../styles/common';
+
+import ModalDragger from '../../../Base/ModalDragger';
+import Text from '../../../Base/Text';
+import Alert from '../../../Base/Alert';
+import TokenIcon from './TokenIcon';
+import StyledButton from '../../StyledButton';
+import { strings } from '../../../../../locales/i18n';
+
+const styles = StyleSheet.create({
+	modal: {
+		margin: 0,
+		justifyContent: 'flex-end'
+	},
+	modalView: {
+		backgroundColor: colors.white,
+		borderTopLeftRadius: 10,
+		borderTopRightRadius: 10
+	},
+	content: {
+		marginVertical: 14,
+		paddingHorizontal: 30,
+		alignItems: 'center'
+	},
+	alertIcon: {
+		paddingTop: 4,
+		paddingRight: 8
+	},
+	title: {
+		fontSize: 24,
+		marginVertical: 14
+	},
+	tokenTitle: {
+		fontSize: 18,
+		textAlign: 'center',
+		marginVertical: 14
+	},
+	tokenAddress: {
+		backgroundColor: colors.grey000,
+		width: '100%',
+		borderRadius: 20,
+		marginVertical: 6,
+		paddingHorizontal: 8,
+		paddingVertical: 4
+	},
+	cta: {
+		marginTop: 10,
+		width: '100%'
+	}
+});
+
+function TokenImportModal({ isVisible, dismiss, token, onPressImport }) {
+	return (
+		<Modal
+			isVisible={isVisible}
+			onBackdropPress={dismiss}
+			onBackButtonPress={dismiss}
+			onSwipeComplete={dismiss}
+			swipeDirection="down"
+			propagateSwipe
+			style={styles.modal}
+		>
+			<SafeAreaView style={styles.modalView}>
+				<ModalDragger borderless />
+				<View style={styles.content}>
+					<Alert
+						type="error"
+						renderIcon={() => (
+							<FAIcon name="info-circle" style={styles.alertIcon} color={colors.red} size={15} />
+						)}
+					>
+						{textStyle => <Text style={textStyle}>{strings('swaps.add_warning')}</Text>}
+					</Alert>
+					<Text bold primary centered style={styles.title}>
+						{strings('swaps.import_token')}
+					</Text>
+					<TokenIcon biggest icon={token.iconUrl} symbol={token.symbol} />
+					<Text bold primary centered style={styles.tokenTitle}>
+						{token.name ? `${token.name} (${token.symbol})` : token.symbol}
+					</Text>
+					<Text primary centered small>
+						{strings('swaps.contract')}
+					</Text>
+					<View style={styles.tokenAddress}>
+						<Text small centered numberOfLines={1} adjustsFontSizeToFit>
+							{token.address}
+						</Text>
+					</View>
+					<StyledButton type="blue" containerStyle={styles.cta} onPress={onPressImport}>
+						{strings('swaps.Import')}
+					</StyledButton>
+				</View>
+			</SafeAreaView>
+		</Modal>
+	);
+}
+
+TokenImportModal.propTypes = {
+	isVisible: PropTypes.bool,
+	dismiss: PropTypes.func,
+	token: PropTypes.shape({
+		address: PropTypes.string,
+		name: PropTypes.string,
+		symbol: PropTypes.string,
+		decimals: PropTypes.number,
+		iconUrl: PropTypes.string
+	}),
+	onPressImport: PropTypes.func
+};
+export default TokenImportModal;