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

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>