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

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-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}

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

@@ -12,7 +12,7 @@ import {
 import {
   AccountController,
   ApiController,
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   CoreHelperUtil,
   OptionsController,
@@ -23,11 +23,12 @@ import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 
 export function WalletReceiveView() {
   const { profileName } = useSnapshot(AccountController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const { activeNetwork, networks, activeAddress, accountType } = useSnapshot(
     ConnectionsController.state
   );
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   const { padding } = useCustomDimensions();
   const canCopy = OptionsController.isClipboardAvailable();
   const isSmartAccount = accountType === 'smartAccount';
@@ -41,7 +42,7 @@ export function WalletReceiveView() {
   const imagesArray = approvedNetworks
     .filter(network => network?.id)
     .slice(0, 5)
-    .map(network => AssetUtil.getNetworkImage(network?.id))
+    .map(network => AssetController.state.networkImages[network.id])
     .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 { AssetUtil } from '@reown/appkit-core-react-native';
+import { AssetController } from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
 import {
   BorderRadius,
@@ -10,6 +10,7 @@ import {
   useTheme
 } from '@reown/appkit-ui-react-native';
 import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { useSnapshot } from 'valtio';
 
 export interface PreviewSendDetailsProps {
   address?: string;
@@ -23,10 +24,10 @@ export function PreviewSendDetails({
   address,
   name,
   activeNetwork,
-  networkFee,
   style
 }: PreviewSendDetailsProps) {
   const Theme = useTheme();
+  const { networkImages } = useSnapshot(AssetController.state);
 
   const formattedName = UiUtil.getTruncateString({
     string: name ?? '',
@@ -42,7 +43,7 @@ export function PreviewSendDetails({
     truncate: 'middle'
   });
 
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   return (
     <FlexView
@@ -52,14 +53,6 @@ export function PreviewSendDetails({
       <Text variant="small-400" color="fg-200" style={styles.title}>
         Details
       </Text>
-      <FlexView style={[styles.item, { backgroundColor: Theme['gray-glass-002'] }]}>
-        <Text variant="small-400" color="fg-150">
-          Network cost
-        </Text>
-        <Text variant="small-400" color="fg-100">
-          ${UiUtil.formatNumberToLocalString(networkFee, 2)}
-        </Text>
-      </FlexView>
       <FlexView style={[styles.item, { backgroundColor: Theme['gray-glass-002'] }]}>
         <Text variant="small-400" color="fg-150">
           {formattedName || 'Address'}

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

@@ -15,14 +15,8 @@ import { PreviewSendDetails } from './components/preview-send-details';
 export function WalletSendPreviewView() {
   const { padding } = useCustomDimensions();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const {
-    token,
-    receiverAddress,
-    receiverProfileName,
-    receiverProfileImageUrl,
-    gasPriceInUSD,
-    loading
-  } = useSnapshot(SendController.state);
+  const { token, receiverAddress, receiverProfileName, receiverProfileImageUrl, loading } =
+    useSnapshot(SendController.state);
 
   const getSendValue = () => {
     if (SendController.state.token?.price && SendController.state.sendTokenAmount) {
@@ -109,7 +103,6 @@ export function WalletSendPreviewView() {
         </FlexView>
         <PreviewSendDetails
           style={styles.details}
-          networkFee={gasPriceInUSD}
           address={receiverAddress}
           name={receiverProfileName}
           activeNetwork={activeNetwork}

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

@@ -3,7 +3,7 @@ import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
 import { FlexView, InputText, ListToken, Text } from '@reown/appkit-ui-react-native';
 import {
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   RouterController,
   SendController
@@ -17,8 +17,8 @@ import styles from './styles';
 export function WalletSendSelectTokenView() {
   const { padding } = useCustomDimensions();
   const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
-  const { token } = useSnapshot(SendController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const [filteredTokens, setFilteredTokens] = useState(balances ?? []);
 
@@ -65,7 +65,6 @@ export function WalletSendSelectTokenView() {
               amount={_token.quantity?.numeric || '0'}
               currency={_token.symbol}
               onPress={() => onTokenPress(_token)}
-              disabled={_token.address === token?.address}
             />
           ))
         ) : (

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

@@ -1,12 +1,11 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Platform, ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
   ConnectionsController,
   CoreHelperUtil,
   RouterController,
-  SendController,
-  SwapController
+  SendController
 } from '@reown/appkit-core-react-native';
 import { Button, FlexView, IconBox, Spacing } from '@reown/appkit-ui-react-native';
 import { SendInputToken } from '../../partials/w3m-send-input-token';
@@ -18,24 +17,16 @@ import styles from './styles';
 export function WalletSendView() {
   const { padding } = useCustomDimensions();
   const { keyboardShown, keyboardHeight } = useKeyboard();
-  const { token, sendTokenAmount, receiverAddress, receiverProfileName, loading, gasPrice } =
-    useSnapshot(SendController.state);
-  const { balances } = useSnapshot(ConnectionsController.state);
+  const [isBalanceLoading, setBalanceLoading] = useState(false);
+  const { token, sendTokenAmount, receiverAddress, receiverProfileName, loading } = useSnapshot(
+    SendController.state
+  );
 
   const paddingBottom = Platform.select({
     android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
     default: Spacing['2xl']
   });
 
-  const fetchNetworkPrice = useCallback(async () => {
-    await SwapController.getNetworkTokenPrice();
-    const gas = await SwapController.getInitialGasPrice();
-    if (gas?.gasPrice && gas?.gasPriceInUSD) {
-      SendController.setGasPrice(gas.gasPrice);
-      SendController.setGasPriceInUsd(gas.gasPriceInUSD);
-    }
-  }, []);
-
   const onSendPress = () => {
     RouterController.push('WalletSendPreview');
   };
@@ -66,7 +57,10 @@ export function WalletSendView() {
 
     if (
       SendController.state.receiverAddress &&
-      !CoreHelperUtil.isAddress(SendController.state.receiverAddress)
+      !CoreHelperUtil.isAddress(
+        SendController.state.receiverAddress,
+        ConnectionsController.state.activeNamespace
+      )
     ) {
       return 'Invalid address';
     }
@@ -79,11 +73,14 @@ export function WalletSendView() {
   };
 
   useEffect(() => {
-    if (!token) {
-      SendController.setToken(balances?.[0]);
+    async function fetchBalance() {
+      setBalanceLoading(true);
+      await ConnectionsController.fetchBalance();
+      setBalanceLoading(false);
     }
-    fetchNetworkPrice();
-  }, [token, balances, fetchNetworkPrice]);
+
+    fetchBalance();
+  }, []);
 
   const actionText = getActionText();
 
@@ -97,9 +94,9 @@ export function WalletSendView() {
         <SendInputToken
           token={token}
           sendTokenAmount={sendTokenAmount}
-          gasPrice={Number(gasPrice)}
           style={styles.tokenInput}
           onTokenPress={() => RouterController.push('WalletSendSelectToken')}
+          loading={isBalanceLoading}
         />
         <FlexView alignItems="center" justifyContent="center" style={styles.addressContainer}>
           <SendInputAddress value={receiverProfileName || receiverAddress} />
@@ -119,7 +116,7 @@ export function WalletSendView() {
           style={styles.sendButton}
           onPress={onSendPress}
           disabled={!actionText.includes('Preview send')}
-          loading={loading}
+          loading={loading || isBalanceLoading}
         >
           {actionText}
         </Button>