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

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

@@ -4,41 +4,24 @@ import { FlatList } from 'react-native';
 import { Icon, 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.getConnectedNetworks();
   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) => {
+    switchNetwork(network);
   };
 
   const onDisconnect = async () => {
@@ -64,13 +47,12 @@ 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'}

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,27 +2,31 @@ import { ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
 import { FlexView, Text, Banner, NetworkImage } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   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', '2xl', 's']} margin={['0', '0', '2xl', '0']}>
         <Banner icon="warningCircle" text="You can only receive assets on these networks." />
         {approvedNetworks.map((network, index) => (
           <FlexView
@@ -32,7 +36,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

@@ -10,10 +10,11 @@ import {
   UiUtil
 } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
+  AssetController,
   AssetUtil,
   ConnectionsController,
+  CoreHelperUtil,
   OptionsController,
   RouterController,
   SnackController
@@ -21,28 +22,36 @@ 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 = 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');
     }
   };

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

@@ -3,7 +3,7 @@ import { ScrollView } from 'react-native';
 import { Avatar, Button, FlexView, Icon, Image, Text, UiUtil } 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';
@@ -14,18 +14,12 @@ 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;
 
@@ -109,10 +103,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} />

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 {
-  AccountController,
+  AssetController,
   AssetUtil,
   ConnectionsController,
   RouterController,
@@ -17,17 +17,16 @@ import styles from './styles';
 
 export function WalletSendSelectTokenView() {
   const { padding } = useCustomDimensions();
-  const { tokenBalance } = useSnapshot(AccountController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const { token } = useSnapshot(SendController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const [tokenSearch, setTokenSearch] = useState<string>('');
-  const [filteredTokens, setFilteredTokens] = useState(tokenBalance ?? []);
+  const [filteredTokens, setFilteredTokens] = useState(balances ?? []);
 
   const onSearchChange = (value: string) => {
     setTokenSearch(value);
-    const filtered = AccountController.state.tokenBalance?.filter(_token =>
-      _token.name.toLowerCase().includes(value.toLowerCase())
+    const filtered = ConnectionsController.state.balances?.filter(
+      _token => _token.name?.toLowerCase().includes(value.toLowerCase())
     );
     setFilteredTokens(filtered ?? []);
   };
@@ -60,14 +59,13 @@ export function WalletSendSelectTokenView() {
           filteredTokens.map((_token, index) => (
             <ListToken
               key={`${_token.name}${index}`}
-              name={_token.name}
+              name={_token.name || ''}
               imageSrc={_token.iconUrl}
               networkSrc={networkImage}
               value={_token.value}
-              amount={_token.quantity.numeric}
+              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,14 +1,13 @@
-import { useCallback, useEffect } from 'react';
-import { Platform, ScrollView } from 'react-native';
+import { useEffect, useState } from 'react';
+import { ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
-  AccountController,
+  ConnectionsController,
   CoreHelperUtil,
   RouterController,
-  SendController,
-  SwapController
+  SendController
 } from '@reown/appkit-core-react-native';
-import { Button, FlexView, IconBox, Spacing } from '@reown/appkit-ui-react-native';
+import { Button, FlexView, IconBox } from '@reown/appkit-ui-react-native';
 import { SendInputToken } from '../../partials/w3m-send-input-token';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { useKeyboard } from '../../hooks/useKeyboard';
@@ -17,24 +16,11 @@ 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 { tokenBalance } = useSnapshot(AccountController.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 { keyboardShown } = useKeyboard();
+  const [isBalanceLoading, setBalanceLoading] = useState(false);
+  const { token, sendTokenAmount, receiverAddress, receiverProfileName, loading } = useSnapshot(
+    SendController.state
+  );
 
   const onSendPress = () => {
     RouterController.push('WalletSendPreview');
@@ -47,7 +33,7 @@ export function WalletSendView() {
 
     if (
       SendController.state.sendTokenAmount &&
-      SendController.state.token &&
+      SendController.state.token?.quantity &&
       SendController.state.sendTokenAmount > Number(SendController.state.token.quantity.numeric)
     ) {
       return 'Insufficient funds';
@@ -66,7 +52,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,27 +68,30 @@ export function WalletSendView() {
   };
 
   useEffect(() => {
-    if (!token) {
-      SendController.setToken(tokenBalance?.[0]);
+    async function fetchBalance() {
+      setBalanceLoading(true);
+      await ConnectionsController.fetchBalance();
+      setBalanceLoading(false);
     }
-    fetchNetworkPrice();
-  }, [token, tokenBalance, fetchNetworkPrice]);
+
+    fetchBalance();
+  }, []);
 
   const actionText = getActionText();
 
   return (
     <ScrollView
-      style={{ paddingHorizontal: padding }}
+      style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
       bounces={false}
       keyboardShouldPersistTaps="always"
     >
-      <FlexView padding="l" alignItems="center" justifyContent="center" style={{ paddingBottom }}>
+      <FlexView padding={['l', 'l', '2xl', 'l']} alignItems="center" justifyContent="center">
         <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 +111,7 @@ export function WalletSendView() {
           style={styles.sendButton}
           onPress={onSendPress}
           disabled={!actionText.includes('Preview send')}
-          loading={loading}
+          loading={loading || isBalanceLoading}
         >
           {actionText}
         </Button>

package/src/views/w3m-wallet-send-view/styles.ts

@@ -17,5 +17,8 @@ export default StyleSheet.create({
   },
   addressContainer: {
     width: '100%'
+  },
+  withKeyboard: {
+    height: '100%'
   }
 });