Feature/2816 token detection mvp (#2901)

* Update AssetDetectionController to use TokenDetectionController

* Update redux with token list controller data

* Replace contract map with token list from TokenListController. Add typescript support

* - Update to use iconUrl from token list
- Create token list selectors
- Minor refactor into typescript
- Update copies

* Hook up preferences controller to handle static token list

* Use controllers v12.1.0. Set up last bit for token list controller constructor

* Remove controllers tgz

* Add comments to token reducers

* Remove all contract metadata imports

* Upgrade nodeify library to fix pbkdf2 library crasher

* Remove comment and lock library version

* Remove unused field on engine reducer

* Add missing blue100

* Change Alert to use enums. Add jest types. Remove comments. Write test for token util.

* Handle undefined passed to token util

* Update enzyme to support jest diving redux connected components

* Fix all unit tests that uses Redux. Update snapshots.

* Update app to support latest controllers.

* Provide TokensController with provider on initialization.

* Clean up code to display asset logos

* Create static asset generation script. Generate on build + watch.

* Update static logos

* Properly format static logos file

* Update controller package

* Mock static-logos.js for testing

* ignored tokens updates

* add migration

* cleanup

* Upgrade controller version

* Use latest controller version that includes abort controller polyfill

* Use TokenListController types

* Remove unused EthInput

* Remove commented code in QuotesView.js

* No need to set address on tokenlist array

* Update controller version

* Remove TransactionDirection unused file. ESLint ignore static assets file

* Refactor wallet to tsx

* Add missing deps array

* Add missing tab label

* Don't lint generated static logos file. Fix crasher for ipfs logos.

* Fix unit test

* Update title and cta label on tokens and nft pages

* Fix unit test

* Fix unit test

* Rename asset list extension

* Showing icons for payment request flow

* Fix showing icon in payments. Fix tests

Co-authored-by: Alex <adonesky@gmail.com>

app/components/Base/Alert.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback, ReactNode } from 'react';
+import {
+	View,
+	StyleSheet,
+	TouchableOpacity,
+	ViewStyle,
+	StyleProp,
+	TouchableOpacityProps,
+	ViewProps,
+	TextStyle
+} from 'react-native';
+import { colors } from '../../styles/common';
+import CustomText from './Text';
+// TODO: Convert into typescript and correctly type optionals
+const Text = CustomText as any;
+
+export enum AlertType {
+	Info = 'Info',
+	Warning = 'Warning',
+	Error = 'Error'
+}
+
+type Props = {
+	type: AlertType;
+	style?: StyleProp<ViewStyle>;
+	small?: boolean;
+	renderIcon?: () => ReactNode;
+	onPress?: () => void;
+	children?: ReactNode;
+};
+
+const Alert = ({ type = AlertType.Info, small, renderIcon, style, onPress, children, ...props }: Props) => {
+	const Wrapper: React.ComponentClass<TouchableOpacityProps | ViewProps> = onPress ? TouchableOpacity : View;
+
+	const getStyles: (type: AlertType) => [StyleProp<ViewStyle>, StyleProp<TextStyle>] = useCallback(type => {
+		switch (type) {
+			case AlertType.Warning: {
+				return [styles.warning, { ...styles.textWarning, ...styles.baseTextStyle }];
+			}
+			case AlertType.Error: {
+				return [styles.error, { ...styles.textError, ...styles.baseTextStyle }];
+			}
+			case AlertType.Info:
+			default: {
+				return [styles.info, { ...styles.textInfo, ...styles.baseTextStyle }];
+			}
+		}
+	}, []);
+
+	const [wrapperStyle, textStyle] = getStyles(type);
+
+	return (
+		<Wrapper style={[styles.base, small && styles.baseSmall, wrapperStyle, style]} onPress={onPress} {...props}>
+			{renderIcon && <View style={styles.iconWrapper}>{renderIcon()}</View>}
+			{typeof children === 'function' ? (
+				children(textStyle)
+			) : (
+				<Text small={small} style={[textStyle, !!renderIcon && styles.textIconStyle]}>
+					{children}
+				</Text>
+			)}
+		</Wrapper>
+	);
+};
+
+const styles = StyleSheet.create({
+	base: {
+		paddingHorizontal: 12,
+		paddingVertical: 8,
+		borderWidth: 1,
+		borderRadius: 8,
+		flexDirection: 'row'
+	},
+	baseSmall: {
+		paddingVertical: 8
+	},
+	info: {
+		backgroundColor: colors.blue100,
+		borderColor: colors.blue
+	},
+	warning: {
+		backgroundColor: colors.yellow100,
+		borderColor: colors.yellowWarningBorder
+	},
+	error: {
+		backgroundColor: colors.red000,
+		borderColor: colors.red
+	},
+	baseTextStyle: { fontSize: 14, flex: 1, lineHeight: 17 },
+	textInfo: { color: colors.blue },
+	textWarning: { color: colors.black },
+	textError: { color: colors.red },
+	textIconStyle: { marginRight: 12 },
+	iconWrapper: {
+		alignItems: 'center'
+	}
+});
+
+export default Alert;

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

@@ -8,6 +8,7 @@ exports[`RemoteImage should render correctly 1`] = `
     style={Object {}}
   >
     <SvgCssUri
+      fill="black"
       height="100%"
       source={
         Object {

app/components/Base/RemoteImage/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, Image, ViewPropTypes } from 'react-native';
+import { Image, ViewPropTypes, View } from 'react-native';
 import FadeIn from 'react-native-fade-in-image';
 // eslint-disable-next-line import/default
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
@@ -21,10 +21,11 @@ const RemoteImage = (props) => {
 				style.height = source.height;
 			}
 		}
+
 		return (
 			<ComponentErrorBoundary onError={props.onError} componentLabel="RemoteImage-SVG">
 				<View style={style}>
-					<SvgCssUri {...props} uri={source.uri} width={'100%'} height={'100%'} />
+					<SvgCssUri {...props} uri={source.uri} width={'100%'} height={'100%'} fill={'black'} />
 				</View>
 			</ComponentErrorBoundary>
 		);

app/components/Nav/Main/MainNavigator.js

@@ -72,7 +72,7 @@ const styles = StyleSheet.create({
 
 const WalletTabHome = () => (
 	<Stack.Navigator initialRouteName={'WalletView'}>
-		<Stack.Screen name="WalletView" component={Wallet} options={Wallet.navigationOptions} />
+		<Stack.Screen name="WalletView" component={Wallet} />
 		<Stack.Screen name="Asset" component={Asset} options={Asset.navigationOptions} />
 		<Stack.Screen name="AddAsset" component={AddAsset} options={AddAsset.navigationOptions} />
 

app/components/Nav/Main/index.js

@@ -11,7 +11,7 @@ import {
 } from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import GlobalAlert from '../../UI/GlobalAlert';
 import BackgroundTimer from 'react-native-background-timer';
 import Approval from '../../Views/Approval';
@@ -39,7 +39,6 @@ import {
 } from '../../../util/transactions';
 import { BN } from 'ethereumjs-util';
 import Logger from '../../../util/Logger';
-import contractMap from '@metamask/contract-metadata';
 import MessageSign from '../../UI/MessageSign';
 import Approve from '../../Views/ApproveView/Approve';
 import TransactionTypes from '../../../core/TransactionTypes';
@@ -65,6 +64,7 @@ import Analytics from '../../../core/Analytics';
 import { ANALYTICS_EVENT_OPTS } from '../../../util/analytics';
 import BigNumber from 'bignumber.js';
 import { setInfuraAvailabilityBlocked, setInfuraAvailabilityNotBlocked } from '../../../actions/infuraAvailability';
+import { getTokenList } from '../../../reducers/tokens';
 import { toLowerCaseEquals } from '../../../util/general';
 
 const styles = StyleSheet.create({
@@ -93,7 +93,6 @@ const Main = (props) => {
 	const [showExpandedMessage, setShowExpandedMessage] = useState(false);
 	const [currentPageTitle, setCurrentPageTitle] = useState('');
 	const [currentPageUrl, setCurrentPageUrl] = useState('');
-
 	const [showRemindLaterModal, setShowRemindLaterModal] = useState(false);
 	const [skipCheckbox, setSkipCheckbox] = useState(false);
 
@@ -102,6 +101,8 @@ const Main = (props) => {
 	const lockManager = useRef();
 	const removeConnectionStatusListener = useRef();
 
+	const tokenList = useSelector(getTokenList);
+
 	const setTransactionObject = props.setTransactionObject;
 	const toggleApproveModal = props.toggleApproveModal;
 	const toggleDappTransactionModal = props.toggleDappTransactionModal;
@@ -342,10 +343,7 @@ const Main = (props) => {
 					let asset = props.tokens.find(({ address }) => toLowerCaseEquals(address, to));
 					if (!asset) {
 						// try to lookup contract by lowercased address `to`
-						const contractMapKey = Object.keys(contractMap).find((key) => toLowerCaseEquals(key, to));
-						if (contractMapKey) {
-							asset = contractMap[contractMapKey];
-						}
+						asset = tokenList[to];
 
 						if (!asset) {
 							try {
@@ -403,6 +401,7 @@ const Main = (props) => {
 			toggleApproveModal,
 			toggleDappTransactionModal,
 			autoSign,
+			tokenList,
 		]
 	);
 

app/components/UI/AccountApproval/index.test.tsx

@@ -10,22 +10,22 @@ const initialState = {
 	engine: {
 		backgroundState: {
 			AccountTrackerController: {
-				accounts: { '0x2': { balance: '0' } }
+				accounts: { '0x2': { balance: '0' } },
 			},
 			NetworkController: {
 				provider: {
-					type: ROPSTEN
-				}
+					type: ROPSTEN,
+				},
 			},
 			TokensController: {
-				tokens: []
+				tokens: [],
 			},
 			PreferencesController: {
 				selectedAddress: '0xe7E125654064EEa56229f273dA586F10DF96B0a1',
-				identities: { '0xe7E125654064EEa56229f273dA586F10DF96B0a1': { name: 'Account 1' } }
-			}
-		}
-	}
+				identities: { '0xe7E125654064EEa56229f273dA586F10DF96B0a1': { name: 'Account 1' } },
+			},
+		},
+	},
 };
 const store = mockStore(initialState);
 

app/components/UI/AccountInfoCard/index.test.tsx

@@ -11,28 +11,28 @@ const initialState = {
 			AccountTrackerController: {
 				accounts: {
 					'0x0': {
-						balance: 200
-					}
-				}
+						balance: 200,
+					},
+				},
 			},
 			PreferencesController: {
 				selectedAddress: '0x0',
 				identities: {
 					address: '0x0',
-					name: 'Account 1'
-				}
+					name: 'Account 1',
+				},
 			},
 			CurrencyRateController: {
 				conversionRate: 10,
-				currentCurrency: 'inr'
+				currentCurrency: 'inr',
 			},
 			NetworkController: {
 				provider: {
-					ticker: 'eth'
-				}
-			}
-		}
-	}
+					ticker: 'eth',
+				},
+			},
+		},
+	},
 };
 const store = mockStore(initialState);
 

app/components/UI/AccountList/index.test.tsx

@@ -11,11 +11,11 @@ const store = mockStore({
 		backgroundState: {
 			AccountTrackerController: {
 				accounts: {
-					[address]: { name: 'account 1', address, balance: 0 }
-				}
-			}
-		}
-	}
+					[address]: { name: 'account 1', address, balance: 0 },
+				},
+			},
+		},
+	},
 });
 
 describe('Accounts', () => {

app/components/UI/AccountRightButton/index.test.tsx

@@ -9,10 +9,10 @@ const store = mockStore({
 	engine: {
 		backgroundState: {
 			PreferencesController: {
-				selectedAddress: '0xe7E125654064EEa56229f273dA586F10DF96B0a1'
-			}
-		}
-	}
+				selectedAddress: '0xe7E125654064EEa56229f273dA586F10DF96B0a1',
+			},
+		},
+	},
 });
 
 describe('AccountRightButton', () => {