fix: use favicon for app icon

Author: edgarkhanzadian

apps/mobile/src/features/account/account-selector/account-selector-sheet.layout.tsx

@@ -75,7 +75,7 @@ export function AccountSelectorSheetLayout({
                     <AccountCard
                       caption={wallet.name}
                       primaryTitle={account.name}
-                      appIcons={connectedAppsToAccountIdMap[account.id]?.map(app => app.icon)}
+                      appOrigins={connectedAppsToAccountIdMap[account.id]?.map(app => app.origin)}
                       secondaryTitle={
                         <AccountBalance
                           variant="label01"

apps/mobile/src/features/account/components/account-card.tsx

@@ -19,7 +19,7 @@ interface AccountCardProps extends PressableProps {
   onLongPress?(): void;
   testID?: string;
   iconTestID?: string;
-  appIcons?: string[];
+  appOrigins?: string[];
   isLoading?: boolean;
   width?: number;
 }
@@ -31,7 +31,7 @@ export function AccountCard({
   icon,
   address,
   onPress,
-  appIcons,
+  appOrigins,
   isLoading,
   width,
   testID,
@@ -71,7 +71,7 @@ export function AccountCard({
         </Box>
         <Title>{secondaryTitle}</Title>
       </Box>
-      {appIcons && <AppIcons appIcons={appIcons} />}
+      {appOrigins && <AppIcons appOrigins={appOrigins} />}
     </Card>
   );
 }

apps/mobile/src/features/accounts/components/app-icons.tsx

@@ -1,30 +1,30 @@
 import { useTheme } from '@shopify/restyle';
-import { Image } from 'expo-image';
 
-import { Box, Theme } from '@leather.io/ui/native';
+import { Box, Favicon, Theme } from '@leather.io/ui/native';
 
 interface AppIconsProps {
-  appIcons: string[];
+  appOrigins: string[];
 }
-export function AppIcons({ appIcons }: AppIconsProps) {
-  const { spacing, colors } = useTheme<Theme>();
+export function AppIcons({ appOrigins }: AppIconsProps) {
+  const { spacing } = useTheme<Theme>();
   return (
     <Box position="absolute" right={spacing['4']} top={spacing['7']} flexDirection="row">
-      {appIcons.slice(0, 8).map((icon, idx) => (
-        <Image
-          key={icon}
+      {appOrigins.slice(0, 8).map((origin, idx) => (
+        <Box
+          key={origin}
+          position="absolute"
+          width={18}
+          height={18}
+          right={idx * spacing[4]}
+          borderRadius="round"
+          borderColor="ink.background-primary"
+          borderWidth={1}
           style={{
-            position: 'absolute',
-            width: 18,
-            height: 18,
-            right: idx * spacing[4],
             zIndex: (100 - idx) * 1,
-            borderRadius: 999,
-            borderColor: colors['ink.background-primary'],
-            borderWidth: 1,
           }}
-          source={{ uri: icon }}
-        />
+        >
+          <Favicon origin={origin} size={16} />
+        </Box>
       ))}
     </Box>
   );

apps/mobile/src/features/browser/browser/browser-active-state.tsx

@@ -7,7 +7,6 @@ import {
   BrowserLoading,
   BrowserLoadingMethods,
 } from '@/features/accounts/components/browser-loading';
-import { getFaviconAndSave } from '@/filesystem/favicon';
 import { userAddsApp } from '@/store/apps/apps.write';
 import { useAppDispatch } from '@/store/utils';
 import { useTheme } from '@shopify/restyle';
@@ -67,19 +66,15 @@ export function BrowserActiveState({
     goToUrl(newNavState.url);
     if (newNavState.loading) return;
 
-    const uri = await getFaviconAndSave(url.hostname);
     const screenshotUri = await captureScreenshot(viewShotRef, url.hostname);
-    if (uri) {
-      dispatch(
-        userAddsApp({
-          icon: uri,
-          screenshot: screenshotUri ?? null,
-          name: newNavState.title,
-          origin: url.origin,
-          status: 'recently_visited',
-        })
-      );
-    }
+    dispatch(
+      userAddsApp({
+        screenshot: screenshotUri ?? null,
+        name: newNavState.title,
+        origin: url.origin,
+        status: 'recently_visited',
+      })
+    );
   }
   function postMessage(result: string) {
     webViewRef.current?.injectJavaScript(`window.onMessageFromRN(${result});`);

apps/mobile/src/features/browser/browser/screenshot-card.tsx

@@ -5,7 +5,14 @@ import { App } from '@/store/apps/utils';
 import { useAppDispatch } from '@/store/utils';
 import { Image } from 'expo-image';
 
-import { Box, CloseIcon, Pressable, Text, legacyTouchablePressEffect } from '@leather.io/ui/native';
+import {
+  Box,
+  CloseIcon,
+  Favicon,
+  Pressable,
+  Text,
+  legacyTouchablePressEffect,
+} from '@leather.io/ui/native';
 
 const { width } = Dimensions.get('window');
 
@@ -30,7 +37,7 @@ export function ScreenshotCard({ app, onPress }: ScreenshotCardProps) {
           flexShrink={1}
           overflow="hidden"
         >
-          <Image style={{ width: 24, height: 24, borderRadius: 999 }} source={{ uri: app.icon }} />
+          <Favicon origin={app.origin} size={16} />
           <Text style={{ flexShrink: 1 }} numberOfLines={1}>
             {app.name}
           </Text>

apps/mobile/src/filesystem/favicon.ts

@@ -2,7 +2,6 @@ import z from 'zod';
 
 const baseAppSchema = z.object({
   origin: z.string(),
-  icon: z.string(),
   screenshot: z.union([z.string(), z.null()]),
   name: z.string(),
 });