@reown/appkit-react-native 0.0.0-fix-ui-changes-20250829201240 → 0.0.0-fix-singleton-appkit-20251001153745

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useLayoutEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { RouterController } from '@reown/appkit-core-react-native';
 
 import { AccountDefaultView } from '../../views/w3m-account-default-view';
@@ -10,7 +10,7 @@ import { ConnectSocialsView } from '../../views/w3m-connect-socials-view';
 import { ConnectingView } from '../../views/w3m-connecting-view';
 import { ConnectingExternalView } from '../../views/w3m-connecting-external-view';
 import { ConnectingSocialView } from '../../views/w3m-connecting-social-view';
-import { ConnectingSiweView } from '../../views/w3m-connecting-siwe-view';
+import { SIWXSignMessageView } from '../../views/w3m-siwx-sign-view';
 import { GetWalletView } from '../../views/w3m-get-wallet-view';
 import { NetworksView } from '../../views/w3m-networks-view';
 import { NetworkSwitchView } from '../../views/w3m-network-switch-view';
@@ -31,8 +31,8 @@ import { WalletSendPreviewView } from '../../views/w3m-wallet-send-preview-view'
 import { WalletSendSelectTokenView } from '../../views/w3m-wallet-send-select-token-view';
 import { WhatIsANetworkView } from '../../views/w3m-what-is-a-network-view';
 import { WhatIsAWalletView } from '../../views/w3m-what-is-a-wallet-view';
-import { UiUtil } from '../../utils/UiUtil';
-import { useRouteTransition } from '../../hooks/useRouteTransition';
+// import { UiUtil } from '../../utils/UiUtil';
+// import { useRouteTransition } from '../../hooks/useRouteTransition';
 
 import { Animated } from 'react-native';
 import { useCustomDimensions } from '@reown/appkit-ui-react-native';
@@ -40,18 +40,15 @@ 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
-  });
+  // const { animateTransition, getAnimatedStyle } = useRouteTransition();
 
-  useEffect(() => {
-    UiUtil.setRouteTransition(animateTransition);
-  }, [animateTransition]);
+  // useEffect(() => {
+  //   UiUtil.setRouteTransition(animateTransition);
+  // }, [animateTransition]);
 
-  useLayoutEffect(() => {
-    UiUtil.createViewTransition();
-  }, [view]);
+  // useEffect(() => {
+  //   UiUtil.createViewTransition();
+  // }, [view]);
 
   const ViewComponent = useMemo(() => {
     switch (view) {
@@ -67,11 +64,11 @@ export function AppKitRouter() {
         return ConnectSocialsView;
       case 'ConnectingExternal':
         return ConnectingExternalView;
-      case 'ConnectingSiwe':
-        return ConnectingSiweView;
+      case 'SIWXSignMessage':
+        return SIWXSignMessageView;
       case 'ConnectingSocial':
         return ConnectingSocialView;
-      case 'ConnectingWalletConnect':
+      case 'WalletConnect':
         return ConnectingView;
       case 'GetWallet':
         return GetWalletView;
@@ -85,14 +82,14 @@ export function AppKitRouter() {
         return OnRampSettingsView;
       case 'OnRampLoading':
         return OnRampLoadingView;
-      case 'SwitchNetwork':
-        return NetworkSwitchView;
       case 'OnRampTransaction':
         return OnRampTransactionView;
       case 'Swap':
         return SwapView;
       case 'SwapPreview':
         return SwapPreviewView;
+      case 'SwitchNetwork':
+        return NetworkSwitchView;
       case 'Transactions':
         return TransactionsView;
       case 'UnsupportedChain':
@@ -119,7 +116,7 @@ export function AppKitRouter() {
   }, [view]);
 
   return (
-    <Animated.View style={[getAnimatedStyle(), { maxHeight }]}>
+    <Animated.View style={{ maxHeight }}>
       <ViewComponent />
     </Animated.View>
   );

package/src/partials/w3m-account-activity/index.tsx

@@ -123,7 +123,7 @@ export function AccountActivity({ style }: Props) {
     <ScrollView
       style={[styles.container, style]}
       fadingEdgeLength={20}
-      contentContainerStyle={[styles.contentContainer]}
+      contentContainerStyle={styles.contentContainer}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}

package/src/partials/w3m-account-wallet-features/index.tsx

@@ -21,7 +21,7 @@ export function AccountWalletFeatures() {
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { activeNetwork, balances, activeNamespace } = useSnapshot(ConnectionsController.state);
   const balance = CoreHelperUtil.calculateAndFormatBalance(balances as BalanceType[]);
-  const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+  const network = ConnectionsController.state.activeNetwork?.caipNetworkId;
   const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
   const showSend =
     activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);

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

@@ -1,13 +1,21 @@
 import { memo } from 'react';
 import { WalletList } from './WalletList';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 interface LoadingProps {
   loadingItems?: number;
+  style?: StyleProp<ViewStyle>;
 }
 
-function _Loading({ loadingItems = 20 }: LoadingProps) {
+function _Loading({ loadingItems = 20, style }: LoadingProps) {
   return (
-    <WalletList data={[]} onItemPress={() => {}} isLoading={true} loadingItems={loadingItems} />
+    <WalletList
+      data={[]}
+      onItemPress={() => {}}
+      isLoading={true}
+      loadingItems={loadingItems}
+      style={style}
+    />
   );
 }
 

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

@@ -7,12 +7,21 @@ import { memo } from 'react';
 
 interface WalletItemProps {
   item: WcWallet;
+  displayIndex: number;
   imageHeaders?: Record<string, string>;
-  onItemPress: (wallet: WcWallet) => void;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
-export function WalletItem({ item, imageHeaders, onItemPress, style }: WalletItemProps) {
+export function WalletItem({
+  item,
+  displayIndex,
+  imageHeaders,
+  onItemPress,
+  style,
+  testID
+}: WalletItemProps) {
   const { walletImages } = useSnapshot(AssetController.state);
   const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
   const imageSrc = AssetUtil.getWalletImage(item, walletImages);
@@ -27,8 +36,9 @@ export function WalletItem({ item, imageHeaders, onItemPress, style }: WalletIte
       style={style}
       imageHeaders={imageHeaders}
       name={item?.name ?? 'Unknown'}
-      onPress={() => onItemPress(item)}
+      onPress={() => onItemPress(item, displayIndex)}
       installed={!!isInstalled}
+      testID={testID}
     />
   );
 }

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

@@ -1,4 +1,4 @@
-import { FlatList, StyleSheet } from 'react-native';
+import { FlatList, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { WalletItem } from './WalletItem';
 import {
   CardSelectHeight,
@@ -18,11 +18,13 @@ const ITEM_HEIGHT_WITH_GAP = ITEM_HEIGHT + Spacing['3xs'];
 
 interface Props {
   data: WcWallet[];
-  onItemPress: (wallet: WcWallet) => void;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
   onEndReached?: () => void;
   onEndReachedThreshold?: number;
   isLoading?: boolean;
   loadingItems?: number;
+  style?: StyleProp<ViewStyle>;
+  testIDKey?: string;
 }
 
 export function WalletList({
@@ -31,7 +33,9 @@ export function WalletList({
   onEndReached,
   onEndReachedThreshold,
   isLoading = false,
-  loadingItems = 20
+  loadingItems = 20,
+  testIDKey,
+  style
 }: Props) {
   const { padding, maxHeight } = useCustomDimensions();
 
@@ -46,9 +50,9 @@ export function WalletList({
       bounces={false}
       numColumns={4}
       data={displayData}
-      style={[styles.list, { height: maxHeight }]}
+      style={[styles.list, { height: maxHeight }, style]}
       columnWrapperStyle={styles.columnWrapperStyle}
-      renderItem={({ item }) => {
+      renderItem={({ item, index }) => {
         if (isLoading) {
           return <CardSelectLoader style={styles.itemContainer} />;
         }
@@ -57,12 +61,17 @@ export function WalletList({
           <WalletItem
             item={item}
             imageHeaders={imageHeaders}
+            displayIndex={index}
             onItemPress={onItemPress}
             style={styles.itemContainer}
+            testID={testIDKey ? `${testIDKey}-${item?.id}` : undefined}
           />
         );
       }}
       contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding }]}
+      initialNumToRender={32}
+      maxToRenderPerBatch={12}
+      windowSize={10}
       onEndReached={onEndReached}
       onEndReachedThreshold={onEndReachedThreshold}
       keyExtractor={(item, index) => item?.id ?? `item-${index}`}
@@ -80,7 +89,7 @@ const styles = StyleSheet.create({
     paddingTop: Spacing['3xs']
   },
   contentContainer: {
-    paddingBottom: Spacing['4xl'],
+    paddingBottom: Spacing['xs'],
     paddingTop: Spacing['3xs'],
     gap: Spacing['3xs'],
     alignItems: 'center'

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

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
 import {
   ApiController,
+  LogController,
   OptionsController,
   SnackController,
   type OptionsControllerState
@@ -14,7 +15,7 @@ import { Loading } from './components/Loading';
 import { WalletList } from './components/WalletList';
 
 interface AllWalletsListProps {
-  onItemPress: (wallet: WcWallet) => void;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
   headerHeight?: number;
 }
 
@@ -25,13 +26,22 @@ export function AllWalletsList({ onItemPress }: AllWalletsListProps) {
   const { installed, featured, recommended, wallets } = useSnapshot(ApiController.state);
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
 
-  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(
@@ -52,6 +62,7 @@ export function AllWalletsList({ onItemPress }: AllWalletsListProps) {
       await ApiController.fetchWallets({ page: 1 });
       setLoading(false);
     } catch (error) {
+      LogController.sendError(error, 'AllWalletsList.tsx', 'initialFetch');
       SnackController.showError('Failed to load wallets');
       setLoading(false);
       setLoadingError(true);
@@ -61,7 +72,7 @@ export function AllWalletsList({ onItemPress }: AllWalletsListProps) {
   const fetchNextPage = async () => {
     try {
       if (
-        walletList.length < ApiController.state.count &&
+        walletList.length - (customWallets ?? []).length < ApiController.state.count &&
         !pageLoading &&
         !loading &&
         ApiController.state.page > 0
@@ -83,7 +94,7 @@ export function AllWalletsList({ onItemPress }: AllWalletsListProps) {
   }, []);
 
   if (loading) {
-    return <Loading loadingItems={20} />;
+    return <Loading loadingItems={12} style={styles.loadingContainer} />;
   }
 
   if (loadingError) {

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

@@ -23,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,5 +1,11 @@
+import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { ApiController, SnackController } from '@reown/appkit-core-react-native';
+import {
+  ApiController,
+  LogController,
+  OptionsController,
+  SnackController
+} from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
 import { useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../w3m-placeholder';
@@ -9,33 +15,33 @@ import { Loading } from '../w3m-all-wallets-list/components/Loading';
 import { WalletList } from '../w3m-all-wallets-list/components/WalletList';
 
 export interface AllWalletsSearchProps {
-  onItemPress: (wallet: WcWallet) => void;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
   searchQuery?: string;
 }
 
 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 { 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) {
+      LogController.sendError(error, 'AllWalletsSearch.tsx', 'searchFetch');
       SnackController.showError('Failed to load wallets');
       setLoading(false);
       setLoadingError(true);
@@ -50,7 +56,7 @@ export function AllWalletsSearch({ searchQuery, onItemPress }: AllWalletsSearchP
   }, [searchQuery, prevSearchQuery, searchFetch]);
 
   if (loading) {
-    return <Loading loadingItems={20} />;
+    return <Loading loadingItems={12} />;
   }
 
   if (loadingError) {
@@ -62,15 +68,21 @@ export function AllWalletsSearch({ searchQuery, onItemPress }: AllWalletsSearchP
         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 <WalletList onItemPress={onItemPress} data={ApiController.state.search} />;
+  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

@@ -10,7 +10,9 @@ import {
   OptionsController,
   EventsController,
   ConstantsUtil,
-  AssetController
+  AssetController,
+  LogController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -60,6 +62,21 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const onStorePress = () => {
     if (storeUrl) {
       CoreHelperUtil.openLink(storeUrl);
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'GET_WALLET',
+        properties: {
+          name: data?.wallet?.name ?? 'Unknown',
+          link: storeUrl,
+          linkType: Platform.select({
+            ios: 'appstore',
+            android: 'playstore',
+            default: undefined
+          }),
+          explorerId: data?.wallet?.id,
+          walletRank: data?.wallet?.order
+        }
+      });
     }
   };
 
@@ -74,17 +91,22 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
         await CoreHelperUtil.openLink(redirect);
         await WcController.state.wcPromise;
         WcController.setConnectedWallet(wcLinking, data?.wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
           properties: {
             method: 'mobile',
             name: data?.wallet?.name ?? 'Unknown',
-            explorer_id: data?.wallet?.id
+            explorerId: data?.wallet?.id,
+            caipNetworkId
           }
         });
       }
     } catch (error: any) {
+      LogController.sendError(error, 'ConnectingMobile.tsx', 'onConnect');
       if (error.message.includes(ConstantsUtil.LINKING_ERROR)) {
         setErrorType('not_installed');
       } else {

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

@@ -4,7 +4,9 @@ import {
   WcController,
   EventsController,
   OptionsController,
-  SnackController
+  SnackController,
+  ConnectionsController,
+  CoreHelperUtil
 } from '@reown/appkit-core-react-native';
 import {
   FlexView,
@@ -35,13 +37,17 @@ export function ConnectingQrCode() {
 
   const onConnect = async () => {
     await WcController.state.wcPromise;
+    const address = ConnectionsController.state.activeAddress;
+    const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
 
     EventsController.sendEvent({
       type: 'track',
       event: 'CONNECT_SUCCESS',
+      address: CoreHelperUtil.getPlainAddress(address),
       properties: {
         method: 'qrcode',
-        name: 'WalletConnect'
+        name: 'WalletConnect',
+        caipNetworkId
       }
     });
   };
@@ -57,7 +63,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

@@ -9,7 +9,9 @@ import {
   CoreHelperUtil,
   OptionsController,
   EventsController,
-  AssetController
+  AssetController,
+  LogController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -50,23 +52,29 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
         await Linking.openURL(redirect);
         await WcController.state.wcPromise;
         WcController.setConnectedWallet(wcLinking, data?.wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
 
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
           properties: {
             method: 'web',
             name: data?.wallet?.name ?? 'Unknown',
-            explorer_id: data?.wallet?.id
+            explorerId: data?.wallet?.id,
+            caipNetworkId
           }
         });
       }
-    } catch {}
+    } catch (error) {
+      LogController.sendError(error, 'ConnectingWeb.tsx', 'onConnect');
+    }
   }, [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

@@ -28,6 +28,8 @@ interface SelectorModalProps {
   itemHeight?: number;
   showNetwork?: boolean;
   searchPlaceholder?: string;
+  emptyTitle?: string;
+  emptyDescription?: string;
 }
 
 const SEPARATOR_HEIGHT = Spacing.s;
@@ -43,7 +45,9 @@ 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();
@@ -67,11 +71,7 @@ export function SelectorModal({
           style={[styles.container, { backgroundColor: Theme['bg-100'], maxHeight }]}
           ListHeaderComponentStyle={styles.header}
           ListEmptyComponent={
-            <Placeholder
-              icon="coinPlaceholder"
-              title="No tokens found"
-              description="There's no available tokens for this network"
-            />
+            <Placeholder icon="coinPlaceholder" title={emptyTitle} description={emptyDescription} />
           }
           ListHeaderComponent={
             <>