Payment channel opt in (#1573)

* check for balance * snaps? * stop client * stop client * paymentChannelHasBalance * ip has txs * local * snapshots Co-authored-by: Ibrahim Taveras <ibrahimtaveras00@gmail.com>
MetaMask · Jul 8, 2020 · aa873d7 · aa873d7
1 parent 05770e0
commit aa873d7
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 129 deletions.
diff --git a/app/components/Views/Settings/ExperimentalSettings/__snapshots__/index.test.js.snap b/app/components/Views/Settings/ExperimentalSettings/__snapshots__/index.test.js.snap
@@ -14,111 +14,11 @@ exports[`ExperimentalSettings should render correctly 1`] = `
   <View
     style={
       Object {
-        "paddingBottom": 112,
+        "marginVertical": 18,
       }
     }
   >
-    <View
-      style={
-        Array [
-          Object {
-            "marginTop": 50,
-          },
-          Object {
-            "marginTop": 0,
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          Object {
-            "color": "#000000",
-            "fontFamily": "CircularStd-Medium",
-            "fontSize": 20,
-            "fontWeight": "400",
-            "lineHeight": 20,
-          }
-        }
-      >
-        Payment Channels
-      </Text>
-      <Text
-        style={
-          Object {
-            "color": "#6a737d",
-            "fontFamily": "CircularStd-Medium",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "lineHeight": 20,
-            "marginTop": 12,
-          }
-        }
-      >
-        This option will run the Connext Payment Channels client in the app
-      </Text>
-      <View
-        style={
-          Object {
-            "marginVertical": 20,
-          }
-        }
-      >
-        <Switch
-          ios_backgroundColor="#f2f3f4"
-          onValueChange={[Function]}
-          trackColor={
-            Object {
-              "false": "#f2f3f4",
-              "true": "#037dd6",
-            }
-          }
-        />
-      </View>
-      <Text
-        style={
-          Object {
-            "color": "#6a737d",
-            "fontFamily": "CircularStd-Medium",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "lineHeight": 20,
-            "marginTop": 12,
-          }
-        }
-      >
-        View your payment channels wallet
-      </Text>
-      <StyledButton
-        containerStyle={
-          Object {
-            "marginTop": 18,
-          }
-        }
-        disabled={true}
-        disabledContainerStyle={
-          Object {
-            "opacity": 0.6,
-          }
-        }
-        onPress={[Function]}
-        styleDisabled={
-          Object {
-            "opacity": 0.6,
-          }
-        }
-        type="normal"
-      >
-        VIEW WALLET
-      </StyledButton>
-    </View>
-    <View
-      style={
-        Object {
-          "marginTop": 50,
-        }
-      }
-    >
+    <View>
       <Text
         style={
           Object {

diff --git a/app/components/Views/Settings/ExperimentalSettings/index.js b/app/components/Views/Settings/ExperimentalSettings/index.js
@@ -12,6 +12,7 @@ import AppConstants from '../../../../core/AppConstants';
 import { ANALYTICS_EVENT_OPTS } from '../../../../util/analytics';
 import Device from '../../../../util/Device';
 import Analytics from '../../../../core/Analytics';
+import PaymentChannelsClient from '../../../../core/PaymentChannelsClient';
 
 const styles = StyleSheet.create({
 	wrapper: {
@@ -34,17 +35,11 @@ const styles = StyleSheet.create({
 		marginTop: 12
 	},
 	setting: {
-		marginTop: 50
-	},
-	firstSetting: {
-		marginTop: 0
+		marginVertical: 18
 	},
 	clearHistoryConfirm: {
 		marginTop: 18
 	},
-	inner: {
-		paddingBottom: 112
-	},
 	switchElement: {
 		marginVertical: 20
 	}
@@ -63,15 +58,28 @@ class ExperimentalSettings extends PureComponent {
 		/* Func that enables / disables payment channels
 		*/
 		setEnablePaymentChannels: PropTypes.func,
+		/**
+		 * Selected address
+		 */
+		selectedAddress: PropTypes.string,
 		/**
 		/* Flag that determines the state of payment channels
 		*/
 		paymentChannelsEnabled: PropTypes.bool
 	};
 
+	state = {
+		paymentChannelHasBalance: false
+	};
+
 	static navigationOptions = ({ navigation }) =>
 		getNavigationOptionsTitle(strings('app_settings.experimental_title'), navigation);
 
+	componentDidMount = async () => {
+		const paymentChannelHasBalance = await PaymentChannelsClient.addressHasTransactions(this.props.selectedAddress);
+		this.setState({ paymentChannelHasBalance });
+	};
+
 	goToWalletConnectSessions = () => {
 		this.props.navigation.navigate('WalletConnectSessionsView');
 	};
@@ -103,11 +111,25 @@ class ExperimentalSettings extends PureComponent {
 
 	render = () => {
 		const { paymentChannelsEnabled } = this.props;
+		const { paymentChannelHasBalance } = this.state;
 
 		return (
 			<ScrollView style={styles.wrapper}>
-				<View style={styles.inner}>
-					<View style={[styles.setting, styles.firstSetting]}>
+				<View style={styles.setting}>
+					<View>
+						<Text style={styles.title}>{strings('experimental_settings.wallet_connect_dapps')}</Text>
+						<Text style={styles.desc}>{strings('experimental_settings.wallet_connect_dapps_desc')}</Text>
+						<StyledButton
+							type="normal"
+							onPress={this.goToWalletConnectSessions}
+							containerStyle={styles.clearHistoryConfirm}
+						>
+							{strings('experimental_settings.wallet_connect_dapps_cta')}
+						</StyledButton>
+					</View>
+				</View>
+				{paymentChannelHasBalance && (
+					<View style={styles.setting}>
 						<Text style={styles.title}>{strings('experimental_settings.payment_channels')}</Text>
 						<Text style={styles.desc}>{strings('experimental_settings.enable_payment_channels_desc')}</Text>
 						<View style={styles.switchElement}>
@@ -125,29 +147,18 @@ class ExperimentalSettings extends PureComponent {
 							containerStyle={styles.clearHistoryConfirm}
 							disabled={!paymentChannelsEnabled}
 						>
-							{strings('experimental_settings.payment_channels_cta').toUpperCase()}
+							{strings('experimental_settings.payment_channels_cta')}
 						</StyledButton>
 					</View>
-
-					<View style={styles.setting}>
-						<Text style={styles.title}>{strings('experimental_settings.wallet_connect_dapps')}</Text>
-						<Text style={styles.desc}>{strings('experimental_settings.wallet_connect_dapps_desc')}</Text>
-						<StyledButton
-							type="normal"
-							onPress={this.goToWalletConnectSessions}
-							containerStyle={styles.clearHistoryConfirm}
-						>
-							{strings('experimental_settings.wallet_connect_dapps_cta').toUpperCase()}
-						</StyledButton>
-					</View>
-				</View>
+				)}
 			</ScrollView>
 		);
 	};
 }
 
 const mapStateToProps = state => ({
-	paymentChannelsEnabled: state.settings.paymentChannelsEnabled
+	paymentChannelsEnabled: state.settings.paymentChannelsEnabled,
+	selectedAddress: state.engine.backgroundState.PreferencesController.selectedAddress
 });
 
 const mapDispatchToProps = dispatch => ({

diff --git a/app/components/Views/Settings/__snapshots__/index.test.js.snap b/app/components/Views/Settings/__snapshots__/index.test.js.snap
@@ -37,7 +37,7 @@ exports[`Settings should render correctly 1`] = `
     title="Networks"
   />
   <SettingsDrawer
-    description="Payment Channels, WalletConnect & more..."
+    description="WalletConnect & more..."
     onPress={[Function]}
     title="Experimental"
   />

diff --git a/app/core/PaymentChannelsClient.js b/app/core/PaymentChannelsClient.js
@@ -193,6 +193,16 @@ class PaymentChannelsClient {
 		return ret.toFixed(2).toString();
 	};
 
+	async startConnext() {
+		const { connext } = this.state;
+		try {
+			await connext.start();
+		} catch (e) {
+			this.logCurrentState('PC::start');
+			Logger.error(e, 'PC::start');
+		}
+	}
+
 	async pollConnextState() {
 		Logger.log('PC::createClient success');
 		const { connext } = this.state;
@@ -453,6 +463,7 @@ class PaymentChannelsClient {
 	}
 
 	logCurrentState = prefix => {
+		if (!__DEV__) return;
 		Logger.log(`${prefix}:error - channelState:`, this.state.channelState);
 		Logger.log(`${prefix}:error - connextState:`, this.state.connextState);
 		Logger.log(`${prefix}:error - runtime:`, this.state.runtime);
@@ -556,6 +567,26 @@ const instance = {
 	 *	Returns the current exchange rate for SAI / ETH
 	 */
 	getExchangeRate: () => (client && client.state && client.state.exchangeRate) || 0,
+	/**
+	 *	Returns whether the address has transactions in channel
+	 */
+	addressHasTransactions: async address => {
+		if (client) return true;
+		let hasBalance;
+		const { provider } = Engine.context.NetworkController.state;
+		if (SUPPORTED_NETWORKS.indexOf(provider.type) === -1) return false;
+		const tempClient = new PaymentChannelsClient(address);
+		try {
+			await tempClient.setConnext(provider);
+			await tempClient.startConnext();
+			const paymentHistory = await tempClient.state.connext.getPaymentHistory();
+			hasBalance = paymentHistory.length > 0;
+		} catch (e) {
+			hasBalance = false;
+		}
+		tempClient.stop();
+		return hasBalance;
+	},
 	/**
 	 *	Minimum deposit amount in ETH
 	 */

diff --git a/locales/en.json b/locales/en.json
@@ -380,7 +380,7 @@
 		"cancel_remove_network": "Cancel",
 		"info_title": "About MetaMask",
 		"experimental_title": "Experimental",
-		"experimental_desc": "Payment Channels, WalletConnect & more...",
+		"experimental_desc": "WalletConnect & more...",
 		"legal_title": "Legal",
 		"conversion_title": "Currency conversion",
 		"conversion_desc": "Display fiat values in using a specific currency throughout the application.",

diff --git a/locales/es.json b/locales/es.json
@@ -353,7 +353,7 @@
 		"cancel_remove_network": "Cancelar",
 		"info_title": "Acerca de MetaMask",
 		"experimental_title": "Experimental",
-		"experimental_desc": "Canales de Pago, WalletConnect & más...",
+		"experimental_desc": "WalletConnect & más...",
 		"legal_title": "Legal",
 		"conversion_title": "Conversión de moneda",
 		"conversion_desc": "Mostrar valores en fiat usando una moneda específica en toda la aplicación.",