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

package/src/views/w3m-account-default-view/components/auth-buttons.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { UpgradeWalletButton } from './upgrade-wallet-button';
-import { ListItem, ListSocial, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { ListSocial, Spacing, Text } from '@reown/appkit-ui-react-native';
 import type { SocialProvider } from '@reown/appkit-common-react-native';
 
 export interface AuthButtonsProps {
@@ -27,25 +27,14 @@ export function AuthButtons({
           logoHeight={32}
           logoWidth={32}
           style={[styles.socialContainer, style]}
+          onPress={onPress}
+          chevron={socialProvider === 'email'}
         >
           <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail" style={styles.socialText}>
             {text}
           </Text>
         </ListSocial>
-      ) : (
-        <ListItem
-          icon="mail"
-          onPress={onPress}
-          chevron
-          testID="button-email"
-          iconColor="fg-100"
-          style={style}
-        >
-          <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail">
-            {text}
-          </Text>
-        </ListItem>
-      )}
+      ) : null}
     </>
   );
 }

package/src/views/w3m-account-default-view/index.tsx

@@ -2,24 +2,21 @@ import { useSnapshot } from 'valtio';
 import { useState } from 'react';
 import { Linking, ScrollView } from 'react-native';
 import {
-  AccountController,
   ApiController,
-  AssetUtil,
-  ConnectionController,
-  ConnectorController,
   CoreHelperUtil,
   EventsController,
   ModalController,
-  NetworkController,
   OptionsController,
   RouterController,
   SnackController,
-  type AppKitFrameProvider,
   ConstantsUtil,
   SwapController,
   OnRampController,
-  ConnectionsController
+  ConnectionsController,
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
+// import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import {
   Avatar,
   Button,
@@ -31,37 +28,38 @@ import {
   ListItem
 } from '@reown/appkit-ui-react-native';
 
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { AuthButtons } from './components/auth-buttons';
 import styles from './styles';
 
 export function AccountDefaultView() {
-  const { profileName, profileImage, preferredAccountType } = useSnapshot(AccountController.state);
+  const { switchAccountType, disconnect } = useInternalAppKit();
   const { loading } = useSnapshot(ModalController.state);
   const {
     activeAddress: address,
     activeBalance: balance,
     activeNetwork,
-    activeNamespace
+    activeNamespace,
+    connection,
+    accountType,
+    identity
   } = useSnapshot(ConnectionsController.state);
   const account = address?.split(':')[2];
   const [disconnecting, setDisconnecting] = useState(false);
-  const { connectedConnector } = useSnapshot(ConnectorController.state);
-  const { connectedSocialProvider } = useSnapshot(ConnectionController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const showCopy = OptionsController.isClipboardAvailable();
-  const isAuth = connectedConnector === 'AUTH';
+  const isAuth = !!connection?.properties?.provider;
   const showBalance = balance && !isAuth;
   const showExplorer = Object.keys(activeNetwork?.blockExplorers ?? {}).length > 0 && !isAuth;
   const showBack = history.length > 1;
-  const showSwitchAccountType = isAuth && NetworkController.checkIfSmartAccountEnabled();
+  const showSwitchAccountType = isAuth && activeNamespace === 'eip155';
   const showActivity =
     !isAuth &&
-    activeNamespace &&
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
   const showSwaps =
@@ -69,8 +67,17 @@ export function AccountDefaultView() {
     features?.swaps &&
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(activeNetwork.caipNetworkId);
+
+  const showSend =
+    !isAuth && activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
+  const showBuy =
+    !isAuth &&
+    isOnRampEnabled &&
+    activeNamespace &&
+    ConstantsUtil.ONRAMP_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
   const { padding } = useCustomDimensions();
-  const { disconnect } = useAppKit();
 
   async function onDisconnect() {
     setDisconnecting(true);
@@ -80,41 +87,17 @@ export function AccountDefaultView() {
 
   const onSwitchAccountType = async () => {
     try {
-      if (isAuth) {
-        ModalController.setLoading(true);
-        const accountType =
-          AccountController.state.preferredAccountType === 'eoa' ? 'smartAccount' : 'eoa';
-        const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-        await provider?.setPreferredAccount(accountType);
-        EventsController.sendEvent({
-          type: 'track',
-          event: 'SET_PREFERRED_ACCOUNT_TYPE',
-          properties: {
-            accountType,
-            network: ConnectionsController.state.activeNetwork?.caipNetworkId || ''
-          }
-        });
+      const namespace = ConnectionsController.state.activeNamespace;
+      const network = ConnectionsController.state.activeNetwork;
+      if (isAuth && namespace && network) {
+        const newType = ConnectionsController.state.accountType === 'eoa' ? 'smartAccount' : 'eoa';
+        switchAccountType(namespace, newType, network);
       }
     } catch (error) {
-      ModalController.setLoading(false);
       SnackController.showError('Error switching account type');
     }
   };
 
-  const getUserEmail = () => {
-    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-    if (!provider) return '';
-
-    return provider.getEmail();
-  };
-
-  const getUsername = () => {
-    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-    if (!provider) return '';
-
-    return provider.getUsername();
-  };
-
   const onExplorerPress = () => {
     if (showExplorer && ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url) {
       Linking.openURL(ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url);
@@ -122,9 +105,8 @@ export function AccountDefaultView() {
   };
 
   const onCopyAddress = () => {
-    //TODO: Check ENS name
     if (OptionsController.isClipboardAvailable() && ConnectionsController.state.activeAddress) {
-      const _address = ConnectionsController.state.activeAddress.split(':')[2];
+      const _address = CoreHelperUtil.getPlainAddress(ConnectionsController.state.activeAddress);
       if (_address) {
         OptionsController.copyToClipboard(_address);
         SnackController.showSuccess('Address copied');
@@ -133,7 +115,7 @@ export function AccountDefaultView() {
   };
 
   const onSwapPress = () => {
-    SwapController.resetState();
+    SwapController.clearTokens();
     EventsController.sendEvent({
       type: 'track',
       event: 'OPEN_SWAP',
@@ -173,16 +155,37 @@ export function AccountDefaultView() {
     RouterController.push('UpgradeEmailWallet');
   };
 
-  const onEmailPress = () => {
-    if (ConnectionController.state.connectedSocialProvider) return;
-    RouterController.push('UpdateEmailWallet', { email: getUserEmail() });
+  const onSendPress = () => {
+    const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+    const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SEND',
+      properties: { network, isSmartAccount }
+    });
+    RouterController.push('WalletSend');
+  };
+
+  const onEmailPress = async () => {
+    // TODO: Uncomment when email update is enabled
+    // const email = ConnectionsController.state.connection?.properties?.email;
+    // const provider = ConnectionsController.state.connection?.properties?.provider;
+    // if (provider !== 'email' || !email) return;
+    // const sessionTopic = ConnectionsController.state.connection?.properties?.sessionTopic;
+    // if (!sessionTopic) {
+    //   throw new Error('Session topic not found');
+    // }
+    // const link = `${CommonConstantsUtil.WEB_WALLET_URL}/emailUpdate/${sessionTopic}`;
+    // await CoreHelperUtil.openLink(link);
+    // Subscribe to email update event
   };
 
   return (
     <>
-      {showBack && (
+      {showBack ? (
         <IconLink icon="chevronLeft" style={styles.backIcon} onPress={RouterController.goBack} />
-      )}
+      ) : null}
       <IconLink
         icon="close"
         style={styles.closeIcon}
@@ -191,12 +194,12 @@ export function AccountDefaultView() {
       />
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
         <FlexView alignItems="center" padding={['3xl', 's', '3xl', 's']}>
-          <Avatar imageSrc={profileImage} address={account ?? ''} />
+          <Avatar imageSrc={identity?.avatar} address={account ?? ''} />
           <FlexView flexDirection="row" alignItems="center" margin={['s', '0', '0', '0']}>
             <Text variant="medium-title-600">
-              {profileName
+              {identity?.name
                 ? UiUtil.getTruncateString({
-                    string: profileName,
+                    string: identity?.name,
                     charsStart: 20,
                     charsEnd: 0,
                     truncate: 'end'
@@ -208,7 +211,7 @@ export function AccountDefaultView() {
                     truncate: 'middle'
                   })}
             </Text>
-            {showCopy && (
+            {showCopy ? (
               <IconLink
                 icon="copy"
                 size="md"
@@ -216,14 +219,14 @@ export function AccountDefaultView() {
                 onPress={onCopyAddress}
                 style={styles.copyButton}
               />
-            )}
+            ) : null}
           </FlexView>
-          {showBalance && (
+          {showBalance ? (
             <Text variant="paragraph-400" color="fg-200">
               {CoreHelperUtil.formatBalance(balance.amount, balance.symbol, 6)}
             </Text>
-          )}
-          {showExplorer && (
+          ) : null}
+          {showExplorer ? (
             <Button
               size="sm"
               variant="shade"
@@ -234,22 +237,22 @@ export function AccountDefaultView() {
             >
               Block Explorer
             </Button>
-          )}
+          ) : null}
           <FlexView margin={['s', '0', '0', '0']}>
-            {isAuth && (
+            {isAuth ? (
               <AuthButtons
                 onUpgradePress={onUpgradePress}
-                socialProvider={connectedSocialProvider}
+                socialProvider={connection?.properties?.provider}
                 onPress={onEmailPress}
                 style={styles.actionButton}
                 text={UiUtil.getTruncateString({
-                  string: getUsername() || getUserEmail() || '',
+                  string: connection?.properties?.username || connection?.properties?.email || '',
                   charsStart: 30,
                   charsEnd: 0,
                   truncate: 'end'
                 })}
               />
-            )}
+            ) : null}
             <ListItem
               chevron
               icon="networkPlaceholder"
@@ -265,7 +268,7 @@ export function AccountDefaultView() {
                 {activeNetwork?.name}
               </Text>
             </ListItem>
-            {!isAuth && isOnRampEnabled && (
+            {showBuy ? (
               <ListItem
                 chevron
                 icon="card"
@@ -277,8 +280,21 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Buy crypto</Text>
               </ListItem>
-            )}
-            {showSwaps && (
+            ) : null}
+            {showSend ? (
+              <ListItem
+                chevron
+                icon="paperplane"
+                iconColor="accent-100"
+                iconBackgroundColor="accent-glass-015"
+                onPress={onSendPress}
+                testID="button-send"
+                style={styles.actionButton}
+              >
+                <Text color="fg-100">Send</Text>
+              </ListItem>
+            ) : null}
+            {showSwaps ? (
               <ListItem
                 chevron
                 icon="recycleHorizontal"
@@ -290,8 +306,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Swap</Text>
               </ListItem>
-            )}
-            {showActivity && (
+            ) : null}
+            {showActivity ? (
               <ListItem
                 chevron
                 icon="clock"
@@ -303,8 +319,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Activity</Text>
               </ListItem>
-            )}
-            {showSwitchAccountType && (
+            ) : null}
+            {showSwitchAccountType ? (
               <ListItem
                 chevron
                 icon="swapHorizontal"
@@ -316,10 +332,10 @@ export function AccountDefaultView() {
                 loading={loading}
               >
                 <Text color="fg-100">{`Switch to your ${
-                  preferredAccountType === 'eoa' ? 'smart account' : 'EOA'
+                  accountType === 'eoa' ? 'smart account' : 'EOA'
                 }`}</Text>
               </ListItem>
-            )}
+            ) : null}
             <ListItem
               icon="disconnect"
               onPress={onDisconnect}

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { ScrollView } from 'react-native';
 import {
   AccountPill,
@@ -7,16 +7,16 @@ import {
   Icon,
   IconLink,
   NetworkButton,
-  useTheme,
-  Promo
+  useTheme
 } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
+  AssetController,
   AssetUtil,
   ConnectionsController,
+  CoreHelperUtil,
+  EventsController,
   ModalController,
-  NetworkController,
   RouterController,
   SendController
 } from '@reown/appkit-core-react-native';
@@ -27,13 +27,12 @@ import styles from './styles';
 
 export function AccountView() {
   const Theme = useTheme();
+  const [isLoading, setIsLoading] = useState(false);
   const { padding } = useCustomDimensions();
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const { address, profileName, profileImage, preferredAccountType } = useSnapshot(
-    AccountController.state
-  );
-  const showActivate =
-    preferredAccountType === 'eoa' && NetworkController.checkIfSmartAccountEnabled();
+  const { activeNetwork, activeAddress, identity } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const address = CoreHelperUtil.getPlainAddress(activeAddress);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const onProfilePress = () => {
     RouterController.push('AccountDefault');
@@ -41,22 +40,24 @@ export function AccountView() {
 
   const onNetworkPress = () => {
     RouterController.push('Networks');
-  };
-
-  const onActivatePress = () => {
-    RouterController.push('UpgradeToSmartAccount');
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_NETWORKS'
+    });
   };
 
   useEffect(() => {
-    AccountController.fetchTokenBalance();
-    SendController.resetSend();
-  }, []);
+    async function fetchBalance() {
+      setIsLoading(true);
+      await ConnectionsController.fetchBalance();
+      setIsLoading(false);
+    }
 
-  useEffect(() => {
-    AccountController.fetchTokenBalance();
+    fetchBalance();
+    SendController.resetState();
 
     const balanceInterval = setInterval(() => {
-      AccountController.fetchTokenBalance();
+      fetchBalance();
     }, 10000);
 
     return () => {
@@ -75,7 +76,7 @@ export function AccountView() {
       ]}
     >
       <NetworkButton
-        imageSrc={AssetUtil.getNetworkImage(activeNetwork?.id)}
+        imageSrc={networkImage}
         imageHeaders={ApiController._getApiHeaders()}
         onPress={onNetworkPress}
         style={styles.networkIcon}
@@ -85,21 +86,14 @@ export function AccountView() {
       </NetworkButton>
       <IconLink icon="close" style={styles.closeIcon} onPress={ModalController.close} />
       <FlexView padding={['3xl', '0', '0', '0']} style={[{ backgroundColor: Theme['bg-100'] }]}>
-        {showActivate && (
-          <Promo
-            style={styles.promoPill}
-            text="Switch to your smart account"
-            onPress={onActivatePress}
-          />
-        )}
         <AccountPill
           address={address}
-          profileName={profileName}
-          profileImage={profileImage}
+          profileName={identity?.name}
+          profileImage={identity?.avatar}
           onPress={onProfilePress}
           style={styles.accountPill}
         />
-        <AccountWalletFeatures />
+        <AccountWalletFeatures isBalanceLoading={isLoading} />
       </FlexView>
     </ScrollView>
   );

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

@@ -23,10 +23,5 @@ export default StyleSheet.create({
     alignSelf: 'center',
     marginBottom: Spacing.s,
     marginHorizontal: Spacing.s
-  },
-  promoPill: {
-    marginTop: Spacing.xs,
-    marginBottom: Spacing['2xl'],
-    alignSelf: 'center'
   }
 });

package/src/views/w3m-all-wallets-view/index.tsx

@@ -1,11 +1,6 @@
 import { useState } from 'react';
-import {
-  ConnectionController,
-  ConnectorController,
-  EventsController,
-  RouterController,
-  type WcWallet
-} from '@reown/appkit-core-react-native';
+import { WcController, EventsController, RouterController } from '@reown/appkit-core-react-native';
+import { type WcWallet, ConstantsUtil } from '@reown/appkit-common-react-native';
 import { FlexView, IconLink, SearchBar, Spacing, useTheme } from '@reown/appkit-ui-react-native';
 
 import styles from './styles';
@@ -25,9 +20,11 @@ export function AllWalletsView() {
   const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
 
   const onWalletPress = (wallet: WcWallet) => {
-    const connector = ConnectorController.state.connectors.find(c => c.explorerId === wallet.id);
-    if (connector) {
-      RouterController.push('ConnectingExternal', { connector, wallet });
+    const isExternal =
+      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id;
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
     } else {
       RouterController.push('ConnectingWalletConnect', { wallet });
     }
@@ -40,8 +37,8 @@ export function AllWalletsView() {
   };
 
   const onQrCodePress = () => {
-    ConnectionController.removePressedWallet();
-    ConnectionController.removeWcLinking();
+    WcController.removePressedWallet();
+    WcController.removeWcLinking();
     RouterController.push('ConnectingWalletConnect');
 
     EventsController.sendEvent({

package/src/views/w3m-connect-socials-view/index.tsx

@@ -1,13 +1,10 @@
-import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
 import { StringUtil, type SocialProvider } from '@reown/appkit-common-react-native';
 import {
-  ConnectionController,
   EventsController,
   OptionsController,
-  RouterController,
-  WebviewController
+  RouterController
 } from '@reown/appkit-core-react-native';
 import { FlexView, ListSocial, Text } from '@reown/appkit-ui-react-native';
 
@@ -20,22 +17,14 @@ export function ConnectSocialsView() {
   const socialProviders = (features?.socials ?? []) as SocialProvider[];
 
   const onItemPress = (provider: SocialProvider) => {
-    ConnectionController.setSelectedSocialProvider(provider);
     EventsController.sendEvent({
       type: 'track',
       event: 'SOCIAL_LOGIN_STARTED',
       properties: { provider }
     });
-    if (provider === 'farcaster') {
-      RouterController.push('ConnectingFarcaster');
-    } else {
-      RouterController.push('ConnectingSocial');
-    }
-  };
 
-  useEffect(() => {
-    WebviewController.setConnecting(false);
-  }, []);
+    RouterController.push('ConnectingSocial', { socialProvider: provider });
+  };
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>

package/src/views/w3m-connect-view/components/all-wallet-list.tsx

@@ -3,10 +3,10 @@ import { useSnapshot } from 'valtio';
 import {
   ApiController,
   AssetUtil,
-  ConnectionController,
-  type ConnectionControllerState,
-  type WcWallet
+  WcController,
+  type WcControllerState
 } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import { ListItemLoader, ListWallet } from '@reown/appkit-ui-react-native';
 import { UiUtil } from '../../../utils/UiUtil';
 import { filterOutRecentWallets } from '../utils';
@@ -14,12 +14,11 @@ import { filterOutRecentWallets } from '../utils';
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onWalletPress: (wallet: WcWallet) => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function AllWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
+export function AllWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
+  const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
@@ -35,7 +34,7 @@ export function AllWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled
     UiUtil.TOTAL_VISIBLE_WALLETS - RECENT_COUNT
   );
 
-  if (!isWalletConnectEnabled || !list?.length) {
+  if (!list?.length) {
     return null;
   }
 

package/src/views/w3m-connect-view/components/all-wallets-button.tsx

@@ -6,16 +6,11 @@ import type { StyleProp, ViewStyle } from 'react-native';
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onPress: () => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function AllWalletsButton({ itemStyle, onPress, isWalletConnectEnabled }: Props) {
+export function AllWalletsButton({ itemStyle, onPress }: Props) {
   const { installed, count } = useSnapshot(ApiController.state);
 
-  if (!isWalletConnectEnabled) {
-    return null;
-  }
-
   const total = installed.length + count;
   const label = total > 10 ? `${Math.floor(total / 10) * 10}+` : total;