[HOTFIX] 4.0.1 - RC2 (#3658)

* Fix gte error (#3654)

* Fix gte error

* Fix

* Add hextoBN

* Cherry pick gte fix

* Update build numbers

* Update build number to 812

* [Hotfix] /4.0.1 NFT improvement (#3657)

* created new shared collectibel detection info modal added to NFT wallet view

* added nft info modal to import nft view

* hooked up settings to engine state

* added boolean for dismiss state

* added action and reducer for nft dismiss state

* added snap to toggles

* updated nft modal styles

* added comments to props

* added user profile property methods

* bumped version for test release analytics

* yarn lint fix

* updated state fetch

* Switch from `develop` to `main` (#3508)

* point build badges to main

* point video_source_uri to main

* point architecture.svg to main

* point translation subtitle uris to main

* [FIX] Update warning image (#3649)

* Revert - use empty string quotes for anon id (#3144) (#3561)

* fix: Dismiss keyboard correctly (#3644)

* [FIX] Update warning image (#3649)

* Revert - use empty string quotes for anon id (#3144) (#3561)

* PR feedback

* PR feedback

* Refactor RPC Methods logic (Fix network change) (#3341)

* Refactor RPC Methods

* Migrate to typescript

* Improve selectedAddress code

* Implement Swappable proxy for provider

* Fix url on rpc methods

* Fix app version code

* Temporarily fix Typescript issues on RPCMethodMiddleware

* Remove Beta

Co-authored-by: Cal Leung <[email protected]>

* chore: Add `ts` and `tsx` extension to linting scripts (#3479)

* Bump version name

* merge issue resolution

* update unit testing

* added logic to display only on mainnet

* added migration to make detection false

* PR feedback

* test case update

* Revert "Refactor RPC Methods logic (Fix network change) (#3341)"

This reverts commit 375f742.

* revert fix for Alert

* readme revert

* SRP video link revert

* revert SRP video subtitle links

* fix for modal display in token view and animate security settings navigation

* fix onboarding flow + request payments

* remove contract logo filter in collectibleContractsSelector

Co-authored-by: ricky <[email protected]>
Co-authored-by: Gustavo Antunes <[email protected]>
Co-authored-by: Andre Pimenta <[email protected]>
Co-authored-by: Cal Leung <[email protected]>
Co-authored-by: Pedro Pablo Aste Kompen <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Curtis <[email protected]>

* version bump and migration patch (#3660)

* Fix/advisory simple get (#3662)

* version bump and migration patch

* simple get resolver update for security advisory

Co-authored-by: Gustavo Antunes <[email protected]>
Co-authored-by: Cal Leung <[email protected]>
Co-authored-by: ricky <[email protected]>
Co-authored-by: Andre Pimenta <[email protected]>
Co-authored-by: Pedro Pablo Aste Kompen <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Curtis <[email protected]>

Author: 8 people

android/app/build.gradle

@@ -160,8 +160,8 @@ android {
 		applicationId "io.metamask"
 		minSdkVersion rootProject.ext.minSdkVersion
 		targetSdkVersion rootProject.ext.targetSdkVersion
-		versionCode 810
-		versionName "4.0.0"
+		versionCode 814
+		versionName "4.0.1"
 		multiDexEnabled true
 		testBuildType System.getProperty('testBuildType', 'debug')
 		missingDimensionStrategy "minReactNative", "minReactNative46"

android/app/src/main/java/io/metamask/nativeModules/RCTAnalytics.java

@@ -76,6 +76,13 @@ public void peopleIdentify() {
 		this.mixpanel.getPeople().identify(distinctId);
 	}
 
+	@ReactMethod
+	public void setUserProfileProperty(String propertyName, String propertyValue) {
+		String distinctId = this.mixpanel.getDistinctId();
+		this.mixpanel.getPeople().identify(distinctId);
+		this.mixpanel.getPeople().set(propertyName, propertyValue);
+	}
+
 	@ReactMethod
 	public void optIn(boolean val) {
 		if(val){

app/actions/user/index.js

@@ -65,6 +65,12 @@ export function setGasEducationCarouselSeen() {
 	};
 }
 
+export function setNftDetectionDismissed() {
+	return {
+		type: 'SET_NFT_DETECTION_DISMISSED',
+	};
+}
+
 export function logIn() {
 	return {
 		type: 'LOGIN',

app/components/Base/Alert.tsx

@@ -9,6 +9,7 @@ import {
 	ViewProps,
 	TextStyle,
 } from 'react-native';
+import IonicIcon from 'react-native-vector-icons/Ionicons';
 import { colors } from '../../styles/common';
 import CustomText from './Text';
 // TODO: Convert into typescript and correctly type optionals
@@ -27,6 +28,7 @@ interface Props {
 	small?: boolean;
 	renderIcon?: () => ReactNode;
 	onPress?: () => void;
+	onDismiss?: () => void;
 	children?: ReactNode;
 }
 
@@ -53,6 +55,9 @@ const styles = StyleSheet.create({
 		backgroundColor: colors.red000,
 		borderColor: colors.red,
 	},
+	closeIcon: {
+		color: colors.black,
+	},
 	baseTextStyle: { fontSize: 14, flex: 1, lineHeight: 17 },
 	textInfo: { color: colors.blue },
 	textWarning: { color: colors.black },
@@ -78,7 +83,7 @@ const getAlertStyles: (alertType: AlertType) => [StyleProp<ViewStyle>, StyleProp
 	}
 };
 
-const Alert = ({ type = AlertType.Info, small, renderIcon, style, onPress, children, ...props }: Props) => {
+const Alert = ({ type = AlertType.Info, small, renderIcon, style, onPress, onDismiss, children, ...props }: Props) => {
 	const Wrapper: React.ComponentClass<TouchableOpacityProps | ViewProps> = onPress ? TouchableOpacity : View;
 
 	const [wrapperStyle, textStyle] = getAlertStyles(type);
@@ -93,6 +98,13 @@ const Alert = ({ type = AlertType.Info, small, renderIcon, style, onPress, child
 					{children}
 				</Text>
 			)}
+			{onDismiss && (
+				<View style={styles.iconWrapper}>
+					<TouchableOpacity onPress={onDismiss} hitSlop={{ top: 20, left: 20, right: 20, bottom: 20 }}>
+						<IonicIcon name="ios-close" style={styles.closeIcon} size={30} />
+					</TouchableOpacity>
+				</View>
+			)}
 		</Wrapper>
 	);
 };

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

@@ -26,7 +26,9 @@ exports[`CollectibleContracts should render correctly 1`] = `
     ]
   }
   favoriteCollectibles={Array []}
+  nftDetectionDismissed={true}
   removeFavoriteCollectible={[Function]}
   selectedAddress="0x1"
+  setNftDetectionDismissed={[Function]}
 />
 `;

app/components/UI/CollectibleContracts/index.js

@@ -14,10 +14,13 @@ import {
 	favoritesCollectiblesSelector,
 } from '../../../reducers/collectibles';
 import { removeFavoriteCollectible } from '../../../actions/collectibles';
+import { setNftDetectionDismissed } from '../../../actions/user';
 import Text from '../../Base/Text';
 import AppConstants from '../../../core/AppConstants';
 import { toLowerCaseEquals } from '../../../util/general';
 import { compareTokenIds } from '../../../util/tokens';
+import CollectibleDetectionModal from '../CollectibleDetectionModal';
+import { isMainNet } from '../../../util/networks';
 
 const styles = StyleSheet.create({
 	wrapper: {
@@ -29,7 +32,7 @@ const styles = StyleSheet.create({
 	emptyView: {
 		justifyContent: 'center',
 		alignItems: 'center',
-		marginTop: 40,
+		marginTop: 10,
 	},
 	add: {
 		flexDirection: 'row',
@@ -56,6 +59,7 @@ const styles = StyleSheet.create({
 	emptyImageContainer: {
 		width: 76,
 		height: 76,
+		marginTop: 30,
 		marginBottom: 12,
 	},
 	emptyTitleText: {
@@ -81,6 +85,9 @@ const CollectibleContracts = ({
 	collectibles,
 	favoriteCollectibles,
 	removeFavoriteCollectible,
+	useCollectibleDetection,
+	setNftDetectionDismissed,
+	nftDetectionDismissed,
 }) => {
 	const onItemPress = useCallback(
 		(collectible, contractName) => {
@@ -189,6 +196,10 @@ const CollectibleContracts = ({
 	const goToLearnMore = () =>
 		navigation.navigate('Webview', { screen: 'SimpleWebview', params: { url: AppConstants.URLS.NFT } });
 
+	const dismissNftInfo = async () => {
+		setNftDetectionDismissed(true);
+	};
+
 	const renderEmpty = () => (
 		<View style={styles.emptyView}>
 			<View style={styles.emptyContainer}>
@@ -209,6 +220,11 @@ const CollectibleContracts = ({
 
 	return (
 		<View style={styles.wrapper} testID={'collectible-contracts'}>
+			{isMainNet(chainId) && !nftDetectionDismissed && !useCollectibleDetection && (
+				<View style={styles.emptyView}>
+					<CollectibleDetectionModal onDismiss={dismissNftInfo} navigation={navigation} />
+				</View>
+			)}
 			{collectibleContracts.length > 0 ? renderList() : renderEmpty()}
 			{renderFooter()}
 		</View>
@@ -245,11 +261,25 @@ CollectibleContracts.propTypes = {
 	 * Dispatch remove collectible from favorites action
 	 */
 	removeFavoriteCollectible: PropTypes.func,
+	/**
+	 * Boolean to show if NFT detection is enabled
+	 */
+	useCollectibleDetection: PropTypes.bool,
+	/**
+	 * Setter for NFT detection state
+	 */
+	setNftDetectionDismissed: PropTypes.func,
+	/**
+	 * State to manage display of modal
+	 */
+	nftDetectionDismissed: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => ({
 	chainId: state.engine.backgroundState.NetworkController.provider.chainId,
 	selectedAddress: state.engine.backgroundState.PreferencesController.selectedAddress,
+	useCollectibleDetection: state.engine.backgroundState.PreferencesController.useCollectibleDetection,
+	nftDetectionDismissed: state.user.nftDetectionDismissed,
 	collectibleContracts: collectibleContractsSelector(state),
 	collectibles: collectiblesSelector(state),
 	favoriteCollectibles: favoritesCollectiblesSelector(state),
@@ -258,6 +288,7 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
 	removeFavoriteCollectible: (selectedAddress, chainId, collectible) =>
 		dispatch(removeFavoriteCollectible(selectedAddress, chainId, collectible)),
+	setNftDetectionDismissed: () => dispatch(setNftDetectionDismissed()),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(CollectibleContracts);

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

@@ -49,6 +49,9 @@ const initialState = {
 			},
 		},
 	},
+	user: {
+		nftDetectionDismissed: true,
+	},
 };
 const store = mockStore(initialState);
 

app/components/UI/CollectibleDetectionModal/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import Alert, { AlertType } from '../../Base/Alert';
+import Text from '../../Base/Text';
+import { strings } from '../../../../locales/i18n';
+
+const styles = StyleSheet.create({
+	alertBar: {
+		width: '95%',
+		marginBottom: 15,
+	},
+});
+
+interface Props {
+	/**
+	 * Function for dismissing of modal
+	 */
+	onDismiss: () => void;
+	/**
+	 * Navigation object needed to link to settings
+	 */
+	navigation: any;
+}
+
+const CollectibleDetectionModal = ({ onDismiss, navigation }: Props) => {
+	const goToSecuritySettings = () => {
+		navigation.navigate('SettingsView', {
+			screen: 'SecuritySettings',
+			params: {
+				scrollToBottom: true,
+			},
+		});
+	};
+
+	return (
+		<View style={styles.alertBar}>
+			<Alert small onDismiss={onDismiss} type={AlertType.Info}>
+				<Text infoModal bold small>
+					{strings('wallet.nfts_autodetection_title')}
+				</Text>
+				{'\n'}
+				<Text infoModal small>
+					{strings('wallet.nfts_autodetection_desc')}
+				</Text>
+				{'\n'}
+				<Text infoModal link bold small onPress={goToSecuritySettings}>
+					{strings('wallet.nfts_autodetection_cta')}
+				</Text>
+			</Alert>
+		</View>
+	);
+};
+
+export default CollectibleDetectionModal;

app/components/Views/AddAsset/__snapshots__/index.test.tsx.snap

@@ -11,5 +11,6 @@ exports[`AddAsset should render correctly 1`] = `
       },
     }
   }
+  useCollectibleDetection={true}
 />
 `;

app/components/Views/AddAsset/index.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
+import { SafeAreaView, View, StyleSheet } from 'react-native';
 import { colors, fontStyles } from '../../../styles/common';
 import { connect } from 'react-redux';
 import DefaultTabBar from 'react-native-scrollable-tab-view/DefaultTabBar';
@@ -11,12 +11,18 @@ import { strings } from '../../../../locales/i18n';
 import AddCustomCollectible from '../../UI/AddCustomCollectible';
 import { getNetworkNavbarOptions } from '../../UI/Navbar';
 import { NetworksChainId } from '@metamask/controllers';
+import CollectibleDetectionModal from '../../UI/CollectibleDetectionModal';
+import { isMainNet } from '../../../util/networks';
 
 const styles = StyleSheet.create({
 	wrapper: {
 		flex: 1,
 		backgroundColor: colors.white,
 	},
+	infoWrapper: {
+		alignItems: 'center',
+		marginTop: 10,
+	},
 	tabUnderlineStyle: {
 		height: 2,
 		backgroundColor: colors.blue,
@@ -46,6 +52,7 @@ class AddAsset extends PureComponent {
 		address: '',
 		symbol: '',
 		decimals: '',
+		dismissNftInfo: false,
 	};
 
 	static propTypes = {
@@ -61,6 +68,10 @@ class AddAsset extends PureComponent {
 		 * Object that represents the current route info like params passed to it
 		 */
 		route: PropTypes.object,
+		/**
+		 * Boolean to show if NFT detection is enabled
+		 */
+		useCollectibleDetection: PropTypes.bool,
 	};
 
 	renderTabBar() {
@@ -76,15 +87,28 @@ class AddAsset extends PureComponent {
 		);
 	}
 
+	dismissNftInfo = async () => {
+		this.setState({ dismissNftInfo: true });
+	};
+
 	render = () => {
 		const {
 			route: {
 				params: { assetType, collectibleContract },
 			},
 			navigation,
+			chainId,
+			useCollectibleDetection,
 		} = this.props;
+		const { dismissNftInfo } = this.state;
+
 		return (
 			<SafeAreaView style={styles.wrapper} testID={`add-${assetType}-screen`}>
+				{isMainNet(chainId) && assetType !== 'token' && !dismissNftInfo && !useCollectibleDetection && (
+					<View style={styles.infoWrapper}>
+						<CollectibleDetectionModal onDismiss={this.dismissNftInfo} navigation={navigation} />
+					</View>
+				)}
 				{assetType === 'token' ? (
 					<ScrollableTabView renderTabBar={this.renderTabBar}>
 						{NetworksChainId.mainnet === this.props.chainId && (
@@ -114,6 +138,7 @@ class AddAsset extends PureComponent {
 
 const mapStateToProps = (state) => ({
 	chainId: state.engine.backgroundState.NetworkController.provider.chainId,
+	useCollectibleDetection: state.engine.backgroundState.PreferencesController.useCollectibleDetection,
 });
 
 export default connect(mapStateToProps)(AddAsset);

app/components/Views/AddAsset/index.test.tsx

@@ -13,6 +13,9 @@ const initialState = {
 					chainId: '1',
 				},
 			},
+			PreferencesController: {
+				useCollectibleDetection: true,
+			},
 		},
 	},
 };

app/components/Views/SendFlow/Confirm/index.js

@@ -783,7 +783,7 @@ class Confirm extends PureComponent {
 				}
 			} else {
 				const [, , amount] = decodeTransferData('transfer', transaction.data);
-				weiBalance = contractBalances[selectedAsset.address];
+				weiBalance = hexToBN(contractBalances[selectedAsset.address]);
 				weiInput = hexToBN(amount);
 				error =
 					weiBalance && weiBalance.gte(weiInput)

app/components/Views/Settings/SecuritySettings/__snapshots__/index.test.tsx.snap

@@ -32,5 +32,6 @@ exports[`SecuritySettings should render correctly 1`] = `
   setLockTime={[Function]}
   setPrivacyMode={[Function]}
   setThirdPartyApiMode={[Function]}
+  type="mainnet"
 />
 `;