@reown/appkit-react-native 0.0.0-fix-height-calc-20250815174808 → 0.0.0-fix-height-calc-20250815195135

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

@@ -0,0 +1,47 @@
+import { CardSelectLoader, FlexView, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { memo } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+
+interface LoadingProps {
+  itemWidth?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+function _Loading({ itemWidth, containerStyle }: LoadingProps) {
+  const { maxWidth, maxHeight } = useCustomDimensions();
+
+  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>
+  );
+}
+
+export const Loading = memo(_Loading, () => {
+  return true;
+});

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

@@ -0,0 +1,45 @@
+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 {
+  containerStyle?: StyleProp<ViewStyle>;
+  item: WcWallet;
+  itemWidth?: number;
+  imageHeaders?: Record<string, string>;
+  onItemPress: (wallet: WcWallet) => void;
+}
+
+export function WalletItem({
+  containerStyle,
+  item,
+  itemWidth,
+  imageHeaders,
+  onItemPress
+}: 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 }]} />;
+  }
+
+  return (
+    <CardSelect
+      imageSrc={imageSrc}
+      style={[containerStyle, { width: itemWidth }]}
+      imageHeaders={imageHeaders}
+      name={item?.name ?? 'Unknown'}
+      onPress={() => onItemPress(item)}
+      installed={!!isInstalled}
+    />
+  );
+}
+
+export const MemoizedWalletItem = memo(WalletItem, (prevProps, nextProps) => {
+  return prevProps.item.id === nextProps.item.id;
+});

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

@@ -1,26 +1,18 @@
 import { useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { FlatList, View } from 'react-native';
+import { FlatList } from 'react-native';
 import {
   ApiController,
-  AssetController,
-  AssetUtil,
   OptionsController,
   SnackController,
   type OptionsControllerState
 } from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
-import {
-  CardSelect,
-  CardSelectLoader,
-  CardSelectHeight,
-  FlexView,
-  Spacing,
-  useCustomDimensions
-} from '@reown/appkit-ui-react-native';
+import { CardSelectHeight, Spacing, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import styles from './styles';
-import { UiUtil } from '../../utils/UiUtil';
 import { Placeholder } from '../w3m-placeholder';
+import { Loading } from './components/Loading';
+import { WalletItem } from './components/WalletItem';
 
 interface AllWalletsListProps {
   columns: number;
@@ -29,6 +21,8 @@ interface AllWalletsListProps {
   headerHeight?: number;
 }
 
+const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
+
 export function AllWalletsList({
   columns,
   itemWidth,
@@ -38,9 +32,8 @@ export function AllWalletsList({
   const [loading, setLoading] = useState<boolean>(ApiController.state.wallets.length === 0);
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [pageLoading, setPageLoading] = useState<boolean>(false);
-  const { maxWidth, maxHeight, padding } = useCustomDimensions();
+  const { maxHeight, padding } = useCustomDimensions();
   const { installed, featured, recommended, wallets } = useSnapshot(ApiController.state);
-  const { walletImages } = useSnapshot(AssetController.state);
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const imageHeaders = ApiController._getApiHeaders();
   const preloadedWallets = installed.length + featured.length + recommended.length;
@@ -64,55 +57,11 @@ export function AllWalletsList({
     ...(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={{ maxWidth, maxHeight }}
-      >
-        {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, walletImages)}
-          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) {
       SnackController.showError('Failed to load wallets');
@@ -146,7 +95,7 @@ export function AllWalletsList({
   }, []);
 
   if (loading) {
-    return loadingTemplate(20);
+    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
   }
 
   if (loadingError) {
@@ -171,7 +120,14 @@ export function AllWalletsList({
       bounces={false}
       numColumns={columns}
       data={walletList}
-      renderItem={walletTemplate}
+      renderItem={({ item }) => (
+        <WalletItem
+          item={item}
+          itemWidth={itemWidth}
+          imageHeaders={imageHeaders}
+          onItemPress={onItemPress}
+        />
+      )}
       style={{ maxHeight: maxHeight - headerHeight - Spacing['4xl'] }}
       contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
       onEndReached={fetchNextPage}

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

@@ -1,23 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
-import { FlatList, View } from 'react-native';
-import {
-  ApiController,
-  AssetController,
-  AssetUtil,
-  SnackController
-} from '@reown/appkit-core-react-native';
+import { FlatList } from 'react-native';
+import { ApiController, SnackController } from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
-import {
-  CardSelect,
-  CardSelectHeight,
-  CardSelectLoader,
-  FlexView,
-  Spacing,
-  useCustomDimensions
-} from '@reown/appkit-ui-react-native';
+import { CardSelectHeight, Spacing, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../w3m-placeholder';
 import styles from './styles';
-import { useSnapshot } from 'valtio';
+
+import { Loading } from '../w3m-all-wallets-list/components/Loading';
+import { WalletItem } from '../w3m-all-wallets-list/components/WalletItem';
 
 export interface AllWalletsSearchProps {
   columns: number;
@@ -27,6 +17,8 @@ export interface AllWalletsSearchProps {
   headerHeight?: number;
 }
 
+const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
+
 export function AllWalletsSearch({
   searchQuery,
   columns,
@@ -38,45 +30,7 @@ export function AllWalletsSearch({
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [prevSearchQuery, setPrevSearchQuery] = useState<string>('');
   const imageHeaders = ApiController._getApiHeaders();
-  const { maxWidth, maxHeight, padding, isLandscape } = useCustomDimensions();
-  const { walletImages } = useSnapshot(AssetController.state);
-
-  const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
-
-  const walletTemplate = ({ item }: { item: WcWallet }) => {
-    const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
-
-    return (
-      <View key={item?.id} style={[styles.itemContainer, { width: itemWidth }]}>
-        <CardSelect
-          imageSrc={AssetUtil.getWalletImage(item, walletImages)}
-          imageHeaders={imageHeaders}
-          name={item?.name ?? 'Unknown'}
-          onPress={() => onItemPress(item)}
-          installed={!!isInstalled}
-          testID={`wallet-search-item-${item?.id}`}
-        />
-      </View>
-    );
-  };
-
-  const loadingTemplate = (items: number) => {
-    return (
-      <FlexView
-        flexDirection="row"
-        flexWrap="wrap"
-        alignSelf="center"
-        padding={['0', '0', 's', 'xs']}
-        style={{ maxWidth, maxHeight: maxHeight - headerHeight }}
-      >
-        {Array.from({ length: items }).map((_, index) => (
-          <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
-            <CardSelectLoader />
-          </View>
-        ))}
-      </FlexView>
-    );
-  };
+  const { maxHeight, padding, isLandscape } = useCustomDimensions();
 
   const emptyTemplate = () => {
     return (
@@ -109,7 +63,7 @@ export function AllWalletsSearch({
   }, [searchQuery, prevSearchQuery, searchFetch]);
 
   if (loading) {
-    return loadingTemplate(20);
+    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
   }
 
   if (loadingError) {
@@ -138,7 +92,14 @@ export function AllWalletsSearch({
       bounces={false}
       numColumns={columns}
       data={ApiController.state.search}
-      renderItem={walletTemplate}
+      renderItem={({ item }) => (
+        <WalletItem
+          item={item}
+          itemWidth={itemWidth}
+          imageHeaders={imageHeaders}
+          onItemPress={onItemPress}
+        />
+      )}
       style={{ maxHeight: maxHeight - headerHeight - Spacing['2xl'] }}
       contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
       keyExtractor={item => item.id}

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

@@ -14,7 +14,7 @@ export function Header() {
   const { close, back } = useInternalAppKit();
   const { data, view } = useSnapshot(RouterController.state);
   const onHelpPress = () => {
-    RouterController.push('WhatIsAWallet');
+    RouterController.push('WhatIsAWallet', undefined, 'backward');
     EventsController.sendEvent({ type: 'track', event: 'CLICK_WALLET_HELP' });
   };
 

package/src/views/w3m-connecting-view/index.tsx

@@ -15,7 +15,6 @@ import { ConnectingQrCode } from '../../partials/w3m-connecting-qrcode';
 import { ConnectingMobile } from '../../partials/w3m-connecting-mobile';
 import { ConnectingWeb } from '../../partials/w3m-connecting-web';
 import { ConnectingHeader } from '../../partials/w3m-connecting-header';
-import { UiUtil } from '../../utils/UiUtil';
 import { type Platform } from '@reown/appkit-common-react-native';
 
 export function ConnectingView() {
@@ -77,7 +76,6 @@ export function ConnectingView() {
   };
 
   const onSelectPlatform = (tab: Platform) => {
-    UiUtil.createViewTransition();
     setPlatform(tab);
   };