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

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,15 @@ import {
   Icon,
   IconLink,
   NetworkButton,
-  useTheme,
-  Promo
+  useTheme
 } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
-  AssetUtil,
+  AssetController,
   ConnectionsController,
+  CoreHelperUtil,
+  EventsController,
   ModalController,
-  NetworkController,
   RouterController,
   SendController
 } from '@reown/appkit-core-react-native';
@@ -27,13 +26,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 = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   const onProfilePress = () => {
     RouterController.push('AccountDefault');
@@ -41,22 +39,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 +75,7 @@ export function AccountView() {
       ]}
     >
       <NetworkButton
-        imageSrc={AssetUtil.getNetworkImage(activeNetwork?.id)}
+        imageSrc={networkImage}
         imageHeaders={ApiController._getApiHeaders()}
         onPress={onNetworkPress}
         style={styles.networkIcon}
@@ -85,21 +85,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,12 +1,12 @@
 import { useState } from 'react';
 import {
   ConnectionController,
-  ConnectorController,
   EventsController,
   RouterController,
   type WcWallet
 } from '@reown/appkit-core-react-native';
 import { FlexView, IconLink, SearchBar, Spacing, useTheme } from '@reown/appkit-ui-react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
 
 import styles from './styles';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
@@ -25,9 +25,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_EXPLORER_ID ||
+      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
     } else {
       RouterController.push('ConnectingWalletConnect', { wallet });
     }

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

@@ -14,10 +14,9 @@ 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 imageHeaders = ApiController._getApiHeaders();
@@ -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;
 

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

@@ -6,7 +6,8 @@ import {
   type OptionsControllerState,
   ApiController,
   ConnectionController,
-  type ConnectionControllerState
+  type ConnectionControllerState,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
 import { filterOutRecentWallets } from '../utils';
@@ -14,16 +15,16 @@ import { filterOutRecentWallets } from '../utils';
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onWalletPress: (wallet: CustomWallet) => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function CustomWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
+export function CustomWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed } = useSnapshot(ApiController.state);
+  const imageHeaders = ApiController._getApiHeaders();
   const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
-  if (!isWalletConnectEnabled || !customWallets?.length) {
+  if (!customWallets?.length) {
     return null;
   }
 
@@ -32,7 +33,8 @@ export function CustomWalletList({ itemStyle, onWalletPress, isWalletConnectEnab
   return list.map(wallet => (
     <ListWallet
       key={wallet.id}
-      imageSrc={wallet.image_url}
+      imageSrc={AssetUtil.getWalletImage(wallet)}
+      imageHeaders={imageHeaders}
       name={wallet.name}
       onPress={() => onWalletPress(wallet)}
       style={itemStyle}

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

@@ -11,16 +11,15 @@ import type { StyleProp, ViewStyle } from 'react-native';
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onWalletPress: (wallet: WcWallet, installed: boolean) => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function RecentWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
+export function RecentWalletList({ itemStyle, onWalletPress }: Props) {
   const installed = ApiController.state.installed;
   const { recentWallets } = useSnapshot(ConnectionController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
-  if (!isWalletConnectEnabled || !recentWallets?.length) {
+  if (!recentWallets?.length) {
     return null;
   }
 

package/src/views/w3m-connect-view/components/social-login-list.tsx

@@ -1,12 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { FlexView, ListSocial, LogoSelect, Spacing, Text } from '@reown/appkit-ui-react-native';
 import { type SocialProvider, StringUtil } from '@reown/appkit-common-react-native';
-import {
-  ConnectionController,
-  EventsController,
-  RouterController,
-  WebviewController
-} from '@reown/appkit-core-react-native';
+import { EventsController, RouterController } from '@reown/appkit-core-react-native';
 
 export interface SocialLoginListProps {
   options: readonly SocialProvider[];
@@ -23,19 +18,20 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
   bottomSocials = showMoreButton ? bottomSocials.slice(0, MAX_OPTIONS - 2) : bottomSocials;
 
   const onItemPress = (provider: SocialProvider) => {
-    ConnectionController.setSelectedSocialProvider(provider);
-    EventsController.sendEvent({
-      type: 'track',
-      event: 'SOCIAL_LOGIN_STARTED',
-      properties: { provider }
-    });
-    WebviewController.setConnecting(false);
-
-    if (provider === 'farcaster') {
-      RouterController.push('ConnectingFarcaster');
+    if (provider === 'email') {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'EMAIL_LOGIN_SELECTED'
+      });
     } else {
-      RouterController.push('ConnectingSocial');
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_STARTED',
+        properties: { provider }
+      });
     }
+
+    RouterController.push('ConnectingSocial', { socialProvider: provider });
   };
 
   const onMorePress = () => {

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

@@ -1,60 +1,40 @@
 import { useSnapshot } from 'valtio';
-import { Platform, ScrollView, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import {
   ApiController,
-  ConnectorController,
   EventUtil,
   EventsController,
   OptionsController,
   RouterController,
   type WcWallet
 } from '@reown/appkit-core-react-native';
-import { FlexView, Icon, ListItem, Separator, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { FlexView, Icon, ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { ConnectEmailInput } from './components/connect-email-input';
-import { useKeyboard } from '../../hooks/useKeyboard';
 import { Placeholder } from '../../partials/w3m-placeholder';
-import { ConnectorList } from './components/connectors-list';
 import { CustomWalletList } from './components/custom-wallet-list';
 import { AllWalletsButton } from './components/all-wallets-button';
 import { AllWalletList } from './components/all-wallet-list';
 import { RecentWalletList } from './components/recent-wallet-list';
 import { SocialLoginList } from './components/social-login-list';
-import { WalletGuide } from './components/wallet-guide';
 import styles from './styles';
 
 export function ConnectView() {
-  const connectors = ConnectorController.state.connectors;
-  const { authLoading } = useSnapshot(ConnectorController.state);
   const { prefetchError } = useSnapshot(ApiController.state);
   const { features } = useSnapshot(OptionsController.state);
   const { padding } = useCustomDimensions();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
 
-  // const isWalletConnectEnabled = connectors.some(c => c.type === 'WALLET_CONNECT');
-  const isWalletConnectEnabled = true;
-  const isAuthEnabled = connectors.some(c => c.type === 'AUTH');
-  const isCoinbaseEnabled = connectors.some(c => c.type === 'COINBASE');
-  const isEmailEnabled = isAuthEnabled && features?.email;
-  const isSocialEnabled = isAuthEnabled && features?.socials && features?.socials.length > 0;
-  const showConnectWalletsButton =
-    isWalletConnectEnabled && isAuthEnabled && !features?.emailShowWallets;
-  const showSeparator =
-    isAuthEnabled &&
-    (isEmailEnabled || isSocialEnabled) &&
-    (isWalletConnectEnabled || isCoinbaseEnabled);
+  const isSocialEnabled = features?.socials && features?.socials.length > 0;
+  const showConnectWalletsButton = isSocialEnabled && !features?.showWallets;
   const showLoadingError = !showConnectWalletsButton && prefetchError;
   const showList = !showConnectWalletsButton && !showLoadingError;
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
-    const connector = connectors.find(c => c.explorerId === wallet.id);
-    if (connector) {
-      RouterController.push('ConnectingExternal', { connector, wallet });
+    const isExternal =
+      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
+      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
     } else {
       RouterController.push('ConnectingWalletConnect', { wallet });
     }
@@ -64,7 +44,7 @@ export function ConnectView() {
       type: 'track',
       event: 'SELECT_WALLET',
       properties: {
-        name: wallet.name ?? connector?.name ?? 'Unknown',
+        name: wallet.name ?? 'Unknown',
         platform,
         explorer_id: wallet.id
       }
@@ -78,12 +58,15 @@ export function ConnectView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', '0', '0', '0']} style={{ paddingBottom }}>
-        {isEmailEnabled && <ConnectEmailInput loading={authLoading} />}
-        {isSocialEnabled && <SocialLoginList options={features?.socials} disabled={authLoading} />}
-        {showSeparator && <Separator text="or" style={styles.socialSeparator} />}
+      <FlexView padding={['xs', '0', '2xl', '0']}>
+        {isSocialEnabled && (
+          <>
+            <SocialLoginList options={features?.socials} />
+            <Separator text="or" style={styles.socialSeparator} />
+          </>
+        )}
 
-        <FlexView padding={['0', 's', '0', 's']}>
+        <FlexView padding={['0', 's', 'xs', 's']}>
           {showConnectWalletsButton && (
             <ListItem contentStyle={styles.connectWalletButton} onPress={onViewAllPress}>
               <Icon name="wallet" size="lg" />
@@ -107,33 +90,12 @@ export function ConnectView() {
           )}
           {showList && (
             <>
-              <RecentWalletList
-                itemStyle={styles.item}
-                onWalletPress={onWalletPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
-              <AllWalletList
-                itemStyle={styles.item}
-                onWalletPress={onWalletPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
-              <CustomWalletList
-                itemStyle={styles.item}
-                onWalletPress={onWalletPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
-              <ConnectorList
-                itemStyle={styles.item}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
-              <AllWalletsButton
-                itemStyle={styles.item}
-                onPress={onViewAllPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
+              <RecentWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
+              <AllWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
+              <CustomWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
+              <AllWalletsButton itemStyle={styles.item} onPress={onViewAllPress} />
             </>
           )}
-          {isAuthEnabled && <WalletGuide guide="get-started" />}
         </FlexView>
       </FlexView>
     </ScrollView>

package/src/views/w3m-connecting-external-view/index.tsx

@@ -1,14 +1,12 @@
+import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
 import { ScrollView } from 'react-native';
 import {
   RouterController,
   ApiController,
-  AssetUtil,
-  ConnectionController,
-  ModalController,
   EventsController,
-  StorageUtil,
-  type WcWallet
+  ConnectionController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -21,10 +19,13 @@ import {
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../../partials/w3m-connecting-body';
 import styles from './styles';
+import { useAppKit } from '../../AppKitContext';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { UiUtil } from '../../utils/UiUtil';
 
 export function ConnectingExternalView() {
-  const { data } = RouterController.state;
-  const connector = data?.connector;
+  const { data } = useSnapshot(RouterController.state);
+  const { connect } = useAppKit();
   const { maxWidth: width } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
@@ -34,35 +35,27 @@ export function ConnectingExternalView() {
     onConnect();
   };
 
-  const storeConnectedWallet = useCallback(
-    async (wallet?: WcWallet) => {
-      if (wallet) {
-        const recentWallets = await StorageUtil.addRecentWallet(wallet);
-        if (recentWallets) {
-          ConnectionController.setRecentWallets(recentWallets);
-        }
-      }
-      if (connector) {
-        const url = AssetUtil.getConnectorImage(connector);
-        ConnectionController.setConnectedWalletImageUrl(url);
-      }
-    },
-    [connector]
-  );
-
   const onConnect = useCallback(async () => {
     try {
-      if (connector) {
-        await ConnectionController.connectExternal(connector);
-        storeConnectedWallet(data?.wallet);
-        ModalController.close();
+      const wallet = RouterController.state.data?.wallet;
+      if (wallet) {
+        if (wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID) {
+          await connect('phantom');
+        } else if (wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID) {
+          await connect('coinbase');
+        } else {
+          // All other wallets are handled by WalletConnect connector
+          return;
+        }
+        UiUtil.storeRecentWallet(wallet);
+        ConnectionController.setPressedWallet(wallet);
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
           properties: {
-            name: data.wallet?.name ?? 'Unknown',
+            name: wallet?.name ?? 'Unknown',
             method: 'mobile',
-            explorer_id: data.wallet?.id
+            explorer_id: wallet?.id
           }
         });
       }
@@ -80,7 +73,7 @@ export function ConnectingExternalView() {
         properties: { message: (error as Error)?.message ?? 'Unknown' }
       });
     }
-  }, [connector, storeConnectedWallet, data?.wallet]);
+  }, [connect]);
 
   useEffect(() => {
     onConnect();
@@ -97,7 +90,7 @@ export function ConnectingExternalView() {
         <LoadingThumbnail paused={!!errorType}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getConnectorImage(connector)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
             imageHeaders={ApiController._getApiHeaders()}
           />
           {errorType && (