@reown/appkit-react-native 0.0.0-feat-multichain-20250731180941 → 0.0.0-feat-multichain-20250804182547

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 ?? []);