Merge pull request #423 from reown-com/fix/network-images

ignaciosantise · web-flow · commit 648b95cc89aa · 2025-08-22T01:46:46.000-03:00
fix: network images loading
diff --git a/.changeset/six-dots-punch.md b/.changeset/six-dots-punch.md
@@ -0,0 +1,18 @@
+---
+'@reown/appkit-scaffold-react-native': patch
+'@reown/appkit-core-react-native': patch
+'@reown/appkit-ui-react-native': patch
+'@reown/appkit-auth-ethers-react-native': patch
+'@reown/appkit-auth-wagmi-react-native': patch
+'@reown/appkit-coinbase-ethers-react-native': patch
+'@reown/appkit-coinbase-wagmi-react-native': patch
+'@reown/appkit-common-react-native': patch
+'@reown/appkit-ethers-react-native': patch
+'@reown/appkit-ethers5-react-native': patch
+'@reown/appkit-scaffold-utils-react-native': patch
+'@reown/appkit-siwe-react-native': patch
+'@reown/appkit-wagmi-react-native': patch
+'@reown/appkit-wallet-react-native': patch
+---
+
+fix: show network images correctly
diff --git a/packages/core/src/utils/AssetUtil.ts b/packages/core/src/utils/AssetUtil.ts
@@ -14,13 +14,17 @@ export const AssetUtil = {
     return undefined;
   },
 
-  getNetworkImage(network?: CaipNetwork) {
-    if (network?.imageUrl) {
-      return network?.imageUrl;
+  getNetworkImage(network?: CaipNetwork, networkImages?: Record<string, string>) {
+    if (!network) {
+      return undefined;
     }
 
-    if (network?.imageId) {
-      return AssetController.state.networkImages[network.imageId];
+    if (network.imageUrl) {
+      return network.imageUrl;
+    }
+
+    if (network.imageId) {
+      return networkImages?.[network.imageId];
     }
 
     return undefined;
diff --git a/packages/scaffold/src/modal/w3m-account-button/index.tsx b/packages/scaffold/src/modal/w3m-account-button/index.tsx
@@ -7,7 +7,8 @@ import {
   ModalController,
   AssetUtil,
   ThemeController,
-  ApiController
+  ApiController,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
 
@@ -27,9 +28,10 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
     profileName
   } = useSnapshot(AccountController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
   const showBalance = balance === 'show';
 
   return (
diff --git a/packages/scaffold/src/modal/w3m-network-button/index.tsx b/packages/scaffold/src/modal/w3m-network-button/index.tsx
@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import {
   AccountController,
   ApiController,
+  AssetController,
   AssetUtil,
   EventsController,
   ModalController,
@@ -18,6 +19,7 @@ export interface NetworkButtonProps {
 
 export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   const { isConnected } = useSnapshot(AccountController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
   const { loading } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
@@ -33,7 +35,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   return (
     <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
       <NetworkButtonUI
-        imageSrc={AssetUtil.getNetworkImage(caipNetwork)}
+        imageSrc={AssetUtil.getNetworkImage(caipNetwork, networkImages)}
         imageHeaders={ApiController._getApiHeaders()}
         disabled={disabled || loading}
         style={style}
diff --git a/packages/scaffold/src/partials/w3m-account-activity/index.tsx b/packages/scaffold/src/partials/w3m-account-activity/index.tsx
@@ -13,6 +13,7 @@ import {
 import { type Transaction, type TransactionImage } from '@reown/appkit-common-react-native';
 import {
   AccountController,
+  AssetController,
   AssetUtil,
   EventsController,
   NetworkController,
@@ -33,7 +34,8 @@ export function AccountActivity({ style }: Props) {
   const [initialLoad, setInitialLoad] = useState(true);
   const { loading, transactions, next } = useSnapshot(TransactionsController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
 
   const handleLoadMore = () => {
     TransactionsController.fetchTransactions(AccountController.state.address);
diff --git a/packages/scaffold/src/partials/w3m-account-tokens/index.tsx b/packages/scaffold/src/partials/w3m-account-tokens/index.tsx
@@ -9,6 +9,7 @@ import {
 import { useSnapshot } from 'valtio';
 import {
   AccountController,
+  AssetController,
   AssetUtil,
   NetworkController,
   RouterController
@@ -31,7 +32,8 @@ export function AccountTokens({ style }: Props) {
   const [refreshing, setRefreshing] = useState(false);
   const { tokenBalance } = useSnapshot(AccountController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
 
   const onRefresh = useCallback(async () => {
     setRefreshing(true);
diff --git a/packages/scaffold/src/partials/w3m-selector-modal/index.tsx b/packages/scaffold/src/partials/w3m-selector-modal/index.tsx
@@ -13,7 +13,7 @@ import {
   useTheme
 } from '@reown/appkit-ui-react-native';
 import styles from './styles';
-import { AssetUtil, NetworkController } from '@reown/appkit-core-react-native';
+import { AssetController, AssetUtil, NetworkController } from '@reown/appkit-core-react-native';
 
 interface SelectorModalProps {
   title?: string;
@@ -46,7 +46,8 @@ export function SelectorModal({
 }: SelectorModalProps) {
   const Theme = useTheme();
   const { caipNetwork } = useSnapshot(NetworkController.state);
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
 
   const renderSeparator = () => {
     return <View style={{ height: SEPARATOR_HEIGHT }} />;
diff --git a/packages/scaffold/src/views/w3m-account-default-view/index.tsx b/packages/scaffold/src/views/w3m-account-default-view/index.tsx
@@ -18,7 +18,8 @@ import {
   type AppKitFrameProvider,
   ConstantsUtil,
   SwapController,
-  OnRampController
+  OnRampController,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Avatar,
@@ -52,7 +53,8 @@ export function AccountDefaultView() {
   const { connectedSocialProvider } = useSnapshot(ConnectionController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
   const showCopy = OptionsController.isClipboardAvailable();
   const isAuth = connectedConnector === 'AUTH';
   const showBalance = balance && !isAuth;
diff --git a/packages/scaffold/src/views/w3m-account-view/index.tsx b/packages/scaffold/src/views/w3m-account-view/index.tsx
@@ -13,6 +13,7 @@ import {
 import {
   AccountController,
   ApiController,
+  AssetController,
   AssetUtil,
   ModalController,
   NetworkController,
@@ -28,6 +29,7 @@ export function AccountView() {
   const Theme = useTheme();
   const { padding } = useCustomDimensions();
   const { caipNetwork } = useSnapshot(NetworkController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const { address, profileName, profileImage, preferredAccountType } = useSnapshot(
     AccountController.state
   );
@@ -74,7 +76,7 @@ export function AccountView() {
       ]}
     >
       <NetworkButton
-        imageSrc={AssetUtil.getNetworkImage(caipNetwork)}
+        imageSrc={AssetUtil.getNetworkImage(caipNetwork, networkImages)}
         imageHeaders={ApiController._getApiHeaders()}
         onPress={onNetworkPress}
         style={styles.networkIcon}
diff --git a/packages/scaffold/src/views/w3m-network-switch-view/index.tsx b/packages/scaffold/src/views/w3m-network-switch-view/index.tsx
@@ -3,6 +3,7 @@ import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
   ApiController,
+  AssetController,
   AssetUtil,
   ConnectionController,
   ConnectorController,
@@ -21,10 +22,13 @@ import {
 } from '@reown/appkit-ui-react-native';
 import styles from './styles';
 
+const imageHeaders = ApiController._getApiHeaders();
+
 export function NetworkSwitchView() {
   const { data } = useSnapshot(RouterController.state);
   const { recentWallets } = useSnapshot(ConnectionController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const isAuthConnected = ConnectorController.state.connectedConnector === 'AUTH';
   const [error, setError] = useState<boolean>(false);
   const [showRetry, setShowRetry] = useState<boolean>(false);
@@ -115,8 +119,8 @@ export function NetworkSwitchView() {
     <FlexView alignItems="center" padding={['2xl', 's', '4xl', 's']}>
       <LoadingHexagon paused={error}>
         <NetworkImage
-          imageSrc={AssetUtil.getNetworkImage(network)}
-          imageHeaders={ApiController._getApiHeaders()}
+          imageSrc={AssetUtil.getNetworkImage(network, networkImages)}
+          imageHeaders={imageHeaders}
           size="lg"
         />
         {error && (
diff --git a/packages/scaffold/src/views/w3m-networks-view/index.tsx b/packages/scaffold/src/views/w3m-networks-view/index.tsx
@@ -1,3 +1,4 @@
+import { useSnapshot } from 'valtio';
 import { ScrollView, View } from 'react-native';
 import {
   CardSelect,
@@ -16,14 +17,16 @@ import {
   type CaipNetwork,
   EventsController,
   CoreHelperUtil,
-  NetworkUtil
+  NetworkUtil,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function NetworksView() {
   const { caipNetwork, requestedCaipNetworks, approvedCaipNetworkIds, supportsAllNetworks } =
     NetworkController.state;
+  const { networkImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const { maxWidth: width, padding } = useCustomDimensions();
   const numColumns = 4;
@@ -69,7 +72,7 @@ export function NetworksView() {
           testID={`w3m-network-switch-${network.name ?? network.id}`}
           name={network.name ?? 'Unknown'}
           type="network"
-          imageSrc={AssetUtil.getNetworkImage(network)}
+          imageSrc={AssetUtil.getNetworkImage(network, networkImages)}
           imageHeaders={imageHeaders}
           disabled={!supportsAllNetworks && !approvedCaipNetworkIds?.includes(network.id)}
           selected={caipNetwork?.id === network.id}
diff --git a/packages/scaffold/src/views/w3m-onramp-view/index.tsx b/packages/scaffold/src/views/w3m-onramp-view/index.tsx
@@ -10,7 +10,8 @@ import {
   NetworkController,
   AssetUtil,
   SnackController,
-  ConstantsUtil
+  ConstantsUtil,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -50,12 +51,13 @@ export function OnRampView() {
     initialLoading
   } = useSnapshot(OnRampController.state) as OnRampControllerState;
   const { caipNetwork } = useSnapshot(NetworkController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const [searchValue, setSearchValue] = useState('');
   const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false);
   const [isPaymentMethodModalVisible, setIsPaymentMethodModalVisible] = useState(false);
   const purchaseCurrencyCode =
     purchaseCurrency?.currencyCode?.split('_')[0] ?? purchaseCurrency?.currencyCode;
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
 
   const getQuotes = useCallback(() => {
     if (OnRampController.canGenerateQuote()) {
diff --git a/packages/scaffold/src/views/w3m-swap-select-token-view/index.tsx b/packages/scaffold/src/views/w3m-swap-select-token-view/index.tsx
@@ -13,6 +13,7 @@ import {
 } from '@reown/appkit-ui-react-native';
 
 import {
+  AssetController,
   AssetUtil,
   NetworkController,
   RouterController,
@@ -30,7 +31,8 @@ export function SwapSelectTokenView() {
   const Theme = useTheme();
   const { caipNetwork } = useSnapshot(NetworkController.state);
   const { sourceToken, suggestedTokens } = useSnapshot(SwapController.state);
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const isSourceToken = RouterController.state.data?.swapTarget === 'sourceToken';
 
diff --git a/packages/scaffold/src/views/w3m-unsupported-chain-view/index.tsx b/packages/scaffold/src/views/w3m-unsupported-chain-view/index.tsx
@@ -11,13 +11,15 @@ import {
   NetworkController,
   NetworkUtil,
   type CaipNetwork,
-  type NetworkControllerState
+  type NetworkControllerState,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import styles from './styles';
 
 export function UnsupportedChainView() {
   const { caipNetwork, supportsAllNetworks, approvedCaipNetworkIds, requestedCaipNetworks } =
     useSnapshot(NetworkController.state) as NetworkControllerState;
+  const { networkImages } = useSnapshot(AssetController.state);
 
   const [disconnecting, setDisconnecting] = useState(false);
   const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
@@ -59,7 +61,7 @@ export function UnsupportedChainView() {
           key={item.id}
           icon="networkPlaceholder"
           iconBackgroundColor="gray-glass-010"
-          imageSrc={AssetUtil.getNetworkImage(item)}
+          imageSrc={AssetUtil.getNetworkImage(item, networkImages)}
           imageHeaders={imageHeaders}
           onPress={() => onNetworkPress(item)}
           testID="button-network"
diff --git a/packages/scaffold/src/views/w3m-wallet-compatible-networks-view/index.tsx b/packages/scaffold/src/views/w3m-wallet-compatible-networks-view/index.tsx
@@ -4,6 +4,7 @@ import { FlexView, Text, Banner, NetworkImage } from '@reown/appkit-ui-react-nat
 import {
   AccountController,
   ApiController,
+  AssetController,
   AssetUtil,
   NetworkController
 } from '@reown/appkit-core-react-native';
@@ -13,6 +14,7 @@ import styles from './styles';
 export function WalletCompatibleNetworks() {
   const { padding } = useCustomDimensions();
   const { preferredAccountType } = useSnapshot(AccountController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const isSmartAccount =
     preferredAccountType === 'smartAccount' && NetworkController.checkIfSmartAccountEnabled();
   const approvedNetworks = isSmartAccount
@@ -32,7 +34,7 @@ export function WalletCompatibleNetworks() {
             padding={['s', 's', 's', 's']}
           >
             <NetworkImage
-              imageSrc={AssetUtil.getNetworkImage(network)}
+              imageSrc={AssetUtil.getNetworkImage(network, networkImages)}
               imageHeaders={imageHeaders}
               size="sm"
               style={styles.image}
diff --git a/packages/scaffold/src/views/w3m-wallet-receive-view/index.tsx b/packages/scaffold/src/views/w3m-wallet-receive-view/index.tsx
@@ -12,6 +12,7 @@ import {
 import {
   AccountController,
   ApiController,
+  AssetController,
   AssetUtil,
   NetworkController,
   OptionsController,
@@ -23,7 +24,8 @@ import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 export function WalletReceiveView() {
   const { address, profileName, preferredAccountType } = useSnapshot(AccountController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
   const { padding } = useCustomDimensions();
   const canCopy = OptionsController.isClipboardAvailable();
   const isSmartAccount =
@@ -35,7 +37,7 @@ export function WalletReceiveView() {
   const imagesArray = networks
     .filter(network => network?.imageId)
     .slice(0, 5)
-    .map(AssetUtil.getNetworkImage)
+    .map(network => AssetUtil.getNetworkImage(network, AssetController.state.networkImages))
     .filter(Boolean) as string[];
 
   const label = UiUtil.getTruncateString({
diff --git a/packages/scaffold/src/views/w3m-wallet-send-preview-view/components/preview-send-details.tsx b/packages/scaffold/src/views/w3m-wallet-send-preview-view/components/preview-send-details.tsx
@@ -1,4 +1,5 @@
-import { AssetUtil, type CaipNetwork } from '@reown/appkit-core-react-native';
+import { useSnapshot } from 'valtio';
+import { AssetController, AssetUtil, type CaipNetwork } from '@reown/appkit-core-react-native';
 import {
   BorderRadius,
   FlexView,
@@ -26,6 +27,7 @@ export function PreviewSendDetails({
   style
 }: PreviewSendDetailsProps) {
   const Theme = useTheme();
+  const { networkImages } = useSnapshot(AssetController.state);
 
   const formattedName = UiUtil.getTruncateString({
     string: name ?? '',
@@ -41,7 +43,7 @@ export function PreviewSendDetails({
     truncate: 'middle'
   });
 
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
 
   return (
     <FlexView
diff --git a/packages/scaffold/src/views/w3m-wallet-send-select-token-view/index.tsx b/packages/scaffold/src/views/w3m-wallet-send-select-token-view/index.tsx
diff --git a/packages/ui/src/composites/wui-card-select/index.tsx b/packages/ui/src/composites/wui-card-select/index.tsx
diff --git a/packages/ui/src/composites/wui-network-image/index.tsx b/packages/ui/src/composites/wui-network-image/index.tsx
