@reown/appkit-react-native 2.0.0-alpha.1 → 2.0.0-alpha.2

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

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { ScrollView, SectionList, type SectionListData } from 'react-native';
+import { ScrollView, SectionList, View, type SectionListData } from 'react-native';
 import {
   FlexView,
+  IconLink,
   InputText,
   ListToken,
   ListTokenTotalHeight,
@@ -13,35 +14,47 @@ import {
 } from '@reown/appkit-ui-react-native';
 
 import {
-  AssetUtil,
+  AssetController,
   ConnectionsController,
-  RouterController,
   SwapController,
+  type SwapControllerState,
+  type SwapInputTarget,
   type SwapTokenWithBalance
 } from '@reown/appkit-core-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { Placeholder } from '../../partials/w3m-placeholder';
+import { useCustomDimensions } from '../../../../hooks/useCustomDimensions';
+import { Placeholder } from '../../../../partials/w3m-placeholder';
 import styles from './styles';
 import { createSections } from './utils';
 
-export function SwapSelectTokenView() {
+interface Props {
+  onClose: () => void;
+  type?: SwapInputTarget;
+}
+
+export function SwapSelectTokenView({ onClose, type }: Props) {
   const { padding } = useCustomDimensions();
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const { sourceToken, suggestedTokens } = useSnapshot(SwapController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { sourceToken, suggestedTokens, myTokensWithBalance } = useSnapshot(
+    SwapController.state
+  ) as SwapControllerState;
+
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   const [tokenSearch, setTokenSearch] = useState<string>('');
-  const isSourceToken = RouterController.state.data?.swapTarget === 'sourceToken';
+  const isSourceToken = type === 'sourceToken';
 
-  const [filteredTokens, setFilteredTokens] = useState(createSections(isSourceToken, tokenSearch));
+  const [filteredTokens, setFilteredTokens] = useState(
+    createSections(isSourceToken, tokenSearch, myTokensWithBalance)
+  );
   const suggestedList = suggestedTokens
     ?.filter(token => token.address !== SwapController.state.sourceToken?.address)
     .slice(0, 8);
 
   const onSearchChange = (value: string) => {
     setTokenSearch(value);
-    setFilteredTokens(createSections(isSourceToken, value));
+    setFilteredTokens(createSections(isSourceToken, value, myTokensWithBalance));
   };
 
   const onTokenPress = (token: SwapTokenWithBalance) => {
@@ -53,14 +66,30 @@ export function SwapSelectTokenView() {
         SwapController.swapTokens();
       }
     }
-    RouterController.goBack();
+    onClose();
   };
 
   return (
     <FlexView
-      margin={['l', '0', '2xl', '0']}
-      style={[styles.container, { paddingHorizontal: padding }]}
+      padding={['xl', '0', '0', '0']}
+      style={[
+        styles.container,
+        {
+          paddingHorizontal: padding,
+          backgroundColor: Theme['bg-100']
+        }
+      ]}
     >
+      <FlexView
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+        padding={['0', 'm', 'm', 'm']}
+      >
+        <IconLink icon="chevronLeft" size="md" onPress={onClose} />
+        <Text variant="paragraph-600">Select token</Text>
+        <View style={styles.iconPlaceholder} />
+      </FlexView>
       <FlexView>
         <InputText
           value={tokenSearch}

package/src/views/{w3m-swap-select-token-view → w3m-swap-view/components/select-token-view}/styles.ts

@@ -1,10 +1,15 @@
 import { StyleSheet } from 'react-native';
-import { Spacing } from '@reown/appkit-ui-react-native';
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
 
 export default StyleSheet.create({
   container: {
-    minHeight: 250,
-    maxHeight: 600
+    borderRadius: BorderRadius.l,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    overflow: 'hidden',
+    marginTop: 80,
+    flex: 1
   },
   title: {
     paddingTop: Spacing['2xs']
@@ -26,5 +31,9 @@ export default StyleSheet.create({
   },
   suggestedSeparator: {
     marginVertical: Spacing.s
+  },
+  iconPlaceholder: {
+    height: 32,
+    width: 32
   }
 });

package/src/views/{w3m-swap-select-token-view → w3m-swap-view/components/select-token-view}/utils.ts

@@ -1,25 +1,30 @@
 import { SwapController, type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
 
-export function filterTokens(tokens: SwapTokenWithBalance[], searchValue?: string) {
+export function filterTokens(tokens?: SwapTokenWithBalance[], searchValue?: string) {
+  if (!tokens) {
+    return [];
+  }
+
   if (!searchValue) {
     return tokens;
   }
 
   return tokens.filter(
     token =>
-      token.name.toLowerCase().includes(searchValue.toLowerCase()) ||
+      token.name?.toLowerCase().includes(searchValue.toLowerCase()) ||
       token.symbol.toLowerCase().includes(searchValue.toLowerCase())
   );
 }
 
-export function createSections(isSourceToken: boolean, searchValue: string) {
-  const myTokensFiltered = filterTokens(
-    SwapController.state.myTokensWithBalance ?? [],
-    searchValue
-  );
+export function createSections(
+  isSourceToken: boolean,
+  searchValue: string,
+  balances?: SwapTokenWithBalance[]
+) {
+  const myTokensFiltered = filterTokens(balances ?? [], searchValue);
   const popularFiltered = isSourceToken
     ? []
-    : filterTokens(SwapController.getFilteredPopularTokens() ?? [], searchValue);
+    : filterTokens(SwapController.getFilteredPopularTokens(balances), searchValue);
 
   const sections = [];
   if (myTokensFiltered.length > 0) {

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

@@ -1,13 +1,14 @@
 import { useSnapshot } from 'valtio';
-import { useCallback, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Platform, ScrollView } from 'react-native';
+import Modal from 'react-native-modal';
 import {
-  AccountController,
   ConnectionsController,
   ConstantsUtil,
   EventsController,
   RouterController,
-  SwapController
+  SwapController,
+  type SwapInputTarget
 } from '@reown/appkit-core-react-native';
 import { Button, FlexView, IconLink, Spacing, useTheme } from '@reown/appkit-ui-react-native';
 import { NumberUtil } from '@reown/appkit-common-react-native';
@@ -18,10 +19,11 @@ import { SwapInput } from '../../partials/w3m-swap-input';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { SwapDetails } from '../../partials/w3m-swap-details';
 import styles from './styles';
+import { SwapSelectTokenView } from './components/select-token-view';
 
 export function SwapView() {
   const {
-    initializing,
+    loadingTokens,
     sourceToken,
     toToken,
     sourceTokenAmount,
@@ -36,8 +38,13 @@ export function SwapView() {
   const Theme = useTheme();
   const { padding } = useCustomDimensions();
   const { keyboardShown, keyboardHeight } = useKeyboard();
+  const [showModal, setShowModal] = useState<SwapInputTarget | undefined>();
   const showDetails = !!sourceToken && !!toToken && !inputError;
 
+  const onModalClose = () => {
+    setShowModal(undefined);
+  };
+
   const showSwitch =
     myTokensWithBalance &&
     myTokensWithBalance.findIndex(
@@ -66,7 +73,7 @@ export function SwapView() {
   };
 
   const actionState = getActionButtonState();
-  const actionLoading = initializing || loadingPrices || loadingQuote;
+  const actionLoading = loadingTokens || loadingPrices || loadingQuote;
 
   const { debouncedCallback: onDebouncedSwap } = useDebounceCallback({
     callback: SwapController.swapTokens.bind(SwapController),
@@ -83,10 +90,6 @@ export function SwapView() {
     onDebouncedSwap();
   };
 
-  const onSourceTokenPress = () => {
-    RouterController.push('SwapSelectToken', { swapTarget: 'sourceToken' });
-  };
-
   const onReviewPress = () => {
     EventsController.sendEvent({
       type: 'track',
@@ -97,7 +100,7 @@ export function SwapView() {
         swapToToken: SwapController.state.toToken?.symbol || '',
         swapFromAmount: SwapController.state.sourceTokenAmount || '',
         swapToAmount: SwapController.state.toTokenAmount || '',
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+        isSmartAccount: ConnectionsController.state.accountType === 'smartAccount'
       }
     });
     RouterController.push('SwapPreview');
@@ -133,81 +136,90 @@ export function SwapView() {
     }
   };
 
-  const onToTokenPress = () => {
-    RouterController.push('SwapSelectToken', { swapTarget: 'toToken' });
-  };
-
   const onSwitchPress = () => {
     SwapController.switchTokens();
   };
 
-  const watchTokens = useCallback(() => {
-    SwapController.getNetworkTokenPrice();
-    SwapController.getMyTokensWithBalance();
-    SwapController.swapTokens();
-  }, []);
-
   useEffect(() => {
-    SwapController.initializeState();
+    SwapController.fetchTokens();
+
+    function watchTokens() {
+      SwapController.getNetworkTokenPrice();
+      SwapController.getMyTokensWithBalance();
+      SwapController.swapTokens();
+    }
 
     const interval = setInterval(watchTokens, 10000);
 
     return () => {
       clearInterval(interval);
     };
-  }, [watchTokens]);
+  }, []);
 
   return (
-    <ScrollView
-      style={{ paddingHorizontal: padding }}
-      bounces={false}
-      keyboardShouldPersistTaps="always"
-    >
-      <FlexView padding="l" alignItems="center" justifyContent="center" style={{ paddingBottom }}>
-        <SwapInput
-          token={sourceToken}
-          value={sourceTokenAmount}
-          marketValue={parseFloat(sourceTokenAmount) * sourceTokenPriceInUSD}
-          style={styles.tokenInput}
-          loading={initializing}
-          onChange={onSourceTokenChange}
-          onTokenPress={onSourceTokenPress}
-          onMaxPress={onSourceMaxPress}
-        />
-        <FlexView alignItems="center" justifyContent="center" style={styles.bottomInputContainer}>
+    <>
+      <ScrollView
+        style={{ paddingHorizontal: padding }}
+        bounces={false}
+        keyboardShouldPersistTaps="always"
+      >
+        <FlexView padding="l" alignItems="center" justifyContent="center" style={{ paddingBottom }}>
           <SwapInput
-            token={toToken}
-            value={toTokenAmount}
-            marketValue={NumberUtil.parseLocalStringToNumber(toTokenAmount) * toTokenPriceInUSD}
+            token={sourceToken}
+            value={sourceTokenAmount}
+            marketValue={parseFloat(sourceTokenAmount) * sourceTokenPriceInUSD}
             style={styles.tokenInput}
-            loading={initializing}
-            onChange={onToTokenChange}
-            onTokenPress={onToTokenPress}
-            editable={false}
+            loading={loadingTokens}
+            onChange={onSourceTokenChange}
+            onTokenPress={() => setShowModal('sourceToken')}
+            onMaxPress={onSourceMaxPress}
           />
-          {showSwitch && (
-            <IconLink
-              icon="recycleHorizontal"
-              size="lg"
-              iconColor="fg-275"
-              background
-              backgroundColor="bg-175"
-              pressedColor="bg-250"
-              style={[styles.arrowIcon, { borderColor: Theme['bg-100'] }]}
-              onPress={onSwitchPress}
+          <FlexView alignItems="center" justifyContent="center" style={styles.bottomInputContainer}>
+            <SwapInput
+              token={toToken}
+              value={toTokenAmount}
+              marketValue={NumberUtil.parseLocalStringToNumber(toTokenAmount) * toTokenPriceInUSD}
+              style={styles.tokenInput}
+              loading={loadingTokens}
+              loadingValues={actionLoading}
+              onChange={onToTokenChange}
+              onTokenPress={() => setShowModal('toToken')}
+              editable={false}
             />
-          )}
+            {showSwitch && (
+              <IconLink
+                icon="recycleHorizontal"
+                size="lg"
+                iconColor="fg-275"
+                background
+                backgroundColor="bg-175"
+                pressedColor="bg-250"
+                style={[styles.arrowIcon, { borderColor: Theme['bg-100'] }]}
+                onPress={onSwitchPress}
+              />
+            )}
+          </FlexView>
+          {showDetails && <SwapDetails />}
+          <Button
+            style={styles.actionButton}
+            loading={actionLoading}
+            disabled={actionState.disabled || actionLoading}
+            onPress={onReviewPress}
+          >
+            {actionState.text}
+          </Button>
         </FlexView>
-        {showDetails && <SwapDetails />}
-        <Button
-          style={styles.actionButton}
-          loading={actionLoading}
-          disabled={actionState.disabled || actionLoading}
-          onPress={onReviewPress}
-        >
-          {actionState.text}
-        </Button>
-      </FlexView>
-    </ScrollView>
+      </ScrollView>
+      <Modal
+        isVisible={!!showModal}
+        useNativeDriver
+        useNativeDriverForBackdrop
+        onBackdropPress={onModalClose}
+        onDismiss={onModalClose}
+        style={styles.modal}
+      >
+        <SwapSelectTokenView onClose={onModalClose} type={showModal} />
+      </Modal>
+    </>
   );
 }

package/src/views/w3m-swap-view/styles.ts

@@ -19,5 +19,9 @@ export default StyleSheet.create({
   actionButton: {
     marginTop: Spacing.xs,
     width: '100%'
+  },
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end'
   }
 });

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

@@ -4,41 +4,25 @@ import { FlatList } from 'react-native';
 import { Icon, ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
-  AssetUtil,
-  ConnectionsController,
-  CoreHelperUtil,
-  EventsController,
-  NetworkController,
-  NetworkUtil,
-  type NetworkControllerState
+  AssetController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
-import type { CaipNetwork } from '@reown/appkit-common-react-native';
+import type { AppKitNetwork } from '@reown/appkit-common-react-native';
 import { useAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function UnsupportedChainView() {
-  const { supportsAllNetworks, approvedCaipNetworkIds, requestedCaipNetworks } = useSnapshot(
-    NetworkController.state
-  ) as NetworkControllerState;
-
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const [disconnecting, setDisconnecting] = useState(false);
-  const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
+  //TODO: should show requested networks disabled
+  // const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
+  const networks = ConnectionsController.getConnectedNetworks();
   const imageHeaders = ApiController._getApiHeaders();
-  const { disconnect } = useAppKit();
+  const { disconnect, switchNetwork } = useAppKit();
 
-  const onNetworkPress = async (network: CaipNetwork) => {
-    //TODO: change to appkit switchNetwork
-    const result = await NetworkUtil.handleNetworkSwitch(network);
-    if (result?.type === 'SWITCH_NETWORK') {
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'SWITCH_NETWORK',
-        properties: {
-          network: network.id
-        }
-      });
-    }
+  const onNetworkPress = async (network: AppKitNetwork) => {
+    switchNetwork(network);
   };
 
   const onDisconnect = async () => {
@@ -64,13 +48,12 @@ 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"
           style={styles.networkItem}
           contentStyle={styles.networkItemContent}
-          disabled={!supportsAllNetworks && !approvedCaipNetworkIds?.includes(item.id)}
         >
           <Text numberOfLines={1} color="fg-100">
             {item.name ?? 'Unknown'}

package/src/views/w3m-upgrade-email-wallet-view/index.tsx

@@ -1,14 +1,10 @@
-import { useSnapshot } from 'valtio';
 import { Linking, StyleSheet } from 'react-native';
 import { Chip, FlexView, Spacing, Text } from '@reown/appkit-ui-react-native';
-import { ConnectorController, type AppKitFrameProvider } from '@reown/appkit-core-react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
 
 export function UpgradeEmailWalletView() {
-  const { connectors } = useSnapshot(ConnectorController.state);
-  const authProvider = connectors.find(c => c.type === 'AUTH')?.provider as AppKitFrameProvider;
-
   const onLinkPress = () => {
-    const link = authProvider.getSecureSiteDashboardURL();
+    const link = ConstantsUtil.SECURE_SITE_DASHBOARD;
     Linking.canOpenURL(link).then(supported => {
       if (supported) Linking.openURL(link);
     });
@@ -20,7 +16,7 @@ export function UpgradeEmailWalletView() {
       <Chip
         label="secure.reown.com"
         rightIcon="externalLink"
-        imageSrc={authProvider.getSecureSiteIconURL()}
+        imageSrc={ConstantsUtil.SECURE_SITE_ICON}
         style={styles.chip}
         onPress={onLinkPress}
       />

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

@@ -2,22 +2,25 @@ import { ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
 import { FlexView, Text, Banner, NetworkImage } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
-  AssetUtil,
-  NetworkController
+  AssetController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function WalletCompatibleNetworks() {
   const { padding } = useCustomDimensions();
-  const { preferredAccountType } = useSnapshot(AccountController.state);
-  const isSmartAccount =
-    preferredAccountType === 'smartAccount' && NetworkController.checkIfSmartAccountEnabled();
+  const { networks, accountType } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const isSmartAccount = accountType === 'smartAccount';
+
   const approvedNetworks = isSmartAccount
-    ? NetworkController.getSmartAccountEnabledNetworks()
-    : NetworkController.getApprovedCaipNetworks();
+    ? ConnectionsController.getSmartAccountEnabledNetworks()
+    : networks.filter(
+        network => network?.chainNamespace === ConnectionsController.state.activeNamespace
+      );
+
   const imageHeaders = ApiController._getApiHeaders();
 
   return (
@@ -32,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

@@ -10,10 +10,10 @@ import {
   UiUtil
 } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
-  AssetUtil,
+  AssetController,
   ConnectionsController,
+  CoreHelperUtil,
   OptionsController,
   RouterController,
   SnackController
@@ -21,28 +21,33 @@ import {
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 
 export function WalletReceiveView() {
-  const { address, profileName /*preferredAccountType*/ } = useSnapshot(AccountController.state);
-  const { activeNetwork, networks } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { activeNetwork, networks, activeAddress, accountType, identity } = useSnapshot(
+    ConnectionsController.state
+  );
+  const address = CoreHelperUtil.getPlainAddress(activeAddress);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   const { padding } = useCustomDimensions();
   const canCopy = OptionsController.isClipboardAvailable();
-  // const isSmartAccount =
-  //   preferredAccountType === 'smartAccount' && NetworkController.checkIfSmartAccountEnabled();
-  // const networks = isSmartAccount
-  //   ? NetworkController.getSmartAccountEnabledNetworks()
-  //   : NetworkController.getApprovedCaipNetworks();
+  const isSmartAccount = accountType === 'smartAccount';
+
+  const approvedNetworks = isSmartAccount
+    ? ConnectionsController.getSmartAccountEnabledNetworks()
+    : networks.filter(
+        network => network?.chainNamespace === ConnectionsController.state.activeNamespace
+      );
 
-  const imagesArray = networks
+  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({
-    string: profileName ?? address ?? '',
-    charsStart: profileName ? 30 : 4,
-    charsEnd: profileName ? 0 : 4,
-    truncate: profileName ? 'end' : 'middle'
+    string: identity?.name ?? address ?? '',
+    charsStart: identity?.name ? 30 : 4,
+    charsEnd: identity?.name ? 0 : 4,
+    truncate: identity?.name ? 'end' : 'middle'
   });
 
   const onNetworkPress = () => {
@@ -50,8 +55,8 @@ export function WalletReceiveView() {
   };
 
   const onCopyAddress = () => {
-    if (canCopy && AccountController.state.address) {
-      OptionsController.copyToClipboard(AccountController.state.address);
+    if (canCopy && address) {
+      OptionsController.copyToClipboard(address);
       SnackController.showSuccess('Address copied');
     }
   };

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

@@ -1,5 +1,5 @@
-import { AssetUtil } from '@reown/appkit-core-react-native';
-import type { CaipNetwork } from '@reown/appkit-common-react-native';
+import { AssetController } from '@reown/appkit-core-react-native';
+import type { AppKitNetwork } from '@reown/appkit-common-react-native';
 import {
   BorderRadius,
   FlexView,
@@ -10,11 +10,12 @@ 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;
   name?: string;
-  caipNetwork?: CaipNetwork;
+  activeNetwork?: AppKitNetwork;
   networkFee?: number;
   style?: StyleProp<ViewStyle>;
 }
@@ -22,11 +23,11 @@ export interface PreviewSendDetailsProps {
 export function PreviewSendDetails({
   address,
   name,
-  caipNetwork,
-  networkFee,
+  activeNetwork,
   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(caipNetwork?.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'}