@reown/appkit-react-native 0.0.0-feat-multichain-20250730193426 → 0.0.0-feat-multichain-20250801190527

package/src/views/w3m-account-default-view/index.tsx

@@ -13,7 +13,8 @@ import {
   SwapController,
   OnRampController,
   ConnectionsController,
-  AssetController
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 // import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import {
@@ -27,14 +28,14 @@ import {
   ListItem
 } from '@reown/appkit-ui-react-native';
 
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { AuthButtons } from './components/auth-buttons';
 import styles from './styles';
 
 export function AccountDefaultView() {
-  const { switchAccountType, disconnect } = useAppKit();
+  const { switchAccountType, disconnect } = useInternalAppKit();
   const { loading } = useSnapshot(ModalController.state);
   const {
     activeAddress: address,
@@ -50,7 +51,7 @@ export function AccountDefaultView() {
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const showCopy = OptionsController.isClipboardAvailable();
   const isAuth = !!connection?.properties?.provider;
   const showBalance = balance && !isAuth;

package/src/views/w3m-account-view/index.tsx

@@ -12,6 +12,7 @@ import {
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController,
   CoreHelperUtil,
   EventsController,
@@ -31,7 +32,7 @@ export function AccountView() {
   const { activeNetwork, activeAddress, identity } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const onProfilePress = () => {
     RouterController.push('AccountDefault');

package/src/views/w3m-all-wallets-view/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import {
-  ConnectionController,
+  WcController,
   EventsController,
   RouterController,
   type WcWallet
@@ -26,8 +26,8 @@ export function AllWalletsView() {
 
   const onWalletPress = (wallet: WcWallet) => {
     const isExternal =
-      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
-      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id;
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {
@@ -42,8 +42,8 @@ export function AllWalletsView() {
   };
 
   const onQrCodePress = () => {
-    ConnectionController.removePressedWallet();
-    ConnectionController.removeWcLinking();
+    WcController.removePressedWallet();
+    WcController.removeWcLinking();
     RouterController.push('ConnectingWalletConnect');
 
     EventsController.sendEvent({

package/src/views/w3m-connect-view/components/all-wallet-list.tsx

@@ -3,8 +3,8 @@ import { useSnapshot } from 'valtio';
 import {
   ApiController,
   AssetUtil,
-  ConnectionController,
-  type ConnectionControllerState,
+  WcController,
+  type WcControllerState,
   type WcWallet
 } from '@reown/appkit-core-react-native';
 import { ListItemLoader, ListWallet } from '@reown/appkit-ui-react-native';
@@ -18,7 +18,7 @@ interface Props {
 
 export function AllWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
+  const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 

package/src/views/w3m-connect-view/components/custom-wallet-list.tsx

@@ -5,8 +5,8 @@ import {
   type CustomWallet,
   type OptionsControllerState,
   ApiController,
-  ConnectionController,
-  type ConnectionControllerState,
+  WcController,
+  type WcControllerState,
   AssetUtil
 } from '@reown/appkit-core-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
@@ -20,7 +20,7 @@ interface Props {
 export function CustomWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed } = useSnapshot(ApiController.state);
   const imageHeaders = ApiController._getApiHeaders();
-  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
+  const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 

package/src/views/w3m-connect-view/components/recent-wallet-list.tsx

@@ -3,7 +3,7 @@ import {
   ApiController,
   AssetUtil,
   type WcWallet,
-  ConnectionController
+  WcController
 } from '@reown/appkit-core-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
@@ -15,7 +15,7 @@ interface Props {
 
 export function RecentWalletList({ itemStyle, onWalletPress }: Props) {
   const installed = ApiController.state.installed;
-  const { recentWallets } = useSnapshot(ConnectionController.state);
+  const { recentWallets } = useSnapshot(WcController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 

package/src/views/w3m-connect-view/index.tsx

@@ -31,8 +31,8 @@ export function ConnectView() {
 
   const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
     const isExternal =
-      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
-      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id;
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {

package/src/views/w3m-connecting-external-view/index.tsx

@@ -5,7 +5,7 @@ import {
   RouterController,
   ApiController,
   EventsController,
-  ConnectionController,
+  WcController,
   AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
@@ -19,13 +19,12 @@ import {
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../../partials/w3m-connecting-body';
 import styles from './styles';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import { UiUtil } from '../../utils/UiUtil';
 
 export function ConnectingExternalView() {
   const { data } = useSnapshot(RouterController.state);
-  const { connect } = useAppKit();
+  const { connect } = useInternalAppKit();
   const { maxWidth: width } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
@@ -39,16 +38,16 @@ export function ConnectingExternalView() {
     try {
       const wallet = RouterController.state.data?.wallet;
       if (wallet) {
-        if (wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID) {
+        if (wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id) {
           await connect('phantom');
-        } else if (wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID) {
+        } else if (wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id) {
           await connect('coinbase');
         } else {
           // All other wallets are handled by WalletConnect connector
           return;
         }
-        UiUtil.storeRecentWallet(wallet);
-        ConnectionController.setPressedWallet(wallet);
+        WcController.addRecentWallet(wallet);
+        WcController.setPressedWallet(wallet);
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',

package/src/views/w3m-connecting-siwe-view/index.tsx

@@ -9,8 +9,6 @@ import {
   Text
 } from '@reown/appkit-ui-react-native';
 import {
-  AssetUtil,
-  ConnectionController,
   ConnectionsController,
   EventsController,
   OptionsController,
@@ -19,20 +17,19 @@ import {
 } from '@reown/appkit-core-react-native';
 import { SIWEController } from '@reown/appkit-siwe-react-native';
 
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function ConnectingSiweView() {
-  const { disconnect } = useAppKit();
+  const { disconnect } = useInternalAppKit();
   const { metadata } = useSnapshot(OptionsController.state);
-  const { connectedWalletImageUrl, pressedWallet } = useSnapshot(ConnectionController.state);
-  const { activeAddress } = useSnapshot(ConnectionsController.state);
+  const { activeAddress, identity, walletInfo } = useSnapshot(ConnectionsController.state);
   const [isSigning, setIsSigning] = useState(false);
   const [isDisconnecting, setIsDisconnecting] = useState(false);
 
   const dappName = metadata?.name || 'Dapp';
   const dappIcon = metadata?.icons[0] || '';
-  const walletIcon = AssetUtil.getWalletImage(pressedWallet) || connectedWalletImageUrl;
+  const walletIcon = walletInfo?.icon;
   const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
   const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
 
@@ -83,7 +80,6 @@ export function ConnectingSiweView() {
     });
   };
 
-  //TODO: Add profile image in Avatar
   return (
     <FlexView padding={['2xl', 's', '3xl', 's']}>
       <IconLink
@@ -101,7 +97,7 @@ export function ConnectingSiweView() {
         leftImage={dappIcon}
         rightImage={walletIcon}
         renderRightPlaceholder={() => (
-          <Avatar imageSrc={undefined} address={activeAddress} size={60} borderWidth={0} />
+          <Avatar imageSrc={identity?.avatar} address={activeAddress} size={60} borderWidth={0} />
         )}
         rightItemStyle={!walletIcon && styles.walletAvatar}
       />

package/src/views/w3m-connecting-social-view/index.tsx

@@ -1,7 +1,7 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
 import {
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   EventsController,
   RouterController,
@@ -11,15 +11,14 @@ import { FlexView, LoadingThumbnail, IconBox, Logo, Text } from '@reown/appkit-u
 import { ConstantsUtil, StringUtil } from '@reown/appkit-common-react-native';
 
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { useAppKit } from '../../AppKitContext';
-import { UiUtil } from '../../utils/UiUtil';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function ConnectingSocialView() {
   const { maxWidth: width } = useCustomDimensions();
-  const { connect } = useAppKit();
+  const { connect } = useInternalAppKit();
   const { data } = useSnapshot(RouterController.state);
-  const { wcUri } = useSnapshot(ConnectionController.state);
+  const { wcUri } = useSnapshot(WcController.state);
   const [error, setError] = useState(false);
 
   const onConnect = useCallback(async () => {
@@ -31,11 +30,10 @@ export function ConnectingSocialView() {
           RouterController.state.data?.socialProvider
         );
         const wcLinking = { name: 'Reown Wallet', href };
-        ConnectionController.setWcLinking(wcLinking);
+        WcController.setWcLinking(wcLinking);
         await CoreHelperUtil.openLink(redirect);
-        await ConnectionController.state.wcPromise;
-        //todo: rename this. its not just UI
-        UiUtil.storeConnectedWallet(wcLinking);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking);
         EventsController.sendEvent({
           type: 'track',
           event: 'SOCIAL_LOGIN_SUCCESS',
@@ -55,7 +53,7 @@ export function ConnectingSocialView() {
 
   const initializeConnection = useCallback(async () => {
     const connectPromise = connect('walletconnect');
-    ConnectionController.setWcPromise(connectPromise);
+    WcController.setWcPromise(connectPromise);
   }, [connect]);
 
   useEffect(() => {

package/src/views/w3m-connecting-view/index.tsx

@@ -1,7 +1,7 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
-  ConnectionController,
+  WcController,
   ConstantsUtil,
   CoreHelperUtil,
   RouterController,
@@ -11,7 +11,7 @@ import {
   ApiController,
   EventsController
 } from '@reown/appkit-core-react-native';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import { ConnectingQrCode } from '../../partials/w3m-connecting-qrcode';
 import { ConnectingMobile } from '../../partials/w3m-connecting-mobile';
 import { ConnectingWeb } from '../../partials/w3m-connecting-web';
@@ -19,7 +19,7 @@ import { ConnectingHeader } from '../../partials/w3m-connecting-header';
 import { UiUtil } from '../../utils/UiUtil';
 
 export function ConnectingView() {
-  const { connect } = useAppKit();
+  const { connect } = useInternalAppKit();
   const { installed } = useSnapshot(ApiController.state);
   const { data } = RouterController.state;
   const [lastRetry, setLastRetry] = useState(Date.now());
@@ -32,7 +32,7 @@ export function ConnectingView() {
   const onRetry = () => {
     if (CoreHelperUtil.isAllowedRetry(lastRetry)) {
       setLastRetry(Date.now());
-      ConnectionController.clearUri();
+      WcController.clearUri();
       initializeConnection(true);
     } else {
       SnackController.showError('Please wait a second before retrying');
@@ -41,19 +41,19 @@ export function ConnectingView() {
 
   const initializeConnection = async (retry = false) => {
     try {
-      const { wcPairingExpiry } = ConnectionController.state;
+      const { wcPairingExpiry } = WcController.state;
       const { data: routeData } = RouterController.state;
       if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
-        ConnectionController.setWcError(false);
+        WcController.setWcError(false);
 
         const connectPromise = connect('walletconnect', {
           universalLink: routeData?.wallet?.link_mode ?? undefined
         });
-        ConnectionController.setWcPromise(connectPromise);
+        WcController.setWcPromise(connectPromise);
       }
     } catch (error) {
-      ConnectionController.setWcError(true);
-      ConnectionController.clearUri();
+      WcController.setWcError(true);
+      WcController.clearUri();
       SnackController.showError('Declined');
       if (isQr && CoreHelperUtil.isAllowedRetry(lastRetry)) {
         setLastRetry(Date.now());

package/src/views/w3m-network-switch-view/index.tsx

@@ -3,10 +3,11 @@ import { useEffect, useState } from 'react';
 import {
   ApiController,
   AssetController,
-  ConnectionController,
+  WcController,
   ConnectionsController,
   RouterController,
-  RouterUtil
+  RouterUtil,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -16,20 +17,21 @@ import {
   NetworkImage,
   Text
 } from '@reown/appkit-ui-react-native';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
+//TODO: is this used?
 export function NetworkSwitchView() {
-  const { switchNetwork } = useAppKit();
+  const { switchNetwork } = useInternalAppKit();
   const { data } = useSnapshot(RouterController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state);
+  const { recentWallets } = useSnapshot(WcController.state);
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const [error, setError] = useState<boolean>(false);
   const [showRetry, setShowRetry] = useState<boolean>(false);
   const network = data?.network;
   const wallet = recentWallets?.[0];
-  const networkImage = network ? networkImages[network.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(network, networkImages);
 
   const onSwitchNetwork = async () => {
     try {

package/src/views/w3m-networks-view/index.tsx

@@ -14,12 +14,13 @@ import {
   EventsController,
   ConnectionsController,
   OptionsController,
-  AssetController
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import { useSnapshot } from 'valtio';
 
 export function NetworksView() {
@@ -33,7 +34,7 @@ export function NetworksView() {
   const itemGap = Math.abs(
     Math.trunc((usableWidth - numColumns * CardSelectWidth) / numColumns) / 2
   );
-  const { switchNetwork, back } = useAppKit();
+  const { switchNetwork, back } = useInternalAppKit();
 
   const networkList = isConnected ? ConnectionsController.getConnectedNetworks() : networks;
 
@@ -53,7 +54,7 @@ export function NetworksView() {
         ? ConnectionsController.state.activeCaipNetworkId === network.caipNetworkId
         : OptionsController.state.defaultNetwork?.caipNetworkId === network.caipNetworkId;
       // eslint-disable-next-line valtio/state-snapshot-rule
-      const networkImage = network ? networkImages[network.id] : undefined;
+      const networkImage = AssetUtil.getNetworkImage(network, networkImages);
 
       return (
         <View

package/src/views/w3m-onramp-checkout-view/index.tsx

@@ -1,5 +1,6 @@
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   OnRampController,
   RouterController,
@@ -29,7 +30,7 @@ export function OnRampCheckoutView() {
   );
 
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const value = NumberUtil.roundNumber(selectedQuote?.destinationAmount ?? 0, 6, 5);
   const symbol = selectedQuote?.destinationCurrencyCode;

package/src/views/w3m-onramp-view/components/Header.tsx

@@ -1,13 +1,13 @@
 import { StyleSheet } from 'react-native';
 import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
-import { useAppKit } from '../../../AppKitContext';
+import { useInternalAppKit } from '../../../AppKitContext';
 
 interface HeaderProps {
   onSettingsPress: () => void;
 }
 
 export function Header({ onSettingsPress }: HeaderProps) {
-  const { back } = useAppKit();
+  const { back } = useInternalAppKit();
 
   const handleGoBack = () => {
     back();

package/src/views/w3m-onramp-view/index.tsx

@@ -10,7 +10,8 @@ import {
   SnackController,
   ConstantsUtil,
   ConnectionsController,
-  AssetController
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -56,7 +57,7 @@ export function OnRampView() {
   const [isPaymentMethodModalVisible, setIsPaymentMethodModalVisible] = useState(false);
   const purchaseCurrencyCode =
     purchaseCurrency?.currencyCode?.split('_')[0] ?? purchaseCurrency?.currencyCode;
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const getQuotes = useCallback(() => {
     if (OnRampController.canGenerateQuote()) {

package/src/views/w3m-swap-view/components/select-token-view/index.tsx

@@ -22,6 +22,7 @@ import {
 
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   SwapController,
   type SwapControllerState,
@@ -49,7 +50,7 @@ export function SwapSelectTokenView({ onClose, type, style }: Props) {
     SwapController.state
   ) as SwapControllerState;
 
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const isSourceToken = type === 'sourceToken';
 

package/src/views/w3m-unsupported-chain-view/index.tsx

@@ -5,21 +5,20 @@ import { Icon, ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController
 } from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function UnsupportedChainView() {
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const [disconnecting, setDisconnecting] = useState(false);
-  //TODO: should show requested networks disabled
-  // const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
   const networks = ConnectionsController.getConnectedNetworks();
   const imageHeaders = ApiController._getApiHeaders();
-  const { disconnect, switchNetwork } = useAppKit();
+  const { disconnect, switchNetwork } = useInternalAppKit();
 
   const onNetworkPress = async (network: AppKitNetwork) => {
     switchNetwork(network);
@@ -48,7 +47,7 @@ export function UnsupportedChainView() {
           key={item.id}
           icon="networkPlaceholder"
           iconBackgroundColor="gray-glass-010"
-          imageSrc={networkImages[item.id]}
+          imageSrc={AssetUtil.getNetworkImage(item, networkImages)}
           imageHeaders={imageHeaders}
           onPress={() => onNetworkPress(item)}
           testID="button-network"

package/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 {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController
 } from '@reown/appkit-core-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
@@ -35,7 +36,7 @@ export function WalletCompatibleNetworks() {
             padding={['s', 's', 's', 's']}
           >
             <NetworkImage
-              imageSrc={networkImages[network.id]}
+              imageSrc={AssetUtil.getNetworkImage(network, networkImages)}
               imageHeaders={imageHeaders}
               size="sm"
               style={styles.image}

package/src/views/w3m-wallet-receive-view/index.tsx

@@ -12,6 +12,7 @@ import {
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController,
   CoreHelperUtil,
   OptionsController,
@@ -26,7 +27,7 @@ export function WalletReceiveView() {
     ConnectionsController.state
   );
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const { padding } = useCustomDimensions();
   const canCopy = OptionsController.isClipboardAvailable();
   const isSmartAccount = accountType === 'smartAccount';
@@ -40,7 +41,10 @@ export function WalletReceiveView() {
   const imagesArray = approvedNetworks
     .filter(network => network?.id)
     .slice(0, 5)
-    .map(network => AssetController.state.networkImages[network.id])
+    .map(
+      network =>
+        network.imageUrl ?? AssetUtil.getNetworkImage(network, AssetController.state.networkImages)
+    )
     .filter(Boolean) as string[];
 
   const label = UiUtil.getTruncateString({

package/src/views/w3m-wallet-send-preview-view/components/preview-send-details.tsx

@@ -1,4 +1,4 @@
-import { AssetController } from '@reown/appkit-core-react-native';
+import { AssetController, AssetUtil } from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
 import {
   BorderRadius,
@@ -43,7 +43,7 @@ export function PreviewSendDetails({
     truncate: 'middle'
   });
 
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   return (
     <FlexView

package/src/views/w3m-wallet-send-select-token-view/index.tsx

@@ -4,6 +4,7 @@ import { ScrollView } from 'react-native';
 import { FlexView, InputText, ListToken, Text } from '@reown/appkit-ui-react-native';
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   RouterController,
   SendController
@@ -18,7 +19,7 @@ export function WalletSendSelectTokenView() {
   const { padding } = useCustomDimensions();
   const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const [filteredTokens, setFilteredTokens] = useState(balances ?? []);