@reown/appkit-react-native 2.0.0 → 2.0.1

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

@@ -2,40 +2,71 @@ import { type StyleProp, type ViewStyle } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
   ApiController,
+  AssetController,
   AssetUtil,
-  ConnectionController,
-  type ConnectionControllerState,
-  type WcWallet
+  EventsController,
+  OptionsController,
+  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';
+import { useEffect, useMemo, useRef } from 'react';
 
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
-  onWalletPress: (wallet: WcWallet) => void;
-  isWalletConnectEnabled: boolean;
+  onWalletPress: (wallet: WcWallet, displayIndex: number, isInstalled?: boolean) => void;
 }
 
-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 { customWallets } = useSnapshot(OptionsController.state);
+  const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
+  const { walletImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
-  const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
-  const combinedWallets = [...installed, ...featured, ...recommended];
+  // Track which wallets have been tracked to prevent duplicates
+  const trackedWalletsRef = useRef<Set<string>>(new Set());
 
-  // Deduplicate by wallet ID
-  const uniqueWallets = Array.from(
-    new Map(combinedWallets.map(wallet => [wallet.id, wallet])).values()
-  );
+  const list = useMemo(() => {
+    const combinedWallets = [
+      ...(recentWallets?.slice(0, 1) ?? []),
+      ...installed,
+      ...featured,
+      ...recommended,
+      ...(customWallets ?? [])
+    ];
 
-  const list = filterOutRecentWallets(recentWallets, uniqueWallets, RECENT_COUNT).slice(
-    0,
-    UiUtil.TOTAL_VISIBLE_WALLETS - RECENT_COUNT
-  );
+    // Deduplicate by wallet ID
+    return Array.from(new Map(combinedWallets.map(wallet => [wallet.id, wallet])).values()).slice(
+      0,
+      UiUtil.TOTAL_VISIBLE_WALLETS
+    );
+  }, [recentWallets, installed, featured, recommended, customWallets]);
 
-  if (!isWalletConnectEnabled || !list?.length) {
+  // Track impressions once when the list stabilizes
+  useEffect(() => {
+    if (!prefetchLoading && list.length > 0) {
+      list.forEach((wallet, index) => {
+        if (!trackedWalletsRef.current.has(wallet.id)) {
+          trackedWalletsRef.current.add(wallet.id);
+          const isInstalled = !!ApiController.state.installed.find(
+            installedWallet => installedWallet.id === wallet.id
+          );
+          EventsController.trackWalletImpression({
+            wallet,
+            view: 'Connect',
+            displayIndex: index,
+            // eslint-disable-next-line valtio/state-snapshot-rule
+            installed: isInstalled
+          });
+        }
+      });
+    }
+  }, [prefetchLoading, list]);
+
+  if (!list?.length) {
     return null;
   }
 
@@ -45,16 +76,24 @@ export function AllWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled
       <ListItemLoader style={itemStyle} />
     </>
   ) : (
-    list.map(wallet => (
-      <ListWallet
-        key={wallet?.id}
-        imageSrc={AssetUtil.getWalletImage(wallet)}
-        imageHeaders={imageHeaders}
-        name={wallet?.name ?? 'Unknown'}
-        onPress={() => onWalletPress(wallet)}
-        style={itemStyle}
-        installed={!!installed.find(installedWallet => installedWallet.id === wallet.id)}
-      />
-    ))
+    list.map((wallet, index) => {
+      const isRecent = recentWallets?.some(recentWallet => recentWallet.id === wallet.id);
+      //eslint-disable-next-line valtio/state-snapshot-rule
+      const isInstalled = !!installed.find(installedWallet => installedWallet.id === wallet.id);
+
+      return (
+        <ListWallet
+          key={wallet?.id}
+          imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
+          imageHeaders={imageHeaders}
+          name={wallet?.name ?? 'Unknown'}
+          onPress={() => onWalletPress(wallet, index, isInstalled)}
+          tagLabel={isRecent ? 'Recent' : undefined}
+          tagVariant={isRecent ? 'shade' : undefined}
+          style={itemStyle}
+          installed={isInstalled}
+        />
+      );
+    })
   );
 }

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/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 = () => {
@@ -44,13 +40,13 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
 
   return (
     <FlexView padding={['xs', 's', '0', 's']}>
-      {topSocial && (
+      {topSocial ? (
         <ListSocial logo={topSocial} disabled={disabled} onPress={() => onItemPress(topSocial)}>
           <Text style={styles.topDescription} color={disabled ? 'fg-300' : 'fg-100'}>
             {`Continue with ${StringUtil.capitalize(topSocial)}`}
           </Text>
         </ListSocial>
-      )}
+      ) : null}
       <FlexView flexDirection="row" justifyContent="space-between" margin={['xs', '0', '0', '0']}>
         {bottomSocials?.map((social: SocialProvider, index) => (
           <LogoSelect
@@ -65,14 +61,14 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
             ]}
           />
         ))}
-        {showMoreButton && (
+        {showMoreButton ? (
           <LogoSelect
             logo="more"
             disabled={disabled}
             style={[styles.socialItem, styles.socialItemLast]}
             onPress={onMorePress}
           />
-        )}
+        ) : null}
       </FlexView>
     </FlexView>
   );

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

@@ -1,63 +1,44 @@
 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
+  RouterController
 } from '@reown/appkit-core-react-native';
-import { FlexView, Icon, ListItem, Separator, Spacing, Text } from '@reown/appkit-ui-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { ConnectEmailInput } from './components/connect-email-input';
-import { useKeyboard } from '../../hooks/useKeyboard';
+import { type WcWallet } from '@reown/appkit-common-react-native';
+import {
+  FlexView,
+  Icon,
+  ListItem,
+  Separator,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 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';
+import { WcHelpersUtil } from '../../utils/HelpersUtil';
 
 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();
 
-  //TODO: check this
-  // 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 onWalletPress = (wallet: WcWallet, displayIndex: number, isInstalled?: boolean) => {
+    const isExternal = WcHelpersUtil.isExternalWallet(wallet);
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
     } else {
-      RouterController.push('ConnectingWalletConnect', { wallet });
+      RouterController.push('WalletConnect', { wallet });
     }
 
     const platform = EventUtil.getWalletPlatform(wallet, isInstalled);
@@ -65,9 +46,12 @@ export function ConnectView() {
       type: 'track',
       event: 'SELECT_WALLET',
       properties: {
-        name: wallet.name ?? connector?.name ?? 'Unknown',
+        name: wallet.name ?? 'Unknown',
         platform,
-        explorer_id: wallet.id
+        explorerId: wallet.id,
+        walletRank: wallet.order,
+        displayIndex,
+        view: 'Connect'
       }
     });
   };
@@ -79,20 +63,23 @@ 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', 'xs', '0']}>
+        {isSocialEnabled ? (
+          <>
+            <SocialLoginList options={features?.socials} />
+            <Separator text="or" style={styles.socialSeparator} />
+          </>
+        ) : null}
 
         <FlexView padding={['0', 's', '0', 's']}>
-          {showConnectWalletsButton && (
+          {showConnectWalletsButton ? (
             <ListItem contentStyle={styles.connectWalletButton} onPress={onViewAllPress}>
               <Icon name="wallet" size="lg" />
               <Text variant="paragraph-500">Continue with a wallet</Text>
               <View style={styles.connectWalletEmpty} />
             </ListItem>
-          )}
-          {showLoadingError && (
+          ) : null}
+          {showLoadingError ? (
             <FlexView alignItems="center" justifyContent="center" margin={['l', '0', '0', '0']}>
               <Placeholder
                 icon="warningCircle"
@@ -105,36 +92,13 @@ export function ConnectView() {
               />
               <Separator style={styles.socialSeparator} />
             </FlexView>
-          )}
-          {showList && (
+          ) : null}
+          {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}
-              />
+              <AllWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
+              <AllWalletsButton itemStyle={styles.item} onPress={onViewAllPress} />
             </>
-          )}
-          {isAuthEnabled && <WalletGuide guide="get-started" />}
+          ) : null}
         </FlexView>
       </FlexView>
     </ScrollView>

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

@@ -1,72 +1,99 @@
+import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { ScrollView } from 'react-native';
+import { Platform, ScrollView } from 'react-native';
 import {
   RouterController,
   ApiController,
-  AssetUtil,
-  ConnectionController,
-  ModalController,
   EventsController,
-  StorageUtil,
-  type WcWallet
+  WcController,
+  AssetUtil,
+  AssetController,
+  CoreHelperUtil,
+  LogController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
   FlexView,
   IconBox,
   LoadingThumbnail,
-  WalletImage
+  WalletImage,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../../partials/w3m-connecting-body';
 import styles from './styles';
+import { useInternalAppKit } from '../../AppKitContext';
+import { StoreLink } from '../../partials/w3m-connecting-mobile/components/StoreLink';
+import { WcHelpersUtil } from '../../utils/HelpersUtil';
 
 export function ConnectingExternalView() {
-  const { data } = RouterController.state;
-  const connector = data?.connector;
-  const { maxWidth: width } = useCustomDimensions();
+  const { data } = useSnapshot(RouterController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
+  const { connect } = useInternalAppKit();
+  const { padding } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
 
+  const storeUrl = Platform.select({
+    ios: data?.wallet?.app_store,
+    android: data?.wallet?.play_store
+  });
+
+  const onStorePress = () => {
+    if (storeUrl) {
+      CoreHelperUtil.openLink(storeUrl);
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'GET_WALLET',
+        properties: {
+          name: RouterController.state.data?.wallet?.name ?? 'Unknown',
+          link: storeUrl,
+          linkType: Platform.select({
+            ios: 'appstore',
+            android: 'playstore',
+            default: undefined
+          }),
+          explorerId: RouterController.state.data?.wallet?.id,
+          walletRank: RouterController.state.data?.wallet?.order
+        }
+      });
+    }
+  };
+
   const onRetryPress = () => {
     setErrorType(undefined);
     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 (WcHelpersUtil.isExternalWallet(wallet)) {
+          await connect({ wallet });
+        } else {
+          // All other wallets are handled by WalletConnect connector
+          return;
+        }
+        WcController.addRecentWallet(wallet);
+        WcController.setPressedWallet(wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
           properties: {
-            name: data.wallet?.name ?? 'Unknown',
+            name: wallet?.name ?? 'Unknown',
             method: 'mobile',
-            explorer_id: data.wallet?.id
+            caipNetworkId,
+            explorerId: wallet?.id
           }
         });
       }
     } catch (error) {
+      LogController.sendError(error, 'ConnectingExternalView.tsx', 'onConnect');
       if (/(Wallet not found)/i.test((error as Error).message)) {
         setErrorType('not_installed');
       } else if (/(rejected)/i.test((error as Error).message)) {
@@ -80,27 +107,27 @@ export function ConnectingExternalView() {
         properties: { message: (error as Error)?.message ?? 'Unknown' }
       });
     }
-  }, [connector, storeConnectedWallet, data?.wallet]);
+  }, [connect]);
 
   useEffect(() => {
     onConnect();
   }, [onConnect]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
-      <FlexView
-        alignItems="center"
-        alignSelf="center"
-        padding={['2xl', 'l', '0', 'l']}
-        style={{ width }}
-      >
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      style={{ paddingHorizontal: padding }}
+      contentContainerStyle={styles.container}
+    >
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '0', 'l']}>
         <LoadingThumbnail paused={!!errorType}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getConnectorImage(connector)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {errorType && (
+          {errorType ? (
             <IconBox
               icon={'close'}
               border
@@ -110,7 +137,7 @@ export function ConnectingExternalView() {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
         {errorType !== 'not_installed' && (
@@ -126,6 +153,7 @@ export function ConnectingExternalView() {
           </Button>
         )}
       </FlexView>
+      <StoreLink visible={!!storeUrl} walletName={data?.wallet?.name} onPress={onStorePress} />
     </ScrollView>
   );
 }

package/src/views/w3m-connecting-external-view/styles.ts

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   container: {
-    paddingBottom: Spacing['3xl']
+    paddingBottom: Spacing['s']
   },
   retryButton: {
     marginTop: Spacing.m