From 307aee8dab5caaa802c315c1a6cb9c40b6d24a67 Mon Sep 17 00:00:00 2001
From: Philipp Walter <philippwalter@proton.me>
Date: Wed, 12 Mar 2025 12:48:30 +0100
Subject: [PATCH] fix(widgets): fix widget icons

---
 src/components/SvgImage.tsx            | 41 --------------------------
 src/components/widgets/BaseWidget.tsx  | 14 +++++----
 src/screens/Widgets/Widget.tsx         |  8 ++---
 src/screens/Widgets/WidgetListItem.tsx |  6 ++--
 4 files changed, 13 insertions(+), 56 deletions(-)
 delete mode 100644 src/components/SvgImage.tsx

diff --git a/src/components/SvgImage.tsx b/src/components/SvgImage.tsx
deleted file mode 100644
index 46cf66e85..000000000
--- a/src/components/SvgImage.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { ReactElement, useMemo } from 'react';
-import { Image, View, ViewStyle } from 'react-native';
-import { SvgXml } from 'react-native-svg';
-
-const SvgImage = ({
-	image,
-	style,
-	size = 32,
-}: {
-	image: string;
-	style?: ViewStyle;
-	size?: number;
-}): ReactElement => {
-	// Support svg data urls
-	const xml = useMemo(() => {
-		if (image.startsWith('<svg')) {
-			return image;
-		}
-		if (image.startsWith('data:image/svg+xml;base64,')) {
-			const base64 = image.replace('data:image/svg+xml;base64,', '');
-			return Buffer.from(base64, 'base64').toString();
-		}
-		if (image.startsWith('data:image/svg+xml,')) {
-			const encoded = image.replace('data:image/svg+xml', '');
-			const decoded = decodeURIComponent(encoded);
-			return decoded;
-		}
-	}, [image]);
-
-	return (
-		<View style={[{ height: size, width: size }, style]}>
-			{xml ? (
-				<SvgXml width={size} height={size} xml={xml} />
-			) : (
-				<Image source={{ uri: image, width: size, height: size }} />
-			)}
-		</View>
-	);
-};
-
-export default SvgImage;
diff --git a/src/components/widgets/BaseWidget.tsx b/src/components/widgets/BaseWidget.tsx
index 796a83374..9079e9ce4 100644
--- a/src/components/widgets/BaseWidget.tsx
+++ b/src/components/widgets/BaseWidget.tsx
@@ -1,8 +1,9 @@
+import { useNavigation } from '@react-navigation/native';
 import React, { memo, ReactElement, ReactNode, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { SvgXml } from 'react-native-svg';
 
-import { useNavigation } from '@react-navigation/native';
 import { widgets } from '../../constants/widgets';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import { RootNavigationProp } from '../../navigation/types';
@@ -15,7 +16,6 @@ import { BodyMSB } from '../../styles/text';
 import { truncate } from '../../utils/helpers';
 import Dialog from '../Dialog';
 // import LoadingView from '../LoadingView';
-import SvgImage from '../SvgImage';
 
 const BaseWidget = ({
 	id,
@@ -70,10 +70,12 @@ const BaseWidget = ({
 				{(showTitle || isEditing) && (
 					<View style={styles.header}>
 						<View style={styles.title}>
-							<View style={styles.icon}>
-								<SvgImage image={widget.icon} size={32} />
-							</View>
-
+							<SvgXml
+								style={styles.icon}
+								xml={widget.icon}
+								width={32}
+								height={32}
+							/>
 							<BodyMSB style={styles.name} numberOfLines={1}>
 								{truncate(widget.name, 18)}
 							</BodyMSB>
diff --git a/src/screens/Widgets/Widget.tsx b/src/screens/Widgets/Widget.tsx
index 9f729e03b..3a18d2c25 100644
--- a/src/screens/Widgets/Widget.tsx
+++ b/src/screens/Widgets/Widget.tsx
@@ -1,12 +1,12 @@
+import { isEqual } from 'lodash';
 import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleSheet, View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
 
-import { isEqual } from 'lodash';
 import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import NavigationHeader from '../../components/NavigationHeader';
 import SafeAreaInset from '../../components/SafeAreaInset';
-import SvgImage from '../../components/SvgImage';
 import Button from '../../components/buttons/Button';
 import BlocksWidget from '../../components/widgets/BlocksWidget';
 import CalculatorWidget from '../../components/widgets/CalculatorWidget';
@@ -115,9 +115,7 @@ const Widget = ({
 								{widget.name.split(' ').join('\n')}
 							</Headline>
 						</View>
-						<View style={styles.headerImage}>
-							<SvgImage image={widget.icon} size={64} />
-						</View>
+						<SvgXml style={styles.headerImage} xml={widget.icon} />
 					</View>
 
 					<BodyM style={styles.description} color="secondary">
diff --git a/src/screens/Widgets/WidgetListItem.tsx b/src/screens/Widgets/WidgetListItem.tsx
index 3b1cdb3ab..c3ffa6533 100644
--- a/src/screens/Widgets/WidgetListItem.tsx
+++ b/src/screens/Widgets/WidgetListItem.tsx
@@ -1,10 +1,10 @@
 import React, { ReactElement } from 'react';
 import { StyleSheet } from 'react-native';
+import { SvgXml } from 'react-native-svg';
 
 import { useNavigation } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
 import Divider from '../../components/Divider';
-import SvgImage from '../../components/SvgImage';
 import { widgets } from '../../constants/widgets';
 import { useCurrency } from '../../hooks/displayValues';
 import { RootNavigationProp } from '../../navigation/types';
@@ -31,9 +31,7 @@ const WidgetListItem = ({ id }: { id: TWidgetId }): ReactElement => {
 	return (
 		<TouchableOpacity testID={`WidgetListItem-${id}`} onPress={onPress}>
 			<View style={styles.feed}>
-				<View style={styles.icon}>
-					<SvgImage image={widget.icon} size={48} />
-				</View>
+				<SvgXml style={styles.icon} xml={widget.icon} />
 				<View style={styles.text}>
 					<BodyMSB numberOfLines={1}>{widget.name}</BodyMSB>
 					<CaptionB color="secondary" numberOfLines={1}>