chore: improved custom wallet image loading

ignaciosantise · ignaciosantise · commit 709c05973be4 · 2025-08-11T17:02:06.000-03:00
diff --git a/packages/appkit/src/partials/w3m-all-wallets-list/index.tsx b/packages/appkit/src/partials/w3m-all-wallets-list/index.tsx
@@ -3,6 +3,7 @@ import { useSnapshot } from 'valtio';
 import { FlatList, View } from 'react-native';
 import {
   ApiController,
+  AssetController,
   AssetUtil,
   OptionsController,
   SnackController,
@@ -33,6 +34,7 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
   const [pageLoading, setPageLoading] = useState<boolean>(false);
   const { maxWidth, padding } = useCustomDimensions();
   const { installed, featured, recommended, wallets } = useSnapshot(ApiController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const imageHeaders = ApiController._getApiHeaders();
   const preloadedWallets = installed.length + featured.length + recommended.length;
@@ -89,7 +91,7 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
     return (
       <View style={[styles.itemContainer, { width: itemWidth }]}>
         <CardSelect
-          imageSrc={AssetUtil.getWalletImage(item)}
+          imageSrc={AssetUtil.getWalletImage(item, walletImages)}
           imageHeaders={imageHeaders}
           name={item?.name ?? 'Unknown'}
           onPress={() => onItemPress(item)}
diff --git a/packages/appkit/src/partials/w3m-all-wallets-search/index.tsx b/packages/appkit/src/partials/w3m-all-wallets-search/index.tsx
@@ -1,6 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import { FlatList, View } from 'react-native';
-import { ApiController, AssetUtil, SnackController } from '@reown/appkit-core-react-native';
+import {
+  ApiController,
+  AssetController,
+  AssetUtil,
+  SnackController
+} from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
 import {
   CardSelect,
@@ -12,6 +17,7 @@ import {
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { Placeholder } from '../w3m-placeholder';
 import styles from './styles';
+import { useSnapshot } from 'valtio';
 
 export interface AllWalletsSearchProps {
   columns: number;
@@ -31,6 +37,7 @@ export function AllWalletsSearch({
   const [prevSearchQuery, setPrevSearchQuery] = useState<string>('');
   const imageHeaders = ApiController._getApiHeaders();
   const { maxWidth, padding, isLandscape } = useCustomDimensions();
+  const { walletImages } = useSnapshot(AssetController.state);
 
   const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
 
@@ -40,7 +47,7 @@ export function AllWalletsSearch({
     return (
       <View key={item?.id} style={[styles.itemContainer, { width: itemWidth }]}>
         <CardSelect
-          imageSrc={AssetUtil.getWalletImage(item)}
+          imageSrc={AssetUtil.getWalletImage(item, walletImages)}
           imageHeaders={imageHeaders}
           name={item?.name ?? 'Unknown'}
           onPress={() => onItemPress(item)}
diff --git a/packages/appkit/src/partials/w3m-connecting-mobile/index.tsx b/packages/appkit/src/partials/w3m-connecting-mobile/index.tsx
@@ -9,7 +9,8 @@ import {
   CoreHelperUtil,
   OptionsController,
   EventsController,
-  ConstantsUtil
+  ConstantsUtil,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -35,6 +36,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const { data } = RouterController.state;
   const { maxWidth: width } = useCustomDimensions();
   const { wcUri, wcError } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const showCopy =
     OptionsController.isClipboardAvailable() &&
@@ -108,7 +110,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
         <LoadingThumbnail paused={!!errorType || wcError}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
           {wcError ? (
diff --git a/packages/appkit/src/partials/w3m-connecting-web/index.tsx b/packages/appkit/src/partials/w3m-connecting-web/index.tsx
@@ -8,7 +8,8 @@ import {
   WcController,
   CoreHelperUtil,
   OptionsController,
-  EventsController
+  EventsController,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -29,6 +30,7 @@ interface ConnectingWebProps {
 export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   const { data } = RouterController.state;
   const { wcUri, wcError } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const showCopy = OptionsController.isClipboardAvailable();
   const bodyMessage = getMessage({
     walletName: data?.wallet?.name,
@@ -68,7 +70,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
         <LoadingThumbnail paused={wcError}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
           {wcError ? (
diff --git a/packages/appkit/src/views/w3m-connect-view/components/all-wallet-list.tsx b/packages/appkit/src/views/w3m-connect-view/components/all-wallet-list.tsx
@@ -2,6 +2,7 @@ import { type StyleProp, type ViewStyle } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
   ApiController,
+  AssetController,
   AssetUtil,
   WcController,
   type WcControllerState
@@ -19,6 +20,7 @@ interface Props {
 export function AllWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
   const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
+  const { walletImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
@@ -47,7 +49,7 @@ export function AllWalletList({ itemStyle, onWalletPress }: Props) {
     list.map(wallet => (
       <ListWallet
         key={wallet?.id}
-        imageSrc={AssetUtil.getWalletImage(wallet)}
+        imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
         imageHeaders={imageHeaders}
         name={wallet?.name ?? 'Unknown'}
         onPress={() => onWalletPress(wallet)}
diff --git a/packages/appkit/src/views/w3m-connect-view/components/custom-wallet-list.tsx b/packages/appkit/src/views/w3m-connect-view/components/custom-wallet-list.tsx
@@ -6,7 +6,8 @@ import {
   ApiController,
   WcController,
   type WcControllerState,
-  AssetUtil
+  AssetUtil,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import { type CustomWallet } from '@reown/appkit-common-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
@@ -19,6 +20,7 @@ interface Props {
 
 export function CustomWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed } = useSnapshot(ApiController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
@@ -33,7 +35,7 @@ export function CustomWalletList({ itemStyle, onWalletPress }: Props) {
   return list.map(wallet => (
     <ListWallet
       key={wallet.id}
-      imageSrc={AssetUtil.getWalletImage(wallet)}
+      imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
       imageHeaders={imageHeaders}
       name={wallet.name}
       onPress={() => onWalletPress(wallet)}
diff --git a/packages/appkit/src/views/w3m-connect-view/components/recent-wallet-list.tsx b/packages/appkit/src/views/w3m-connect-view/components/recent-wallet-list.tsx
@@ -1,5 +1,10 @@
 import { useSnapshot } from 'valtio';
-import { ApiController, AssetUtil, WcController } from '@reown/appkit-core-react-native';
+import {
+  ApiController,
+  AssetController,
+  AssetUtil,
+  WcController
+} from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
@@ -12,6 +17,7 @@ interface Props {
 export function RecentWalletList({ itemStyle, onWalletPress }: Props) {
   const installed = ApiController.state.installed;
   const { recentWallets } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
@@ -25,7 +31,7 @@ export function RecentWalletList({ itemStyle, onWalletPress }: Props) {
     return (
       <ListWallet
         key={wallet?.id}
-        imageSrc={AssetUtil.getWalletImage(wallet)}
+        imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
         imageHeaders={imageHeaders}
         name={wallet?.name ?? 'Unknown'}
         onPress={() => onWalletPress(wallet, isInstalled)}
diff --git a/packages/appkit/src/views/w3m-connecting-external-view/index.tsx b/packages/appkit/src/views/w3m-connecting-external-view/index.tsx
@@ -6,7 +6,8 @@ import {
   ApiController,
   EventsController,
   WcController,
-  AssetUtil
+  AssetUtil,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -24,6 +25,7 @@ import { ConstantsUtil } from '@reown/appkit-common-react-native';
 
 export function ConnectingExternalView() {
   const { data } = useSnapshot(RouterController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const { connect } = useInternalAppKit();
   const { maxWidth: width } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
@@ -90,7 +92,7 @@ export function ConnectingExternalView() {
         <LoadingThumbnail paused={!!errorType}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
           {errorType ? (
diff --git a/packages/appkit/src/views/w3m-get-wallet-view/index.tsx b/packages/appkit/src/views/w3m-get-wallet-view/index.tsx
@@ -1,11 +1,13 @@
 import { Linking, Platform, ScrollView } from 'react-native';
 import { FlexView, ListWallet } from '@reown/appkit-ui-react-native';
-import { ApiController, AssetUtil } from '@reown/appkit-core-react-native';
+import { ApiController, AssetController, AssetUtil } from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
+import { useSnapshot } from 'valtio';
 
 export function GetWalletView() {
+  const { walletImages } = useSnapshot(AssetController.state);
   const { padding } = useCustomDimensions();
   const imageHeaders = ApiController._getApiHeaders();
 
@@ -22,7 +24,7 @@ export function GetWalletView() {
       <ListWallet
         key={wallet.id}
         name={wallet.name}
-        imageSrc={AssetUtil.getWalletImage(wallet)}
+        imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
         imageHeaders={imageHeaders}
         onPress={() => onWalletPress(wallet)}
         style={styles.item}
diff --git a/packages/core/src/utils/AssetUtil.ts b/packages/core/src/utils/AssetUtil.ts
@@ -1,14 +1,13 @@
 import type { AppKitNetwork, WcWallet } from '@reown/appkit-common-react-native';
-import { AssetController } from '../controllers/AssetController';
 
 export const AssetUtil = {
-  getWalletImage(wallet?: WcWallet) {
+  getWalletImage(wallet?: WcWallet, walletImages?: Record<string, string>) {
     if (wallet?.image_url) {
       return wallet?.image_url;
     }
 
     if (wallet?.image_id) {
-      return AssetController.state.walletImages[wallet.image_id];
+      return walletImages?.[wallet.image_id];
     }
 
     return undefined;

Original file line number	Diff line number	Diff line change
`@@ -1,14 +1,13 @@`
`1`	`1`	`import type { AppKitNetwork, WcWallet } from '@reown/appkit-common-react-native';`
`2`		`-import { AssetController } from '../controllers/AssetController';`
`3`	`2`
`4`	`3`	`export const AssetUtil = {`
`5`		`- getWalletImage(wallet?: WcWallet) {`
	`4`	`+ getWalletImage(wallet?: WcWallet, walletImages?: Record<string, string>) {`
`6`	`5`	`if (wallet?.image_url) {`
`7`	`6`	`return wallet?.image_url;`
`8`	`7`	`}`
`9`	`8`
`10`	`9`	`if (wallet?.image_id) {`
`11`		`- return AssetController.state.walletImages[wallet.image_id];`
	`10`	`+ return walletImages?.[wallet.image_id];`
`12`	`11`	`}`
`13`	`12`
`14`	`13`	`return undefined;`