Check infura availability (#2520)

* addcheck * component * componentUI * checkProviderStatus * log * finalstyle * locales * tryagain * snapshots * checkInfuraAvailability * updatecopy * handleinfura * tests * CONNECTIVITY_ISSUESlink * copy * copy * translations * e * check * test
MetaMask · Apr 14, 2021 · 76a6c40 · 76a6c40
1 parent 169640b
commit 76a6c40
Show file tree

Hide file tree

Showing 21 changed files with 267 additions and 134 deletions.
diff --git a/app/actions/infuraAvailability/index.js b/app/actions/infuraAvailability/index.js
@@ -0,0 +1,13 @@
+import { INFURA_AVAILABILITY_BLOCKED, INFURA_AVAILABILITY_NOT_BLOCKED } from '../../reducers/infuraAvailability';
+
+export function setInfuraAvailabilityBlocked() {
+	return {
+		type: INFURA_AVAILABILITY_BLOCKED
+	};
+}
+
+export function setInfuraAvailabilityNotBlocked() {
+	return {
+		type: INFURA_AVAILABILITY_NOT_BLOCKED
+	};
+}
diff --git a/app/components/Nav/Main/index.js b/app/components/Nav/Main/index.js
@@ -63,6 +63,7 @@ import SwapsLiveness from '../../UI/Swaps/SwapsLiveness';
 import Analytics from '../../../core/Analytics';
 import { ANALYTICS_EVENT_OPTS } from '../../../util/analytics';
 import BigNumber from 'bignumber.js';
+import { setInfuraAvailabilityBlocked, setInfuraAvailabilityNotBlocked } from '../../../actions/infuraAvailability';
 
 const styles = StyleSheet.create({
 	flex: {
@@ -79,9 +80,8 @@ const styles = StyleSheet.create({
 		margin: 0
 	}
 });
-
 const Main = props => {
-	const [connected, setConnected] = useState(false);
+	const [connected, setConnected] = useState(true);
 	const [forceReload, setForceReload] = useState(false);
 	const [signMessage, setSignMessage] = useState(false);
 	const [signMessageParams, setSignMessageParams] = useState({ data: '' });
@@ -138,14 +138,37 @@ const Main = props => {
 	const connectionChangeHandler = useCallback(
 		state => {
 			// Show the modal once the status changes to offline
-			if (connected && !state.isConnected) {
+			if (connected && state && !state.isConnected) {
 				props.navigation.navigate('OfflineModeView');
+				setConnected(state.isConnected);
 			}
-			setConnected(state.isConnected);
 		},
 		[connected, props.navigation]
 	);
 
+	const checkInfuraAvailability = useCallback(async () => {
+		if (props.providerType !== 'rpc') {
+			try {
+				const { TransactionController } = Engine.context;
+				await util.query(TransactionController.ethQuery, 'blockNumber', []);
+				props.setInfuraAvailabilityNotBlocked();
+			} catch (e) {
+				if (e.message === AppConstants.ERRORS.INFURA_BLOCKED_MESSAGE) {
+					props.navigation.navigate('OfflineModeView');
+					props.setInfuraAvailabilityBlocked();
+				}
+			}
+		} else {
+			props.setInfuraAvailabilityNotBlocked();
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		props.navigation,
+		props.providerType,
+		props.setInfuraAvailabilityBlocked,
+		props.setInfuraAvailabilityNotBlocked
+	]);
+
 	const initializeWalletConnect = () => {
 		WalletConnect.hub.on('walletconnectSessionRequest', peerInfo => {
 			setWalletConnectRequest(true);
@@ -592,7 +615,7 @@ const Main = props => {
 				removeNotificationById: props.removeNotificationById
 			});
 			pollForIncomingTransactions();
-
+			checkInfuraAvailability();
 			removeConnectionStatusListener.current = NetInfo.addEventListener(connectionChangeHandler);
 		}, 1000);
 
@@ -709,7 +732,19 @@ Main.propTypes = {
 	/**
 	 * Selected address
 	 */
-	selectedAddress: PropTypes.string
+	selectedAddress: PropTypes.string,
+	/**
+	 * Network provider type
+	 */
+	providerType: PropTypes.string,
+	/**
+	 * Dispatch infura availability blocked
+	 */
+	setInfuraAvailabilityBlocked: PropTypes.func,
+	/**
+	 * Dispatch infura availability not blocked
+	 */
+	setInfuraAvailabilityNotBlocked: PropTypes.func
 };
 
 const mapStateToProps = state => ({
@@ -720,7 +755,8 @@ const mapStateToProps = state => ({
 	isPaymentRequest: state.transaction.paymentRequest,
 	dappTransactionModalVisible: state.modals.dappTransactionModalVisible,
 	approveModalVisible: state.modals.approveModalVisible,
-	swapsTransactions: state.engine.backgroundState.TransactionController.swapsTransactions || {}
+	swapsTransactions: state.engine.backgroundState.TransactionController.swapsTransactions || {},
+	providerType: state.engine.backgroundState.NetworkController.provider.type
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -731,7 +767,9 @@ const mapDispatchToProps = dispatch => ({
 	hideCurrentNotification: () => dispatch(hideCurrentNotification()),
 	removeNotificationById: id => dispatch(removeNotificationById(id)),
 	toggleDappTransactionModal: (show = null) => dispatch(toggleDappTransactionModal(show)),
-	toggleApproveModal: show => dispatch(toggleApproveModal(show))
+	toggleApproveModal: show => dispatch(toggleApproveModal(show)),
+	setInfuraAvailabilityBlocked: () => dispatch(setInfuraAvailabilityBlocked()),
+	setInfuraAvailabilityNotBlocked: () => dispatch(setInfuraAvailabilityNotBlocked())
 });
 
 export default connect(

diff --git a/app/components/Views/OfflineMode/__snapshots__/index.test.js.snap b/app/components/Views/OfflineMode/__snapshots__/index.test.js.snap
@@ -1,82 +1,109 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OfflineMode should render correctly 1`] = `
-<View
+<ForwardRef(SafeAreaView)
   style={
     Object {
-      "backgroundColor": "#FFFFFF",
       "flex": 1,
     }
   }
 >
-  <ForwardRef(SafeAreaView)
+  <Image
+    source={
+      Object {
+        "testUri": "../../../app/images/astronaut.png",
+      }
+    }
+    style={
+      Object {
+        "alignSelf": "center",
+        "height": 200,
+        "marginTop": 60,
+        "width": 200,
+      }
+    }
+  />
+  <View
     style={
       Object {
         "flex": 1,
+        "justifyContent": "center",
+        "marginHorizontal": 18,
+        "marginVertical": 30,
       }
     }
   >
-    <Image
-      source={
-        Object {
-          "testUri": "../../../app/images/astronaut.png",
-        }
-      }
-      style={
-        Object {
-          "alignSelf": "center",
-          "height": 200,
-          "justifyContent": "center",
-          "marginBottom": 10,
-          "marginTop": 80,
-          "width": 200,
-        }
-      }
-    />
     <View
       style={
         Object {
-          "alignSelf": "center",
-          "height": 125,
-          "justifyContent": "center",
-          "width": 300,
+          "flex": 1,
         }
       }
     >
       <Text
+        black={false}
+        blue={false}
+        bold={true}
+        centered={true}
+        disclaimer={false}
+        green={false}
+        link={false}
+        modal={false}
+        primary={false}
+        reset={false}
+        right={false}
+        small={false}
+        strikethrough={false}
         style={
           Object {
             "color": "#000000",
-            "fontSize": 17,
-            "justifyContent": "center",
+            "fontFamily": "EuclidCircularB-Bold",
+            "fontSize": 18,
+            "fontWeight": "600",
             "marginBottom": 10,
-            "textAlign": "center",
           }
         }
+        underline={false}
+        upper={false}
       >
         You're offline
       </Text>
       <Text
+        black={false}
+        blue={false}
+        bold={false}
+        centered={true}
+        disclaimer={false}
+        green={false}
+        link={false}
+        modal={false}
+        primary={false}
+        reset={false}
+        right={false}
+        small={false}
+        strikethrough={false}
         style={
           Object {
             "color": "#000000",
-            "flex": 1,
+            "fontFamily": "EuclidCircularB-Regular",
             "fontSize": 12,
-            "justifyContent": "center",
-            "textAlign": "center",
+            "fontWeight": "400",
           }
         }
+        underline={false}
+        upper={false}
       >
-        Check your internet connection and try again
+        Unable to connect to the blockchain host.
       </Text>
-      <StyledButton
-        containerStyle={
-          Object {
-            "alignSelf": "center",
-            "height": 50,
-            "width": 150,
-          }
+    </View>
+    <View
+      style={
+        Object {
+          "marginHorizontal": 18,
         }
+      }
+    >
+      <StyledButton
         disabledContainerStyle={
           Object {
             "opacity": 0.6,
@@ -88,11 +115,11 @@ exports[`OfflineMode should render correctly 1`] = `
             "opacity": 0.6,
           }
         }
-        type="normal"
+        type="blue"
       >
         Try again
       </StyledButton>
     </View>
-  </ForwardRef(SafeAreaView)>
-</View>
+  </View>
+</ForwardRef(SafeAreaView)>
 `;