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

package/src/partials/w3m-all-wallets-list/components/Loading.tsx

@@ -1,44 +1,21 @@
-import { CardSelectLoader, FlexView, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { memo } from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { WalletList } from './WalletList';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 interface LoadingProps {
-  itemWidth?: number;
-  containerStyle?: StyleProp<ViewStyle>;
+  loadingItems?: number;
+  style?: StyleProp<ViewStyle>;
 }
 
-function _Loading({ itemWidth, containerStyle }: LoadingProps) {
-  const { maxWidth, maxHeight } = useCustomDimensions();
-
+function _Loading({ loadingItems = 20, style }: LoadingProps) {
   return (
-    <FlexView
-      flexDirection="row"
-      flexWrap="wrap"
-      alignSelf="center"
-      padding={['0', '0', 's', 'xs']}
-      style={{ maxWidth, maxHeight }}
-    >
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-    </FlexView>
+    <WalletList
+      data={[]}
+      onItemPress={() => {}}
+      isLoading={true}
+      loadingItems={loadingItems}
+      style={style}
+    />
   );
 }
 

package/src/partials/w3m-all-wallets-list/components/WalletItem.tsx

@@ -6,34 +6,25 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { memo } from 'react';
 
 interface WalletItemProps {
-  containerStyle?: StyleProp<ViewStyle>;
   item: WcWallet;
-  itemWidth?: number;
   imageHeaders?: Record<string, string>;
   onItemPress: (wallet: WcWallet) => void;
   style?: StyleProp<ViewStyle>;
 }
 
-export function WalletItem({
-  containerStyle,
-  item,
-  itemWidth,
-  imageHeaders,
-  onItemPress,
-  style
-}: WalletItemProps) {
+export function WalletItem({ item, imageHeaders, onItemPress, style }: WalletItemProps) {
   const { walletImages } = useSnapshot(AssetController.state);
   const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
   const imageSrc = AssetUtil.getWalletImage(item, walletImages);
 
   if (!item?.id) {
-    return <CardSelectLoader style={[containerStyle, { width: itemWidth }, style]} />;
+    return <CardSelectLoader style={style} />;
   }
 
   return (
     <CardSelect
       imageSrc={imageSrc}
-      style={[containerStyle, { width: itemWidth }, style]}
+      style={style}
       imageHeaders={imageHeaders}
       name={item?.name ?? 'Unknown'}
       onPress={() => onItemPress(item)}

package/src/partials/w3m-all-wallets-list/components/WalletList.tsx

@@ -0,0 +1,100 @@
+import { FlatList, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { WalletItem } from './WalletItem';
+import {
+  CardSelectHeight,
+  Spacing,
+  useCustomDimensions,
+  CardSelectLoader,
+  CardSelectWidth
+} from '@reown/appkit-ui-react-native';
+import { ApiController } from '@reown/appkit-core-react-native';
+import type { WcWallet } from '@reown/appkit-common-react-native';
+
+const imageHeaders = ApiController._getApiHeaders();
+
+const ITEM_HEIGHT = CardSelectHeight;
+const ITEM_WIDTH = CardSelectWidth;
+const ITEM_HEIGHT_WITH_GAP = ITEM_HEIGHT + Spacing['3xs'];
+
+interface Props {
+  data: WcWallet[];
+  onItemPress: (wallet: WcWallet) => void;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  isLoading?: boolean;
+  loadingItems?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function WalletList({
+  data,
+  onItemPress,
+  onEndReached,
+  onEndReachedThreshold,
+  isLoading = false,
+  loadingItems = 20,
+  style
+}: Props) {
+  const { padding, maxHeight } = useCustomDimensions();
+
+  // Create loading data if isLoading is true
+  const displayData = isLoading
+    ? Array.from({ length: loadingItems }, (_, index) => ({ id: `loading-${index}` }) as WcWallet)
+    : data;
+
+  return (
+    <FlatList
+      fadingEdgeLength={20}
+      bounces={false}
+      numColumns={4}
+      data={displayData}
+      style={[styles.list, { height: maxHeight }, style]}
+      columnWrapperStyle={styles.columnWrapperStyle}
+      renderItem={({ item }) => {
+        if (isLoading) {
+          return <CardSelectLoader style={styles.itemContainer} />;
+        }
+
+        return (
+          <WalletItem
+            item={item}
+            imageHeaders={imageHeaders}
+            onItemPress={onItemPress}
+            style={styles.itemContainer}
+          />
+        );
+      }}
+      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding }]}
+      initialNumToRender={32}
+      maxToRenderPerBatch={12}
+      windowSize={10}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={onEndReachedThreshold}
+      keyExtractor={(item, index) => item?.id ?? `item-${index}`}
+      getItemLayout={(_, index) => ({
+        length: ITEM_HEIGHT_WITH_GAP,
+        offset: ITEM_HEIGHT_WITH_GAP * index,
+        index
+      })}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  list: {
+    paddingTop: Spacing['3xs']
+  },
+  contentContainer: {
+    paddingBottom: Spacing['xs'],
+    paddingTop: Spacing['3xs'],
+    gap: Spacing['3xs'],
+    alignItems: 'center'
+  },
+  columnWrapperStyle: {
+    justifyContent: 'space-around'
+  },
+  itemContainer: {
+    width: '23%',
+    minWidth: ITEM_WIDTH
+  }
+});

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

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { FlatList } from 'react-native';
 import {
   ApiController,
   OptionsController,
@@ -8,50 +7,48 @@ import {
   type OptionsControllerState
 } 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 styles from './styles';
 import { Placeholder } from '../w3m-placeholder';
 import { Loading } from './components/Loading';
-import { WalletItem } from './components/WalletItem';
+
+import { WalletList } from './components/WalletList';
 
 interface AllWalletsListProps {
-  columns: number;
   onItemPress: (wallet: WcWallet) => void;
-  itemWidth?: number;
   headerHeight?: number;
 }
 
-const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
-
-export function AllWalletsList({
-  columns,
-  itemWidth,
-  onItemPress,
-  headerHeight = 0
-}: AllWalletsListProps) {
+export function AllWalletsList({ onItemPress }: AllWalletsListProps) {
   const [loading, setLoading] = useState<boolean>(ApiController.state.wallets.length === 0);
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [pageLoading, setPageLoading] = useState<boolean>(false);
-  const { maxHeight, padding } = useCustomDimensions();
   const { installed, featured, recommended, wallets } = useSnapshot(ApiController.state);
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
-  const imageHeaders = ApiController._getApiHeaders();
-  const preloadedWallets = installed.length + featured.length + recommended.length;
-  const loadingItems = columns - ((100 + preloadedWallets) % columns);
 
-  const combinedWallets = [
-    ...(customWallets ?? []),
-    ...installed,
-    ...featured,
-    ...recommended,
-    ...wallets
-  ];
+  let combinedWallets = [...installed, ...featured, ...recommended, ...wallets];
+
+  // Show custom wallets after certified wallets.
+  const certifiedIndex = combinedWallets.findLastIndex(wallet => wallet.badge_type === 'certified');
+  if (certifiedIndex > -1) {
+    const nonCertifiedWallets = combinedWallets.splice(certifiedIndex + 1);
+    combinedWallets = combinedWallets.concat(customWallets ?? [], nonCertifiedWallets);
+  } else {
+    combinedWallets = [
+      ...installed,
+      ...featured,
+      ...recommended,
+      ...(customWallets ?? []),
+      ...wallets
+    ];
+  }
 
   // Deduplicate by wallet ID
   const uniqueWallets = Array.from(
     new Map(combinedWallets.map(wallet => [wallet?.id, wallet])).values()
   ).filter(wallet => wallet?.id); // Filter out any undefined wallets
 
+  const loadingItems = 4 - ((100 + uniqueWallets.length) % 4);
+
   const walletList = [
     ...uniqueWallets,
     ...(pageLoading ? (Array.from({ length: loadingItems }) as WcWallet[]) : [])
@@ -73,7 +70,7 @@ export function AllWalletsList({
   const fetchNextPage = async () => {
     try {
       if (
-        walletList.length < ApiController.state.count &&
+        walletList.length - (customWallets ?? []).length < ApiController.state.count &&
         !pageLoading &&
         !loading &&
         ApiController.state.page > 0
@@ -95,7 +92,7 @@ export function AllWalletsList({
   }, []);
 
   if (loading) {
-    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
+    return <Loading loadingItems={12} style={styles.loadingContainer} />;
   }
 
   if (loadingError) {
@@ -114,34 +111,11 @@ export function AllWalletsList({
   }
 
   return (
-    <FlatList
-      key={columns}
-      fadingEdgeLength={20}
-      bounces={false}
-      numColumns={columns}
+    <WalletList
       data={walletList}
-      renderItem={({ item }) => (
-        <WalletItem
-          item={item}
-          itemWidth={itemWidth}
-          imageHeaders={imageHeaders}
-          onItemPress={onItemPress}
-          style={styles.itemContainer}
-        />
-      )}
-      style={{ maxHeight: maxHeight - headerHeight - Spacing['4xl'] }}
-      contentContainerStyle={[
-        styles.contentContainer,
-        { paddingHorizontal: padding + Spacing['2xs'] }
-      ]}
       onEndReached={fetchNextPage}
       onEndReachedThreshold={2}
-      keyExtractor={(item, index) => item?.id ?? index}
-      getItemLayout={(_, index) => ({
-        length: ITEM_HEIGHT,
-        offset: ITEM_HEIGHT * index,
-        index
-      })}
+      onItemPress={onItemPress}
     />
   );
 }

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

@@ -4,12 +4,15 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   contentContainer: {
     paddingBottom: Spacing['4xl'],
-    paddingTop: Spacing['3xs']
+    paddingTop: Spacing['3xs'],
+    gap: Spacing['3xs'],
+    alignItems: 'center'
+  },
+  columnWrapperStyle: {
+    justifyContent: 'space-around'
   },
   itemContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: Spacing['4xs']
+    width: '23%'
   },
   pageLoader: {
     marginTop: Spacing.xl
@@ -20,5 +23,8 @@ export default StyleSheet.create({
   placeholderContainer: {
     flex: 0,
     height: '90%'
+  },
+  loadingContainer: {
+    height: 320
   }
 });

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} />;
 }

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,
+      ConnectingSiwe: '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', 'ConnectingSiwe'];
+  const noBackViews = ['UnsupportedChain'];
   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) {