@reown/appkit-react-native 0.0.0-feat-multi-social-20250714211631 → 0.0.0-feat-coinbase-20250722173213

package/src/partials/w3m-account-wallet-features/index.tsx

@@ -23,10 +23,12 @@ export interface AccountWalletFeaturesProps {
 export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeaturesProps) {
   const [activeTab, setActiveTab] = useState(0);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
-  const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
+  const { activeNetwork, balances, activeNamespace } = useSnapshot(ConnectionsController.state);
   const balance = CoreHelperUtil.calculateAndFormatBalance(balances as BalanceType[]);
   const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
   const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+  const showSend =
+    activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
   const isSwapsEnabled =
     features?.swaps &&
     activeNetwork?.caipNetworkId &&
@@ -122,16 +124,18 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
           style={[styles.action, isSwapsEnabled ? styles.actionCenter : styles.actionLeft]}
           onPress={onReceivePress}
         />
-        <IconLink
-          icon="paperplane"
-          size="lg"
-          iconColor="accent-100"
-          background
-          backgroundColor="accent-glass-010"
-          pressedColor="accent-glass-020"
-          style={[styles.action, styles.actionRight]}
-          onPress={onSendPress}
-        />
+        {showSend && (
+          <IconLink
+            icon="paperplane"
+            size="lg"
+            iconColor="accent-100"
+            background
+            backgroundColor="accent-glass-010"
+            pressedColor="accent-glass-020"
+            style={[styles.action, styles.actionRight]}
+            onPress={onSendPress}
+          />
+        )}
       </FlexView>
       <FlexView style={styles.tab}>
         <Tabs tabs={['Tokens', 'Activity']} onTabChange={onTabChange} />

package/src/partials/w3m-header/index.tsx

@@ -18,7 +18,9 @@ export function Header() {
   };
 
   const headings = (_data: RouterControllerState['data'], _view: RouterControllerState['view']) => {
-    const connectorName = _data?.connector?.name;
+    // TODO: check if this is needed wiht Coinbase
+    // const connectorName = _data?.connector?.name;
+    const connectorName = undefined;
     const walletName = _data?.wallet?.name;
     const networkName = _data?.network?.name;
     const socialName = _data?.socialProvider

package/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, ConnectionsController } from '@reown/appkit-core-react-native';
+import { AssetController, ConnectionsController } from '@reown/appkit-core-react-native';
 
 interface SelectorModalProps {
   title?: string;
@@ -46,7 +46,8 @@ export function SelectorModal({
 }: SelectorModalProps) {
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   const renderSeparator = () => {
     return <View style={{ height: SEPARATOR_HEIGHT }} />;

package/src/partials/w3m-send-input-token/index.tsx

@@ -1,8 +1,15 @@
 import { useRef, useState } from 'react';
 import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
-import { FlexView, Link, Text, useTheme, TokenButton } from '@reown/appkit-ui-react-native';
+import {
+  FlexView,
+  Link,
+  Text,
+  useTheme,
+  TokenButton,
+  Shimmer
+} from '@reown/appkit-ui-react-native';
 import { NumberUtil, type Balance } from '@reown/appkit-common-react-native';
-import { ConstantsUtil, SendController } from '@reown/appkit-core-react-native';
+import { SendController } from '@reown/appkit-core-react-native';
 
 import { getMaxAmount, getSendValue } from './utils';
 import styles from './styles';
@@ -10,17 +17,17 @@ import styles from './styles';
 export interface SendInputTokenProps {
   token?: Balance;
   sendTokenAmount?: number;
-  gasPrice?: number;
   style?: StyleProp<ViewStyle>;
   onTokenPress?: () => void;
+  loading?: boolean;
 }
 
 export function SendInputToken({
   token,
   sendTokenAmount,
-  gasPrice,
   style,
-  onTokenPress
+  onTokenPress,
+  loading
 }: SendInputTokenProps) {
   const Theme = useTheme();
   const valueInputRef = useRef<TextInput | null>(null);
@@ -39,26 +46,17 @@ export function SendInputToken({
   };
 
   const onMaxPress = () => {
-    if (token?.quantity?.numeric && gasPrice) {
-      const isNetworkToken =
-        token.address === undefined ||
-        Object.values(ConstantsUtil.NATIVE_TOKEN_ADDRESS).some(
-          nativeAddress => token?.address?.split(':')[2] === nativeAddress
-        );
-
-      const numericGas = NumberUtil.bigNumber(gasPrice).shiftedBy(-token.quantity.decimals);
-
-      const maxValue = isNetworkToken
-        ? NumberUtil.bigNumber(token.quantity.numeric).minus(numericGas)
-        : NumberUtil.bigNumber(token.quantity.numeric);
-
+    if (token?.quantity?.numeric) {
+      const maxValue = NumberUtil.bigNumber(token.quantity.numeric);
       SendController.setTokenAmount(Number(maxValue.toFixed(20)));
       setInputValue(maxValue.toFixed(20));
       valueInputRef.current?.blur();
     }
   };
 
-  return (
+  return loading ? (
+    <Shimmer width="100%" height={100} borderRadius={16} style={styles.inputLoading} />
+  ) : (
     <FlexView
       style={[
         styles.container,

package/src/partials/w3m-send-input-token/styles.ts

@@ -16,5 +16,8 @@ export default StyleSheet.create({
   sendValue: {
     flex: 1,
     marginRight: Spacing.xs
+  },
+  inputLoading: {
+    marginBottom: Spacing.xs
   }
 });

package/src/utils/NetworkUtil.ts

@@ -1,5 +1,6 @@
 import { ConstantsUtil } from '@reown/appkit-common-react-native';
 import type { AppKitNetwork, CaipNetworkId, Network } from '@reown/appkit-common-react-native';
+import type { CaipNamespaces } from '@reown/appkit-core-react-native';
 
 export const NetworkUtil = {
   formatNetwork(network: Network, projectId: string): AppKitNetwork {
@@ -37,17 +38,19 @@ export const NetworkUtil = {
     return url.toString();
   },
 
-  getDefaultChainId(network?: AppKitNetwork): CaipNetworkId | undefined {
-    if (!network) return undefined;
-
-    if (network.caipNetworkId) {
-      return network.caipNetworkId;
-    }
-
-    if (network.chainNamespace) {
-      return `${network.chainNamespace}:${network.id}`;
+  getDefaultChainId(
+    namespaces: CaipNamespaces,
+    defaultNetwork?: AppKitNetwork
+  ): CaipNetworkId | undefined {
+    if (!defaultNetwork) return undefined;
+
+    const isValidDefaultNetwork = Object.values(namespaces).some(
+      namespace => namespace?.chains?.some(chain => chain === defaultNetwork.caipNetworkId)
+    );
+    if (isValidDefaultNetwork) {
+      return defaultNetwork.caipNetworkId;
     }
 
-    return `eip155:${network.id}`;
+    return undefined;
   }
 };

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

@@ -4,7 +4,6 @@ import { Linking, ScrollView } from 'react-native';
 import {
   AccountController,
   ApiController,
-  AssetUtil,
   CoreHelperUtil,
   EventsController,
   ModalController,
@@ -14,9 +13,10 @@ import {
   ConstantsUtil,
   SwapController,
   OnRampController,
-  ConnectionsController
+  ConnectionsController,
+  AssetController
 } from '@reown/appkit-core-react-native';
-import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
+// import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import {
   Avatar,
   Button,
@@ -50,7 +50,8 @@ export function AccountDefaultView() {
   const [disconnecting, setDisconnecting] = useState(false);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   const showCopy = OptionsController.isClipboardAvailable();
   const isAuth = !!connection?.properties?.provider;
   const showBalance = balance && !isAuth;
@@ -66,6 +67,10 @@ export function AccountDefaultView() {
     features?.swaps &&
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(activeNetwork.caipNetworkId);
+
+  const showSend =
+    !isAuth && activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
   const { padding } = useCustomDimensions();
 
   async function onDisconnect() {
@@ -96,7 +101,7 @@ export function AccountDefaultView() {
   const onCopyAddress = () => {
     //TODO: Check ENS name
     if (OptionsController.isClipboardAvailable() && ConnectionsController.state.activeAddress) {
-      const _address = ConnectionsController.state.activeAddress.split(':')[2];
+      const _address = CoreHelperUtil.getPlainAddress(ConnectionsController.state.activeAddress);
       if (_address) {
         OptionsController.copyToClipboard(_address);
         SnackController.showSuccess('Address copied');
@@ -145,20 +150,29 @@ export function AccountDefaultView() {
     RouterController.push('UpgradeEmailWallet');
   };
 
-  const onEmailPress = async () => {
-    const email = ConnectionsController.state.connection?.properties?.email;
-    const provider = ConnectionsController.state.connection?.properties?.provider;
-    if (provider !== 'email' || !email) return;
-
-    const sessionTopic = ConnectionsController.state.connection?.properties?.sessionTopic;
-
-    if (!sessionTopic) {
-      throw new Error('Session topic not found');
-    }
+  const onSendPress = () => {
+    const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+    const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
 
-    const link = `${CommonConstantsUtil.WEB_WALLET_URL}/emailUpdate/${sessionTopic}`;
-    await CoreHelperUtil.openLink(link);
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SEND',
+      properties: { network, isSmartAccount }
+    });
+    RouterController.push('WalletSend');
+  };
 
+  const onEmailPress = async () => {
+    // TODO: Uncomment when email update is enabled
+    // const email = ConnectionsController.state.connection?.properties?.email;
+    // const provider = ConnectionsController.state.connection?.properties?.provider;
+    // if (provider !== 'email' || !email) return;
+    // const sessionTopic = ConnectionsController.state.connection?.properties?.sessionTopic;
+    // if (!sessionTopic) {
+    //   throw new Error('Session topic not found');
+    // }
+    // const link = `${CommonConstantsUtil.WEB_WALLET_URL}/emailUpdate/${sessionTopic}`;
+    // await CoreHelperUtil.openLink(link);
     // Subscribe to email update event
   };
 
@@ -262,6 +276,19 @@ export function AccountDefaultView() {
                 <Text color="fg-100">Buy crypto</Text>
               </ListItem>
             )}
+            {showSend && (
+              <ListItem
+                chevron
+                icon="paperplane"
+                iconColor="accent-100"
+                iconBackgroundColor="accent-glass-015"
+                onPress={onSendPress}
+                testID="button-send"
+                style={styles.actionButton}
+              >
+                <Text color="fg-100">Send</Text>
+              </ListItem>
+            )}
             {showSwaps && (
               <ListItem
                 chevron

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

@@ -11,7 +11,7 @@ import {
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   CoreHelperUtil,
   ModalController,
@@ -28,7 +28,9 @@ export function AccountView() {
   const [isLoading, setIsLoading] = useState(false);
   const { padding } = useCustomDimensions();
   const { activeNetwork, activeAddress } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   const onProfilePress = () => {
     RouterController.push('AccountDefault');
@@ -46,7 +48,7 @@ export function AccountView() {
     }
 
     fetchBalance();
-    SendController.resetSend();
+    SendController.resetState();
 
     const balanceInterval = setInterval(() => {
       fetchBalance();
@@ -68,7 +70,7 @@ export function AccountView() {
       ]}
     >
       <NetworkButton
-        imageSrc={AssetUtil.getNetworkImage(activeNetwork?.id)}
+        imageSrc={networkImage}
         imageHeaders={ApiController._getApiHeaders()}
         onPress={onNetworkPress}
         style={styles.networkIcon}

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

@@ -6,7 +6,8 @@ import {
   type OptionsControllerState,
   ApiController,
   ConnectionController,
-  type ConnectionControllerState
+  type ConnectionControllerState,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
 import { filterOutRecentWallets } from '../utils';
@@ -19,6 +20,7 @@ interface Props {
 
 export function CustomWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
   const { installed } = useSnapshot(ApiController.state);
+  const imageHeaders = ApiController._getApiHeaders();
   const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
@@ -32,7 +34,8 @@ export function CustomWalletList({ itemStyle, onWalletPress, isWalletConnectEnab
   return list.map(wallet => (
     <ListWallet
       key={wallet.id}
-      imageSrc={wallet.image_url}
+      imageSrc={AssetUtil.getWalletImage(wallet)}
+      imageHeaders={imageHeaders}
       name={wallet.name}
       onPress={() => onWalletPress(wallet)}
       style={itemStyle}

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

@@ -22,7 +22,8 @@ import styles from './styles';
 //TODO: check if this view is needed with Coinbase
 export function ConnectingExternalView() {
   const { data } = RouterController.state;
-  const connector = data?.connector;
+  // const connector = data?.connector;
+  const connector = undefined;
   const { maxWidth: width } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
@@ -60,9 +61,9 @@ export function ConnectingExternalView() {
           type: 'track',
           event: 'CONNECT_SUCCESS',
           properties: {
-            name: data.wallet?.name ?? 'Unknown',
+            name: data?.wallet?.name ?? 'Unknown',
             method: 'mobile',
-            explorer_id: data.wallet?.id
+            explorer_id: data?.wallet?.id
           }
         });
       }

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

@@ -11,6 +11,7 @@ import {
   ApiController,
   EventsController
 } from '@reown/appkit-core-react-native';
+import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import { useAppKit } from '../../AppKitContext';
 import { ConnectingQrCode } from '../../partials/w3m-connecting-qrcode';
 import { ConnectingMobile } from '../../partials/w3m-connecting-mobile';
@@ -47,9 +48,10 @@ export function ConnectingView() {
         ConnectionController.setWcError(false);
 
         let connectPromise: Promise<void>;
-        // TODO: check phantom wallet id from cloud
         if (data?.wallet?.id === 'phantom-wallet') {
           connectPromise = connect('phantom');
+        } else if (data?.wallet?.id === CommonConstantsUtil.COINBASE_EXPLORER_ID) {
+          connectPromise = connect('coinbase');
         } else {
           connectPromise = connect('walletconnect', {
             universalLink: routeData?.wallet?.link_mode ?? undefined

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

@@ -2,7 +2,7 @@ import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
   ApiController,
-  AssetUtil,
+  AssetController,
   ConnectionController,
   ConnectionsController,
   RouterController,
@@ -24,10 +24,12 @@ export function NetworkSwitchView() {
   const { data } = useSnapshot(RouterController.state);
   const { recentWallets } = useSnapshot(ConnectionController.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 onSwitchNetwork = async () => {
     try {
@@ -105,7 +107,7 @@ export function NetworkSwitchView() {
     <FlexView alignItems="center" padding={['2xl', 's', '4xl', 's']}>
       <LoadingHexagon paused={error}>
         <NetworkImage
-          imageSrc={AssetUtil.getNetworkImage(network?.id)}
+          imageSrc={networkImage}
           imageHeaders={ApiController._getApiHeaders()}
           size="lg"
         />

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

@@ -10,19 +10,22 @@ import {
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
-  NetworkController,
   RouterController,
   EventsController,
   ConnectionsController,
-  AssetUtil
+  ModalController,
+  OptionsController,
+  AssetController
 } 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 { useSnapshot } from 'valtio';
 
 export function NetworksView() {
-  const { caipNetwork } = NetworkController.state;
+  const { networks, isConnected } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const { maxWidth: width, padding } = useCustomDimensions();
   const numColumns = 4;
@@ -33,22 +36,31 @@ export function NetworksView() {
   );
   const { switchNetwork } = useAppKit();
 
+  const networkList = isConnected ? ConnectionsController.getConnectedNetworks() : networks;
+
   const onHelpPress = () => {
     RouterController.push('WhatIsANetwork');
     EventsController.sendEvent({ type: 'track', event: 'CLICK_NETWORK_HELP' });
   };
 
   const networksTemplate = () => {
-    //TODO: should show requested networks disabled
-    // const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
-    const networks = ConnectionsController.getConnectedNetworks();
-
     const onNetworkPress = async (network: AppKitNetwork) => {
       await switchNetwork(network);
-      RouterController.goBack();
+
+      if (RouterController.state.history.length > 1) {
+        RouterController.goBack();
+      } else {
+        ModalController.close();
+      }
     };
 
-    return networks.map(network => {
+    return networkList.map(network => {
+      const isSelected = ConnectionsController.state.isConnected
+        ? 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;
+
       return (
         <View
           key={network.id}
@@ -64,10 +76,9 @@ export function NetworksView() {
             testID={`w3m-network-switch-${network.name ?? network.id}`}
             name={network.name ?? 'Unknown'}
             type="network"
-            imageSrc={AssetUtil.getNetworkImage(network.id)}
+            imageSrc={networkImage}
             imageHeaders={imageHeaders}
-            // disabled={!supportsAllNetworks && !approvedCaipNetworkIds?.includes(network.caipNetworkId)}
-            selected={caipNetwork?.id === network.id}
+            selected={isSelected}
             onPress={() => onNetworkPress(network)}
           />
         </View>

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

@@ -1,5 +1,5 @@
 import {
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   OnRampController,
   RouterController,
@@ -23,12 +23,13 @@ import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
 export function OnRampCheckoutView() {
   const Theme = useTheme();
   const { themeMode } = useSnapshot(ThemeController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const { selectedQuote, selectedPaymentMethod, purchaseCurrency } = useSnapshot(
     OnRampController.state
   );
 
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   const value = NumberUtil.roundNumber(selectedQuote?.destinationAmount ?? 0, 6, 5);
   const symbol = selectedQuote?.destinationCurrencyCode;

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

@@ -7,10 +7,10 @@ import {
   ThemeController,
   RouterController,
   type OnRampControllerState,
-  AssetUtil,
   SnackController,
   ConstantsUtil,
-  ConnectionsController
+  ConnectionsController,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -52,6 +52,7 @@ export function OnRampView() {
     initialLoading
   } = useSnapshot(OnRampController.state) as OnRampControllerState;
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const [searchValue, setSearchValue] = useState('');
   const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false);
   const [isPaymentMethodModalVisible, setIsPaymentMethodModalVisible] = useState(false);
@@ -59,7 +60,7 @@ export function OnRampView() {
   const suggestedValues = getCurrencySuggestedValues(paymentCurrency);
   const purchaseCurrencyCode =
     purchaseCurrency?.currencyCode?.split('_')[0] ?? purchaseCurrency?.currencyCode;
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   const getQuotes = useCallback(() => {
     if (OnRampController.canGenerateQuote()) {

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

@@ -14,7 +14,7 @@ import {
 } from '@reown/appkit-ui-react-native';
 
 import {
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   SwapController,
   type SwapControllerState,
@@ -36,11 +36,12 @@ export function SwapSelectTokenView({ onClose, type }: Props) {
   const { padding } = useCustomDimensions();
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const { sourceToken, suggestedTokens, myTokensWithBalance } = useSnapshot(
     SwapController.state
   ) as SwapControllerState;
 
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const isSourceToken = type === 'sourceToken';
 

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

@@ -2,13 +2,18 @@ import { useSnapshot } from 'valtio';
 import { useState } from 'react';
 import { FlatList } from 'react-native';
 import { Icon, ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
-import { ApiController, AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
+import {
+  ApiController,
+  AssetController,
+  ConnectionsController
+} from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
 import { useAppKit } 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);
@@ -43,7 +48,7 @@ export function UnsupportedChainView() {
           key={item.id}
           icon="networkPlaceholder"
           iconBackgroundColor="gray-glass-010"
-          imageSrc={AssetUtil.getNetworkImage(item.id)}
+          imageSrc={networkImages[item.id]}
           imageHeaders={imageHeaders}
           onPress={() => onNetworkPress(item)}
           testID="button-network"

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

@@ -1,13 +1,18 @@
 import { ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
 import { FlexView, Text, Banner, NetworkImage } from '@reown/appkit-ui-react-native';
-import { ApiController, AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
+import {
+  ApiController,
+  AssetController,
+  ConnectionsController
+} from '@reown/appkit-core-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function WalletCompatibleNetworks() {
   const { padding } = useCustomDimensions();
   const { networks, accountType } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const isSmartAccount = accountType === 'smartAccount';
 
   const approvedNetworks = isSmartAccount
@@ -30,7 +35,7 @@ export function WalletCompatibleNetworks() {
             padding={['s', 's', 's', 's']}
           >
             <NetworkImage
-              imageSrc={AssetUtil.getNetworkImage(network?.id)}
+              imageSrc={networkImages[network.id]}
               imageHeaders={imageHeaders}
               size="sm"
               style={styles.image}