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

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

@@ -1,7 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
-import { useWindowDimensions, StatusBar } from 'react-native';
-import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
+import { Card, Modal, ThemeProvider, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   EventsController,
@@ -14,7 +13,6 @@ import {
 import { AppKitRouter } from '../w3m-router';
 import { Header } from '../../partials/w3m-header';
 import { Snackbar } from '../../partials/w3m-snackbar';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
@@ -23,10 +21,7 @@ export function AppKit() {
   const { open } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
-  const { height } = useWindowDimensions();
-  const { isLandscape } = useCustomDimensions();
-  const portraitHeight = height - 80;
-  const landScapeHeight = height * 0.95 - (StatusBar.currentHeight ?? 0);
+  const { maxHeight } = useCustomDimensions();
 
   const handleBackPress = () => {
     if (RouterController.state.history.length > 1) {
@@ -52,23 +47,19 @@ export function AppKit() {
   }, [projectId, prefetch]);
 
   return (
-    <>
-      <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
-        <Modal
-          visible={open}
-          onRequestClose={handleBackPress}
-          onBackdropPress={handleModalClose}
-          testID="w3m-modal"
-        >
-          <Card
-            style={[styles.card, { maxHeight: isLandscape ? landScapeHeight : portraitHeight }]}
-          >
-            <Header />
-            <AppKitRouter />
-            <Snackbar />
-          </Card>
-        </Modal>
-      </ThemeProvider>
-    </>
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <Modal
+        visible={open}
+        onRequestClose={handleBackPress}
+        onBackdropPress={handleModalClose}
+        testID="w3m-modal"
+      >
+        <Card style={[styles.card, { maxHeight }]}>
+          <Header />
+          <AppKitRouter />
+          <Snackbar />
+        </Card>
+      </Modal>
+    </ThemeProvider>
   );
 }

package/src/modal/w3m-modal/styles.ts

@@ -3,7 +3,6 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   card: {
     borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    maxHeight: '80%'
+    borderBottomRightRadius: 0
   }
 });

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

@@ -16,11 +16,7 @@ import { AccountActivity } from '../w3m-account-activity';
 import { AccountTokens } from '../w3m-account-tokens';
 import styles from './styles';
 
-export interface AccountWalletFeaturesProps {
-  isBalanceLoading: boolean;
-}
-
-export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeaturesProps) {
+export function AccountWalletFeatures() {
   const [activeTab, setActiveTab] = useState(0);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { activeNetwork, balances, activeNamespace } = useSnapshot(ConnectionsController.state);
@@ -141,9 +137,7 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
         <Tabs tabs={['Tokens', 'Activity']} onTabChange={onTabChange} />
       </FlexView>
       <FlexView padding={['m', '0', '0', '0']} style={styles.tabContainer}>
-        {activeTab === 0 && (
-          <AccountTokens style={styles.tabContent} isLoading={isBalanceLoading} />
-        )}
+        {activeTab === 0 && <AccountTokens style={styles.tabContent} />}
         {activeTab === 1 && <AccountActivity style={styles.tabContent} />}
       </FlexView>
     </FlexView>

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,47 @@
+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;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function WalletItem({
+  containerStyle,
+  item,
+  itemWidth,
+  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 (
+    <CardSelect
+      imageSrc={imageSrc}
+      style={[containerStyle, { width: itemWidth }, style]}
+      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,37 +1,38 @@
 import { useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { FlatList, View } from 'react-native';
+import { FlatList } from 'react-native';
 import {
   ApiController,
-  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
-} 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 { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { Placeholder } from '../w3m-placeholder';
+import { Loading } from './components/Loading';
+import { WalletItem } from './components/WalletItem';
 
 interface AllWalletsListProps {
   columns: number;
   onItemPress: (wallet: WcWallet) => void;
   itemWidth?: number;
+  headerHeight?: number;
 }
 
-export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsListProps) {
+const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
+
+export function AllWalletsList({
+  columns,
+  itemWidth,
+  onItemPress,
+  headerHeight = 0
+}: 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 { maxHeight, padding } = useCustomDimensions();
   const { installed, featured, recommended, wallets } = useSnapshot(ApiController.state);
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const imageHeaders = ApiController._getApiHeaders();
@@ -56,55 +57,11 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
     ...(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) {
       SnackController.showError('Failed to load wallets');
@@ -138,7 +95,7 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
   }, []);
 
   if (loading) {
-    return loadingTemplate(20);
+    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
   }
 
   if (loadingError) {
@@ -163,9 +120,20 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
       bounces={false}
       numColumns={columns}
       data={walletList}
-      renderItem={walletTemplate}
-      style={styles.container}
-      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
+      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}

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

@@ -2,16 +2,14 @@ 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']
   },
   itemContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: Spacing.xs
+    margin: Spacing['4xs']
   },
   pageLoader: {
     marginTop: Spacing.xl

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

@@ -1,73 +1,36 @@
 import { useCallback, useEffect, useState } from 'react';
-import { FlatList, View } from 'react-native';
-import { ApiController, 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
-} from '@reown/appkit-ui-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { CardSelectHeight, Spacing, 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';
+
 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
+  onItemPress,
+  headerHeight = 0
 }: AllWalletsSearchProps) {
   const [loading, setLoading] = useState<boolean>(false);
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [prevSearchQuery, setPrevSearchQuery] = useState<string>('');
   const imageHeaders = ApiController._getApiHeaders();
-  const { maxWidth, padding, isLandscape } = useCustomDimensions();
-
-  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)}
-          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={[styles.container, { maxWidth }]}
-      >
-        {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 (
@@ -100,7 +63,7 @@ export function AllWalletsSearch({
   }, [searchQuery, prevSearchQuery, searchFetch]);
 
   if (loading) {
-    return loadingTemplate(20);
+    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
   }
 
   if (loadingError) {
@@ -129,9 +92,20 @@ export function AllWalletsSearch({
       bounces={false}
       numColumns={columns}
       data={ApiController.state.search}
-      renderItem={walletTemplate}
-      style={styles.container}
-      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
+      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,

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

@@ -2,11 +2,8 @@ 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']
   },
   placeholderContainer: {
     flex: 0,
@@ -22,7 +19,7 @@ export default StyleSheet.create({
   itemContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: Spacing.xs
+    margin: Spacing['4xs']
   },
   text: {
     marginTop: Spacing.xs

package/src/partials/w3m-connecting-mobile/index.tsx

@@ -9,7 +9,8 @@ import {
   CoreHelperUtil,
   OptionsController,
   EventsController,
-  ConstantsUtil
+  ConstantsUtil,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -17,10 +18,10 @@ import {
   LoadingThumbnail,
   WalletImage,
   Link,
-  IconBox
+  IconBox,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { StoreLink } from './components/StoreLink';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../w3m-connecting-body';
 import styles from './styles';
@@ -35,6 +36,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const { data } = RouterController.state;
   const { maxWidth: width } = useCustomDimensions();
   const { wcUri, wcError } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const showCopy =
     OptionsController.isClipboardAvailable() &&
@@ -108,7 +110,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
         <LoadingThumbnail paused={!!errorType || wcError}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
           {wcError ? (

package/src/partials/w3m-connecting-qrcode/components/ReownButton.tsx

@@ -0,0 +1,20 @@
+import { Linking, type StyleProp, type ViewStyle } from 'react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { FlexView, Icon, Pressable, Text } from '@reown/appkit-ui-react-native';
+
+interface Props {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ReownButton({ style }: Props) {
+  return (
+    <Pressable transparent onPress={() => Linking.openURL(ConstantsUtil.REOWN_URL)} style={style}>
+      <FlexView alignItems="center" justifyContent="center" flexDirection="row" columnGap="2xs">
+        <Text variant="small-500" color="fg-100">
+          UX by
+        </Text>
+        <Icon name="reown" color="fg-150" width={100} height={30} />
+      </FlexView>
+    </Pressable>
+  );
+}

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -6,11 +6,16 @@ import {
   OptionsController,
   SnackController
 } from '@reown/appkit-core-react-native';
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import { FlexView, Link, QrCode, Text, Spacing, Icon } from '@reown/appkit-ui-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import {
+  FlexView,
+  Link,
+  QrCode,
+  Text,
+  Spacing,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import styles from './styles';
-import { Linking, Pressable } from 'react-native';
+import { ReownButton } from './components/ReownButton';
 
 export function ConnectingQrCode() {
   const { wcUri } = useSnapshot(WcController.state);
@@ -49,10 +54,10 @@ export function ConnectingQrCode() {
       alignItems="center"
       justifyContent="center"
       flexDirection={isPortrait ? 'column' : 'row'}
-      padding={['xl', 'xl', '2xl', 'xl']}
+      padding="xl"
     >
       <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
-      <FlexView alignItems="center" margin={['m', 'm', '3xl', 'm']}>
+      <FlexView alignItems="center" margin="m">
         <Text variant="paragraph-500">Scan this QR code with your phone</Text>
         {showCopy ? (
           <Link
@@ -65,15 +70,8 @@ export function ConnectingQrCode() {
             Copy link
           </Link>
         ) : null}
+        <ReownButton style={styles.reownButton} />
       </FlexView>
-      <Pressable onPress={() => Linking.openURL(ConstantsUtil.REOWN_URL)}>
-        <FlexView alignItems="center" justifyContent="center" flexDirection="row" columnGap="2xs">
-          <Text variant="small-500" color="fg-100">
-            UX by
-          </Text>
-          <Icon name="reown" color="fg-150" width={100} height={30} />
-        </FlexView>
-      </Pressable>
     </FlexView>
   );
 }

package/src/partials/w3m-connecting-qrcode/styles.ts

@@ -4,5 +4,8 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   copyButton: {
     marginTop: Spacing.m
+  },
+  reownButton: {
+    marginTop: Spacing['2xl']
   }
 });

package/src/partials/w3m-connecting-web/index.tsx

@@ -8,7 +8,8 @@ import {
   WcController,
   CoreHelperUtil,
   OptionsController,
-  EventsController
+  EventsController,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -29,6 +30,7 @@ interface ConnectingWebProps {
 export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   const { data } = RouterController.state;
   const { wcUri, wcError } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const showCopy = OptionsController.isClipboardAvailable();
   const bodyMessage = getMessage({
     walletName: data?.wallet?.name,
@@ -68,7 +70,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
         <LoadingThumbnail paused={wcError}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
           {wcError ? (

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' });
   };