@reown/appkit-react-native 2.0.0 → 2.0.2

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

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { useSnapshot } from 'valtio';
 import { Balance, FlexView, IconLink, Tabs } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ConnectionsController,
   ConstantsUtil,
   CoreHelperUtil,
@@ -17,16 +16,15 @@ import { AccountActivity } from '../w3m-account-activity';
 import { AccountTokens } from '../w3m-account-tokens';
 import styles from './styles';
 
-export interface AccountWalletFeaturesProps {
-  value: string;
-}
-
 export function AccountWalletFeatures() {
   const [activeTab, setActiveTab] = useState(0);
-  const { tokenBalance } = useSnapshot(AccountController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const balance = CoreHelperUtil.calculateAndFormatBalance(tokenBalance as BalanceType[]);
+  const { activeNetwork, balances, activeNamespace } = useSnapshot(ConnectionsController.state);
+  const balance = CoreHelperUtil.calculateAndFormatBalance(balances as BalanceType[]);
+  const network = ConnectionsController.state.activeNetwork?.caipNetworkId;
+  const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+  const showSend =
+    activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
   const isSwapsEnabled =
     features?.swaps &&
     activeNetwork?.caipNetworkId &&
@@ -43,9 +41,7 @@ export function AccountWalletFeatures() {
     EventsController.sendEvent({
       type: 'track',
       event: 'CLICK_TRANSACTIONS',
-      properties: {
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-      }
+      properties: { isSmartAccount }
     });
   };
 
@@ -54,10 +50,7 @@ export function AccountWalletFeatures() {
     EventsController.sendEvent({
       type: 'track',
       event: 'OPEN_SWAP',
-      properties: {
-        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-      }
+      properties: { network, isSmartAccount }
     });
     RouterController.push('Swap');
   };
@@ -66,10 +59,7 @@ export function AccountWalletFeatures() {
     EventsController.sendEvent({
       type: 'track',
       event: 'OPEN_SEND',
-      properties: {
-        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-      }
+      properties: { network, isSmartAccount }
     });
     RouterController.push('WalletSend');
   };
@@ -96,7 +86,7 @@ export function AccountWalletFeatures() {
         justifyContent="space-around"
         padding={['0', 's', '0', 's']}
       >
-        {isOnRampEnabled && (
+        {isOnRampEnabled ? (
           <IconLink
             icon="card"
             size="lg"
@@ -107,8 +97,8 @@ export function AccountWalletFeatures() {
             style={[styles.action, isSwapsEnabled ? styles.actionCenter : styles.actionLeft]}
             onPress={onBuyPress}
           />
-        )}
-        {isSwapsEnabled && (
+        ) : null}
+        {isSwapsEnabled ? (
           <IconLink
             icon="recycleHorizontal"
             size="lg"
@@ -119,7 +109,7 @@ export function AccountWalletFeatures() {
             style={[styles.action, styles.actionLeft]}
             onPress={onSwapPress}
           />
-        )}
+        ) : null}
         <IconLink
           icon="arrowBottomCircle"
           size="lg"
@@ -130,16 +120,18 @@ export function AccountWalletFeatures() {
           style={[styles.action, isSwapsEnabled ? styles.actionCenter : styles.actionLeft]}
           onPress={onReceivePress}
         />
-        <IconLink
-          icon="paperplane"
-          size="lg"
-          iconColor="accent-100"
-          background
-          backgroundColor="accent-glass-010"
-          pressedColor="accent-glass-020"
-          style={[styles.action, styles.actionRight]}
-          onPress={onSendPress}
-        />
+        {showSend ? (
+          <IconLink
+            icon="paperplane"
+            size="lg"
+            iconColor="accent-100"
+            background
+            backgroundColor="accent-glass-010"
+            pressedColor="accent-glass-020"
+            style={[styles.action, styles.actionRight]}
+            onPress={onSendPress}
+          />
+        ) : null}
       </FlexView>
       <FlexView style={styles.tab}>
         <Tabs tabs={['Tokens', 'Activity']} onTabChange={onTabChange} />

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

@@ -0,0 +1,24 @@
+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, style }: LoadingProps) {
+  return (
+    <WalletList
+      data={[]}
+      onItemPress={() => {}}
+      isLoading={true}
+      loadingItems={loadingItems}
+      style={style}
+    />
+  );
+}
+
+export const Loading = memo(_Loading, () => {
+  return true;
+});

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

@@ -0,0 +1,48 @@
+import { useSnapshot } from 'valtio';
+import { ApiController, AssetController, AssetUtil } from '@reown/appkit-core-react-native';
+import { CardSelect, CardSelectLoader } from '@reown/appkit-ui-react-native';
+import type { WcWallet } from '@reown/appkit-common-react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { memo } from 'react';
+
+interface WalletItemProps {
+  item: WcWallet;
+  displayIndex: number;
+  imageHeaders?: Record<string, string>;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+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);
+
+  if (!item?.id) {
+    return <CardSelectLoader style={style} />;
+  }
+
+  return (
+    <CardSelect
+      imageSrc={imageSrc}
+      style={style}
+      imageHeaders={imageHeaders}
+      name={item?.name ?? 'Unknown'}
+      onPress={() => onItemPress(item, displayIndex)}
+      installed={!!isInstalled}
+      testID={testID}
+    />
+  );
+}
+
+export const MemoizedWalletItem = memo(WalletItem, (prevProps, nextProps) => {
+  return prevProps.item.id === nextProps.item.id;
+});

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

@@ -0,0 +1,152 @@
+import { FlatList, StyleSheet, type StyleProp, type ViewStyle, type ViewToken } from 'react-native';
+import { WalletItem } from './WalletItem';
+import {
+  CardSelectHeight,
+  Spacing,
+  useCustomDimensions,
+  CardSelectLoader,
+  CardSelectWidth
+} from '@reown/appkit-ui-react-native';
+import { ApiController, EventsController } from '@reown/appkit-core-react-native';
+import type { WcWallet } from '@reown/appkit-common-react-native';
+import { useCallback, useRef } from 'react';
+
+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, displayIndex: number) => void;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  isLoading?: boolean;
+  loadingItems?: number;
+  style?: StyleProp<ViewStyle>;
+  testIDKey?: string;
+  searchQuery?: string;
+}
+
+export function WalletList({
+  data,
+  onItemPress,
+  onEndReached,
+  onEndReachedThreshold,
+  isLoading = false,
+  loadingItems = 20,
+  testIDKey,
+  style,
+  searchQuery
+}: Props) {
+  const { padding, maxHeight } = useCustomDimensions();
+  const viewedWalletsRef = useRef<Set<string>>(new Set());
+
+  // Create loading data if isLoading is true
+  const displayData = isLoading
+    ? Array.from({ length: loadingItems }, (_, index) => ({ id: `loading-${index}` }) as WcWallet)
+    : data;
+
+  const keyExtractor = useCallback(
+    (item: WcWallet, index: number) => item?.id ?? `item-${index}`,
+    []
+  );
+
+  const getItemLayout = useCallback((_: any, index: number) => {
+    return {
+      length: ITEM_HEIGHT_WITH_GAP,
+      offset: ITEM_HEIGHT_WITH_GAP * index,
+      index
+    };
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: WcWallet; index: number }) => {
+      if (isLoading) {
+        return <CardSelectLoader style={styles.itemContainer} />;
+      }
+
+      return (
+        <WalletItem
+          item={item}
+          imageHeaders={imageHeaders}
+          displayIndex={index}
+          onItemPress={onItemPress}
+          style={styles.itemContainer}
+          testID={testIDKey ? `${testIDKey}-${item?.id}` : undefined}
+        />
+      );
+    },
+    [isLoading, onItemPress, testIDKey]
+  );
+
+  const onViewableItemsChanged = useCallback(
+    ({ viewableItems }: { viewableItems: ViewToken[] }) => {
+      if (isLoading) return;
+
+      viewableItems.forEach(({ item }, index) => {
+        const wallet = item as WcWallet;
+        if (wallet?.id && !viewedWalletsRef.current.has(wallet.id)) {
+          viewedWalletsRef.current.add(wallet.id);
+          const isInstalled = !!ApiController.state.installed.find(w => w?.id === item?.id);
+          EventsController.trackWalletImpression({
+            wallet,
+            view: 'AllWallets',
+            displayIndex: index,
+            query: searchQuery,
+            installed: isInstalled
+          });
+        }
+      });
+    },
+    [isLoading, searchQuery]
+  );
+
+  const viewabilityConfig = useRef({
+    itemVisiblePercentThreshold: 50, // Item is considered visible when 50% is visible
+    minimumViewTime: 100 // Must be visible for at least 100ms
+  }).current;
+
+  return (
+    <FlatList
+      fadingEdgeLength={20}
+      bounces={false}
+      numColumns={4}
+      data={displayData}
+      style={[styles.list, { height: maxHeight }, style]}
+      columnWrapperStyle={styles.columnWrapperStyle}
+      renderItem={renderItem}
+      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding }]}
+      initialNumToRender={32}
+      maxToRenderPerBatch={12}
+      windowSize={10}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={onEndReachedThreshold}
+      keyExtractor={keyExtractor}
+      removeClippedSubviews={true}
+      getItemLayout={getItemLayout}
+      onViewableItemsChanged={onViewableItemsChanged}
+      viewabilityConfig={viewabilityConfig}
+    />
+  );
+}
+
+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,112 +1,68 @@
 import { useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { FlatList, View } from 'react-native';
 import {
   ApiController,
-  AssetUtil,
+  LogController,
   OptionsController,
   SnackController,
-  type OptionsControllerState,
-  type WcWallet
+  type OptionsControllerState
 } from '@reown/appkit-core-react-native';
-import {
-  CardSelect,
-  CardSelectLoader,
-  CardSelectHeight,
-  FlexView,
-  Spacing
-} from '@reown/appkit-ui-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import styles from './styles';
-import { UiUtil } from '../../utils/UiUtil';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { Placeholder } from '../w3m-placeholder';
+import { Loading } from './components/Loading';
+
+import { WalletList } from './components/WalletList';
 
 interface AllWalletsListProps {
-  columns: number;
-  onItemPress: (wallet: WcWallet) => void;
-  itemWidth?: number;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
+  headerHeight?: number;
 }
 
-export function AllWalletsList({ columns, itemWidth, onItemPress }: 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 { maxWidth, 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[]) : [])
   ];
 
-  const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
-
-  const loadingTemplate = (items: number) => {
-    return (
-      <FlexView
-        flexDirection="row"
-        flexWrap="wrap"
-        alignSelf="center"
-        padding={['0', '0', 's', 'xs']}
-        style={[styles.container, { maxWidth }]}
-      >
-        {Array.from({ length: items }).map((_, index) => (
-          <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
-            <CardSelectLoader />
-          </View>
-        ))}
-      </FlexView>
-    );
-  };
-
-  const walletTemplate = ({ item }: { item: WcWallet; index: number }) => {
-    const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
-    if (!item?.id) {
-      return (
-        <View style={[styles.itemContainer, { width: itemWidth }]}>
-          <CardSelectLoader />
-        </View>
-      );
-    }
-
-    return (
-      <View style={[styles.itemContainer, { width: itemWidth }]}>
-        <CardSelect
-          imageSrc={AssetUtil.getWalletImage(item)}
-          imageHeaders={imageHeaders}
-          name={item?.name ?? 'Unknown'}
-          onPress={() => onItemPress(item)}
-          installed={!!isInstalled}
-        />
-      </View>
-    );
-  };
-
   const initialFetch = async () => {
     try {
       setLoading(true);
       setLoadingError(false);
       await ApiController.fetchWallets({ page: 1 });
-      UiUtil.createViewTransition();
       setLoading(false);
     } catch (error) {
+      LogController.sendError(error, 'AllWalletsList.tsx', 'initialFetch');
       SnackController.showError('Failed to load wallets');
       setLoading(false);
       setLoadingError(true);
@@ -116,7 +72,7 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
   const fetchNextPage = async () => {
     try {
       if (
-        walletList.length < ApiController.state.count &&
+        walletList.length - (customWallets ?? []).length < ApiController.state.count &&
         !pageLoading &&
         !loading &&
         ApiController.state.page > 0
@@ -138,7 +94,7 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
   }, []);
 
   if (loading) {
-    return loadingTemplate(20);
+    return <Loading loadingItems={12} style={styles.loadingContainer} />;
   }
 
   if (loadingError) {
@@ -157,23 +113,11 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
   }
 
   return (
-    <FlatList
-      key={columns}
-      fadingEdgeLength={20}
-      bounces={false}
-      numColumns={columns}
+    <WalletList
       data={walletList}
-      renderItem={walletTemplate}
-      style={styles.container}
-      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
       onEndReached={fetchNextPage}
-      onEndReachedThreshold={2}
-      keyExtractor={(item, index) => item?.id ?? index}
-      getItemLayout={(_, index) => ({
-        length: ITEM_HEIGHT,
-        offset: ITEM_HEIGHT * index,
-        index
-      })}
+      onEndReachedThreshold={0.5}
+      onItemPress={onItemPress}
     />
   );
 }

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

@@ -2,16 +2,17 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  container: {
-    height: '100%'
-  },
   contentContainer: {
-    paddingBottom: Spacing['2xl']
+    paddingBottom: Spacing['4xl'],
+    paddingTop: Spacing['3xs'],
+    gap: Spacing['3xs'],
+    alignItems: 'center'
+  },
+  columnWrapperStyle: {
+    justifyContent: 'space-around'
   },
   itemContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginVertical: Spacing.xs
+    width: '23%'
   },
   pageLoader: {
     marginTop: Spacing.xl
@@ -22,5 +23,8 @@ export default StyleSheet.create({
   placeholderContainer: {
     flex: 0,
     height: '90%'
+  },
+  loadingContainer: {
+    height: 320
   }
 });