Fix payment channels request

app/components/Nav/Main/index.js

@@ -13,6 +13,7 @@ import NetInfo from '@react-native-community/netinfo';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
+import ENS from 'ethjs-ens';
 import GlobalAlert from '../../UI/GlobalAlert';
 import FlashMessage from 'react-native-flash-message';
 import BackgroundTimer from 'react-native-background-timer';
@@ -60,7 +61,7 @@ import TransactionsNotificationManager from '../../../core/TransactionsNotificat
 import Engine from '../../../core/Engine';
 import AppConstants from '../../../core/AppConstants';
 import PushNotification from 'react-native-push-notification';
-import I18n from '../../../../locales/i18n';
+import I18n, { strings } from '../../../../locales/i18n';
 import { colors } from '../../../styles/common';
 import LockManager from '../../../core/LockManager';
 import FadeOutOverlay from '../../UI/FadeOutOverlay';
@@ -77,7 +78,9 @@ import PaymentChannelDeposit from '../../Views/PaymentChannel/PaymentChannelDepo
 import PaymentChannelSend from '../../Views/PaymentChannel/PaymentChannelSend';
 import Networks from '../../../util/networks';
 import { CONNEXT_DEPOSIT } from '../../../util/transactions';
-import { toChecksumAddress } from 'ethereumjs-util';
+import { toChecksumAddress, isValidAddress } from 'ethereumjs-util';
+import { isENS } from '../../../util/address';
+import Logger from '../../../util/Logger';
 
 const styles = StyleSheet.create({
 	flex: {
@@ -469,13 +472,109 @@ class Main extends PureComponent {
 
 	initializePaymentChannels = () => {
 		PaymentChannelsClient.init(this.props.selectedAddress);
-		PaymentChannelsClient.hub.on('payment::request', request => {
-			this.setState({ paymentChannelRequest: true, paymentChannelRequestInfo: request });
+		PaymentChannelsClient.hub.on('payment::request', async request => {
+			const validRequest = { ...request };
+			// Validate amount
+			if (isNaN(request.amount)) {
+				Alert.alert(
+					strings('payment_channel_request.title_error'),
+					strings('payment_channel_request.amount_error_message')
+				);
+				return;
+			}
+
+			const isAddress = !request.to || request.to.substring(0, 2).toLowerCase() === '0x';
+			const isInvalidAddress = isAddress && !isValidAddress(request.to);
+
+			// Validate address
+			if (isInvalidAddress || (!isAddress && !isENS(request.to))) {
+				Alert.alert(
+					strings('payment_channel_request.title_error'),
+					strings('payment_channel_request.address_error_message')
+				);
+				return;
+			}
+
+			// Check if ENS and resolve the address before sending
+			if (isENS(request.to)) {
+				this.setState(
+					{
+						paymentChannelRequest: true,
+						paymentChannelRequestInfo: null
+					},
+					() => {
+						InteractionManager.runAfterInteractions(async () => {
+							const {
+								state: { network },
+								provider
+							} = Engine.context.NetworkController;
+							const ensProvider = new ENS({ provider, network });
+							try {
+								const resolvedAddress = await ensProvider.lookup(request.to.trim());
+								if (isValidAddress(resolvedAddress)) {
+									validRequest.to = resolvedAddress;
+									validRequest.ensName = request.to;
+									this.setState({
+										paymentChannelRequest: true,
+										paymentChannelRequestInfo: validRequest
+									});
+									return;
+								}
+							} catch (e) {
+								Logger.log('Error with payment request', request);
+							}
+							Alert.alert(
+								strings('payment_channel_request.title_error'),
+								strings('payment_channel_request.address_error_message')
+							);
+							this.setState({
+								paymentChannelRequest: false,
+								paymentChannelRequestInfo: null
+							});
+						});
+					}
+				);
+			} else {
+				this.setState({
+					paymentChannelRequest: true,
+					paymentChannelRequestInfo: validRequest
+				});
+			}
 		});
 
 		PaymentChannelsClient.hub.on('payment::complete', () => {
 			// show the success screen
 			this.setState({ paymentChannelRequestCompleted: true });
+			// hide the modal and reset state
+			setTimeout(() => {
+				setTimeout(() => {
+					this.setState({
+						paymentChannelRequest: false,
+						paymentChannelRequestLoading: false,
+						paymentChannelRequestInfo: {}
+					});
+					setTimeout(() => {
+						this.setState({
+							paymentChannelRequestCompleted: false
+						});
+					});
+				}, 1500);
+			}, 800);
+		});
+
+		PaymentChannelsClient.hub.on('payment::error', error => {
+			if (error === 'INVALID_ENS_NAME') {
+				Alert.alert(
+					strings('payment_channel_request.title_error'),
+					strings('payment_channel_request.address_error_message')
+				);
+			} else if (error.indexOf('insufficient_balance') !== -1) {
+				Alert.alert(
+					strings('payment_channel_request.error'),
+					strings('payment_channel_request.balance_error_message')
+				);
+			}
+
 			// hide the modal and reset state
 			setTimeout(() => {
 				setTimeout(() => {

app/components/UI/AccountInput/index.js

@@ -5,19 +5,17 @@ import PropTypes from 'prop-types';
 import { ScrollView, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View, Keyboard } from 'react-native';
 import { colors, fontStyles } from '../../../styles/common';
 import { connect } from 'react-redux';
-import { renderShortAddress } from '../../../util/address';
+import { renderShortAddress, isENS } from '../../../util/address';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import ElevatedView from 'react-native-elevated-view';
 import ENS from 'ethjs-ens';
 import networkMap from 'ethjs-ens/lib/network-map.json';
 import Engine from '../../../core/Engine';
 import { strings } from '../../../../locales/i18n';
-import AppConstants from '../../../core/AppConstants';
 import { isValidAddress } from 'ethereumjs-util';
 import DeviceSize from '../../../util/DeviceSize';
 import EthereumAddress from '../EthereumAddress';
-
-const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
+import AppConstants from '../../../core/AppConstants';
 
 const styles = StyleSheet.create({
 	root: {
@@ -211,8 +209,7 @@ class AccountInput extends PureComponent {
 	};
 
 	isEnsName = recipient => {
-		const rec = recipient && recipient.split('.');
-		if (!rec || rec.length === 1 || !AppConstants.supportedTLDs.includes(rec[rec.length - 1])) {
+		if (!isENS(recipient)) {
 			this.setState({ ensRecipient: undefined });
 			return false;
 		}
@@ -223,7 +220,7 @@ class AccountInput extends PureComponent {
 		const { address } = this.state;
 		try {
 			const resolvedAddress = await this.ens.lookup(recipient.trim());
-			if (address !== ZERO_ADDRESS && isValidAddress(resolvedAddress)) {
+			if (address !== AppConstants.ZERO_ADDRESS && isValidAddress(resolvedAddress)) {
 				this.setState({ address: resolvedAddress, ensRecipient: recipient });
 				return true;
 			}

app/components/UI/Navbar/index.js

@@ -523,6 +523,10 @@ export function getWalletNavbarOptions(title, navigation) {
 			setTimeout(() => {
 				DeeplinkManager.parse(data.walletConnectURI);
 			}, 500);
+		} else if (data && data.indexOf(AppConstants.MM_UNIVERSAL_LINK_HOST) !== -1) {
+			setTimeout(() => {
+				DeeplinkManager.parse(data);
+			}, 500);
 		}
 	};
 

app/components/UI/PaymentChannelApproval/__snapshots__/index.test.js.snap

@@ -7,7 +7,7 @@ exports[`PaymentChannelApproval should render correctly 1`] = `
       "backgroundColor": "#FFFFFF",
       "borderTopLeftRadius": 10,
       "borderTopRightRadius": 10,
-      "minHeight": "62%",
+      "minHeight": "65%",
       "paddingBottom": 20,
     }
   }
@@ -218,8 +218,8 @@ exports[`PaymentChannelApproval should render correctly 1`] = `
             }
           }
         >
-           $
           1.00
+           DAI
         </Text>
       </View>
     </View>

app/components/UI/PaymentChannelApproval/index.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Platform, Animated, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, Platform, Animated, StyleSheet, Text, View } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import ActionView from '../ActionView';
 import ElevatedView from 'react-native-elevated-view';
@@ -10,16 +10,23 @@ import { strings } from '../../../../locales/i18n';
 import { colors, fontStyles } from '../../../styles/common';
 import DeviceSize from '../../../util/DeviceSize';
 import WebsiteIcon from '../WebsiteIcon';
-import { renderAccountName, renderShortAddress } from '../../../util/address';
+import { renderAccountName } from '../../../util/address';
+import EthereumAddress from '../EthereumAddress';
 
 const styles = StyleSheet.create({
 	root: {
 		backgroundColor: colors.white,
 		borderTopLeftRadius: 10,
 		borderTopRightRadius: 10,
-		minHeight: Platform.OS === 'ios' ? '62%' : '80%',
+		minHeight: Platform.OS === 'ios' ? '65%' : '80%',
 		paddingBottom: DeviceSize.isIphoneX() ? 20 : 0
 	},
+	emptyContainer: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		backgroundColor: colors.white
+	},
 	wrapper: {
 		paddingHorizontal: 25
 	},
@@ -202,9 +209,31 @@ class PaymentChannelApproval extends PureComponent {
 			.toFixed(2)
 			.toString();
 
+	renderAddressOrEns = (to, ensName) => {
+		if (!to) return null;
+
+		if (ensName) {
+			return <Text style={styles.selectedAddress}>{ensName}</Text>;
+		}
+
+		return <EthereumAddress style={styles.selectedAddress} address={to} type={'short'} />;
+	};
+
+	renderLoader = () => (
+		<View style={styles.root}>
+			<View style={styles.emptyContainer}>
+				<ActivityIndicator style={styles.loader} size="small" />
+			</View>
+		</View>
+	);
+
 	render = () => {
+		if (!this.props.info) {
+			return this.renderLoader();
+		}
+
 		const {
-			info: { title, detail, to },
+			info: { title, detail, to, ensName },
 			onConfirm,
 			onCancel,
 			selectedAddress,
@@ -278,17 +307,17 @@ class PaymentChannelApproval extends PureComponent {
 										{title}
 									</Text>
 								) : (
-									<Text style={styles.selectedAddress}>{renderShortAddress(to)}</Text>
+									this.renderAddressOrEns(to, ensName)
 								)}
 							</View>
 						</View>
 						<Text style={styles.intro}>{strings('paymentRequest.is_requesting_you_to_pay')}</Text>
 						<View style={styles.total}>
-							<Text style={styles.totalPrice}> ${formattedAmount}</Text>
+							<Text style={styles.totalPrice}>{formattedAmount} DAI</Text>
 						</View>
 						{detail && (
 							<View style={styles.permissions}>
-								<Text style={styles.permissionText} numberOfLines={1}>
+								<Text style={styles.permissionText}>
 									<Text style={styles.permission}> {detail}</Text>
 								</Text>
 							</View>

app/components/Views/BrowserTab/index.js

@@ -60,7 +60,6 @@ import BackupAlert from '../../UI/BackupAlert';
 import DrawerStatusTracker from '../../../core/DrawerStatusTracker';
 
 const { HOMEPAGE_URL } = AppConstants;
-const SUPPORTED_TOP_LEVEL_DOMAINS = ['eth', 'test'];
 
 const styles = StyleSheet.create({
 	wrapper: {
@@ -820,7 +819,7 @@ export class BrowserTab extends PureComponent {
 		const urlObj = new URL(url);
 		const { hostname } = urlObj;
 		const tld = hostname.split('.').pop();
-		if (SUPPORTED_TOP_LEVEL_DOMAINS.indexOf(tld.toLowerCase()) !== -1) {
+		if (AppConstants.supportedTLDs.indexOf(tld.toLowerCase()) !== -1) {
 			return true;
 		}
 		return false;

app/core/AppConstants.js

@@ -22,5 +22,6 @@ export default {
 	},
 	MM_UNIVERSAL_LINK_HOST: 'metamask.app.link',
 	DAI_ADDRESS: '0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359',
-	HOMEPAGE_URL: 'https://home.metamask.io/'
+	HOMEPAGE_URL: 'https://home.metamask.io/',
+	ZERO_ADDRESS: '0x0000000000000000000000000000000000000000'
 };

app/core/PaymentChannelsClient.js

@@ -4,6 +4,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 // eslint-disable-next-line
 import * as Connext from 'connext';
 import EthQuery from 'ethjs-query';
+
 import TransactionsNotificationManager from './TransactionsNotificationManager';
 import { hideMessage } from 'react-native-flash-message';
 import { toWei, toBN, renderFromWei, BNToHex } from '../util/number';
@@ -591,8 +592,18 @@ const reloadClient = () => {
 };
 
 const onPaymentConfirm = async request => {
-	await instance.send({ sendAmount: request.amount, sendRecipient: request.to });
-	hub.emit('payment::complete', request);
+	try {
+		const balance = parseFloat(instance.getState().balance);
+		const sendAmount = parseFloat(request.amount);
+		if (balance < sendAmount) {
+			hub.emit('payment::error', 'insufficient_balance');
+		} else {
+			await instance.send({ sendAmount: request.amount, sendRecipient: request.to });
+			hub.emit('payment::complete', request);
+		}
+	} catch (e) {
+		hub.emit('payment::error', e.toString());
+	}
 };
 
 function initListeners() {

app/util/address.js

@@ -1,5 +1,6 @@
 import { toChecksumAddress } from 'ethereumjs-util';
 import Engine from '../core/Engine';
+import AppConstants from '../core/AppConstants';
 /**
  * Returns full checksummed address
  *
@@ -60,3 +61,17 @@ export async function importAccountFromPrivateKey(private_key) {
 		throw e;
 	}
 }
+
+/**
+ * Validates an ENS name
+ *
+ * @param {String} name - String corresponding to an ENS name
+ * @returns {boolean} - Returns a boolean indicating if it is valid
+ */
+export function isENS(name) {
+	const rec = name && name.split('.');
+	if (!rec || rec.length === 1 || !AppConstants.supportedTLDs.includes(rec[rec.length - 1])) {
+		return false;
+	}
+	return true;
+}

locales/en.json

@@ -940,5 +940,12 @@
 		"title": "You're offline",
 		"text": "Check your internet connection and try again",
 		"try_again": "Try again"
+	},
+	"payment_channel_request": {
+		"title_error": "Invalid request",
+		"error": "Error",
+		"amount_error_message": "The amount must be a number",
+		"address_error_message": "The address is invalid",
+		"balance_error_message": "Insufficient balance"
 	}
 }