[5.3.0][FIX] Prevent crash when funds warning is pressed (#4178)

* fixed * Update snapshots * added binance chain and polygon to the warning * added new translations * added fantom avax and celo, also changed the behaviour on another transactions confirm screens/modals * hexadecimal chain ids fixed * update of Send flow navigation with browser view and faucet navigation at confirm screen * fix go to faucet in sendFlow confirm screen * dev reviews update * fix bug unknown networks on network list * browser view not accessible on the stack navigator of confirmScreen * fix * request changes and use new constants Co-authored-by: gantunesr <[email protected]> Co-authored-by: André Fatia <[email protected]>
MetaMask · May 26, 2022 · be47142 · be47142
1 parent 85a1abc
commit be47142
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 57 deletions.
diff --git a/app/components/UI/ApproveTransactionReview/index.js b/app/components/UI/ApproveTransactionReview/index.js
@@ -46,13 +46,8 @@ import AppConstants from '../../../core/AppConstants';
 import { UINT256_HEX_MAX_VALUE } from '../../../constants/transaction';
 import { WALLET_CONNECT_ORIGIN } from '../../../util/walletconnect';
 import { withNavigation } from '@react-navigation/compat';
-import {
-  getNetworkName,
-  isMainNet,
-  isMainnetByChainId,
-} from '../../../util/networks';
+import { isTestNet, isMainnetByChainId } from '../../../util/networks';
 import scaling from '../../../util/scaling';
-import { capitalize } from '../../../util/general';
 import EditPermission from './EditPermission';
 import Logger from '../../../util/Logger';
 import InfoModal from '../Swaps/components/InfoModal';
@@ -650,14 +645,13 @@ class ApproveTransactionReview extends PureComponent {
       transactionConfirmed,
     } = this.props;
     const styles = this.getStyles();
-    const is_main_net = isMainNet(network);
+    const isTestNetwork = isTestNet(network);
     const originIsDeeplink =
       origin === ORIGIN_DEEPLINK || origin === ORIGIN_QR_CODE;
-    const errorPress = is_main_net ? this.buyEth : this.gotoFaucet;
-    const networkName = capitalize(getNetworkName(network));
-    const errorLinkText = is_main_net
-      ? strings('transaction.buy_more_eth')
-      : strings('transaction.get_ether', { networkName });
+    const errorPress = isTestNetwork ? this.goToFaucet : this.buyEth;
+    const errorLinkText = isTestNetwork
+      ? strings('transaction.go_to_faucet')
+      : strings('transaction.buy_more');
 
     const showFeeMarket =
       !gasEstimateType ||
@@ -792,8 +786,8 @@ class ApproveTransactionReview extends PureComponent {
                         <Text reset style={styles.error}>
                           {gasError}
                         </Text>
-                        {/* only show buy more on mainnet */}
-                        {over && is_main_net && (
+
+                        {over && (
                           <Text reset style={[styles.error, styles.underline]}>
                             {errorLinkText}
                           </Text>
@@ -884,12 +878,11 @@ class ApproveTransactionReview extends PureComponent {
     onConfirm && onConfirm();
   };
 
-  gotoFaucet = () => {
-    const mmFaucetUrl = 'https://faucet.metamask.io/';
+  goToFaucet = () => {
     InteractionManager.runAfterInteractions(() => {
       this.onCancelPress();
       this.props.navigation.navigate(Routes.BROWSER_VIEW, {
-        newTabUrl: mmFaucetUrl,
+        newTabUrl: AppConstants.URLS.MM_FAUCET,
         timestamp: Date.now(),
       });
     });
@@ -927,7 +920,6 @@ class ApproveTransactionReview extends PureComponent {
   render = () => {
     const { viewDetails, editPermissionVisible } = this.state;
     const { isSigningQRObject } = this.props;
-
     return (
       <View>
         {viewDetails

diff --git a/app/components/UI/TransactionReview/TransactionReviewInformation/index.js b/app/components/UI/TransactionReview/TransactionReviewInformation/index.js
@@ -30,12 +30,7 @@ import {
 } from '../../../../util/transactions';
 import Analytics from '../../../../core/Analytics';
 import { ANALYTICS_EVENT_OPTS } from '../../../../util/analytics';
-import {
-  getNetworkName,
-  getNetworkNonce,
-  isMainNet,
-} from '../../../../util/networks';
-import { capitalize } from '../../../../util/general';
+import { getNetworkNonce, isTestNet } from '../../../../util/networks';
 import CustomNonceModal from '../../../UI/CustomNonceModal';
 import { setNonce, setProposedNonce } from '../../../../actions/transaction';
 import TransactionReviewEIP1559 from '../TransactionReviewEIP1559';
@@ -44,6 +39,7 @@ import CustomNonce from '../../../UI/CustomNonce';
 import Logger from '../../../../util/Logger';
 import { ThemeContext, mockTheme } from '../../../../util/theme';
 import Routes from '../../../../constants/navigation/Routes';
+import AppConstants from '../../../../../app/core/AppConstants';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -500,12 +496,11 @@ class TransactionReviewInformation extends PureComponent {
     onCancelPress && onCancelPress();
   };
 
-  gotoFaucet = () => {
-    const mmFaucetUrl = 'https://faucet.metamask.io/';
+  goToFaucet = () => {
     InteractionManager.runAfterInteractions(() => {
       this.onCancelPress();
       this.props.navigation.navigate(Routes.BROWSER_VIEW, {
-        newTabUrl: mmFaucetUrl,
+        newTabUrl: AppConstants.URLS.MM_FAUCET,
         timestamp: Date.now(),
       });
     });
@@ -614,13 +609,12 @@ class TransactionReviewInformation extends PureComponent {
     const colors = this.context.colors || mockTheme.colors;
     const styles = createStyles(colors);
 
-    const is_main_net = isMainNet(network);
+    const isTestNetwork = isTestNet(network);
 
-    const errorPress = is_main_net ? this.buyEth : this.gotoFaucet;
-    const networkName = capitalize(getNetworkName(network));
-    const errorLinkText = is_main_net
-      ? strings('transaction.buy_more_eth')
-      : strings('transaction.get_ether', { networkName });
+    const errorPress = isTestNetwork ? this.goToFaucet : this.buyEth;
+    const errorLinkText = isTestNetwork
+      ? strings('transaction.go_to_faucet')
+      : strings('transaction.buy_more');
 
     const showFeeMarket =
       !gasEstimateType ||
@@ -652,8 +646,7 @@ class TransactionReviewInformation extends PureComponent {
           <View style={styles.errorWrapper}>
             <TouchableOpacity onPress={errorPress}>
               <Text style={styles.error}>{error}</Text>
-              {/* only show buy more on mainnet */}
-              {over && is_main_net && (
+              {over && (
                 <Text style={[styles.error, styles.underline]}>
                   {errorLinkText}
                 </Text>

diff --git a/app/components/UI/TransactionReview/__snapshots__/index.test.tsx.snap b/app/components/UI/TransactionReview/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TransactionReview should render correctly 1`] = `
-<QRHardwareAwareness
+<withNavigation(QRHardwareAwareness)
   accounts={Array []}
   browser={
     Object {

diff --git a/app/components/UI/TransactionReview/index.js b/app/components/UI/TransactionReview/index.js
@@ -39,6 +39,7 @@ import { getTokenList } from '../../../reducers/tokens';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import withQRHardwareAwareness from '../QRHardware/withQRHardwareAwareness';
 import QRSigningDetails from '../QRHardware/QRSigningDetails';
+import { withNavigation } from '@react-navigation/compat';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -518,5 +519,5 @@ const mapStateToProps = (state) => ({
 TransactionReview.contextType = ThemeContext;
 
 export default connect(mapStateToProps)(
-  withQRHardwareAwareness(TransactionReview),
+  withNavigation(withQRHardwareAwareness(TransactionReview)),
 );
diff --git a/app/components/Views/SendFlow/Confirm/index.js b/app/components/Views/SendFlow/Confirm/index.js
@@ -58,14 +58,9 @@ import IonicIcon from 'react-native-vector-icons/Ionicons';
 import TransactionTypes from '../../../../core/TransactionTypes';
 import Analytics from '../../../../core/Analytics';
 import { ANALYTICS_EVENT_OPTS } from '../../../../util/analytics';
+import { shallowEqual, renderShortText } from '../../../../util/general';
 import {
-  capitalize,
-  shallowEqual,
-  renderShortText,
-} from '../../../../util/general';
-import {
-  isMainNet,
-  getNetworkName,
+  isTestNet,
   getNetworkNonce,
   isMainnetByChainId,
 } from '../../../../util/networks';
@@ -1306,11 +1301,10 @@ class Confirm extends PureComponent {
     });
   };
 
-  gotoFaucet = () => {
-    const mmFaucetUrl = 'https://faucet.metamask.io/';
+  goToFaucet = () => {
     InteractionManager.runAfterInteractions(() => {
       this.props.navigation.navigate(Routes.BROWSER_VIEW, {
-        newTabUrl: mmFaucetUrl,
+        newTabUrl: AppConstants.URLS.MM_FAUCET,
         timestamp: Date.now(),
       });
     });
@@ -1425,13 +1419,11 @@ class Confirm extends PureComponent {
         <AdressToComponent />
       );
 
-    const is_main_net = isMainNet(network);
-    const errorPress = is_main_net ? this.buyEth : this.gotoFaucet;
-    const networkName = capitalize(getNetworkName(network));
-    const errorLinkText = is_main_net
-      ? strings('transaction.buy_more_eth')
-      : strings('transaction.get_ether', { networkName });
-
+    const isTestNetwork = isTestNet(network);
+    const errorPress = isTestNetwork ? this.goToFaucet : this.buyEth;
+    const errorLinkText = isTestNetwork
+      ? strings('transaction.go_to_faucet')
+      : strings('transaction.buy_more');
     const { EIP1559TransactionData } = this.state;
 
     return (
@@ -1554,12 +1546,11 @@ class Confirm extends PureComponent {
             <View style={styles.errorWrapper}>
               <TouchableOpacity onPress={errorPress}>
                 <Text style={styles.error}>{errorMessage}</Text>
-                {/* only show buy more on mainnet */}
-                {over && is_main_net && (
+                {over ? (
                   <Text style={[styles.error, styles.underline]}>
                     {errorLinkText}
                   </Text>
-                )}
+                ) : null}
               </TouchableOpacity>
             </View>
           )}

diff --git a/app/core/AppConstants.js b/app/core/AppConstants.js
@@ -85,6 +85,7 @@ export default {
     NFT: 'https://metamask.zendesk.com/hc/en-us/articles/360058238591-NFT-tokens-in-MetaMask-wallet',
     SECURITY:
       'https://metamask.zendesk.com/hc/en-us/articles/360015489591-Basic-Safety-and-Security-Tips-for-MetaMask',
+    MM_FAUCET: 'https://faucet.metamask.io/',
   },
   ERRORS: {
     INFURA_BLOCKED_MESSAGE:

diff --git a/app/util/networks/index.js b/app/util/networks/index.js
@@ -101,6 +101,17 @@ export const isMainnetByChainId = (chainId) =>
 export const getNetworkName = (id) =>
   NetworkListKeys.find((key) => NetworkList[key].networkId === Number(id));
 
+export const isTestNet = (networkId) => {
+  const networkName = getNetworkName(networkId);
+
+  return (
+    networkName === ROPSTEN ||
+    networkName === GOERLI ||
+    networkName === KOVAN ||
+    networkName === RINKEBY
+  );
+};
+
 export function getNetworkTypeById(id) {
   if (!id) {
     throw new Error(NETWORK_ERROR_MISSING_NETWORK_ID);

diff --git a/locales/languages/en.json b/locales/languages/en.json
@@ -737,6 +737,8 @@
     "insufficient": "Insufficient funds",
     "insufficient_amount": "You need {{amount}} more {{tokenSymbol}} to complete this transaction.",
     "buy_more_eth": "Buy more ETH",
+    "buy_more": "Buy more",
+    "go_to_faucet": "Go to faucet",
     "get_ether": "Get Ether for the {{networkName}} network.",
     "insufficient_tokens": "Insufficient {{token}}",
     "invalid_address": "Invalid address",