Reverse ENS caching

app/components/UI/EthereumAddress/index.js

@@ -1,12 +1,9 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Text } from 'react-native';
+import { InteractionManager, Text } from 'react-native';
 import { connect } from 'react-redux';
-import ENS from 'ethjs-ens';
-import networkMap from 'ethjs-ens/lib/network-map.json';
-import Engine from '../../../core/Engine';
 import { renderShortAddress, renderFullAddress } from '../../../util/address';
-import Logger from '../../../util/Logger';
+import doENSReverseLookup from '../../../util/ENSUtils';
 import { isValidAddress } from 'ethereumjs-util';
 
 /**
@@ -58,18 +55,17 @@ class EthereumAddress extends PureComponent {
 		return formattedAddress;
 	}
 
-	getNetworkEnsSupport = () => {
-		const { network } = this.props;
-		return Boolean(networkMap[network]);
-	};
-
 	componentDidMount() {
-		this.doReverseLookup();
+		InteractionManager.runAfterInteractions(() => {
+			this.doReverseLookup();
+		});
 	}
 
 	componentDidUpdate(prevProps) {
 		if (prevProps.address !== this.props.address) {
-			this.formatAndResolveIfNeeded();
+			requestAnimationFrame(() => {
+				this.formatAndResolveIfNeeded();
+			});
 		}
 	}
 
@@ -82,27 +78,12 @@ class EthereumAddress extends PureComponent {
 	}
 
 	doReverseLookup = async () => {
-		const { provider } = Engine.context.NetworkController;
 		const { network, address } = this.props;
-
-		const networkHasEnsSupport = this.getNetworkEnsSupport();
-		if (networkHasEnsSupport) {
-			this.ens = new ENS({ provider, network });
-			try {
-				const name = await this.ens.reverse(address);
-				const resolvedAddress = await this.ens.lookup(name);
-				if (address.toLowerCase() === resolvedAddress.toLowerCase()) {
-					this.setState({ ensName: name });
-				}
-			} catch (e) {
-				// Ignore errors about errors without ENS records
-				if (e.toString().indexOf('ENS name not defined.') === -1) {
-					Logger.log('address', this.props.address);
-					Logger.log('netork', this.props.network);
-					Logger.error('ENS reverse lookup error', e);
-				}
-			}
-		}
+		try {
+			const name = await doENSReverseLookup(address, network);
+			this.setState({ ensName: name });
+			// eslint-disable-next-line no-empty
+		} catch (e) {}
 	};
 
 	render() {

app/util/ENSUtils.js

@@ -0,0 +1,35 @@
+import Engine from '../core/Engine';
+import networkMap from 'ethjs-ens/lib/network-map.json';
+import ENS from 'ethjs-ens';
+
+/**
+ * Utility class with the single responsibility
+ * of caching ENS names
+ */
+class ENSCache {
+	static cache = {};
+}
+
+export default async function doENSReverseLookup(address, network) {
+	const cache = ENSCache.cache[address];
+	if (cache) {
+		return Promise.resolve(cache);
+	}
+
+	const { provider } = Engine.context.NetworkController;
+
+	const networkHasEnsSupport = Boolean(networkMap[network]);
+
+	if (networkHasEnsSupport) {
+		this.ens = new ENS({ provider, network });
+		try {
+			const name = await this.ens.reverse(address);
+			const resolvedAddress = await this.ens.lookup(name);
+			if (address.toLowerCase() === resolvedAddress.toLowerCase()) {
+				ENSCache.cache[address] = name;
+				return name;
+			}
+			// eslint-disable-next-line no-empty
+		} catch (e) {}
+	}
+}