@reown/appkit-react-native 2.0.0 → 2.0.1

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

@@ -1,27 +1,32 @@
 import { useSnapshot } from 'valtio';
-import { useCallback, useEffect } from 'react';
-import { Platform, ScrollView } from 'react-native';
+import { useEffect, useState } from 'react';
+import { ScrollView } from 'react-native';
 import {
-  AccountController,
   ConnectionsController,
   ConstantsUtil,
   EventsController,
   RouterController,
   SwapController
 } 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';
+import {
+  Button,
+  FlexView,
+  IconLink,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import { NumberUtil, type SwapInputTarget } from '@reown/appkit-common-react-native';
 
 import { useKeyboard } from '../../hooks/useKeyboard';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { SwapInput } from '../../partials/w3m-swap-input';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { SwapDetails } from '../../partials/w3m-swap-details';
 import styles from './styles';
+import { SwapSelectTokenModal } from './components/select-token-modal';
 
 export function SwapView() {
   const {
-    initializing,
+    loadingTokens,
     sourceToken,
     toToken,
     sourceTokenAmount,
@@ -34,21 +39,21 @@ export function SwapView() {
     inputError
   } = useSnapshot(SwapController.state);
   const Theme = useTheme();
-  const { padding } = useCustomDimensions();
+  const { padding, maxHeight } = 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(
       token => token.address === SwapController.state.toToken?.address
     ) >= 0;
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const getActionButtonState = () => {
     if (!SwapController.state.sourceToken || !SwapController.state.toToken) {
       return { text: 'Select token', disabled: true };
@@ -66,7 +71,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,21 +88,17 @@ export function SwapView() {
     onDebouncedSwap();
   };
 
-  const onSourceTokenPress = () => {
-    RouterController.push('SwapSelectToken', { swapTarget: 'sourceToken' });
-  };
-
   const onReviewPress = () => {
     EventsController.sendEvent({
       type: 'track',
       event: 'INITIATE_SWAP',
       properties: {
-        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId,
         swapFromToken: SwapController.state.sourceToken?.symbol || '',
         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 +134,84 @@ 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, maxHeight }]}
+        contentContainerStyle={
+          keyboardShown && !showModal ? { paddingBottom: keyboardHeight } : undefined
+        }
+        bounces={false}
+        keyboardShouldPersistTaps="always"
+      >
+        <FlexView padding="l" alignItems="center" justifyContent="center">
           <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}
+              />
+            ) : null}
+          </FlexView>
+          {showDetails ? <SwapDetails /> : null}
+          <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>
+      <SwapSelectTokenModal visible={!!showModal} onClose={onModalClose} type={showModal} />
+    </>
   );
 }

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

@@ -1,44 +1,26 @@
 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 { ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
+  AssetController,
   AssetUtil,
-  ConnectionsController,
-  CoreHelperUtil,
-  EventsController,
-  NetworkController,
-  NetworkUtil,
-  type NetworkControllerState
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
-import type { CaipNetwork } from '@reown/appkit-common-react-native';
-import { useAppKit } from '../../AppKitContext';
+import type { AppKitNetwork } from '@reown/appkit-common-react-native';
+import { useInternalAppKit } 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);
+  const networks = ConnectionsController.getAvailableNetworks();
   const imageHeaders = ApiController._getApiHeaders();
-  const { disconnect } = useAppKit();
+  const { disconnect, switchNetwork } = useInternalAppKit();
 
-  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) => {
+    await switchNetwork(network);
   };
 
   const onDisconnect = async () => {
@@ -54,8 +36,8 @@ export function UnsupportedChainView() {
       ListHeaderComponentStyle={styles.header}
       ListHeaderComponent={
         <Text variant="small-400" color="fg-200" center>
-          The swap feature doesn't support your current network. Switch to an available option to
-          continue.
+          The current network is not supported by this application. Please switch to an available
+          option to continue.
         </Text>
       }
       contentContainerStyle={styles.contentContainer}
@@ -64,18 +46,16 @@ export function UnsupportedChainView() {
           key={item.id}
           icon="networkPlaceholder"
           iconBackgroundColor="gray-glass-010"
-          imageSrc={AssetUtil.getNetworkImage(item.id)}
+          imageSrc={AssetUtil.getNetworkImage(item, networkImages)}
           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'}
           </Text>
-          {item.id === activeNetwork?.id && <Icon name="checkmark" color="accent-100" />}
         </ListItem>
       )}
       ListFooterComponent={

package/src/views/w3m-unsupported-chain-view/styles.ts

@@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   contentContainer: {
     padding: Spacing.s,
-    paddingBottom: Spacing.xl
+    paddingBottom: Spacing['s']
   },
   header: {
     marginBottom: Spacing.s

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

@@ -1,26 +1,20 @@
-import { useSnapshot } from 'valtio';
-import { Linking, StyleSheet } from 'react-native';
+import { 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';
+import { CoreHelperUtil } from '@reown/appkit-core-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();
-    Linking.canOpenURL(link).then(supported => {
-      if (supported) Linking.openURL(link);
-    });
+    CoreHelperUtil.openLink(ConstantsUtil.SECURE_SITE_DASHBOARD);
   };
 
   return (
-    <FlexView padding={['l', 'l', '3xl', 'l']} alignItems="center">
+    <FlexView padding={['l', 'l', 's', 'l']} alignItems="center">
       <Text variant="paragraph-400">Follow the instructions on</Text>
       <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

@@ -1,28 +1,37 @@
 import { ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
-import { FlexView, Text, Banner, NetworkImage } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
+  FlexView,
+  Text,
+  Banner,
+  NetworkImage,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import {
   ApiController,
+  AssetController,
   AssetUtil,
-  NetworkController
+  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 (
     <ScrollView bounces={false} style={{ paddingHorizontal: padding }} fadingEdgeLength={20}>
-      <FlexView padding={['xl', 's', '2xl', 's']}>
+      <FlexView padding={['xl', 's', 's', 's']}>
         <Banner icon="warningCircle" text="You can only receive assets on these networks." />
         {approvedNetworks.map((network, index) => (
           <FlexView
@@ -32,7 +41,7 @@ export function WalletCompatibleNetworks() {
             padding={['s', 's', 's', 's']}
           >
             <NetworkImage
-              imageSrc={AssetUtil.getNetworkImage(network?.id)}
+              imageSrc={AssetUtil.getNetworkImage(network, networkImages)}
               imageHeaders={imageHeaders}
               size="sm"
               style={styles.image}

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

@@ -7,42 +7,51 @@ import {
   QrCode,
   Spacing,
   Text,
-  UiUtil
+  UiUtil,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
+  AssetController,
   AssetUtil,
   ConnectionsController,
+  CoreHelperUtil,
   OptionsController,
   RouterController,
   SnackController
 } from '@reown/appkit-core-react-native';
-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 = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   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 =>
+        network.imageUrl ?? AssetUtil.getNetworkImage(network, AssetController.state.networkImages)
+    )
     .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 +59,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');
     }
   };
@@ -60,7 +69,7 @@ export function WalletReceiveView() {
 
   return (
     <ScrollView bounces={false} style={{ paddingHorizontal: padding }}>
-      <FlexView padding={['xl', 'xl', '2xl', 'xl']} alignItems="center">
+      <FlexView padding="xl" alignItems="center">
         <Chip
           label={label}
           rightIcon={canCopy ? 'copy' : undefined}

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, AssetUtil } 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 = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   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

@@ -1,31 +1,33 @@
 import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
-import { Avatar, Button, FlexView, Icon, Image, Text, UiUtil } from '@reown/appkit-ui-react-native';
+import {
+  Avatar,
+  Button,
+  FlexView,
+  Icon,
+  Image,
+  Text,
+  UiUtil,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import { NumberUtil } from '@reown/appkit-common-react-native';
 import {
-  NetworkController,
+  ConnectionsController,
   RouterController,
   SendController
 } from '@reown/appkit-core-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { PreviewSendPill } from './components/preview-send-pill';
 import styles from './styles';
 import { PreviewSendDetails } from './components/preview-send-details';
 
 export function WalletSendPreviewView() {
   const { padding } = useCustomDimensions();
-  const { caipNetwork } = useSnapshot(NetworkController.state);
-  const {
-    token,
-    receiverAddress,
-    receiverProfileName,
-    receiverProfileImageUrl,
-    gasPriceInUSD,
-    loading
-  } = useSnapshot(SendController.state);
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { token, receiverAddress, receiverProfileName, receiverProfileImageUrl, loading } =
+    useSnapshot(SendController.state);
 
   const getSendValue = () => {
-    if (SendController.state.token && SendController.state.sendTokenAmount) {
+    if (SendController.state.token?.price && SendController.state.sendTokenAmount) {
       const price = SendController.state.token.price;
       const totalValue = price * SendController.state.sendTokenAmount;
 
@@ -68,7 +70,7 @@ export function WalletSendPreviewView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }}>
-      <FlexView padding={['l', 'xl', '3xl', 'xl']}>
+      <FlexView padding={['l', 'xl', 'l', 'xl']}>
         <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
           <FlexView>
             <Text variant="small-400" color="fg-150">
@@ -109,10 +111,9 @@ export function WalletSendPreviewView() {
         </FlexView>
         <PreviewSendDetails
           style={styles.details}
-          networkFee={gasPriceInUSD}
           address={receiverAddress}
           name={receiverProfileName}
-          caipNetwork={caipNetwork}
+          activeNetwork={activeNetwork}
         />
         <FlexView flexDirection="row" alignItems="center" justifyContent="center">
           <Icon name="warningCircle" size="sm" color="fg-200" style={styles.reviewIcon} />