@reown/appkit-react-native 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/utils/HelpersUtil.ts

@@ -1,10 +1,11 @@
 import type { Namespace, NamespaceConfig } from '@walletconnect/universal-provider';
-import type {
-  AppKitNetwork,
-  CaipNetworkId,
-  ChainNamespace
+import {
+  type AppKitNetwork,
+  type CaipNetworkId,
+  type ChainNamespace,
+  solana,
+  solanaDevnet
 } from '@reown/appkit-common-react-native';
-import { solana, solanaDevnet } from '@reown/appkit-common-react-native';
 
 export const DEFAULT_METHODS = {
   solana: [

package/src/utils/NetworkUtil.ts

@@ -1,5 +1,10 @@
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import type { AppKitNetwork, CaipNetworkId, Network } from '@reown/appkit-common-react-native';
+import {
+  type AppKitNetwork,
+  type CaipNetworkId,
+  ConstantsUtil,
+  type Network
+} from '@reown/appkit-common-react-native';
+import type { CaipNamespaces } from '@reown/appkit-core-react-native';
 
 export const NetworkUtil = {
   formatNetwork(network: Network, projectId: string): AppKitNetwork {
@@ -37,17 +42,19 @@ export const NetworkUtil = {
     return url.toString();
   },
 
-  getDefaultChainId(network?: AppKitNetwork): CaipNetworkId | undefined {
-    if (!network) return undefined;
-
-    if (network.caipNetworkId) {
-      return network.caipNetworkId;
-    }
-
-    if (network.chainNamespace) {
-      return `${network.chainNamespace}:${network.id}`;
+  getDefaultChainId(
+    namespaces: CaipNamespaces,
+    defaultNetwork?: AppKitNetwork
+  ): CaipNetworkId | undefined {
+    if (!defaultNetwork) return undefined;
+
+    const isValidDefaultNetwork = Object.values(namespaces).some(
+      namespace => namespace?.chains?.some(chain => chain === defaultNetwork.caipNetworkId)
+    );
+    if (isValidDefaultNetwork) {
+      return defaultNetwork.caipNetworkId;
     }
 
-    return `eip155:${network.id}`;
+    return undefined;
   }
 };

package/src/utils/UiUtil.ts

@@ -4,6 +4,7 @@ import {
   StorageUtil,
   type WcWallet
 } from '@reown/appkit-core-react-native';
+import type { WalletDeepLink } from '@reown/appkit-common-react-native';
 
 export const UiUtil = {
   TOTAL_VISIBLE_WALLETS: 4,
@@ -18,19 +19,20 @@ export const UiUtil = {
     // LayoutAnimation.configureNext(LayoutAnimation.create(150, type, creationProp));
   },
 
-  storeConnectedWallet: async (
-    wcLinking: { name: string; href: string },
-    pressedWallet?: WcWallet
-  ) => {
+  storeConnectedWallet: async (wcLinking: WalletDeepLink, pressedWallet?: WcWallet) => {
     StorageUtil.setWalletConnectDeepLink(wcLinking);
 
     if (pressedWallet) {
-      const recentWallets = await StorageUtil.addRecentWallet(pressedWallet);
-      if (recentWallets) {
-        ConnectionController.setRecentWallets(recentWallets);
-      }
+      UiUtil.storeRecentWallet(pressedWallet);
       const url = AssetUtil.getWalletImage(pressedWallet);
       ConnectionController.setConnectedWalletImageUrl(url);
     }
+  },
+
+  storeRecentWallet: async (wallet: WcWallet) => {
+    const recentWallets = await StorageUtil.addRecentWallet(wallet);
+    if (recentWallets) {
+      ConnectionController.setRecentWallets(recentWallets);
+    }
   }
 };

package/src/views/w3m-account-default-view/components/auth-buttons.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { UpgradeWalletButton } from './upgrade-wallet-button';
-import { ListItem, ListSocial, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { ListSocial, Spacing, Text } from '@reown/appkit-ui-react-native';
 import type { SocialProvider } from '@reown/appkit-common-react-native';
 
 export interface AuthButtonsProps {
@@ -21,30 +21,19 @@ export function AuthButtons({
   return (
     <>
       <UpgradeWalletButton onPress={onUpgradePress} style={styles.upgradeButton} />
-      {socialProvider ? (
+      {socialProvider && (
         <ListSocial
           logo={socialProvider}
           logoHeight={32}
           logoWidth={32}
           style={[styles.socialContainer, style]}
+          onPress={onPress}
+          chevron={socialProvider === 'email'}
         >
           <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail" style={styles.socialText}>
             {text}
           </Text>
         </ListSocial>
-      ) : (
-        <ListItem
-          icon="mail"
-          onPress={onPress}
-          chevron
-          testID="button-email"
-          iconColor="fg-100"
-          style={style}
-        >
-          <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail">
-            {text}
-          </Text>
-        </ListItem>
       )}
     </>
   );

package/src/views/w3m-account-default-view/index.tsx

@@ -2,24 +2,20 @@ import { useSnapshot } from 'valtio';
 import { useState } from 'react';
 import { Linking, ScrollView } from 'react-native';
 import {
-  AccountController,
   ApiController,
-  AssetUtil,
-  ConnectionController,
-  ConnectorController,
   CoreHelperUtil,
   EventsController,
   ModalController,
-  NetworkController,
   OptionsController,
   RouterController,
   SnackController,
-  type AppKitFrameProvider,
   ConstantsUtil,
   SwapController,
   OnRampController,
-  ConnectionsController
+  ConnectionsController,
+  AssetController
 } from '@reown/appkit-core-react-native';
+// import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import {
   Avatar,
   Button,
@@ -38,30 +34,31 @@ import { AuthButtons } from './components/auth-buttons';
 import styles from './styles';
 
 export function AccountDefaultView() {
-  const { profileName, profileImage, preferredAccountType } = useSnapshot(AccountController.state);
+  const { switchAccountType, disconnect } = useAppKit();
   const { loading } = useSnapshot(ModalController.state);
   const {
     activeAddress: address,
     activeBalance: balance,
     activeNetwork,
-    activeNamespace
+    activeNamespace,
+    connection,
+    accountType,
+    identity
   } = useSnapshot(ConnectionsController.state);
   const account = address?.split(':')[2];
   const [disconnecting, setDisconnecting] = useState(false);
-  const { connectedConnector } = useSnapshot(ConnectorController.state);
-  const { connectedSocialProvider } = useSnapshot(ConnectionController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   const showCopy = OptionsController.isClipboardAvailable();
-  const isAuth = connectedConnector === 'AUTH';
+  const isAuth = !!connection?.properties?.provider;
   const showBalance = balance && !isAuth;
   const showExplorer = Object.keys(activeNetwork?.blockExplorers ?? {}).length > 0 && !isAuth;
   const showBack = history.length > 1;
-  const showSwitchAccountType = isAuth && NetworkController.checkIfSmartAccountEnabled();
+  const showSwitchAccountType = isAuth && activeNamespace === 'eip155';
   const showActivity =
     !isAuth &&
-    activeNamespace &&
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
   const showSwaps =
@@ -69,8 +66,17 @@ export function AccountDefaultView() {
     features?.swaps &&
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(activeNetwork.caipNetworkId);
+
+  const showSend =
+    !isAuth && activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
+  const showBuy =
+    !isAuth &&
+    isOnRampEnabled &&
+    activeNamespace &&
+    ConstantsUtil.ONRAMP_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
   const { padding } = useCustomDimensions();
-  const { disconnect } = useAppKit();
 
   async function onDisconnect() {
     setDisconnecting(true);
@@ -80,41 +86,17 @@ export function AccountDefaultView() {
 
   const onSwitchAccountType = async () => {
     try {
-      if (isAuth) {
-        ModalController.setLoading(true);
-        const accountType =
-          AccountController.state.preferredAccountType === 'eoa' ? 'smartAccount' : 'eoa';
-        const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-        await provider?.setPreferredAccount(accountType);
-        EventsController.sendEvent({
-          type: 'track',
-          event: 'SET_PREFERRED_ACCOUNT_TYPE',
-          properties: {
-            accountType,
-            network: ConnectionsController.state.activeNetwork?.caipNetworkId || ''
-          }
-        });
+      const namespace = ConnectionsController.state.activeNamespace;
+      const network = ConnectionsController.state.activeNetwork;
+      if (isAuth && namespace && network) {
+        const newType = ConnectionsController.state.accountType === 'eoa' ? 'smartAccount' : 'eoa';
+        switchAccountType(namespace, newType, network);
       }
     } catch (error) {
-      ModalController.setLoading(false);
       SnackController.showError('Error switching account type');
     }
   };
 
-  const getUserEmail = () => {
-    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-    if (!provider) return '';
-
-    return provider.getEmail();
-  };
-
-  const getUsername = () => {
-    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-    if (!provider) return '';
-
-    return provider.getUsername();
-  };
-
   const onExplorerPress = () => {
     if (showExplorer && ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url) {
       Linking.openURL(ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url);
@@ -122,9 +104,8 @@ export function AccountDefaultView() {
   };
 
   const onCopyAddress = () => {
-    //TODO: Check ENS name
     if (OptionsController.isClipboardAvailable() && ConnectionsController.state.activeAddress) {
-      const _address = ConnectionsController.state.activeAddress.split(':')[2];
+      const _address = CoreHelperUtil.getPlainAddress(ConnectionsController.state.activeAddress);
       if (_address) {
         OptionsController.copyToClipboard(_address);
         SnackController.showSuccess('Address copied');
@@ -133,7 +114,7 @@ export function AccountDefaultView() {
   };
 
   const onSwapPress = () => {
-    SwapController.resetState();
+    SwapController.clearTokens();
     EventsController.sendEvent({
       type: 'track',
       event: 'OPEN_SWAP',
@@ -173,9 +154,30 @@ export function AccountDefaultView() {
     RouterController.push('UpgradeEmailWallet');
   };
 
-  const onEmailPress = () => {
-    if (ConnectionController.state.connectedSocialProvider) return;
-    RouterController.push('UpdateEmailWallet', { email: getUserEmail() });
+  const onSendPress = () => {
+    const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+    const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SEND',
+      properties: { network, isSmartAccount }
+    });
+    RouterController.push('WalletSend');
+  };
+
+  const onEmailPress = async () => {
+    // TODO: Uncomment when email update is enabled
+    // const email = ConnectionsController.state.connection?.properties?.email;
+    // const provider = ConnectionsController.state.connection?.properties?.provider;
+    // if (provider !== 'email' || !email) return;
+    // const sessionTopic = ConnectionsController.state.connection?.properties?.sessionTopic;
+    // if (!sessionTopic) {
+    //   throw new Error('Session topic not found');
+    // }
+    // const link = `${CommonConstantsUtil.WEB_WALLET_URL}/emailUpdate/${sessionTopic}`;
+    // await CoreHelperUtil.openLink(link);
+    // Subscribe to email update event
   };
 
   return (
@@ -191,12 +193,12 @@ export function AccountDefaultView() {
       />
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
         <FlexView alignItems="center" padding={['3xl', 's', '3xl', 's']}>
-          <Avatar imageSrc={profileImage} address={account ?? ''} />
+          <Avatar imageSrc={identity?.avatar} address={account ?? ''} />
           <FlexView flexDirection="row" alignItems="center" margin={['s', '0', '0', '0']}>
             <Text variant="medium-title-600">
-              {profileName
+              {identity?.name
                 ? UiUtil.getTruncateString({
-                    string: profileName,
+                    string: identity?.name,
                     charsStart: 20,
                     charsEnd: 0,
                     truncate: 'end'
@@ -239,11 +241,11 @@ export function AccountDefaultView() {
             {isAuth && (
               <AuthButtons
                 onUpgradePress={onUpgradePress}
-                socialProvider={connectedSocialProvider}
+                socialProvider={connection?.properties?.provider}
                 onPress={onEmailPress}
                 style={styles.actionButton}
                 text={UiUtil.getTruncateString({
-                  string: getUsername() || getUserEmail() || '',
+                  string: connection?.properties?.username || connection?.properties?.email || '',
                   charsStart: 30,
                   charsEnd: 0,
                   truncate: 'end'
@@ -265,7 +267,7 @@ export function AccountDefaultView() {
                 {activeNetwork?.name}
               </Text>
             </ListItem>
-            {!isAuth && isOnRampEnabled && (
+            {showBuy && (
               <ListItem
                 chevron
                 icon="card"
@@ -278,6 +280,19 @@ export function AccountDefaultView() {
                 <Text color="fg-100">Buy crypto</Text>
               </ListItem>
             )}
+            {showSend && (
+              <ListItem
+                chevron
+                icon="paperplane"
+                iconColor="accent-100"
+                iconBackgroundColor="accent-glass-015"
+                onPress={onSendPress}
+                testID="button-send"
+                style={styles.actionButton}
+              >
+                <Text color="fg-100">Send</Text>
+              </ListItem>
+            )}
             {showSwaps && (
               <ListItem
                 chevron
@@ -316,7 +331,7 @@ export function AccountDefaultView() {
                 loading={loading}
               >
                 <Text color="fg-100">{`Switch to your ${
-                  preferredAccountType === 'eoa' ? 'smart account' : 'EOA'
+                  accountType === 'eoa' ? 'smart account' : 'EOA'
                 }`}</Text>
               </ListItem>
             )}

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { ScrollView } from 'react-native';
 import {
   AccountPill,
@@ -7,16 +7,15 @@ import {
   Icon,
   IconLink,
   NetworkButton,
-  useTheme,
-  Promo
+  useTheme
 } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
-  AssetUtil,
+  AssetController,
   ConnectionsController,
+  CoreHelperUtil,
+  EventsController,
   ModalController,
-  NetworkController,
   RouterController,
   SendController
 } from '@reown/appkit-core-react-native';
@@ -27,13 +26,12 @@ import styles from './styles';
 
 export function AccountView() {
   const Theme = useTheme();
+  const [isLoading, setIsLoading] = useState(false);
   const { padding } = useCustomDimensions();
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const { address, profileName, profileImage, preferredAccountType } = useSnapshot(
-    AccountController.state
-  );
-  const showActivate =
-    preferredAccountType === 'eoa' && NetworkController.checkIfSmartAccountEnabled();
+  const { activeNetwork, activeAddress, identity } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const address = CoreHelperUtil.getPlainAddress(activeAddress);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   const onProfilePress = () => {
     RouterController.push('AccountDefault');
@@ -41,22 +39,24 @@ export function AccountView() {
 
   const onNetworkPress = () => {
     RouterController.push('Networks');
-  };
-
-  const onActivatePress = () => {
-    RouterController.push('UpgradeToSmartAccount');
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_NETWORKS'
+    });
   };
 
   useEffect(() => {
-    AccountController.fetchTokenBalance();
-    SendController.resetSend();
-  }, []);
+    async function fetchBalance() {
+      setIsLoading(true);
+      await ConnectionsController.fetchBalance();
+      setIsLoading(false);
+    }
 
-  useEffect(() => {
-    AccountController.fetchTokenBalance();
+    fetchBalance();
+    SendController.resetState();
 
     const balanceInterval = setInterval(() => {
-      AccountController.fetchTokenBalance();
+      fetchBalance();
     }, 10000);
 
     return () => {
@@ -75,7 +75,7 @@ export function AccountView() {
       ]}
     >
       <NetworkButton
-        imageSrc={AssetUtil.getNetworkImage(activeNetwork?.id)}
+        imageSrc={networkImage}
         imageHeaders={ApiController._getApiHeaders()}
         onPress={onNetworkPress}
         style={styles.networkIcon}
@@ -85,21 +85,14 @@ export function AccountView() {
       </NetworkButton>
       <IconLink icon="close" style={styles.closeIcon} onPress={ModalController.close} />
       <FlexView padding={['3xl', '0', '0', '0']} style={[{ backgroundColor: Theme['bg-100'] }]}>
-        {showActivate && (
-          <Promo
-            style={styles.promoPill}
-            text="Switch to your smart account"
-            onPress={onActivatePress}
-          />
-        )}
         <AccountPill
           address={address}
-          profileName={profileName}
-          profileImage={profileImage}
+          profileName={identity?.name}
+          profileImage={identity?.avatar}
           onPress={onProfilePress}
           style={styles.accountPill}
         />
-        <AccountWalletFeatures />
+        <AccountWalletFeatures isBalanceLoading={isLoading} />
       </FlexView>
     </ScrollView>
   );

package/src/views/w3m-account-view/styles.ts

@@ -23,10 +23,5 @@ export default StyleSheet.create({
     alignSelf: 'center',
     marginBottom: Spacing.s,
     marginHorizontal: Spacing.s
-  },
-  promoPill: {
-    marginTop: Spacing.xs,
-    marginBottom: Spacing['2xl'],
-    alignSelf: 'center'
   }
 });

package/src/views/w3m-all-wallets-view/index.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import {
   ConnectionController,
-  ConnectorController,
   EventsController,
   RouterController,
   type WcWallet
 } from '@reown/appkit-core-react-native';
 import { FlexView, IconLink, SearchBar, Spacing, useTheme } from '@reown/appkit-ui-react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
 
 import styles from './styles';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
@@ -25,9 +25,11 @@ export function AllWalletsView() {
   const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
 
   const onWalletPress = (wallet: WcWallet) => {
-    const connector = ConnectorController.state.connectors.find(c => c.explorerId === wallet.id);
-    if (connector) {
-      RouterController.push('ConnectingExternal', { connector, wallet });
+    const isExternal =
+      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
+      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
     } else {
       RouterController.push('ConnectingWalletConnect', { wallet });
     }

package/src/views/w3m-connect-socials-view/index.tsx

@@ -1,13 +1,10 @@
-import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
 import { StringUtil, type SocialProvider } from '@reown/appkit-common-react-native';
 import {
-  ConnectionController,
   EventsController,
   OptionsController,
-  RouterController,
-  WebviewController
+  RouterController
 } from '@reown/appkit-core-react-native';
 import { FlexView, ListSocial, Text } from '@reown/appkit-ui-react-native';
 
@@ -20,22 +17,14 @@ export function ConnectSocialsView() {
   const socialProviders = (features?.socials ?? []) as SocialProvider[];
 
   const onItemPress = (provider: SocialProvider) => {
-    ConnectionController.setSelectedSocialProvider(provider);
     EventsController.sendEvent({
       type: 'track',
       event: 'SOCIAL_LOGIN_STARTED',
       properties: { provider }
     });
-    if (provider === 'farcaster') {
-      RouterController.push('ConnectingFarcaster');
-    } else {
-      RouterController.push('ConnectingSocial');
-    }
-  };
 
-  useEffect(() => {
-    WebviewController.setConnecting(false);
-  }, []);
+    RouterController.push('ConnectingSocial', { socialProvider: provider });
+  };
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>

package/src/views/w3m-connect-view/components/all-wallet-list.tsx

@@ -14,10 +14,9 @@ import { filterOutRecentWallets } from '../utils';
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onWalletPress: (wallet: WcWallet) => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function AllWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
+export function AllWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
   const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
   const imageHeaders = ApiController._getApiHeaders();
@@ -35,7 +34,7 @@ export function AllWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled
     UiUtil.TOTAL_VISIBLE_WALLETS - RECENT_COUNT
   );
 
-  if (!isWalletConnectEnabled || !list?.length) {
+  if (!list?.length) {
     return null;
   }
 

package/src/views/w3m-connect-view/components/all-wallets-button.tsx

@@ -6,16 +6,11 @@ import type { StyleProp, ViewStyle } from 'react-native';
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onPress: () => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function AllWalletsButton({ itemStyle, onPress, isWalletConnectEnabled }: Props) {
+export function AllWalletsButton({ itemStyle, onPress }: Props) {
   const { installed, count } = useSnapshot(ApiController.state);
 
-  if (!isWalletConnectEnabled) {
-    return null;
-  }
-
   const total = installed.length + count;
   const label = total > 10 ? `${Math.floor(total / 10) * 10}+` : total;
 

package/src/views/w3m-connect-view/components/custom-wallet-list.tsx

@@ -6,7 +6,8 @@ import {
   type OptionsControllerState,
   ApiController,
   ConnectionController,
-  type ConnectionControllerState
+  type ConnectionControllerState,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
 import { filterOutRecentWallets } from '../utils';
@@ -14,16 +15,16 @@ import { filterOutRecentWallets } from '../utils';
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onWalletPress: (wallet: CustomWallet) => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function CustomWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
+export function CustomWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed } = useSnapshot(ApiController.state);
+  const imageHeaders = ApiController._getApiHeaders();
   const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
-  if (!isWalletConnectEnabled || !customWallets?.length) {
+  if (!customWallets?.length) {
     return null;
   }
 
@@ -32,7 +33,8 @@ export function CustomWalletList({ itemStyle, onWalletPress, isWalletConnectEnab
   return list.map(wallet => (
     <ListWallet
       key={wallet.id}
-      imageSrc={wallet.image_url}
+      imageSrc={AssetUtil.getWalletImage(wallet)}
+      imageHeaders={imageHeaders}
       name={wallet.name}
       onPress={() => onWalletPress(wallet)}
       style={itemStyle}