chore: cherry-pick #9023 (#9027)

This PR cherry-picks #9023 Co-authored-by: Omri Dan <61094771+omridan159@users.noreply.github.com>
MetaMask · Mar 22, 2024 · 4e9c9e7 · 4e9c9e7
1 parent 4f511cb
commit 4e9c9e7
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 19 deletions.
diff --git a/...component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.test.tsx b/...component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.test.tsx
@@ -45,6 +45,7 @@ describe('AvatarFavicon', () => {
         imageSource={SAMPLE_AVATARFAVICON_SVGIMAGESOURCE_REMOTE}
       />,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -76,7 +77,7 @@ describe('AvatarFavicon', () => {
     const currentImageComponent = wrapper.findWhere(
       (node) => node.prop('testID') === AVATARFAVICON_IMAGE_TESTID,
     );
-    expect(currentImageComponent.exists()).toBe(false);
+    expect(currentImageComponent.exists()).toBe(true);
     expect(wrapper).toMatchSnapshot();
   });
 });
diff --git a/app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.tsx b/app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.tsx
@@ -1,26 +1,26 @@
 /* eslint-disable react/prop-types */
 
 // Third party dependencies.
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Image, ImageErrorEventData, NativeSyntheticEvent } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
 // External dependencies.
-import AvatarBase from '../../foundation/AvatarBase';
 import { useStyles } from '../../../../../hooks';
 import Icon from '../../../../Icons/Icon';
 import { ICONSIZE_BY_AVATARSIZE } from '../../Avatar.constants';
+import AvatarBase from '../../foundation/AvatarBase';
 
 // Internal dependencies.
-import { AvatarFaviconProps } from './AvatarFavicon.types';
+import { isNumber } from 'lodash';
+import { isFaviconSVG } from '../../../../../../util/favicon';
 import {
-  DEFAULT_AVATARFAVICON_SIZE,
-  DEFAULT_AVATARFAVICON_ERROR_ICON,
   AVATARFAVICON_IMAGE_TESTID,
+  DEFAULT_AVATARFAVICON_ERROR_ICON,
+  DEFAULT_AVATARFAVICON_SIZE,
 } from './AvatarFavicon.constants';
 import stylesheet from './AvatarFavicon.styles';
-import { isNumber } from 'lodash';
-import { isFaviconSVG } from '../../../../../../util/favicon';
+import { AvatarFaviconProps } from './AvatarFavicon.types';
 
 const AvatarFavicon = ({
   imageSource,
@@ -29,11 +29,12 @@ const AvatarFavicon = ({
   ...props
 }: AvatarFaviconProps) => {
   const [error, setError] = useState<any>(undefined);
+  const [svgSource, setSvgSource] = useState<string>('');
   const { styles } = useStyles(stylesheet, { style });
 
   const onError = useCallback(
     (e: NativeSyntheticEvent<ImageErrorEventData>) =>
-      setError(e.nativeEvent.error),
+      setError(e.nativeEvent?.error),
     [setError],
   );
 
@@ -48,9 +49,26 @@ const AvatarFavicon = ({
     />
   );
 
-  const svgSource = useMemo(() => {
+  useEffect(() => {
+    const checkSvgContentType = async (uri: string) => {
+      try {
+        const response = await fetch(uri, { method: 'HEAD' });
+        const contentType = response.headers.get('Content-Type');
+        return contentType?.includes('image/svg+xml');
+      } catch (err: any) {
+        return false;
+      }
+    };
+
     if (imageSource && !isNumber(imageSource) && 'uri' in imageSource) {
-      return isFaviconSVG(imageSource);
+      const svg = isFaviconSVG(imageSource);
+      if (svg) {
+        checkSvgContentType(svg).then((isSvg) => {
+          if (isSvg) {
+            setSvgSource(svg);
+          }
+        });
+      }
     }
   }, [imageSource]);
 
@@ -62,7 +80,7 @@ const AvatarFavicon = ({
         height="100%"
         uri={svgSource}
         style={styles.image}
-        onError={onSvgError}
+        onError={(e: any) => onSvgError(e)}
       />
     ) : null;
 

diff --git a/...omponents/Avatars/Avatar/variants/AvatarFavicon/__snapshots__/AvatarFavicon.test.tsx.snap b/...omponents/Avatars/Avatar/variants/AvatarFavicon/__snapshots__/AvatarFavicon.test.tsx.snap
@@ -30,9 +30,14 @@ exports[`AvatarFavicon should render SVG 1`] = `
   size="32"
   style={Object {}}
 >
-  <SvgUri
-    height="100%"
+  <Image
     onError={[Function]}
+    resizeMode="contain"
+    source={
+      Object {
+        "uri": "https://metamask.github.io/test-dapp/metamask-fox.svg",
+      }
+    }
     style={
       Object {
         "flex": 1,
@@ -41,8 +46,6 @@ exports[`AvatarFavicon should render SVG 1`] = `
       }
     }
     testID="favicon-avatar-image"
-    uri="https://metamask.github.io/test-dapp/metamask-fox.svg"
-    width="100%"
   />
 </AvatarBase>
 `;
@@ -52,9 +55,22 @@ exports[`AvatarFavicon should render fallback when svg has error 1`] = `
   size="32"
   style={Object {}}
 >
-  <Icon
-    name="Global"
-    size="20"
+  <Image
+    onError={[Function]}
+    resizeMode="contain"
+    source={
+      Object {
+        "uri": "https://metamask.github.io/test-dapp/metamask-fox.svg",
+      }
+    }
+    style={
+      Object {
+        "flex": 1,
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+    testID="favicon-avatar-image"
   />
 </AvatarBase>
 `;