Wallet connect update + Support for simple notifications

CHANGELOG.md

@@ -3,6 +3,8 @@
 ## Current Develop Branch
 
 ## v0.2.17 - Jun 12 2020
+- [#1624](https://github.com/MetaMask/metamask-mobile/pull/1624): Wallet connect update + Support for simple notifications (#1624)
+- [#1623](https://github.com/MetaMask/metamask-mobile/pull/1623): Fix browser intial load (#1623)
 - [#1621](https://github.com/MetaMask/metamask-mobile/pull/1621): Fix branch (#1621)
 - [#1512](https://github.com/MetaMask/metamask-mobile/pull/1512): Transaction components (#1512)
 - [#1619](https://github.com/MetaMask/metamask-mobile/pull/1619): Fix aab link on slack (#1619)

app/actions/transactionNotification/index.js → app/actions/notification/index.js

@@ -13,3 +13,14 @@ export function showTransactionNotification({ autodismiss, transaction, status }
 		status
 	};
 }
+
+export function showSimpleNotification({ autodismiss, title, description, status }) {
+	return {
+		type: 'SHOW_SIMPLE_NOTIFICATION',
+		isVisible: true,
+		autodismiss,
+		title,
+		description,
+		status
+	};
+}

app/components/Nav/Main/index.js

@@ -58,7 +58,7 @@ import PaymentChannel from '../../Views/PaymentChannel';
 import ImportPrivateKeySuccess from '../../Views/ImportPrivateKeySuccess';
 import PaymentRequest from '../../UI/PaymentRequest';
 import PaymentRequestSuccess from '../../UI/PaymentRequestSuccess';
-import TransactionsNotificationManager from '../../../core/TransactionsNotificationManager';
+import NotificationManager from '../../../core/NotificationManager';
 import Engine from '../../../core/Engine';
 import AppConstants from '../../../core/AppConstants';
 import PushNotification from 'react-native-push-notification';
@@ -73,7 +73,6 @@ import TypedSign from '../../UI/TypedSign';
 import Modal from 'react-native-modal';
 import WalletConnect from '../../../core/WalletConnect';
 import PaymentChannelsClient from '../../../core/PaymentChannelsClient';
-import WalletConnectSessionApproval from '../../UI/WalletConnectSessionApproval';
 import PaymentChannelApproval from '../../UI/PaymentChannelApproval';
 import PaymentChannelDeposit from '../../Views/PaymentChannel/PaymentChannelDeposit';
 import PaymentChannelSend from '../../Views/PaymentChannel/PaymentChannelSend';
@@ -91,16 +90,20 @@ import { isENS, safeToChecksumAddress } from '../../../util/address';
 import Logger from '../../../util/Logger';
 import contractMap from 'eth-contract-metadata';
 import MessageSign from '../../UI/MessageSign';
-import WalletConnectReturnToBrowserModal from '../../UI/WalletConnectReturnToBrowserModal';
 import AsyncStorage from '@react-native-community/async-storage';
 import Approve from '../../Views/ApproveView/Approve';
 import Amount from '../../Views/SendFlow/Amount';
 import Confirm from '../../Views/SendFlow/Confirm';
 import ContactForm from '../../Views/Settings/Contacts/ContactForm';
 import TransactionTypes from '../../../core/TransactionTypes';
 import BackupAlert from '../../UI/BackupAlert';
-import TxNotification from '../../UI/TxNotification';
-import { showTransactionNotification, hideTransactionNotification } from '../../../actions/transactionNotification';
+import Notification from '../../UI/Notification';
+import {
+	showTransactionNotification,
+	hideTransactionNotification,
+	showSimpleNotification
+} from '../../../actions/notification';
+import AccountApproval from '../../UI/AccountApproval';
 
 const styles = StyleSheet.create({
 	flex: {
@@ -423,6 +426,10 @@ class Main extends PureComponent {
 		 * Dispatch showing a transaction notification
 		 */
 		showTransactionNotification: PropTypes.func,
+		/**
+		 * Dispatch showing a simple notification
+		 */
+		showSimpleNotification: PropTypes.func,
 		/**
 		 * Dispatch hiding a transaction notification
 		 */
@@ -449,7 +456,6 @@ class Main extends PureComponent {
 		signType: '',
 		walletConnectRequest: false,
 		walletConnectRequestInfo: {},
-		walletConnectReturnModalVisible: false,
 		paymentChannelRequest: false,
 		paymentChannelRequestLoading: false,
 		paymentChannelRequestCompleted: false,
@@ -489,7 +495,7 @@ class Main extends PureComponent {
 					}
 					if (data && data.action === 'tx') {
 						if (data.id) {
-							TransactionsNotificationManager.setTransactionToView(data.id);
+							NotificationManager.setTransactionToView(data.id);
 						}
 						this.props.navigation.navigate('TransactionsHome');
 					}
@@ -539,10 +545,11 @@ class Main extends PureComponent {
 			});
 
 			setTimeout(() => {
-				TransactionsNotificationManager.init(
+				NotificationManager.init(
 					this.props.navigation,
 					this.props.showTransactionNotification,
-					this.props.hideTransactionNotification
+					this.props.hideTransactionNotification,
+					this.props.showSimpleNotification
 				);
 				this.pollForIncomingTransactions();
 
@@ -638,9 +645,6 @@ class Main extends PureComponent {
 		WalletConnect.hub.on('walletconnectSessionRequest', peerInfo => {
 			this.setState({ walletConnectRequest: true, walletConnectRequestInfo: peerInfo });
 		});
-		WalletConnect.hub.on('walletconnect:return', () => {
-			this.setState({ walletConnectReturnModalVisible: true });
-		});
 		WalletConnect.init();
 	};
 
@@ -790,7 +794,7 @@ class Main extends PureComponent {
 				if (transactionMeta.status === 'submitted') {
 					this.setState({ transactionHandled: true });
 					this.props.navigation.pop();
-					TransactionsNotificationManager.watchSubmittedTransaction({
+					NotificationManager.watchSubmittedTransaction({
 						...transactionMeta,
 						assetType: transactionMeta.transaction.assetType
 					});
@@ -906,7 +910,6 @@ class Main extends PureComponent {
 		// If the app is now in background, we need to start
 		// the background timer, which is less intense
 		if (this.backgroundMode) {
-			this.setState({ walletConnectReturnModalVisible: false });
 			BackgroundTimer.runBackgroundTimer(async () => {
 				await Engine.refreshTransactionHistory();
 			}, AppConstants.TX_CHECK_BACKGROUND_FREQUENCY);
@@ -1074,23 +1077,19 @@ class Main extends PureComponent {
 				onBackButtonPress={this.onWalletConnectSessionRejected}
 				swipeDirection={'down'}
 			>
-				<WalletConnectSessionApproval
+				<AccountApproval
 					onCancel={this.onWalletConnectSessionRejected}
 					onConfirm={this.onWalletConnectSessionApproval}
 					currentPageInformation={{
 						title: meta && meta.name,
 						url: meta && meta.url
 					}}
-					autosign={false}
+					walletConnectRequest
 				/>
 			</Modal>
 		);
 	};
 
-	renderWalletConnectReturnModal = () => (
-		<WalletConnectReturnToBrowserModal modalVisible={this.state.walletConnectReturnModalVisible} />
-	);
-
 	renderPaymentChannelRequestApproval = () => {
 		const {
 			paymentChannelRequest,
@@ -1144,11 +1143,10 @@ class Main extends PureComponent {
 					<GlobalAlert />
 					<FadeOutOverlay />
 					<BackupAlert navigation={this.props.navigation} onPress={this.backupAlertPress} />
-					<TxNotification navigation={this.props.navigation} />
+					<Notification navigation={this.props.navigation} />
 				</View>
 				{this.renderSigningModal()}
 				{this.renderWalletConnectSessionRequestModal()}
-				{this.renderWalletConnectReturnModal()}
 			</React.Fragment>
 		);
 	}
@@ -1172,6 +1170,7 @@ const mapDispatchToProps = dispatch => ({
 	setEtherTransaction: transaction => dispatch(setEtherTransaction(transaction)),
 	setTransactionObject: transaction => dispatch(setTransactionObject(transaction)),
 	showTransactionNotification: args => dispatch(showTransactionNotification(args)),
+	showSimpleNotification: args => dispatch(showSimpleNotification(args)),
 	hideTransactionNotification: () => dispatch(hideTransactionNotification())
 });
 

app/components/UI/AccountApproval/index.js

@@ -10,6 +10,7 @@ import { colors, fontStyles } from '../../../styles/common';
 import Device from '../../../util/Device';
 import Analytics from '../../../core/Analytics';
 import { ANALYTICS_EVENT_OPTS } from '../../../util/analytics';
+import NotificationManager from '../../../core/NotificationManager';
 
 const styles = StyleSheet.create({
 	root: {
@@ -85,7 +86,11 @@ class AccountApproval extends PureComponent {
 		/**
 		 * A string representing the network name
 		 */
-		networkType: PropTypes.string
+		networkType: PropTypes.string,
+		/**
+		 * Whether it was a request coming through wallet connect
+		 */
+		walletConnectRequest: PropTypes.bool
 	};
 
 	state = {
@@ -100,15 +105,32 @@ class AccountApproval extends PureComponent {
 		});
 	};
 
+	showWalletConnectNotification = (confirmation = false) => {
+		if (this.props.walletConnectRequest) {
+			const title = this.props.currentPageInformation.title;
+			InteractionManager.runAfterInteractions(() => {
+				NotificationManager.showSimpleNotification({
+					status: `simple_notification${!confirmation ? '_rejected' : ''}`,
+					duration: 5000,
+					title: confirmation
+						? strings('notifications.wc_connected_title', { title })
+						: strings('notifications.wc_connected_rejected_title'),
+					description: strings('notifications.wc_description')
+				});
+			});
+		}
+	};
+
 	/**
 	 * Calls onConfirm callback and analytics to track connect confirmed event
 	 */
 	onConfirm = () => {
+		this.props.onConfirm();
 		Analytics.trackEventWithParameters(
 			ANALYTICS_EVENT_OPTS.AUTHENTICATION_CONNECT_CONFIRMED,
 			this.getTrackingParams()
 		);
-		this.props.onConfirm();
+		this.showWalletConnectNotification(true);
 	};
 
 	/**
@@ -120,6 +142,7 @@ class AccountApproval extends PureComponent {
 			this.getTrackingParams()
 		);
 		this.props.onCancel();
+		this.showWalletConnectNotification();
 	};
 
 	/**

app/components/UI/MessageSign/index.js

@@ -1,10 +1,13 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, View, Text, InteractionManager } from 'react-native';
 import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
 import SignatureRequest from '../SignatureRequest';
 import ExpandedMessage from '../SignatureRequest/ExpandedMessage';
+import NotificationManager from '../../../core/NotificationManager';
+import { strings } from '../../../../locales/i18n';
+import { WALLET_CONNECT_ORIGIN } from '../../../util/walletconnect';
 
 const styles = StyleSheet.create({
 	expandedMessage: {
@@ -56,20 +59,36 @@ export default class MessageSign extends PureComponent {
 		truncateMessage: false
 	};
 
+	showWalletConnectNotification = (messageParams, confirmation = false) => {
+		InteractionManager.runAfterInteractions(() => {
+			messageParams.origin === WALLET_CONNECT_ORIGIN &&
+				NotificationManager.showSimpleNotification({
+					status: `simple_notification${!confirmation ? '_rejected' : ''}`,
+					duration: 5000,
+					title: confirmation
+						? strings('notifications.wc_signed_title')
+						: strings('notifications.wc_signed_rejected_title'),
+					description: strings('notifications.wc_description')
+				});
+		});
+	};
+
 	signMessage = async () => {
 		const { messageParams } = this.props;
 		const { KeyringController, MessageManager } = Engine.context;
 		const messageId = messageParams.metamaskId;
 		const cleanMessageParams = await MessageManager.approveMessage(messageParams);
 		const rawSig = await KeyringController.signMessage(cleanMessageParams);
 		MessageManager.setMessageStatusSigned(messageId, rawSig);
+		this.showWalletConnectNotification(messageParams, true);
 	};
 
 	rejectMessage = () => {
 		const { messageParams } = this.props;
 		const { MessageManager } = Engine.context;
 		const messageId = messageParams.metamaskId;
 		MessageManager.rejectMessage(messageId);
+		this.showWalletConnectNotification(messageParams);
 	};
 
 	cancelSignature = () => {