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

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

@@ -1,12 +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,
-  NetworkController,
   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';
@@ -17,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,
@@ -35,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(
@@ -65,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),
@@ -82,30 +90,29 @@ export function SwapView() {
     onDebouncedSwap();
   };
 
-  const onSourceTokenPress = () => {
-    RouterController.push('SwapSelectToken', { swapTarget: 'sourceToken' });
-  };
-
   const onReviewPress = () => {
     EventsController.sendEvent({
       type: 'track',
       event: 'INITIATE_SWAP',
       properties: {
-        network: NetworkController.state.caipNetwork?.id || '',
+        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');
   };
 
   const onSourceMaxPress = () => {
-    const isNetworkToken =
-      SwapController.state.sourceToken?.address ===
-      NetworkController.getActiveNetworkTokenAddress();
+    const { activeNamespace, activeCaipNetworkId } = ConnectionsController.state;
+    const networkTokenAddress = activeNamespace
+      ? `${activeCaipNetworkId}:${ConstantsUtil.NATIVE_TOKEN_ADDRESS[activeNamespace]}`
+      : undefined;
+
+    const isNetworkToken = SwapController.state.sourceToken?.address === networkTokenAddress;
 
     const _gasPriceInUSD = SwapController.state.gasPriceInUSD;
     const _sourceTokenPriceInUSD = SwapController.state.sourceTokenPriceInUSD;
@@ -129,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'}

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,8 +3,7 @@ import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
 import { FlexView, InputText, ListToken, Text } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   RouterController,
   SendController
@@ -17,17 +16,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 = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   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 +58,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}
             />
           ))
         ) : (