@reown/appkit-react-native 2.0.0-alpha.4 → 2.0.0-alpha.6

package/src/partials/w3m-all-wallets-search/index.tsx

@@ -1,51 +1,38 @@
+import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { FlatList } from 'react-native';
-import { ApiController, SnackController } from '@reown/appkit-core-react-native';
+import { ApiController, OptionsController, SnackController } from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
-import { CardSelectHeight, Spacing, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../w3m-placeholder';
 import styles from './styles';
 
 import { Loading } from '../w3m-all-wallets-list/components/Loading';
-import { WalletItem } from '../w3m-all-wallets-list/components/WalletItem';
+import { WalletList } from '../w3m-all-wallets-list/components/WalletList';
 
 export interface AllWalletsSearchProps {
-  columns: number;
   onItemPress: (wallet: WcWallet) => void;
-  itemWidth?: number;
   searchQuery?: string;
-  headerHeight?: number;
 }
 
-const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
-
-export function AllWalletsSearch({
-  searchQuery,
-  columns,
-  itemWidth,
-  onItemPress,
-  headerHeight = 0
-}: AllWalletsSearchProps) {
+export function AllWalletsSearch({ searchQuery, onItemPress }: AllWalletsSearchProps) {
+  const { search } = useSnapshot(ApiController.state);
+  const { customWallets } = useSnapshot(OptionsController.state);
   const [loading, setLoading] = useState<boolean>(false);
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [prevSearchQuery, setPrevSearchQuery] = useState<string>('');
-  const imageHeaders = ApiController._getApiHeaders();
-  const { maxHeight, padding, isLandscape } = useCustomDimensions();
+  const { isLandscape } = useCustomDimensions();
 
-  const emptyTemplate = () => {
-    return (
-      <Placeholder
-        icon="walletPlaceholder"
-        description="No results found"
-        style={[styles.emptyContainer, isLandscape && styles.emptyLandscape]}
-      />
-    );
-  };
+  const customWalletResults = (customWallets ?? []).filter(wallet =>
+    wallet.name.toLowerCase().includes(searchQuery?.toLowerCase() ?? '')
+  );
+
+  const results = [...search, ...customWalletResults];
 
   const searchFetch = useCallback(async () => {
     try {
       setLoading(true);
       setLoadingError(false);
+      // eslint-disable-next-line valtio/state-snapshot-rule
       await ApiController.searchWallet({ search: searchQuery });
       setLoading(false);
     } catch (error) {
@@ -63,7 +50,7 @@ export function AllWalletsSearch({
   }, [searchQuery, prevSearchQuery, searchFetch]);
 
   if (loading) {
-    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
+    return <Loading loadingItems={12} />;
   }
 
   if (loadingError) {
@@ -75,43 +62,21 @@ export function AllWalletsSearch({
         description={`This might be due to a temporary network issue.\nPlease try reloading to see if that helps.`}
         actionIcon="refresh"
         actionPress={searchFetch}
-        style={styles.placeholderContainer}
+        style={[styles.placeholderContainer]}
         actionTitle="Retry"
       />
     );
   }
 
-  if (ApiController.state.search.length === 0) {
-    return emptyTemplate();
+  if (results.length === 0) {
+    return (
+      <Placeholder
+        icon="walletPlaceholder"
+        description="No results found"
+        style={[styles.emptyContainer, isLandscape && styles.emptyLandscape]}
+      />
+    );
   }
 
-  return (
-    <FlatList
-      key={columns}
-      fadingEdgeLength={20}
-      bounces={false}
-      numColumns={columns}
-      data={ApiController.state.search}
-      renderItem={({ item }) => (
-        <WalletItem
-          item={item}
-          itemWidth={itemWidth}
-          imageHeaders={imageHeaders}
-          onItemPress={onItemPress}
-          style={styles.itemContainer}
-        />
-      )}
-      style={{ maxHeight: maxHeight - headerHeight - Spacing['2xl'] }}
-      contentContainerStyle={[
-        styles.contentContainer,
-        { paddingHorizontal: padding + Spacing['2xs'] }
-      ]}
-      keyExtractor={item => item.id}
-      getItemLayout={(_, index) => ({
-        length: ITEM_HEIGHT,
-        offset: ITEM_HEIGHT * index,
-        index
-      })}
-    />
-  );
+  return <WalletList onItemPress={onItemPress} data={results} testIDKey="wallet-search-item" />;
 }

package/src/partials/w3m-all-wallets-search/styles.ts

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   contentContainer: {
-    paddingBottom: Spacing['4xl']
+    paddingBottom: Spacing['xs']
   },
   placeholderContainer: {
     flex: 0,
@@ -11,6 +11,8 @@ export default StyleSheet.create({
   },
   emptyContainer: {
     flex: 0,
+    justifyContent: 'flex-start',
+    paddingTop: Spacing['4xl'],
     height: '90%'
   },
   emptyLandscape: {

package/src/partials/w3m-connecting-mobile/index.tsx

@@ -34,7 +34,7 @@ interface Props {
 
 export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const { data } = RouterController.state;
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const { wcUri, wcError } = useSnapshot(WcController.state);
   const { walletImages } = useSnapshot(AssetController.state);
   const [errorType, setErrorType] = useState<BodyErrorType>();
@@ -100,13 +100,13 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   }, [wcUri, 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 || wcError}>
           <WalletImage
             size="xl"

package/src/partials/w3m-connecting-mobile/styles.ts

@@ -3,7 +3,8 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 
 export default StyleSheet.create({
   container: {
-    paddingBottom: Spacing['3xl']
+    paddingBottom: Spacing['xs'],
+    minHeight: '30%'
   },
   retryButton: {
     marginTop: Spacing.m

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -16,11 +16,14 @@ import {
 } from '@reown/appkit-ui-react-native';
 import styles from './styles';
 import { ReownButton } from './components/ReownButton';
+import { useWindowDimensions } from 'react-native';
 
 export function ConnectingQrCode() {
+  const { height, width } = useWindowDimensions();
+  const windowSize = Math.min(height, width);
   const { wcUri } = useSnapshot(WcController.state);
   const showCopy = OptionsController.isClipboardAvailable();
-  const { maxWidth: windowSize, isPortrait } = useCustomDimensions();
+  const { isPortrait } = useCustomDimensions();
   const qrSize = (windowSize - Spacing.xl * 2) / (isPortrait ? 1 : 1.5);
 
   const onCopyAddress = () => {
@@ -54,7 +57,7 @@ export function ConnectingQrCode() {
       alignItems="center"
       justifyContent="center"
       flexDirection={isPortrait ? 'column' : 'row'}
-      padding="xl"
+      padding={['xl', 'xl', 'xs', 'xl']}
     >
       <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
       <FlexView alignItems="center" margin="m">

package/src/partials/w3m-connecting-web/index.tsx

@@ -65,8 +65,8 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   }, [data?.wallet, wcUri]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20}>
-      <FlexView alignItems="center" padding={['2xl', 'm', '3xl', 'm']}>
+    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
+      <FlexView alignItems="center" padding={['2xl', 'm', 'xs', 'm']}>
         <LoadingThumbnail paused={wcError}>
           <WalletImage
             size="xl"

package/src/partials/w3m-connecting-web/styles.ts

@@ -2,6 +2,9 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
+  container: {
+    minHeight: '30%'
+  },
   openButton: {
     marginTop: Spacing.m
   },

package/src/partials/w3m-header/index.tsx

@@ -32,9 +32,9 @@ export function Header() {
       Connect: 'Connect wallet',
       ConnectSocials: 'All socials',
       ConnectingExternal: walletName ?? 'Connect wallet',
-      ConnectingSiwe: undefined,
+      SIWXSignMessage: 'Sign in',
       ConnectingSocial: socialName ?? 'Connecting Social',
-      ConnectingWalletConnect: walletName ?? 'WalletConnect',
+      WalletConnect: walletName ?? 'WalletConnect',
       GetWallet: 'Get a wallet',
       Networks: 'Select network',
       OnRamp: undefined,
@@ -58,7 +58,8 @@ export function Header() {
     }[_view];
   };
 
-  const noCloseViews = ['OnRampSettings'];
+  const noCloseViews = ['OnRampSettings', 'SIWXSignMessage'];
+  const noBackViews = ['UnsupportedChain', 'SIWXSignMessage'];
   const showClose = !noCloseViews.includes(view);
   const header = headings(data, view);
 
@@ -71,7 +72,9 @@ export function Header() {
   };
 
   const dynamicButtonTemplate = () => {
-    const showBack = RouterController.state.history.length > 1;
+    const showBack =
+      RouterController.state.history.length > 1 &&
+      !noBackViews.includes(RouterController.state.view);
     const showHelp = RouterController.state.view === 'Connect';
 
     if (showHelp) {

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/types.ts

@@ -7,10 +7,10 @@ import {
   type Metadata,
   type Network,
   type Storage,
-  type AppKitSIWEClient,
   type ThemeMode,
   type ThemeVariables,
-  type Tokens
+  type Tokens,
+  type SIWXConfig
 } from '@reown/appkit-common-react-native';
 
 /**
@@ -154,13 +154,11 @@ export interface AppKitConfig {
   themeVariables?: ThemeVariables;
 
   /**
-   * Optional SIWE (Sign-In with Ethereum) configuration.
-   * Enables authentication flow using Ethereum signatures.
-   * Must implement the AppKitSIWEClient interface.
-   *
-   * @see {@link https://docs.reown.com/appkit/react-native/core/siwe | SIWE Documentation}
+   * @experimental - This feature is not production ready.
+   * Enable Sign In With X (SIWX) feature.
+   * @default undefined
    */
-  siweConfig?: AppKitSIWEClient;
+  siwx?: SIWXConfig;
 
   /**
    * Optional default network to use when no specific network is selected.