[5.4] Feature/3157 token detection v2 merge

app/components/Base/RemoteImage/__snapshots__/index.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`RemoteImage should render ipfs sources 1`] = `
 <Image
+  onError={[Function]}
   source={
     Object {
       "uri": "https://cloudflare-ipfs.com/ipfs/QmeE94srcYV9WwJb1p42eM4zncdLUai2N9zmMxxukoEQ23",
@@ -12,6 +13,7 @@ exports[`RemoteImage should render ipfs sources 1`] = `
 
 exports[`RemoteImage should render static sources 1`] = `
 <Image
+  onError={[Function]}
   source={
     Object {
       "uri": "https://s3.amazonaws.com/airswap-token-images/OXT.png",

app/components/Base/RemoteImage/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Image, ViewPropTypes, View, StyleSheet } from 'react-native';
 import FadeIn from 'react-native-fade-in-image';
@@ -9,6 +9,7 @@ import isUrl from 'is-url';
 import ComponentErrorBoundary from '../../UI/ComponentErrorBoundary';
 import useIpfsGateway from '../../hooks/useIpfsGateway';
 import { util } from '@metamask/controllers';
+import Identicon from '../../UI/Identicon';
 
 const createStyles = () =>
   StyleSheet.create({
@@ -18,6 +19,7 @@ const createStyles = () =>
   });
 
 const RemoteImage = (props) => {
+  const [error, setError] = useState(undefined);
   // Avoid using this component with animated SVG
   const source = resolveAssetSource(props.source);
   const isImageUrl = isUrl(props?.source?.uri);
@@ -40,6 +42,12 @@ const RemoteImage = (props) => {
 
   const uri = resolvedIpfsUrl || source.uri;
 
+  const onError = ({ nativeEvent: { error } }) => setError(error);
+
+  if (error && props.address) {
+    return <Identicon address={props.address} customStyle={props.style} />;
+  }
+
   if (
     source &&
     source.uri &&
@@ -71,11 +79,11 @@ const RemoteImage = (props) => {
   if (props.fadeIn) {
     return (
       <FadeIn placeholderStyle={props.placeholderStyle}>
-        <Image {...props} source={{ uri }} />
+        <Image {...props} source={{ uri }} onError={onError} />
       </FadeIn>
     );
   }
-  return <Image {...props} source={{ uri }} />;
+  return <Image {...props} source={{ uri }} onError={onError} />;
 };
 
 RemoteImage.propTypes = {
@@ -103,6 +111,10 @@ RemoteImage.propTypes = {
    * This is set if we know that an image is remote
    */
   isUrl: PropTypes.bool,
+  /**
+   * Token address
+   */
+  address: PropTypes.string,
 };
 
 export default RemoteImage;

app/components/Nav/Main/MainNavigator.js

@@ -16,7 +16,12 @@ import AppInformation from '../../Views/Settings/AppInformation';
 import Contacts from '../../Views/Settings/Contacts';
 import Wallet from '../../Views/Wallet';
 import Asset from '../../Views/Asset';
+import AssetOptions from '../../Views/AssetOptions';
+import AssetDetails from '../../Views/AssetDetails';
 import AddAsset from '../../Views/AddAsset';
+import AssetHideConfirmation from '../../Views/AssetHideConfirmation';
+import DetectedTokens from '../../Views/DetectedTokens';
+import DetectedTokensConfirmation from '../../Views/DetectedTokensConfirmation';
 import Collectible from '../../Views/Collectible';
 import Send from '../../Views/Send';
 import SendTo from '../../Views/SendFlow/SendTo';
@@ -77,18 +82,92 @@ const styles = StyleSheet.create({
     opacity: 0,
   },
 });
-/**
- * Navigator component that wraps
- * the 2 main sections: Browser, Wallet
- */
 
-const WalletTabHome = () => (
+const clearStackNavigatorOptions = {
+  headerShown: false,
+  cardStyle: {
+    backgroundColor: 'transparent',
+    cardStyleInterpolator: () => ({
+      overlayStyle: {
+        opacity: 0,
+      },
+    }),
+  },
+  animationEnabled: false,
+};
+
+const DetectedTokensFlow = () => (
+  <Stack.Navigator
+    mode={'modal'}
+    screenOptions={clearStackNavigatorOptions}
+    initialRouteName={'DetectedTokens'}
+  >
+    <Stack.Screen name={'DetectedTokens'} component={DetectedTokens} />
+    <Stack.Screen
+      name={'DetectedTokensConfirmation'}
+      component={DetectedTokensConfirmation}
+    />
+  </Stack.Navigator>
+);
+
+const WalletModalFlow = () => (
+  <Stack.Navigator mode={'modal'} screenOptions={clearStackNavigatorOptions}>
+    <Stack.Screen
+      name={'Wallet'}
+      component={Wallet}
+      options={{ headerShown: true, animationEnabled: false }}
+    />
+    <Stack.Screen name={'DetectedTokens'} component={DetectedTokensFlow} />
+  </Stack.Navigator>
+);
+
+/* eslint-disable react/prop-types */
+const AssetStackFlow = (props) => (
+  <Stack.Navigator>
+    <Stack.Screen
+      name={'Asset'}
+      component={Asset}
+      initialParams={props.route.params}
+    />
+    <Stack.Screen
+      name={'AssetDetails'}
+      component={AssetDetails}
+      initialParams={{ address: props.route.params?.address }}
+    />
+  </Stack.Navigator>
+);
+
+const AssetModalFlow = (props) => (
+  <Stack.Navigator
+    mode={'modal'}
+    initialRouteName={'AssetStackFlow'}
+    screenOptions={clearStackNavigatorOptions}
+  >
+    <Stack.Screen
+      name={'AssetStackFlow'}
+      component={AssetStackFlow}
+      initialParams={props.route.params}
+    />
+    <Stack.Screen
+      name={'AssetOptions'}
+      component={AssetOptions}
+      initialParams={{ address: props.route.params?.address }}
+    />
+  </Stack.Navigator>
+);
+/* eslint-enable react/prop-types */
+
+const WalletTabStackFlow = () => (
   <Stack.Navigator initialRouteName={'WalletView'}>
-    <Stack.Screen name="WalletView" component={Wallet} />
+    <Stack.Screen
+      name="WalletView"
+      component={WalletModalFlow}
+      options={{ headerShown: false }}
+    />
     <Stack.Screen
       name="Asset"
-      component={Asset}
-      options={Asset.navigationOptions}
+      component={AssetModalFlow}
+      options={{ headerShown: false }}
     />
     <Stack.Screen
       name="AddAsset"
@@ -105,15 +184,15 @@ const WalletTabHome = () => (
       component={RevealPrivateCredential}
       options={RevealPrivateCredential.navigationOptions}
     />
+  </Stack.Navigator>
+);
+
+const WalletTabModalFlow = () => (
+  <Stack.Navigator mode={'modal'} screenOptions={clearStackNavigatorOptions}>
+    <Stack.Screen name={'WalletTabStackFlow'} component={WalletTabStackFlow} />
     <Stack.Screen
-      name="ExperimentalSettings"
-      component={ExperimentalSettings}
-      options={ExperimentalSettings.navigationOptions}
-    />
-    <Stack.Screen
-      name="NetworkSettings"
-      component={NetworkSettings}
-      options={NetworkSettings.navigationOptions}
+      name={'AssetHideConfirmation'}
+      component={AssetHideConfirmation}
     />
   </Stack.Navigator>
 );
@@ -160,7 +239,7 @@ const HomeTabs = () => {
         >
           <Tab.Screen
             name="WalletTabHome"
-            component={WalletTabHome}
+            component={WalletTabModalFlow}
             options={{ tabBarVisible: false }}
           />
           <Tab.Screen
@@ -222,11 +301,7 @@ const SettingsFlow = () => (
       component={NetworksSettings}
       options={NetworksSettings.navigationOptions}
     />
-    <Stack.Screen
-      name="NetworkSettings"
-      component={NetworkSettings}
-      options={NetworkSettings.navigationOptions}
-    />
+    <Stack.Screen name="NetworkSettings" component={NetworkSettings} />
     <Stack.Screen
       name="CompanySettings"
       component={AppInformation}

app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap

@@ -25,32 +25,37 @@ exports[`AddCustomToken should render correctly 1`] = `
     testID="add-asset-cancel-button"
   >
     <View>
-      <WarningMessage
+      <Alert
+        renderIcon={[Function]}
         style={
           Object {
             "marginHorizontal": 20,
             "marginTop": 20,
-            "paddingRight": 0,
           }
         }
-        warningMessage={
-          <React.Fragment>
-            Anyone can create a token, including creating fake versions of existing tokens. Learn more about 
-            <Text
-              onPress={[Function]}
-              style={
-                Object {
-                  "color": "#037DD6",
-                }
-              }
-              suppressHighlighting={true}
-              testID="add-asset-warning-message"
-            >
-              scams and security risks.
-            </Text>
-          </React.Fragment>
-        }
-      />
+        type="Info"
+      >
+        <Text
+          style={
+            Object {
+              "color": "#24272A",
+            }
+          }
+        >
+          Token detection is not available on this network yet. Please import token manually and make sure you trust it. Learn about 
+        </Text>
+        <Text
+          onPress={[Function]}
+          style={
+            Object {
+              "color": "#037DD6",
+            }
+          }
+          suppressHighlighting={true}
+        >
+          token scams and security risks.
+        </Text>
+      </Alert>
       <View
         style={
           Object {
@@ -67,7 +72,7 @@ exports[`AddCustomToken should render correctly 1`] = `
             }
           }
         >
-          Token Address
+          Token address
         </Text>
         <TextInput
           keyboardAppearance="light"
@@ -119,7 +124,7 @@ exports[`AddCustomToken should render correctly 1`] = `
             }
           }
         >
-          Token Symbol
+          Token symbol
         </Text>
         <TextInput
           keyboardAppearance="light"
@@ -170,7 +175,7 @@ exports[`AddCustomToken should render correctly 1`] = `
             }
           }
         >
-          Token of Precision
+          Token decimal
         </Text>
         <TextInput
           keyboardAppearance="light"