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

package/src/partials/w3m-selector-modal/index.tsx

@@ -9,10 +9,12 @@ import {
   Separator,
   Spacing,
   Text,
+  useCustomDimensions,
   useTheme
 } from '@reown/appkit-ui-react-native';
-import styles from './styles';
 import { AssetController, AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
+import { Placeholder } from '../w3m-placeholder';
+import styles from './styles';
 
 interface SelectorModalProps {
   title?: string;
@@ -26,6 +28,8 @@ interface SelectorModalProps {
   itemHeight?: number;
   showNetwork?: boolean;
   searchPlaceholder?: string;
+  emptyTitle?: string;
+  emptyDescription?: string;
 }
 
 const SEPARATOR_HEIGHT = Spacing.s;
@@ -41,9 +45,12 @@ export function SelectorModal({
   searchPlaceholder,
   keyExtractor,
   itemHeight,
-  showNetwork
+  showNetwork,
+  emptyTitle = 'No tokens found',
+  emptyDescription = "There's no available tokens for this network"
 }: SelectorModalProps) {
   const Theme = useTheme();
+  const { maxHeight } = useCustomDimensions();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
@@ -55,66 +62,79 @@ export function SelectorModal({
   return (
     <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
       <View style={styles.modal}>
-        <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
-          <FlexView
-            alignItems="center"
-            justifyContent="space-between"
-            flexDirection="row"
-            style={styles.header}
-          >
-            <IconLink icon="chevronLeft" onPress={onClose} testID="selector-modal-button-back" />
-            {!!title && <Text variant="paragraph-600">{title}</Text>}
-            {showNetwork ? (
-              networkImage ? (
-                <FlexView
-                  alignItems="center"
-                  justifyContent="center"
-                  style={styles.iconPlaceholder}
-                >
-                  <Image source={networkImage} style={styles.networkImage} />
-                </FlexView>
-              ) : (
-                <IconBox
-                  style={styles.iconPlaceholder}
-                  icon="networkPlaceholder"
-                  background
-                  iconColor="fg-200"
-                  size="sm"
+        <FlatList
+          data={items}
+          renderItem={renderItem}
+          fadingEdgeLength={20}
+          automaticallyAdjustKeyboardInsets={false}
+          keyboardShouldPersistTaps="always"
+          style={[styles.container, { backgroundColor: Theme['bg-100'], maxHeight }]}
+          ListHeaderComponentStyle={styles.header}
+          ListEmptyComponent={
+            <Placeholder icon="coinPlaceholder" title={emptyTitle} description={emptyDescription} />
+          }
+          ListHeaderComponent={
+            <>
+              <FlexView
+                alignItems="center"
+                justifyContent="space-between"
+                flexDirection="row"
+                style={styles.headerTop}
+              >
+                <IconLink
+                  icon="chevronLeft"
+                  onPress={onClose}
+                  testID="selector-modal-button-back"
                 />
-              )
-            ) : (
-              <View style={styles.iconPlaceholder} />
-            )}
-          </FlexView>
-          <SearchBar
-            onChangeText={onSearch}
-            style={styles.searchBar}
-            placeholder={searchPlaceholder}
-          />
-          {selectedItem ? (
-            <FlexView style={styles.selectedContainer}>
-              {renderItem({ item: selectedItem })}
-              <Separator style={styles.separator} color="gray-glass-020" />
-            </FlexView>
-          ) : null}
-          <FlatList
-            data={items}
-            renderItem={renderItem}
-            fadingEdgeLength={20}
-            contentContainerStyle={styles.listContent}
-            ItemSeparatorComponent={renderSeparator}
-            keyExtractor={keyExtractor}
-            getItemLayout={
-              itemHeight
-                ? (_, index) => ({
-                    length: itemHeight + SEPARATOR_HEIGHT,
-                    offset: (itemHeight + SEPARATOR_HEIGHT) * index,
-                    index
-                  })
-                : undefined
-            }
-          />
-        </FlexView>
+                {!!title && <Text variant="paragraph-600">{title}</Text>}
+                {showNetwork ? (
+                  networkImage ? (
+                    <FlexView
+                      alignItems="center"
+                      justifyContent="center"
+                      style={styles.iconPlaceholder}
+                    >
+                      <Image source={networkImage} style={styles.networkImage} />
+                    </FlexView>
+                  ) : (
+                    <IconBox
+                      style={styles.iconPlaceholder}
+                      icon="networkPlaceholder"
+                      background
+                      iconColor="fg-200"
+                      size="sm"
+                    />
+                  )
+                ) : (
+                  <View style={styles.iconPlaceholder} />
+                )}
+              </FlexView>
+              <SearchBar
+                onChangeText={onSearch}
+                style={styles.searchBar}
+                placeholder={searchPlaceholder}
+              />
+              {selectedItem ? (
+                <FlexView>
+                  {renderItem({ item: selectedItem })}
+                  <Separator style={styles.separator} color="gray-glass-005" />
+                </FlexView>
+              ) : null}
+            </>
+          }
+          contentContainerStyle={styles.listContent}
+          ItemSeparatorComponent={renderSeparator}
+          keyExtractor={keyExtractor}
+          getItemLayout={
+            itemHeight
+              ? (_, index) => ({
+                  length: itemHeight + SEPARATOR_HEIGHT,
+                  offset: (itemHeight + SEPARATOR_HEIGHT) * index,
+                  index
+                })
+              : undefined
+          }
+        />
       </View>
     </Modal>
   );

package/src/partials/w3m-selector-modal/styles.ts

@@ -8,21 +8,19 @@ export default StyleSheet.create({
     justifyContent: 'flex-end'
   },
   header: {
-    marginBottom: Spacing.s,
-    paddingHorizontal: Spacing.m
+    paddingTop: Spacing['2xs'],
+    paddingBottom: Spacing.s
+  },
+  headerTop: {
+    paddingHorizontal: Spacing.m,
+    paddingBottom: Spacing.xs
   },
   container: {
-    height: '80%',
     borderTopLeftRadius: BorderRadius.l,
-    borderTopRightRadius: BorderRadius.l,
-    paddingTop: Spacing.m
-  },
-  selectedContainer: {
-    paddingHorizontal: Spacing.m
+    borderTopRightRadius: BorderRadius.l
   },
   listContent: {
-    paddingTop: Spacing.s,
-    paddingHorizontal: Spacing.m
+    paddingTop: Spacing.s
   },
   iconPlaceholder: {
     height: 32,
@@ -38,6 +36,6 @@ export default StyleSheet.create({
     marginHorizontal: Spacing.s
   },
   separator: {
-    marginTop: Spacing.m
+    marginVertical: Spacing.xs
   }
 });

package/src/utils/HelpersUtil.ts

@@ -3,7 +3,9 @@ import {
   type AppKitNetwork,
   type CaipNetworkId,
   type ChainNamespace,
+  ConstantsUtil,
   type UniversalProviderConfigOverride,
+  type WcWallet,
   solana,
   solanaDevnet
 } from '@reown/appkit-common-react-native';
@@ -200,6 +202,34 @@ export const WcHelpersUtil = {
     }, {});
 
     return this.applyNamespaceOverrides(defaultNamespaces, configOverride);
+  },
+
+  isExternalWallet(wallet?: WcWallet) {
+    if (!wallet) {
+      return false;
+    }
+
+    return (
+      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id
+    );
+  },
+
+  getConnectorTypeByWallet(wallet?: WcWallet) {
+    if (!wallet) {
+      return 'walletconnect';
+    }
+
+    if (wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id) {
+      return 'phantom';
+    } else if (wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id) {
+      return 'coinbase';
+    } else if (wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id) {
+      return 'solflare';
+    } else {
+      return 'walletconnect';
+    }
   }
 };
 

package/src/utils/NetworkUtil.ts

@@ -42,17 +42,17 @@ export const NetworkUtil = {
     return url.toString();
   },
 
-  getDefaultChainId(
+  getDefaultNetwork(
     namespaces: CaipNamespaces,
     defaultNetwork?: AppKitNetwork
-  ): CaipNetworkId | undefined {
+  ): AppKitNetwork | undefined {
     if (!defaultNetwork) return undefined;
 
     const isValidDefaultNetwork = Object.values(namespaces).some(
       namespace => namespace?.chains?.some(chain => chain === defaultNetwork.caipNetworkId)
     );
     if (isValidDefaultNetwork) {
-      return defaultNetwork.caipNetworkId;
+      return defaultNetwork;
     }
 
     return undefined;

package/src/utils/UiUtil.ts

@@ -17,6 +17,10 @@ export const UiUtil = {
     if (currentRouteTransition) {
       const { navigationDirection } = RouterController.state;
       await currentRouteTransition(navigationDirection);
+      // After the transition completes, ensure direction is reset to 'none'
+      if (RouterController.state.navigationDirection !== 'none') {
+        RouterController.state.navigationDirection = 'none';
+      }
     }
   }
 };

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

@@ -25,12 +25,12 @@ import {
   Text,
   UiUtil,
   Spacing,
-  ListItem
+  ListItem,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
 import { useInternalAppKit } from '../../AppKitContext';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { AuthButtons } from './components/auth-buttons';
 import styles from './styles';
 
@@ -193,7 +193,7 @@ export function AccountDefaultView() {
         testID="header-close"
       />
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-        <FlexView alignItems="center" padding={['3xl', 's', '3xl', 's']}>
+        <FlexView alignItems="center" padding={['3xl', 's', 's', 's']}>
           <Avatar imageSrc={identity?.avatar} address={account ?? ''} />
           <FlexView flexDirection="row" alignItems="center" margin={['s', '0', '0', '0']}>
             <Text variant="medium-title-600">
@@ -278,7 +278,7 @@ export function AccountDefaultView() {
                 testID="button-onramp"
                 style={styles.actionButton}
               >
-                <Text color="fg-100">Buy crypto</Text>
+                <Text color="fg-100">Buy Crypto</Text>
               </ListItem>
             ) : null}
             {showSend ? (
@@ -332,7 +332,7 @@ export function AccountDefaultView() {
                 loading={loading}
               >
                 <Text color="fg-100">{`Switch to your ${
-                  accountType === 'eoa' ? 'smart account' : 'EOA'
+                  accountType === 'eoa' ? 'Smart Account' : 'EOA'
                 }`}</Text>
               </ListItem>
             ) : null}

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { ScrollView } from 'react-native';
 import {
   AccountPill,
@@ -7,7 +7,8 @@ import {
   Icon,
   IconLink,
   NetworkButton,
-  useTheme
+  useTheme,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
@@ -21,13 +22,11 @@ import {
   SendController
 } from '@reown/appkit-core-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { AccountWalletFeatures } from '../../partials/w3m-account-wallet-features';
 import styles from './styles';
 
 export function AccountView() {
   const Theme = useTheme();
-  const [isLoading, setIsLoading] = useState(false);
   const { padding } = useCustomDimensions();
   const { activeNetwork, activeAddress, identity } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
@@ -47,34 +46,11 @@ export function AccountView() {
   };
 
   useEffect(() => {
-    async function fetchBalance() {
-      setIsLoading(true);
-      await ConnectionsController.fetchBalance();
-      setIsLoading(false);
-    }
-
-    fetchBalance();
     SendController.resetState();
-
-    const balanceInterval = setInterval(() => {
-      fetchBalance();
-    }, 10000);
-
-    return () => {
-      clearInterval(balanceInterval);
-    };
   }, []);
 
   return (
-    <ScrollView
-      bounces={false}
-      contentContainerStyle={[
-        styles.contentContainer,
-        {
-          paddingHorizontal: padding
-        }
-      ]}
-    >
+    <ScrollView bounces={false} contentContainerStyle={{ paddingHorizontal: padding }}>
       <NetworkButton
         imageSrc={networkImage}
         imageHeaders={ApiController._getApiHeaders()}
@@ -93,7 +69,7 @@ export function AccountView() {
           onPress={onProfilePress}
           style={styles.accountPill}
         />
-        <AccountWalletFeatures isBalanceLoading={isLoading} />
+        <AccountWalletFeatures />
       </FlexView>
     </ScrollView>
   );

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

@@ -1,10 +1,7 @@
 import { Spacing } from '@reown/appkit-ui-react-native';
-import { Platform, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  contentContainer: {
-    paddingBottom: Platform.select({ ios: Spacing.s })
-  },
   networkIcon: {
     alignSelf: 'flex-start',
     position: 'absolute',

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

@@ -1,32 +1,33 @@
 import { useState } from 'react';
 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 { type WcWallet } from '@reown/appkit-common-react-native';
+import {
+  FlexView,
+  IconLink,
+  SearchBar,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 
 import styles from './styles';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { AllWalletsList } from '../../partials/w3m-all-wallets-list';
 import { AllWalletsSearch } from '../../partials/w3m-all-wallets-search';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { WcHelpersUtil } from '../../utils/HelpersUtil';
 
 export function AllWalletsView() {
   const Theme = useTheme();
   const [searchQuery, setSearchQuery] = useState<string>('');
-  const { maxWidth } = useCustomDimensions();
-  const numColumns = 4;
-  const usableWidth = maxWidth - Spacing.xs * 2;
-  const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
+  const { padding } = useCustomDimensions();
 
   const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
 
   const onWalletPress = (wallet: WcWallet) => {
-    const isExternal =
-      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
-      wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id;
+    const isExternal = WcHelpersUtil.isExternalWallet(wallet);
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {
-      RouterController.push('ConnectingWalletConnect', { wallet });
+      RouterController.push('WalletConnect', { wallet });
     }
 
     EventsController.sendEvent({
@@ -39,7 +40,7 @@ export function AllWalletsView() {
   const onQrCodePress = () => {
     WcController.removePressedWallet();
     WcController.removeWcLinking();
-    RouterController.push('ConnectingWalletConnect');
+    RouterController.push('WalletConnect');
 
     EventsController.sendEvent({
       type: 'track',
@@ -51,12 +52,16 @@ export function AllWalletsView() {
   const headerTemplate = () => {
     return (
       <FlexView
-        padding={['s', 'l', 'xs', 'l']}
+        padding={['s', 'l', '4xs', 'l']}
         flexDirection="row"
         alignItems="center"
         style={[
           styles.header,
-          { backgroundColor: Theme['bg-100'], shadowColor: Theme['bg-100'], width: maxWidth }
+          {
+            backgroundColor: Theme['bg-100'],
+            shadowColor: Theme['bg-100'],
+            marginHorizontal: padding
+          }
         ]}
       >
         <SearchBar
@@ -80,19 +85,10 @@ export function AllWalletsView() {
 
   const listTemplate = () => {
     if (searchQuery) {
-      return (
-        <AllWalletsSearch
-          columns={numColumns}
-          itemWidth={itemWidth}
-          searchQuery={searchQuery}
-          onItemPress={onWalletPress}
-        />
-      );
+      return <AllWalletsSearch searchQuery={searchQuery} onItemPress={onWalletPress} />;
     }
 
-    return (
-      <AllWalletsList columns={numColumns} itemWidth={itemWidth} onItemPress={onWalletPress} />
-    );
+    return <AllWalletsList onItemPress={onWalletPress} />;
   };
 
   return (

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

@@ -1,14 +1,13 @@
 import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
 import { StringUtil, type SocialProvider } from '@reown/appkit-common-react-native';
+import { FlexView, ListSocial, Text, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import {
   EventsController,
   OptionsController,
   RouterController
 } from '@reown/appkit-core-react-native';
-import { FlexView, ListSocial, Text } from '@reown/appkit-ui-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function ConnectSocialsView() {
@@ -28,7 +27,7 @@ export function ConnectSocialsView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', 'm', '2xl', 'm']}>
+      <FlexView padding={['xs', 'm', '0', 'm']}>
         {socialProviders.map(provider => (
           <ListSocial
             key={provider}

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

@@ -2,14 +2,15 @@ import { type StyleProp, type ViewStyle } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
   ApiController,
+  AssetController,
   AssetUtil,
+  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';
 
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
@@ -18,21 +19,23 @@ interface Props {
 
 export function AllWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
+  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];
+  const combinedWallets = [
+    ...(recentWallets?.slice(0, 1) ?? []),
+    ...installed,
+    ...featured,
+    ...recommended,
+    ...(customWallets ?? [])
+  ];
 
   // Deduplicate by wallet ID
-  const uniqueWallets = Array.from(
+  const list = Array.from(
     new Map(combinedWallets.map(wallet => [wallet.id, wallet])).values()
-  );
-
-  const list = filterOutRecentWallets(recentWallets, uniqueWallets, RECENT_COUNT).slice(
-    0,
-    UiUtil.TOTAL_VISIBLE_WALLETS - RECENT_COUNT
-  );
+  ).slice(0, UiUtil.TOTAL_VISIBLE_WALLETS);
 
   if (!list?.length) {
     return null;
@@ -44,16 +47,22 @@ export function AllWalletList({ itemStyle, onWalletPress }: Props) {
       <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 => {
+      const isRecent = recentWallets?.some(recentWallet => recentWallet.id === wallet.id);
+
+      return (
+        <ListWallet
+          key={wallet?.id}
+          imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
+          imageHeaders={imageHeaders}
+          name={wallet?.name ?? 'Unknown'}
+          onPress={() => onWalletPress(wallet)}
+          tagLabel={isRecent ? 'Recent' : undefined}
+          tagVariant={isRecent ? 'shade' : undefined}
+          style={itemStyle}
+          installed={!!installed.find(installedWallet => installedWallet.id === wallet.id)}
+        />
+      );
+    })
   );
 }