Fade in images + bugfixes (#385)

* initial work for autocomplete * initial work for autocomplete * autocomplete working * fade in images everywhere * fade in images + fixes * fix snapshots
MetaMask · Feb 15, 2019 · 463a6da · 463a6da
1 parent 925ad8a
commit 463a6da
Show file tree

Hide file tree

Showing 15 changed files with 75 additions and 19 deletions.
diff --git a/app/components/AccountInput/index.js b/app/components/AccountInput/index.js
@@ -104,6 +104,10 @@ class AccountInput extends Component {
 		 * Callback triggered when the input is focused
 		 */
 		onFocus: PropTypes.func,
+		/**
+		 * Callback triggered when the input is blurred
+		 */
+		onBlur: PropTypes.func,
 		/**
 		 * Placeholder text to show inside this input
 		 */
@@ -127,6 +131,11 @@ class AccountInput extends Component {
 		onFocus && onFocus();
 	};
 
+	onBlur = () => {
+		const { onBlur, value } = this.props;
+		onBlur && onBlur(value);
+	};
+
 	selectAccount(account) {
 		this.onChange(account.address);
 	}
@@ -198,6 +207,7 @@ class AccountInput extends Component {
 					spellCheck={false}
 					style={styles.input}
 					value={value}
+					onBlur={this.onBlur}
 				/>
 				<TouchableOpacity onPress={this.scan} style={styles.qrCodeButton}>
 					<Icon name="qrcode" size={Platform.OS === 'android' ? 28 : 28} />

diff --git a/app/components/AssetIcon/__snapshots__/index.test.js.snap b/app/components/AssetIcon/__snapshots__/index.test.js.snap
@@ -2,6 +2,12 @@
 
 exports[`AssetIcon should render correctly 1`] = `
 <MyImage
+  fadeIn={true}
+  placeholderStyle={
+    Object {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
   source={
     Object {
       "uri": "https://raw.githubusercontent.com/MetaMask/eth-contract-metadata/master/images/metamark.svg",

diff --git a/app/components/AssetIcon/index.js b/app/components/AssetIcon/index.js
@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 import Image from 'react-native-remote-svg';
 import PropTypes from 'prop-types';
 import getAssetLogoPath from '../../util/assets';
+import { colors } from '../../styles/common';
 
 const styles = StyleSheet.create({
 	logo: {
@@ -38,6 +39,14 @@ export default class AssetIcon extends Component {
 		const { logo, customStyle } = this.props;
 		if (!logo) return;
 		const uri = getAssetLogoPath(logo);
-		return logo ? <Image source={{ uri }} style={[styles.logo, customStyle]} /> : null;
+
+		return logo ? (
+			<Image
+				fadeIn
+				placeholderStyle={{ backgroundColor: colors.white }}
+				source={{ uri }}
+				style={[styles.logo, customStyle]}
+			/>
+		) : null;
 	};
 }
diff --git a/app/components/CollectibleImage/__snapshots__/index.test.js.snap b/app/components/CollectibleImage/__snapshots__/index.test.js.snap
@@ -15,6 +15,12 @@ exports[`CollectibleImage should render correctly 1`] = `
   }
 >
   <MyImage
+    fadeIn={true}
+    placeholderStyle={
+      Object {
+        "backgroundColor": "#FFFFFF",
+      }
+    }
     source={
       Object {
         "uri": "IMAGE",

diff --git a/app/components/CollectibleImage/index.js b/app/components/CollectibleImage/index.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { StyleSheet, View } from 'react-native';
 import Image from 'react-native-remote-svg';
 import Identicon from '../Identicon';
+import { colors } from '../../styles/common';
 
 const styles = StyleSheet.create({
 	listWrapper: {
@@ -57,6 +58,8 @@ export default class CollectibleImage extends Component {
 			<View style={renderFull ? styles.fullWrapper : [styles.listWrapper, containerStyle]}>
 				{image && image.length !== 0 ? (
 					<Image
+						fadeIn
+						placeholderStyle={{ backgroundColor: colors.white }}
 						source={{ uri: image }}
 						style={renderFull ? styles.fullImage : [styles.listImage, iconStyle]}
 					/>

diff --git a/app/components/Identicon/index.js b/app/components/Identicon/index.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Image } from 'react-native';
 import { toDataUrl } from '../../util/blockies.js';
+import FadeIn from 'react-native-fade-in-image';
+import { colors } from '../../styles/common.js';
 
 /**
  * UI component that renders an Identicon
@@ -36,17 +38,19 @@ export default class IdenticonComponent extends Component {
 		const { diameter, address, customStyle } = this.props;
 
 		return address ? (
-			<Image
-				source={{ uri: toDataUrl(address) }}
-				style={[
-					{
-						height: diameter,
-						width: diameter,
-						borderRadius: diameter / 2
-					},
-					customStyle
-				]}
-			/>
+			<FadeIn placeholderStyle={{ backgroundColor: colors.white }}>
+				<Image
+					source={{ uri: toDataUrl(address) }}
+					style={[
+						{
+							height: diameter,
+							width: diameter,
+							borderRadius: diameter / 2
+						},
+						customStyle
+					]}
+				/>
+			</FadeIn>
 		) : null;
 	};
 }
diff --git a/app/components/NetworkList/index.js b/app/components/NetworkList/index.js
@@ -148,7 +148,15 @@ export class NetworkList extends Component {
 		NetworkController.setProviderType(type);
 		setTimeout(() => {
 			this.props.onClose(false);
-			InteractionManager.runAfterInteractions(() => Engine.refreshTransactionHistory());
+			InteractionManager.runAfterInteractions(() => {
+				const { AssetsDetectionController, AccountTrackerController } = Engine.context;
+				const actions = [
+					AssetsDetectionController.detectAssets(),
+					AccountTrackerController.refresh(),
+					Engine.refreshTransactionHistory()
+				];
+				Promise.all(actions);
+			});
 		}, 300);
 	};
 

diff --git a/app/components/Tokens/index.js b/app/components/Tokens/index.js
@@ -10,6 +10,7 @@ import ActionSheet from 'react-native-actionsheet';
 import { renderFromTokenMinimalUnit, balanceToFiat } from '../../util/number';
 import Engine from '../../core/Engine';
 import AssetElement from '../AssetElement';
+import FadeIn from 'react-native-fade-in-image';
 
 const styles = StyleSheet.create({
 	wrapper: {
@@ -154,7 +155,9 @@ export default class Tokens extends PureComponent {
 		return (
 			<AssetElement onPress={this.onItemPress} onLongPress={this.showRemoveMenu} asset={item}>
 				{item.symbol === 'ETH' ? (
-					<Image source={ethLogo} style={styles.ethLogo} />
+					<FadeIn placeholderStyle={{ backgroundColor: colors.white }}>
+						<Image source={ethLogo} style={styles.ethLogo} />
+					</FadeIn>
 				) : (
 					<TokenImage asset={item} containerStyle={styles.ethLogo} />
 				)}

diff --git a/app/components/TransactionEdit/__snapshots__/index.test.js.snap b/app/components/TransactionEdit/__snapshots__/index.test.js.snap
@@ -183,6 +183,7 @@ exports[`TransactionEdit should render correctly 1`] = `
           </Text>
         </View>
         <Connect(AccountInput)
+          onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
           placeholder="Recipient Address"

diff --git a/app/components/TransactionEdit/index.js b/app/components/TransactionEdit/index.js
@@ -345,6 +345,7 @@ class TransactionEdit extends Component {
 							</View>
 							<AccountInput
 								onChange={this.updateToAddress}
+								onBlur={this.updateToAddress}
 								onFocus={this.onFocusToAddress}
 								placeholder={strings('transaction.recipient_address')}
 								showQRScanner={this.onScanSuccess}

diff --git a/app/components/WebsiteIcon/__snapshots__/index.test.js.snap b/app/components/WebsiteIcon/__snapshots__/index.test.js.snap
@@ -4,6 +4,11 @@ exports[`WebsiteIcon should render correctly 1`] = `
 <View>
   <View>
     <FadeIn
+      placeholderStyle={
+        Object {
+          "backgroundColor": "#FFFFFF",
+        }
+      }
       useNativeDriver={true}
     >
       <Component

diff --git a/app/components/WebsiteIcon/index.js b/app/components/WebsiteIcon/index.js
@@ -73,7 +73,7 @@ export default class WebsiteIcon extends Component {
 			<View>
 				{!renderIconUrlError && (
 					<View style={viewStyle}>
-						<FadeIn>
+						<FadeIn placeholderStyle={{ backgroundColor: colors.white }}>
 							<Image source={apiLogoUrl} style={style} onError={this.onRenderIconUrlError} />
 						</FadeIn>
 					</View>

diff --git a/index.js b/index.js
@@ -11,6 +11,7 @@ useScreens();
 
 // List of warnings that we're ignoring
 YellowBox.ignoreWarnings([
+	'Function components cannot be given refs.',
 	'Task orphaned for request',
 	'Module RNOS requires',
 	'use RCT_EXPORT_MODULE',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     "react-native-progress": "^3.5.0",
     "react-native-qrcode-svg": "^5.1.1",
     "react-native-randombytes": "^3.5.0",
-    "react-native-remote-svg": "^1.4.0",
+    "react-native-remote-svg": "github:brunobar79/react-native-remote-svg#92ebf7d079a6174e4451a47d372fe2335308c65e",
     "react-native-screens": "^1.0.0-alpha.21",
     "react-native-scrollable-tab-view": "github:estebanmino/react-native-scrollable-tab-view#master",
     "react-native-settings-list": "^1.8.0",