Fix problem when loading unknown icons on Swap token list

app/components/UI/Swaps/components/TokenIcon.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, View } from 'react-native';
 
@@ -81,25 +81,28 @@ EmptyIcon.propTypes = {
 };
 
 function TokenIcon({ symbol, icon, medium, big, biggest, style }) {
-	if (symbol === 'ETH' || symbol === 'BNB') {
-		return (
-			<RemoteImage
-				fadeIn
-				source={symbol === 'ETH' ? ethLogo : bnbLogo}
-				style={[
-					styles.icon,
-					medium && styles.iconMedium,
-					big && styles.iconBig,
-					biggest && styles.iconBiggest,
-					style,
-				]}
-			/>
-		);
-	} else if (icon) {
+	const [showFallback, setShowFallback] = useState(null);
+	const getSource = useCallback(() => {
+		if (symbol === 'ETH') {
+			return ethLogo;
+		}
+		if (symbol === 'BNB') {
+			return bnbLogo;
+		}
+
+		if (icon) {
+			return { uri: icon };
+		}
+
+		return { uri: null };
+	}, [symbol, icon]);
+
+	if (!showFallback) {
 		return (
 			<RemoteImage
 				fadeIn
-				source={{ uri: icon }}
+				source={getSource()}
+				onError={() => setShowFallback(true)}
 				style={[
 					styles.icon,
 					medium && styles.iconMedium,
@@ -109,7 +112,9 @@ function TokenIcon({ symbol, icon, medium, big, biggest, style }) {
 				]}
 			/>
 		);
-	} else if (symbol) {
+	}
+
+	if (symbol) {
 		return (
 			<EmptyIcon medium={medium} big={big} biggest={biggest} style={style}>
 				<Text

package.json

@@ -401,5 +401,9 @@
       "web3-shh": false,
       "highlight.js": false
     }
+  },
+  "volta": {
+    "node": "14.19.0",
+    "yarn": "1.22.17"
   }
 }

patches/react-native-svg+12.1.1.patch

@@ -1,13 +1,49 @@
 diff --git a/node_modules/react-native-svg/src/xml.tsx b/node_modules/react-native-svg/src/xml.tsx
-index 828f104..2f9d92e 100644
+index 828f104..9eaf82a 100644
 --- a/node_modules/react-native-svg/src/xml.tsx
 +++ b/node_modules/react-native-svg/src/xml.tsx
-@@ -133,7 +133,7 @@ export function SvgUri(props: UriProps) {
-   useEffect(() => {
-     uri
-       ? fetchText(uri)
+@@ -123,21 +123,32 @@ export function SvgXml(props: XmlProps) {
+ }
+
+ export async function fetchText(uri: string) {
+-  const response = await fetch(uri);
+-  return await response.text();
++	const response = await fetch(uri);
++	if (!response.ok) {
++		throw new Error('Image not found');
++	}
++	return await response.text();
+ }
+
+ export function SvgUri(props: UriProps) {
+-  const { onError = err, uri } = props;
+-  const [xml, setXml] = useState<string | null>(null);
+-  useEffect(() => {
+-    uri
+-      ? fetchText(uri)
 -          .then(setXml)
-+          .then((res) => setXml(res || null))
-           .catch(onError)
-       : setXml(null);
-   }, [onError, uri]);
+-          .catch(onError)
+-      : setXml(null);
+-  }, [onError, uri]);
+-  return <SvgXml xml={xml} override={props} />;
++	const { onError = err, uri } = props;
++	const [xml, setXml] = useState<string | null>(null);
++	useEffect(() => {
++		const fetchXml = async () => {
++			if (uri) {
++				try {
++					const res = await fetchText(uri)
++					setXml(res || null)
++				} catch (e) {
++					onError(e);
++					setXml(null);
++				}
++			}
++		};
++
++		fetchXml();
++	}, [onError, uri]);
++	return <SvgXml xml={xml} override={props} />;
+ }
+
+ // Extending Component is required for Animated support.