@reown/appkit-react-native 0.0.0-feat-multichain-20250818154639 → 0.0.0-feat-multichain-20250903132047

package/src/AppKit.ts

@@ -14,7 +14,8 @@ import {
   CoreHelperUtil,
   SendController,
   BlockchainApiController,
-  WalletUtil
+  WalletUtil,
+  type RouterControllerState
 } from '@reown/appkit-core-react-native';
 
 import {
@@ -149,7 +150,7 @@ export class AppKit {
     }
   }
 
-  private processConnection(
+  private async processConnection(
     connector: WalletConnector,
     namespaces?: Namespaces,
     shouldCloseModal: boolean = true
@@ -173,7 +174,7 @@ export class AppKit {
     this.setConnection(initializedAdapters, namespaces, walletInfo, properties);
 
     // Sync accounts
-    this.syncAccounts(initializedAdapters);
+    await this.syncAccounts(initializedAdapters);
 
     // Handle SIWE if enabled
     this.handleSiweConnectionIfEnabled(shouldCloseModal);
@@ -310,10 +311,14 @@ export class AppKit {
         ConnectionsController.state.activeNamespace === 'eip155' &&
         !!ConnectionsController.state.activeAddress
       ) {
-        await this.disconnect();
+        return await this.disconnect();
       }
     }
 
+    if (RouterController.state.view === 'UnsupportedChain') {
+      return await this.disconnect();
+    }
+
     RouterUtil.checkOnRampBack();
     RouterUtil.checkSocialLoginBack();
   }
@@ -332,11 +337,16 @@ export class AppKit {
     const adapter = this.getAdapterByNamespace(namespace);
     if (!adapter) throw new Error('No active adapter');
 
-    ConnectionsController.setAccountType(namespace, type);
+    const address = ConnectionsController.setAccountType(namespace, type);
 
     // Get balances from API
     ConnectionsController.fetchBalance();
 
+    // Fetch transactions for the new account
+    if (address) {
+      TransactionsController.fetchTransactions(address, true);
+    }
+
     // Sync balances from adapter
     this.syncNativeBalance(adapter, network);
 
@@ -400,7 +410,7 @@ export class AppKit {
 
           const namespaces = connector.getNamespaces();
 
-          this.processConnection(connector, namespaces, false);
+          await this.processConnection(connector, namespaces, false);
         } catch (error) {
           // Use console.warn for non-critical initialization failures
           console.warn(`Failed to initialize connector type ${connected.type}:`, error);
@@ -599,22 +609,27 @@ export class AppKit {
   private subscribeToAdapterEvents(adapter: BlockchainAdapter): void {
     adapter.on('accountsChanged', ({ accounts }) => {
       const namespace = adapter.getSupportedNamespace();
-      ConnectionsController.updateAccounts(namespace, accounts);
+      const hasChanged = ConnectionsController.updateAccounts(namespace, accounts);
 
-      if (namespace === 'eip155') {
+      if (hasChanged && namespace === 'eip155') {
         this.handleSiweChange({ isAccountChange: true });
       }
     });
 
-    adapter.on('chainChanged', ({ chainId }) => {
+    adapter.on('chainChanged', async ({ chainId }) => {
+      const isSupported = this.networks.some(network => network.id?.toString() === chainId);
+      if (!isSupported) {
+        return this.navigate('UnsupportedChain');
+      }
+
       const namespace = adapter.getSupportedNamespace();
       const chain = `${namespace}:${chainId}` as CaipNetworkId;
       ConnectionsController.setActiveNetwork(namespace, chain);
+      ConnectionsController.setActiveNamespace(namespace);
+
       const connection = ConnectionsController.state.connections.get(namespace);
       const isAuth = !!connection?.properties?.provider;
 
-      const activeNamespace = ConnectionsController.state.activeNamespace;
-
       const network = this.networks.find(n => n.id?.toString() === chainId);
       this.syncNativeBalance(adapter, network);
       SendController.resetState();
@@ -624,19 +639,16 @@ export class AppKit {
         ConnectionsController.fetchBalance();
       }
 
-      // Refresh transactions only when the active network changes
-      if (namespace === activeNamespace) {
-        const address = connection?.accounts?.find(account =>
-          account.startsWith(`${namespace}:${chainId}`)
-        );
-        if (address) {
-          TransactionsController.fetchTransactions(address, true);
-        }
+      const address = connection?.accounts?.find(account =>
+        account.startsWith(`${namespace}:${chainId}`)
+      );
+      if (address) {
+        TransactionsController.fetchTransactions(address, true);
       }
 
       // Check if user needs to sign in again
       if (namespace === 'eip155') {
-        this.handleSiweChange({ isNetworkChange: true });
+        await this.handleSiweChange({ isNetworkChange: true });
       }
     });
 
@@ -685,6 +697,7 @@ export class AppKit {
 
     if (options.siweConfig) {
       SIWEController.setSIWEClient(options.siweConfig);
+      OptionsController.setIsSiweEnabled(options.siweConfig.options.enabled);
     }
 
     if (
@@ -779,11 +792,15 @@ export class AppKit {
     await this.initRecentWallets(options);
   }
 
-  private onSiweNavigation = () => {
+  private navigate = (routeName: RouterControllerState['view']) => {
+    if (RouterController.state.view === routeName) {
+      return;
+    }
+
     if (ModalController.state.open) {
-      RouterController.push('ConnectingSiwe');
+      RouterController.push(routeName);
     } else {
-      ModalController.open({ view: 'ConnectingSiwe' });
+      ModalController.open({ view: routeName });
     }
   };
 
@@ -796,29 +813,33 @@ export class AppKit {
     const { enabled, signOutOnAccountChange, signOutOnNetworkChange } =
       SIWEController.state._client?.options ?? {};
 
-    if (enabled) {
-      const session = await SIWEController.getSession();
-      if (session && isAccountChange) {
-        if (signOutOnAccountChange) {
-          // If the address has changed and signOnAccountChange is enabled, sign out
-          await SIWEController.signOut();
+    if (!enabled || RouterController.state.view === 'ConnectingSiwe') {
+      // Do nothing if view is connecting siwe or siwe is not enabled
+      return;
+    }
 
-          return this.onSiweNavigation();
-        }
-      } else if (isNetworkChange) {
-        if (signOutOnNetworkChange) {
-          // If the network has changed and signOnNetworkChange is enabled, sign out
-          await SIWEController.signOut();
+    const session = await SIWEController.getSession();
+    if (session && isAccountChange) {
+      if (signOutOnAccountChange) {
+        // If the address has changed and signOnAccountChange is enabled, sign out
+        await SIWEController.signOut();
 
-          return this.onSiweNavigation();
-        }
-      } else if (!session) {
-        // If it's connected but there's no session, show sign view
-        return this.onSiweNavigation();
-      } else if (isConnection) {
-        // Connected with 1CA
-        ModalController.close();
+        return this.navigate('ConnectingSiwe');
+      }
+    } else if (session && isNetworkChange) {
+      if (signOutOnNetworkChange) {
+        // If the network has changed and signOnNetworkChange is enabled, sign out
+        await SIWEController.signOut();
+
+        return this.navigate('ConnectingSiwe');
       }
+    } else if (!session) {
+      // If it's connected but there's no session, show sign view
+
+      return this.navigate('ConnectingSiwe');
+    } else if (isConnection) {
+      // Already connected with 1CA
+      ModalController.close();
     }
   }
 }

package/src/connectors/WalletConnectConnector.ts

@@ -207,13 +207,16 @@ export class WalletConnectConnector extends WalletConnector {
       throw new Error('WalletConnectConnector: Provider not initialized. Call init() first.');
     }
 
-    const provider = this.provider as IUniversalProvider;
+    const provider = this.provider;
 
     if (namespace) {
-      // @ts-ignore
       return {
-        ...provider,
-        request: (args: RequestArguments, chainId?: CaipNetworkId) => {
+        ...this.provider,
+        connect: async (params?: any) => provider.connect(params) as Promise<any>,
+        disconnect: provider.disconnect.bind(provider),
+        on: provider.on.bind(provider),
+        off: provider.off.bind(provider),
+        request: async (args: RequestArguments, chainId?: CaipNetworkId) => {
           const _chainId = this.getChainId(namespace);
 
           return provider.request(args, chainId || _chainId);

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

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
-import { Card, Modal, ThemeProvider, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   EventsController,
@@ -21,7 +21,6 @@ export function AppKit() {
   const { open } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
-  const { maxHeight } = useCustomDimensions();
 
   const handleBackPress = () => {
     if (RouterController.state.history.length > 1) {
@@ -54,7 +53,7 @@ export function AppKit() {
         onBackdropPress={handleModalClose}
         testID="w3m-modal"
       >
-        <Card style={[styles.card, { maxHeight }]}>
+        <Card style={styles.card}>
           <Header />
           <AppKitRouter />
           <Snackbar />

package/src/modal/w3m-router/index.tsx

@@ -13,7 +13,6 @@ import { ConnectingSocialView } from '../../views/w3m-connecting-social-view';
 import { ConnectingSiweView } from '../../views/w3m-connecting-siwe-view';
 import { GetWalletView } from '../../views/w3m-get-wallet-view';
 import { NetworksView } from '../../views/w3m-networks-view';
-import { NetworkSwitchView } from '../../views/w3m-network-switch-view';
 import { OnRampLoadingView } from '../../views/w3m-onramp-loading-view';
 import { OnRampView } from '../../views/w3m-onramp-view';
 import { OnRampCheckoutView } from '../../views/w3m-onramp-checkout-view';
@@ -35,9 +34,11 @@ import { UiUtil } from '../../utils/UiUtil';
 import { useRouteTransition } from '../../hooks/useRouteTransition';
 
 import { Animated } from 'react-native';
+import { useCustomDimensions } from '@reown/appkit-ui-react-native';
 
 export function AppKitRouter() {
   const { view } = useSnapshot(RouterController.state);
+  const { maxHeight } = useCustomDimensions();
   const { animateTransition, getAnimatedStyle } = useRouteTransition({
     duration: 300,
     useNativeDriver: true
@@ -83,8 +84,6 @@ export function AppKitRouter() {
         return OnRampSettingsView;
       case 'OnRampLoading':
         return OnRampLoadingView;
-      case 'SwitchNetwork':
-        return NetworkSwitchView;
       case 'OnRampTransaction':
         return OnRampTransactionView;
       case 'Swap':
@@ -117,7 +116,7 @@ export function AppKitRouter() {
   }, [view]);
 
   return (
-    <Animated.View style={[getAnimatedStyle()]}>
+    <Animated.View style={[getAnimatedStyle(), { maxHeight }]}>
       <ViewComponent />
     </Animated.View>
   );

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

@@ -1,44 +1,13 @@
-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';
 
 interface LoadingProps {
-  itemWidth?: number;
-  containerStyle?: StyleProp<ViewStyle>;
+  loadingItems?: number;
 }
 
-function _Loading({ itemWidth, containerStyle }: LoadingProps) {
-  const { maxWidth, maxHeight } = useCustomDimensions();
-
+function _Loading({ loadingItems = 20 }: 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} />
   );
 }
 

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,95 @@
+import { FlatList, StyleSheet } 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;
+}
+
+export function WalletList({
+  data,
+  onItemPress,
+  onEndReached,
+  onEndReachedThreshold,
+  isLoading = false,
+  loadingItems = 20
+}: 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 }]}
+      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 }]}
+      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['4xl'],
+    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,36 +7,23 @@ 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 ?? []),
@@ -52,6 +38,8 @@ export function AllWalletsList({
     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[]) : [])
@@ -95,7 +83,7 @@ export function AllWalletsList({
   }, []);
 
   if (loading) {
-    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
+    return <Loading loadingItems={20} />;
   }
 
   if (loadingError) {
@@ -114,34 +102,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

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

@@ -1,36 +1,23 @@
 import { useCallback, useEffect, useState } from 'react';
-import { FlatList } from 'react-native';
 import { ApiController, 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 [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 (
@@ -63,7 +50,7 @@ export function AllWalletsSearch({
   }, [searchQuery, prevSearchQuery, searchFetch]);
 
   if (loading) {
-    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
+    return <Loading loadingItems={20} />;
   }
 
   if (loadingError) {
@@ -85,33 +72,5 @@ export function AllWalletsSearch({
     return emptyTemplate();
   }
 
-  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={ApiController.state.search} />;
 }