fix: add favicon fetching hook

.prettierignore

@@ -9,3 +9,10 @@ node_modules
 CHANGELOG.md
 # Ignore auto generated file used for react-native-storybook-loader
 /storybook/storyLoader.js
+wdio
+wdio.conf.js
+scripts
+.detoxrc.js
+.prettierignore
+locales
+.storybook

app/actions/browser/index.js

@@ -94,3 +94,18 @@ export function updateTab(id, data) {
     data,
   };
 }
+
+/**
+ * Stores the favicon url using the origin as key
+ * @param {Object} favicon - favicon to store
+ * @param {string} favicon.origin - the origin of the favicon as key
+ * @param {string} favicon.url - the favicon image url
+ * @returns {{favicon, type: string}}
+ */
+export function storeFavicon({ origin, url }) {
+  return {
+    type: 'STORE_FAVICON_URL',
+    origin,
+    url,
+  };
+}

app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.constants.ts

@@ -11,11 +11,17 @@ import { AvatarSize } from '../../Avatar.types';
 import { IconSizeByAvatarSize } from './AvatarFavicon.types';
 
 export const TEST_REMOTE_IMAGE_URL = 'https://uniswap.org/favicon.ico';
+export const TEST_REMOTE_SVG_IMAGE_URL =
+  'https://metamask.github.io/test-dapp/metamask-fox.svg';
 
 export const TEST_REMOTE_IMAGE_SOURCE: ImageSourcePropType = {
   uri: TEST_REMOTE_IMAGE_URL,
 };
 
+export const TEST_REMOTE_SVG_IMAGE_SOURCE: ImageSourcePropType = {
+  uri: TEST_REMOTE_SVG_IMAGE_URL,
+};
+
 /* eslint-disable-next-line */
 export const TEST_LOCAL_IMAGE_SOURCE: ImageSourcePropType = require('../../../../../../images/fox.png');
 

app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.test.tsx

@@ -11,6 +11,7 @@ import {
   TEST_REMOTE_IMAGE_SOURCE,
   FAVICON_AVATAR_IMAGE_ID,
   TEST_LOCAL_IMAGE_SOURCE,
+  TEST_REMOTE_SVG_IMAGE_SOURCE,
 } from './AvatarFavicon.constants';
 
 describe('AvatarFavicon', () => {
@@ -50,6 +51,16 @@ describe('AvatarFavicon', () => {
     expect(imageComponent.exists()).toBe(true);
   });
 
+  it('should render SVG', () => {
+    const wrapper = shallow(
+      <AvatarFavicon
+        size={AvatarSize.Xl}
+        imageSource={TEST_REMOTE_SVG_IMAGE_SOURCE}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it('should render fallback', () => {
     const wrapper = shallow(
       <AvatarFavicon
@@ -67,4 +78,23 @@ describe('AvatarFavicon', () => {
     );
     expect(currentImageComponent.exists()).toBe(false);
   });
+
+  it('should render fallback when svg has error', () => {
+    const wrapper = shallow(
+      <AvatarFavicon
+        size={AvatarSize.Xl}
+        imageSource={TEST_REMOTE_SVG_IMAGE_SOURCE}
+      />,
+    );
+    const prevImageComponent = wrapper.findWhere(
+      (node) => node.prop('testID') === FAVICON_AVATAR_IMAGE_ID,
+    );
+    // Simulate onError on Image component
+    prevImageComponent.props().onError(new Error('ERROR!'));
+    const currentImageComponent = wrapper.findWhere(
+      (node) => node.prop('testID') === FAVICON_AVATAR_IMAGE_ID,
+    );
+    expect(currentImageComponent.exists()).toBe(false);
+    expect(wrapper).toMatchSnapshot();
+  });
 });

app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/prop-types */
 
 // Third party dependencies.
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Image, ImageErrorEventData, NativeSyntheticEvent } from 'react-native';
+import { SvgUri } from 'react-native-svg';
 
 // External dependencies.
 import AvatarBase from '../../foundation/AvatarBase';
@@ -17,13 +18,15 @@ import {
   FAVICON_AVATAR_IMAGE_ID,
 } from './AvatarFavicon.constants';
 import stylesheet from './AvatarFavicon.styles';
+import { isNumber } from 'lodash';
+import { isFaviconSVG } from '../../../../../../util/favicon';
 
 const AvatarFavicon = ({
   imageSource,
   size = AvatarSize.Md,
   style,
 }: AvatarFaviconProps) => {
-  const [error, setError] = useState(undefined);
+  const [error, setError] = useState<any>(undefined);
   const { styles } = useStyles(stylesheet, { style, error });
 
   const onError = useCallback(
@@ -32,10 +35,32 @@ const AvatarFavicon = ({
     [setError],
   );
 
-  const renderError = () => (
+  const onSvgError = useCallback((e: any) => setError(e), [setError]);
+
+  // TODO add the fallback with uppercase letter initial
+  //  requires that the domain is passed in as a prop from the parent
+  const renderFallbackFavicon = () => (
     <Icon size={ICON_SIZE_BY_AVATAR_SIZE[size]} name={IconName.Global} />
   );
 
+  const svgSource = useMemo(() => {
+    if (imageSource && !isNumber(imageSource) && 'uri' in imageSource) {
+      return isFaviconSVG(imageSource);
+    }
+  }, [imageSource]);
+
+  const renderSvg = () =>
+    svgSource ? (
+      <SvgUri
+        testID={FAVICON_AVATAR_IMAGE_ID}
+        width="100%"
+        height="100%"
+        uri={svgSource}
+        style={styles.image}
+        onError={onSvgError}
+      />
+    ) : null;
+
   const renderImage = () => (
     <Image
       testID={FAVICON_AVATAR_IMAGE_ID}
@@ -46,9 +71,11 @@ const AvatarFavicon = ({
     />
   );
 
+  const renderFavicon = () => (svgSource ? renderSvg() : renderImage());
+
   return (
     <AvatarBase size={size} style={styles.base}>
-      {error ? renderError() : renderImage()}
+      {error ? renderFallbackFavicon() : renderFavicon()}
     </AvatarBase>
   );
 };

app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/__snapshots__/AvatarFavicon.test.tsx.snap

@@ -28,3 +28,47 @@ exports[`AvatarFavicon should match the snapshot 1`] = `
   />
 </AvatarBase>
 `;
+
+exports[`AvatarFavicon should render SVG 1`] = `
+<AvatarBase
+  size="48"
+  style={
+    Object {
+      "borderRadius": 0,
+    }
+  }
+>
+  <SvgUri
+    height="100%"
+    onError={[Function]}
+    style={
+      Object {
+        "flex": 1,
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+    testID="favicon-avatar-image"
+    uri="https://metamask.github.io/test-dapp/metamask-fox.svg"
+    width="100%"
+  />
+</AvatarBase>
+`;
+
+exports[`AvatarFavicon should render fallback when svg has error 1`] = `
+<AvatarBase
+  size="48"
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#F2F4F6",
+      "justifyContent": "center",
+    }
+  }
+>
+  <Icon
+    name="Global"
+    size="32"
+  />
+</AvatarBase>
+`;

app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.constants.ts

@@ -1,6 +1,2 @@
 import AppConstants from '../../../core/AppConstants';
-
 export const { ORIGIN_DEEPLINK, ORIGIN_QR_CODE } = AppConstants.DEEPLINKS;
-
-export const FAV_ICON_URL = (hostUrl: string) =>
-  `https://api.faviconkit.com/${hostUrl}/64`;

app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx

@@ -13,24 +13,20 @@ import { selectProviderConfig } from '../../../selectors/networkController';
 import { selectAccounts } from '../../../selectors/accountTrackerController';
 import { selectIdentities } from '../../../selectors/preferencesController';
 import { renderAccountName, renderShortAddress } from '../../../util/address';
-import {
-  getHost,
-  getUrlObj,
-  prefixUrlWithProtocol,
-} from '../../../util/browser';
+import { getUrlObj, prefixUrlWithProtocol } from '../../../util/browser';
 import {
   getNetworkImageSource,
   getNetworkNameFromProviderConfig,
 } from '../../../util/networks';
 import { WALLET_CONNECT_ORIGIN } from '../../../util/walletconnect';
 import useAddressBalance from '../../hooks/useAddressBalance/useAddressBalance';
 import {
-  FAV_ICON_URL,
   ORIGIN_DEEPLINK,
   ORIGIN_QR_CODE,
 } from './ApproveTransactionHeader.constants';
 import stylesheet from './ApproveTransactionHeader.styles';
 import { ApproveTransactionHeaderI } from './ApproveTransactionHeader.types';
+import useFavicon from '../../hooks/useFavicon/useFavicon';
 
 const ApproveTransactionHeader = ({
   from,
@@ -110,21 +106,23 @@ const ApproveTransactionHeader = ({
     url,
   ]);
 
-  const favIconUrl = useMemo(() => {
-    let newUrl = origin;
+  const faviconUpdatedOrigin = useMemo(() => {
+    let newOrigin = origin;
     if (isOriginWalletConnect) {
-      newUrl = origin.split(WALLET_CONNECT_ORIGIN)[1];
+      newOrigin = origin.split(WALLET_CONNECT_ORIGIN)[1];
     } else if (isOriginMMSDKRemoteConn) {
-      newUrl = origin.split(AppConstants.MM_SDK.SDK_REMOTE_ORIGIN)[1];
+      newOrigin = origin.split(AppConstants.MM_SDK.SDK_REMOTE_ORIGIN)[1];
     }
-    return FAV_ICON_URL(getHost(newUrl));
+    return newOrigin;
   }, [origin, isOriginWalletConnect, isOriginMMSDKRemoteConn]);
 
+  const faviconSource = useFavicon(faviconUpdatedOrigin);
+
   return (
     <View style={styles.transactionHeader}>
       {origin ? (
         <TagUrl
-          imageSource={{ uri: favIconUrl }}
+          imageSource={faviconSource}
           label={domainTitle}
           style={styles.tagUrl}
         />

app/components/UI/ApproveTransactionHeader/__snapshots__/ApproveTransactionHeader.test.tsx.snap

@@ -41,11 +41,7 @@ exports[`ApproveTransactionHeader should render correctly 1`] = `
       <Image
         onError={[Function]}
         resizeMode="contain"
-        source={
-          Object {
-            "uri": "https://api.faviconkit.com/metamask.github.io/64",
-          }
-        }
+        source={Object {}}
         style={
           Object {
             "flex": 1,

app/components/UI/SignatureRequest/ExpandedMessage/__snapshots__/index.test.tsx.snap

@@ -65,7 +65,7 @@ exports[`ExpandedMessage should render correctly 1`] = `
       }
     }
   >
-    <WebsiteIcon
+    <Component
       style={
         Object {
           "borderRadius": 20,

app/components/UI/SignatureRequest/Root/Root.test.tsx

@@ -50,7 +50,7 @@ const messageParamsMock = {
   meta: {
     url: 'https://metamask.github.io/test-dapp/',
     title: 'E2E Test Dapp',
-    icon: 'https://api.faviconkit.com/metamask.github.io/50',
+    icon: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
     analytics: {
       request_source: 'In-App-Browser',
       request_platform: 'Test-Platform',